网页设计基础教程与上机指导第版使用层.pptVIP

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