2.6　框架和超链接

2.6.1　框架的概念

1.框架的概念

本节将介绍框架的概念，以及框架在网页中的作用。网页上发布的信息应该由多个信息模块组成，其中包括文本信息、图片、图表、表格、表单等。

框架是一些用横向和纵向分隔线划分的网页区域，网页的内容分别放在这些区域中，这些区域就叫框架。

框架是在同一屏幕上显示多个相互交互的独立的HTML文档页的结构，作为HTML语言中的特性，它提供了一种组织网页的方法。

框架设置元素的格式为：

＜frameset rows="" cols=""＞…＜/frameset＞

其中包含若干个＜frame＞和＜frameset＞

2.框架的使用

例2.13　请按照图2.22所示建立框架，设计网页程序。

图2.22的框架结构把浏览器可视区分为三个区域。顶部的区域作为标题栏，左下边的区域用作菜单，右下边的区域作为信息显示的主体。要构造这个布局需要四个程序：一个现实总体框架的程序，一个标题程序，一个菜单程序，一个显示主体程序。

①体框架源程序（ch2-13.htm）。

②标题源程序（ch2-13a.htm）。

③菜单源程序（ch2-13b.htm）。

④显示主体源程序（ch2-13c.htm）。

分别编辑这四个程序，并按照提示的文件名保存到磁盘，然后运行总框架程序ch2-13.htm，即可得到图2.22的结果。

2.6.2　框架的元素

1.＜frameset＞元素

元素＜frameset＞用于定义框架结构和布局，它使用水平或垂直分隔线将窗口分成长方形的子区域，该元素可以嵌套，可以取代＜body＞，但必须使用rows或cols属性。

可以将窗口水平分成几个部分，也可以在垂直方向分成几个部分，还可以混合分框。图2.23是一组常用的页面框架结构。图2.23（a）～图2.23（d）把窗口分为上下两个部分，图2.23（e）～图2.23（h）把窗口分为左右两个部分，其他的几种均为混合分框。

不同的页面框架结构具有不同的框架程序，图2.23（a）～图2.23（d）是以顶部的行为主的框架结构，图2.23（e）～图2.23（h）是以左边的列为主的框架结构。

注意：图2.2使用了图2.23（c）的框架。

水平分框用＜frameset cols="#，…，#"＞指定，有几个#，表示将窗口分成几个区域（或框架），多个#之间用逗号分隔。#可以是一个百分数（即规定各框占窗口的百分数），也可以是一个整数（即指定各框的绝对大小）。如果将前面的#指定了宽度，那么最后一个#可以指定为“*”，表示将剩下的所有宽度都赋予最后一个框。图2.23（e）使用下列代码：

其中的数字80的单位为像素，含义为左边部分宽80像素，右边部分选取窗口的剩余部分。

纵向分框用＜frameset rows=＂#，…，#＂＞指定， #的赋值方法与co1s相同。图2.23 （a）的框架中，上半部分用来显示标题，下半部分用于显示信息。程序如下：

在混合分框时要看是以顶部的行为主，还是以左边的列为主。图2.23（b）以行为主，然后把下部的横向分为左右两个框，实现代码为：

其中外部的＜frameset＞使用rows属性，内部的＜frameset＞使用cols属性。图2.23（f）以左边的列为主，然后把右框纵向分成上下两个框，代码如下：

其中，外部的＜frameset＞使用cols属性，内部的＜frameset＞使用rows属性。这样就实现了混合框架设计。读者可以设计其余框架结构的程序。

如果需要在浏览器中隐藏框架的边框，可以通过设置＜frameset＞的frameborder属性来实现。frameborder="1"显示边框，frameborder="0"隐藏边框，而其默认值为0。

2.＜frame＞元素

元素＜frame＞用于定义一个区域（或框架）中的显示内容。每个＜frame＞必须包含在一个定义了该框架尺寸的＜frameset＞元素中。

＜frame＞的属性src和name分别指定该框架中显示的htm文件名和该框架的名称。

另外，在边框显示时，如果不希望用户在浏览器中对边框大小进行调整（默认值为可以调整），可以通过设置＜frame＞的noresize属性实现。该属性的用法如下：

＜frame src=＂＂name=＂＂noresize＞该属性不需要属性值，只需直接指定框架具有该属性即可。

3.＜noframes＞元素

元素＜noframes＞中包含了框架不能被显示时的替换内容，通常使用在＜frameset＞元素中。如程序ch2-13.htm的＜noframes＞。在＜noframes＞元素中必须使用＜body＞元素，＜noframes＞必须有结束语句＜/noframes＞。

2.6.3　超链接

网页技术中从一个网页到另一个网页，从一个画面到另一个画面，可以使用超链接。超链接的元素是：

＜a href=＂＂target=＂＂＞链接对象＜/a＞

1.元素＜a＞的重要属性

href属性：用于指定该超链接的链接对象，其值可以是一个相对地址或者一个绝对地址。例如在网页上提供某个网站的链接，则可以写成：

＜a href=＂http://www.xxx.com＂＞欢迎光临xxx网站＜/a＞

值得注意的是href的值不仅可以是一个http://www.xxx.com形式的URL，也可以是诸如＂ftp：//＂，＂gopher：//＂，＂mailto：…＂的形式。例如提供一个E-mail地址的链接（单击后启动E-mail默认程序发送信件）。

＜a href=＂mailto：xxx@yyy.com＂＞请给我发信＜/a＞

target属性：如果页面由若干个框架组成，则可以为target属性赋予某个框架名，然后链接的对象就会在指定的框架中显示。

target属性有四个浏览器提供的属性值，如表2.5所示。

元素＜a＞的其他属性参考HTML 4.0规范。

2.同一网页内部的跳转

使用元素＜a＞的name属性，可以实现同一网页中不同画面的来回跳转，这一方法可以使用户在浏览长文件时提供方便。

例2.14　使用元素＜a＞的name属性，在ch2-1.htm中加入多个图形，然后实现网页内部跳转。程序（ch2-14.htm）如下：

当使用了＜a＞元素中的name属性后，可实现在同一HTML程序内部的程序跳转。如当单击图2.24（b）中的“到开始处”超链接，可以回到图2.24（a）的画面，这就实现在同一HTML程序内部的跳转。这种方法设置的跳转目标又叫“锚”。

3.不同网页之间的超链接

在图2.22左边的各菜单项加入超链接，就可以分别打开多个新的页面。在例2.13的程序ch2-13b.htm中，为每一个菜单加入了超链接元素指向一个网页文件（＜a＞元素引用的是链接对象文件的绝对地址）。这样，程序运行后，单击某个菜单项目，就可以链接到该项目对应的＜a＞＜/a＞中href指定的文件并运行该文件。单击“计算机类”菜单条后可以显示链接到的目标页面，即图2.25的网页。

4.用图片作链接对象

除了使用文本作为链接指针，还可以使用图片作为链接指针。格式为：

＜a href="url"＞＜img src="url"＞＜/a＞

其中用＜img src="url"＞取代了链接指针中文本的位置。＜img src="url"＞是图像元素，指定显示url代表的图像文件。例如，用硬盘上的home.gif图片作为链接指针指向某网站的首页：

＜a href="www.xxx.com"＞＜img src="home.gif" border="0"＞＜/a＞

注意：图片作为链接指针时，在浏览器中将默认显示一个外框。如果不需要这个外框，可以将img标记的border属性设置为0。