网页设计与制作项目教程单元10-网站详情页的设计与制作.pptx

1、汤智华汤智华 主编主编王爱红王爱红 主审主审【教学导航】【教学导航】教学目标教学目标（1 1）能养成分析页面布局结构的习惯）能养成分析页面布局结构的习惯（2 2）能使用背景色标示盒子的结构）能使用背景色标示盒子的结构（3 3）能应用）能应用CSSCSS样式设计网站详情页的主体布局结构样式设计网站详情页的主体布局结构（4 4）能应用）能应用CSSCSS样式设计网站详情页的局部布局结构样式设计网站详情页的局部布局结构（5 5）能设计与制作导航栏）能设计与制作导航栏（6 6）会插入视频和）会插入视频和SWFSWF动画动画本单元重点本单元重点（1 1）应用）应用CSSCSS样式设计网页的布局结构样式设

2、计网页的布局结构（2 2）设计与制作导航栏）设计与制作导航栏（3 3）插入视频和）插入视频和SWFSWF动画动画本单元难点本单元难点（1 1）应用）应用CSSCSS样式设计网页的布局结构样式设计网页的布局结构（2 2）设计与制作导航栏）设计与制作导航栏教学方法教学方法任务驱动法、分组讨论法任务驱动法、分组讨论法【操作准备】【操作准备】创建所需的文件夹，复制所需的资源到桌面上。即：在本地硬盘创建所需的文件夹，复制所需的资源到桌面上。即：在本地硬盘（例如（例如D D盘）中创建一个文件夹盘）中创建一个文件夹“网页设计与制作练习网页设计与制作练习Unit10”Unit10”，然，然后将光盘中的后将光盘

3、中的“start”“start”文件夹中文件夹中“Unit10”“Unit10”文件夹中的文件夹中的“Unit10“Unit10课程资课程资源源”文件夹所有内容复制到桌面上。文件夹所有内容复制到桌面上。【模仿训练】【模仿训练】任务任务10.1 10.1 北京大学网站详情页的设计与制作北京大学网站详情页的设计与制作 本单元本单元“模仿训练模仿训练”的任务卡如表的任务卡如表10.110.1所示。所示。任务编号任务编号10.110.1任务名称任务名称北京大学网站详情页的设计与制作北京大学网站详情页的设计与制作网页主题网页主题北京大学北京大学计划工时计划工时 网页制作任务描述网页制作任务描述（1 1）

4、设计详情页的主体布局结构和局部布局结构）设计详情页的主体布局结构和局部布局结构（2 2）设计与制作包含导航栏的网页）设计与制作包含导航栏的网页（3 3）制作详情页）制作详情页content.htmlcontent.html（4 4）在详情页）在详情页content.htmlcontent.html中插入中插入SWFSWF动画动画表表10.1 单元单元10“模仿训练模仿训练”任务卡任务卡网页布局结构分析网页布局结构分析使用使用DIVDIV标签标签+CSS+CSS样式布局首页，详情页整体为上、中、下结构样式布局首页，详情页整体为上、中、下结构网页色彩搭配分析网页色彩搭配分析网页中文字的颜色：网页中

5、文字的颜色：#2b2b2b#2b2b2b网页中背景颜色：渐变背景网页中背景颜色：渐变背景网页组成元素分析网页组成元素分析主要包括文字、图像、主要包括文字、图像、SWFSWF动画、视频、顶部二级导航栏、底部导航栏、表动画、视频、顶部二级导航栏、底部导航栏、表单、各种特效等网页元素单、各种特效等网页元素任务实现流程分析任务实现流程分析创建本地站点创建本地站点“单元单元10”10”分析、设计详情页的主体布局结构分析、设计详情页的主体布局结构分析、设分析、设计详情页的局部布局结构计详情页的局部布局结构创建网页文档创建网页文档“content.html”“content.html”设计与制作设计与制作网

6、站详情页的头部区域网站详情页的头部区域设计与制作网站详情页的中部区域设计与制作网站详情页的中部区域设计与制作设计与制作网站详情页的尾部区域网站详情页的尾部区域续表续表 本单元本单元“模仿训练模仿训练”的任务跟踪卡如表的任务跟踪卡如表10.210.2所示。所示。任务编号任务编号开始时间开始时间完成时间完成时间计划工时计划工时实际工时实际工时当前状态当前状态 表表10.2 单元单元10“模仿训练模仿训练”任务跟踪卡任务跟踪卡 本单元本单元“模仿训练模仿训练”网页网页content.htmlcontent.html浏览效果如图浏览效果如图10-110-1所示。所示。图图10-1 北京大学网站详情页整

