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

《网页设计基础教程与上机指导第版使用层.ppt》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导第版使用层.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、http:/网页设计基础教程与上机指导第版使用层 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：层是一种精确定位网页元素工具，层可以包含文本、教学提示：层是一种精确定位网页元素工具，层可以包含文本、图像或其他任何在图像或其他任何在HTML文档正文中插入的内容。使用层可以文档正文中插入的内容。使用层可以将网页元素放置任何位置，还可以按顺序排放网页文档中的其将网页元素放置任何位置，还可以按顺序排放网页文档中的

2、其他构成元素。在他构成元素。在Dreamweaver中使用层和行为结合，还可以中使用层和行为结合，还可以不用编写任何不用编写任何HTML或或JavaScript代码制作出动画效果。代码制作出动画效果。n教学目标：教学目标：掌握层的创建和设置掌握层的创建和设置掌握调整层的大小掌握调整层的大小掌握移动层掌握移动层掌握对齐层掌握对齐层掌握层和表格间的相互转换掌握层和表格间的相互转换掌握利用层制作网页下拉菜单掌握利用层制作网页下拉菜单掌握时间轴的应用掌握时间轴的应用http:/6.1 创建和设置层创建和设置层n可以通过直接插入或绘制的方法来创建层，可以通过直接插入或绘制的方法来创建层，创建层后，就可以

3、通过【层】面板来设置层创建层后，就可以通过【层】面板来设置层的属性。的属性。n6.1.1 创建层创建层n6.1.2 嵌套层嵌套层n6.1.3 层的【属性】面板层的【属性】面板n6.1.4 【层】面板【层】面板http:/6.1.1 创建层创建层n使用使用Dreamweaver 8可以很方便地在网页上创建可以很方便地在网页上创建层，并精确地定位层的位置。创建层的具体操作步层，并精确地定位层的位置。创建层的具体操作步骤如下。骤如下。(1)打开网页文档。打开网页文档。(2)将鼠标指针置于页面中，选择【插入】将鼠标指针置于页面中，选择【插入】|【布局对象【布局对象】|【层】命令。【层】命令。(3)选择

4、命令后，即可插入层。选择命令后，即可插入层。http:/6.1.2 嵌套层嵌套层n在在Dreamweaver 8中，中，一个层里还可以包含另一个层里还可以包含另外一个层，也就是嵌套外一个层，也就是嵌套层，创建嵌套层的具体层，创建嵌套层的具体操作步骤如下。操作步骤如下。(1)将鼠标指针置于文档将鼠标指针置于文档窗口的现有层中。窗口的现有层中。(2)选择【插入】选择【插入】|【布局【布局对象】对象】|【层】命令，插【层】命令，插入层。入层。(3)嵌套层创建完毕后的嵌套层创建完毕后的效果如图效果如图6.4所示。所示。http:/6.1.3 层的【属性】面板层的【属性】面板n在在Dreameaver中

5、若对层进行编辑，首先必须选定层，在层的【属性】面板中可以设置层的名字、中若对层进行编辑，首先必须选定层，在层的【属性】面板中可以设置层的名字、位置及其他一些属性。位置及其他一些属性。n单击层边框线将其选中，层【属性】面板。单击层边框线将其选中，层【属性】面板。n层【属性】面板中可以进行如下设置。层【属性】面板中可以进行如下设置。【层编号】：设置层的名称，用于识别不同的层。【层编号】：设置层的名称，用于识别不同的层。【左】：设置层左边界与浏览器窗口左边界的距离。【左】：设置层左边界与浏览器窗口左边界的距离。【上】：设置层上边界与浏览器窗口上边界的距离。【上】：设置层上边界与浏览器窗口上边界的距离

6、。【宽】：设置层的宽。【宽】：设置层的宽。【高】：设置层的高。【高】：设置层的高。【Z轴】：设置层的轴】：设置层的Z轴顺序。轴顺序。【背景图像】：设置层的背景图像。【背景图像】：设置层的背景图像。【可见性】：设置层的显示状态，包括【可见性】：设置层的显示状态，包括default、inherit、visible和和hidden四个选项。四个选项。【背景颜色】：设置层的背景颜色。【背景颜色】：设置层的背景颜色。【剪辑】：用来指定层的哪一部分可见，输入的数值是距离层的四个边界的距离。【剪辑】：用来指定层的哪一部分可见，输入的数值是距离层的四个边界的距离。【溢出】：如果层里面的文字太多，或图像太大，或

7、层的较大不足以全部显示的时候，有以【溢出】：如果层里面的文字太多，或图像太大，或层的较大不足以全部显示的时候，有以下选择：下选择：visible：溢出部分依然显示。：溢出部分依然显示。hidden：溢出部分隐藏。：溢出部分隐藏。scrool：不管是否溢出，强制显示滚动条。：不管是否溢出，强制显示滚动条。auto：有溢出时将自动出现滚动条。：有溢出时将自动出现滚动条。http:/6.1.4 【层】面板【层】面板n在在Dreamweaver中有一个【层】中有一个【层】面板，在该面板中可以设置层的属面板，在该面板中可以设置层的属性。选择【窗口】性。选择【窗口】|【层】命令，【层】命令，打开如图打开如

