项目8 婚庆网站首页（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 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，设置网页默认无边框，设置网页默认文字大小为12 px，定义网页默认字体为宋体。 　　（2）body的设置。设置网页的背景颜色为#580000。 　　（3）最外层div的设置。设置宽度为1007 px，设置上、下边距为0，左右居中对齐。 （4）head的设置。设置宽度为960 px，设置高度为110 px，设置上、下外边距为0，左右居中对齐。 　　（5）nav的设置。设置宽度为1007 px，设置高度为65 px，设置背景图片，清除浮动，设置上、下外边距为0，左右居中对齐。 　　（6）main的设置。设置宽度为960 px，设置背景颜色，设置高度为自动，设置上、下外边距为0，左右居中对齐。 　　（7）m1的设置。设置宽度设置宽度950 px，设置高度为210 px，设置内边距为5 px。 （8）login的设置。指定背景图片，设置背景图片不重复，设置高度140 px，设置宽度177 px，设置左浮动，设置内边距分别为60 px 10 px 10 px 20 px，设置文本居中对齐。 　　（9）ad设置。设置宽度725 px，设置高度210 px，设置左浮动，设置左侧外边距10 px。 　　（10）m2的设置。设置高度279 px，设置宽度960 px。 　　（11）hlzx的设置。设置宽度596 px，设置左浮动，设置左侧外边距6 px，设置背景颜色为#f7efca，279 px。 （12）show的设置。设置宽度335 px，设置右浮动，设置右侧外边距6 px，设置背景颜色为#f7efca，设置高度279 px。 　　（13）m3的设置。设置宽度961 px，设置高度240 px， 　　（14）link的设置。设置宽度960 px，设置高度35 px，设置背景颜色为#f6e1b6，设置上、下外边距为0，左右居中对齐。 　　（15）foot的设置。设置宽度960 px，设置上、下外边距为0，左右居中对齐，设置背景图片，设置高度101 px，清除浮动，设置文字居中对齐，设置文字大小12 px，设置行高25 px。 注意： 在设置login层的样式时，由于设置了padding：60px 10px 10px 20px属性， 因此其实际宽度应该是“width值+左右内边距宽度值”， 即177px+10px+20px=207px；实际高度值应是“height值+上下内边距值”， 即140px+60px+10px=210px，正好与m1层的高度相等。在进行网页布局时， 一定要计算好各元素的宽度、高度，以及内外边距等，使布局更合理。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作网页头部 1. 教师展示PPT，对制作网页头部进行具体讲解。 网页头部需要包含网站logo和电话号码，logo是网站的标志， 电话号码是网站中所提供业务的联系方式，具体步骤如下。 步骤1： 添加logo和电话号码 　　在head中使用<img>标签添加logo，宽度和高度分别为385 px和110 px，用<span>标签控制添加的电话号码 步骤2： 添加CSS样式 　　logo和电话号码分开设置，具体如下。 　　（1）logo的设置。设置logo图片左浮动。 　　（2）电话号码的设置。设置电话号码右浮动，外边距为40 px 40 px 0 px 0 px，文字颜色为#FFFFFF，文字大小为36 px。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作网页导航部分 1. 教师展示PPT，对制作网页导航部分进行具体讲解。 用无序列表来制作导航栏，将每一个栏目放进<li>标签里并设置外间距宽度，然后将每一个列表项向左浮动并设置间距，最后设置超链接样式。 步骤1： 添加列表和文本 　　在ID=nav的<div>标签中添加<ul>和<li>标签， 内容分别为“首页”“机构介绍”“作品欣赏”“套系报价”“优惠活动”“联系我们”，同时为文本添加超链接。 步骤2： 添加CSS样式 　　列表、列表项和超链接的CSS样式设置具体如下。 　　（1）ul的设置。设置无序列表的高度为30 px， 内上边距为30 px，无左外边距为80 px。 　　（2）li的设置。设置列表项编号为无，向左浮动， 宽度为80 px，左外间距为40 px，列表项内水平居中， 字体为黑体，文字大小为14 px，行高为22 px。 （3）a的设置。设置超链接颜色为#fff7b3， 无下画线，展现形式为快。 （4）a: hover的设置。 设置鼠标指针经过时超链接的颜色为#8b1f1c，行高为24 px。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作登录部分 1. 教师展示PPT，对登录部分进行具体讲解。 登录部分部分由表单和按钮组成，表单和按钮的由<form><label>和<input>标签实现，具体内容如下。 　　步骤1： 添加表单和按钮 在class=login的<div>标签中添加<form>标签， 再使用<input>标签在表单中加入文本框、密码框和两个按钮。 （1）文本框设置。使用<input>标签添加一个文本框， 并用<label>标签注记为“用户名： ”，输入的字体大小为15 pt， 可输入8个字节。 （2）密码框设置。使用<input>标签添加一个密码框， 并用<label>标签注记为“密码： ”，输入的字体大小为15 pt， 可输入8个字节。 （3）登录按钮设置。使用<input>标签添加一个登录按钮。 （4）重置按钮设置。使用<input>标签添加一个重置按钮。 步骤2： 添加CSS样式 　　（1）lable的设置。设置label为块元素，宽度为50 px， 颜色为#6d520d，行高为24 px，文字右对齐。 　　（2）文本框和密码框的设置。文本框和密码框统一设置， 设置边框为1px的实线，颜色为#9c750e，背景颜色为#c4a354， 宽度为110 px，行高为24 px，高度为24 px， 输入内容的颜色为#FFFFFF，使用相对定位， 向元素的原始左侧位置增加20 px，从元素的原始顶端位置减去24 px。 （3）按钮的设置。 两个按钮统一设置，设置背景图片，高度为23 px，宽度为66 px，文字颜色为#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中的内容设置为相对定位，宽度为725 px，高度为210 px，边框为1 px的实线，且颜色为#666，清除浮动。 　　（2）banner_bg设置。将banner_bg中的内容设置为绝对定位，下边框为0 px，背景颜色为#000，高为27 px，宽为725 px。设置透明度为30，元素层叠顺序的参数为1000，设置光标呈现为指示链接的指针。 （3）banner_info设置。将banner_info中的内容设置为绝对定位，下边框为0 px，左外边距边界与其包含块左边界之间的偏移为5 px，行高为27 px，颜色为#fff。设置元素层叠顺序的参数为1001。 　　（4）banner ul设置。将banner ul中的内容设置为绝对定位，列表项无标记。设置透明度为75，边框为1 px的实线，且颜色为#fff。设置元素层叠顺序的参数为1002，内边距和外边距均为零。设置下边框为3 px，右外边距边界与其包含块右边界之间的偏移为5 px。 （5）banner ul li设置。设置上下内边距为0 px，左右内边距为5 px。设置元素为左浮动，元素展现方式为块级，颜色为#fff，边框为细实线，颜色为#fff。设置背景颜色为#666。设置光标呈现为指示链接的指针。 　　（6）banner ul li.on设置。设置背景颜色为#900。 　　（7）banner_list a设置。超链接中的图片设置为绝对定位。 步骤3： 添加<script>标签 　　在<head>标签中添加两个<script>标签，第一个<script>标签使用src属性链接“imgapper.js”，第二个<script>标签使用window.onload调用一个方法实现滚动效果。 步骤4： 保存并预览 　　按Ctrl+S组合键保存文档，并在IE浏览器中预览， 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作左侧婚礼资讯部 1. 教师展示PPT，对制作左侧婚礼资讯部进行具体讲解。 左侧婚礼资讯部分的标题上是一张图片，在HTML5中插入图片即可，左边的图片有1 px的边框，可以使其左浮动。右边文字新闻部分也使其左浮动，需要增加左间距。文字内容包括标题、正文和列表项，可以使用<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_ad img设置。设置图片宽度为118 px，高度为145 px，边框为1 px的实线，且颜色为#7b0002。设置图片上、下外边距为20 px，左、右外边距为0 px，浮动方向为左浮动。 　　（2）hlzx_ad dl设置。设置定义列表左浮动，宽度为360 px，上、下外边距分别为5 px和40 px，左右外边距为0 px。 　　（3）hlzx_ad dt设置。设置文本颜色为#582c00，并加粗。设置行高为30 px。 （4）hlzx_ad dd设置。设置文本颜色为#a1411d，首行缩进20 px，行高为24 px，左外边距为20 px。 　　（5）hlzx_ad ul设置。设置无序列表左浮动，宽度为300 px，左外边距为40 px。 　　（6）hlzx_ad ul li设置。设置列表符号为none，即没有符号显示。列表项高度为25 px，行高为25 px，首行缩进15 px。设置背景图片。 　　（7）hlzx_ad ul li a设置。超链接的颜色设置为#580c00，没有下画线。 　　（8）hlzx_ ad ul li a: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的左外边距为0 px， 上外边距为0 px，边框线为6 px的实线，且颜色为#b69e63。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作图片列表显示部分 1. 教师展示PPT，对制作图片列表显示部分进行具体讲解。 图片列表显示部分用定义列表的方式布局。 使用<dt>和<dd>标签，分别设置图片和图片说明，再分别设置样式。 图片是并列显示则用4个定义列表来进行横向布局。 步骤1： 添加文本 　　（1）在id=m3的<div>标签中添加一张标题图片。 添加标题图片。使用<img/>标签添加标题图片，图片说明为zpsx。 　　（2）在id=m3的<div>标签中添加定义列表。 在<dt>标签中添加图片，并为图片添加超链接，使用<dd>标签定义文本。 步骤2： 添加CSS样式 　　（1）m3 dl设置。设置定义列表左浮动，左外边距为40 px， 宽度为190 px，居中对齐。 　　（2）m3 dl img设置。设置图片的上外边距为8 px， 边框为3 px的实线，且颜色为#d1bd94。 　　（3）m3 dl dd设置。设置行高为35 px，文字大小为12 px， 文字加粗显示。 （4）超链接设置。设置未被访问和访问后的文本颜色为#937943，去除下画线。鼠标指针浮动在超链接上和点击链接时的颜色为#a98c50，无下画线。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作友情链接部分 1. 教师展示PPT，对制作友情链接部分进行具体讲解。 友情链接部分位于all>link层中，只需在id=link的<div>标签中插入<ul><li>和<a>标签即可。提示使用<span>标签将“友情链接：”文本定义为行内标签。具体如下。 步骤1： 添加文本 　　在id=link的<div>标签中添加无序列表。使用<li>标签控制文本，其中“友情链接”使用<span>标签控制。 步骤2： 添加CSS样式 　　（1）link ul设置。设置外边距为150 px，宽度为680 px。 　　（2）link li设置。设置向左浮动，列表符号为none，左外边距为40 px，行高为30 px。文字颜色为#7b0000，文字大小为12 px。 　　（3）link span设置。设置字体加粗。 　　（4）超链接设置。设置未被访问和访问后的文本颜色为#580c00，去除下画线。鼠标指针浮动在超链接上和点击链接时的颜色为#9e3423，无下画线。 2. 学生自主提问，教师对疑难问题进行解答。 · 讲解制作底部 1. 教师展示PPT，对制作底部进行讲解。 前文中已设置好了这部分（foot层）的框架和背景图片，包括添加背景图片，设置背景图不重复显示，清除浮动，文本居中对齐，文字大小，行高等属性。这里只需在id=foot的<div>标签中添加文本即可。 2. 学生自主提问，教师对疑难问题进行解答。 项目小结 本项目主要介绍了婚庆网站首页的制作，具体内容包括案例分析、页面整体布局、制作网页头部、制作网页导航部分、制作登录部分、制作图片展示区、制作左侧婚礼资讯部分、制作视频展示部分、制作图片列表显示部分、制作友情链接部分和制作底部。 通过本项目的学习，掌握首页的整体布局，熟练使用表单制作网页，掌握插入多媒体的方法，为进一步学习网页制作打下坚实基础。 实训15 · 实训名称 网站首页制作流程 · 实训目标 描述网站首页制作的流程 · 实训实施 简要叙述网站首页制作的流程。 1. 案例分析 2. 页面整体布局 3. 制作网页头部 4. 制作网页导航部分 5. 制作登录部分 6. 制作图片展示区 7. 制作视频展示部分 8. 制作友情链接部分 9. 制作底部 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.案例分析能够分析网站首页的风格 2.页面整体布局能够从整体布局网页 3.制作网页头部能够制作完整合理的网页头部 4.制作网页导航部分能够合理设计网页导航部分 5.制作登录部分能够合理设计登录部分 6.制作图片展示区能够实现图片展示 7.制作视频展示部分能够实现视频展示 8.制作友情链接部分能够合理实现友情链接部分 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$