dreamweaver cs 网页制作案例教程电子教案第章使用css布局与美化网页

《dreamweaver cs 网页制作案例教程电子教案第章使用css布局与美化网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章　使用CSS布局与美化网页第8章　使用CSS布局与美化网页CSS样式能更加方便、有效地布局网页结构，控制网页元素。创建CSS样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。【教学导航】教学目标（1）学会设计页面的布局结构（2）学会创建页面布局样式（3）学会创建美化页面元素的样式（4）学会插入Div标签对网页的页面进行布局（5）学会创建代码片断，且在网页插入已有的代码片断（6）学会在使用Div＋CSS布局的网页中输入文字和插入各种页面元

2、素本章重点（1）设计页面的布局结构（2）创建页面布局样式（3）创建美化页面元素的样式（4）插入Div标签对网页的页面进行布局本章难点（1）设计页面的布局结构（2）插入Div标签对网页的页面进行布局教学方法任务驱动法、分组讨论法、三步训练法课时建议8课时（含课堂同步训练）8.1　课前准备8.1.1　新建一个站点（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3（3）创建名称为“山岳游”的本地站点8.1.2　新建网页（1）新建一个网页文档（2）设置网页标题（3）保存该网页。225第8章　使用

3、CSS布局与美化网页8.2　课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表8-1所示。表8-1　网页制作任务卡任务编号08-1任务名称使用CSS布局与美化网页网页主题山岳游计划工时180min网页制作任务描述（1）设计网页的页面布局结构（2）创建网页的页面布局样式（3）创建美化页面元素的样式（4）插入Div标签，对网页的页面进行布局（5）新建导航栏代码片断、表单代码片断和表格代码片断（6）在页面各个区块中输入文字或插入页面元素网页布局结构分析（1）使用Div＋CSS布局

4、网页，如图8-所示（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#333333、#999、#203F78，链接颜色：#203F78，变换图像链接颜色：#FF7700，已访问链接颜色：#9900CC，活动链接颜色：#FF7700网页组成元素分析主要包括文字、图像、Flash动画、表单、表格、项目列表、导航栏等网页元素任务实现流程分析设计网页的页面布局结构→创建网页的页面布局样式→创建美化页面元素的样式→插入Div标签，对网页的页面进行布局→新建代码片断→在页面各个

5、区块中输入文字或插入页面元素配盘素材导引原始文件位置：start8第8章使用CSS布局与美化网页task08-1最终文件位置：result8第8章使用CSS布局与美化网页task08-12、网页制作任务跟踪卡网页制作任务跟踪卡如表8-2所示。表8-2　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页index0801的整体浏览效果如图8-1所示。225第8章　使用CSS布局与美化网页图8-1　网页“index0801”的浏览效果【任务完成过程】8.2.

6、1　网页页面的布局设计【操作要求】（1）对网页index0801.html进行整体布局设计，纵向分为5个区块，分别用于插入动画、设置导航栏、设置分隔栏、展示主体内容和显示版权信息。（2）对中部的主体内容区块进行详细布局设计，将主体内容区块分为左、右两个区域，左边区域纵向分为6个区块，右边区域纵向分为2个区块。【实施过程】1、页面的整体布局设计网页文档index0801.html的整体布局示意图如图8-2所示，纵向分为5个区块。225第8章　使用CSS布局与美化网页图8-2　页面整体布局设计示意图网页文

7、档index0801.html各区块的参数设置和功能规划如表8-3所示。2、页面的局部布局设计网页文档index0801.html中部区块4的局部布局示意图如图8-3所示，区块4分为左右两部分，左边的区块4-1宽度为580px，右边的区块4-2宽度为270px。左边的区块4-1纵向分为6个部分，区域4-1-1的高度为25px，其他5个部分的高度为111px。右边的区块4-2纵向分为2个部分，高度分别为95px和485px。图8-3　网页文档index0801.html中部区块4的局部布局示意图8.2.

8、2　创建页面布局样式【操作要求】定义如表8-所示的多个样式，这些样式所应用的区块如表8-4所示。【实施过程】1、样式名称规划网页文档index0801.html中各区块应用的样式及其名称如表8-所示，公共样式w用于控件各个区域的宽度和对齐方式。2、创建公共样式w在DreamweaverCS3中创建样式非常方便、直观，所有的样式设置操作都可以通过【CSS规则定义】对话框来完成。（1）新建样式（2）定义样式名称（3）设置样式属性225第8章　使用CSS布局与