大学计算机课件第8次课件

2022-12-27大学计算机课件(第8次)1第第8讲讲 使用框架和层布局网页使用框架和层布局网页参考资源：大学计算机2022-12-27大学计算机课件(第8次)2本讲内容本讲内容v1 1框架及其基本操作；框架及其基本操作；v2 2使用框架制作图片浏览器；使用框架制作图片浏览器；v3 3层及其基本操作层及其基本操作v4 4使用层制作下拉菜单；使用层制作下拉菜单；v5 5讨论、总结和作业讨论、总结和作业2022-12-27大学计算机课件(第8次)31框架及其基本操作框架及其基本操作v框架网页的外观框架网页的外观2022-12-27大学计算机课件(第8次)41框架及其基本操作框架及其基本操作v框架网页的外观框架网页的外观 1)1)页面被分成了多个子页面；页面被分成了多个子页面；2)2)每个子页面有独立的滚动条；每个子页面有独立的滚动条；3)3)点击其中一个子页面中的超链接，可在点击其中一个子页面中的超链接，可在另外一个子页面中打开目标端点网页另外一个子页面中打开目标端点网页2022-12-27大学计算机课件(第8次)51框架及其基本操作框架及其基本操作v什么是框架？什么是框架？框架是网页文档窗口带有边框的矩形区域，框架是网页文档窗口带有边框的矩形区域，每一个框架都有一个名称。

每一个框架都有一个名称框架是一个网页文档容器，用于显示一个独框架是一个网页文档容器，用于显示一个独立网页文件立网页文件2022-12-27大学计算机课件(第8次)61框架及其基本操作框架及其基本操作v什么是框架集？什么是框架集？框架集是框架集是HTMLHTML文件，它定义一组框架的布局文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面置以及在每个框架中初始显示的页面URLURL框架集文件本身不包含要在浏览器中显示的框架集文件本身不包含要在浏览器中显示的内容，只是告诉浏览器如何显示一组框架以内容，只是告诉浏览器如何显示一组框架以及在这些框架中显示哪些网页文档及在这些框架中显示哪些网页文档框架集可以嵌套，即一个框架集可以作为一框架集可以嵌套，即一个框架集可以作为一个框架嵌入在另外一个框架集中个框架嵌入在另外一个框架集中2022-12-27大学计算机课件(第8次)71框架及其基本操作框架及其基本操作v网页文档、框架和框架集的关系网页文档、框架和框架集的关系 一个框架中显示一个独立的网页文档；一个框架中显示一个独立的网页文档；一个框架集可以可以包含多个框架，这些框一个框架集可以可以包含多个框架，这些框架可以构成多行多列的框架区域；架可以构成多行多列的框架区域；对于复杂的框架结构，只能采用嵌套方式实对于复杂的框架结构，只能采用嵌套方式实现；现；网页文档中不管有多少框架集嵌套，只有一网页文档中不管有多少框架集嵌套，只有一个框架集文件。

个框架集文件2022-12-27大学计算机课件(第8次)81框架及其基本操作框架及其基本操作v框架的优点框架的优点（1 1）使用框架，浏览者单击框架网页中某）使用框架，浏览者单击框架网页中某个超链接时，浏览器通常不需要重新加载（个超链接时，浏览器通常不需要重新加载（即重新从即重新从WebWeb服务器下载）框架中的每个网服务器下载）框架中的每个网页，只需重新加载某个框架中的网页，因此页，只需重新加载某个框架中的网页，因此可以减少一些不必要的网络传输流量，提高可以减少一些不必要的网络传输流量，提高网页的浏览速度网页的浏览速度2 2）每个框架都具有自己的滚动条，各自）每个框架都具有自己的滚动条，各自可以独立滚动，并且在框架网页重新加载时可以独立滚动，并且在框架网页重新加载时也互不影响（也就是说，没有重新加载的网也互不影响（也就是说，没有重新加载的网页可以保留滚动条的当前滚动位置）页可以保留滚动条的当前滚动位置）2022-12-27大学计算机课件(第8次)91框架及其基本操作框架及其基本操作v框架的缺点框架的缺点（1 1）有时难以实现不同框架中各元素之间）有时难以实现不同框架中各元素之间比较精确的图形对齐。

