网页第4章.ppt

第四章 使用层和框架布局页面 本章要点 　在制作网页时，使用层可以精确定位页面中的元素。用户不仅可以在层中插入网页中的内容，而且可以方便地移动层达到移动网页内容的目的，这是其它布局工具所不及的地方。除此之外，还可以使用框架来划分网页的布局。根据网页中的不同内容，使用框架把文档窗口分成几个小窗口。在每个窗口中，分别显示不同的内容。 第四章 使用层和框架布局页面 第四章 使用层和框架布局页面 　 动态HTML技术的广泛应用使网页的内容更加生动。使用Dreamweaver自带的行为，可以将网页中的图像进行替换，下面就利用层布局先制作一个简单的网页，然后在为图像添加行为，具体的操作步骤如下： 　（1）为了精确定位层，可以单击【查看】︱【网格】︱【显示网格】命令，将网格显示出来。然后单击【修改】︱【页面属性】命令，在弹出的【页面属性】对话框中，设置网页的背景颜色为蓝色。 　（2）在【插入】工具栏的【布局】选项卡中，单击【描绘层】按钮，然后在【文档】窗口中创建一个层。设置其属性宽=550px，高=76px，背景颜色=浅黄色。 　（3）为该层添加文本，输入文字“精典图片”和Windows XP，并设置文字的字体、字号、颜色以及对齐方式。 第四章 使用层和框架布局页面 　　（4）接着，再绘制4个层，这4个层用来加载Windows XP自带的图片，其大小相等。先绘制出一个层，设置其属性宽=250px，高=140px，然后使用复制、粘贴命令得到3个相同的层。 　　（5）分别在4个层中添加图片，然后按下Shift+回车键，在图片的下面，输入文件名，并修改其属性，如图4-19所示。 第四章 使用层和框架布局页面 　　（6）使用层布局好页面后，就可以为图片添加行为了。选中图片Sunset，然后在图4-20所示的【行为】面板中，单击加号按钮，在弹出的下拉菜单中，选择【交换图像】命令，打开如图4-21所示的对话框。 　　（7）在【设定原始档为】文本框中指定替换图像的位置和名称。也可以单击【浏览】按钮，在弹出的对话框中选择要替换的图像。如果勾选【预先载入图像】复选框，则浏览器在下载网页时会把第二个交换图像一起下载，当鼠标移过图片时，交换图像的显示就不会有延迟。勾选【鼠标滑开时恢复图像】复选框，则在鼠标移走时，恢复原图像。 第四章 使用层和框架布局页面 　下面介绍一个利用框架，布局页面的实例，如图4-36所示。从图中可以看出，页面由三部分组成，最上面是站点的名称，基本是不变的，可以单独占一个框架，并且框架的高度固定。左边是导航栏，单独占一个框架，尺寸也固定。右边是页面的主体内容，单独占一个框架，尺寸可以设为百分比。导航栏中链接目标的内容就是显示在这个框架中，这是框架最常用的功能。下面就开始制作这个实例，具体的步骤如下： 　（1）在【插入】工具栏的【布局】选项卡中，单击【框架】按钮，然后在弹出的下拉菜单中，选择【顶部和嵌套的左侧框架】按钮，设计一个如图4-37所示的框架页面。 第四章 使用层和框架布局页面 　（2）按下Alt键，单击最上面的框架进行选中，然后在属性检查器中，将其命名为top，设置【滚动】=否，【边框】=否，并且勾选【不能调整大小】复选框，如图4-37所示。 　（3）选中左侧的框架，在属性检查器中，将其命名为left，设置【滚动】=自动，【边框】=否，并且勾选【不能调整大小】复选框。选中右侧的框架，在属性检查器中，将其命名为main，设置【滚动】=否，【边框】=否。 　（4）将鼠标放置在框架中，单击【文件】︱【保存全部】命令，将每个框架中的文件进行保存。 第四章 使用层和框架布局页面 　（5）在top和left框架中，插入如图4-36所示的内容，然后制作要在main框架中显示的其他页面，最后为导航框架中的文本建立链接。 　（6）选中导航栏中要链接的文本“网卡”，然后在属性检查器的【链接】文本框中设置要链接的文本，并在【目标】下拉列表中选择main，如图4-38所示。按照同样的方法，为导航栏中的其他文本制作链接。 第四章 使用层和框架布局页面 第四章 使用层和框架布局页面 第四章 使用层和框架布局页面 * 层与表格的转换 创建框架和框架集 设置框架和框架集属性 使用层和框架布局页面 预备知识 网页制作基本操作层的知识 本章学习目标： 创建层的方法 使用层面板及设置其参数 激活、选择以及调整层的大小 改变层的叠放顺序及可见性 使用框架及框架集的技巧 设置框架和框架集的属性 创建层和嵌套层 层的基本操作 4.3 课堂练习4-1：制作翻转效果 图4-19 在层内添加文字和