html css网页设计指南 1课件.pptVIP

第9章 创建框架结构的页面 框架指的是页面的一种布局，这种布局和之前说的“表格布局”，和之后章节将学习的“CSS+DIV”布局都是不同的。那么具体框架布局是怎样的呢？事实上，框架布局也许缺少了那么一些灵活性，但是它的特点是可以将浏览器分割成几部分。这是其他标签无法做到的，本章将介绍的便是这种技能。 本章主要的知识点有： 学习如何创建框架集。 掌握基本的页面布局。 通过一些属性修饰框架。 学习如何在框架中实现页面链接以及锚点链接。 创建浮动框架。 9.1 创建窗口框架页面 有这样的一种网页，导航栏放在左侧，右侧是页面主体，但是当浏览者点击左侧导航栏时，右侧的页面会刷新，但是，左侧导航栏部分依然保持不变。如图9.1的一个常见的论坛导航页面。 9.1.1 创建窗口框架的frameset和frame标签 使用frame框架在HTML页面中设置框架。那么，当一个浏览器被分成很多个框架的时候，这些框架放在一起，既称之为框架集。框架集的HTML标签为frameset，也称之为框架结构标签。所以，如果要在框架中放入内容，采用的方式是通过引用所放内容的路径，来加载对象。它的代码如下写法。 frameset ...... //表明这是一个框架集 frame src=... //这是其中一个框架中的页面路径 frame src=... ... /frameset 需要注意的是，不能将frameset标签和body标签一起使用。原理上，因为框架集分割的是浏览器，也就是说，框架集至少也需要有2个框架组成。所以，不存在只有一个框架的页面。而且，框架集的作用是将多个页面同时展示在浏览器中，同样，也不存在包含框架的独立页面。因为这样，frameset标签和frame标签是不能放在body标签内的，这样做没有意义。 9.1.2 横向分割窗口 窗口的分割只有横纵两个方向，没有斜方向的分割方法，横向分割窗口，使用“rows”属性。如代码所示。 frameset rows=框架高度,框架高度,...* “框架高度”可以使用百分比或者像素来表示。 “*”表示最后一个框架的高度，即剩下来的最后一个，也就无需再用数值表示。 这里通过一个例子来说明如何实现使用框架横向分割窗口。如代码9-1中横向分割窗口的页面代码。 【本节示例参考：资料光盘\第9章\9-1 横向分割窗口.html】 9.1.3 纵向分割窗口 除去横向分割窗口，另一种形式则是纵向分割窗口。当纵向分割窗口的时候，使用的是“cols”属性。同样，用百分比或者像素都可以来表示框架横向的宽度。如代码9-2所示的纵向分割窗口。 【本节示例参考：资料光盘\第9章\9-2 纵向分割窗口.html】 9.1.4 框架的嵌套 框架嵌套就是说如果同时混用使用横纵结构。即在分隔号的框架中进行新的窗口分割，之后将这个框架替换成一个新的框架集。那么，写法上只要在frameset标签中再放入frameset标签就可以了。如代码9-3中一个简单的框架的件套的页面代码。 【本节示例参考：资料光盘\第9章\9-3 框架的嵌套.html】 9.1.5 将页面放入到窗口框架中 将页面放置入窗口框架中，需要在每一个框架中通过路径的方式来添加页面。如图9.5若一个框架集中包含3个框架，那意味着要准备3个页面分别放入相应的框架中。这里通过一个例子来说明如何将页面加入框架集。准备3个页面red.html、white.html和blue.html。具体的方法如代码9-4所示。 【本节示例参考：资料光盘\第9章\9-4 将页面放入到窗口框架中.html】 说明：每一个框架对应着一个页面。所以，如果窗口中划分太多框架，也是一种不妥当的设计方式。 9.2 花点心思修饰框架的细节 设计页面没有太多复杂的技术，但是要设计出优秀的页面，关键在于对于细节的把握，所谓“细节出大师”。在设计这一领域中，是一个条重要的准则，页面是给浏览互联网的用户提供的，必须要考虑页面给使用者的友好度。一个具有亲和力的页面会让浏览者对这个页面留下深刻的印象。 9.2.1 给无法处理框架的浏览器注释说明 在框架设计的页面时候，有时，会遇到不能显示框架的浏览器。在这种情况下，可以使用noframe标签加以注释。如代码9-5所使用这样的注释方法。 【本节示例参考：资料光盘\第9章\9-5 使用noframe标签注释.html】 9.2.2 固定框架的位置 在frameset标签的框架集中，虽然框架的位置是按照事先设定好的出现在浏览器中。但是框架的边框并非是固定的，如果浏览者拖拽框架集的边框，框架的大小是可以随意改变的。若设计者希望固定框架的尺寸，可以使用noresize标签来定位边框的位置。如代码9-6的页面，它的框架是固