4.3 使用层进行网页布局.pptVIP

3 图层的操作 选定图层 移动图层 改变图层的大小 调整图层的层次 对齐图层 图层的嵌套 设置图层的可见性 4 图层与表格的关系 图层和表格都是定位工具，两者之间可以相互转换。在设计表格时，可以先创建图层，然后再使用“将图层转换为表格”功能，把图层转换为表格。步骤： 修改—转换—层到表格 * * 第4章 使用层布局网页 本课要点 具体要求 本课导读 上机练习 本课要点 层的创建及基本编辑 层的属性设置及高级操作 具体要求 熟悉层的创建 掌握层的基本编辑 熟悉层的属性设置 掌握层的高级操作 掌握层与表格的相互转换 本课导读 在网页制作中，层的使用非常广泛，能够实现较多的功能，如层的重叠可将多个网页元素重叠在一起，实现特殊的效果；层中可以放置文本和图像等元素，层还可以嵌套；配合行为功能或脚本代码，可以使层在网页中进行移动或变换，使页面中出现随机飘浮的图像效果。 4.1 层的创建及基本编辑 层在网页中有着非常重要的作用，利用层不仅可以在网页中精确定位对象的位置，还可以利用层的重叠以及隐藏和显示功能实现一些简单的动态效果。 4.1.1 知识讲解 层是表格布局工具之一，下面来学习它的创建及基本操作方法。 4.1.1 知识讲解 1.层的创建 2.使用【层】面板 3.层的基本编辑 1.层的创建 在Dreamweaver 8中插入层的方法有以下两种： 将光标插入点定位到需插入层的位置，然后选择【插入】→【布局对象】→【层】命令即可。 切换到【布局】插入栏，单击【描绘层】按钮，此时光标插入点变为形状，在网页中按住鼠标左键拖动即可绘制一个层。 2.使用【层】面板 【层】面板用于对层进行管理和操作，选择【窗口】→【层】命令或按【F2】键即可打开【层】面板，如图所示。 3.层的基本编辑 创建的层通常还需对其进行大小调整、移动等操作才能满足网页制作的要求。 1）选中层 2）拖动层 3）对齐层 4）调整层的大小 5）层的内容添加 4.2 层的属性设置及高级操作 层和图像、文本一样，可以在【属性】面板中对其进行设置。利用图层可以制作出弹出式菜单。 4.2.1 知识讲解 1.单个图层的属性设置 2.多个图层的属性设置 3.图层的操作 4.图层与表格的关系 1.单个层的属性设置 单个层的【属性】面板如图所示。 2.多个层的属性设置 选择多个层的【属性】面板如图所示。多个层与单个层的【属性】面板设置项基本相同，需要说明的是在【标签】下拉列表框中可指定用来定义所选层的HTML标签。 3.层的操作 在网页中经常可以看到一种浮动广告，如让一张图片在网页中四处飘动的。该效果一般是通过JavaScript实现的，这对于普通用户来说可能较复杂，通过Dreamweaver 8的时间轴可以轻松制作该效果。 4.3 上机练习 4.3.1 练习利用层进行页面布局 4.3.2 网页特效制作(练习为网页制作特殊效果，实现网页中的4个层循环交换位置)