《网页设计》课程教学资源（PPT课件讲稿）第九讲 图层的应用（1/2）

第九讲图层的应用 已学过的知识:我们前面已经学习了使用 表格来进行网页中元素的布局,通过表格一 实现网页中元素的布局 词题:使用表格布局时,大家都发现一个这 样的问题:有些元素规格大小一致的用表 格很方便,但是对于一些不规则的、位置 随意的网页元素表格的布局也是不理想。 用表格进行布局并不是很方便 Dreamweaver mX提供了另外的一个工具: 图层,它可以实现网页元素的布局

已学过的知识：我们前面已经学习了使用 表格来进行网页中元素的布局，通过表格 实现网页中元素的布局。 问题：使用表格布局时，大家都发现一个这 样的问题：有些元素规格大小一致的用表 格很方便，但是对于一些不规则的、位置 随意的网页元素表格的布局也是不理想。 用表格进行布局并不是很方便。 Dreamweaver MX提供了另外的一个工具： 图层，它可以实现网页元素的布局。 第九讲 图层的应用

主要内容 什么是图层 创建图层及层的操作 层与表格的转换 四、层的应用 五、时间轴(线) 六、举例说明 七、本节小结

主要内容： 一、什么是图层 二、创建图层及层的操作 三、层与表格的转换 四、层的应用 五、时间轴（线） 六、举例说明 七、本节小结

什么是图层? 事实上在 Dreamweaver系 统中,图层是放置文本 图像等元素的载体。使用 图层及配合其它元素、时 色 间线等,可以实现有很多 很奇妙的功能。在网页设 计中应用非常广 通俗地讲:图层就像含有 文字、图片、表格等元素 的胶片,一张张按照顺序 生 叠放在一起,组合起来形 成页面的最终效果。 图层层叠的效果

什么是图层？ 事实上在Dreamweaver系 统中，图层是放置文本、 图像等元素的载体。使用 图层及配合其它元素、时 间线等，可以实现有很多 很奇妙的功能。在网页设 计中应用非常广泛。 通俗地讲：图层就像含有 文字、图片、表格等元素 的胶片，一张张按照顺序 叠放在一起，组合起来形 成页面的最终效果。 图层层叠的效果

图层的特点: 图层可以将页面的元素精确定位; 层在网页编辑区中可以自由移动,可以去很 多其它元素不能去的地方; 图层中可以加入文本、图像、表格等元素 可以在图层里面嵌套图层,嵌套后的关系是 “父”与“子”的关系,里面嵌套的称为子 图层,包含嵌套层的图层称为父图层。嵌套 层永远在其父图层的上方

图层的特点： ◼ 图层可以将页面的元素精确定位； ◼ 层在网页编辑区中可以自由移动，可以去很 多其它元素不能去的地方； ◼ 图层中可以加入文本、图像、表格等元素； ◼ 可以在图层里面嵌套图层，嵌套后的关系是 “父”与“子”的关系，里面嵌套的称为子 图层，包含嵌套层的图层称为父图层。嵌套 层永远在其父图层的上方

图层可以显示或隐藏; 图层在平面上可以设置X,Y坐标,除此 之外,还添加一个具有三维空间的Z坐标, 使图层有一个叠放顺序,而且可以通过改 变Z值,来改变图层的叠放顺序。正是因 为有了这个Z坐标使得图层有一个独特的 功 就是可以使页面元素重叠

◼ 图层可以显示或隐藏； ◼ 图层在平面上可以设置X，Y坐标，除此 之外，还添加一个具有三维空间的Z坐标， 使图层有一个叠放顺序，而且可以通过改 变Z值，来改变图层的叠放顺序。正是因 为有了这个Z坐标使得图层有一个独特的 功能------就是可以使页面元素重叠

创建图层及层的操作 创建图层 方法有两种: 第一种:利用菜单插入一个层,操作步骤 1)、在要插入图层的位置单击鼠标左键,确 定插入点 2)、执行【插入】/【图层】命令,则在光 标的当前处插入了一个系统缺省默认的图层 第二种:利用插入栏中的常用面板来实现插 入图层,操作步骤如下:

创建图层及层的操作 一、创建图层 方法有两种： 第一种：利用菜单插入一个层，操作步骤： 1）、在要插入图层的位置单击鼠标左键，确 定插入点。 2）、执行【插入】/ 【图层】命令，则在光 标的当前处插入了一个系统缺省默认的图层。 第二种：利用插入栏中的常用面板来实现插 入图层，操作步骤如下：

1)、打开要创建图层的文档。 2)、单击插入栏中的常用面板的按钮 3)、用鼠标拖动该图标,到工作窗口释放 鼠标左键(或直接在编辑区内画层)。 无标题文档( Untitled-1*) ∝body)< div layer1

1）、打开要创建图层的文档。 2）、单击插入栏中的常用面板的 按钮。 3）、用鼠标拖动该图标，到工作窗口释放 鼠标左键（或直接在编辑区内画层）

创建嵌套的图层 操作步骤如下 1)、打开要创建图层的文档。 2)、单击插入栏中的常用面板的按钮 3)、用鼠标拖动该图标,到工作窗口释放鼠 标左键(或直接在编辑区内画层 4)、将光标插入到已建好的图层中,然后选 择菜单中的“插入/层”命令,可在已建的 图层中插入一个嵌套的图层

二、创建嵌套的图层 操作步骤如下： 1）、打开要创建图层的文档。 2）、单击插入栏中的常用面板的 按钮。 3）、用鼠标拖动该图标，到工作窗口释放鼠 标左键（或直接在编辑区内画层）。 4）、将光标插入到已建好的图层中，然后选 择菜单中的“插入/层”命令，可在已建的 图层中插入一个嵌套的图层

、图层的操作 1、激活图层 个层在被激活后,才能将文本、图像、表 格、表单等网页元素插入到图层中 如何激活?-单击图层的任意位置,就可 以激活图层,此时光标在图层中闪烁,这 时候就可以往图层插入其它的网页元素。 未被选中激活的层 激活的层 被选中的层

三、图层的操作 1、激活图层 一个层在被激活后，才能将文本、图像、表 格、表单等网页元素插入到图层中。 如何激活？------单击图层的任意位置，就可 以激活图层，此时光标在图层中闪烁，这 时候就可以往图层插入其它的网页元素。 未被选中激活的层 激活的层 被选中的层

2、选中(取)图层 选中图层的方法有很多: 1)、按下Shif键+鼠标单击层的任意位置, 一可以选中层。 2)、单击层的标记可以选中层。 3)、单击层的边框线可以选中层 4)、先激活层,再单击层的左上角的选择柄 回可以选中层 5)、按下Shif键+鼠标单击每一个层的任意 位置,可以选中多个层

2、选中（取）图层 选中图层的方法有很多： 1）、按下Shift键+鼠标单击层的任意位置， 可以选中层。 2）、单击层的标记可以选中层。 3）、单击层的边框线可以选中层。 4）、先激活层，再单击层的左上角的选择柄 可以选中层。 5）、按下Shift键+鼠标单击每一个层的任意 位置，可以选中多个层