Download presentation
Presentation is loading. Please wait.
1
W3C标准网页制作 主讲教师：张 涛
2
第12讲、使用框架结构 12.1.什么是框架 12.2.框架集标记<FRAMESET> 12.3.框架标记<FRAME> 12.4.不支持框架标记<NOFRAMES> 12.5.浮动框架<IFRMAE> 12.6.框架与链接
3
12.1.什么是框架 如果网页的各部分为相互独立的网页，又由一个网页将这些分开的网页组成一个完整的网页，显示于浏览者的浏览器中，重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的框架的页面，其他子页面保持不变，必然会给浏览者带来方便，节省时间。 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便地完成导航工作，而且各个框架之间决不存在干扰问题，所以框架技术一直普遍应用于页面导航。 如图12-1所示的就是一个典型的框架网页页面。该网页将一个浏览器窗口分割成了两个部分，分别是左、右两个框架。这样，使用框架分割一个页面后，同一页面里就可以调用不同的HTML文件。其中，左侧是框架网页的导航，右侧是单击导航后打开的主页面。 如图12-2所示，单击左侧的栏目后只有右侧的页面产生变化。 使用框架网页最主要的目的是创建链接的结构。导航条被放置于一个框架之中，可以单击导航条向服务器请求网页，链接的网页出现在另外的框架中，而导航栏所在的网页不发生变化。就好比是看电视时使用遥控器，电视画面出现在电视机中。不管显示在电视中的频道发生怎样的变化，手中的遥控器不会变化。 同时，框架网页还可以免除浏览者来回滚动窗口。如果网页中的内容部分很长，浏览者拖动滚动条到了页面底部后要切换到别的页面，可以不必再拖动滚动条返回页面顶部，因为导航条在另外的框架中，并不受内容框架滚动的影响。
4
12.2.框架集标记<FRAMESET>
框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。 如下代码是基本的页面代码： <HTML> <head> <Title>基本框架代码</title> </head> <frameset> <Frame> <frame> …… </frameset> </html> 在使用了框架集的页面中，页面的<BODY>标记被<FRAMESET>标记所取代，然后通过<FRAME>标记定义每一个框架。下面按照框架的分割方式来介绍框架集标记。主要的分割方式有以下3种：
5
12.2.1 左右分割窗口属性COLS 在水平的方向，浏览器可以被分割成多个窗口，这需要使用到框架的左右分割窗口属性COLS。基本语法 <Frameset cols=“value, value,……”> <frame> <frame> …… </frameset> 语法解释 VALUE为定义各个框架的宽度值，单位可以是像素，也可以是百分比。 文件范例：12-1.htm 将浏览器分成左右分割的窗口。 <!-- --> <!-- 文件范例：12-1.htm --> <!-- 文件说明：左右分割窗口 --> <!-- --> <HTML> <HEAD>
6
12.2.1 左右分割窗口属性COLS <TITLE>左右分割窗口</TITLE> </HEAD> <FRAMWSET COLS=“30%，70%”> <FRAME> <FRAME> </FRAMESET> </HTML> 文件说明 第9行将窗口分割成左右两个，宽度分别为30%和70%。第10行和第11行就对应这两个窗口。 显示结果 如图12-3所示的就是左右分割窗口的显示结果。
7
12.2.2 上下分割窗口属性ROWS 在垂直的方向，浏览器可以被分割成多个窗口，这需要使用框架的上下分割窗口属性ROWS。 基本语法 <Frameset ROWS=“value, value,……”> <frame> <frame> …… </frameset> 语法解释 VALUE为定义各个框架的宽度值，单位可以是像素，也可以是百分比。 文件范例：12-2.htm 将浏览器分成上下分割的窗口。 <!-- --> <!-- 文件范例：12-2.htm --> <!-- 文件说明：上下分割窗口 --> <!-- --> <HTML> <HEAD>
8
12.2.2 上下分割窗口属性ROWS <TITLE>上下分割窗口</TITLE> </HEAD> <FRAMWSET ROWS=“20%，60%，*”> <FRAME> <FRAME> <FRAME> </FRAMESET> </HTML> 文件说明 第9行将窗口分割成上、中、下3个，高度分别为20%，60%和20%。其中“*”代表分割剩下的部分。第10行～第12行就对应这3个窗口。 显示结果 如图12-4所示的就是上下分割窗口的显示结果。
9
12.2.3 嵌套分割窗口属性ROWS 如果希望在同一个浏览器窗口中，将其既按照行来分割，又按照列来分割，这种框架称为嵌套框架。 如图12-5所示的就是一种典型的嵌套框架，先进行左右分割，然后将右侧的窗口进行上下分割。 基本语法 <Frameset ROWS=“value, value,……”> <frame> <Frameset cols=“value, value,……”> <Frame> <Frame> …… </Frameset> <frame> …… </frameset> 语法解释 上述代码先将框架按照行进行上下分割，然后在第二个框架中进行按照列的左右分割。
10
12.2.3 嵌套分割窗口属性ROWS 文件范例：12-3.htm 将浏览器分成嵌套分割的窗口。 <!-- --> <!-- 文件范例：12-3.htm --> <!-- 文件说明：嵌套分割窗口 --> <!-- --> <HTML> <HEAD> <TITLE>嵌套分割窗口</TITLE> </HEAD> <FRAMWSET COLS=“20%，*”> <FRAME> <FRAMESET ROWS=“20%，*”> <FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML>
11
12.2.3 嵌套分割窗口属性ROWS 文件说明 第9行将窗口分割成左右两个，宽度分别为20%和80%。第10行对应左侧的窗口。第11行将右侧的窗口分割成上下两个，高度分别为20%和80%。第12行和第13行对应右侧上下两个窗口。 显示结果 如图12-6所示的就是嵌套分割窗口的显示结果。
12
12.2.4 框架集边框宽度属性FRAMESPACING
通过这个属性，能够设定框架集的边框宽度。 基本语法 <frameset Framespacing=“value”> 文件范例：12-4.htm 设定框架集的边框宽度。 <!-- --> <!-- 文件范例：12-4.htm --> <!-- 文件说明：设定框架边框宽度 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架边框宽度</TITLE> </HEAD> <FRAMWSET COLS=“20%，*” FrameSpacing=15> <FRAME> <FRAMESET ROWS=“20%，*”> <FRAME> <FRAME> </FRAMESET>
13
12.2.4 框架集边框宽度属性FRAMESPACING
</FRAMESET> </HTML> 文件说明 第9行设定框架边框宽度为15像素。 显示结果 如图12-7所示的就是设定框架边框宽度的显示结果。
14
12.2.5 框架集边框颜色属性BORDERCOLOR
通过这个属性，能够设定框架集边框的颜色。 基本语法 <frameset Bordercolor=“Color_value”> 文件范例：12-5.htm 设定框架集的边框颜色。 <!-- --> <!-- 文件范例：12-5.htm --> <!-- 文件说明：设定框架边框颜色 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架边框颜色</TITLE> </HEAD> <FRAMWSET COLS=“20%，*” FrameSpacing=15 BorderColor=“#336699”> <FRAME> <FRAMESET ROWS=“20%，*”>
15
12.2.5框架集边框颜色属性BORDERCOLOR
<FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML> 文件说明 第9行设定框架边框颜色为#336699。 显示结果 如图12-8所示的就是设定框架边框颜色的显示结果。
16
12.3.框架标记<FRAME> 每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过<FRAME>标记可以定义框架页面的内容。 框架页面源文件属性SRC 通过SRC属性设置框架显示的文件路径。 基本语法 <frame SRC=“File_NAME”> 文件范例：12-6.htm 设定框架页面的内容。 <!-- --> <!-- 文件范例：12-6.htm --> <!-- 文件说明：设定框架页面的内容 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架页面的内容</TITLE> </HEAD>
17
12.3.框架标记<FRAME> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm> <FRAME SRC= htm> </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面，这两个页面是第8章制作的8-1-1.htm和8-1-2.htm页面。 显示结果 如图12-9所示的就是设定框架页面源文件的显示结果。
18
12.3.2 框架名称属性NAME 我们可以为每一个链接命名，所起的名称将被用于页面的链接和脚本描述，所以框架的命名有一定的规则，框架名称必须是单个单词，允许使用下划线(_)，但不允许使用连字符(-)、句点(．)和空格。框架名称必须以字母起始，而不能以数字起始。框架名称区分大小写。不要使用JavaScript中的保留字(例如top或navigator)作为框架名称。 基本语法 <frame SRC=“File_NAME” NAME=“Frame_NAME”> 文件范例：12-7.htm 设定框架页面的名称。 <!-- --> <!-- 文件范例：12-7.htm --> <!-- 文件说明：设定框架的名称 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架的名称</TITLE> </HEAD> <FRAMESET cols=50%,50%> <FRAME name=main src="2.html" scrolling=auto> <FRAME name=rightmain src="3.html" scrolling=auto> </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面，并分别为两个框架命名。 显示结果 框架的名称并不会影响显示的效果，所以请参考图12-9的显示。
19
12.3.2 框架名称属性NAME <FRAME name=main src="2.html" scrolling=auto> <FRAME name=rightmain src="3.html" scrolling=auto> </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面，并分别为两个框架命名。 显示结果 框架的名称并不会影响显示的效果，所以请参考图12-9的显示。
20
12.3.3 框架边框显示属性FRAMEBORDER 框架的显示情况根据其所属框架集的设定而决定，也就是说该框架继承其框架集的边框属性。 基本语法 <frame SRC=“File_NAME” FRAMEBORDER=“Value”> 语法解释 VALUE取值为0或1，0为不显示边框，1为显示边框。 文件范例：12-8.htm 设定框架边框显示。 <!-- --> <!-- 文件范例：12-8.htm --> <!-- 文件说明：设定框架边框的显示 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架边框的显示</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm FrameBorder=1>
21
12.3.3 框架边框显示属性FRAMEBORDER <FRAME SRC= htm FrameBorder=0> </FRAMESET> </HTML> 文件说明 第10行设定左侧的边框显示，第11行设定右侧的边框为不显示。 显示结果 如图12-10所示的就是设定框架边框显示的结果。
22
12.3.4 框架滚动条显示属性SCROLLING 当框架内的空间不够显示页面的内容时，可以通过滚动条来实现页面的滚动，使用户看到隐藏的内容。这个属性可以设定滚动条是否显示。 基本语法 <frame SRC=“File_NAME” SCROLLING=“value”> 语法解释 VALUE取值范围如表12-1所示。 文件范例：12-9.htm 设定框架滚动条的显示。 <!-- --> <!-- 文件范例：12-9.htm --> <!-- 文件说明：设定框架滚动条的显示 -->
23
12.3.4 框架滚动条显示属性SCROLLING <HTML> <HEAD> <TITLE>设定框架滚动条的显示</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm Scrolling=“No”> <FRAME SRC= htm Scrolling=“Auto”> </FRAMESET> </HTML> 文件说明 第10行设定左侧的滚动条为不显示，第11行设定右侧的滚动条为自动显示。 显示结果 如图12-11所示的就是设定框架滚动条是否显示的结果。
24
12.3.5 框架尺寸调整属性NORESIZE 浏览带有框架的页面时，有些框架的尺寸是可以改变的，而有些则不可以。这主要是由NORESIZE属性来控制的。 基本语法 <frame SRC=“File_NAME” Noresize> 语法解释 NORESIZE代表禁止改变框架的尺寸大小。 文件范例：12-10.htm 设定不允许调整框架的尺寸。 <!-- --> <!-- 文件范例：12-10.htm --> <!-- 文件说明：设定不允许调整框架尺寸 --> <!-- --> <HTML> <HEAD> <TITLE>设定不允许调整框架尺寸</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”>
25
12.3.5 框架尺寸调整属性NORESIZE <FRAME SRC= htm NoResize> <FRAME SRC= htm Scrolling=“Auto”> </FRAMESET> </HTML> 文件说明 第10行设定禁止调整左侧的框架尺寸。 显示结果 如图12-12所示的就是设定不允许调整框架尺寸的显示结果，鼠标无法拖动框架的边框。
26
12.3.6 框架边缘宽度属性MARGINWIDTH HTML页面有其页边距设定，框架与页面一样，也存在着框架边距。通过MARGINWIDTH能够设定框架的左右边缘宽度。 基本语法 <frame SRC=“File_NAME” MarginWidth=“Value”> 文件范例：12-11.htm 设定框架的边缘宽度。 <!-- --> <!-- 文件范例：12-11.htm --> <!-- 文件说明：设定框架的边缘宽度 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架的边缘宽度</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm Scrolling=“No” MarginWidth=40> <FRAME SRC= htm Scrolling=“Auto”> </FRAMESET> 。
27
12.3.6 框架边缘宽度属性MARGINWIDTH </HTML> 文件说明 第10行设定框架的边缘宽度为40像素。 显示结果 如图12-13所示的就是设定框架边缘宽度后的显示结果
28
12.3.7 框架边缘高度属性MARGINHEIGHT
和框架的边缘宽度相似，通过MARGINHEIGHT能够设定框架的上下边缘高度。 基本语法 <frame SRC=“File_NAME” MarginHeight=“Value”> 文件范例：12-12.htm 设定框架的边缘高度。 <!-- --> <!-- 文件范例：12-12.htm --> <!-- 文件说明：设定框架的边缘高度 --> <!-- --> <HTML> <HEAD> <TITLE>设定框架的边缘高度</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm Scrolling=“No” MarginHeight=40> <FRAME SRC= htm Scrolling=“Auto”> </FRAMESET>
29
12.3.7 框架边缘高度属性MARGINHEIGHT
</HTML> 文件说明 第10行设定框架的边缘高度为40像素。 显示结果 如图12-14所示的就是设定框架边缘高度后的显示结果。
30
12.4不支持框架标记<NOFRAMES>
虽然框架技术是较早使用的一种导航技术，但是仍然有一些早期版本的浏览器不支持框架。对于制作人员这一现象可能无法改变，我们所能做的只能是显示该浏览器不支持框架技术，有些内容无法看到。使用<NOFRAMES>标记可以完成这一任务，当浏览器不能加载框架集文件时，会检索到<NOFRAMES>标记，并显示标记中的内容。 基本语法 <Frameset> <frame> <frame> …… <Noframe> …… </Noframe> </Frameset> 语法解释 放在<NOFRAMES>标记之间的部分就是在不支持框架的浏览器中显示的内容，也就是<BODY>标记中的内容。
31
12.4不支持框架标记<NOFRAMES>
文件范例：12-13.htm 设定不支持框架的浏览器显示的页面。 <!-- --> <!-- 文件范例：12-13.htm --> <!-- 文件说明：设定不支持框架的浏览器的页面 --> <!-- --> <HTML> <HEAD> <TITLE>设定不支持框架的浏览器的页面</TITLE> </HEAD> <FRAMWSET COLS=“50%，50%”> <FRAME SRC= htm Scrolling=“No”> <FRAME SRC= htm Scrolling=“Auto”> <NoFrame> 对不起，您的浏览器不支持框架页面的显示。 </NoFrame> </FRAMESET> </HTML> 文件说明 第12行～第14行设定不支持框架的浏览器显示的页面内容。 显示结果 对于不支持框架的低版本浏览器，将显示代码第13行的文字。
32
12.5浮动框架<IFRMAE> 浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。 基本语法 <Iframe Src=“File_URL” HEIGHT=value width=value name=“IFRAME_name” align=“value”> </Iframe> 语法解释 这些属性的含义如表12-2所示。
33
12.5.1 浮动框架的SRC属性 通过SRC属性设置浮动框架显示的文件路径。 基本语法 <iframe SRC=“File_name”> 文件范例：12-14.htm 设定浮动框架页面的内容。
34
12.6框架与链接 使用框架的一个重要目的就是不同的框架中显示不同的页面，下面介绍通过链接为框架指定显示的页面。
每个链接都有一个Target属性，设置不同的Target属性可以使链接的页面在不同的框架或者窗口中显示。
35
12.6.1 普通框架与链接 下面我们来制作一个小型的框架网站，网站是左右的框架结构，左侧有3个栏目，单击3个栏目后，能够在右侧框架显示不同栏目的内容。这个网站包含以下几个页面： 首页是由左右两个框架组成，称为12-22.htm页面。 左侧框架的页面称为12-22-Left.htm，放置页面的主导航，包含3个到栏目页面的超级链接。 右侧框架放置3个栏目，分别是12-22-Right-1.htm,12-22-Right-2.htm和12-22-Right-3.htm。 在默认的情况下，首页显示右侧的第一个页面，即12-22-Right-1.htm。 文件范例：12-22.htm 设定框架集页面，包含左右两个框架。 <!-- --> <!-- 文件范例：12-22.htm --> <!-- 文件说明：框架集 --> <!-- -->
36
12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>框架集</TITLE> </HEAD> <FRAMESET COLS=“25%，75%”> <FRAME SRC=12-22-Left.htm Scrolling=“No”> <FRAME SRC=12-22-Right-1.htm Name=“right”> </FRAMESET> </HTML> 文件说明 第9行将窗口分割成左右两个，宽度分别为25%和75%。第10行和第11行指定框架显示的页面，这两个页面是下面要制作的12-22-Left.htm和12-22-Right-1.htm。另外，在第11行设定了右侧框架的名称为right,这个名称将用于后面的链接调用中。 文件范例：12-22-Left.htm 制作网站左侧框架的页面。 <!-- --> <!-- 文件范例：12-22-Left.htm --> <!-- 文件说明：左侧框架 --> <!-- -->
37
12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>左侧框架</TITLE> </HEAD> <BODY> <IMG SRC= jpg><p> <A href=“12-22-Right-1.htm” Target=“right”>Dreamweaver MX 2004</A><P> <A href=“12-22-Right-2.htm” Target=“right”>Fireworks MX 2004</A><P> <A href=“12-22-Right-3.htm” Target=“right”>Flash MX 2004</A><P> </FRAMESET> </HTML> 文件说明 第10行插入了一张图片，第12行～第13行设定了3个链接，分别指向3个页面，并通过Target属性设定了链接的目标窗口是right。 文件范例：12-22-Right-1.htm 制作网站右侧框架一的页面。 <!-- --> <!-- 文件范例：12-22-Right-1.htm --> <!-- 文件说明：右侧框架一 --> <!-- -->
38
12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架一</TITLE> </HEAD> <BODY> <H1>Dreamweaver MX 2004</H1> DREAMWEAVER MX 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制，完整的站点规划和管理、超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。MX 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合，无疑为制作网站提供了更多的实现方式。 </BODY> </HTML> 文件范例：12-22-Right-2.htm 制作网站右侧框架二的页面。 <!-- --> <!-- 文件范例：12-22-Right-2.htm --> <!-- 文件说明：右侧框架二 --> <!-- -->
39
12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架二</TITLE> </HEAD> <BODY> <H1>Fireworks MX 2004</H1> Fireworks MX 2004作为网页图像设计软件的代表，在继承了前期版本图形绘制、页面特效功能的同时，大大地发展了位图图像方面的处理功能，这无疑使这个软件有了更大的向Photoshop挑战的资本，而其在网页设计方面的诸多应用，又是无任何软件可与之媲美。与Dreamweaver MX 2004的整合使其在专业网站图像设计过程中，早已并继续扮演着不可或缺的角色。 </BODY> </HTML> 文件范例：12-22-Right-3.htm 制作网站右侧框架三的页面。 <!-- --> <!-- 文件范例：12-22-Right-3.htm --> <!-- 文件说明：右侧框架三 --> <!-- -->
40
12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架三</TITLE> </HEAD> <BODY> <H1>Flash MX 2004</H1> FLASH MX 2004作为网页矢量交互动画软件的代表，提供了图形绘制，动画制作和交互三大功能。掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。越来越多的个人、商业网站采用FLASH技术，广告BANNER、动画片头、MTV，交互游戏，广阔的应用为FLASH的学习者提供了广泛的发展平台，学习FLASH MX 2004软件更是一个具有诱惑力的过程。 </BODY> </HTML> 文件说明 上述代码就是右侧框架对应的3个页面。 显示结果 如图12-22所示的就是框架网站的首页，默认显示右侧的第一个Dreamweaver MX 2004 页面。 当单击了左侧的“Fireworks MX 2004”栏目后，会在右侧的窗口打开12-22-Right-2.htm页面，如图12-23所示。 同样，如图12-24所示，当单击了左侧的“Flash MX 2004”栏目后，会在右侧的窗口打开12-22-Right-3.htm页面。
41
12.6.2 浮动框架与链接 在浮动框架中，也可以制作页面之间的链接。 文件范例：12-23.htm 制作浮动框架页面间的链接。 <!-- --> <!-- 文件范例：12-23.htm --> <!-- 文件说明：浮动框架与链接 --> <!-- --> <HTML> <HEAD> <TITLE>浮动框架与链接</TITLE> </HEAD> <BODY> <IFRAME SRC=12-22-Right-1.htm WIDTH=400 HEIGHT=250 NAME=“iframe” ALIGN=“center”> </IFRAME><P> <CENTER> <A href=“12-22-Right-1.htm” Target=“iframe”>Dreamweaver MX 2004</A><BR> <A href=“12-22-Right-2.htm” Target=“iframe”>Fireworks MX 2004</A><BR> <A href=“12-22-Right-3.htm” Target=“iframe”>Flash MX 2004</A>
42
12.6.2 浮动框架与链接 </CENTER> </BODY> </HTML> 文件说明 第10行嵌入的框架是12-22-Right-1.htm，宽度为400像素，高度为250像素，名称为iframe，居中排列。 第13行～第15行设定了3个链接，分别链接到12-22-Right-1-htm，12-22-Right-2.htm和12-22-Right-3.htm，且链接的目标窗口都是浮动框架的名称iframe。 显示结果 如图12-25所示的就是浮动框架的默认首页。默认显示Dreamweaver MX 2004页面。 当单击了左侧的“Fireworks MX 2004”或“Flash MX 2004”栏目后，会在浮动的窗口中打开12-22-Right-2.htm或12-22-Right-3.htm页面。
43
谢谢!
Similar presentations