7、体截图北京大学网站详情页整体截图任务任务10.1.1 10.1.1 北京大学网站详情页整体页面结构的制作北京大学网站详情页整体页面结构的制作任务任务10.1.1.1 10.1.1.1 建立北京大学站点的目录结构建立北京大学站点的目录结构任务描述任务描述（1 1）创建所需的文件夹。）创建所需的文件夹。（2 2）在文件夹中创建）在文件夹中创建“images”“images”子文件夹。子文件夹。（3 3）将所需的图像资源复制到）将所需的图像资源复制到“images”“images”文件夹中。文件夹中。（4 4）将）将“网页骨架网页骨架.html”.html”文档拖曳到该文件夹中。文档拖曳到该文件夹中

8、。任务实施任务实施（1 1）建立文件夹）建立文件夹“bjdx”“bjdx”。（2 2）建立子文件夹）建立子文件夹“images”“images”。（3 3）将所需的图片资源复制到）将所需的图片资源复制到“images”“images”文件夹中。文件夹中。（4 4）将）将“网页骨架网页骨架.html”.html”文档拖曳到文档拖曳到“bjdx”“bjdx”文件夹中。文件夹中。任务任务10.1.1.2 10.1.1.2 创建与保存详情页文档创建与保存详情页文档content.htmlcontent.html任务描述任务描述（1 1）修改）修改“网页骨架网页骨架.html”.html”文档名为文档名

9、为“content.html”“content.html”。（2 2）编辑）编辑标签中的内容。标签中的内容。（3 3）保存文档，效果如图）保存文档，效果如图10-210-2所示。所示。图图10-2 北京大学网站站点目录结构北京大学网站站点目录结构任务实施任务实施（1 1）修改）修改“网页骨架网页骨架.html”.html”文档名为文档名为“content.html”“content.html”。双击双击“编辑器（编辑器（Sublime TextSublime Text）”图标，打开编辑器。图标，打开编辑器。将文件夹中的将文件夹中的“content.html”“content.html”拖曳到编

10、辑器的编辑窗口中，关闭其拖曳到编辑器的编辑窗口中，关闭其他网页文档。使他网页文档。使“content.html”“content.html”成为当前文件。将成为当前文件。将标签中的内标签中的内容容“网页骨架网页骨架”修改为修改为“北京大学北京大学-Peking University”-Peking University”。（2 2）保存网页文档。执行菜单命令【文件】）保存网页文档。执行菜单命令【文件】【保存】，关闭【保存】，关闭“编编辑器辑器”。任务任务10.1.1.3 10.1.1.3 北京大学网站详情页整体页面结构分析北京大学网站详情页整体页面结构分析任务描述任务描述（1 1）分析整体页面

11、结构，确定分为哪些大的部分。）分析整体页面结构，确定分为哪些大的部分。（2 2）分别将这些部分以不同的色块表示。）分别将这些部分以不同的色块表示。（3 3）分别标记上适合的）分别标记上适合的HTMLHTML标签，搭建整体的代码结构。标签，搭建整体的代码结构。任务实施任务实施（1 1）分析整体页面结构，如图）分析整体页面结构，如图10-310-3所示。所示。页面布局分析：页面自然布局。从整体看，整个页面分为页面布局分析：页面自然布局。从整体看，整个页面分为topbartopbar、flashflash、navbarnavbar、soso、contentcontent和和footer 6foote

12、r 6个大盒子，并且这个大盒子，并且这6 6个盒子都是在标个盒子都是在标准流中的。准流中的。页面组成元素分析：主要包括页面组成元素分析：主要包括flashflash、标题文本、正文文本、图像、空、标题文本、正文文本、图像、空格等网页元素。格等网页元素。（2 2）分别将各部分以不同的色块表示。）分别将各部分以不同的色块表示。（3 3）分别标记上适合的）分别标记上适合的HTMLHTML标签，搭建整体的代码结构。标签，搭建整体的代码结构。图图10-3 北京大学网站详情页整体页面结构分析北京大学网站详情页整体页面结构分析由于页面所有元素都居中，所以整个页面势必要在一个整体的大盒由于页面所有元素都居中，

