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