搜索
第6章使用层布局网页本课要点具体要求本课导读上机练习本课要点层的创建及基本编辑层的属性设置及高级操作具体要求熟悉层的创建掌握层的基本编辑熟悉层的属性设置掌握层的高级操作掌握层与表格的相互转换本课导读在网页制作中，层的使用非常广泛，能够实现较多的功能，如层的重叠可将多个网页元素重叠在一起，实现特殊的效果；层中可以放置文本和图像等元素，层还可以嵌套；配合行为功能或脚本代码，可以使层在网页中进行移动或变换，使页面中出现随机飘浮的图像效果。6.1层的创建及基本编辑层在网页中有着非常重要的作用，利用层不仅可以在网页中精确定位对象的位置，还可以利用层的重叠以及隐藏和显示功能实现一些简单的动态效果。6.1.1知识讲解层是表格布局工具之一，下面来学习它的创建及基本操作方法。6.1.1知识讲解1.层的创建2.使用【层】面板3.层的基本编辑1.层的创建在Dreamweaver8中插入层的方法有以下两种：将光标插入点定位到需插入层的位置，然后选择【插入】→【布局对象】→【层】命令即可。切换到【布局】插入栏，单击【描绘层】按钮，此时光标插入点变为形状，在网页中按住鼠标左键拖动即可绘制一个层。2.使用【层】面板【层】面板用于对层进行管理和操作，选择【窗口】→【层】命令或按【F2】键即可打开【层】面板，如图所示。3.层的基本编辑创建的层通常还需对其进行大小调整、移动等操作才能满足网页制作的要求。1）选中层2）拖动层3）对齐层4）调整层的大小5）层的内容添加6.2层的属性设置及高级操作层和图像、文本一样，可以在【属性】面板中对其进行设置。层还可以通过脚本或Dreamweaver8提供的时间轴功能，制作动态的效果。6.2.1知识讲解1.单个层的属性设置2.多个层的属性设置3.层的高级操作1.单个层的属性设置单个层的【属性】面板如图所示。2.多个层的属性设置选择多个层的【属性】面板如图所示。多个层与单个层的【属性】面板设置项基本相同，需要说明的是在【标签】下拉列表框中可指定用来定义所选层的HTML标签。3.层的高级操作在网页中经常可以看到一种浮动广告，如让一张图片在网页中四处飘动的。该效果一般是通过JavaScript实现的，这对于普通用户来说可能较复杂，通过Dreamweaver8的时间轴可以轻松制作该效果。6.2.2案例——网页特效制作利用Dreamweaver8的时间轴功能制作网页特效，从中可了解到时间轴的使用方法以及体验到时间轴所带来的强大效果，用户可以利用时间轴制作一些浮动动画。6.3上机练习6.3.1练习利用层进行页面布局6.3.2网页特效制作(练习为网页制作特殊效果，实现网页中的4个层循环交换位置)6.3.1网页制作操作思路：首先为页面添加背景图像。再创建4个层，并分别插入图像。调整各层到合适位置。6.3.2网页特效制作操作思路：首先将各层拖动到时间轴上。延长所有层的第15帧到第160帧。在所有层的第20帧插入关键帧。按顺时针方向拖动各层。最后选中复选框及复选框，保存文档并进行预览即可。