13、所以整个页面势必要在一个整体的大盒子之中。首先，为页面做一个整体的大盒子，取名为子之中。首先，为页面做一个整体的大盒子，取名为“wrap”“wrap”（业内（业内的普遍做法）。即：整体的大盒子的普遍做法）。即：整体的大盒子wrapwrap包含包含6 6个大盒子个大盒子topbartopbar、flashflash、navbarnavbar、soso、contentcontent和和footerfooter。使用使用divdiv标签表示各个大盒子，这标签表示各个大盒子，这6 6个盒子都是在标准流中的，且在个盒子都是在标准流中的，且在整体的大盒子整体的大盒子“wrap”“wrap”中。在编写的过程

14、中，要注意其缩进格式。中。在编写的过程中，要注意其缩进格式。在每个大盒子上、下插入代码，如：在每个大盒子上、下插入代码，如：!-和和!-，对代码进行注释，是一个，对代码进行注释，是一个HTMLHTML的注释标签。的注释标签。在每个大盒子之间插入代码：在每个大盒子之间插入代码：，是为，是为了避免了避免“浮动隔行影响浮动隔行影响”现象，它是一个空的在标准流中的现象，它是一个空的在标准流中的。任务任务10.1.1.4 10.1.1.4 北京大学网站详情页渐变背景的制作北京大学网站详情页渐变背景的制作任务描述任务描述 书写北京大学网站详情页渐变背景的代码，浏览器效果如图书写北京大学网站详情页渐变背景的

15、代码，浏览器效果如图10-410-4所示。所示。图图10-4 北京大学网站详情页渐变背景浏览效果图北京大学网站详情页渐变背景浏览效果图任务实施任务实施（1 1）首先，直接书写）首先，直接书写*margin:0;padding:0;margin:0;padding:0;样式，以去掉所有的内样式，以去掉所有的内边距和外边距，即初始化的操作。边距和外边距，即初始化的操作。（2 2）渐变背景充满在整个窗体中，所以需要对）渐变背景充满在整个窗体中，所以需要对标签中书写样标签中书写样式。式。该部分代码如下：该部分代码如下：*margin:0;margin:0;padding:0;padding:0;bod

16、ybodybackground-image:url(images/bodybg.png);background-image:url(images/bodybg.png);background-repeat:repeat-x;background-repeat:repeat-x;任务任务10.1.1.5 10.1.1.5 北京大学网站详情页版心居中效果的制作北京大学网站详情页版心居中效果的制作任务描述任务描述（1 1）在）在FireworksFireworks中测量详情页版心的长度，如图中测量详情页版心的长度，如图10-510-5所示。所示。（2 2）书写详情页版心居中效果的代码。）书写详情页版

17、心居中效果的代码。图图10-5 在在Fireworks中测量详情页版心长度方法中测量详情页版心长度方法任务实施任务实施1 1在在FireworksFireworks中丈量详情页版心的长度中丈量详情页版心的长度（1 1）将）将“北京大学详情页截图北京大学详情页截图”拖曳到拖曳到FireworksFireworks中。中。（2 2）在版心的左、右两侧分别拉出度量的参考线。）在版心的左、右两侧分别拉出度量的参考线。（3 3）使用）使用“切片切片”工具，精确地框出版心的长度为工具，精确地框出版心的长度为980px980px。2 2书写详情页版心居中效果的代码书写详情页版心居中效果的代码 浏览器效果如图

18、浏览器效果如图10-610-6所示。所示。图图10-6 详情页版心居中浏览效果图详情页版心居中浏览效果图任务任务10.1.2 10.1.2 北京大学网站详情页北京大学网站详情页topbartopbar部分的制作部分的制作任务描述任务描述（1 1）分析详情页）分析详情页topbartopbar部分的结构。部分的结构。（2 2）详情页）详情页topbartopbar部分结构的搭建。部分结构的搭建。（3 3）书写详情页）书写详情页topbartopbar部分的样式代码。部分的样式代码。浏览器效果如图浏览器效果如图10-710-7所示。所示。图图10-7 详情页详情页topbar部分浏览效果图部分浏览

