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

网页设计与制作 项目八 婚庆网站首页 N 1 知识目标 掌握分析完整网页的方法 掌握页面布局方法 掌握代码的编写技巧 ‹#› 网页设计与制作 2 任务1.3〓网页制作工具 1. 案例分析 从网站定位来看，婚庆网站面向的用户主要为即将步入婚礼殿堂的青年男女。婚礼是一件非常喜庆的事情，因此网站选用具有较强视觉冲击力的红色作为主色调，logo也与其相协调。 　　网页的可读性和观赏性对一个网站来说非常重要，整个网页的设计特别是首页的设计及内容决定了网站的质量。首页要设计用户登录、图片展示区、婚礼现场秀、婚礼资讯和作品欣赏等。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 1. 案例分析 整体的设计效果 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 　 对页面进行整体布局，选用三列布局，整个页面居中显示。网页第一行为头部内容，第二行为导航内容，第三行为登录、图片、新闻资讯、视频展示，第四行为图片列表，第五行为友情链接，第六行为页面底部内容。页面整体布局的具体步骤如下： ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 步骤1： 创建HTML5文档 　　打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 步骤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>使用浮动方式进行定位。 ‹#› 网页设计与制作 7 任务1.3〓网页制作工具 2. 页面整体布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 步骤3： 添加CSS样式 　在<head>标签中添加<style>标签，对每块内容进行不同的设置，内容如下。 （1）*的设置。*表示通用选择器，可对网页默认内容进行设置，设置网页默认外边距为0，设置网页默认内边距为0，设置网页默认无边框，设置网页默认文字大小为12 px，定义网页默认字体为宋体。 （2）body的设置。设置网页的背景颜色为#580000。 （3）最外层div的设置。设置宽度为1007 px，设置上、下边距为0，左右居中对齐。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 （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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 （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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 （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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 2. 页面整体布局 注意： 在设置login层的样式时，由于设置了padding：60px 10px 10px 20px属性， 因此其实际宽度应该是“width值+左右内边距宽度值”， 即177px+10px+20px=207px；实际高度值应是“height值+上下内边距值”， 即140px+60px+10px=210px，正好与m1层的高度相等。在进行网页布局时， 一定要计算好各元素的宽度、高度，以及内外边距等，使布局更合理。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 3. 制作网页头部 网页头部需要包含网站logo和电话号码，logo是网站的标志， 电话号码是网站中所提供业务的联系方式，具体步骤如下： ‹#› 网页设计与制作 任务1.3〓网页制作工具 3. 制作网页头部 步骤1： 添加logo和电话号码 在head中使用<img>标签添加logo，宽度和高度分别为385 px和110 px，用<span>标签控制添加的电话号码。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 3. 制作网页头部 步骤2： 添加CSS样式 logo和电话号码分开设置，具体如下： （1）logo的设置。设置logo图片左浮动。 （2）电话号码的设置。设置电话号码右浮动，外边距为40 px、 40 px、 0 px 、0 px，文字颜色为#FFFFFF，文字大小为36 px。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 4. 制作网页导航部分 用无序列表来制作导航栏，将每一个栏目放进<li>标签里并设置外间距宽度，然后将每一个列表项向左浮动并设置间距，最后设置超链接样式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 4. 制作网页导航部分 步骤1：添加列表和文本 在ID=nav的<div>标签中添加<ul>和<li>标签，内容分别为“首页”、“机构介绍”、“作品欣赏”、“套系报价”、“优惠活动”、“联系我们”，同时为文本添加超链接。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 4. 制作网页导航部分 步骤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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 4. 制作网页导航部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 5. 制作登录部分 登录部分部分由表单和按钮组成，表单和按钮的由<form><label>和<input>标签实现，具体内容如下： 步骤1： 添加表单和按钮 在class=login的<div>标签中添加<form>标签，再使用<input>标签在表单中加入文本框、密码框和两个按钮。 （1）文本框设置。使用<input>标签添加一个文本框，并用<label>标签注记为“用户名：”，输入的字体大小为15 pt，可输入8个字节。 （2）密码框设置。使用<input>标签添加一个密码框，并用<label>标签注记为“密码：”，输入的字体大小为15 pt，可输入8个字节。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 5. 制作登录部分 （3）登录按钮设置。使用<input>标签添加一个登录按钮。 （4）重置按钮设置。使用<input>标签添加一个重置按钮。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 5. 制作登录部分 步骤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，不使用默认边框。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 5. 制作登录部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 图片展示区是用JavaScript脚本实现的“图片轮播”效果，在制作该效果之前首先要准备4张同样大小的图片。在ID为ad的<div>标签中（位于all>main>m1>层中）设置。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 步骤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>标签中添加四张图片。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 步骤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，设置光标呈现为指示链接的指针。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 （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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 （5）banner ul li设置。设置上下内边距为0 px，左右内边距为5 px。设置元素为左浮动，元素展现方式为块级，颜色为#fff，边框为细实线，颜色为#fff。设置背景颜色为#666。设置光标呈现为指示链接的指针。 （6）banner ul li.on设置。设置背景颜色为#900。 （7）banner_list a设置。超链接中的图片设置为绝对定位。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 步骤3： 添加<script>标签 　在<head>标签中添加两个<script>标签，第一个<script>标签使用src属性链接“imgapper.js”，第二个<script>标签使用window.onload调用一个方法实现滚动效果。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 6. 制作图片展示区 步骤4： 保存并预览 　　按Ctrl+S组合键保存文档，并在IE浏览器中预览。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 左侧婚礼资讯部分的标题上是一张图片，在HTML5中插入图片即可，左边的图片有1 px的边框，可以使其左浮动。右边文字新闻部分也使其左浮动，需要增加左间距。文字内容包括标题、正文和列表项，可以使用<dl>定义列表和<ul>无序列表完成布局，具体内容如下： ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 步骤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>标签定义文本，并添加超链接。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 步骤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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 （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。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 7. 制作左侧婚礼资讯部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 8. 制作视频展示部分 视频展示部分位于all>main>m2>show层中，只需在class=show的<div>标签中插入标题图片和主图片或视频即可。 步骤1： 添加图片和视频 （1）在class=show的<div>标签中添加一张标题图片。使用<img/>标签添加标题图片。设置图片宽为335，高为44。 （2）在class=show的<div>标签中添加一个视频。使用<object/>标签添加视频。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 8. 制作视频展示部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 8. 制作视频展示部分 步骤2： 添加CSS样式 　　CSS样式只需要控制video，不需要控制<img/>标签中的元素。 设置video的左外边距为0 px，上外边距为0 px，边框线为6 px的实线，且颜色为#b69e63。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 8. 制作视频展示部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 9. 制作图片列表显示部分 图片列表显示部分用定义列表的方式布局。使用<dt>和<dd>标签，分别设置图片和图片说明，再分别设置样式。 图片是并列显示则用4个定义列表来进行横向布局。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 9. 制作图片列表显示部分 步骤1： 添加文本 （1）在id=m3的<div>标签中添加一张标题图片。添加标题图片。使用<img/>标签添加标题图片，图片说明为zpsx。 （2）在id=m3的<div>标签中添加定义列表。在<dt>标签中添加图片，并为图片添加超链接，使用<dd>标签定义文本。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 9. 制作图片列表显示部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 9. 制作图片列表显示部分 步骤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，无下画线。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 9. 制作图片列表显示部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 10. 制作友情链接部分 友情链接部分位于all>link层中，只需在id=link的<div>标签中插入<ul><li>和<a>标签即可。提示使用<span>标签将“友情链接：”文本定义为行内标签。具体如下： ‹#› 网页设计与制作 任务1.3〓网页制作工具 10. 制作友情链接部分 步骤1：添加文本 在id=link的<div>标签中添加无序列表。使用<li>标签控制文本，其中“友情链接”使用<span>标签控制。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 10. 制作友情链接部分 步骤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，无下画线。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 10. 制作友情链接部分 ‹#› 网页设计与制作 任务1.3〓网页制作工具 11. 制作底部 前文中已设置好了这部分（foot层）的框架和背景图片，包括添加背景图片，设置背景图不重复显示，清除浮动，文本居中对齐，文字大小，行高等属性。这里只需在id=foot的<div>标签中添加文本即可。 ‹#› 网页设计与制作 项目小结 本项目主要介绍了婚庆网站首页的制作，具体内容包括案例分析、页面整体布局、制作网页头部、制作网页导航部分、制作登录部分、制作图片展示区、制作左侧婚礼资讯部分、制作视频展示部分、制作图片列表显示部分、制作友情链接部分和制作底部。 通过本项目的学习，掌握首页的整体布局，熟练使用表单制作网页，掌握插入多媒体的方法，为进一步学习网页制作打下坚实基础。 谢谢 $$