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

第6章 使 用 层,教学提示和教学目标 6.1 创建和设置层 6.2 层的基本操作 6.3 层和表格间的相互转换 6.4 时间轴的应用,教学提示和教学目标,教学提示：层是一种精确定位网页元素工具，层可以包含文本、图像或其他任何在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) 在网页中插入层按照步骤的方法在网页中插入另外两个层，并调整层的大小和位置。 (3) 选中所有层，选择【修改】|【排列顺序】|【左对齐】命令。 (4) 选择【左对齐】命令后，层将最后选中的层的底部为准，对齐排列。,6.3 层和表格间的相互转换,虽然通过层定位网页元素比表格方便很多，但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，Dreamweaver 8提供了层和表格相互转换功能，可以最大程度的方便网页设计，可以兼顾低版本浏览器能够访问网页。 6.3.1 层转换成表格 6.3.2 表格转换成层,6.3.1 层转换成表格,为兼顾低版本浏览器访问网页一般使用层将元素精确定位，然后将层转换为表格。 在【转换层为表格】对话框中可以进行如下设置。 【最精确】：以精确方式转换，为每一层建立一个单元格，并且创建所有的附加单元格，以保证各单元格之间的距离。 【最小】：以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。 【使用透明GIF】：用来定义是否使用透明GIF图像。 【置于页面中央】：选择该选项，转换的表格将在页面中居中对齐，否则将左对齐。 【防止层重叠】：该选项一般要选择，否则如果有层发生重叠，将无法进行转换工作。 【显示层面】：在文档窗口中显示【层】面板。 【显示网格】：在文档窗口中显示网格。 【靠齐到网格】：在文档中将文字与网格对应。,6.3.2 表格转换成层,在Dreamweaver 8中可以把表格转换为层。如果复杂的布局，则有时表格的形状不能转换为希望的形状，并且层重叠时也不能转换为表格。 在【转换表格为层】对话框中可以进行如下设置。 【防止层重叠】：选中此复选框可以在建立层、移动层和调整层大小时防止层重叠。 【显示层面板】：选中此复选框，在转换完成时显示【层】面板。 【显示网络】：以网格为参照物定位层。 【靠齐到网格】：将层与网络内某个角靠齐以定位层。,6.4 时间轴的应用,时间轴和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时间轴动画都涉及到沿着一条轨迹移动层，时间轴只能移动层。【时间轴】面板用于显示层与图像随时间变化的属性，选择【窗口】|【时间轴】命令，打开【时间轴】面板，如图6.27所示。 在【时间轴】面板中可以进行如下设置。 【播放头】：显示当前在页面中的是时间轴上对应的帧。 【动画条】：显示每个对象动画的持续时间。 【关键帧】：在动画中被指定对象属性的帧。 【动画通道】：显示层图像的动画条。 【行为通道】：在时间轴上某一帧执行Dreamweaver行为的通道。 【时间轴下拉列表框】：指定当前显示在【时间轴】面板中的是文档的哪一条时间轴。 【回退】：移动播放头到时间轴的第1帧。 【后退】：向左移动播放头一帧。单击按钮并按住鼠标左键，