第8讲 使用框架和层布局网页参考资源： http:/218.192.12.13/kcpt/jkx.html大学计算机*1广东金融学院本讲内容v1框架及其基本操作； v2使用框架制作图片浏览器； v3层及其基本操作 v4使用层制作下拉菜单； v5讨论、总结和作业。*广东金融学院21框架及其基本操作v框架网页的外观*广东金融学院31框架及其基本操作v框架网页的外观 1) 页面被分成了多个子页面； 2) 每个子页面有独立的滚动条； 3) 点击其中一个子页面中的超链接，可在 另外一个子页面中打开目标端点网页。*广东金融学院41框架及其基本操作v什么是框架？ 框架是网页文档窗口带有边框的矩形区域， 每一个框架都有一个名称。 框架是一个网页文档容器，用于显示一个独 立网页文件。*广东金融学院51框架及其基本操作v什么是框架集？ 框架集是HTML文件，它定义一组框架的布局 和属性，包括框架的数目、框架的大小和位 置以及在每个框架中初始显示的页面URL。 框架集文件本身不包含要在浏览器中显示的 内容，只是告诉浏览器如何显示一组框架以 及在这些框架中显示哪些网页文档。 框架集可以嵌套，即一个框架集可以作为一 个框架嵌入在另外一个框架集中。*广东金融学院61框架及其基本操作v网页文档、框架和框架集的关系 一个框架中显示一个独立的网页文档； 一个框架集可以可以包含多个框架，这些框 架可以构成多行多列的框架区域； 对于复杂的框架结构，只能采用嵌套方式实 现； 网页文档中不管有多少框架集嵌套，只有一 个框架集文件。*广东金融学院71框架及其基本操作v框架的优点 （1）使用框架，浏览者单击框架网页中某 个超链接时，浏览器通常不需要重新加载（ 即重新从Web服务器下载）框架中的每个网 页，只需重新加载某个框架中的网页，因此 可以减少一些不必要的网络传输流量，提高 网页的浏览速度。 （2）每个框架都具有自己的滚动条，各自 可以独立滚动，并且在框架网页重新加载时 也互不影响（也就是说，没有重新加载的网 页可以保留滚动条的当前滚动位置）。*广东金融学院81框架及其基本操作v框架的缺点 （1）有时难以实现不同框架中各元素之间 比较精确的图形对齐。 （2）由于框架中网页的URL不显示在浏览器 中，因此浏览者难以将特定页面添加到收藏 夹。*广东金融学院91框架及其基本操作v新建框架网页*广东金融学院101框架及其基本操作v选择框架和框架集*广东金融学院11“框架”面板中被选中的框架“框架”面板中被选选中的框架集1框架及其基本操作v保存框架集和框架网页 保存框架 框架另存为 保存框架集 框架集另存为 全部保存*广东金融学院121框架及其基本操作v编辑框架 设置框架和框架集属性 改变框架大小 拆分框架 删除框架*广东金融学院131框架及其基本操作v问题：下图中至少包含几个框架？*广东金融学院142使用框架制作图片浏览器v最终效果*广东金融学院152使用框架制作图片浏览器v案例总结 1) 使用框架和表格布局网页 2) 框架网页中超链接的特点和响应方式 3) 框架网页和框架之间的关系*广东金融学院163层及其基本操作v网页中的层*广东金融学院173层及其基本操作v层的特点 层是一种HTML页面元素，从外观上看，层像 一个浮在网页上方的矩形小窗口，层可以定 位在页面上任意位置。 层同时也是一个容器，可以容纳文本、图像 或其它任意可在HTML文档正文中出现的内容 。 甚至层内还可以放入另外一个层，即层可以 嵌套。*广东金融学院183层及其基本操作v层的概念 1) 层是一个矩形窗口 2) 层根据需要可以显示，也可以隐藏 3) 层可以浮动在网页的上方 4) 层的位置在网页中比较自由*广东金融学院193层及其基本操作v层的作用 （1）由于层可以重叠，所以可将网页元素 置于不同的层当中，以产生许多重叠效果。 （2）由于层可以游离于网页文档之上，因 此可以利用层来精确定位网页元素。 （3）层可以显示和隐藏，可以制作多种网 页特效。*广东金融学院203层及其基本操作v创建层 直接插入层 绘制层 创建嵌入层*广东金融学院213层及其基本操作v层的基本操作 选择层 设置层的属性 调整层的大小 移动层 对齐层 更改层的顺序 设置层的可见性 删除层*广东金融学院224使用层制作下拉菜单v最终效果*广东金融学院234使用层制作下拉菜单v案例总结 1) 创建层的方法 2) 层的定位方式 3) 层作为容器的应用 4) 层的显示和隐藏 5) 初识动作*广东金融学院245讨论、总结和作业v讨论问题 网页制作时，我们选择什么样的网页布局方 法？ v基本要求： 1) 列出每种方法的优点； 2) 列出每种方法的缺点； 3) 列出每种方法各自适用的场合和不适用 的场合。*广东金融学院255讨论、总结和作业v本次课总结 1) 表格的优缺点和适用场合 2) 框架的优缺点和适用场合 3) 层的优缺点和适用场合*广东金融学院265讨论、总结和作业v作业 1从网络中下载并使用Dreamweaver 8打开 一个框架网页（如：两全其美论坛页面，网 址为“http:/www.lqqm.net”），分析网 页中的框架结构及页面布局情况。 2补充并完成7.6.4节示例中其它下拉菜单 的制作。*广东金融学院27LOGOwww.gduf.edu.cn