FRAME（框架）是Web上经常会看到的页面结构。使用可视Web开发工具（比如Dreamweaver或者Frontpage），虽然可以在WYSIWYG环境中通过简单的鼠标托拽完成FRAME的构建，但是要实现真正细致甚至强大的功能，仔细理解FRAME的代码结构至关重要！你将发现，FRAME原来是这样的亲切易用。

　　创建基本的FRAMESET 

　　FRAMESET页面与普遍的Web页面有些不同。虽然仍旧以＜HTML＞和包含标题的＜HEAD＞标记以及其他脚本开始，但是其内容仅仅是表示的各个页面的版式设计。因此，不再需要有＜BODY＞元素，只需要＜FRAMESET＞标记。 

　　通过＜FRAMESET＞标记的＜rows＞和＜cols＞属性，浏览器窗口被分割为一个个格子。＜rows＞和＜cols＞的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说： 

cols="80,20%,*" 分为3列，宽度分别为80像素，窗口宽度的20％，以及剩余宽度 
rows="25%,75%" 分为2列，宽度分别为窗口宽度的25％和75％ 
rows="*,3*" 与上述第2个表示的一样，分为2列，但表示方法不同：第一列宽度为第二列的1/3 

　　在＜FRAMESET＞和＜/FRAMESET＞之间，用多个＜FRAME＞标记表示每个分割区。col表示从左到右的列，row表示从上到下的行。每个＜FRAME＞有一个src属性，给出了这个FRAME的内容。它可以是浏览器能显示的任何一个合法URL，或者是另外一个FRAMESET。为预防递归现象，一个FRAME不能包含它本身所在的FRAMESET页面。要用name属性定义FRAME的名字，这样就可以在代码或者脚本程序中引用它。 请看一段基本的FRAMESET代码： 

＜HTML＞
＜HEAD＞
＜TITLE＞Simple FRAMESET＜/TITLE＞
＜/HEAD＞
＜FRAMESET cols="40%,60%" rows="2*,*"＞
＜FRAME name="TopLeft" src="red.htm"＞
＜FRAME name="TopRight" src="green.htm"＞
＜FRAME name="BotLeft" src="blue.htm"＞
＜FRAME name="BotRight" src="white.htm"＞
＜/FRAMESET＞
＜/HTML＞ 

＜FRAMESET rows="105,*"＞
＜FRAME name="adbanner" src="ad.html"＞
＜FRAMESET cols="40%,60%"＞
＜FRAME name="left" src="red.htm"＞
＜FRAMESET rows="*,*"＞
＜FRAME name="top" src="blue.htm"＞
＜FRAME name="bottom" src="white.htm"＞
＜/FRAMESET＞
＜/FRAMESET＞
＜/FRAMESET＞ 

　　FRAME间的链接 

　　一个FRAMESET结构的页面，新文档只转载进窗口的一部分中，而其他页面则保持静态不变。当用户点击FRAME中的链接时，新内容就在同一FRAME内打开。要让新内容在其他FRAME中打开，可以设置＜A＞标记的target属性值为那个FRAME的name值。 

　　而且，我们还可以设置打开目标为当前可见的任意一个FRAME，而不局限于本身的FRAMESET。目标可能是一个嵌套的FRAMESET中的FRAME，也可能是其他窗口中的FRAME。但是如果目标FRAME不存在，就会产生一个带有目标FRAME名字的新窗口。 

　　下面举个例子说明一下，假设有一个简单含2－FRAME的FRAMESET，文件名叫做home.html，代码如下： 

＜HTML＞
＜HEAD＞＜TITLE＞FrommCo home page＜/TITLE＞＜/HEAD＞
＜FRAMESET cols="115,*"＞
＜FRAME src="menu.htm"＞
＜FRAME name="content" src="main.htm"＞
＜/FRAMESET＞
＜/HTML＞  

　　文件menu.htm在左边的FRAME中，其中有一系列链接，点击它们后新内容将在右边的叫做content的FRAME中打开。下面是menu.html的代码： 

＜HTML＞＜HEAD＞＜/HEAD＞
＜BODY＞＜P＞＜BR＞
＜IMG src="Images/tmp_logo.gif" alt="FrommCo"＞＜P＞
＜A href="main.htm"  target="content"＞Main page＜/A＞＜P＞
＜A href="mission.htm"  target="content"＞Our mission＜/A＞＜P＞
＜A href="staff.htm"  target="content"＞Our staff＜/A＞＜P＞
＜A href="splash.htm"  target="_parent"＞FrommCo splash page＜/A＞
＜/BODY＞＜/HTML＞ 

