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

单元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样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。 AP Div可以看作是网页中的一个容器，在其中可以插入多种页面元素，例如文本、图像、表格等。 【教学导航】 教学目标 （1）学会使用表格布局页面 （2）学会使用AP Div布局页面 （3）学会使用使用Div+CSS结构布局页面 （4）学会创建样式文件、设计页面的布局结构、定义页面的布局样式 （5）学会利用CSS样式美化页面元素 （6）学会插入Div标签对网页的页面进行布局 （7）学会插入或绘制AP Div，并合理地设置AP Div的属性 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价） 【5.1　操作准备】 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元5”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元5”的本地站点。 【5.2　操作演练】 【任务5-1】使用表格布局页面 【任务描述】 （1）创建外部样式文件0501global.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件05user.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0501.html，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了表格和段落进行布局。网页0501.html还应用了CSS样式对表格、单元格、表单控件和超链接进行美化。 网页0501.html的浏览效果如图5-1所示。 图5-1　网页0501.html的浏览效果 【任务实施】 1．创建外部样式文件0501global.css 创建外部样式文件0501global.css，保存在文件夹“5-1\css”中，在该样式文件中定义必要的CSS样式。 2．创建外部样式文件05user.css 创建外部样式文件05user.css，保存在文件夹“5-1\css”中，在该样式文件中定义必要的CSS样式。 3．创建网页文档0501.html 创建网页文档0501.html，保存在文件夹“5-1” 中，该网页主体结构主要应用了Div+CSS进行布 局，局部结构应用了表格和段落进行布局，该网 页主体布局结构的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还应用了CSS样式对文字、图片、超链接和列表进行美化。 网页0502.html的浏览效果如图5-2所示。 图5-2　网页0502.html的浏览效果 【任务实施】 1．创建外部样式文件0502global.css 创建外部样式文件0502global.css，保存在文件夹“5-2\css”中，在该样式文件中定义必要的CSS样式。 2．创建外部样式文件0502pages.c