大学计算机ii课件第8次课.ppt

《大学计算机ii课件第8次课.ppt》由会员分享，可在线阅读，更多相关《大学计算机ii课件第8次课.ppt（28页珍藏版）》请在三一办公上搜索。

1、第8讲 使用框架和层布局网页,参考资源：http:/218.192.12.5/dxjsj2/,大学计算机,2022/12/17,1,广东金融学院,本讲内容,1框架及其基本操作；2使用框架制作图片浏览器；3层及其基本操作4使用层制作下拉菜单；5讨论、总结和作业。,2022/12/17,广东金融学院,2,1框架及其基本操作,框架网页的外观,2022/12/17,广东金融学院,3,1框架及其基本操作,框架网页的外观1) 页面被分成了多个子页面；2) 每个子页面有独立的滚动条；3) 点击其中一个子页面中的超链接，可在另外一个子页面中打开目标端点网页。,2022/12/17,广东金融学院,4,1框架及其

2、基本操作,什么是框架？框架是网页文档窗口带有边框的矩形区域，每一个框架都有一个名称。框架是一个网页文档容器，用于显示一个独立网页文件。,2022/12/17,广东金融学院,5,1框架及其基本操作,什么是框架集？框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面URL。框架集文件本身不包含要在浏览器中显示的内容，只是告诉浏览器如何显示一组框架以及在这些框架中显示哪些网页文档。框架集可以嵌套，即一个框架集可以作为一个框架嵌入在另外一个框架集中。,2022/12/17,广东金融学院,6,1框架及其基本操作,网页文档、框架和框架集的关系一个

3、框架中显示一个独立的网页文档；一个框架集可以可以包含多个框架，这些框架可以构成多行多列的框架区域；对于复杂的框架结构，只能采用嵌套方式实现；网页文档中不管有多少框架集嵌套，只有一个框架集文件。,2022/12/17,广东金融学院,7,1框架及其基本操作,框架的优点（1）使用框架，浏览者单击框架网页中某个超链接时，浏览器通常不需要重新加载（即重新从Web服务器下载）框架中的每个网页，只需重新加载某个框架中的网页，因此可以减少一些不必要的网络传输流量，提高网页的浏览速度。（2）每个框架都具有自己的滚动条，各自可以独立滚动，并且在框架网页重新加载时也互不影响（也就是说，没有重新加载的网页可以保留滚动

4、条的当前滚动位置）。,2022/12/17,广东金融学院,8,1框架及其基本操作,框架的缺点（1）有时难以实现不同框架中各元素之间比较精确的图形对齐。（2）由于框架中网页的URL不显示在浏览器中，因此浏览者难以将特定页面添加到收藏夹。,2022/12/17,广东金融学院,9,1框架及其基本操作,新建框架网页,2022/12/17,广东金融学院,10,1框架及其基本操作,选择框架和框架集,2022/12/17,广东金融学院,11,“框架”面板中被选中的框架,“框架”面板中被选选中的框架集,1框架及其基本操作,保存框架集和框架网页保存框架框架另存为保存框架集框架集另存为全部保存,2022/12/1

5、7,广东金融学院,12,1框架及其基本操作,编辑框架设置框架和框架集属性改变框架大小拆分框架删除框架,2022/12/17,广东金融学院,13,1框架及其基本操作,问题：下图中至少包含几个框架？,2022/12/17,广东金融学院,14,2使用框架制作图片浏览器,最终效果,2022/12/17,广东金融学院,15,2使用框架制作图片浏览器,案例总结1) 使用框架和表格布局网页2) 框架网页中超链接的特点和响应方式3) 框架网页和框架之间的关系,2022/12/17,广东金融学院,16,3层及其基本操作,网页中的层,2022/12/17,广东金融学院,17,3层及其基本操作,层的特点层是一种HT

6、ML页面元素，从外观上看，层像一个浮在网页上方的矩形小窗口，层可以定位在页面上任意位置。层同时也是一个容器，可以容纳文本、图像或其它任意可在HTML文档正文中出现的内容。甚至层内还可以放入另外一个层，即层可以嵌套。,2022/12/17,广东金融学院,18,3层及其基本操作,层的概念1) 层是一个矩形窗口2) 层根据需要可以显示，也可以隐藏3) 层可以浮动在网页的上方4) 层的位置在网页中比较自由,2022/12/17,广东金融学院,19,3层及其基本操作,层的作用（1）由于层可以重叠，所以可将网页元素置于不同的层当中，以产生许多重叠效果。（2）由于层可以游离于网页文档之上，因此可以利用层来精

7、确定位网页元素。（3）层可以显示和隐藏，可以制作多种网页特效。,2022/12/17,广东金融学院,20,3层及其基本操作,创建层直接插入层绘制层创建嵌入层,2022/12/17,广东金融学院,21,3层及其基本操作,层的基本操作选择层设置层的属性调整层的大小移动层对齐层更改层的顺序设置层的可见性删除层,2022/12/17,广东金融学院,22,4使用层制作下拉菜单,最终效果,2022/12/17,广东金融学院,23,4使用层制作下拉菜单,案例总结1) 创建层的方法2) 层的定位方式3) 层作为容器的应用4) 层的显示和隐藏5) 初识动作,2022/12/17,广东金融学院,24,5讨论、总结

8、和作业,讨论问题网页制作时，我们选择什么样的网页布局方法？基本要求：1) 列出每种方法的优点；2) 列出每种方法的缺点；3) 列出每种方法各自适用的场合和不适用的场合。,2022/12/17,广东金融学院,25,5讨论、总结和作业,本次课总结1) 表格的优缺点和适用场合2) 框架的优缺点和适用场合3) 层的优缺点和适用场合,2022/12/17,广东金融学院,26,5讨论、总结和作业,作业1从网络中下载并使用Dreamweaver CS6打开一个框架网页（如：两全其美论坛页面，网址为“http:/”），分析网页中的框架结构及页面布局情况。2补充并完成7.6.4节示例中其它下拉菜单的制作。,2022/12/17,广东金融学院,27,Thank You !,