第8章.框架导论.ppt

8.4浮动框架 在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记iframe/iframe，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法： iframe src=url/iframe 语法说明： 与框架不同的是，浮动框架可以包含在body标记中。 8.5 小实例 将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式，就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，我们可以运用a标记的target属性，来指定显示链接网页的子窗口。 厂字型布局图 小结 本章主要介绍了两种框架方式：一种是分割窗口式，一种是嵌入式，两种框架的介绍主要包括插入方式、大小调整、显示方式、初始页设置、名称设置等内容，框架一般来说应用比较多的是在导航这块内容，因为一般来说一个网站的导航栏是相似的，比如可以包含一些广告，或相同的图片，我们可以只做一个框架来调用我们的导航，这些可以提高我们的工作效率。 Company name 网页设计与开发 第8章 使用框架创建多页面布局 清华大学出版社 主要内容 建立水平或垂直的框架分割窗口 用嵌套框架分割窗口 对滚动条进行控制 在空白窗口显示网页 在框架或浮动框架上进行链接 7.1框架简介 框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。 当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。。 框架的基本结构 框架的基本结构主要分为框架和框架集两个部分。它是利用frame标记与frameset标记来定义。其中frame标记用于定义框架，而frameset标记则用于定义框架集。 框架的基本结构 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/frameset.dtd html head title框架的基本结构/title /head frameset … frame … /frame … /frameset /html 7.2框架的设置 常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用frameset标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。 窗口的水平分割 rows属性可定义一个水平分割的窗口框架。 frameset rows=高度1，高度2,…,* frame src=url frame src=url … /frameset 窗口的水平分割 语法说明 rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。 设置高度数值的方式有两种： 采用整数设置，单位为像素（px），语法如下： frameset rows=100，200，* 用百分比设置，语法如下： frameset rows=20％，50％，* !--程序8-1-- html head title采用整数设置窗口的水平分割/title /head frameset rows=80,120,* frame frame frame /frameset /html 窗口的垂直分割 cols属性可定义一个垂直分割的窗口框架。 基本语法： frameset cols=宽度1，宽度2,…,* frame src=url frame src=url … /frameset 一个垂直分割的例子 !--程序8-1-- html head title采用整数设置窗口的水平分割/title /head frameset rows=80,120,* frame frame frame /frameset /html 窗口的嵌套分割 在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图所示，实现“厂”字型框架需要对窗口进行嵌套分割。 窗口的嵌套分割 !--程序8-3-- html head title窗口的嵌套分割/title /head frameset rows=30%,* frame frameset cols=20%,* frame frame /frameset /frameset /ht