19、效果图任务实施任务实施1 1分析详情页分析详情页topbartopbar部分的结构部分的结构（1 1）topbartopbar部分的高度为部分的高度为31px31px，宽度为，宽度为980px980px。（2 2）主要结构的内容只有文字）主要结构的内容只有文字“北京大学新闻中心主办北京大学新闻中心主办”。（3 3）背景条是一个由）背景条是一个由1px1px宽，宽，31px31px高的图像在水平方向平铺而成。高的图像在水平方向平铺而成。2 2详情页详情页topbartopbar部分结构的搭建部分结构的搭建 该部分结构代码如下：该部分结构代码如下：!-topbar-北京大学新闻中心主办北京大学新闻

20、中心主办!-topbar-3 3书写详情页书写详情页topbartopbar部分的样式代码部分的样式代码（1 1）高度为）高度为31px31px。（2 2）line-height:31px;line-height:31px;行高与盒子高度相等，文字便可垂直居中。行高与盒子高度相等，文字便可垂直居中。（3 3）padding-left:30px;padding-left:30px;左内边距。左内边距。浏览器效果如图浏览器效果如图10-710-7所示。所示。任务任务10.1.3 10.1.3 北京大学网站详情页北京大学网站详情页FlashFlash部分的制作部分的制作任务描述任务描述（1 1）分析

21、详情页）分析详情页FlashFlash部分的结构，浏览器效果如图部分的结构，浏览器效果如图10-810-8所示。所示。（2 2）详情页）详情页FlashFlash部分结构的搭建。部分结构的搭建。（3 3）书写详情页）书写详情页FlashFlash部分的样式代码。部分的样式代码。图图10-8 详情页详情页Flash部分浏览效果图部分浏览效果图任务实施任务实施（1 1）打开）打开AdobeAdobe官网的官网的FlashFlash帮助页面。帮助页面。（2 2）将图）将图10-910-9中所示的中所示的标签中的所有代码复制到编标签中的所有代码复制到编辑器中。辑器中。图图10-9 Adobe官网的官网

22、的Flash帮助页面帮助页面（3 3）修改以下代码中的）修改以下代码中的7 7个参数。需要明确的是：个参数。需要明确的是：FlashFlash的目录为的目录为“images/2.swf”“images/2.swf”；FlashFlash的尺寸为的尺寸为“980px“980px175px”175px”。（4 4）书写详情页）书写详情页FlashFlash部分的样式代码。部分的样式代码。该部分样式代码如下：该部分样式代码如下：#flash#flash height:175px;height:175px;任务任务10.1.4 10.1.4 北京大学网站详情页北京大学网站详情页navbarnavbar

23、部分的制作部分的制作任务描述任务描述（1 1）分析详情页）分析详情页navbarnavbar部分的结构，浏览器效果如图部分的结构，浏览器效果如图10-1010-10所示。所示。（2 2）详情页）详情页navbarnavbar部分结构的搭建。部分结构的搭建。（3 3）书写详情页）书写详情页navbarnavbar部分的样式代码。部分的样式代码。图图10-10 详情页详情页navbar部分浏览效果图部分浏览效果图任务实施任务实施1 1分析详情页分析详情页navbarnavbar部分的结构部分的结构（1 1）navbarnavbar部分的高度为部分的高度为40px40px，宽度为，宽度为980px9

24、80px。（2 2）主要结构是一个水平的、文字型的导航菜单，结构为）主要结构是一个水平的、文字型的导航菜单，结构为无序无序列表的文字。列表的文字。（3 3）背景条是由一个）背景条是由一个10px10px宽，宽，40px40px高的图像在水平方向平铺而成。高的图像在水平方向平铺而成。2 2详情页详情页navbarnavbar部分结构的搭建部分结构的搭建 浏览器效果如图浏览器效果如图10-1110-11所示。所示。图图10-11 详情页详情页navbar部分结构的搭建部分结构的搭建3 3书写详情页书写详情页navbarnavbar部分的样式代码部分的样式代码（1 1）navbarnavbar部分高

