第8章
使用CSS布局与美化网页
CSS样式能更加方便、有效地布局网页结构,控制网页元素。创建CSS样式文件,可以实现“创建一次、使用多次”的目的,从而大大提高了网页排版的效率,而且保证网站具有一致的整体风格。
【教学导航】
(1)学会设计页面的布局结构(2)学会创建页面布局样式教学目标(3)学会创建美化页面元素的样式(4)学会插入Div标签对网页的页面进行布局(5)学会创建代码片断,且在网页插入已有的代码片断(6)学会在使用Div+CSS布局的网页中输入文字和插入各种页面元素(1)设计页面的布局结构本章重点(2)创建页面布局样式(3)创建美化页面元素的样式(4)插入Div标签对网页的页面进行布局本章难点教学方法课时建议(1)设计页面的布局结构(2)插入Div标签对网页的页面进行布局任务驱动法、分组讨论法、三步训练法8课时(含课堂同步训练)
81
811新建一个站点
课前准备
(1)在本地硬盘创建文件夹(2)启动DreamweaverCS3(3)创建名称为“山岳游”的本地站点
812
新建网页
(1)新建一个网页文档(2)设置网页标题(3)保存该网页。
f第8章
使用CSS布局与美化网页
82
课堂引导训练及评价
【课堂引导训练任务描述】
1、网页制作任务卡网页制作任务卡如表81所示。
表81网页制作任务卡任务编号网页主题081任务名称山岳游(1)设计网页的页面布局结构(2)创建网页的页面布局样式网页制作任务描述(3)创建美化页面元素的样式(4)插入Div标签,对网页的页面进行布局(5)新建导航栏代码片断、表单代码片断和表格代码片断(6)在页面各个区块中输入文字或插入页面元素网页布局结构分析(1)使用Div+CSS布局网页,如图8所示(2)文字型导航栏(位于网页顶部和网页底部两个位置)网页中文字的颜色:333333、999、203F78,链接颜色:203F78,变网页色彩搭配分析换图像链接颜色:FF7700,已访问链接颜色:9900CC,活动链接颜色:FF7700网页组成元素分析主要包括文字、图像、Flash动画、表单、表格、项目列表、导航栏等网页元素设计网页的页面布局结构→创建网页的页面布局样式→创建美化页面元任务实现流程分析素的样式→插入Div标签,对网页的页面进行布局→新建代码片断→在页面各个区块中输入文字或插入页面元素配盘素材导引原始文件位置:start08第8章使用CSS布局与美化网页task081最终文件位置:result08第8章使用CSS布局与美化网页task081使用CSS布局与美化网页计划工时180mi
2、网页制作任务跟踪卡网r