网页设计与制作案例教程电子教案第11单元

3．选择层与激活层
设置层的属性，对层进行操作时，应先应 选择层，选择层可以对层进行对齐、定位、 移动、调节大小等操作；向层中插入对象时， 应先激活。激活层不等于选定层，两者有区 别。
网页设计与制作案例教程电子教案第 11单元
（1）选择层 Dreamweaver 8中可以选择一个或多个层
来进行操作或更改它们的属性。
网页设计与制作案例教程电子教案第 11单元
层作为网页中的一个区域，可以显示、 隐藏、重叠和嵌套。也可以使用行为来控制 层的显示与隐藏，还可以使用时间轴移动层 或改变层的内容，层为网页制作提供了更多 的选择和更快捷的途径。
网页设计与制作案例教程电子教案第 11单元
2．应用层布局网页的特点
（1）定位精确 （2）插入灵活 （3）加速浏览 （4）可以叠加
网页设计与制作案例教程电子教案第 11单元
网页浏览效果展示
利用层布局的网页06.html浏览效果如 图所示。
图7-34 利用层布局的网页浏览效果
网页设计与制作案例教程电子教案第 11单元
本章操作任务
（1）在“长沙世界之窗”站点下创建文 件夹“06层的布局”，在“06层的布局”文 件夹中创建一个新的网页，该网页命名为 “06.html”。
网页设计与制作案例教程电子教案第 11单元
7.3.2 层的操作
在“长沙世界之窗”站点下创建文件夹 “06层的布局”，在“06层的布局”文件夹 中创建一个新的网页，该网页命名为 “06.html”。具体操作过程如下：
网页设计与制作案例教程电子教案第 11单元
1．新建网页
（1）在“长沙世界之窗”站点下创建文 件夹“06层的布局”，在“06层的布局”文 件夹中创建子文件夹“image”，并将所需 图像复制到该文件夹下。
（2）在网页06.html中绘制多个层，在层 中输入文本、插入图像。
（3）根据需要调整层的大小和位置，对 层的属性进行设置。
网页设计与制作案例教程电子教案第 11单元
7.3.1 认识层
1．层的概念
Dreamweaver 8中的层（Layer）是一种 页面元素，用于控制页面中对象的精确位置， 可以将它放置于页面上的任意位置。层可以 包含文本、图像、表单、插件或者其他任何 可在HTML文档正文放入的内容。
（ 5 ） 层 “ Layer2” 的 “ 宽 ” 设 置 为 “205px”，“高”设置为“450px”。
网页设计与制作案例教程电子教案第 11单元
（ 6 ） 层 “ Layer2” 的 “ 左 ” 设 置 为 “620px”，“上”设置为“9px”。
（ 7 ） 层 “ Layer2” 的 可 见 性 设 置 为 “default”，背景颜色设置“#FFFFFF”。
网页设计与激活层 单击层中任意位置可以激活层，此时层
的左上角将显示一个正方形的选择柄。激活 一个层后，便可以向其中插入对象。
网页设计与制作案例教程电子教案第 11单元
4．设置层的属性
接下来设置层的属性，对层的设置要求 如下：
（ 1 ） 层 “ Layer1” 的 “ 宽 ” 设 置 为 “550px”，“高”设置为“450px”。
（ 2 ） 层 “ Layer1” 的 “ 左 ” 设 置 为 “80px”，“上”设置为“9px”。
网页设计与制作案例教程电子教案第 11单元
（3）层“Layer1”的“背景图像”设置 为“image/bj06.jpg”。
（ 4 ） 层 “ Layer1” 的 可 见 性 设 置 为 “default”。
5．调整层的大小和位置
（1）调整层的大小 在Dreamweaver 8中，调整层的大小的
网页设计与制作案例教程电子教案第 11单元
（1）描绘层
在“插入”工具栏上，单击按钮，在下拉 菜单中单击菜单项【布局】，切换到“布局” 插入工具栏，在标准模式下，【描绘层】按 钮有效。
单击“布局”插入工具栏上的【描绘层】
按钮，当鼠标光标在编辑窗口中变成“+”字
形状时，按住鼠标左键并拖动，绘制一个大
小合适的区域。释放鼠标即可完成一个新层
的绘制。
网页设计与制作案例教程电子教案第 11单元
（2）插入层 将鼠标光标置于需要插入层的位置。 Dreamweaver 8主窗口中，单击菜单【插 入】→【布局对象】→【层】。 在文档窗口中会自动插入一个预定大小的 层。
网页设计与制作案例教程电子教案第 11单元
选择一个层
将鼠标指针指向层边框，边框线变成红 色，鼠标指针变成形状，单击边框线，层的 边框将出现8个蓝色实心正方形，表示该层 已被选中。
网页设计与制作案例教程电子教案第 11单元
选择多个层 按住“Shift”键，然后依次选中所需选择
的多个层，当选中多个层时，最后选定的层 的控制柄将以蓝色实心突出显示，其他层的 控制柄以蓝色空心显示。
网页设计与制作案例教程电子教案第 11单元
具体设置过程如下： （1）通过“属性”面板设置层的属性 （2）通过“层”面板管理层
在Dreamweaver 8主窗口中，单击菜单 【窗口】→【层】，可以打开 “层”面板。 通过“层”面板可以管理文档中层、选择多 个层、控制层的叠放顺序、更改层的可见性。
网页设计与制作案例教程电子教案第 11单元
网页设计与制作案例教 程电子教案第11单元
2020/12/15
网页设计与制作案例教程电子教案第 11单元
知识技能目标
（1）掌握如何描绘层和插入层、如何选 择层和激活层。
（2）掌握层的属性设置方法、如何调整 层的大小和位置。
（3）掌握在层中输入文本和插入图像的 方法。
（4）掌握嵌套层的创建。 （5）了解层与表格之间的相互转换方法。
（2）在“06层的布局”文件夹中创建一 个新的网页，该网页命名为“06.html”。
网页设计与制作案例教程电子教案第 11单元
（3）设置网页标题，在文档工具栏的 “标题”文本框直接输入文档标题“长沙世 界之窗内广场”即可。
（4）保存该网页。
网页设计与制作案例教程电子教案第 11单元
2．创建层
创建第一个层，层编号为“Layer1”； 创建第二个层，层编号为“Layer2”。 创建一个新层通常有以下两种方法：