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

《网页设计与制作案例教程-电子教案第11单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、7.3　使用层布局网页层是制作网页时经常用到的对象，在控制页面布局方面，层要比表格更加的灵活，例如需要在文字上插入一幅图像时，可以用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸，也是一种新的发展方向。Dreamweaver8中，层和表格可以互相转换。课程引导（1）掌握如何描绘层和插入层、如何选择层和激活层。（2）掌握层的属性设置方法、如何调整层的大小和位置。（3）掌握在层中输入文本和插入图像的方法。（4）掌握嵌套层的创建。（5）了解层与表格之间的相互转换方法。知识技能目标网页浏览效果展示利用层布局的网页06.html浏览效果如图所示。图7-34利用层布局的网页浏览效果本章操

2、作任务（1）在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。（2）在网页06.html中绘制多个层，在层中输入文本、插入图像。（3）根据需要调整层的大小和位置，对层的属性进行设置。7.3.1认识层Dreamweaver8中的层（Layer）是一种页面元素，用于控制页面中对象的精确位置，可以将它放置于页面上的任意位置。层可以包含文本、图像、表单、插件或者其他任何可在HTML文档正文放入的内容。1．层的概念层作为网页中的一个区域，可以显示、隐藏、重叠和嵌套。也可以使用行为来控制层的显示与隐藏，还可以使用时间轴移

3、动层或改变层的内容，层为网页制作提供了更多的选择和更快捷的途径。（1）定位精确（2）插入灵活（3）加速浏览（4）可以叠加2．应用层布局网页的特点在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。具体操作过程如下：7.3.2层的操作（1）在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。（2）在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。1．新建网页（3）设置网页标题，在文档工具栏的“标题”文本框

4、直接输入文档标题“长沙世界之窗内广场”即可。（4）保存该网页。创建第一个层，层编号为“Layer1”；创建第二个层，层编号为“Layer2”。创建一个新层通常有以下两种方法：2．创建层在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏，在标准模式下，【描绘层】按钮有效。单击“布局”插入工具栏上的【描绘层】按钮，当鼠标光标在编辑窗口中变成“+”字形状时，按住鼠标左键并拖动，绘制一个大小合适的区域。释放鼠标即可完成一个新层的绘制。（1）描绘层将鼠标光标置于需要插入层的位置。Dreamweaver8主窗口中，单击菜单【插入】→【布局对象】→【层】。在文档窗

5、口中会自动插入一个预定大小的层。（2）插入层设置层的属性，对层进行操作时，应先应选择层，选择层可以对层进行对齐、定位、移动、调节大小等操作；向层中插入对象时，应先激活。激活层不等于选定层，两者有区别。3．选择层与激活层Dreamweaver8中可以选择一个或多个层来进行操作或更改它们的属性。选择一个层将鼠标指针指向层边框，边框线变成红色，鼠标指针变成形状，单击边框线，层的边框将出现8个蓝色实心正方形，表示该层已被选中。（1）选择层选择多个层按住“Shift”键，然后依次选中所需选择的多个层，当选中多个层时，最后选定的层的控制柄将以蓝色实心突出显示，其他层的控制柄以蓝色空心显示。（2）激

6、活层单击层中任意位置可以激活层，此时层的左上角将显示一个正方形的选择柄。激活一个层后，便可以向其中插入对象。接下来设置层的属性，对层的设置要求如下：（1）层“Layer1”的“宽”设置为“550px”，“高”设置为“450px”。（2）层“Layer1”的“左”设置为“80px”，“上”设置为“9px”。4．设置层的属性（3）层“Layer1”的“背景图像”设置为“image/bj06.jpg”。（4）层“Layer1”的可见性设置为“default”。（5）层“Layer2”的“宽”设置为“205px”，“高”设置为“450px”。（6）层“Layer2”的“左”设置为“620px”

7、，“上”设置为“9px”。（7）层“Layer2”的可见性设置为“default”，背景颜色设置“#FFFFFF”。具体设置过程如下：（1）通过“属性”面板设置层的属性（2）通过“层”面板管理层在Dreamweaver8主窗口中，单击菜单【窗口】→【层】，可以打开“层”面板。通过“层”面板可以管理文档中层、选择多个层、控制层的叠放顺序、更改层的可见性。（1）调整层的大小在Dreamweaver8中，调整层的大小的方法有多种。方法之一：选定需要调