1、http:/教学提示和教学目标教学提示和教学目标 6.1 创建和设置层创建和设置层6.2 层的基本操作层的基本操作6.3 层和表格间的相互转换层和表格间的相互转换6.4 时间轴的应用时间轴的应用http:/n教学提示：层是一种精确定位网页元素工具，层可以包含文本、教学提示：层是一种精确定位网页元素工具，层可以包含文本、图像或其他任何在图像或其他任何在HTML文档正文中插入的内容。使用层可以文档正文中插入的内容。使用层可以将网页元素放置任何位置，还可以按顺序排放网页文档中的其将网页元素放置任何位置，还可以按顺序排放网页文档中的其他构成元素。在他构成元素。在Dreamweaver中使用层和行为结合
2、，还可以中使用层和行为结合，还可以不用编写任何不用编写任何HTML或或JavaScript代码制作出动画效果。代码制作出动画效果。n教学目标：教学目标：掌握层的创建和设置掌握层的创建和设置 掌握调整层的大小掌握调整层的大小 掌握移动层掌握移动层 掌握对齐层掌握对齐层 掌握层和表格间的相互转换掌握层和表格间的相互转换 掌握利用层制作网页下拉菜单掌握利用层制作网页下拉菜单 掌握时间轴的应用掌握时间轴的应用http:/n可以通过直接插入或绘制的方法来创建层，可以通过直接插入或绘制的方法来创建层，创建层后，就可以通过创建层后，就可以通过【层层】面板来设置层面板来设置层的属性。的属性。n6.1.1 创建
3、层创建层n6.1.2 嵌套层嵌套层n6.1.3 层的层的【属性属性】面板面板n6.1.4 【层层】面板面板http:/n使用使用Dreamweaver 8可以很方便地在网页上创建可以很方便地在网页上创建层，并精确地定位层的位置。创建层的具体操作步层，并精确地定位层的位置。创建层的具体操作步骤如下。骤如下。(1)打开网页文档。打开网页文档。(2)将鼠标指针置于页面中，选择将鼠标指针置于页面中，选择【插入插入】|【布局对象布局对象】|【层层】命令。命令。(3)选择命令后，即可插入层。选择命令后，即可插入层。插入层还有以下两种方法。在【布局】插入栏中直接用鼠标拖曳【绘制层】按钮到文档窗口中即可插入层
4、。在【布局】插入栏中单击【绘制层】按钮，在文档窗口中按住鼠标拖动，可以 绘制一个层。提 示 http:/n在在Dreamweaver 8中，中，一个层里还可以包含另一个层里还可以包含另外一个层，也就是嵌套外一个层，也就是嵌套层，创建嵌套层的具体层，创建嵌套层的具体操作步骤如下。操作步骤如下。(1)将鼠标指针置于文档将鼠标指针置于文档窗口的现有层中。窗口的现有层中。(2)选择选择【插入插入】|【布布局对象局对象】|【层层】命令，命令，插入层。插入层。(3)嵌套层创建完毕后的嵌套层创建完毕后的效果如图效果如图6.4所示。所示。http:/n在在Dreameaver中若对层进行编辑，首先必须选定层，
5、在层的中若对层进行编辑，首先必须选定层，在层的【属性属性】面板中可以设置层的名字、面板中可以设置层的名字、位置及其他一些属性。位置及其他一些属性。n单击层边框线将其选中，层单击层边框线将其选中，层【属性属性】面板。面板。n层层【属性属性】面板中可以进行如下设置。面板中可以进行如下设置。【层编号层编号】：设置层的名称，用于识别不同的层。：设置层的名称，用于识别不同的层。【左左】：设置层左边界与浏览器窗口左边界的距离。：设置层左边界与浏览器窗口左边界的距离。【上上】：设置层上边界与浏览器窗口上边界的距离。：设置层上边界与浏览器窗口上边界的距离。【宽宽】：设置层的宽。：设置层的宽。【高高】：设置层的
6、高。：设置层的高。【Z轴轴】：设置层的：设置层的Z轴顺序。轴顺序。【背景图像背景图像】：设置层的背景图像。：设置层的背景图像。【可见性可见性】：设置层的显示状态，包括：设置层的显示状态，包括default、inherit、visible和和hidden四个选项。四个选项。【背景颜色背景颜色】：设置层的背景颜色。：设置层的背景颜色。【剪辑剪辑】：用来指定层的哪一部分可见，输入的数值是距离层的四个边界的距离。：用来指定层的哪一部分可见，输入的数值是距离层的四个边界的距离。【溢出溢出】：如果层里面的文字太多，或图像太大，或层的较大不足以全部显示的时候，有以：如果层里面的文字太多，或图像太大，或层的较
7、大不足以全部显示的时候，有以下选择：下选择：visible：溢出部分依然显示。：溢出部分依然显示。hidden：溢出部分隐藏。：溢出部分隐藏。scrool：不管是否溢出，强制显示滚动条。：不管是否溢出，强制显示滚动条。auto：有溢出时将自动出现滚动条。：有溢出时将自动出现滚动条。http:/n在在Dreamweaver中有一个中有一个【层层】面板，在该面板中可以设置层的属面板，在该面板中可以设置层的属性。选择性。选择【窗口窗口】|【层层】命令，命令，打开如图打开如图6.6所示的所示的【层层】面板。面板。n【层层】面板分三栏，最左侧的是眼面板分三栏，最左侧的是眼睛标记，用鼠标直接单击标记，可睛
8、标记，用鼠标直接单击标记，可以显示或隐藏所有的层；中间显示以显示或隐藏所有的层；中间显示的是层的名称；最右侧是层在的是层的名称；最右侧是层在Z轴轴排列的情况。排列的情况。http:/n利用层可以精确地定位网页元素。下面讲述利用层可以精确地定位网页元素。下面讲述如何选择层、移动层、对齐层、改变层大小如何选择层、移动层、对齐层、改变层大小等基本操作。等基本操作。n6.2.1 选择层选择层n6.2.2 调整层的大小调整层的大小n6.2.3 移动层移动层n6.2.4 对齐层对齐层http:/n常见的选择层有如下两种操作方法。常见的选择层有如下两种操作方法。直接在层的边框上单击，选定的层周围出现八个控制
9、点直接在层的边框上单击，选定的层周围出现八个控制点(小黑色方块小黑色方块)。切换到切换到【层层】面板，在面板中单击层的名称，即可选中面板，在面板中单击层的名称，即可选中层。层。选择层还可以通过以下几种方法。在激活层的基础上，单击层左上角的选择柄，即可选中此层。如果层没有被激活，可以按下 Shift 键，然后单击层中任意位置。通过以下几种方法可以选择多个层。按住 Shift 键，依次单击每个要选中的层的边框即可选中多个层。按住 Shift 键，依次在【层】面板上单击每个目标层的名称即可选中多个层。如果选择两个以上的连续层，可以先选中连续层的第 1 个层，再按住 Shift 键，单 击连续层的最后
10、 1 个层，即可选定多个连续层。当多个层被选中后，最后一个被选中的层的控制柄显示为黑色，其他层的控制柄显示为白色。提 示 http:/n在文档窗口中插入层后，在操作过程中常常会根据需要，对层的大小进在文档窗口中插入层后，在操作过程中常常会根据需要，对层的大小进行适当的调整，调整层大小的具体操作步骤如下。行适当的调整，调整层大小的具体操作步骤如下。(1)选择需要调整大小的层，在选择需要调整大小的层，在【属性属性】面板中改变层面板中改变层【宽宽】和和【高高】的大小，如图的大小，如图6.9所示。所示。(2)将鼠标指针移动到层边框上的小黑方框上，当鼠标指针变为垂将鼠标指针移动到层边框上的小黑方框上，当
11、鼠标指针变为垂直双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整层直双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整层的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右拖动鼠标，则可以调整层的宽度；当鼠标指针变为斜向双箭头时，右拖动鼠标，则可以调整层的宽度；当鼠标指针变为斜向双箭头时，按住鼠标左键斜向上或斜向下拖动鼠标，可以同时调整层的高度和按住鼠标左键斜向上或斜向下拖动鼠标，可以同时调整层的高度和宽度，如图宽度，如图6.10所示。所示。http:/n移动层的具体操作步骤如下。移动层的具体操作步骤如下。(1)选中要
12、移动的层，当鼠标靠近层的缩放手柄时，鼠标选中要移动的层，当鼠标靠近层的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，层将跟指针就会变成十字箭头形状，按住鼠标左键拖动，层将跟着鼠标的移动而发生改变。着鼠标的移动而发生改变。(2)选中移动的层，使用键盘上的四个方向键，一次可以选中移动的层，使用键盘上的四个方向键，一次可以移动一个像素。移动一个像素。(3)选中移动的层，按住选中移动的层，按住Shift键，然后按键盘上的四个方键，然后按键盘上的四个方向键中的任意一个可以移动向键中的任意一个可以移动10个像素。个像素。如果在【层】面板中选中【防止重叠】复选框，则在移动层时将无法将一个层移动
13、到另一个层的上方。提 示 http:/n当在文档窗口中有多个层时，可以使用当在文档窗口中有多个层时，可以使用【修改修改】|【排列顺序排列顺序】命令使命令使多个层对齐。具体操作步骤如下。多个层对齐。具体操作步骤如下。(1)打开网页文档，选择打开网页文档，选择【插入插入】|【布局对象布局对象】|【层层】命令。命令。(2)在网页中插入层按照步骤的方法在网页中插入另外两个层，并在网页中插入层按照步骤的方法在网页中插入另外两个层，并调整层的大小和位置。调整层的大小和位置。(3)选中所有层，选择选中所有层，选择【修改修改】|【排列顺序排列顺序】|【左对齐左对齐】命令。命令。(4)选择选择【左对齐左对齐】命
14、令后，层将最后选中的层的底部为准，对齐命令后，层将最后选中的层的底部为准，对齐排列。排列。在【修改】|【排列顺序】子菜单中有四种对齐方式：【左对齐】：以最后选定层的左边线为标准，左对齐排列。【右对齐】：以最后选定层的右边线为标准，右对齐排列。【对齐上边缘】：以最后选定层的上边缘为标准进行排列。【对齐下边缘】：以最后选定层的下边缘为标准进行排列。提 示 http:/n虽然通过层定位网页元素比表格方便很多，虽然通过层定位网页元素比表格方便很多，但是由于受到浏览器版本的限制，不是所有但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，的浏览器都支持层，Dreamweaver 8提供提供了层和表格
15、相互转换功能，可以最大程度的了层和表格相互转换功能，可以最大程度的方便网页设计，可以兼顾低版本浏览器能够方便网页设计，可以兼顾低版本浏览器能够访问网页。访问网页。n6.3.1 层转换成表格层转换成表格n6.3.2 表格转换成层表格转换成层http:/n为兼顾低版本浏览器访问网页一般使用层将元素精确定位，然后将层转换为为兼顾低版本浏览器访问网页一般使用层将元素精确定位，然后将层转换为表格。表格。n在在【转换层为表格转换层为表格】对话框中可以进行如下设置。对话框中可以进行如下设置。【最精确最精确】：以精确方式转换，为每一层建立一个单元格，并且创建所有：以精确方式转换，为每一层建立一个单元格，并且创
16、建所有的附加单元格，以保证各单元格之间的距离。的附加单元格，以保证各单元格之间的距离。【最小最小】：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。格。【使用透明使用透明GIF】：用来定义是否使用透明：用来定义是否使用透明GIF图像。图像。【置于页面中央置于页面中央】：选择该选项，转换的表格将在页面中居中对齐，否则：选择该选项，转换的表格将在页面中居中对齐，否则将左对齐。将左对齐。【防止层重叠防止层重叠】：该选项一般要选择，否则如果有层发生重叠，将无法进：该选项一般要选择，否则如果有层发生重叠，将无法进行转换工作。行转换工作。【
17、显示层面显示层面】：在文档窗口中显示：在文档窗口中显示【层层】面板。面板。【显示网格显示网格】：在文档窗口中显示网格。：在文档窗口中显示网格。【靠齐到网格靠齐到网格】：在文档中将文字与网格对应。：在文档中将文字与网格对应。http:/n在在Dreamweaver 8中可以把表格转换为层。如果中可以把表格转换为层。如果复杂的布局，则有时表格的形状不能转换为希望的复杂的布局，则有时表格的形状不能转换为希望的形状，并且层重叠时也不能转换为表格。形状，并且层重叠时也不能转换为表格。n在在【转换表格为层转换表格为层】对话框中可以进行如下设置。对话框中可以进行如下设置。【防止层重叠防止层重叠】：选中此复选
18、框可以在建立层、移动层：选中此复选框可以在建立层、移动层和调整层大小时防止层重叠。和调整层大小时防止层重叠。【显示层面板显示层面板】：选中此复选框，在转换完成时显示：选中此复选框，在转换完成时显示【层层】面板。面板。【显示网络显示网络】：以网格为参照物定位层。：以网格为参照物定位层。【靠齐到网格靠齐到网格】：将层与网络内某个角靠齐以定位层。：将层与网络内某个角靠齐以定位层。http:/n时间轴和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时时间轴和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时间轴动画都涉及到沿着一条轨迹移动层，时间轴只能移动层。间轴动画
19、都涉及到沿着一条轨迹移动层，时间轴只能移动层。【时间轴时间轴】面板用于显面板用于显示层与图像随时间变化的属性，选择示层与图像随时间变化的属性，选择【窗口窗口】|【时间轴时间轴】命令，打开命令，打开【时间轴时间轴】面面板，板，如图如图6.27所示所示。n在在【时间轴时间轴】面板中可以进行如下设置。面板中可以进行如下设置。【播放头播放头】：显示当前在页面中的是时间轴上对应的帧。：显示当前在页面中的是时间轴上对应的帧。【动画条动画条】：显示每个对象动画的持续时间。：显示每个对象动画的持续时间。【关键帧关键帧】：在动画中被指定对象属性的帧。：在动画中被指定对象属性的帧。【动画通道动画通道】：显示层图像
20、的动画条。：显示层图像的动画条。【行为通道行为通道】：在时间轴上某一帧执行：在时间轴上某一帧执行Dreamweaver行为的通道。行为的通道。【时间轴下拉列表框时间轴下拉列表框】：指定当前显示在：指定当前显示在【时间轴时间轴】面板中的是文档的哪一条时面板中的是文档的哪一条时间轴。间轴。【回退回退】：移动播放头到时间轴的第：移动播放头到时间轴的第1帧。帧。【后退后退】：向左移动播放头一帧。单击按钮并按住鼠标左键，可以回放时间轴。：向左移动播放头一帧。单击按钮并按住鼠标左键，可以回放时间轴。【播放播放】：向右移动播放头一帧。单击按钮并按住鼠标左键，可以连续播放时间：向右移动播放头一帧。单击按钮并按住鼠标左键，可以连续播放时间轴动画。轴动画。【帧数帧数】：可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间，通常：可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间，通常默认设置是每秒播放默认设置是每秒播放15帧。帧。【自动播放自动播放】：使时间轴在打开浏览器后自动开始播放。：使时间轴在打开浏览器后自动开始播放。【循环播放循环播放】：使当前时间轴在浏览器中打开后做循环播放。：使当前时间轴在浏览器中打开后做循环播放。http:/
