08第8章使用CSS布局与美化网页.docx

08第8章使用CSS布局与美化网页.docx

《08第8章使用CSS布局与美化网页.docx》由会员分享，可在线阅读，更多相关《08第8章使用CSS布局与美化网页.docx（16页珍藏版）》请在冰豆网上搜索。

08第8章使用CSS布局与美化网页

第8章　使用CSS布局与美化网页

CSS样式能更加方便、有效地布局网页结构，控制网页元素。

创建CSS样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。

【教学导航】

教学目标

（1）学会设计页面的布局结构

（2）学会创建页面布局样式

（3）学会创建美化页面元素的样式

（4）学会插入Div标签对网页的页面进行布局

（5）学会创建代码片断，且在网页插入已有的代码片断

（6）学会在使用Div＋CSS布局的网页中输入文字和插入各种页面元素

本章重点

（1）设计页面的布局结构

（2）创建页面布局样式

（3）创建美化页面元素的样式

（4）插入Div标签对网页的页面进行布局

本章难点

（1）设计页面的布局结构

（2）插入Div标签对网页的页面进行布局

教学方法

任务驱动法、分组讨论法、三步训练法

课时建议

8课时（含课堂同步训练）

8.1　课前准备

8.1.1　新建一个站点

（1）在本地硬盘创建文件夹

（2）启动DreamweaverCS3

（3）创建名称为“山岳游”的本地站点

8.1.2　新建网页

（1）新建一个网页文档

（2）设置网页标题

（3）保存该网页。

8.2　课堂引导训练及评价

【课堂引导训练任务描述】

1、网页制作任务卡

网页制作任务卡如表8-1所示。

表8-1　网页制作任务卡

任务编号

08-1

任务名称

使用CSS布局与美化网页

网页主题

山岳游

计划工时

180min

网页制作任务描述

（1）设计网页的页面布局结构

（2）创建网页的页面布局样式

（3）创建美化页面元素的样式

（4）插入Div标签，对网页的页面进行布局

（5）新建导航栏代码片断、表单代码片断和表格代码片断

（6）在页面各个区块中输入文字或插入页面元素

网页布局结构分析

（1）使用Div＋CSS布局网页，如图8-所示

（2）文字型导航栏（位于网页顶部和网页底部两个位置）

网页色彩搭配分析

网页中文字的颜色：

#333333、#999、#203F78，链接颜色：

#203F78，变换图像链接颜色：

#FF7700，已访问链接颜色：

#9900CC，活动链接颜色：

#FF7700

网页组成元素分析

主要包括文字、图像、Flash动画、表单、表格、项目列表、导航栏等网页元素

任务实现流程分析

设计网页的页面布局结构→创建网页的页面布局样式→创建美化页面元素的样式→插入Div标签，对网页的页面进行布局→新建代码片断→在页面各个区块中输入文字或插入页面元素

配盘素材导引

原始文件位置：

start\08第8章使用CSS布局与美化网页\task08-1

最终文件位置：

result\08第8章使用CSS布局与美化网页\task08-1

2、网页制作任务跟踪卡

网页制作任务跟踪卡如表8-2所示。

表8-2　网页制作任务跟踪卡

任务编号

开始时间

完成时间

计划工时

实际工时

当前状态

【网页效果展示】

网页index0801的整体浏览效果如图8-1所示。

图8-1　网页“index0801”的浏览效果

【任务完成过程】

8.2.1　网页页面的布局设计

【操作要求】

（1）对网页index0801.html进行整体布局设计，纵向分为5个区块，分别用于插入动画、设置导航栏、设置分隔栏、展示主体内容和显示版权信息。

（2）对中部的主体内容区块进行详细布局设计，将主体内容区块分为左、右两个区域，左边区域纵向分为6个区块，右边区域纵向分为2个区块。

【实施过程】

1、页面的整体布局设计

网页文档index0801.html的整体布局示意图如图8-2所示，纵向分为5个区块。

图8-2　页面整体布局设计示意图

网页文档index0801.html各区块的参数设置和功能规划如表8-3所示。

