网页设计与制作cs8第6章课件.ppt

《网页设计与制作cs8第6章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章层及层动画第6章层及层动画6.1层的应用6.2制作层动画6.3层和表格的相互转换6.1层的应用6.1.1插入新层6.1.2选择层与激活层6.1.3设置层的属性6.1.4层的基本操作6.1.1插入新层将鼠标光标置于需要插入层的位置，单击“插入”菜单中的“布局对象”选项，在其级联菜单中单击“层”命令，或在插入面板中选择到“布局”选项卡，选择“绘制层”图标，将其拖动到页面上。6.1.2选择层与激活层1.选择层Dreamweaver8中可以选择一个或多个层来进行操作或更改它们的属性。（1）选择一个层将鼠标指针指向层边框，边框线变成红色，鼠标指

2、针变成形状，单击边框线，层的边框将出现8个蓝色实心正方形，表示该层已被选中。（2）选择多个层按住“Shift”键，然后依次选中所需选择的多个层，当选中多个层时，最后选定的层的控制柄将以蓝色实心突出显示，其他层的控制柄以蓝色空心显示。2.激活层单击层中任意位置可以激活层，此时层的左上角将显示一个正方形的选择柄。激活一个层后，便可以向其中插入对象。6.1.3设置层的属性层建立完成后，可以使用属性面板进行层的属性设置6.1.4层的基本操作1.调整层的大小在Dreamweaver8中，调整层的大小的方法有多种。方法一：选定需要调整大小的层，将鼠标指

3、针移动到控制柄上，拖动该层的边框即可在相应的方向上改变层的大小。水平方向的双向箭头可以改变层的宽度，垂直方向的双向箭头可以改变层的高度，斜向的双向箭头可以同时改变层的宽度和高度。方法二：选定单个层，按住“Ctrl”健的同时使用键盘上的方向键来调整层的大小。注意：此方法只能移动层的右边框和下边框。方法三：选定单个层，按住“Ctrl+Shift”组合键的同时使用键盘上的方向键来调整层的大小，每按一次方向键可在相应的方向上调整一个网格单元的大小。方法四：选定单个层，在层“属性”面板上“宽”和“高”文本框直接输入数值，可精确设置层的大小。2.移动层

4、层可以在页面上任意移动，移动层的方法有多种。方法一：选定单个或多个层，单击选中层左上角的选择柄，按住鼠标左键并拖动鼠标，当移动到合适位置时释放鼠标即可。方法二：将鼠标指针移动到层的边框位置，当鼠标指针形状变为四向箭头时，按住鼠标左键并拖动，也可以移动层。方法三：选定单个或多个层，使用键盘上的方向键也能移动图层，每按下一次则移动一像素的距离。方法四：在层“属性”面板中，通过设置“左”和“上”的坐标值能精确定位层的位置。如果需要将页面中的某个对象贴合在窗口的左边框或上边框，只需要将该对象放置在层中，然后在层的“属性”面板中设置“左”或“上”为0

5、即可。3.多个层的对齐使用层的对齐命令可以对齐两个或多个层，在对齐多个层时将使用最后被选定的层作为基准。（1）按住“Shift”键选定需要对齐的多个层（2）在Dreamweaver8.0主窗口，单击“修改”菜单中的“排列顺序”选项，在弹出的级联菜单中选择一个对齐命令。4.更改层可见性当处理文档时，可以使用“层”面板手动显示和隐藏层，若要更改层可见性，请执行以下操作：（1）首先选择“窗口”菜单，单击“层”命令，打开“层”面板。（2）在层的眼形图标列内单击可以更改其可见性。眼睛睁开表示该层是可见的；眼睛闭合表示该层是不可见的。5.更改层的层叠顺

6、序可以通过以下两种方法改变层的堆叠顺序（1）在层面板中，选中一个层，将层向上或向下拖至所需的堆叠顺序。当您移动层时会出现一条线，它指示该层将出现的位置。当放置线出现在层叠顺序中的所需位置时，请松开鼠标按钮。（2）“属性”面板中，选中一个层，在Z轴文本框中键入一个编号。键入一个较大的数字可将该层在层叠顺序中上移。键入一个较小的数字可将该层在层叠顺序中下移。6.2制作层动画6.2.1时间轴面板6.2.2使用时间轴动画移动层6.2.1时间轴面板“时间轴”面板显示层和图像的属性在一段时间内如何更改。可以选择“窗口”菜单中的“时间轴”选项，打开“时间

7、轴”面板6.2.2使用时间轴动画移动层若要使用时间轴制作层动画，请执行以下操作：1.在常用面板中选择层图标，在页面内拖动绘制层，在层内单击，定位光标。2.向层中插入一幅图像，将层移至它在动画开始时应处于的位置。3.选择“窗口”菜单中的“时间轴”命令，打开时间轴面板。单击层标记1选中层，将层拖动到时间轴面板的第1帧外。4.选中层，用鼠标将其拖动到另一个位置，在其与原图像之间就会出现一条线，它显示“文档”窗口中动画的轨迹。单击时间轴面板中的“播放”按钮，就可以看到图像移动的动画效果。5.如果要让层沿曲线移动，请选择其动画条，然后按住Ctrl键并

8、单击或从快捷菜单中选择“增加关键帧”命令，拖动层移动，使运动轨迹呈曲线形状。6.按住“播放”按钮，预览页面上的动画。重复此过程，在时间轴上添加其他层和图像并创建更为复杂的动画。6