文档介绍：第6章使用层
教学提示和教学目标
创建和设置层
层的基本操作
层和表格间的相互转换
时间轴的应用
教学提示和教学目标
教学提示:层是一种精确定位网页元素工具,层可以包含文本、图像或其他任何在HTML文档正文中插入的内容。使用层可以将网页元素放置任何位置,还可以按顺序排放网页文档中的其他构成元素。在Dreamweaver中使用层和行为结合,还可以不用编写任何HTML或JavaScript代码制作出动画效果。
教学目标:
掌握层的创建和设置
掌握调整层的大小
掌握移动层
掌握对齐层
掌握层和表格间的相互转换
掌握利用层制作网页下拉菜单
掌握时间轴的应用
创建和设置层
可以通过直接插入或绘制的方法来创建层,创建层后,就可以通过【层】面板来设置层的属性。
创建层
嵌套层
层的【属性】面板
【层】面板
创建层
使用Dreamweaver 8可以很方便地在网页上创建层,并精确地定位层的位置。创建层的具体操作步骤如下。
(1) 打开网页文档。
(2) 将鼠标指针置于页面中,选择【插入】|【布局对象】|【层】命令。
(3) 选择命令后,即可插入层。
嵌套层
在Dreamweaver 8中,一个层里还可以包含另外一个层,也就是嵌套层,创建嵌套层的具体操作步骤如下。
(1) 将鼠标指针置于文档窗口的现有层中。
(2) 选择【插入】|【布局对象】|【层】命令,插入层。
(3) 。
层的【属性】面板
在Dreameaver中若对层进行编辑,首先必须选定层,在层的【属性】面板中可以设置层的名字、位置及其他一些属性。
单击层边框线将其选中,层【属性】面板。
层【属性】面板中可以进行如下设置。
【层编号】:设置层的名称,用于识别不同的层。
【左】:设置层左边界与浏览器窗口左边界的距离。
【上】:设置层上边界与浏览器窗口上边界的距离。
【宽】:设置层的宽。
【高】:设置层的高。
【Z轴】:设置层的Z轴顺序。
【背景图像】:设置层的背景图像。
【可见性】:设置层的显示状态,包括default、inherit、visible和hidden四个选项。
【背景颜色】:设置层的背景颜色。
【剪辑】:用来指定层的哪一部分可见,输入的数值是距离层的四个边界的距离。
【溢出】:如果层里面的文字太多,或图像太大,或层的较大不足以全部显示的时候,有以下选择:
visible:溢出部分依然显示。
hidden:溢出部分隐藏。
scrool:不管是否溢出,强制显示滚动条。
auto:有溢出时将自动出现滚动条。
【层】面板
在Dreamweaver中有一个【层】面板,在该面板中可以设置层的属性。选择【窗口】|【层】命令,【层】面板。
【层】面板分三栏,最左侧的是眼睛标记,用鼠标直接单击标记,可以显示或隐藏所有的层;中间显示的是层的名称;最右侧是层在Z轴排列的情况。
层的基本操作
利用层可以精确地定位网页元素。下面讲述如何选择层、移动层、对齐层、改变层大小等基本操作。
选择层
调整层的大小
移动层
对齐层
选择层
常见的选择层有如下两种操作方法。
直接在层的边框上单击,选定的层周围出现八个控制点(小黑色方块) 。
切换到【层】面板,在面板中单击层的名称,即可选中层。
调整层的大小
在文档窗口中插入层后,在操作过程中常常会根据需要,对层的大小进行适当的调整,调整层大小的具体操作步骤如下。
(1) 选择需要调整大小的层,在【属性】面板中改变层【宽】和【高】的大小,。
(2) 将鼠标指针移动到层边框上的小黑方框上,当鼠标指针变为垂直双向箭头时,按住鼠标左键向下或向上拖动鼠标,则可以调整层的高度;当鼠标指针变为水平双向箭头时,按住鼠标左键向左或向右拖动鼠标,则可以调整层的宽度;当鼠标指针变为斜向双箭头时,按住鼠标左键斜向上或斜向下拖动鼠标,可以同时调整层的高度和宽度,。