25、度为部分高度为40px40px。（2 2）line-height:40px;line-height:40px;行高与高度相等，文字便可垂直居中。行高与高度相等，文字便可垂直居中。（3 3）padding:0 10px;padding:0 10px;上下、左右内边距。上下、左右内边距。任务任务10.1.5 10.1.5 北京大学网站详情页北京大学网站详情页so so部分的制作部分的制作任务描述任务描述（1 1）分析详情页）分析详情页soso部分的结构，浏览器效果如图部分的结构，浏览器效果如图10-1210-12所示。所示。（2 2）详情页）详情页soso部分结构的搭建。部分结构的搭建。（3 3）

26、书写详情页）书写详情页soso部分的样式代码。部分的样式代码。图图10-12 详情页详情页so部分浏览效果图部分浏览效果图任务实施任务实施（1 1）分析详情页）分析详情页soso部分的结构，如图部分的结构，如图10-1310-13所示。所示。由于下面的红色线是图像由于下面的红色线是图像sobg.pngsobg.png的水平平铺，其高度为的水平平铺，其高度为4px4px，考虑，考虑把该图融入内边距把该图融入内边距paddingpadding之中。上面部分高度为之中。上面部分高度为38px38px。让让4px4px高的线融在高的线融在divdiv的的padding-bottompadding-bo

27、ttom中，中，divdiv的高就是空白的高的高就是空白的高38px38px，padding-bottom:4px;padding-bottom:4px;，background-positionbackground-position一定是一定是bottombottom就行了。就行了。图图10-13 详情页详情页so部分的结构分析示意图部分的结构分析示意图（2 2）详情页）详情页soso部分结构的搭建。部分结构的搭建。该部分结构代码如下：该部分结构代码如下：!-so-input type=text value=/高级搜索高级搜索!-so-（3 3）书写详情页）书写详情页soso部分的样式代码。部

28、分的样式代码。浏览器效果如图浏览器效果如图10-1410-14所示。所示。图图10-14 详情页详情页so部分结构的搭建部分结构的搭建任务任务10.1.6 10.1.6 北京大学网站详情页北京大学网站详情页contentcontent部分的制作部分的制作任务描述任务描述（1 1）分析详情页）分析详情页contentcontent部分的结构，浏览器效果如图部分的结构，浏览器效果如图10-1510-15所示。所示。（2 2）详情页）详情页contentcontent部分结构的搭建。部分结构的搭建。（3 3）书写详情页）书写详情页contentcontent部分的样式代码。部分的样式代码。图图10-

29、15 详情页详情页content部分浏览效果图部分浏览效果图任务实施任务实施1 1分析详情页分析详情页contentcontent部分的结构部分的结构（1 1）contentcontent的部分为该页面的主要内容，分为左、右两边，左边为的部分为该页面的主要内容，分为左、右两边，左边为图文混排的内容，右边部分没有内容，只有背景色。图文混排的内容，右边部分没有内容，只有背景色。（2 2）contentcontent左边的宽度为左边的宽度为740px740px。2 2用色块表示详情页用色块表示详情页contentcontent部分结构搭建部分结构搭建 浏览器效果如图浏览器效果如图10-1610-16

30、所示。所示。图图10-16 详情页详情页content部分结构搭建（色块）浏览效果图部分结构搭建（色块）浏览效果图3 3详情页详情页contentcontent部分结构搭建部分结构搭建 浏览器效果如图浏览器效果如图10-1710-17所示。所示。图图10-17 详情页详情页content部分结构搭建浏览效果图部分结构搭建浏览效果图4 4书写详情页书写详情页contentcontent部分的样式代码部分的样式代码 浏览器效果如图浏览器效果如图10-1810-18所示。所示。图图10-18 详情页详情页content部分样式书写浏览效果图部分样式书写浏览效果图5 5修改详情页修改详情页conten

31、tcontent部分的样式代码部分的样式代码 接着，对详情页接着，对详情页contentcontent部分的样式代码进行修改：去掉部分的样式代码进行修改：去掉#content#content盒子的盒子的200px200px高度，同时去掉高度，同时去掉#content#neirong#content#neirong盒子的盒子的180px180px高度，将其高度，将其背景颜色由红色改为白色。背景颜色由红色改为白色。任务任务10.1.7 10.1.7 北京大学网站详情页北京大学网站详情页footerfooter部分的制作部分的制作任务描述任务描述（1 1）分析详情页）分析详情页footerfoote