8、图6.6所示的【层】面板。所示的【层】面板。n【层】面板分三栏，最左侧的是眼【层】面板分三栏，最左侧的是眼睛标记，用鼠标直接单击标记，可睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层；中间显示以显示或隐藏所有的层；中间显示的是层的名称；最右侧是层在的是层的名称；最右侧是层在Z轴轴排列的情况。排列的情况。http:/6.2 层的基本操作层的基本操作n利用层可以精确地定位网页元素。下面讲述利用层可以精确地定位网页元素。下面讲述如何选择层、移动层、对齐层、改变层大小如何选择层、移动层、对齐层、改变层大小等基本操作。等基本操作。n6.2.1 选择层选择层n6.2.2 调整层的大小调整层的大小n6.

9、2.3 移动层移动层n6.2.4 对齐层对齐层http:/6.2.1 选择层选择层n常见的选择层有如下两种操作方法。常见的选择层有如下两种操作方法。直接在层的边框上单击，选定的层周围出现八个控制点直接在层的边框上单击，选定的层周围出现八个控制点(小黑色方块小黑色方块)。切换到【层】面板，在面板中单击层的名称，即可选中切换到【层】面板，在面板中单击层的名称，即可选中层。层。http:/6.2.2 调整层的大小调整层的大小n在文档窗口中插入层后，在操作过程中常常会根据需要，对层的大小进在文档窗口中插入层后，在操作过程中常常会根据需要，对层的大小进行适当的调整，调整层大小的具体操作步骤如下。行适当的

10、调整，调整层大小的具体操作步骤如下。(1)选择需要调整大小的层，在【属性】面板中改变层【宽】和【高选择需要调整大小的层，在【属性】面板中改变层【宽】和【高】的大小，如图】的大小，如图6.9所示。所示。(2)将鼠标指针移动到层边框上的小黑方框上，当鼠标指针变为垂直将鼠标指针移动到层边框上的小黑方框上，当鼠标指针变为垂直双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整层的双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整层的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右拖动鼠标，则可以调整层的宽度；当鼠标指针变为斜向双

11、箭头时，拖动鼠标，则可以调整层的宽度；当鼠标指针变为斜向双箭头时，按住鼠标左键斜向上或斜向下拖动鼠标，可以同时调整层的高度和按住鼠标左键斜向上或斜向下拖动鼠标，可以同时调整层的高度和宽度，如图宽度，如图6.10所示。所示。http:/6.2.3 移动层移动层n移动层的具体操作步骤如下。移动层的具体操作步骤如下。(1)选中要移动的层，当鼠标靠近层的缩放手柄时，鼠标选中要移动的层，当鼠标靠近层的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，层将跟指针就会变成十字箭头形状，按住鼠标左键拖动，层将跟着鼠标的移动而发生改变。着鼠标的移动而发生改变。(2)选中移动的层，使用键盘上的四个方向键

12、，一次可以选中移动的层，使用键盘上的四个方向键，一次可以移动一个像素。移动一个像素。(3)选中移动的层，按住选中移动的层，按住Shift键，然后按键盘上的四个方键，然后按键盘上的四个方向键中的任意一个可以移动向键中的任意一个可以移动10个像素。个像素。http:/6.2.4 对齐层对齐层n当在文档窗口中有多个层时，可以使用【修改】当在文档窗口中有多个层时，可以使用【修改】|【排列顺序】命令使【排列顺序】命令使多个层对齐。具体操作步骤如下。多个层对齐。具体操作步骤如下。(1)打开网页文档，选择【插入】打开网页文档，选择【插入】|【布局对象】【布局对象】|【层】命令。【层】命令。(2)在网页中插入

13、层按照步骤的方法在网页中插入另外两个层，并调在网页中插入层按照步骤的方法在网页中插入另外两个层，并调整层的大小和位置。整层的大小和位置。(3)选中所有层，选择【修改】选中所有层，选择【修改】|【排列顺序】【排列顺序】|【左对齐】命令。【左对齐】命令。(4)选择【左对齐】命令后，层将最后选中的层的底部为准，对齐排选择【左对齐】命令后，层将最后选中的层的底部为准，对齐排列。列。http:/6.3 层和表格间的相互转换层和表格间的相互转换n虽然通过层定位网页元素比表格方便很多，虽然通过层定位网页元素比表格方便很多，但是由于受到浏览器版本的限制，不是所有但是由于受到浏览器版本的限制，不是所有的浏览器都

