单元5　布局与美化网页

1、单元5布局与美化网页操作演练1.2技术提升1.3操作准备1.1考核评价1.4操作准备1.1操作准备1.1操作准备1.1操作准备1.1操作准备5.1操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练5.2技术提升1.3技术提升1.3技术提升5.3考核评价1.4考核评价5.4 表格是常用的页面元素之一，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。 CSS样式能更加方便、有效地布局网页结构，控制网页元素。 创建CSS样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页

2、排版的效率，而且保证网站具有一致的整体风格。 AP Div可以看作是网页中的一个容器，在其中可以插入多种页面元素，例如文本、图像、表格等。【教学导航】教学目标（1）学会使用表格布局页面（2）学会使用AP Div布局页面（3）学会使用使用Div+CSS结构布局页面（4）学会创建样式文件、设计页面的布局结构、定义页面的布局样式（5）学会利用CSS样式美化页面元素（6）学会插入Div标签对网页的页面进行布局（7）学会插入或绘制AP Div，并合理地设置AP Div的属性教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议8课时（包含考核评价）【5.1操作准备】 在本地硬盘（例如D盘）中创

3、建一个文件夹“网页设计与制作案例”，将光盘中的“单元5”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元5”的本地站点。【5.2操作演练】【任务5-1】使用表格布局页面【任务描述】 （1）创建外部样式文件0501global.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件05user.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0501.html，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了表格和段落进行布局。网页0501.html还应用了CSS样式对表格、单元格、表单控件和超链接进行美化。 网页0501

4、.html的浏览效果如图5-1所示。图5-1网页0501.html的浏览效果 【任务实施】1创建外部样式文件0501global.css 创建外部样式文件0501global.css，保存在文件夹“5-1css”中，在该样式文件中定义必要的CSS样式。 2创建外部样式文件05user.css 创建外部样式文件05user.css，保存在文件夹“5-1css”中，在该样式文件中定义必要的CSS样式。 3创建网页文档0501.html 创建网页文档0501.html，保存在文件夹“5-1” 中，该网页主体结构主要应用了Div+CSS进行布 局，局部结构应用了表格和段落进行布局，该网 页主体布局结构

5、的HTML代码如表5-3所示。 还应用了CSS样式对表格、单元格、表单控件 和超链接进行美化。 4保存网页与浏览网页效果 保存网页0501.html，然后按快捷键F12浏览该网页，其浏览效果如图5-1所示。【任务5-2】使用AP Div布局页面【任务描述】 （1）创建外部样式文件0502global.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件0502pages.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0502.html，该网页主体结构主要应用AP Div进行布局，局部结构应用了Div+CSS和定义列表、项目列表进行布局。 网页0502.html

6、还应用了CSS样式对文字、图片、超链接和列表进行美化。 网页0502.html的浏览效果如图5-2所示。图5-2网页0502.html的浏览效果【任务实施】1创建外部样式文件0502global.css 创建外部样式文件0502global.css，保存在文件夹“5-2css”中，在该样式文件中定义必要的CSS样式。 2创建外部样式文件0502pages.css 创建外部样式文件0502pages.css，保存在文件夹“5-2css”中，在该样式文件中定义必要的CSS样式。3创建网页文档0502.html 创建网页文档0502.html，保存在文件夹“5-2”中，该网页主体结构主要应用AP D

7、iv、绝对定位和相对定位进行布局，局部结构应用了Div+CSS和定义列表、项目列表进行布局。 还应用了CSS样式对文字、图片、超链接和列表进行美化。 该网页为左右结构，通过绝对定位方式实现左右布局。（1）插入Div标签page_wrapper（2）插入Div标签pages_nav（3）插入AP元素l_sidebar（4）插入AP元素r_content（5）插入多个Div标签和AP元素4保存网页与浏览网页效果 保存网页0502.html，然后按快捷键F12浏览该网页，其浏览效果如图5-2所示。【任务5-3】使用Div+CSS布局与美化网页【任务描述】 （1）创建外部样式文件0503global.

8、css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件0503pages.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0503.html，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了定义列表、项目列表和段落结构进行布局。网页0503.html还应用了CSS样式对文字、图片、超链接和表单控件进行美化。 网页0503.html的浏览效果如图5-8所示。图5-8网页0503.html的浏览效果【任务实施】1创建外部样式文件0503global.css 创建外部样式文件0503global.css，保存在文件夹“5-3css”中，在该样式文件中定义必要

