DW网页设计教学—单元5 布局与美化网页

1、操作演练操作演练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 表格是常用的页面元素之一，通过设置表格及单元表格是常用的页面元素之一，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的属性，对页面中的

2、元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。能有序地排列数据。 CSS样式能更加方便、有效地布局网页结构，控制样式能更加方便、有效地布局网页结构，控制网页元素。网页元素。 创建创建CSS样式文件，可以实现样式文件，可以实现“创建一次、使用多创建一次、使用多次次”的目的，从而大大提高了网页排版的效率，而且保证的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。网站具有一致的整体风格。 AP Div可以看作是网页中的一个容器，在其中可以可以看作是网页中的一个容器，在其中可以插入

3、多种页面元素，例如文本、图像、表格等。插入多种页面元素，例如文本、图像、表格等。教学目标教学目标（1 1）学会使用表格布局页面）学会使用表格布局页面（2 2）学会使用）学会使用AP DivAP Div布局页面布局页面（3 3）学会使用使用）学会使用使用Div+CSSDiv+CSS结构布局页面结构布局页面（4 4）学会创建样式文件、设计页面的布局结构、定义页面的布局样式）学会创建样式文件、设计页面的布局结构、定义页面的布局样式（5 5）学会利用）学会利用CSSCSS样式美化页面元素样式美化页面元素（6 6）学会插入）学会插入DivDiv标签对网页的页面进行布局标签对网页的页面进行布局（7 7）学

4、会插入或绘制）学会插入或绘制AP DivAP Div，并合理地设置，并合理地设置AP DivAP Div的属性的属性教学方法教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议课时建议8 8课时（包含考核评价）课时（包含考核评价） 在本地硬盘（例如在本地硬盘（例如D盘）中创建一个文件夹盘）中创建一个文件夹“网网页设计与制作案例页设计与制作案例”，将光盘中的，将光盘中的“单元单元5”（包括所（包括所有子文件夹以及文件）拷贝到该文件夹中。有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为使用创建站点向导创建名称为“单元单元

5、5”的本地的本地站点。站点。【任务任务5-1】使用表格布局页面使用表格布局页面【任务描述任务描述】 （1）创建外部样式文件）创建外部样式文件0501global.css，在该样式，在该样式文件中定义必要的文件中定义必要的CSS样式。样式。 （2）创建外部样式文件）创建外部样式文件05user.css，在该样式文件，在该样式文件中定义必要的中定义必要的CSS样式。样式。 （3）创建网页文档）创建网页文档0501.html，该网页主体结构主，该网页主体结构主要应用要应用Div+CSS进行布局，局部结构应用了表格和进行布局，局部结构应用了表格和段落进行布局。网页段落进行布局。网页0501.html还

6、应用了还应用了CSS样式样式对表格、单元格、表单控件和超链接进行美化。对表格、单元格、表单控件和超链接进行美化。 网页网页0501.html的浏览效果如图的浏览效果如图5-1所示。所示。图图5-15-1网页网页0501.html0501.html的浏览效果的浏览效果 【任务实施任务实施】1创建外部样式文件创建外部样式文件0501global.css 创建外部样式文件创建外部样式文件0501global.css，保存在文件夹，保存在文件夹“5-1css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式。样式。 2创建外部样式文件创建外部样式文件05user.css 创建外部样式

7、文件创建外部样式文件05user.css，保存在文件夹，保存在文件夹“5-1css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式。样式。 3创建网页文档创建网页文档0501.html 创建网页文档创建网页文档0501.html，保存在文件夹，保存在文件夹“5-1” 中，该网页主体结构主要应用了中，该网页主体结构主要应用了Div+CSS进行布进行布 局，局部结构应用了表格和段落进行布局，该网局，局部结构应用了表格和段落进行布局，该网 页主体布局结构的页主体布局结构的HTML代码如表代码如表5-3所示。所示。 还应用了还应用了CSS样式对表格、单元格、表单控件样式对表格、单元

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

9、建网页文档）创建网页文档0502.html，该网页主体结构主要应用，该网页主体结构主要应用AP Div进行布局，局部结构应用了进行布局，局部结构应用了Div+CSS和定义列表、和定义列表、项目列表进行布局。项目列表进行布局。 网页网页0502.html还应用了还应用了CSS样式对文字、图片、超样式对文字、图片、超链接和列表进行美化。链接和列表进行美化。 网页网页0502.html的浏览效果如图的浏览效果如图5-2所示。所示。图图5-25-2网页网页0502.html0502.html的浏览效果的浏览效果【任务实施任务实施】1创建外部样式文件创建外部样式文件0502global.css 创建外部

