HTML网页设计教程框架.ppt

1、a,1,使用框架创建多页面布局,a,2,主要内容,建立水平或垂直的框架分割窗口,用嵌套框架分割窗口,对滚动条进行控制,在空白窗口显示网页,在框架或浮动框架上进行链接,a,3,7.1框架简介,框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。 当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。,a,4,框架的基本结构

2、,框架的基本结构主要分为框架和框架集两个部分。它是利用标记与标记来定义。其中标记用于定义框架，而标记则用于定义框架集。,a,5,框架的基本结构, 框架的基本结构 ,a,6,7.2框架的设置,常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。,a,7,窗口的水平分割,rows属性可定义一个水平分割的窗口框架。, ,a,8,窗口的水平分割,语法说明 rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为

3、其他子窗口高度分配后所剩余的高度。 设置高度数值的方式有两种： 采用整数设置，单位为像素（px），语法如下： 用百分比设置，语法如下： ,a,9, 采用整数设置窗口的水平分割 ,a,10,a,11,窗口的垂直分割,cols属性可定义一个垂直分割的窗口框架。 基本语法：, ,a,12,一个垂直分割的例子, 采用整数设置窗口的水平分割 ,a,13,a,14,窗口的嵌套分割,在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图所示，实现“厂”字型框架需要对窗口进行嵌套分割。,a,15,窗口的嵌套分割, 窗口的嵌套分割 ,a,16,框架的边框,在标记中，可运用b

4、order属性控制分割窗口框架的边框。 基本语法： 语法说明： n为整数，代表此窗口框架的宽度，单位为像素(px)。,a,17,框架的边框, 框架的边框控制 ,a,18,框架的边框,a,19,框架的隐藏,frameborder属性用于控制窗口框架的周围是否显示框架，此属性可使用在标记与标记中，如果使用在标记内时，可控制窗口框架的所有子窗口，如果用在标记中，则只能控制该标记所代表的子窗口。 基本语法： 语法说明： 0表示不显示边框，1表示显示边框，默认值为1。,a,20,7.3子窗口的设置,指定子窗口显示网页 定义子窗口名称 控制子窗口滚动条 调整子窗口的尺寸 设置子窗口的边距,a,21,指定子

5、窗口显示网页,src属性是用来指定要导入到某个子窗口的HTML文件的位置，语法如下： 基本语法： 语法说明： src属性的设置方法和前面介绍的标记的src属性的用法是一样的，下面的标记，将设置子窗口显示名称为frame.html的网页。 。,a,22,指定子窗口显示网页, 指定子窗口显示网页 ,a,23,指定子窗口显示网页,a,24,定义子窗口名称,name属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。 基本语法： ,a,25, 指定子窗口的名称 ,a,26,控制子窗口滚动条,scrolling属性用于控制窗口框架中是否显示滚动条，使用此属性，

6、可以避免HTML文件因内容过多而无法完全显示。此属性用于标记中。 基本语法： 语法说明： yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。,a,27, 控制框架滚动条 ,a,28,调整子窗口的尺寸,在前面的学习中，我们学习了如何运用标记的rows和cols属性来水平或垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当我们想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。 当然我们不希望用户能随意地改变子窗口的大小，那么这时我们可以在标记中，添加noresize属性，语法如下： ,a,29,设置子窗口

7、的边距,网页的边距可以通过“margin”来设定，那么框架和网页一样也可设置边距，可以利用标记中的marginwidth属性来设置框架左右边缘的宽度；marginheight属性可以设置框架上下边缘的宽度。 基本语法： 语法说明： 在HTML文件中，利用框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。,a,30, 设置框架边距 ,a,31,基本的注意事项 有用的提示： 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=noresize。 为不支持框架的浏览器添加 标签。

8、重要提示：不能将 标签与 标签同时使用！ 不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中， 可以查看它是如何实现的。） 如何使用 标签 本例演示：如何使用 标签。 您的浏览器无法处理框架！ ,a,32,混合框架结构 本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。 含有 noresize=noresize 属性的框架结构,a,33,含有 noresize=noresize 属性的框架结构 本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。 ,a,34,导航框架

9、 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 contents.htm 的文件包含三个链接。 * 没有锚的链接 带有锚的链接 * Chapter 10,a,35,内联框架 本例演示如何创建内联框架（HTML 页中的框架）。 一些老的浏览器不支持 iframe。 如果得不到支持，iframe 是不可见的。 ,a,36,使用框架导航跳转至指定的节 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架 显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。 ,a,37,7.4浮动框架,在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记，同样，我们会用src属性来设置框架中显示文件的路径。 基本语法： 语法说明： 与框架不同的是，浮动框架可以包含在标记中。,a,38,7.5 小实例,将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式，就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，我们可以运用标记的target属性，来指定显示链接网页的子窗口。,a,39,厂字型布局图,a,40,小结,本章主要介绍了两种框架方式：一种是分割窗口式，