2、页面的局部布局设计

网页文档index0801.html中部区块4的局部布局示意图如图8-3所示，区块4分为左右两部分，左边的区块4-1宽度为580px，右边的区块4-2宽度为270px。

左边的区块4-1纵向分为6个部分，区域4-1-1的高度为25px，其他5个部分的高度为111px。

右边的区块4-2纵向分为2个部分，高度分别为95px和485px。

图8-3　网页文档index0801.html中部区块4的局部布局示意图

8.2.2　创建页面布局样式

【操作要求】

定义如表8-所示的多个样式，这些样式所应用的区块如表8-4所示。

【实施过程】

1、样式名称规划

网页文档index0801.html中各区块应用的样式及其名称如表8-所示，公共样式w用于控件各个区域的宽度和对齐方式。

2、创建公共样式w

在DreamweaverCS3中创建样式非常方便、直观，所有的样式设置操作都可以通过【CSS规则定义】对话框来完成。

（1）新建样式

（2）定义样式名称

（3）设置样式属性

（4）查看样式的属性设置

（5）查看链接外部样式表的代码

3、创建样式top

使用【CSS样式】面板中的工具栏按钮也可以创建样式。

（1）显示【CSS样式】面板

（2）打开【新建CSS规则】对话框

（3）选择样式类型和ID标识名称

（4）设置样式属性

4、创建样式menu

在DreamweaverCS3主界面中，单击菜单【文本】→【CSS样式】→【新建】，弹出【新建CSS规则】对话框。

在【新建CSS规则】对话框中，选中“高级”单选按钮，在“选择器”文本框中输入ID标识名称“#menu”，在“定义在”列表框中选择“style0801.css”，如图8-18所示。

在【新建CSS规则】对话框中单击【确定】按钮，弹出【#menu的CSS规则定义】对话框，在该对话框的“类型”选项中设置“字体”为“宋体”，大小为“12像素”，“行高”为“28像素”，如图8-19所示。

5、创建其他的样式

以类似的方法创建其他各个样式，在【CSS规则定义】对话框中设置各个样式相应的属性，各个样式相应的属性设置如表8-5所示。

8.2.3　创建美化页面元素的样式

【操作要求】

（1）设置标签body、ul的样式属性。

（2）设置超级链接样式a:

link、a:

visited、a:

hover、a:

active的属性。

（3）创建组合样式“#menua”、“#menua:

hover”、“.xl_bli”、“.xl_bspan”、“.xl_bimg”。

（4）创建控制文本格式的样式“.xl_b_txt”和“.xl_b_title”。

【实施过程】

1、设置标签样式

（1）设置标签body的属性

（2）设置标签ul的属性

2、设置超级链接样式

3、创建组合样式

4、创建控制文本格式的样式

8.2.4　插入Div标签对网页的页面进行布局

【操作要求】

（1）在网页index0801.html中依次插入区块1、区块2、区块3、区块5和区块4。

（2）在区块4中依次插入区块4-1和区块4-2。

（3）在区块4-1中依次插入区块4-1-1、区块4-1-2、区块4-1-3、区块4-1-4、区块4-1-5和区块4-1-6。

（4）在区块4-2中依次插入区块4-2-1和区块4-2-2。

（5）在区块5中依次插入区块5-1、区块5-2和区块5-3。

【实施过程】

1、插入区块1

（1）插入Div标签

（2）修改区块的属性设置

保存网页文档。

2、插入区块2

保存网页文档。

3、插入区块3

4、插入区块5

5、插入区块4

保存网页文档。

6、插入区块4-1

保存网页文档。

7、插入区块4-2

保存网页文档。

8、插入区块4-1-1

保存网页文档。

9、插入区块4-1-2

保存网页文档。

10、插入区块4-2-1

保存网页文档。

11、插入区块4-2-2

保存网页文档。

12、插入重复区块

（1）在区块4-1中重复插入4个与区块4-1-2相同的区块

（2）在区块5中重复插入2个与区块5-1相同的区块

保存网页文档。

