Dreamweaver8第七单元全解.pptVIP

举一反三： 利用本单元素材“举一反三”文件夹中的“par7-3”文件夹制作网页,在Div中添加项目列表创建如课本图JYFS7-6所示的菜单，要求：当光标放在除“首页”以外的按钮上时，文字成红色、背景图片变为“btnhui.jpg”。 任务三 测试站点内容 1、启发思路 　　使用Div和项目列表来完成任务，项目列表中列表项的宽度和高度依据背景图片的大小来设置；设置“a:hover”的CSS规则：背景为btnhui.jpg，文本颜色为红色，“区块”类别“显示”为“块”。 2、分组完成任务。 1．利用本单元素材“举一反三”文件夹中“par7-4”文件夹，参照课本图JYFS7-7，制作一个用户注册页面。（提示：带背景的按钮可以用表单元素中的“图像域”完成）。 2．利用本单元素材“举一反三”文件夹中“par7-5”文件夹，参照课本图JYFS7-8，将本网页中没完成的导航部分和页脚部分完成。（提示：导航部分为一个Flash导航，并设置该Flash导航为透明。） 　　作业 任务三 测试站点内容 任务一 页面规划 　　相关知识： 1．Div+CSS常用命名参考： 容器: container 页头：header　　 内容：content 主体：main 页尾：footer　　 导航：nav 栏目：column 左中右：left、center、right 广告：banner　 登陆：login　 登录条：loginbar 搜索：search　 注释：note 服务：service 下载：download 合作伙伴：partner 友情链接：link 新闻: news 注册：regsiter　 侧栏：sidebar　 标志：logo　 Div+CSS布局网页的优势： 1．页面布局灵活、效果丰富 2．页面载入速度更快 3．改版或修改设计时更有效率 4．容易保持各个页面视觉的一致性 5．方便搜索引擎搜索 6．支持更多浏览器 任务一 创建网站模板 　　 3．Div＋CSS布局网页的缺陷： 1．设计复杂度增加 2．CSS文件异常将影响整个网站的正常浏览 3．兼容性问题比较突出 任务一 创建网站模板 　　 1．插入Div标签的位置，有以下几种选择： a.“在插入点”：表示在光标所在位置插入Div标签。 b.“在标签之前”：表示在后面选项组中选中标签的前面插入Div标签。 c.“在开始标签之后”：表示在后面选项组中选中标签的开始标签Div后面插入Div标签 。 d.“在结束标签之前”：表示在后面选项组中选中标签的结束标签/Div前面插入Div标签。 任务二 使用Div进行页面布局 　　 e.“在标签之后”：表示在后面选项组中选中标签的后面插入Div标签。 “类”：选择设置修饰Div标签的CSS规则。 “ID”:为Div标签命名。 “新建CSS规则”：打开“新建CSS规则”对话框为Div标签新建CSS规则。 任务二 使用Div进行页面布局 2、盒子模型 盒子组成：一个盒子由内容（Content）、边框（Border）、填充（Padding）和边界（Margin）这四部分组成。 盒子模型标准：盒子模型有标准 w3c 盒子和IE盒子两种。标准 w3c 盒子模型的宽度和高度只包括内容，不包括边框、填充和边界。而IE盒子模型的宽度和高度包括内容、填充和边框的宽度和高度。所以IE盒子模型的实际宽度或高度是内容、边框、填充和边界的宽度总和或高度总和。 边界叠加 第一个元素的底边界与第二个元素的顶边界相遇时会发生边界叠加，它们将形成一个边界，这个边界的高度等于两个发生叠加的边界中高度较大者， 任务二 使用Div进行页面布局 任务二 使用Div进行页面布局 标准w3c盒子模型 IE盒子模型 元素的定位 1、CSS规则定义的“方框”类型中“浮动”定位：当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠近。 2、CSS规则定义的“定位”类型中“位置”属性一共有4个值，分别为： （1）“静态”为默认值，没有定位，元素出现在正常的位置。 （2）“绝对”生成绝对定位的元素，相对于静态定位以外的第一个父元素进行定位。元素的位置通过“上”、“下”、“左”、“右”属性进行规定。 （3）“相对”生成相对定位的元素，相对于其正常位置进行定位。例如，左:20像素 会向元素的左侧添加 20 像素。 任务二 使用Div进行页面布局 （4）“固定”生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“上”、“下”、“左”、“右”