《网页设计》完整课件 网页设计9(精品·公开课件).ppt

第九讲 图层的应用 已学过的知识：我们前面已经学习了使用表格来进行网页中元素的布局，通过表格实现网页中元素的布局。 问题：使用表格布局时，大家都发现一个这样的问题：有些元素规格大小一致的用表格很方便，但是对于一些不规则的、位置随意的网页元素表格的布局也是不理想。用表格进行布局并不是很方便。 Dreamweaver MX提供了另外的一个工具：图层，它可以实现网页元素的布局。 主要内容： 一、什么是图层 二、创建图层及层的操作 三、层与表格的转换 四、层的应用 五、时间轴（线） 六、举例说明 七、本节小结 什么是图层？ 事实上在Dreamweaver系统中，图层是放置文本、图像等元素的载体。使用图层及配合其它元素、时间线等，可以实现有很多很奇妙的功能。在网页设计中应用非常广泛。 通俗地讲：图层就像含有文字、图片、表格等元素的胶片，一张张按照顺序叠放在一起，组合起来形成页面的最终效果。 图层的特点： 图层可以将页面的元素精确定位； 层在网页编辑区中可以自由移动，可以去很多其它元素不能去的地方； 图层中可以加入文本、图像、表格等元素； 可以在图层里面嵌套图层，嵌套后的关系是“父”与“子”的关系，里面嵌套的称为子图层，包含嵌套层的图层称为父图层。嵌套层永远在其父图层的上方。 图层可以显示或隐藏； 图层在平面上可以设置X，Y坐标，除此之外，还添加一个具有三维空间的Z坐标，使图层有一个叠放顺序，而且可以通过改变Z值，来改变图层的叠放顺序。正是因为有了这个Z坐标使得图层有一个独特的功能------就是可以使页面元素重叠。 创建图层及层的操作 一、创建图层 方法有两种： 第一种：利用菜单插入一个层，操作步骤： 1）、在要插入图层的位置单击鼠标左键，确定插入点。 2）、执行【插入】/ 【图层】命令，则在光标的当前处插入了一个系统缺省默认的图层。 第二种：利用插入栏中的常用面板来实现插入图层，操作步骤如下： 二、创建嵌套的图层 操作步骤如下： 1）、打开要创建图层的文档。 2）、单击插入栏中的常用面板的 按钮。 3）、用鼠标拖动该图标，到工作窗口释放鼠标左键（或直接在编辑区内画层）。 4）、将光标插入到已建好的图层中，然后选择菜单中的“插入/层”命令，可在已建的图层中插入一个嵌套的图层。 三、图层的操作 1、激活图层 一个层在被激活后，才能将文本、图像、表格、表单等网页元素插入到图层中。 如何激活？------单击图层的任意位置，就可以激活图层，此时光标在图层中闪烁，这时候就可以往图层插入其它的网页元素。 2、选中（取）图层 选中图层的方法有很多： 1）、按下Shift键+鼠标单击层的任意位置，可以选中层。 2）、单击层的标记可以选中层。 3）、单击层的边框线可以选中层。 4）、先激活层，再单击层的左上角的选择柄 可以选中层。 5）、按下Shift键+鼠标单击每一个层的任意位置，可以选中多个层。 3、层的操作 1）、删除层 方法：选中要删除的层，然后按Delete键。 2）、移动层 方法： 用鼠标移动层，将光标移到层的左上角的选择柄上，或者将鼠标移动到层的边框线上，指针变成4个十字状箭头时，拖动鼠标即可移动该层。 选中要移动的层，在属性面板中的[左]和[上]两个文本框中输入层的左上角坐标，便可精确设置这个层在网页中的目标位置。 3）、调整层的大小 方法： 用鼠标操作，先选中要改变大小的层，此时层的边框线出现8个黑色活动块，用鼠标拖拽某个活动块，即可调整层的大小。 选中要移动的层，在属性面板中的[宽]和[高]两个文本框中输入层的宽度和高度尺寸，便可精确调整该层尺寸。 4）、对齐层 选中要对齐的多个层，选择菜单“修改/对齐”命令，可以设置层的不同的对齐方式。 【宽W】：图层的宽度，单位为像素。 【高H】：图层的高度，单位为像素。 【Z轴】：在垂直平面的方向上层的顺序号。 设置图层的堆叠顺序。（提示：在该文本框中的数值，决定了当前层放在哪个层上面。通常，Z值大的层放在上面，Z值小的层放在下面。） 【显示Vis】：层的可见性，设置图层的显示情况。可选择“defaul”（默认）、“inherit”（继承父层的属性）、“visible”（可见）、“hidden”（隐藏）四个选项之一。 【背景图像】：设置图层的背景图像。 【背景颜色】：设置图层的背景颜色。 【标签Tag】：设置图层在HTML代码中使用标记，建议使用DIV，它可以同时被IE和Netscape支持。 【溢出Overflow】：设置图层的内容超出图层范围大小时的显示方式。 有以下4种选择： Visible:按照内容尺寸向右、向下扩大层，以显示层内的全部内容。（换句话说，增加层尺寸，显示超出部分的内容。） Hidden：只