32、r部分的结构，浏览器效果如图部分的结构，浏览器效果如图10-1910-19所示。所示。（2 2）详情页）详情页footerfooter部分结构的搭建。部分结构的搭建。（3 3）书写详情页）书写详情页footerfooter部分的样式代码。部分的样式代码。图图10-19 详情页详情页footer部分浏览效果图部分浏览效果图任务实施任务实施1 1先给先给footerfooter写一个样式，绘制出写一个样式，绘制出4px4px高的红线高的红线 该部分样式代码如下：该部分样式代码如下：#footer#footer padding-top:4px;padding-top:4px;background:u

33、rl(images/sobg.png)repeat-x top;background:url(images/sobg.png)repeat-x top;margin-top:10px;margin-top:10px;浏览器效果如图浏览器效果如图10-2010-20所示。所示。图图10-20 详情页详情页footer部分红线绘制浏览效果图部分红线绘制浏览效果图2 2详情页详情页footerfooter部分结构的搭建部分结构的搭建 浏览器效果如图浏览器效果如图10-2110-21所示。所示。图图10-21 详情页详情页footer部分结构搭建浏览效果图部分结构搭建浏览效果图3 3书写详情页书写详情

34、页footerfooter部分的样式代码部分的样式代码 使用使用来实现边框线的绘制（当然也可以使用表格来实现）。来实现边框线的绘制（当然也可以使用表格来实现）。细线的分配策略如下。细线的分配策略如下。（1 1）将四周的灰边写成母盒子的灰边。）将四周的灰边写成母盒子的灰边。（2 2）第）第1 1个子盒子有一个下边框。个子盒子有一个下边框。（3 3）第）第2 2个子盒子有一个下边框。个子盒子有一个下边框。（4 4）第）第3 3个子盒子没有边框。个子盒子没有边框。【拓展训练】【拓展训练】任务任务10.2 10.2 绿色食品网站详情页的设计与制作绿色食品网站详情页的设计与制作 本单元本单元“拓展训练拓

35、展训练”的任务卡如表的任务卡如表10.310.3所示。所示。任务编号任务编号10.210.2任务名称任务名称绿色食品网站详情页的设计与制作绿色食品网站详情页的设计与制作网页主题网页主题绿色食品绿色食品计划工时计划工时 拓展训练任务描述拓展训练任务描述（1 1）设计详情页的主体布局结构和局部布局结构）设计详情页的主体布局结构和局部布局结构（2 2）设计与制作包含导航栏的网页）设计与制作包含导航栏的网页（3 3）制作详情页）制作详情页content.htmlcontent.html（4 4）设计与制作用户登录表单、展示图片与播放视频区块）设计与制作用户登录表单、展示图片与播放视频区块（5 5）在详

36、情页）在详情页content.htmlcontent.html中插入中插入SWFSWF动画动画表表10.3 单元单元10“拓展训练拓展训练”任务卡任务卡 本单元本单元“拓展训练拓展训练”的任务跟踪卡如表的任务跟踪卡如表10.410.4所示。所示。任务编号任务编号开始时间开始时间完成时间完成时间计划工时计划工时实际工时实际工时当前状态当前状态 表表10.4 单元单元10“拓展训练拓展训练”任务跟踪卡任务跟踪卡 一个网站通过各种形式的超级链接将各个网页联系起来，形成一个整一个网站通过各种形式的超级链接将各个网页联系起来，形成一个整体，这样浏览者可以通过单击网页中的链接找到自己所需的网页和信息。体，这样浏览者可以通过单击网页中的链接找到自己所需的网页和信息。本单元综合运用了多方面的知识和技能设计与制作网站的列表页，详本单元综合运用了多方面的知识和技能设计与制作网站的列表页，详细介绍了该网页的主体布局结构和局部布局结构的设计过程。细介绍了该网页的主体布局结构和局部布局结构的设计过程。本单元运用了本单元运用了DIV+CSSDIV+CSS布局网页，该网页中包含了多种网页元素布局网页，该网页中包含了多种网页元素文字、图像、导航栏、表单、视频、文字、图像、导航栏、表单、视频、SWFSWF动画，也展示了这些网页元素的动画，也展示了这些网页元素的综合运用效果。综合运用效果。