　　请注意最后一个链接中target的定义为_parent，这属于4个特殊的保留值。它们是： 
_parent：在当前FRAMESET位置显示新href。 
_top：在当前整个窗口位置显示新href，比如本身FRAMESET位于另一个FRAMESET中。 
_self：强制在当前FRAME中显示新href。 
_blank：在新窗口中显示href。
　　表示客户端图形地图的＜AREA＞标记同样可以应用target属性，比如： 

　　＜AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page"＞ 

　　还有一种经常的情况是：Web页面中的大部分或者全部链接都要求在一个特别的FRAME中打开。这时，可以在页面的＜HEAD＞代码区使用＜BASE＞标记设置默认的target，然后再分别定义特殊链接的target值。

　　修饰FRAME 

　　FRAMESET不仅在宽度、高度等方面具有可控制的数值，在美观方面也同样可以精确设置。 

　　默认情况下，FRAMESET的FRAME间有一个凸起的边沿，表示分割效果。如果不喜欢这个，想营造“无缝连接”的效果，可以在＜FRAME＞标记中设置FRAMEborder=0来消除它。在3.0及高版本的Navigator和Internet Explorer中，如果在＜FRAMESET＞标记中设置FRAMEborder=0，那么除了设置为FRAMEborder=1的FRAME外，所有其他FRAME的边沿都将消失。 

　　虽然设置了FRAMEborder=0，有些浏览器仍旧会在FRAME间保留一些边沿的颜色痕迹。这时，可以在＜FRAMESET＞标记中添加FRAMEspacing=0（对Internet Explorer）或者border=0（对Navigator和Opera）实现真正的无缝连接。 

　　请看下面的代码是如何使用这些属性的： 

如果您在自己的机器上试，请下载Jmail.dll，下载解压后，双击Setup.bat 即可完成安装！

MAP 元素 | map 对象

包含客户端图像映射的坐标数据。

成员表

下面的表格列出了 map 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。

标签属性/属性

SHOW: 标签属性/属性 行为 集合 事件 方法 样式 标签属性 属性 描述 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 CLASS className 设置或获取对象的类。 DIR dir 设置或获取对象的阅读顺序。 disabled 获取表明用户是否可与该对象交互的值。 firstChild 获取对象的 childNodes 集合的第一个子对象的引用。 ID id 获取标识对象的字符串。 innerHTML 设置或获取位于对象起始和结束标签内的 HTML。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个 TextRange对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。 lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。 NAME name 设置或获取对象的名称。 nextSibling 获取对此对象的下一个兄弟对象的引用。 nodeName 获取特定结点类型的名称。 nodeType 获取所需结点的类型。 nodeValue 设置或获取结点的值。 offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 outerHTML 设置或获取对象及其内容的 HTML 形式。 outerText 设置或获取对象的文本。 ownerDocument 设置或获取结点关联的 document 对象。 parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 parentTextEdit 获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。 previousSibling 获取对此对象的上一个兄弟对象的引用。 readyState 获取对象的当前状态。 scopeName 获取为该元素定义的命名空间。 sourceIndex 获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。 STYLE 为该设置元素设置内嵌样式。 tagName 获取对象的标签名称。 tagUrn 设置或获取在命名空间声明中指定的统一资源名称(URN)。 TITLE title 设置或获取对象的咨询信息(工具提示)。 uniqueID 获取为对象自动生成的唯一标识符。

标签属性/属性

行为

行为	描述
clientCaps	提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。
download	下载文件并在下载完成后通知一个指定的回调函数。
homePage	包含关于用户主页的信息。
httpFolder	包含了允许浏览导航的文件夹视图的脚本特性。
saveFavorite	允许对象在收藏夹中留存数据。
saveHistory	允许对象在浏览器历史中留存数据。
saveSnapshot	允许对象在 Web 页保存时留存数据。
userData	允许对象在用户数据中留存数据。

集合

集合	描述
all	返回对象所包含的元素集合的引用。
areas	获取给定 map 对象所定义的 area 对象集合。
attributes	获取对象标签属性的集合。
behaviorUrns	返回标识附加到该元素行为的统一资源名称(URN)字符串的集合。
childNodes	获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children	获取作为对象直接后代的 DHTML 对象的集合。

事件

事件	描述
onbeforeactivate	对象要被设置为当前元素前立即触发。
onbeforecut	当选中区从文档中删除之前在源对象触发。
onbeforepaste	在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick	在用户用鼠标左键单击对象时触发。
oncut	当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick	当用户双击对象时触发。
ondrag	当进行拖曳操作时在源对象上持续触发。
ondragend	当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter	当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave	当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover	当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart	当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop	当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocusin	当元素将要被设置为焦点之前触发。
onfocusout	在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp	当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown	当用户按下键盘按键时触发。
onkeypress	当用户按下字面键时触发。
onkeyup	当用户释放键盘按键时触发。
onlosecapture	当对象失去鼠标捕捉时触发。
onmousedown	当用户用任何鼠标按钮单击对象时触发。
onmouseenter	当用户将鼠标指针移动到对象内时触发。
onmouseleave	当用户将鼠标指针移出对象边界时触发。
onmousemove	当用户将鼠标划过对象时触发。
onmouseout	当用户将鼠标指针移出对象边界时触发。
onmouseover	当用户将鼠标指针移动到对象内时触发。
onmouseup	当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel	当鼠标滚轮按钮旋转时触发。
onpaste	当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange	当在对象上发生对象上发生属性更改时触发。
onreadystatechange	当对象状态变更时触发。
onscroll	当用户滚动对象的滚动条时触发。
onselectstart	对象将要被选中时触发。