14、支持层，的浏览器都支持层，Dreamweaver 8提供提供了层和表格相互转换功能，可以最大程度的了层和表格相互转换功能，可以最大程度的方便网页设计，可以兼顾低版本浏览器能够方便网页设计，可以兼顾低版本浏览器能够访问网页。访问网页。n6.3.1 层转换成表格层转换成表格n6.3.2 表格转换成层表格转换成层http:/6.3.1 层转换成表格层转换成表格n为兼顾低版本浏览器访问网页一般使用层将元素精确定位，然后将层转换为为兼顾低版本浏览器访问网页一般使用层将元素精确定位，然后将层转换为表格。表格。n在【转换层为表格】对话框中可以进行如下设置。在【转换层为表格】对话框中可以进行如下设置。【最精确

15、】：以精确方式转换，为每一层建立一个单元格，并且创建所有【最精确】：以精确方式转换，为每一层建立一个单元格，并且创建所有的附加单元格，以保证各单元格之间的距离。的附加单元格，以保证各单元格之间的距离。【最小】：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元【最小】：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。格。【使用透明【使用透明GIF】：用来定义是否使用透明】：用来定义是否使用透明GIF图像。图像。【置于页面中央】：选择该选项，转换的表格将在页面中居中对齐，否则【置于页面中央】：选择该选项，转换的表格将在页面中居中对齐，否则将左对齐。将左对齐。【防止层重叠】：该选项一

16、般要选择，否则如果有层发生重叠，将无法进【防止层重叠】：该选项一般要选择，否则如果有层发生重叠，将无法进行转换工作。行转换工作。【显示层面】：在文档窗口中显示【层】面板。【显示层面】：在文档窗口中显示【层】面板。【显示网格】：在文档窗口中显示网格。【显示网格】：在文档窗口中显示网格。【靠齐到网格】：在文档中将文字与网格对应。【靠齐到网格】：在文档中将文字与网格对应。http:/6.3.2 表格转换成层表格转换成层n在在Dreamweaver 8中可以把表格转换为层。如果中可以把表格转换为层。如果复杂的布局，则有时表格的形状不能转换为希望的复杂的布局，则有时表格的形状不能转换为希望的形状，并且层

17、重叠时也不能转换为表格。形状，并且层重叠时也不能转换为表格。n在【转换表格为层】对话框中可以进行如下设置。在【转换表格为层】对话框中可以进行如下设置。【防止层重叠】：选中此复选框可以在建立层、移动层【防止层重叠】：选中此复选框可以在建立层、移动层和调整层大小时防止层重叠。和调整层大小时防止层重叠。【显示层面板】：选中此复选框，在转换完成时显示【显示层面板】：选中此复选框，在转换完成时显示【层】面板。层】面板。【显示网络】：以网格为参照物定位层。【显示网络】：以网格为参照物定位层。【靠齐到网格】：将层与网络内某个角靠齐以定位层。【靠齐到网格】：将层与网络内某个角靠齐以定位层。http:/6.4

18、时间轴的应用时间轴的应用n时间轴和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时时间轴和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时间轴动画都涉及到沿着一条轨迹移动层，时间轴只能移动层。【时间轴】面板用于显间轴动画都涉及到沿着一条轨迹移动层，时间轴只能移动层。【时间轴】面板用于显示层与图像随时间变化的属性，选择【窗口】示层与图像随时间变化的属性，选择【窗口】|【时间轴】命令，打开【时间轴】面板，【时间轴】命令，打开【时间轴】面板，如图如图6.27所示所示。n在【时间轴】面板中可以进行如下设置。在【时间轴】面板中可以进行如下设置。【播放头】：显示当前在页

19、面中的是时间轴上对应的帧。【播放头】：显示当前在页面中的是时间轴上对应的帧。【动画条】：显示每个对象动画的持续时间。【动画条】：显示每个对象动画的持续时间。【关键帧】：在动画中被指定对象属性的帧。【关键帧】：在动画中被指定对象属性的帧。【动画通道】：显示层图像的动画条。【动画通道】：显示层图像的动画条。【行为通道】：在时间轴上某一帧执行【行为通道】：在时间轴上某一帧执行Dreamweaver行为的通道。行为的通道。【时间轴下拉列表框】：指定当前显示在【时间轴】面板中的是文档的哪一条时【时间轴下拉列表框】：指定当前显示在【时间轴】面板中的是文档的哪一条时间轴。间轴。【回退】：移动播放头到时间轴的

20、第【回退】：移动播放头到时间轴的第1帧。帧。【后退】：向左移动播放头一帧。单击按钮并按住鼠标左键，可以回放时间轴。【后退】：向左移动播放头一帧。单击按钮并按住鼠标左键，可以回放时间轴。【播放】：向右移动播放头一帧。单击按钮并按住鼠标左键，可以连续播放时间【播放】：向右移动播放头一帧。单击按钮并按住鼠标左键，可以连续播放时间轴动画。轴动画。【帧数】：可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间，通常【帧数】：可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间，通常默认设置是每秒播放默认设置是每秒播放15帧。帧。【自动播放】：使时间轴在打开浏览器后自动开始播放。【自动播放】：使时间轴在打开浏览器后自动开始播放。【循环播放】：使当前时间轴在浏览器中打开后做循环播放。【循环播放】：使当前时间轴在浏览器中打开后做循环播放。http:/图6.27 【时间轴】面板