html+css网页设计指南 1课件

《html+css网页设计指南 1课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章创建框架结构的页面框架指的是页面的一种布局，这种布局和之前说的“表格布局”，和之后章节将学习的“CSS+DIV”布局都是不同的。那么具体框架布局是怎样的呢？事实上，框架布局也许缺少了那么一些灵活性，但是它的特点是可以将浏览器分割成几部分。这是其他标签无法做到的，本章将介绍的便是这种技能。本章主要的知识点有：学习如何创建框架集。掌握基本的页面布局。通过一些属性修饰框架。学习如何在框架中实现页面链接以及锚点链接。创建浮动框架。9.1创建窗口框架页面有这样的一种网页，导航栏放在左侧，右侧是页面主

2、体，但是当浏览者点击左侧导航栏时，右侧的页面会刷新，但是，左侧导航栏部分依然保持不变。如图9.1的一个常见的论坛导航页面。9.1.1创建窗口框架的和标签使用框架在HTML页面中设置框架。那么，当一个浏览器被分成很多个框架的时候，这些框架放在一起，既称之为框架集。框架集的HTML标签为，也称之为框架结构标签。所以，如果要在框架中放入内容，采用的方式是通过引用所放内容的路径，来加载对象。它的代码如下写法。

3、.>//表明这是一个框架集//这是其中一个框架中的页面路径...需要注意的是，不能将标签和标签一起使用。原理上，因为框架集分割的是浏览器，也就是说，框架集至少也需要有2个框架组成。所以，不存在只有一个框架的页面。而且，框架集的作用是将多个页面同时展示在浏览器中，同样，也不存在包含框架的独立页面。因为这样，标签和标签是不能放在标签内的，这样做没

4、有意义。9.1.2横向分割窗口窗口的分割只有横纵两个方向，没有斜方向的分割方法，横向分割窗口，使用“rows”属性。如代码所示。“框架高度”可以使用百分比或者像素来表示。“*”表示最后一个框架的高度，即剩下来的最后一个，也就无需再用数值表示。这里通过一个例子来说明如何实现使用框架横向分割窗口。如代码9-1中横向分割窗口的页面代码。【本节示例参考：资料光盘第9章9-1横向分割窗口.html】9.1.3纵向分割窗口除去横向分割窗口，另

5、一种形式则是纵向分割窗口。当纵向分割窗口的时候，使用的是“cols”属性。同样，用百分比或者像素都可以来表示框架横向的宽度。如代码9-2所示的纵向分割窗口。【本节示例参考：资料光盘第9章9-2纵向分割窗口.html】9.1.4框架的嵌套框架嵌套就是说如果同时混用使用横纵结构。即在分隔号的框架中进行新的窗口分割，之后将这个框架替换成一个新的框架集。那么，写法上只要在标签中再放入标签就可以了。如代码9-3中一个简单的框架的件套的页面代码。【本节示例参考：资

6、料光盘第9章9-3框架的嵌套.html】9.1.5将页面放入到窗口框架中将页面放置入窗口框架中，需要在每一个框架中通过路径的方式来添加页面。如图9.5若一个框架集中包含3个框架，那意味着要准备3个页面分别放入相应的框架中。这里通过一个例子来说明如何将页面加入框架集。准备3个页面red.html、white.html和blue.html。具体的方法如代码9-4所示。【本节示例参考：资料光盘第9章9-4将页面放入到窗口框架中.html】说明：每一个框架对应着一个页面。所以，如果窗口中划分太多

7、框架，也是一种不妥当的设计方式。9.2花点心思修饰框架的细节设计页面没有太多复杂的技术，但是要设计出优秀的页面，关键在于对于细节的把握，所谓“细节出大师”。在设计这一领域中，是一个条重要的准则，页面是给浏览互联网的用户提供的，必须要考虑页面给使用者的友好度。一个具有亲和力的页面会让浏览者对这个页面留下深刻的印象。9.2.1给无法处理框架的浏览器注释说明在框架设计的页面时候，有时，会遇到不能显示框架的浏览器。在这种情况下，可以使用标签加以注释。如代码9-5所使用这样的注释方法。【

8、本节示例参考：资料光盘第9章9-5使用标签注释.html】9.2.2固定框架的位置在标签的框架集中，虽然框架的位置是按照事先设定好的出现在浏览器中。但是框架的边框并非是固定的，如果浏览者拖拽框架集的边框，框架的大小是可以随意改变的。若设计者希望固定框架的尺寸，可以使用标签来定位边框的位置。如代码9-6的页面，它的框架是固定的。【本节示例参考：资料光盘第9章9-6使用标签固定框架的位置.html】9.2.3框架中