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

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