9、的CSS样式，对应的样式代码如表5-5所示（见任务5-2）。 2创建外部样式文件0503pages.css 创建外部样式文件0503pages.css，保存在文件夹“5-3css”中，在该样式文件中定义必要的CSS样式。3创建网页文档0503.html 创建网页文档0503.html，保存在文件夹“5-3”中，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了定义列表、项目列表和段落结构进行布局。 网页0503.html还应用了CSS样式对文字、图片、超链接和表单控件进行美化。 该网页为左右结构，通过浮动方式实现左右布局，网页的左侧版块为左浮动，右侧版块为右浮动。4保存网页与浏览网页

10、效果 保存网页0503.html，然后按快捷键F12浏览该网页，其浏览效果如图5-8所示。 【5.3技术提升】【任务5-4】应用XHTML+CSS布局与美化网页0504.html【任务描述】 （1）创建外部样式文件0504pages.css，在该样式文件中定义必要的CSS样式。 （2）创建网页文档0504.html，该网页的主体结构主要应用了Div+CSS进行布局，从上至下整体网页划分为4个版块，顶部的第1个版块为左右布局结构，该版块的右侧使用了浮动框架。中部的第3个版块标题下方为左中右布局结构。 该页面还应用了CSS样式对项目列表、标题、文字、图片和超链接进行美化。 网页0504.html的

11、浏览效果如图5-10所示。图5-10网页0504.html的浏览效果【任务实施】1创建外部样式文件0504pages.css 创建外部样式文件0504pages.css，保存在文件夹“5-4css”中，在该样式文件中定义必要的CSS样式。 2创建网页文档0504.html 创建网页文档0504.html，保存在文件夹“5-4”中，该网页的主体结构主要应用了Div+CSS进行布局，从上至下整体网页划分为4个版块。 3保存网页与浏览网页效果 保存网页0504.html，然后按快捷键F12浏览该网页，其浏览效果如图5-10所示。【5.4考核评价】【考核任务描述】 教材配套光盘中已提供了考核评价项目所

12、需的起点网页文件0505.html、CSS样式表文件style1.css和网页素材，请完成以下操作。 （1）在样式表文件style1.css中完善ID标识banner的定义，要求宽度为800px，高度为120px，下填充为2px。 （2）在样式表文件style1.css中完善ID标识propanel的定义，要求宽度为800px，下边界为2px。 （3）在样式表文件style1.css中完善ID标识bottom 的定义，要求宽度为800px，高度为45px，行高为22px，上填充为10px，下填充为5px。 （4）网页0505.html整体上分为上、中、下3个区域，其中上部为两列式布局，在样式表

13、文件style1.css中 完善类banner-l和类banner-r的定义。 （5）网页0505.html中部为三列式布局，在样式表 文件style1.css中根据布局的需要完善类propanelcon-l、propanelcon-r和类propanelcon-c的定义。 （6）在样式表文件style1.css中完善类pro-title的定义，定义下边框为#fff 1px dashed。 （7）在样式表文件style1.css中完善类pro-img的定义，定义边框为#fff 5px solid，边界为10px。 （8）在样式表文件style1.css中完善类pro-intro的定义，要求行高

14、为150%，首行缩进2个字符，上填充为0，下填充为10px，右填充为10px，左填充为14px，下边框定义为#fff 1px dashed。 （9）在样式表文件style1.css中完善类pro-more的定义，要求填充为5px，对齐方式为右对齐。 （10）在网页0505.html的pro-scenic区域各插入1个1行4列的表格，在表格单元格插入图片和描述文字，并且设置超链接。 本单元的考核评价任务完成后，网页0505.html的最终浏览效果如彩图4所示。【评价要点】 本单元的考核评价表如表5-22所示。【单元小结】 本单元分别介绍了三种布局页面的方法，分别是表格、AP Div和Div+CS

15、S。 重点介绍了使用CSS布局与美化网页，CSS在当前的网页设计中已经成为不可缺少的技术。 对于网页设计者来说，CSS是一个非常灵活的工具，有了它设计者不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在网页的头部定义、在行内定义，甚至作为外部样式文件供HTML调用。 CSS样式可以用来一次对多个网页文档所有的样式进行控制，和HTML样式相比，使用CSS样式表的好处在于除了它可以同时链接多个网页文档之处，当CSS样式有所更新或被修改之后，所有应用了该样式的网页都会被自动更新。考核要点考核内容标准分计分（1）完善ID标识banner的定义1（2）完善ID标识propanel的定义1（3）完善ID标识bottom的定义1（4）完善类banner-l和类banner-r的定义1（5）完善类propanelcon-l、prop