网页制作项目09__使用Div布局搜索引擎页__.pptVIP

主讲： 网页设计与制作——Dreamweaver 8 项目九 使用Div布局搜索引擎页 任务一 制作页眉“TopLayer” 任务二 制作主体“MainLayer” 项目九： 使用Div布局搜索引擎页 网页设计与制作Dreamweaver 8 任务一 任务二 任务三制作页脚“FootLayer” 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 本任务主要介绍使用层布局索引擎页页眉的基本方法。通过本任务的学习，应该掌握的内容主要有： 1.层的功能 层主要有以下几方面的功能： 由于层是绝对定位的，可以游离在文档之上，可以利用层来浮动定位网页元素。它可以包含文本、图像甚至其他层。 层的z轴属性可以使多个层发生堆叠，也就是多重叠加的效果。 层在时间轴的作用下，可以按照时间有序地发生位移和变换，从而实现动画的效果。 任务一 制作页眉“TopLayer” 项目九： 使用Div布局搜索引擎页 制作页眉“TopLayer”操作动画 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 2.通过【首选参数】对话框设置【层】默认属性的方法 选择主菜单中的【编辑】／【首选参数】命令，打开【首选参数】对话框，在其中的【分类】列表框中选择【层】选项，根据需要对其中的参数进行设置。如果勾选【如果在层中则使用嵌套】复选框则指定从现有层边界内绘制的层是嵌套层。按住Alt键可在取消与选择该复选框之间转换 。 任务一 制作页眉“TopLayer” 项目九： 使用Div布局搜索引擎页 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 3.插入层的方法 （1）将光标置于文档窗口顶部，然后选择主菜单中的【插入】／【布局对象】／【层】命令来创建一个层。 （2）将【插入】／【布局】面板上的 【绘制层】按钮拖曳到文档窗口，松开鼠标后就在文档窗口中插入了一个层。 （3）在【插入】／【布局】面板中单击 【绘制层】按钮，在文档窗口中按住鼠标左键并拖曳，也可绘出一个自定义大小的层。 另外，在【插入】／【布局】面板中单击【绘制层】按钮，然后按住Ctrl键不放，按住鼠标左键并拖曳可在文档窗口中连续绘制多个层。 任务一 制作页眉“TopLayer” 项目九： 使用Div布局搜索引擎页 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 4. 认识【层】面板 选择主菜单中的【窗口】／【层】命令或者直接按F2键打开【层】面板。在【层】面板中可以实现以下操作。 双击层的名称，可以对层进行重命名。 单击层后面的数字可以修改层的z轴顺序，数字大的将位于上层。 勾选【防止重叠】复选框可以禁止层重叠。 在层的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏层。 单击层的名称可以选定该层，按住Shift键不放，单击想选择的层可以将多个层选中。 任务一 制作页眉“TopLayer” 项目九： 使用Div布局搜索引擎页 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 任务一 制作页眉“TopLayer” 5. 选定层的方法 在【层】面板中单击层的名称来选定该层。 单击文档中的 图标来选定层。如果没有显示该图标，可以在【首选参数】对话框的【不可见元素】分类中勾选【层锚记】复选框。 将光标置于层内，然后在文档窗口底边标签条中选择“div”标签。 单击层的边框线。 如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄或在【层】面板中逐个单击层的名称即可。 项目九： 使用Div布局搜索引擎页 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 6.设置层属性的方法 选定层后在层的【属性】面板中设置层的大小和位置等参数。 任务一 制作页眉“TopLayer” 项目九： 使用Div布局搜索引擎页 任务一 任务二 小 结 任务三 实 训 Dreamweaver 8 网页设计与制作 任务一 制作页眉“TopLayer” 7.层的嵌套 层也可以进行嵌套。在某个层内部创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层的大小和位置不受父层的限制，子层可以比父层大，位置也可以在父层之外，只是在移动父层时，子层会随着一起移动，同时父层的显示属性会影响子层的显示属性。 8.移动层的方法 层最大的优点就是具有很强的灵活性，可以随意移动到页面中的任