Dreamweaver CS3 网页制作案例教程电子教案08第8章使用CSS布局和美化网页.docVIP

第8章　使用CSS布局与美化网页 CSS样式能更加方便、有效地布局网页结构，控制网页元素。创建CSS样式文件，可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保证网站具有一致的整体风格。 【教学导航】 教学目标 （1）学会设计页面的布局结构 （2）学会创建页面布局样式 （3）学会创建美化页面元素的样式 （4）学会插入Div标签对网页的页面进行布局 （5）学会创建代码片断，且在网页插入已有的代码片断 （6）学会在使用Div＋CSS布局的网页中输入文字和插入各种页面元素 本章重点 （1）设计页面的布局结构 （2）创建页面布局样式 （3）创建美化页面元素的样式 （4）插入Div标签对网页的页面进行布局 本章难点 （1）设计页面的布局结构 （2）插入Div标签对网页的页面进行布局 教学方法 任务驱动法、分组讨论法、三步训练法 课时建议 8课时（含课堂同步训练） 8.1　课前准备 8.1.1　新建一个站点 （1）在本地硬盘创建文件夹 （2）启动Dreamweaver CS3 （3）创建名称为“山岳游”的本地站点 8.1.2　新建网页 （1）新建一个网页文档 （2）设置网页标题 （3）保存该网页。 8.2　课堂引导训练及评价 【课堂引导训练任务描述】 1、网页制作任务卡 网页制作任务卡如表8-1所示。 表8-1　网页制作任务卡 任务编号 08-1 任务名称 使用CSS布局与美化网页 网页主题 山岳游 计划工时 180min 网页制作任务描述 （1）设计网页的页面布局结构 （2）创建网页的页面布局样式 （3）创建美化页面元素的样式 （4）插入Div标签，对网页的页面进行布局 （5）新建导航栏代码片断、表单代码片断和表格代码片断 （6）在页面各个区块中输入文字或插入页面元素 网页布局结构分析 （1）使用Div＋CSS布局网页，如图8-所示 （2）文字型导航栏（位于网页顶部和网页底部两个位置） 网页色彩搭配分析 网页中文字的颜色：#333333、#999、#203F78，链接颜色：#203F78，变换图像链接颜色：#FF7700，已访问链接颜色：#9900CC，活动链接颜色：#FF7700 网页组成元素分析 主要包括文字、图像、Flash动画、表单、表格、项目列表、导航栏等网页元素 任务实现流程分析 设计网页的页面布局结构→创建网页的页面布局样式→创建美化页面元素的样式→插入Div标签，对网页的页面进行布局→新建代码片断→在页面各个区块中输入文字或插入页面元素 配盘素材导引 原始文件位置：start\08第8章使用CSS布局与美化网页\task08-1 最终文件位置：result\08第8章使用CSS布局与美化网页\task08-1 2、网页制作任务跟踪卡 网页制作任务跟踪卡如表8-2所示。 表8-2　网页制作任务跟踪卡 任务编号 开始时间 完成时间 计划工时 实际工时 当前状态 【网页效果展示】 网页index0801的整体浏览效果如图8-1所示。 图8-1　网页“index0801”的浏览效果 【任务完成过程】 8.2.1　网页页面的布局设计 【操作要求】 （1）对网页index0801.html进行整体布局设计，纵向分为5个区块，分别用于插入动画、设置导航栏、设置分隔栏、展示主体内容和显示版权信息。 （2）对中部的主体内容区块进行详细布局设计，将主体内容区块分为左、右两个区域，左边区域纵向分为6个区块，右边区域纵向分为2个区块。 【实施过程】 1、页面的整体布局设计 网页文档index0801.html的整体布局示意图如图8-2所示，纵向分为5个区块。 图8-2　页面整体布局设计示意图 网页文档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.2　创建页面布局样式 【操作要求】 定义如表8-所示的多个样式，这些样式所应用的区块如表8-4所示。 【实施过程】 1、样式名称规划 网页文档index0801.html中各区块应用的样式及其名称如表8-所示，公共样式w用于控件各个区域的宽度和对齐方式。 2、创建公共样式w 在Dreamweaver CS3中创建样式非常方便、直观，所有的样式设置操作都可以通过【CSS规则定义】对