8.2.5　新建代码片断

【操作要求】

分别新建导航栏的代码片断、登录表单的代码片断、图片集表格的代码片断。

【实施过程】

1、打开【代码片断】面板

2、新建代码片断文件夹

3、创建代码片断

（1）选中创建代码片断的代码

（2）在【代码片断】对话框中创建代码片断

8.2.6　在页面各个区块输入文字和插入页面元素

【操作要求】

（1）在区块1中插入Flash动画“top.swf”。

（2）在区块2中通过插入代码片断的方法插入导航栏表格。

（3）在区块4-2-1中通过插入代码片断的方法插入登录表单及表单控件。

（4）在区块4-2-2中通过插入代码片断的方法插入展示图像的表格。

（5）在区块4-1-1中插入图像与输入文字。

（6）在区块4-1-2至区块4-1-6中插入项目列表。

（7）在区块5-1中插入底部导航栏。

（8）在区块5-2中插入友情链接。

（9）在区块5-3中插入版权信息。

【实施过程】

1、在区块1中插入Flash动画

2、在区块2中插入导航栏表格

保存该网页文档。

3、在区块4-2-1中插入表单及表单控件

保存网页文档。

4、在区块4-2-2中插入表格

5、在区块4-1-1中插入图像与输入文字

（1）插入图像

（2）输入文字

6、在区块4-1-2至区块4-1-6中插入项目列表

（1）插入项目列表

（2）添加列表项

（3）插入图像

（4）插入标题

（5）设置标题的样式

（6）插入环绕标签

（7）设置超级链接

（8）输入正文文本

（9）设置正文文本的样式

以同样的方法，在区块4-1-3至区块4-1-6中插入项目列表，然后依次插入图像，输入文本。

结果如图8-52所示。

保存网页文档，预览其效果。

保存该网页文档。

8、在区块5-2中插入友情链接

保存该网页文档。

9、在区块5-3中插入版权信息

保存该网页文档。

8.2.7　浏览网页效果

保存网页文档index0801.html，浏览其效果，如图8-所示。

【课堂引导训练任务完成情况评价】

对本次网页制作任务的完成情况进行自评，网页制作任务完成情况评价内容如表8-10所示。

表8-10　网页制作任务完成情况评价表

任务名称

使用CS布局与美化网页

综合评价

任务完成情况分项评价

创建站点

网页布局

色彩搭配

网页内容

浏览效果

其他

存在的主要问题

8.3　课堂同步训练及评价

8.3.1　课堂同步训练任务描述

1、同步训练任务卡

课堂同步训练的任务卡如表8-11所示。

表8-11　课堂同步训练任务卡

任务编号

08-2

任务名称

使用CSS布局与美化“泰山游”网页

网页主题

泰山游

计划工时

90min

同步训练任务描述

（1）创建一个名称为“泰山游”的站点，在该站点中创建一个网页ex0802.html，创建一个CSS样式文件main.css

（2）在样式文件main.css中重新定义一些主要标签的属性，属性设置如表8-12所示

（3）在样式文件main.css中定义超级链接文本的颜色：

链接颜色：

#06C，变换图像链接颜色：

#FF3300，已访问链接颜色：

#00FFFF，活动链接颜色：

#F90

（4）在样式文件main.css中定义CSS样式，主要样式的属性设置如表8-13所示，其他样式自行定义

（5）在网页ex0802.html中链接外部CSS样式文件main.css

（6）在网页ex0802.html中插入Div标签，对该网页进行合理布局

（7）在各个区域输入文字、插入图片

（8）保存该网页，预览其效果

配盘素材导引

原始文件位置：

start\08第8章使用CSS布局与美化网页\task08-2

最终文件位置：

result\08第8章使用CSS布局与美化网页\task08-2

表8-12　网页ex0802.html中主要标签属性

标签名称

类型

方框

列表

填充

边界

body

大小为14像素

全部相同，为0像素

全部相同，为0像素

－

h2

大小为14像素

－

全部相同，为0像素

类型为“无”

ul

大小为14像素

全部相同，为5像素

