DW网页设计—第9章创建框架结构的页面.ppt

第9章 创建框架结构的页面 框架指的是页面的一种布局，这种布局和之前说的“表格布局”，还有之后章节将学习的“CSS+DIV”布局都是不同的。那么具体框架布局是怎样的呢？事实上，框架布局也许缺少了那么一些灵活性，但是它的特点是可以将浏览器分割成几部分。这是其他标签无法做到的，本章将介绍的便是这种技能。 9.1 创建窗口框架页面 有这样的一种网页，导航栏放在左侧，右侧是页面主体。当浏览者点击左侧导航栏时，右侧的页面会刷新，但是，左侧导航栏部分依然保持不变。下图是一个常见的论坛导航页面。 9.1.1 创建窗口框架的FRAMESET和FRAME标签 使用frame标签在HTML页面中设置框架。那么，当一个浏览器被分成很多个框架的时候，这些框架放在一起，即称之为框架集。框架集的HTML标签为frameset，也称之为框架结构标签。如果要在框架中放入内容，采用的方式是通过引用所放内容的路径，来加载对象。它的代码如下写法。 frameset ...... //表明这是一个框架集 frame src=... //这是其中一个框架中的页面路径 frame src=... … /frameset 9.1.2 横向分割窗口 窗口的分割只有横纵两个方向，没有斜方向的分割方法。横向分割窗口，使用“rows”属性。如代码所示。 frameset rows=框架高度,框架高度,...* 9.1.3 纵向分割窗口 除去横向分割窗口，另一种形式则是纵向分割窗口。当纵向分割窗口的时候，使用的是cols属性。同样，用百分比或者像素都可以来表示框架横向的宽度。 9.1.4 框架的嵌套 框架嵌套就是说如果同时混合使用横纵结构。即在分割的框架中再嵌套一个框架集。那么，写法上只要在frameset标签中再放入frameset标签就可以了。 9.1.5 将页面放入到窗口框架中 将页面放置入窗口框架中，需要在每一个框架中通过路径的方式来添加页面。若一个框架集中包含3个框架，那意味着要准备3个页面分别放入相应的框架中。 9.2 花点心思修饰框架的细节 设计页面没有太多复杂的技术，但是要设计出优秀的页面，关键在于对细节的把握，也就是所谓的“细节出大师”。在设计这一领域中，是一条重要的准则：页面是给浏览互联网的用户提供的，必须要考虑页面给使用者的友好度。一个具有亲和力的页面会让浏览者对这个页面留下深刻的印象。 9.2.1 给无法处理框架的浏览器注释说明 在框架设计的页面时候，有时，会遇到不能显示框架的浏览器。在这种情况下，可以使用noframe标签加以注释。 9.2.2 固定框架的位置 在frameset标签的框架集中，虽然框架的位置是按照事先设定好的效果出现在浏览器中的，但是框架的边框并非是固定的，如果浏览者拖拽框架集的边框，框架的大小是可以随意改变的。若设计者希望固定框架的尺寸，可以使用noresize标签来定位边框的位置。 9.2.3 框架中设置滚动条 窗口框架中有个细节，当页面中的内容超出框架的范围时，此时框架的底边会出现滚动条。这个滚动条也是可以设置的，通过scrolling属性可以实现这种控制。 9.3 修改框架边框的样式 框架的边框样式也是可以修改的，通过一些简单的属性修饰，可以改变框架边框的表现形式。如边框的粗细、颜色，或者是边框的边距。使用这些特点，可以做出一些有意思的页面效果。 9.3.1 判定边框是否显示 在有些情况下，灰色的边框会很麻烦，看上去像把页面剖解的支离破碎。使用“frameborder”属性可以决定是否显示边框。它的写法是： frame frameborder=0 src= 9.3.2 改变边框的表现效果 border表示框架的边框。在这个属性上可以扩展出一些新的特性。如bordercolor，表示修改边框的颜色。通过修改border扩展的一些属性可以改变边框的表现效果。 9.3.3 边框的边距 边距是指框架内页面内容和边框的距离。使用marginwidth属性设置左右两边的边距，使用marginheight属性设置上下两边的边距。使用的方法如实例9-10页面展示的不同效果。 9.4 框架集中页面之间的链接 本章的一开始，提到了如论坛形式的页面，以左边为导航栏，右边为页面的主体部分这样框架集下的布局页面。在本节中，将介绍如何使用超链接配合框架的特性，制作出具有特色的页面。 9.4.1 在指定的框架中打开链接 在一张原始的页面中，如下图所示的案例。通过这个案例，可以看到一个简单的页面导航是如何在同一个窗口中实现链接的。 9.4.2 框架内的锚点链接 使用name属性还可以实现在框架内锚点链接。在框架集中设置页面路径的同时，指定锚点的位置。如下图所示，这是一张左右分割