第9章框架.ppt
第9章 框架,网页中框架（frame）的主要作用是，将浏览器窗口分割成几个相对独立的小窗口，浏览器可以将不同网页文件同时传送到这几个小窗口，这样就可以同时浏览不同网页文件。 使用框架，可以在一个浏览器中显示出多张HTML文档，这种HTML文档被称为框架页，各张框架页都可以不同，所以各页面之间是独立的。通过本章的学习，可以了解到以下框架知识： frameset标签用法 frame标签用法 框架分栏 框架重要属性 框架链接 框架实例,9.1 框架基本语法,框架，就是在一个浏览器中显示多个HTML页面，使用框架后，在一张网页中可以用来放置多个不同的网页。在新闻类的网站可以看到，有的广告专用一张网页来显示的，每次更新广告的时候，只需要对那张网页做修改。在本节中主要介绍框架的基本语法，如frameset、frame和框架的部分属性等。 如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。此外，一些框架型站点的模板在其页面上方放置了公司的LOGO或图片，不过这一块也是位置固定的。而页面的其他部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中，放入链接或导航按钮。 框架的基本语法是由标签对表示，标签对放在标记对下的后面，即与标记对并列。如何来实现框架，全由来设置，其内又包含，用标记对来表示在框架内放入什么文件，代码9.1表示框架的基本语法。,9.2 框架分栏,在网页中，有时要插入多张网页到框架中，那么对网页的分栏也很重要，如何表现使网页看起来更自然。框架分栏有垂直分栏和水平分栏。 框架分栏是网页插入多个框架的结果，多个框架放在同一个网页中，必然会出会分栏状态，如何使框架分栏在网页中达到更好的视觉效果，本小节来介绍框架分栏的两种分栏样式。,9.2.1 框架垂直分栏,垂直分栏是对框架里的网页文档垂直排列，每张网页文档占用一列显示。垂直分栏是在中用cols表示，后面接要表示的列宽，语法形式如下： 垂直分栏在中包含两张网页文档，每张网页占50%，第二张网页用来引进网页文档路径，代码9.2表示垂直分栏。 代码9.2 源代码第9章框架垂直分栏.html 框架垂直分栏 ,9.2.2 框架水平分栏,框架可以垂直分栏，同样也可以水平分栏，水平分栏就是把网页文档分成多行显示。水平分栏的语法用rows表示，与垂直分栏一样，也放在上，一个框架不能同时出现水平和垂直分栏，即不能同时出现cols和rows，代码9.3表示框架水平分栏。 代码9.3 源代码第9章框架水平分栏.html 框架水平分栏 ,9.3 框架的常用属性,光是用框架基本语法显示网页文档是不够的，对特殊的环境处理不当，会影响效果，而且也不好控制框架在整上网页上的样式。常用的有属性有不可调节框架大小、网页空白和不支持框架等，下面对其分别介绍。,9.3.1 设置不可调节框架大小,上面的框架都可以调节大小的，有时网页制作可能对框架设置成不能调节小大，这时在该网页文档中用noresize=”noresize”表示，在网页效果中不会让用户去调节大小的，代码9.4表示noresize不能调节框架大小。 代码9.4 源代码第9章用noresize表示不能调节框架大小.html 不能调节框架大小 ,9.3.2 浏览器不支持框架,在以前的旧浏览器中不支持框架，为了给这些不支持框架的浏览器用户友好提醒，可以用标签对显示文字，说明该浏览器不支持框架，支持框架的浏览器不再显示里的内容，代码9.5表示浏览器不支持框架。 代码9.5 源代码第9章浏览器不支持框架.html 不支持框架 对不起，您的浏览器不支持框架 ,9.3.3 设置框架边框,当存在框架时，很多个网页文档在里面，如果按默认有边框的话，看起来很不美观。在出现多个网页文档时，可以设置框架的边框，在中用frameborder属性表示。 通过对frameborder的设置，就可以控制框架的边框，其中#代表设置的值，有两种表示方法： 第一种方法用英语表示，yes表示有边框，默认时也是有的，用no代表无边框。 第二种方法是用数字1表示有边框，0表示无边框。 下面用代码9.6表示无边框，注意只在设置frameborder时与有边框不同而已。,9.3.4 设置滚动条,当网页文档中的高度超过当前浏览器的高度时，滚动条会自动出现，滚动条的作用是方便拖拉网页窗口，以便查看显示不到的网页部分。 滚动条比较方便查看显示不到的部分，有时出现滚动条也带来非常的不便，所以想到设置框架滚动条使其不显示。设置滚动条在是里面，用scrolling属性，后面的值可以选择：auto、yes、no，分别表示滚动条为自动、有滚动条和无滚动条，代码9.7设置了框架滚动条。,9.4 框架链接,框架链接有内联框架和导航框架，导航框架是在基础上的链接，而内联框架指在网页内部的框架联接其他网页，很重要的是内联框架包括在中的框架。,9.4.1 导航框架,导航框架是在网页框架的中加入name属性，表示该的名称，然后通过用标记的链接，并用target等于的名称，那所得到的链接地址网页会显示在该，代码9.8所示表示网页中的导航框架。 代码9.8 源代码第9章导航框架.html 导航框架 ,9.4.2 内联框架,内联框架存在的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架。语法是用标签对表示，或者可以用表示，后面的斜线代码是iframe的结果符，代码9.10表示内联框架。 代码9.10 源代码第9章内联框架.html 内联框架 ,9.5 框架实例手把手,框架在网页中经常用到，框架可以给网页带来很大的方便，如在一张网页中设置不同的部分，用框架来实现就可以对经常变动的部分用框架表示，更新页面只对其中的框架进行更新即可。所以框架可以将多张网页组成一个网页，在这张网页中来显示这些网页所显示的信息。 框架最常用在网页的页头和网脚，网头指的是网页的头部，上面部分，相反，页脚指的是网页尾部。在正常的网站中，网页的头部和尾部是不需要变化的，即使要变化也是对整个网站的全部网页统一更新，这时，框架的用法就来了，在这些网页中插入二个框架网页，分别放在网页头部和尾部，以后网站更新，只需要对框架页面更新，即可更新全部的网页头部和尾部。 本实例演示框架的用法。在框架集中，列出6个框架，通过这6个框架来表示框架的特性，如设置框架的noresize后不能调节框架大小，还可以设置框架的链接，同时可以在不同的框架中显示，以下是框架的用法实例步骤。,9.5.1 在网页中插入框架,在网页中插入二行三列的框架，分别显示不同的框架文档。在网页中建框架，设置cols为“50%，50%”，表示二行各占一半，而rows要设置为显示三列的数字，所以输入“30%,30%,40%”，即表示二行三列，如代码9.11所示。,9.5.2 设置框架的滚动条和边框,左边的框架文档设置成不可调节大小状态，且设置中间的文档为没有滚动条和框架边框。要想在左边的文档设置成不可调节大小状态时，就对第1个和第4个的noresize设置；在中间的框架文档设置没有滚动条和框架边框，就对第2个和第5个的scrolling和framesborder设置，代码9.12完成上面的设置。,9.5.3 设置不支持框架文字,注明如果不支持框架的话，加上标签对在后面就行，代码9.13在后面输入。,9.5.4 设置框架导航链接,在第1个文档做链接并给第3个和第6个文档的设置名称，单击不同链接，在它们的区域内显示内容，代码9.14表示了导航链接。 代码9.14 源代码第9章设置导航链接.html 框架实例手把手 对不起，您的浏览器不支持框架 ,9.6 小结,本章介绍了框架的用法，框架在网页中比较重要，有时可以用来显示多个独立文档，又要相互不影响，可以显示多行多列，通过cols和rows设置，用的属性设置框架的边框，是否可调节框架的大小、滚动条等，在中还可以包括，显示文档还可以嵌入HTML文档，用框架导航链接可以在一张网页中操作不同的网页页面。最后通过实例来演示框架的知识点用法。,