全部相同，为0像素

类型为“无”

2、同步训练任务跟踪卡

课堂同步训练的任务跟踪卡如表8-14所示。

表8-14　课堂同步训练的任务跟踪卡

任务编号

开始时间

完成时间

计划工时

实际工时

当前状态

8.3.2　同步训练网页的效果展示

同步训练网页的浏览效果如图8-53所示。

图8-53　同步训练网页的浏览效果

8.3.3　同步训练网页的制作要点提示

（1）首先创建一个CSS样式文件main.css，然后利用DreamweaverCS3的【新建CSS规则】和【CSS规则定义】对话框定义CSS的样式。

网页ex0802.html中其他样式的属性设置如表8-15所示。

（2）创建一个空白网页，首先链接外部CSS样式文件main.css，接着插入多个Div标签对网页进行布局，网页ex0802.html的DIV布局结构如表8-16所示。

然后在网页各个区域输入文字、插入图片。

注意：

也可以将光盘中的文件拷贝到本地硬盘，直接打开起始网页ex0802.html，在其中的各个区域输入文字、插入图片。

8.3.4　课堂同步训练评价

课堂同步训练评价内容如表8-17所示。

表8-17　课堂同步训练评价表

任务编号

08-2

任务名称

使用CSS布局与美化“泰山游”网页

任务完成方式

【　】小组协作完成　　　【　】个人独立完成

课堂同步实践任务完成情况评价

自我评价

小组评价

教师评价

存在的主要问题

8.4　课外拓展训练

1、拓展训练任务卡

课外拓展训练的任务卡如表8-18所示。

表8-18　课外拓展训练任务卡

任务编号

08-3

任务名称

使用CSS布局与美化“庐山游”网页

网页主题

庐山游

计划工时

120min

拓展任务描述

庐山位于江西北部，北临长江，东濒鄱阳湖，是一座历史悠久的名山，自古享有“匡庐奇秀甲天下”之盛誉。

巍巍的庐山，远看有如一山飞峙大江边，近看千峰携手紧相连，横看铁壁钢墙立湖岸，侧看擎天一柱耸云间，正如宋代大文豪苏东坡诗云：

“横看成岭侧成峰，远近高低各不同，不识庐山真面目，只缘身在此山中。

”请完成以下课外拓展任务：

（1）以“庐山游”为主题创建一个站点

（2）制作一个介绍庐山文化、庐山名胜、庐山奇观的网页ex0803.html，网页中所需的图片、Flash动画和文字内容从相关网站获取

（3）网页ex0803.html必须使用DIV标签+CSS样式进行布局，并且要求创建一个外部样式文件，该网页中链接所创建的外部样式文件

素材准备要求

利用XX、谷歌等网站搜索介绍“庐山”的网站，然后从这些网站中收集有关庐山的图片、文字和Flash动画，并整理成制作网页所需的素材

2、拓展训练任务跟踪卡

课外拓展训练的任务跟踪卡如表8-19所示。

表8-19　课外拓展训练的任务跟踪卡

任务编号

开始时间

完成时间

计划工时

实际工时

当前状态

3、拓展训练任务完成情况描述

课外拓展训练任务完成情况如表8-20所示。

表8-20　课外拓展训练任务完成情况

任务编号

08-3

任务名称

使用CSS布局与美化“庐山游”网页

任务完成方式

【　】小组协作完成　　　【　】个人独立完成

网页布局结构

网页色彩搭配

网页的主要元素

已参考的网站

完成情况评价

【本章小结】

本章使用CSS布局与美化网页，CSS在当前的网页设计中已经成为不可缺少的技术。

对于网页设计者来说，CSS是一人非常灵活的工具，有了它设计者不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在网页的头部定义、在行内定义，甚至作为外部样式文件供HTML调用。

CS样式可以用来一次对多个网页文档所有的样式进行控制，和HTML样式相比，使用CSS样式表的好处在于除了它可以同时链接多个网页文档之处，当CSS样式有所更新或被修改之后，所有应用了该样式的网页都会被自动更新。