(精品)第9章创建框架结构的页面.pptx

《(精品)第9章创建框架结构的页面.pptx》由会员分享，可在线阅读，更多相关《(精品)第9章创建框架结构的页面.pptx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第9章创建框架结构的页面框架指的是页面的一种布局，这种布局和之前说的“表格布局”，还有之后章节将学习的“CSS+DIV”布局都是不同的。那么具体框架布局是怎样的呢？事实上，框架布局也许缺少了那么一些灵活性，但是它的特点是可以将浏览器分割成几部分。这是其他标签无法做到的，本章将介绍的便是这种技能。9.1 创建窗口框架页面有这样的一种网页，导航栏放在左侧，右侧是页面主体。当浏览者点击左侧导航栏时，右侧的页面会刷新，但是，左侧导航栏部分依然保持不变。下图是一个常见的论坛导航页面。9.1.1 创建窗口框架的和标签使用标签在HTML页面中设置框架。那么，当一个浏览器被分成很多个框架的时候，这些框架放在一

2、起，即称之为框架集。框架集的HTML标签为，也称之为框架结构标签。如果要在框架中放入内容，采用的方式是通过引用所放内容的路径，来加载对象。它的代码如下写法。/表明这是一个框架集 /这是其中一个框架中的页面路径 9.1.2 横向分割窗口窗口的分割只有横纵两个方向，没有斜方向的分割方法。横向分割窗口，使用“rows”属性。如代码所示。9.1.3 纵向分割窗口除去横向分割窗口，另一种形式则是纵向分割窗口。当纵向分割窗口的时候，使用的是cols属性。同样，用百分比或者像素都可以来表示框架横向的宽度。9.1.4 框架的嵌套框架嵌套就是说如果同时混合使用横纵结构。即在分割的框架中再嵌套一个框架集。那么，写

3、法上只要在标签中再放入标签就可以了。9.1.5 将页面放入到窗口框架中将页面放置入窗口框架中，需要在每一个框架中通过路径的方式来添加页面。若一个框架集中包含3个框架，那意味着要准备3个页面分别放入相应的框架中。9.2 花点心思修饰框架的细节设计页面没有太多复杂的技术，但是要设计出优秀的页面，关键在于对细节的把握，也就是所谓的“细节出大师”。在设计这一领域中，是一条重要的准则：页面是给浏览互联网的用户提供的，必须要考虑页面给使用者的友好度。一个具有亲和力的页面会让浏览者对这个页面留下深刻的印象。9.2.1给无法处理框架的浏览器注释说明在框架设计的页面时候，有时，会遇到不能显示框架的浏览器。在这种

4、情况下，可以使用标签加以注释。9.2.2固定框架的位置在标签的框架集中，虽然框架的位置是按照事先设定好的效果出现在浏览器中的，但是框架的边框并非是固定的，如果浏览者拖拽框架集的边框，框架的大小是可以随意改变的。若设计者希望固定框架的尺寸，可以使用标签来定位边框的位置。9.2.3框架中设置滚动条窗口框架中有个细节，当页面中的内容超出框架的范围时，此时框架的底边会出现滚动条。这个滚动条也是可以设置的，通过scrolling属性可以实现这种控制。9.3 修改框架边框的样式框架的边框样式也是可以修改的，通过一些简单的属性修饰，可以改变框架边框的表现形式。如边框的粗细、颜色，或者是边框的边距。使用这些特

5、点，可以做出一些有意思的页面效果。9.3.1判定边框是否显示在有些情况下，灰色的边框会很麻烦，看上去像把页面剖解的支离破碎。使用“frameborder”属性可以决定是否显示边框。它的写法是：9.3.2 改变边框的表现效果border表示框架的边框。在这个属性上可以扩展出一些新的特性。如bordercolor，表示修改边框的颜色。通过修改border扩展的一些属性可以改变边框的表现效果。9.3.3 边框的边距边距是指框架内页面内容和边框的距离。使用属性设置左右两边的边距，使用属性设置上下两边的边距。使用的方法如实例9-10页面展示的不同效果。9.4 框架集中页面之间的链接本章的一开始，提到了如

6、论坛形式的页面，以左边为导航栏，右边为页面的主体部分这样框架集下的布局页面。在本节中，将介绍如何使用超链接配合框架的特性，制作出具有特色的页面。9.4.1在指定的框架中打开链接在一张原始的页面中，如下图所示的案例。通过这个案例，可以看到一个简单的页面导航是如何在同一个窗口中实现链接的。9.4.2 框架内的锚点链接使用name属性还可以实现在框架内锚点链接。在框架集中设置页面路径的同时，指定锚点的位置。如下图所示，这是一张左右分割布局的页面。9.4.2 框架内的锚点链接在这个页面中，设计者希望当点击左侧边框中文本“带有锚的链接”时，右侧边框中页面跳转到相应的文本位置。那么，在左侧的边框中的页面，

7、写入如下所示的页面代码：带有锚的链接右侧框架中的页面保存为页面文件12.html，右侧框架命名为showframe，所以这句代码的意思表明，链接到showframe框架内12.html页面的aaa位置。因此，右侧框架中的页面代码中需要有这样注明的一句代码。十四在文本“十四”的位置定义为“aaa”的锚点。9.5 灵活的框架标签的用法不同于标签，在表现上也有不少差别。标签是可以放在标签中使用的。同样，它可以使用修饰框架的属性，常见的样式属性如：9.6 案例：制定自己的链接主页本节介绍的例子，将展示浮动框架如何结合标签来布局页面。思路是这样：通过表格来布局，在表格的单元格中，放入浮动框架。和只使用框架集的布局来比较，这样还是比较好的，虽然表格布局已经有些落伍了，但是类似这样布局的运用，依然是个不错的方法。9.7 小结本章介绍了通过框架集来布局页面的知识。通过本章所有的知识点，读者可以将多个页面放入同一个浏览器窗口中，使页面内容更加丰富。对于浏览者来说，增加了页面的便捷性，无疑也提高了页面的友好度。