《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页_第1页
《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页_第2页
《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页_第3页
《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页_第4页
《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作》教学设计课程名称：网页设计与制作授课年级：20年级授课学期：20学年第一学期教师姓名：老师

20年月日课题名称项目八婚庆网站首页计划课时课时内容分析婚礼对于每个人都是重要的，婚礼的风格反映新人的个性。婚庆网站首页是为新人提供婚纱摄影、婚礼策划、婚宴酒席、蜜月旅行等服务的平台。相较于传统的线下婚庆行业，婚庆网站提供了更丰富的选择，可以有效地减少用户决策时间。教学目标掌握分析完整网页的方法。掌握页面布局方法。掌握代码的编写技巧。重点及措施教学重点：制作导航栏；制作表单；制作表格；制作友情链接措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：掌握页面布局方法措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。教学过程内容学习知识点讲解讲解案例分析1.教师展示PPT，对案例分析进行具体讲解。从网站定位来看，婚庆网站面向的用户主要为即将步入婚礼殿堂的青年男女。婚礼是一件非常喜庆的事情，因此网站选用具有较强视觉冲击力的红色作为主色调，logo也与其相协调。网页的可读性和观赏性对一个网站来说非常重要，整个网页的设计特别是首页的设计及内容决定了网站的质量。首页要设计用户登录、图片展示区、婚礼现场秀、婚礼资讯和作品欣赏等。整体的设计效果2.学生自主提问，教师对疑难问题进行解答。讲解页面整体布局1.教师展示PPT，对页面整体布局进行具体讲解。对页面进行整体布局，选用三列布局，整个页面居中显示。网页第一行为头部内容，第二行为导航内容，第三行为登录、图片、新闻资讯、视频展示，第四行为图片列表，第五行为友情链接，第六行为页面底部内容。页面整体布局的具体步骤如下。步骤1：创建HTML5文档打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式步骤2：添加文本为网页添加文本，在<title>标签中输入“婚礼策划机构首页”。该网页整个页面布局是常见的三列布局，整个页面居中显示。其中第一行放置网站logo及导航；第二行放置用户登录、图片展示、婚礼资讯、视频展示、作品欣赏；第三行放置友情链接与网站相关信息。在具体布局网页时，页面采取固定宽度且居中的办法，构建一个大的<div>（#all），里面放置5个<div>，分别为头部#head，导航#nav，主体#main，友情链接#link，底部#foot。主体#main部分放置3个<div>，分别是#m1、#m2和#m3。#m1和#m2中又分别包含<div>，其中有.login、.ad、.hlzx和.show，其中横向排列的<div>使用浮动方式进行定位。步骤3：添加CSS样式在<head>标签中添加<style>标签，对每块内容进行不同的设置，内容如下。（1）*的设置。*表示通用选择器，可对网页默认内容进行设置，设置网页默认外边距为0，设置网页默认内边距为0，设置网页默认无边框，设置网页默认文字大小为12px，定义网页默认字体为宋体。（2）body的设置。设置网页的背景颜色为#580000。（3）最外层div的设置。设置宽度为1007px，设置上、下边距为0，左右居中对齐。（4）head的设置。设置宽度为960px，设置高度为110px，设置上、下外边距为0，左右居中对齐。（5）nav的设置。设置宽度为1007px，设置高度为65px，设置背景图片，清除浮动，设置上、下外边距为0，左右居中对齐。（6）main的设置。设置宽度为960px，设置背景颜色，设置高度为自动，设置上、下外边距为0，左右居中对齐。（7）m1的设置。设置宽度设置宽度950px，设置高度为210px，设置内边距为5px。（8）login的设置。指定背景图片，设置背景图片不重复，设置高度140px，设置宽度177px，设置左浮动，设置内边距分别为60px10px10px20px，设置文本居中对齐。（9）ad设置。设置宽度725px，设置高度210px，设置左浮动，设置左侧外边距10px。（10）m2的设置。设置高度279px，设置宽度960px。（11）hlzx的设置。设置宽度596px，设置左浮动，设置左侧外边距6px，设置背景颜色为#f7efca，279px。（12）show的设置。设置宽度335px，设置右浮动，设置右侧外边距6px，设置背景颜色为#f7efca，设置高度279px。（13）m3的设置。设置宽度961px，设置高度240px，（14）link的设置。设置宽度960px，设置高度35px，设置背景颜色为#f6e1b6，设置上、下外边距为0，左右居中对齐。（15）foot的设置。设置宽度960px，设置上、下外边距为0，左右居中对齐，设置背景图片，设置高度101px，清除浮动，设置文字居中对齐，设置文字大小12px，设置行高25px。注意：在设置login层的样式时，由于设置了padding：60px10px10px20px属性，因此其实际宽度应该是“width值+左右内边距宽度值”，即177px+10px+20px=207px；实际高度值应是“height值+上下内边距值”，即140px+60px+10px=210px，正好与m1层的高度相等。在进行网页布局时，一定要计算好各元素的宽度、高度，以及内外边距等，使布局更合理。2.学生自主提问，教师对疑难问题进行解答。讲解制作网页头部1.教师展示PPT，对制作网页头部进行具体讲解。网页头部需要包含网站logo和电话号码，logo是网站的标志，电话号码是网站中所提供业务的联系方式，具体步骤如下。步骤1：添加logo和电话号码在head中使用<img>标签添加logo，宽度和高度分别为385px和110px，用<span>标签控制添加的电话号码步骤2：添加CSS样式logo和电话号码分开设置，具体如下。（1）logo的设置。设置logo图片左浮动。（2）电话号码的设置。设置电话号码右浮动，外边距为40px40px0px0px，文字颜色为#FFFFFF，文字大小为36px。2.学生自主提问，教师对疑难问题进行解答。讲解制作网页导航部分1.教师展示PPT，对制作网页导航部分进行具体讲解。用无序列表来制作导航栏，将每一个栏目放进<li>标签里并设置外间距宽度，然后将每一个列表项向左浮动并设置间距，最后设置超链接样式。步骤1：添加列表和文本在ID=nav的<div>标签中添加<ul>和<li>标签，内容分别为“首页”“机构介绍”“作品欣赏”“套系报价”“优惠活动”“联系我们”，同时为文本添加超链接。步骤2：添加CSS样式列表、列表项和超链接的CSS样式设置具体如下。（1）ul的设置。设置无序列表的高度为30px，内上边距为30px，无左外边距为80px。（2）li的设置。设置列表项编号为无，向左浮动，宽度为80px，左外间距为40px，列表项内水平居中，字体为黑体，文字大小为14px，行高为22px。（3）a的设置。设置超链接颜色为#fff7b3，无下画线，展现形式为快。（4）a:hover的设置。设置鼠标指针经过时超链接的颜色为#8b1f1c，行高为24px。2.学生自主提问，教师对疑难问题进行解答。讲解制作登录部分1.教师展示PPT，对登录部分进行具体讲解。登录部分部分由表单和按钮组成，表单和按钮的由<form><label>和<input>标签实现，具体内容如下。步骤1：添加表单和按钮在class=login的<div>标签中添加<form>标签，再使用<input>标签在表单中加入文本框、密码框和两个按钮。（1）文本框设置。使用<input>标签添加一个文本框，并用<label>标签注记为“用户名：”，输入的字体大小为15pt，可输入8个字节。（2）密码框设置。使用<input>标签添加一个密码框，并用<label>标签注记为“密码：”，输入的字体大小为15pt，可输入8个字节。（3）登录按钮设置。使用<input>标签添加一个登录按钮。（4）重置按钮设置。使用<input>标签添加一个重置按钮。步骤2：添加CSS样式（1）lable的设置。设置label为块元素，宽度为50px，颜色为#6d520d，行高为24px，文字右对齐。（2）文本框和密码框的设置。文本框和密码框统一设置，设置边框为1px的实线，颜色为#9c750e，背景颜色为#c4a354，宽度为110px，行高为24px，高度为24px，输入内容的颜色为#FFFFFF，使用相对定位，向元素的原始左侧位置增加20px，从元素的原始顶端位置减去24px。（3）按钮的设置。两个按钮统一设置，设置背景图片，高度为23px，宽度为66px，文字颜色为#FFFFFF，边框为none，不使用默认边框。2.学生自主提问，教师对疑难问题进行解答。讲解制作图片展示区1.教师展示PPT，对图片展示区进行具体讲解。图片展示区是用JavaScript脚本实现的“图片轮播”效果，在制作该效果之前首先要准备4张同样大小的图片。在ID为ad的<div>标签中（位于all>main>m1>层中）设置。步骤1：添加图片（1）在class=ad的<div>标签中添加ID=banner的<div>标签，在ID=banner的<div>标签中添加两个<div>标签，分别为ID=banner_bg和ID=banner_list。（2）在ID=banner_bg的<div>标签下面添加图像超链接。（3）在图像下面添加一个无序列表。（4）在ID=banner_list的<div>标签中添加四张图片。步骤2：添加CSS样式（1）banner设置。将banner中的内容设置为相对定位，宽度为725px，高度为210px，边框为1px的实线，且颜色为#666，清除浮动。（2）banner_bg设置。将banner_bg中的内容设置为绝对定位，下边框为0px，背景颜色为#000，高为27px，宽为725px。设置透明度为30，元素层叠顺序的参数为1000，设置光标呈现为指示链接的指针。（3）banner_info设置。将banner_info中的内容设置为绝对定位，下边框为0px，左外边距边界与其包含块左边界之间的偏移为5px，行高为27px，颜色为#fff。设置元素层叠顺序的参数为1001。（4）bannerul设置。将bannerul中的内容设置为绝对定位，列表项无标记。设置透明度为75，边框为1px的实线，且颜色为#fff。设置元素层叠顺序的参数为1002，内边距和外边距均为零。设置下边框为3px，右外边距边界与其包含块右边界之间的偏移为5px。（5）bannerulli设置。设置上下内边距为0px，左右内边距为5px。设置元素为左浮动，元素展现方式为块级，颜色为#fff，边框为细实线，颜色为#fff。设置背景颜色为#666。设置光标呈现为指示链接的指针。（6）bannerulli.on设置。设置背景颜色为#900。（7）banner_lista设置。超链接中的图片设置为绝对定位。步骤3：添加<script>标签在<head>标签中添加两个<script>标签，第一个<script>标签使用src属性链接“imgapper.js”，第二个<script>标签使用window.onload调用一个方法实现滚动效果。步骤4：保存并预览按Ctrl+S组合键保存文档，并在IE浏览器中预览，2.学生自主提问，教师对疑难问题进行解答。讲解制作左侧婚礼资讯部1.教师展示PPT，对制作左侧婚礼资讯部进行具体讲解。左侧婚礼资讯部分的标题上是一张图片，在HTML5中插入图片即可，左边的图片有1px的边框，可以使其左浮动。右边文字新闻部分也使其左浮动，需要增加左间距。文字内容包括标题、正文和列表项，可以使用<dl>定义列表和<ul>无序列表完成布局，具体内容如下。步骤1：添加正文（1）在class=hlzx的<div>标签中添加一张标题图片。（2）在class=hlzx的<div>标签中嵌套一个class=hlzx_ad的<div>标签。（3）在class=hlzx_ad的<div>标签中添加一张图片。图片为新闻资讯的配图。（4）在class=hlzx_ad的<div>标签中添加一个定义列表，使用<dt>和<dd>标签定义文本。（5）在class=hlzx_ad的<div>标签中添加一个无序列表，使用<li>标签定义文本，并添加超链接。步骤2：添加CSS样式（1）hlzx_adimg设置。设置图片宽度为118px，高度为145px，边框为1px的实线，且颜色为#7b0002。设置图片上、下外边距为20px，左、右外边距为0px，浮动方向为左浮动。（2）hlzx_addl设置。设置定义列表左浮动，宽度为360px，上、下外边距分别为5px和40px，左右外边距为0px。（3）hlzx_addt设置。设置文本颜色为#582c00，并加粗。设置行高为30px。（4）hlzx_addd设置。设置文本颜色为#a1411d，首行缩进20px，行高为24px，左外边距为20px。（5）hlzx_adul设置。设置无序列表左浮动，宽度为300px，左外边距为40px。（6）hlzx_adulli设置。设置列表符号为none，即没有符号显示。列表项高度为25px，行高为25px，首行缩进15px。设置背景图片。（7）hlzx_adullia设置。超链接的颜色设置为#580c00，没有下画线。（8）hlzx_adullia:hover设置。光标放在超链接上显示颜色为#9e3423。2.学生自主提问，教师对疑难问题进行解答。讲解制作视频展示部分1.教师展示PPT，对制作视频展示部分进行具体讲解。视频展示部分位于all>main>m2>show层中，只需在class=show的<div>标签中插入标题图片和主图片或视频即可。步骤1：添加图片和视频（1）在class=show的<div>标签中添加一张标题图片。使用<img/>标签添加标题图片。设置图片宽为335，高为44。（2）在class=show的<div>标签中添加一个视频。使用<object/>标签添加视频。步骤2：添加CSS样式CSS样式只需要控制video，不需要控制<img/>标签中的元素。设置video的左外边距为0px，上外边距为0px，边框线为6px的实线，且颜色为#b69e63。2.学生自主提问，教师对疑难问题进行解答。讲解制作图片列表显示部分1.教师展示PPT，对制作图片列表显示部分进行具体讲解。图片列表显示部分用定义列表的方式布局。使用<dt>和<dd>标签，分别设置图片和图片说明，再分别设置样式。图片是并列显示则用4个定义列表来进行横向布局。步骤1：添加文本（1）在id=m3的<div>标签中添加一张标题图片。添加标题图片。使用<img/>标签添加标题图片，图片说明为zpsx。（2）在id=m3的<div>标签中添加定义列表。在<dt>标签中添加图片，并为图片添加超链接，使用<dd>标签定义文本。步骤2：添加CSS样式（1）m3dl设置。设置定义列表左浮动，左外边距为40px，宽度为190px，居中对齐。（2）m3dlimg设置。设置图片的上外边距为8px，边框为3px的实线，且颜色为#d1bd94。（3）m3dldd设置。设置行高为35px，文字大小为12px，文字加粗显示。（4）超链接设置。设置未被访问和访问后的文本颜色为#937943，去除下画线。鼠标指针浮动在超链接上和点击链接时的颜色为#a98c50，无下画线。2.学生自主提问，教师对疑难问题进行解答。讲解制作友情链接部分1.教师展示PPT，对制作友情链接部分进行具体讲解。友情链接部分位于all>link层中，只需在id=link的<div>标签中插入<ul><li>和<a>标签即可。提示使用<span>标签将“友情链接：”文本定义为行内标签。具体如下。步骤1：添加文本在id=link的<div>标签中添加无序列表。使用<li>标签控制文本，其中“友情链接”使用<span>标签控制。步骤2：添加CSS样式（1）linkul设置。设置外边距为150px，宽度为680px。（2）linkli设置。设置向左浮动，列表符号为none，左外边距为40px，行高为30px。文字颜色为#7b0000，文字大小为12px。（3）linkspan设置。设置字体加粗。（4）超链接设置。设置未

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论