网页设计与制作_05在Dreamweaver8中使用层丰富网页.ppt

在Dreamweaver8中 使用层及框架 第五讲 课 题：在Dreamweaver8中使用层丰富网页 目的及要求：了解其创建和绘制的方法，会灵活地创建嵌套层 教学重点：重点掌握层的基本操作 教学难点：如何设置层的属性和参数预置 教学课时：2课时 教学方法：提问与比较教学方式，激发学生兴趣； 层的创建 插入与绘制层 插入层：设计组成页面所需要的元素对象在“插入”菜单中基本上都可以找到 。 绘制层：通过“插入”工具栏，可以绘制任意大小和位置的层 层的创建 嵌套层 嵌套层是在已经创建好的层中嵌套新的层，通过嵌套层，可以把层组合成一个整体。可使用插入层和绘制层的操作方法在一个已经创建好的层中嵌套层，也可通过如下操作方法嵌套层。 （1）选择菜单栏中的“窗口”-“层” 打开“层”面板。 （2）按住【Ctrl】键，在“层”面板中将被嵌套层拖拽到目标层中。 （3）释放鼠标后，从“层”面板中可以看到，Layer1已经被嵌套入Layer2。 层的创建 层的属性与参数 设置层的属性 在层的“属性”检查器中，可以修改首选项设定的属性，还可以定义更多的属性。当要修改层的所有属性时，可单击“属性”检查器右下角的三角形，此时会看到层的所有属性，并且可以对这些属性进行修改， 层的基本操作 选择层 1．选择一个层 选择一个层的操作方法有多种，如下： （1）在层的边框上单击。 （2）单击层的选择柄 。如果选择柄不可见，则在该层中的任意位置单击即可显示选择柄。 （3）单击菜单栏“窗口”选项的“层”，打开“层”面板。在“层”面板中单击层的名称，这种方法也适用于选择隐藏的层。 2．选择多个层 选择多个层的方法常用的有两种。 （1）按住【Shift】键，在每个要选择的层中单击鼠标，即可选择多个层。 （2）按住【Shift】键并单击“层”面板上的层名称。 层的基本操作 在层中添加内容 1．在层中添加文本 2．在层中添加图像 （1）将光标放到层中。 （2）单击菜单栏“插入”选项的“图像”，从弹出的“选择图像源”对话框中选择要插入的图像，单击“确定”。 层的基本操作 调整层的大小 调整图层大小的方法有3种。 1．利用“属性”检查器改变层的大小 2．使用鼠标拖动改变层的大小 3．利用键盘调整层的大小分为下面几种情况： 选择一个层，按住【Ctrl】键再使用方向键，一次可以调整一个像素。 选择一个层，按住【Ctrl】键+【Shift】键，使用方向键，可以按当前网格吸附量进行调整，就是层的边框与网格对齐。 层的基本操作 移动层 层的最大特点就是在文档窗口中可以任意移动，常用的方法有3种。 1．通过“属性”检查器移动层 操作方法是：选择层，在层“属性”检查器的“左”和“上”文本框中输入相应的数值，即可改变层在页面中的位置。 2．通过拖动的方法移动层的位置 3．通过键盘移动层的位置 选择一个层，使用方向键移动，系统默认每次移动一个像素。 选择一个层，按住【Shift】键再使用方向键，可以按当前网格的吸附量进行移动。 层的基本操作 显示和隐藏层 选择要改变可见性的图层所在行，单击层面板的眼睛图标，即可设置层的显示和隐藏属性：睁开表示层可见，闭上表示层不可见。 如果没有眼睛图标，该层继承其父的可见性。当层不是嵌套时，父层就是文档主体，它总是可见的。当眼睛图标列未显示图标时，表示以图层所在的网页或层的状态为主。 层的基本操作 更改层的名称 默认状态下，建立第一个层的名称为Layer1，建立第二个层的名称为Layer2，以此类推，可通过“层”面板和“属性”检查器更改层的名称。 层的基本操作 对齐层 层的基本操作 设置Z轴坐标 在浏览器中，Z坐标值较大的层出现在Z坐标值较小的层的上面。可以通过如下方法改变层的Z坐标值。 （1）将层“属性”检查器上的“Z轴”文本框中的数值改为其他数值，即可设置层的叠放层次。 （2）在“层”面板中的“Z”列，单击所要改变叠放层次的层的Z值，该数值就处于可修改状态，重新输入新的数值即可改变层的叠放层次。 层的基本操作 设置层的背景 表格可以使用背景图像和背景颜色，层同表格一样也使用背景图像和背景颜色。 在层“属性”检查器上的“背景图像”文本框中直接输入背景图像的存放路径，弹出“选择图像源文件”对话框。在该对话框中选择一幅背景图像，单击“确定”按钮，即可为层添加背景图像。 在层“属性”检查器上，单击“背景颜色”后的 按钮，在弹出的调色板中选择一种合适的背景色（或者直接在该文本框中输入背景色的色码），则可为层设置背景色。如果将此选项设置为空白，则可以指定透明的背景。 同网页和表格一样，添加背景图像或者设置背景色之后，并不妨碍在层中插入文本或图像等元素对象。 层的基本操作 定义可见区域 在层“属性”检查器上的