方法

方法	描述
addBehavior	给元素附加一个行为。
appendChild	给对象追加一个子元素。
applyElement	使得元素成为其它元素的子元素或父元素。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
clearAttributes	从对象中删除全部标签属性和值。
click	触发 onclick 事件来模拟单击。
cloneNode	从文档层次中复制对对象的引用。
componentFromPoint	通过特定事件返回对象在指定坐标下的位置。
contains	检查对象中是否包含给定元素。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
dragDrop	初始化拖曳事件。
fireEvent	触发对象的指定事件。
getAdjacentText	返回邻接文本字符串。
getAttribute	获取指定标签属性的值。
getAttributeNode	获取由 attribute.name 属性引用的 attribute 对象。
getBoundingClientRect	获取指定 TextRectangle 对象集合绑定的对象。
getClientRects	获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getElementsByTagName	获取基于指定元素名称的对象集合。
hasChildNodes	返回表明对象是否有子对象的值。
insertAdjacentElement	在指定位置插入元素。
insertAdjacentHTML	在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText	在指定位置插入给定的文本。
insertBefore	在文档层次中插入元素。
mergeAttributes	复制所有读/写标签属性到指定元素。
normalize	合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
releaseCapture	释放当前文档中对象的鼠标捕捉。
removeAttribute	删除对象的给定标签属性。
removeAttributeNode	从对象中删除删除 attribute 对象。
removeBehavior	分离元素的行为。
removeChild	从元素上删除子结点。
removeNode	从文档层次中删除对象。
replaceAdjacentText	替换元素的邻接文本。
replaceChild	用新的子元素替换已有的子元素。
replaceNode	用其它元素替换对象。
scrollIntoView	将对象滚动到可见范围内，将其排列到窗口顶部或底部。
setAttribute	设置指定标签属性的值。
setAttributeNode	设置 attribute 对象为对象的一部分。
setCapture	设置属于当前文档的对象的鼠标捕捉。
swapNode	交换文档层次中两个对象的位置。

样式

样式标签属性	样式属性	描述
behavior	behavior	设置或获取 DHTML 行为的位置。

注释

所谓图像映射，就是带有预先定义区域的图像，这些区域包含了指向其它文档或锚的链接。例如，你可以在一副太阳系的图像上创建用户点击后可前往不同星球的链接。

map 对象由 IMG 元素的 USEMAP 属性引用，格式如下：

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

MAP 元素包含一组定义图像中链接区域的 AREA 元素。

此元素在 Microsoft^® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。

此元素不会被渲染。

此元素需要关闭标签。

示例

下面的例子提供了一个太阳系的图像映射代码。该代码在 MAP 元素中使用 AREA 元素及其 COORDS 值和 SHAPE 标签属性创建了由图象映射指向单个行星图像的链接。要返回到太阳系图像映射，用户可以单击后退按钮。

HideExample

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
ALT="太阳系" USEMAP="#SystemMap">
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126"
HREF="/workshop/graphics/sun.gif">
<AREA SHAPE="circle" COORDS="90,58,3"
HREF="/workshop/graphics/merglobe.gif">
<AREA SHAPE="circle" COORDS="124,58,8"
HREF="/workshop/graphics/venglobe.gif">
<AREA SHAPE="circle" COORDS="162,58,10"
HREF="/workshop/graphics/earglobe.gif">
<AREA SHAPE="circle" COORDS="203,58,8"
HREF="/workshop/graphics/marglobe.gif">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
281,75,288,91,267,87,253,89,237,81,229,64,228,54"
HREF="/workshop/graphics/jupglobe.gif">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
349,74,367,105,337,85,324,85,307,77,303,60,307,50"
HREF="/workshop/graphics/satglobe.gif">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,
393,80,383,86,381,75,376,69,376,56,380,48,393,44"
HREF="/workshop/graphics/uraglobe.gif">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
435,77,445,92,456,77,463,72,463,62,462,53,455,47"
HREF="/workshop/graphics/nepglobe.gif">
<AREA SHAPE="circle" COORDS="479,66,3"
HREF="/workshop/graphics/pluglobe.gif">
</MAP>

Show Me