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

《网页设计与制作_05在Dreamweaver8中使用层丰富网页ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、在Dreamweaver8中使用层及框架第五讲课题：在Dreamweaver8中使用层丰富网页目的及要求：了解其创建和绘制的方法，会灵活地创建嵌套层教学重点：重点掌握层的基本操作教学难点：如何设置层的属性和参数预置教学课时：2课时教学方法：提问与比较教学方式，激发学生兴趣；使用层层用于网页元素的精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来实现许多特效。例如新浪、163等许多网站都采用层来定位广告和分屏显示。层的概念创建层层的基本操作转换表格和层设置层参数层的概念层就像是包含文字或图像等

2、元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以嵌套层。在Dreamweaver中运用层，为设计者提供了强大的网页控制能力。层不但可以作为一种网页定位技术，也可以作为一种特效形式出现。熟练掌握层的使用方法，是网页制作中最重要关节之一。层的创建插入与绘制层插入层：设计组成页面所需要的元素对象在“插入”菜单中基本上都可以找到。绘制层：通过“插入”工具栏，可以绘制任意大小和位置的层“插入”->“布局对象”子菜单绘制层层的创建嵌套层嵌套层是在已经创建好的层中嵌套新的层，通过嵌套层，可以把层组合

3、成一个整体。可使用插入层和绘制层的操作方法在一个已经创建好的层中嵌套层，也可通过如下操作方法嵌套层。（1）选择菜单栏中的“窗口”->“层”打开“层”面板。（2）按住【Ctrl】键，在“层”面板中将被嵌套层拖拽到目标层中。（3）释放鼠标后，从“层”面板中可以看到，Layer1已经被嵌套入Layer2。层的嵌套层的创建层的嵌套代码层的多级嵌套层的属性与参数设置层的属性在层的“属性”检查器中，可以修改首选项设定的属性，还可以定义更多的属性。当要修改层的所有属性时，可单击“属性”检查器右下角的三角形，此时会看到层的所有属性，并且可以对这些属性进行修改，层的“属性”检查器设置层参数

4、在Dreamweaver的“首选参数”对话框可以设置层参数。选择“编辑”

5、“首选参数”命令，打开“首选参数”对话框，在“分类”列表框中选择“层”选项，打开该选项对话框，如图所示，在该对话框中，各参数选项具体作用如下。层的基本操作选择层1．选择一个层选择一个层的操作方法有多种，如下：（1）在层的边框上单击。（2）单击层的选择柄。如果选择柄不可见，则在该层中的任意位置单击即可显示选择柄。（3）单击菜单栏“窗口”选项的“层”，打开“层”面板。在“层”面板中单击层的名称，这种方法也适用于选择隐藏的层。2．选择多个层选择多个层的方法常用的有两种。（1）按住【Shift】键，在每个要

6、选择的层中单击鼠标，即可选择多个层。（2）按住【Shift】键并单击“层”面板上的层名称。层的基本操作在层中添加内容1．在层中添加文本2．在层中添加图像（1）将光标放到层中。（2）单击菜单栏“插入”选项的“图像”，从弹出的“选择图像源”对话框中选择要插入的图像，单击“确定”。层的基本操作调整层的大小调整图层大小的方法有3种。1．利用“属性”检查器改变层的大小2．使用鼠标拖动改变层的大小3．利用键盘调整层的大小分为下面几种情况：选择一个层，按住【Ctrl】键再使用方向键，一次可以调整一个像素。选择一个层，按住【Ctrl】键+【Shift】键，使用方向键，可以按当前网格吸附量

7、进行调整，就是层的边框与网格对齐。层的基本操作移动层层的最大特点就是在文档窗口中可以任意移动，常用的方法有3种。1．通过“属性”检查器移动层操作方法是：选择层，在层“属性”检查器的“左”和“上”文本框中输入相应的数值，即可改变层在页面中的位置。2．通过拖动的方法移动层的位置3．通过键盘移动层的位置选择一个层，使用方向键移动，系统默认每次移动一个像素。选择一个层，按住【Shift】键再使用方向键，可以按当前网格的吸附量进行移动。层的基本操作显示和隐藏层选择要改变可见性的图层所在行，单击层面板的眼睛图标，即可设置层的显示和隐藏属性：睁开表示层可见，闭上表示层不可见。如果没有眼

8、睛图标，该层继承其父的可见性。当层不是嵌套时，父层就是文档主体，它总是可见的。当眼睛图标列未显示图标时，表示以图层所在的网页或层的状态为主。“层”面板层的基本操作更改层的名称默认状态下，建立第一个层的名称为Layer1，建立第二个层的名称为Layer2，以此类推，可通过“层”面板和“属性”检查器更改层的名称。层的基本操作对齐层“修改”->“排列顺序”菜单选择多个层层的基本操作设置Z轴坐标在浏览器中，Z坐标值较大的层出现在Z坐标值较小的层的上面。可以通过如下方法改变层的Z坐标值。（1）将层“属性”检查器上的“Z轴”文本框中的数值