10、样式文件创建外部样式文件0502global.css，保存在文件夹，保存在文件夹“5-2css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式。样式。 2创建外部样式文件创建外部样式文件0502pages.css 创建外部样式文件创建外部样式文件0502pages.css，保存在文件夹，保存在文件夹“5-2css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式。样式。 创建网页文档创建网页文档0502.html，保存在文件夹，保存在文件夹“5-2”中，该网页主体结构主要应用中，该网页主体结构主要应用AP Div、绝对定位和相对定位进行布局，局部结构应用绝

11、对定位和相对定位进行布局，局部结构应用了了Div+CSS和定义列表、项目列表进行布局。和定义列表、项目列表进行布局。 还应用了还应用了CSS样式对文字、图片、超链接样式对文字、图片、超链接和列表进行美化。和列表进行美化。 该网页为左右结构，通过绝对定位方式实该网页为左右结构，通过绝对定位方式实现左右布局。现左右布局。（1）插入）插入Div标签标签page_wrapper（2）插入）插入Div标签标签pages_nav（3）插入）插入AP元素元素l_sidebar（4）插入）插入AP元素元素r_content（5）插入多个）插入多个Div标签和标签和AP元素元素4保存网页与浏览网页效果保存网页与

12、浏览网页效果 保存网页保存网页0502.html，然后按快捷键，然后按快捷键F12浏览浏览该网页，其浏览效果如图该网页，其浏览效果如图5-2所示。所示。【任务任务5-3】使用使用Div+CSS布局与美化网页布局与美化网页【任务描述任务描述】 （1）创建外部样式文件）创建外部样式文件0503global.css，在该样，在该样式文件中定义必要的式文件中定义必要的CSS样式。样式。 （2）创建外部样式文件）创建外部样式文件0503pages.css，在该样式，在该样式文件中定义必要的文件中定义必要的CSS样式。样式。 （3）创建网页文档）创建网页文档0503.html，该网页主体结构主，该网页主体

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

14、件夹，保存在文件夹“5-3css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式，样式，对应的样式代码如表对应的样式代码如表5-5所示（见任务所示（见任务5-2）。）。 2创建外部样式文件创建外部样式文件0503pages.css 创建外部样式文件创建外部样式文件0503pages.css，保存在文件夹，保存在文件夹“5-3css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样式。样式。 创建网页文档创建网页文档0503.html，保存在文件夹，保存在文件夹“5-3”中，该网页主体结构主要应用中，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了

15、定义列表、项目列进行布局，局部结构应用了定义列表、项目列表和段落结构进行布局。表和段落结构进行布局。 网页网页0503.html还应用了还应用了CSS样式对文字、样式对文字、图片、超链接和表单控件进行美化。图片、超链接和表单控件进行美化。 该网页为左右结构，通过浮动方式实现该网页为左右结构，通过浮动方式实现左右布局，网页的左侧版块为左浮动，右侧版左右布局，网页的左侧版块为左浮动，右侧版块为右浮动。块为右浮动。 保存网页保存网页0503.html，然后按快捷键，然后按快捷键F12浏览该网浏览该网页，其浏览效果如图页，其浏览效果如图5-8所示。所示。 【任务任务5-4】应用应用XHTML+CSS布

16、局与美化网页布局与美化网页0504.html【任务描述任务描述】 （1）创建外部样式文件）创建外部样式文件0504pages.css，在该样式，在该样式文件中定义必要的文件中定义必要的CSS样式。样式。 （2）创建网页文档）创建网页文档0504.html，该网页的主体结构主，该网页的主体结构主要应用了要应用了Div+CSS进行布局，从上至下整体网页划进行布局，从上至下整体网页划分为分为4个版块，顶部的第个版块，顶部的第1个版块为左右布局结构，个版块为左右布局结构，该版块的右侧使用了浮动框架。中部的第该版块的右侧使用了浮动框架。中部的第3个版块标个版块标题下方为左中右布局结构。题下方为左中右布局

