网页设计与制作实用教程 第2版 国家级精品课程配套教材 教学课件 作者 陈承欢 单元5　布局与美化网页.ppt

《网页设计与制作实用教程 第2版 国家级精品课程配套教材 教学课件 作者 陈承欢 单元5　布局与美化网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

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

4、表单控件和超链接进行美化。网页0501.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】使用APDiv布局页面【任务描述】（1）创建外部样式文件0502global.css，在该样式文件中定义必要的CSS样式。（2）创建外部样式文件0502pages.css，在该样式文件中定义必要的CSS样式。（3）创建网页文档0502.html，该网页主体结构主要应用APDiv进行布局，局部结构应用了Div+C

6、SS和定义列表、项目列表进行布局。网页0502.html还应用了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创建网页文

7、档0502.html，保存在文件夹“5-2”中，该网页主体结构主要应用APDiv、绝对定位和相对定位进行布局，局部结构应用了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浏