《网页设计与制作（活页式）》 课件 项目8 婚庆网站首页.pptx

网页设计与制作项目八婚庆网站首页N

知识目标掌握分析完整网页的方法掌握页面布局方法掌握代码的编写技巧

任务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使用浮动方式进行定位。

任务1.3〓网页制作工具2.页面整体布局

任务1.3〓网页制作工具2.页面整体布局步骤3：添加CSS样式在head标签中添加style标签，对每块内容进行不同的设置，内容如下。（1）*的设置。*表示通用选择器，可对网页默认内容进行设置，设置网页默认外边距为0，设置网页默认内边距为0，设置网页默认无边框，设置网页默认文字大小为12px，定义网页默认字体为宋体。（2）body的设置。设置网页的背景颜色为#580000。（3）最外层div的设置。设置宽度为1007px，设置上、下边距为0，左右居中对齐。

任务1.3〓网页制作工具2.页面整体布局（4）head的设置。设置宽度为960px，设置高度为110px，设置上、下外边距为0，左右居中对齐。（5）nav的设置。设置宽度为1007px，设置高度为65px，设置背景图片，清除浮动，设置上、下外边距为0，左右居中对齐。（6）main的设置。设置宽度为960px，设置背景颜色，设置高度为自动，设置上、下外边距为0，左右居中对齐。（7）m1的设置。设置宽度设置宽度950px，设置高度为210px，设置内边距为5px。

任务1.3〓网页制作工具2.页面整体布局（8）login的设置。指定背景图片，设置背景图片不重复，设置高度140px，设置宽度177px，设置左浮动，设置内边距分别为60px、10px、10px、20px，设置文本居中对齐。（9）ad设置。设置宽度725px，设置高度210px，设置左浮动，设置左侧外边距10px。（10）m2的设置。设置高度279px，设置宽度960px。（11）hlzx的设置。设置宽度596px，设置左浮动，设置左侧外边距6px，设置背景颜色为#f7efca，279px。

任务1.3〓网页制作工具2.页面整体布局（12）show的设置。设置宽度335px，设置右浮动，设置右侧外边距6px，设置背景颜色为#f7efca，设置高度279px。（13）m3的设置。设置宽度961px，设置高度240px，（14）link的设置。设置宽度960px，设置高度35px，设置背景颜色为#f6e1b6，设置上、下外边距为0，左右居中对齐。（15）foot的设置。设置宽度960px，设置上、下外边距为0，左右居中对齐，设置背景图片，设置高度101px，清除浮动，设置文字居中对齐，设置文字大小12px，设置行高25px。

任务1.3〓网页制作工具2.页面整体布局

任务1.3〓网页制作工具2.页面整体布局

任务1.3〓网页制作工具2.页面整体布局

任务1