17、结构。 该页面还应用了该页面还应用了CSS样式对项目列表、标题、样式对项目列表、标题、文字、图片和超链接进行美化。文字、图片和超链接进行美化。 网页网页0504.html的浏览效果如图的浏览效果如图5-10所示。所示。图图5-105-10网页网页0504.html0504.html的浏览效果的浏览效果【任务实施任务实施】1创建外部样式文件创建外部样式文件0504pages.css 创建外部样式文件创建外部样式文件0504pages.css，保存在文件，保存在文件夹夹“5-4css”中，在该样式文件中定义必要的中，在该样式文件中定义必要的CSS样样式。式。 2创建网页文档创建网页文档0504.h

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

19、文件样式表文件style1.css和和网页素材，请完成以下操作。网页素材，请完成以下操作。 （1）在样式表文件）在样式表文件style1.css中完善中完善ID标识标识banner的的定义，要求宽度为定义，要求宽度为800px，高度为，高度为120px，下填充为，下填充为2px。 （2）在样式表文件）在样式表文件style1.css中完善中完善ID标识标识propanel的定义，要求宽度为的定义，要求宽度为800px，下边界为，下边界为2px。 （3）在样式表文件）在样式表文件style1.css中完善中完善ID标识标识bottom 的定义，要求宽度为的定义，要求宽度为800px，高度为，高度

20、为45px，行高为，行高为22px，上填充为上填充为10px，下填充为，下填充为5px。 （4）网页）网页0505.html整体上分为上、中、下整体上分为上、中、下3个区域，其个区域，其中上部为两列式布局，在样式表文件中上部为两列式布局，在样式表文件style1.css中中 完善类完善类banner-l和类和类banner-r的定义。的定义。 （5）网页）网页0505.html中部为三列式布局，在样式表中部为三列式布局，在样式表 文件文件style1.css中根据布局的需要完善类中根据布局的需要完善类propanelcon-l、propanelcon-r和类和类propanelcon-c的定义

21、。的定义。 （6）在样式表文件）在样式表文件style1.css中完善类中完善类pro-title的的定义，定义下边框为定义，定义下边框为#fff 1px dashed。 （7）在样式表文件）在样式表文件style1.css中完善类中完善类pro-img的的定义，定义边框为定义，定义边框为#fff 5px solid，边界为，边界为10px。 （8）在样式表文件）在样式表文件style1.css中完善类中完善类pro-intro的定义，的定义，要求行高为要求行高为150%，首行缩进，首行缩进2个字符，上填充为个字符，上填充为0，下填充，下填充为为10px，右填充为，右填充为10px，左填充为，

22、左填充为14px，下边框定义为，下边框定义为#fff 1px dashed。 （9）在样式表文件）在样式表文件style1.css中完善类中完善类pro-more的定义，的定义，要求填充为要求填充为5px，对齐方式为右对齐。，对齐方式为右对齐。 （10）在网页）在网页0505.html的的pro-scenic区域各插入区域各插入1个个1行行4列列的表格，在表格单元格插入图片和描述文字，并且设置超的表格，在表格单元格插入图片和描述文字，并且设置超链接。链接。 本单元的考核评价任务完成后，网页本单元的考核评价任务完成后，网页0505.html的最终的最终浏览效果如彩图浏览效果如彩图4所示。所示。【

23、评价要点评价要点】 本单元的考核评价表如表本单元的考核评价表如表5-22所示。所示。【单元小结单元小结】 本单元分别介绍了三种布局页面的方法，分别是表本单元分别介绍了三种布局页面的方法，分别是表格、格、AP Div和和Div+CSS。 重点介绍了使用重点介绍了使用CSS布局与美化网页，布局与美化网页，CSS在当前在当前的网页设计中已经成为不可缺少的技术。的网页设计中已经成为不可缺少的技术。 对于网页设计者来说，对于网页设计者来说，CSS是一个非常灵活的工具，是一个非常灵活的工具，有了它设计者不必再把繁杂的样式定义编写在文档结构中，有了它设计者不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在网可以将所有有关文档的样式指定内容全部脱离出来，在网页的头部定义、在行内定义，甚至作为外部样式文件供页的头部定义、在行内定义，甚至作为外部样式文件供HTML调用。调用。 CSS样式可以用来一次对多个网页文档所有样式可以用来一次对多个网页文档所有的样式进行控制，和的样式进行控制，和HTML样式相比，使用样式相比，使用CSS样样式表的好处在于除了它可以同时链接多个网页文档式表的好处在于除了它可以同时链接多个网页文档之处，当之处，当CSS样式有所更新或被修改之