《网页设计与制作（活页式）》 教案 项目8 婚庆网站首页.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：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，设