比较精确的图形对齐2 2）由于框架中网页的）由于框架中网页的URLURL不显示在浏览器不显示在浏览器中，因此浏览者难以将特定页面添加到收藏中，因此浏览者难以将特定页面添加到收藏夹2022-12-27大学计算机课件(第8次)101框架及其基本操作框架及其基本操作v新建框架网页新建框架网页2022-12-27大学计算机课件(第8次)111框架及其基本操作框架及其基本操作v选择框架和框架集选择框架和框架集“框架”面板中被选中的框架“框架”面板中被选选中的框架集2022-12-27大学计算机课件(第8次)121框架及其基本操作框架及其基本操作v保存框架集和框架网页保存框架集和框架网页 保存框架保存框架 框架另存为框架另存为 保存框架集保存框架集 框架集另存为框架集另存为 全部保存全部保存2022-12-27大学计算机课件(第8次)131框架及其基本操作框架及其基本操作v编辑框架编辑框架 设置框架和框架集属性设置框架和框架集属性 改变框架大小改变框架大小 拆分框架拆分框架 删除框架删除框架2022-12-27大学计算机课件(第8次)141框架及其基本操作框架及其基本操作v问题：下图中至少包含几个框架？问题：下图中至少包含几个框架？2022-12-27大学计算机课件(第8次)152使用框架制作图片浏览器使用框架制作图片浏览器v最终效果最终效果2022-12-27大学计算机课件(第8次)162使用框架制作图片浏览器使用框架制作图片浏览器v案例总结案例总结 1)1)使用框架和表格布局网页使用框架和表格布局网页 2)2)框架网页中超链接的特点和响应方式框架网页中超链接的特点和响应方式 3)3)框架网页和框架之间的关系框架网页和框架之间的关系2022-12-27大学计算机课件(第8次)173层及其基本操作层及其基本操作v网页中的层网页中的层2022-12-27大学计算机课件(第8次)183层及其基本操作层及其基本操作v层的特点层的特点 层是一种层是一种HTMLHTML页面元素，从外观上看，层像页面元素，从外观上看，层像一个浮在网页上方的矩形小窗口，层可以定一个浮在网页上方的矩形小窗口，层可以定位在页面上任意位置。

位在页面上任意位置层同时也是一个容器，可以容纳文本、图像层同时也是一个容器，可以容纳文本、图像或其它任意可在或其它任意可在HTMLHTML文档正文中出现的内容文档正文中出现的内容甚至层内还可以放入另外一个层，即层可以甚至层内还可以放入另外一个层，即层可以嵌套2022-12-27大学计算机课件(第8次)193层及其基本操作层及其基本操作v层的概念层的概念 1)1)层是一个矩形窗口层是一个矩形窗口 2)2)层根据需要可以显示，也可以隐藏层根据需要可以显示，也可以隐藏 3)3)层可以浮动在网页的上方层可以浮动在网页的上方 4)4)层的位置在网页中比较自由层的位置在网页中比较自由2022-12-27大学计算机课件(第8次)203层及其基本操作层及其基本操作v层的作用层的作用（1 1）由于层可以重叠，所以可将网页元素）由于层可以重叠，所以可将网页元素置于不同的层当中，以产生许多重叠效果置于不同的层当中，以产生许多重叠效果2 2）由于层可以游离于网页文档之上，因）由于层可以游离于网页文档之上，因此可以利用层来精确定位网页元素此可以利用层来精确定位网页元素3 3）层可以显示和隐藏，可以制作多种网）层可以显示和隐藏，可以制作多种网页特效。

页特效2022-12-27大学计算机课件(第8次)213层及其基本操作层及其基本操作v创建层创建层 直接插入层直接插入层 绘制层绘制层 创建嵌入层创建嵌入层2022-12-27大学计算机课件(第8次)223层及其基本操作层及其基本操作v层的基本操作层的基本操作 选择层选择层 设置层的属性设置层的属性 调整层的大小调整层的大小 移动层移动层 对齐层对齐层 更改层的顺序更改层的顺序 设置层的可见性设置层的可见性 删除层删除层2022-12-27大学计算机课件(第8次)234使用层制作下拉菜单使用层制作下拉菜单v最终效果最终效果2022-12-27大学计算机课件(第8次)244使用层制作下拉菜单使用层制作下拉菜单v案例总结案例总结 1)1)创建层的方法创建层的方法 2)2)层的定位方式层的定位方式 3)3)层作为容器的应用层作为容器的应用 4)4)层的显示和隐藏层的显示和隐藏 5)5)初识动作初识动作2022-12-27大学计算机课件(第8次)255讨论、总结和作业讨论、总结和作业v讨论问题讨论问题 网页制作时，我们选择什么样的网页布局方网页制作时，我们选择什么样的网页布局方法？法？v基本要求：基本要求：1)1)列出每种方法的优点；列出每种方法的优点；2)2)列出每种方法的缺点；列出每种方法的缺点；3)3)列出每种方法各自适用的场合和不适用列出每种方法各自适用的场合和不适用的场合。

的场合2022-12-27大学计算机课件(第8次)265讨论、总结和作业讨论、总结和作业v本次课总结本次课总结 1)1)表格的优缺点和适用场合表格的优缺点和适用场合 2)2)框架的优缺点和适用场合框架的优缺点和适用场合 3)3)层的优缺点和适用场合层的优缺点和适用场合2022-12-27大学计算机课件(第8次)275讨论、总结和作业讨论、总结和作业v作业作业 1 1从网络中下载并使用从网络中下载并使用Dreamweaver 8Dreamweaver 8打开打开一个框架网页（如：两全其美论坛页面，网一个框架网页（如：两全其美论坛页面，网址为址为“”“”），分析网页中的框架结构及页面），分析网页中的框架结构及页面布局情况布局情况2 2补充并完成补充并完成7.6.47.6.4节示例中其它下拉菜单节示例中其它下拉菜单的制作LOGO大学计算机课件(第8次)。