21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第九章 利用图层技术制作网页

第9章利用图层技术制作网页 通过本章学习,应该掌握以下内容: 1.认识图层 2.图层的基本操作 3.图层的管理 4.图层与表格的相互转换

通过本章学习，应该掌握以下内容： 1. 认识图层 2. 图层的基本操作 3. 图层的管理 4. 图层与表格的相互转换 第9章 利用图层技术制作网页

91认识图层 图层又称层,是 Dreamweaver M中最有价值的 对象之一,它是由层叠式表发展过来的,它提供了 种对网页对象进行有效控制的手段,层可以包含文本 图像、表单、插件,甚至层内还可以包含其它层。即 在HTML文档的正文部分可以放置的元素都可以放入层 内。由于层可以放置在网页的任何位置,从而能有效 地控制网页中的对象

9.1 认识图层 图层又称层，是Dreamweaver MX中最有价值的 对象之一，它是由层叠式表发展过来的，它提供了一 种对网页对象进行有效控制的手段，层可以包含文本、 图像、表单、插件，甚至层内还可以包含其它层。即 在HTML文档的正文部分可以放置的元素都可以放入层 内。由于层可以放置在网页的任何位置，从而能有效 地控制网页中的对象

层是在制作网页中经常用到的对象,元素的定位 就是一个简单的应用。用表格来对网页进行排版非常 方便,但有时需要在文字上放一些图片之类的元素 表格就不能胜任了,这时就可以利用图层来排版。 图层可以重叠地放置,制作出层叠的效果。也可 以控制层的显示或隐藏,实现交互技术。配合时间显 的使用,还可以同时移动一个或多个图层,轻松制作 出动态效果

层是在制作网页中经常用到的对象，元素的定位 就是一个简单的应用。用表格来对网页进行排版非常 方便，但有时需要在文字上放一些图片之类的元素， 表格就不能胜任了，这时就可以利用图层来排版。 图层可以重叠地放置，制作出层叠的效果。也可 以控制层的显示或隐藏，实现交互技术。配合时间显 的使用，还可以同时移动一个或多个图层，轻松制作 出动态效果

92图层的基本操作 921创建图层 1.插入图层 Dreamweaver mX创建图层,可执行以下操作之 (1)将光标放置在文档窗口中需要插入层的位置,然 后选择“插入”“层”命令。 (2)打开插入“常用”面板,单击该面板上的插入层 图标圖,然后释放鼠标,鼠标会变成十字形状,用 鼠标在页面中绘制一个矩形来创建层。 (3)如果需要画多个层,在单击插入层图标圖的同 时,按住Ctr1键,在文档窗口中画一个层,只要不 释放Ctr1键,就可以连续化多个层

9.2 图层的基本操作 9.2.1 创建图层 1．插入图层 Dreamweaver MX创建图层，可执行以下操作之一： （1）将光标放置在文档窗口中需要插入层的位置，然 后选择“插入”|“层”命令。 （2）打开插入“常用”面板，单击该面板上的插入层 图标 ，然后释放鼠标，鼠标会变成十字形状，用 鼠标在页面中绘制一个矩形来创建层。 （3）如果需要画多个层，在单击插入层图标 的同 时，按住Ctrl键，在文档窗口中画一个层，只要不 释放Ctrl键，就可以连续化多个层

创建完层之后,在页面中会出现一个层的标志, 并且有一个矩形的层出现。 单击层标志,其属性面板显示如图所示,在属性面 板上可以设定层的属性。 图、屈性 1层编号左宽()200xz轴亿)背景图像 ayer1上〔r) 高015x显示 default Y背景颜色c 标签)myM溢出 N剪辑:左□右 下

创建完层之后，在页面中会出现一个层的标志， 并且有一个矩形的层出现。 单击层标志，其属性面板显示如图所示，在属性面 板上可以设定层的属性

2.创建嵌套图层 图层嵌套指的是在一个图层的内部创建另一个图层, 可以用嵌套的方法将多个图层组合在一起。使用嵌套 层的目的通常是为了将多个图层组成群组,这样一来, 只要移动父层,其中的子层也会一起移动,而且子层 还会继承父层的显示隐藏状态,其可见性与父层保持 致。这在制作动态网页是十分有用

2．创建嵌套图层 图层嵌套指的是在一个图层的内部创建另一个图层， 可以用嵌套的方法将多个图层组合在一起。使用嵌套 层的目的通常是为了将多个图层组成群组，这样一来， 只要移动父层，其中的子层也会一起移动，而且子层 还会继承父层的显示隐藏状态，其可见性与父层保持 一致。这在制作动态网页是十分有用

创建嵌套层通常有两种方法: (1)直接创建嵌套层 先创建一个层为父层,后在父层内创建的层成为子 层,在图层面板中也可以看出层2是层1的子层 (2)将已有的多个层变为嵌套层 打开图层面板,在层列表中将需要作为子层的层选 中,按住Cr键将该层拖动到父层上,释放鼠标即可

创建嵌套层通常有两种方法： （1）直接创建嵌套层 先创建一个层为父层，后在父层内创建的层成为子 层，在图层面板中也可以看出层2是层1的子层。 （2）将已有的多个层变为嵌套层 打开图层面板，在层列表中将需要作为子层的层选 中，按住Ctrl键将该层拖动到父层上，释放鼠标即可

922选择图层 选择一个图层 选择图层的目的是便于层的对齐、重定位和缩放, 还可以为图层添加背景图像和背景颜色。在 Dreamweaver MX中要选择一个层,可使用如下方法 (1)用鼠标单击层标志四 (2)用鼠标单击层的任意边框线。 (3)选择“窗口”P其它”|“层”命令,打开图层面板 单击该面板中需要选择的层的名称

9.2.2 选择图层 1．选择一个图层 选择图层的目的是便于层的对齐、重定位和缩放， 还可以为图层添加背景图像和背景颜色 。 在 Dreamweaver MX中要选择一个层，可使用如下方法 之一： （1）用鼠标单击层标志 。 （2）用鼠标单击层的任意边框线。 （3）选择“窗口”|“其它”|“层”命令，打开图层面板， 单击该面板中需要选择的层的名称

选择层后,层的四周出现8个调控点,且层的标志 反色显示。 2.选择多个图层 如果要同时选择多个层,可以按住 Shift键,再执 行上述操作之一。 注意:当选择了多个图层后,最后选择的图层标记高亮 显示,同时调控点显示为黑色,其他图层的调控点显 示为白色

2．选择多个图层 如果要同时选择多个层，可以按住Shift键，再执 行上述操作之一。 注意：当选择了多个图层后，最后选择的图层标记高亮 显示，同时调控点显示为黑色，其他图层的调控点显 示为白色。 选择层后，层的四周出现8个调控点，且层的标志 反色显示

923激活图层 如果需要在图层中插入对象,必须激活图层。把 鼠标指针移动到层内任何地方单击,即可激活该层。 此时,插入点位于图层内,被激活图层的边界突出显 示,选中手柄也同时显示出来。 注意:激活图层的操作不同于选择图层

9.2.3 激活图层 如果需要在图层中插入对象，必须激活图层。把 鼠标指针移动到层内任何地方单击，即可激活该层。 此时，插入点位于图层内，被激活图层的边界突出显 示，选中手柄也同时显示出来。 注意：激活图层的操作不同于选择图层