HTML语言基础
一、为什么要学习HTML？
近两年来，许多公司开发出了图形化的HTML开发工具，使得网页的制作变得非常简单。如微软公司推出的 Microsoft FrontPage， Adobe公司推出的 Adobe Pagemill， Micromedia公司推出的Dreamweaver等编辑工具，都被称为“所见即所得”的网页制作工具。这些图形化的开发工具可以直接处理网页，而不用书写费劲的标记。这使得用户在没有HTML语言基础的情况下，照样可以编写网页。这时，编写HTML文档的任务由开发工具替你完成了。这是网页图形编辑工具的最大成功之处，但也是它们的最大不足之处。受到图形编辑工具自身的约束，将产生大量的垃圾代码。原因很简单，我举一个简单的例子你就明白了。比如：在网页设计一个表格，若是每个单元格的宽度和高度让它根据其中的内容自动确定，HTML只要你告诉它是表格和单元格的排列顺序（也就是行列数）就行了，但因为图形化开发工具无法得知你的这种特殊要求，所以只能取一般要求，把每个单元格的宽度和高度都定义起来，从而增加了许多代码。所以一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会HTML语言，从而知道那些是垃圾代码，这样，我们就可以利用图形化HTML开发工具快速成地做出网页，又会消除无用的代码，从而达到快速制作高质量网页的目的。
二、如何用HTML？
HTML语言，又称超文本标记语言，是英文Hyper Text Markup Language的缩写。HTML语言作为一种标识性的语言，是由一些特定符号和语法组成的，所以理解和掌握都是十分容易的。可以说，HTML语言在所有的计算机编程语言中是最简单易学的。 组成HTML的文档都是ASCIlI档，所以创建HTML文件十分简单，只需一个普通的字符编辑器即可。如 Wndows中的记事本、写字板都可以使用。也可以采用专用的 HTML 编辑工具：如 CoffeeHTML、 Homesite、 HTMLedit Pro等工具，它们的特点是能够自动检查HTML文档中的语法错误并协助改正。由于有了图形化的HTML开发工具，使得我们学习HTML更加容易，我们可以先用它制作好网页，再在它附带的HTML代码编辑器在删去那些无用的代码，利用它的所见即所得特性，从而使我们很快就能熟炼地掌握HTML。特别是Micromedia 公司最近发布的Dreamweaver4，可以把源代码编辑器和网页编辑器放在同一个窗口中，真是方便极了。
三、HTML基本概念
1、标记
HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。标记在使用是必须用方括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如<TABLE>表示一个表格的开始，</TABLE>表标一个表格的结束。在HTML中，标记的大小写作用相同，如<TABLE>和<table>都是表示一个表格的开始。
标记可以包含标记，如：表格中包含表格或其它标记，如下面这样的HTML代码结构是正确的：
<table width="50%" border="10" cellspacing="10" cellpadding="10">
<tr>
<td>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td>
<p> </p>
<p>hjk</p>
<p> </p>
</td>
<td> </td>
</tr>
</table>
但是标记不能交叉嵌套，如下面这样的代码是错误的：
<div><span>这是不正确的代码</div></span>
2、特殊字符
由于方括号和英文双引号被用来提示HTML的标记及参数值，那么在网页中要显示方括号和英文引号只能用其它的符号来代替，下面是常见特殊字符所代表的正常字符：
<或<对应字符 <
>或>对应字符 >
"或"——对应字符 "
à——对应字符 A
3、语法
一个标记，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定上就是所谓的语法，例如：段落标记<p>，它的语法格式是：
<p
align=left|center|right
class=type>
这就说明<p>标记有两个属性参数，即“align”和“class”，其中“align”用于定义段的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数，按照默认情况显示，这一点非常重要，这是我们判断无用代码的主要标准之一，假如在网页代码中有对默认值进行描述设置的语句代码，显然是无用的代码。另外，在设置标记的属性值时，若是取默认值不影响效果或影响很少，我们就尽量取默认值，这样可以不用设置，从而达到减少代码的目的。
标记参数的具体的值都有要加西文引号，如：要使段落内容居中，正确的写法是这样的：<p align="center">段落内容居中示例</p>
学好用好HTML语言的关键是灵活应用标记的参数。特别是默认值的应用。
用好活动字幕标记—marquee
活动字幕，也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果；用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的<marquee>活动字幕标记所需的代码最少，确实能够以较少的下载时间换来较好的效果。该标记语法格式如下：
<marquee
aligh=left|center|right|top|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height＝n
hspace＝n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop＝n>
可以看出由于活动字幕的显示方式多种多样，可选的参数也很多。下面解释一下各参数的含义：
align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。
Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。
Direction：用于设定活动字幕的滚动方向是向左、向右、向上、向下。
Behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端；behavior="slide":表示由一端快速滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动。
Height：用于设定滚动字幕的高度。
Width：则设定滚动字幕的宽度。
Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount：用于设定活动字幕的滚动距离。
scrolldelay：用于设定滚动两次之间的延迟时间。
Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。
<marquee>标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
应用技巧
1、全取默认值，所用代码最少，请看下面的例子
这个滚动字幕全取默认值，源代码：<marquee>这里写字幕内容</marquee>，代码是不是很少？
2、垂直滚动
只要加上diriction="up"就行了，如<marquee direction="up" >这里写字幕内容</marquee>。
3、多行文本的活动字幕
由于<mqrquee>标记只能作用于一段文本，因此多行活动字幕，分行时只能用<br>标记，不能用<p>标记。
示例源代码：
<marquee>
活动字幕内容第一行<br>
活动字幕内容第二行<br>
活动字幕内容第三行<br>
</marquee>
4、在字幕内容中加入图象
<marquee>虽是一个活动字幕标记，但它允许在其中加入图象。下面是一个加入了图片的代码： <marquee><img src="image/a2ball.gif" width="17" height="16">这是加入图象的活动字幕</marquee>
5、在Dreamweaver中使用<marquee>标记
Dreamweaver不能在编辑窗中直接加入marquee标记，但可在源代码检视器中加入<marquee>标记，然后在编辑窗中编辑活动字幕的内容即可。
<marquee>标记的参数较多，在应用中要把握一个原则，能用默认值就不要再设置参数值，用什么参数就设置该参数的值，其它参数就不要再设置，以把代码控制在最少的范围内。
用好超级链接标记—A
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已是众所周知了，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构。<a>标记的基本语法结构是：
<a
class=type
id＝value
href＝reference
name＝value
rel=same|next|parent|previous
rev＝value
target＝window
style＝value
title=title
onclick＝function
onmouseout＝function
onMouseOver=function> </a>
从标记的语法结构可以看出，在设定一个超级链接时有很多参数可供选择，以实现不同的链接效果，这有点出乎意料吧？！
其中class和id选项：用于设定链接点所属的类型和分配的ID号，通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词，用于设定链接地址。链接地址必须为url地址，如果没有给出具体路径，则默认路径和当前页的路径相同。 链接到的文件也分为几种情况：如果为HTML文件，则在当前浏览器中直接打开；如果为可执行文件（.exe文件），则直接执行或下载，我们提供下载的文件就是用它的这种特性做的；如果为文本文件如word格式的文件，则在浏览器中打开此文件，并可以进行编辑加工。
rel：表示设定链接的关系：rel=same表示待链接的文件与此文件相同，rel=next表示待链接的文件为下一页，rel＝parent表示本文件为待链接文件的父文件，rel=previous则表示待链接的文件为上一页。
rev：则用于设定反向链接。
target：是在采用帧窗口的情况下设定链接到哪一个窗口，还有target="_bank"是表示新开一窗口打开网页。
title：用于设定链接点被选到时显示的标题。
onclick：对应于一个事件，当链接点被点击后将触发这个事件，执行对应的子程序。
onmouseover：与onclick类似，对应的事件在鼠标移到链接点上时被触发。
onmouseout：对应的事件在鼠标移出镇接点后被触发。
举几个例子： <a href="index.htm">回到主页</a>
<a href="sound.wav">播放语音文件</a>
<a href="javascipt.open()">执行对应的程序</a>
<a herf="document.doc">打开对应的文档进行加工</a>
应用技巧
1、提供下载文件
有不少网友来信问，提供下载的效果怎么做。实际上仍然是做一个超级链接，不过供下载的文件必须上传到网站上。例：有一个“网页技巧”的文件包供下载，文件名是“homepagejq.zip”且已上传到网站了，则这个链接的代码可以这样写：<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。
2、在新窗口中打开链接的网页
设定“target”的值为“_blank”。例：新开窗口打开网页“aboutme.htm”。产生该效果的代码是：<a href="aboutme.htm" target="_blank">关于我……</a>。
3、鼠标移到链接，显示一行说明文字
设定“title”参数值，即可获得这种效果。例：当鼠标移到“黄山村夫”这个链接上时，显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的：<a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。
4、鼠标移到一个链接上弹出一个窗口
这是设定onmouseover参数获得的效果。例：当鼠标移到一个链接上，弹出一个窗口并在窗口中显示“鼠标悬停效果演示！”。这个链接的代码是这样的：<a href="其它网页.htm" onmouseover="alert('鼠标悬停效果演示！')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。
5、链接到本页的指定内容
要实现链接到本页的某一部分内容上（也就是“文件内跳转”），必须用参数name指定链接点的名称。选定一块文本，可以用name参数为其命名，以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候，若只对某部分的内容感兴趣，可以采用跳跃式的阅读方式。其基本格式是：
<a href＝"＃链接点名称">第二部分</a>第一部分内容……
…………………………………….
<a name＝"链接点名称"></a>第二部分实际内容……
…………………………………….
这样当你点击“第二部分”这个超级链接后，就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取，但链接的“href”参数中的链接点名称必须与其一致，不要忘记在前面加上“#”。
6、链接到其它页面的指定内容位置
方法与上例类似，但在“href”参数中的链接点名称前要加上网页的文件名。例：有两个网页page1.htm和page2.htm ，每页均有两部分内容，现要在page1.htm中制作一个超级链接，按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做，首先在page2.htm第二部分内容开始的地方写上这样一句代码：<a name="链接点名称"></a>；在page1.htm中写上这样一个链接代码：<a href="pagw2.htm#链接点名称">page2 的第二部分内容</a>。
7、链接到E_mail
点击一个超级链接后，将启动客户机上的电子邮件管理软件给你写信。例这行代码：<a href="mailto:fyy0528@sina.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接，将自动启动电子邮件管理软件（如OE）的写信功能，并已把邮件地址加在了收信人的地址栏里了。
链接不仅可以以文本作载体，也可以以图象作载体，而且可以以图片的某一部分作载体，且都能实现上述这些效果，方法也相同，所不同只是载体，也就是链接的两对方括号中间的那部分，所以不再另举例了。
用好基本图像标记—img
网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像，否则便使测览者觉得索然无味。下面介绍HTML语言中的基本图像标记：<img>。其基本语法结构如下：
<img
align=top|middle|center|bottom|left|right
class=type
id=Value
name=value
src=url
title=text
alt=value
border=n
height=n
width=n
hspace=n
vspace=n
ismap=image
usemap=url
onload=function
onabort=function
onerror=function
dynsrc=url
controls=controls
loop=n
start=type>
可以看出，关于基本图像标记<img>的应用参数多达21项。当然，我们实际应用的只是其中几项，只有在需要实现特殊效果的情况下，才需要使用较多的参数。下面先介绍一下各参数的具体含义：
align：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，即align＝top。在图文混排时，这个参数很有用。
class和id：分别指定图像所属的类型和图像的id号。
name：用于设定图像的名称。
src：规定插入的图像的url地址，也就是含路径的图像文件名。
title：设定图像的标题。
alt：表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最易忽略的参数，因不设定它在正常显示时没问题。
border：设定图片的边框。
height和width：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。
hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。
ismp和usemap：在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。
onload、onabort、onerror对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。
dynsrc：指定要下载的影像片断的url地址。
controls：设定影像播放的控制接钮。
loop：指定影像片断的播放次数，当loop=-1时，影像片断将循环播放直至页面更新。
start：设定何时开始播放影像片断，有三种选择：start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。
应用技巧
1、给图片加边框
上边这张图片的边框是border="4"所产生的效果，注意：边框的颜色默认的是黑色，不美观，而<img>标记也没有设置边框颜色的参数，我们可以通过设置Class参数调用CSS达到改变边框颜色的目的，如本例的完整代码是：
<img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="left" class="style1">，这里的CSS的“style1”放在网页源代码的<head>与</head>之间，其代码为：
<style type="text/css">
<!–
.style1 { border-color: #009900 }
–>
</style>
2、给图片加动态说明和替代文字
若想制作当鼠标移到图片上出现一行简短说明文字的效果，不必去使用图层技术（特殊效果的说明除外），设定title参数就行了。例：在上例的图片的代码改成这样：<img src="image/yks2.jpg" width="59" height="48" border="4" title="这就是著明的黄山迎客松，她已有近千年的树龄了。" alt="黄山迎客松" align="left" class="style1">。这样，当鼠标移到图片上，就会显示出说明文字“这就是著明的黄山迎客松，她已有近千年的树龄了。”。
给图片加上替代文字是一种好习惯，象上例那样设置alt参数，当用户关闭图像显示或页面刚刚下载时，图片还没来不得及显示时，图像的替代文字就会显示出来，这样用户就能知道对应的图像内容。
3、图像与文字混排
图文混排主要是设置align参数。在这里要注意：
1） top、middle、center、bottom所产生的效果只是一行文字，在多行文本与图象对齐时要用left和right参数值。
2)<img>中的对齐参数align所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。如下面这段代码：
<p align="left"><img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="top" class="style1">图文混排示例</p>
在上面这段代码中，标记<p>中的align="left"表示图片的位置在窗口的左端；而<img>中的align="top"则表示图片旁边的文字与图片的顶端对齐。
3）为了避免图片与旁边文字挨得太近不便阅读，可以通过设置hspace参数来控制图片与文字间的距离，一般设置hspace="10"（表示图片的左右有10个像素的空白）就能达到较好的效果。
4、动态替换图像
鼠标不在图片上
鼠标移到图片上
当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样了。象上边所示的这种效果，当把鼠标移到上面时，看到的效果似乎是那个白色窗口向上下展开了，实际上是换了一张图片。鼠标移开，又恢复了原样。制作这样的效果，先要给欲替换的图片设定名字，本例中是name="hscfjj"；然后设定onmuseover和onmouseout 参数。本例<img>标记的完整代码如下：
<img src="image/htmlp1.gif" width="182" height="129" align="left" name="hscfjj" onmouseover="hscfjj.src='image/htmlp2.gif'" onmouseout="hscfjj.src='image/htmlp1.gif'" alt="黄山村夫站（http://fym888.go.163.com)简介图片" vspace="10" hspace="10">
采用本例来制作动态按钮将会达到很吸引人的效果。
5、在网页加入影像片断
例：在move 目录下有一介绍“黄山风光”的影像片断文件“hsfg.avi”，现要在网页中播放。那么源代码是这样的：<img dynsrc="move/hsfg.avi" start="mouseover" width="380" height="288" controls loop="1" alt="黄山风光介绍"影像片断">
上面这段代码的效果是，当鼠标移开影像片断上时即开始训动媒体播放器播放影像一次，并且还设定了显示播放器控制面板，以便对播放过程进行控制。
从上面的代码可以看出，在网页中加入影像片断与加普通图像基本相同，如它们都要指定来源、设定大小和替代文字等。但在这里请注意：加入影像片断时要使用“dynsrc”参数，且不能再在同个<img>标记中使用“src”参数，否则将不能播放影像片断，只能显示替代文字了。
用好图像的作用区域标记—area
你见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗？在那幅办公室的图片上用鼠标点一下办公桌上的键盘，就启动一个“五笔字型”打字练习软件，点一下办公桌上的记事本就打开一个记事本软件，如此等等，即形象又方便。这种效果的实质是把一幅图片划分为不同的作用区域，再让不同的区域链接到做不同事情的软件上去，在HTML中也有一个具有把图片划分成多个作用区域，并链接到不同网页的标记，那就是 <area>地图作用区域标记。
<area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下：
<area
class=type
id＝Value
href＝url
alt＝text
shape＝area-shape
coods＝value>
其中。class和id：是分别指定热点的类型和id号。
alt：用于设定热点的替代性文字。
href：用于设定该热点所链接的url地址。
shape和coords：是两个主要的参数，用于设定热点的形状和大小。其基本用法如下：
<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ……" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ……。
<area>标记是在图像地图中划分作用区域的，因此其划分的作用区域必须在图像地图的区域内，所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域，并为指定的图像地图设定名称，该标记的用法很简单，即<map name="图像地图名称"> …… </map>。
下面通过一个例子来说明这两个标记的用法：
这里是一幅新书架的图片，要做的效果是：当鼠标点“网址大全”这本书时，新开一窗口，显示关于这本书的简介及订单的网页（urlall.htm）；当鼠标点“网站设计攻略”这本书时，新开一窗口，显示关于这本书的简介及订单的网页（siteall.htm）；当鼠标点“网页技巧大全”这本书时，新开一窗口，显示关于这本书的简介及订单的网页（pagejqlall.htm）。制作方法：
1、插入图片，并设置好图像的有关参数，且在<img>标记中设置参数usemap="newbook" ismap，以表示对图像地图（newbook）的引用；
2、用<map>标记设定图像地图的作用区域，并取名为：newbook；
3、分别用<area>标记针对三本书的位置划分出三个矩形作用区域，并设定好其链接参数href。
制作完成，本例的源代码如下：
<img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">
</map>
在制作本文介绍的效果时应注意的几点：
1、在<img>标记不要忘记设置usemap、ismap参数，且usemap的参数值必须与<map>标记中的name参数值相同，也就是说，“图像地图名称”要一致；
2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在<map>与</map>之间；
3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords 中设置的却是多边形区域顶点坐标的现象出现。
用好HTML的表格标记
对于表格，是网页制作中的重头戏，一些图形化网页制作工具（如：Dreamweaver、Fontpage等）对它也支持的非常好，但HTML为表格设置了几十个参数，图形化网页制作工具要对它全面支持就有点免为其难了。由于参数太多，且大部分参数大家也比较熟悉，就不在这里一一介绍了，下面的例子中仅对一些关键性参数作详细介绍。
一、作系列横单线
这是系列横单线试验，效果还好吧？
在这个例子中，用到了表格主标题标记<caption>，它的语法如下：
<caption
align=left|center|right
valign=top|bottom>
align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<table>标记的rules和frame参数，rules参数是对表格的内部边框作显示控制。
rules="none"：表示不加内部边框；
rules="rows"：表示只显示水平方向的边框；
rules="cols：表示只显示垂直方向上的边框；
rules="all"：则是显示所有方向上的边框，这也是默认值；
frame="void"：表示不加外边框；
frame="above"：表示显示上边的外边框；
frame="below"：表示显示下边的外边框；
frame="lhs" ：表示显示左边的外边框；
frame="rls" ：表示显示右边的外边框；
frame="hsides"：表示显示上下外边框；
frame="vsides"：表示显示左右外边框；
frame="box" 则表示显示所有外边框。
明白了参数值的含义，制作本例的效果就简单了，本例完成后的源代码如下：
<table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
<caption>这是系列横单线试验</caption>
<tr>
<td> 这是系列横单线试验，效果还好吧？</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
用这种方法画系列单线，即快又整齐，且所用代码也很少。
二、作系列竖单线
本例这种效果看起来是不是有点特色，其实在制作方法上与上例没有多少区别，只是改变了rules和frame的参数值，使表格只显示垂直方向的内外边框，其它与上例相同，本例完成后的源代码是：
<table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180">
<tr>
<td>更上一 层 楼 </td>
<td>欲穷千 里 目 </td>
<td>黄河 入 海 流 </td>
<td>白日依 山 尽 </td>
<td><p><br>登 黄 鹤 楼 </p></td>
</tr>
</table>
三、系列双横线
这是在例一的基础上再增加设定了cellspacing参数所产生的效果。
本例采用与例一相同的方法，通过设定rules和frame参数，使表格只显示水平方向的内外边框线，并增加了设定cellspacing参数使其产生双线效果，但是<table>标记默认的双线颜色不一样（因它的本意是用两种颜色来产生立体效果的），所以又通过设定bordercolorlight和bordercolordark 参数来改变双线的颜色，以达到双线颜色一致的目的。另外为了使表格内的文字内容上下留空，又设定了cellpadding参数，当然也可以通过设定单元格高度来达到这个目的，但那样要增加许多代码。下面介绍这几个参数的含义：
cellspacing="n"：单元格间距，也就是内外边框线的间距；
cellpadding="n"：单元格边距，即单元格内内容与内边框的距离；
bordercolorlight="#n"：设定立体边框线中较浅部分的颜色，用颜色名称或十六进制数表示。
bordercolordark="#n"：设定立体边框线中较深部分的颜色，用颜色名称或十六进制数表示。
用本例的方法制作双横线，比用其它方法方便、快捷，所用代码也较少，当横线的数量越多，效果越明显。本例完成后的代码为：
<table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides">
<tr><td> 这是在例一的基础上再增加设定了cellspacing参数所产</td></tr>
<tr><td>生的效果。</td></tr>
<tr><td> </td></tr>
</table>
同样，在例二的基础上再加上例三的方法就可以方便地制作出双竖线效果，你可以试试。当然表格在网页制作中的作用远远不止这些，通过这三个例子可以看出，灵活应用表格的参数设定，可以产生一些特殊效果。
HTML表单设计基础
表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
表单中主要包括下列元素：
button——普通按钮
radio ——单选按钮
checkbox——复选框
select ——下拉式菜单
text ——单行文本框
textarea——多行文本框
submit——提交按钮
reset—— 重填按钮
用HTML设计表单常用的标记是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等标记。
1、<form>表单标记
该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action="mailto:fyy0528@sina.com"。
method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。
target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。
2、<input>表单输入标记
此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。
name：设定当前变量名称。
type：决定了输入数据的类型。其选项较多，各项的意义是：
type=text：表示输入单行文本；
typet=textarea：表示输入多行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器；
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。
3、<select>下拉菜单标记
用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size="1"）；
multiple：设定为可以进行多选。
4、<option>选项标记
该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。
5、<textarea>多行文本输入标记
这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。
表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。
用好HTML表单的文本框
表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。
一、一个单行文本框的例子
本例的源代码如下：
<form name="form1" action="mailto:fyy0528@sina.com" method="post" enctype="text/plain">
<p>您的姓名： <input type="text" name="text1" size="12" maxlength="20">
您的E_mail： <input type="text" name="text2" size="20" maxlength="24" value="*****@*.*">
输入口令： <input type="password" name="text3" size="8" maxlength="8"> </p>
<p align="center">
<input type="submit" name="提交" value="提 交">
<input type="reset" name="重写" value="重 写">
</p>
</form>
本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息，在三个文本框中都设定文本框的宽度（size）和最大输入文本长度（maxlength），在第二个文本框中还设定了初始值（value），你可能注意到了，我把每个文本框的名称（name）都取成了英文名，这样对用于程序外理比较方便，因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理，那么用中文名比较直观。为了使其成为一个具有实际交互功能的表单，加上了一个提交按钮，并在<form>标记中设定了action参数为：action="mailto:fyy0528@sina.com" ，同时把method参数设置为：method="post"，这样，一旦按下“提交”按钮将会把信息通过电子邮件发到“fyy0528@sina.com”信箱。看来制作并不难！是吗？不过要注意：size的值小于maxlength的值时，当内容超过输入窗口的长度时会自动滚动；反之，size的值大于maxlength的值，超过maxlength长度的内容无法输入。
二、检验用户输入的信息
在上例中，若是用户什么信息也不写就按提交按钮，那不是白收一份邮件吗？要避免这种情况出现，就要对用户的输入信息进行检验，这就要用到<input>标记的onclick参数，我们在“提交”按钮的<input>标记中把onclick 设置为：onclick="test(form1)"，而“test(form)”则是一个Javascript子程序，用来检验文本框的输入内容的，它的源代码如下：
<script language="javascript">
<!–
function test(form){
test1(form);
test2(form);
test3(form)}
function test1(form){
if (form.text1.value=="")
alert("你没有写上你的姓名，请输入姓名！")
}
function test2(form){
if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1)
alert("E_mail地址不正确，请重新输入！")
}
function test3(form){
if (form.text3.value！="12345678")
alert("密码错误，请重新输入！")
}
–>
</script>
把这段程序复制在<head>与</head>之间，那么一旦用户按下提交按钮，就会调用这段程序对用户输入的信息进行检验，如果信息不正确就会给出提示，提醒用户输入正确的信息。注：在<form>标记中设置onsubmit="test(form1)"也能达到同样的效果。
三、制作一个留言簿
这个留言簿虽简单，但已包含了留言簿的基本功能，它是通过邮件的方式接收用户的信息，无需CGI支持。它的制作也比较简单，它采用表格产生立体效果，在表单中先插入一个表格，并设置好表格的有关参数，在表单方面，只是比例一多了一个多行文本框。在<input>标记中设置type="textarea"，不能得到一个多行文本框。我们用HTML的另一个标记<textarea>来设置一个多行文本框，若是默认的文本框大小不合适，可通过设定cols和rows参数来调整窗口的大小。其它标记参数的设置同例一。本例完成后的源代码如下：
<form name="form2" action="mailto:fyy0528@sina.com" method="post" enctype="text/plain" >
<table width="50%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" cellpadding="4" align="left">
<tr>
<td colspan="2"> <div align="center"><b>留 言 簿</b></div> </td>
</tr>
<tr>
<td>姓名： <input type="text" name="textfield" size="8"> </td>
<td>E_mail: <input type="text" name="textfield2" size="10" maxlength="20"> </td>
</tr>
<tr>
<td colspan="2"> <div align="center">留 言<br> <textarea name="textfield3" cols="30" rows="3"></textarea>
</div>
</td>
</tr>
<tr>
<td> <div align="right"> <input type="submit" name="Submit" value="提 交"> </div> </td>
<td> <input type="reset" name="Submit2" value="重 写"> </td>
</tr>
</table>
</form>
用好HTML表单的选择框
在用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，在HTML的<input>标记中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中的选项用户可以任意选择多项，甚至全选。请看下面的例子：
下面给出这个例子的源代码，结合代码来讲各参数的设置：
<form name="form1" >
你是否喜欢旅游？请选择：<br>
<input type="radio" name="radiobutton" value="radiobutton" checked> 喜欢
<input type="radio" name="radiobutton" value="radiobutton"> 不喜欢
<input type="radio" name="radiobutton" value="radiobutton"> 无所谓<br>
<br>
您对那些运动感兴趣，请选择：<br>
<input type="checkbox" name="checkbox1" value="checkbox"> 跑步
<input type="checkbox" name="checkbox2" value="checkbox"> 打球
<input type="checkbox" name="checkbox3" value="checkbox"> 登山
<input type="checkbox" name="checkbox4" value="checkbox"> 健美<br>
</form>
从上面的源代码中可看出，制作单选框只要把<input>标记的type参数设置为type="radio"就行了；而制作复选框则只要把<input>标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框，要根据实际需要而定。若只需用户有一种选择的，就用单选框，如本例中“你是否喜欢旅游？”这个问题，用户只能是一种选择，所以采用了单选框；若允许用户有多项选择的内容，则采用复选框，如本例中的“你对那些运动感兴趣？”这个问题，因一个人的兴趣可能是多方面的，所以采用了复选框。
在<input>标记中设定checked参数，则该选框就被默认选中。如本例的第一个单选框（“喜欢”下面那个单选框）就设置为默认选中，这样用户若是想选择“喜欢”的话，就可以不用再选了，当然，若用户要选择了“不喜欢”，则只要点击“不喜欢”下的那单选框，而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用，否则会引起用户的反感。
用好表单的下拉式菜单
用<select>标记可以在表单中方便地插入一个下拉式菜单，以方便用户进行选择，这在制作调查表或用户订单时非常有用，对这种下拉式菜单稍加改造则可以制作出名符其实的下拉式导航菜单。
一、下拉式选择框
这两个示例，外观形式有所不同，但都是用了<select>和<option>标记做出来的，只是设置了不同的参数而已。比较一下它们的源代码，就明白了：
左边的菜单源代码：
<select name="select" size="4" multiple>
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3" >黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
右边的下拉菜单代码：
<select name="select2" size="1">
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3">黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
从上面的源代码中可以看出，两个菜单的所有<option>标记的参数设置均相同，所不同的是左边菜单在<select>标记中设置了size="4"，从而使得它一次可以显示四个菜单项。另外，它还设置了multiple参数，从而使得在该菜单上可以选择多项，在选择多项时要同时按下“shift”键。
二、制作导航菜单
这个例子从外观上看与上例没有什么区别，但当你用鼠标点出下拉出的菜单项后，却能链接到相应的网页，也就是说，它是一个名符其实的下拉式导航菜单了，先看看它的源代码有什么变化：
<select name=D1 onchange="location.href=this.options[this.selectedIndex].value" size=1 >
<option selected value="村夫站导航">村夫站导航</option>
<option value="http://go.163.com/~fym888/home.htm">村夫家</option>
<option value="http://go.163.com/~fym888/dwyd.htm">DW 园地</option>
<option value="http://go.163.com/~fym888/flashyd.htm">Flash园地</option>
<option value="http://go.163.com/~fym888/pageabc.htm">网页ABC</option>
<option value="http://go.163.com/~fym888/download.htm">文章下载</option>
</select>
从上面的代码中可看出，value的值中与上例不同，不再是数字，而是网页URL地址，这样一旦你选择一个菜单就相当于获得一个网页地址，但仅有网页地址是不够的。在本例中关键的是这一行代码：onchange="location.href=this.options[this.selectedIndex].value" 这句代码的作用是，一旦选择项发生改变，立即从当前被选择的菜单中获得网页的地址，并链接到这个地址，从而保证了导航功能的实现。
用好表单的按钮（一）
对于一个交互式表单，按钮是必不可少的。按钮一般分为两类，一类本身就具有特定的功能，叫做特殊按钮，如Submit（提交按钮）——用于传输用户所填写的信息至服务器、Reset（复原按钮）——清除所填写的信息以利重新填写；另一类本身不具特殊功能的，叫作普通按钮。特殊按钮只能用于表单才能发挥特殊的功能。而普通按钮除可在表单中应用外，在网页的其它地方使用也很方便。
一、制作常规按钮
制作按钮非常简单，在<input>标记中把type参数设置为：type="submit"就获得一个提交按钮，如本例的“提交”按钮；在<input> 标记中把type参数设置为：type="reset"就获得一个复原按钮，如本例的“重写”按钮；在<input>标记中把type参数设置为：type="button"就获得一个普通按钮。本例的按钮源代码如下：
<input type="submit" name="Submit" value="提 交">
<input type="reset" name="Reset" value="重 写">
<input type="button" name="butto11" value="点我试试" onclick="alert('谢谢您点击！')" >
按钮的制虽简单，但在制作按钮时要注意两点：
1、对于特殊按钮，一般不需另加动作，当按下按钮时就有动作发生；而对于普通按钮，必须加上指定的动作并用相就的事件来触发，才会在事件发生时激发动作，否则按下普通按钮，什么也不发生。在本例的普通按钮上加了一个弹出提示窗口的动作：alert('谢谢您点击！')，并用onclick事件来触发，所以当你在那个按钮上点击时会弹出一个窗口，并显示“谢谢您点击！”这句话。
2、按钮上的文字是通过设置value参数来实现的，其默认值是英文名。
二、改变按钮的外观
HTML对文本提供了丰富的颜色设置，唯独对表单按钮默认的则是Windows系统的颜色，显得有点死板，而且也没有提供按钮的颜色设置参数，因此，要改变表单按钮的外观，只能借助于CSS了。请看下面的示例：
你看！这个按钮是不是变了样，新鲜多了吧？我们来看看它的源代码作了那些改变。按钮源代码： <input type="submit" name="Submit" value="提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF">
从源代码中可以看出，按钮的基本参数设置没变，只是加了一段CSS代码，正是这段CSS代码改变了按钮的外观风格。在这段CSS代码中，不仅重新设置了表单按钮的背景色和字号大小，而且还对按钮的边框线进行了设置，把上边框线、左边框线设置浅一点的颜色，而把下边框线、右边框线设置深一点的颜色，其目的是使表单按钮产生立体效果。当然，你可以任意改变CSS代码中颜色，以使按钮的颜色与所在网页的颜色协调。
用好表单的按钮（二）
若想使表单按钮一改那死板板的老面孔，能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能，使它更具吸引人的魅力，采用本文介绍的制作方法是个不错的主意。请看下面的示例子。
一、动态变换文本按钮
鼠标不在按钮上
鼠标在按钮上
你看！这个按钮的效果不错吧？！制作这种效果的思路是这样的，利用CSS属性可以动态改变的特点，先给按钮定义两种外观样式，再在<input>标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可重复使用），把CSS放到<head>与</head>之间，在按钮中用class 调用CSS格式。本例在<head>与</head>之间的CSS代码是这样的：
<style type="text/css">
<!–
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; border-color: #CCFF99 #999999 #999999 #CCFF99}
–>
</style>
本例按钮的代码如下：
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1">
从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。
二、动态变换图像按钮
鼠标不在按钮上
鼠标在按钮上
本例与上例在制作思路和制作方法上均没有多大区别，只是采用了两张图片来作按钮背景，但产生的效果却非同一般。在制作这种效果的按钮时要注意两点：
1、作按钮背景的图片最好用具透明背景的gif图片，这样可以做出各种各样形状的按钮，将具有很强的个性；
2、背景图片的大小要与按钮的大小一致，否则，由于背景的平铺填充，将使按钮面目全非。
下面是本例在<head>与</head>之间的CSS代码：
<style type="text/css">
<!–
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width: 60px; height: 22px}
–>
</style>
本例的按钮代码如下：
<input type="submit" name="Submit2" value="提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3">
从按钮代码可看出它与例一的按钮代码完全相同，但本例的CSS代码与例一有较大的区别，这里要注意：url后面的括号中是按钮背景图片的地址，也就是含路径的图片文件名，你在实际制作时要把它改成图片的实际地址。
另外再多讲一句，你若是用图形化网页制作工具（如Dreamweaver)，那么凡是用CSS产生的效果，一般在编辑窗中是看不到的， 如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。
用好HTML的帧窗口标记
帧窗口是一种复杂的页面技术，应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容，可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面，按照一定的组合方式组合在一起，以实现特殊的效果。
在HTML中用<frameset>（分割窗口标记）来分割窗口，<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位，在页面中用<frameset>……</frameset>标志页面主体部分的起止位置。而且，<frameset>标记决定了怎样划分窗口，以及每个窗口的位置和大小。其基本语法结构如下：
<frameset
cols＝n
rows=n
frameborder=yes|no
border＝n
bordercolor＝#n
framespacing=n>
cols和rows：是决定页面如何分割的两个参数。分割左右窗口用cols，各帧的左右宽度用占窗口宽度的百分比来表示。比如：cols="30%,40%,*"就表示水平方向分割成三个窗口，各自所占总宽度的百分比依次是30%，40%和30%。其中"*"表示剩余部分，也就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows，同样采用百分比的设定方法。
frameborder：是指定各分窗口是（ye）否（no）要加边框；如果加过框的话，则用 border参数指定边框的宽度，bordercolor指定边框的颜色。
framespacing：用于设定各分窗口之间的间隔大小，默认值是0。
用<frameset>标记把窗口分割好后，各窗口的属性是用HTML的<frame>标记来定义的，所以<frameset>标记中必须包含<frame>标记，用以定义各分窗口的属性。其语法如下：
<frame
align=left|center|right|top|bottomv name=framename
src＝url
noresize
scrolling＝yes|on|auto
frameborder=yes|no
bordercolor＝＃n
marginheight=n
marginwidth＝n>
align：设定分窗口的位置是靠左（left）、靠右（right）、居中（center）、靠上（top）还是靠底（bottom）。
name：用于指定分窗口的名称，src则用于指定分窗口所对应的HTML页面地址。
noresize：是对用户来说的，当<frame>标记中包含此参数的时候，用户就不能用鼠标调整修改各分窗口的大小。
scrolling：设定分窗口是否要滚动条。scrolling=no时不要滚动条，scrolling＝yes时表示要滚动条，scrolling＝auoto时表示根据实际情况自动设置滚动条。
frameborder和bordercolor：是设定分窗口有无边框和边框颜色的。但对象只限于用<frame>标记的分窗口。
marginheight和marginwidth：分别用于设定分窗口的上下边缘和左右边缘的宽度。
用上面的两个标记，就能够实现多窗口页面，下面将举例说明。
1、左小右大两窗口
这种页面一般在左边的窗口放一个网站导航页，右面放网站页面内容。制作方法：
先用<frameset>标记并通过设置其cols参数，沿水平方向分割成两个窗口，左边的窗口占20%，右边的窗口取剩余部分，再用<frame>标记分别定义两个窗口的属性。完成后的分帧页面源代码如下：
<html>
<head>
<title>分帧窗口示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset cols="20%,*" >
<frame name="leftFrame" noresize src="ahtml.htm">
<frame name="mainFrame" noresize src="bhtml.htm">
</frameset>
<noframes>
<body>
<p>很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能浏览！ </p>
<p>Sorry!This page uses frames,but your browser doesn't support them .
</body></noframes>
</html>
从上面的代码看，设计帧窗口页面并没有想象得那么复杂，但以下几点在具体操作时要注意：
1）用<frame>标记定义分窗口属性时，要注意其在<frameset>标记中的顺序，切不要搞乱了；
2）分窗口的名称虽可随意定，但最好是以其所在位置命名比较好；
3）分窗口的scrolling（滚动条）一般取其默认值"auto"比较好；
4）虽然在最终往往不要分窗口的边框，但在设计阶段，还是设置为有边框比较好，这样在编辑时一目了然；
5）上面页面代码中后面那句话一般加上为好，因为有的浏览器版本不支持分帧页面，若没加那名话，用户的浏览器若不支持分帧时，看到的是一片空白，不知是怎么一回事了，有那句话提示一下就明白了。
2、一顶一左一右页面
先看这种分帧页面的源代码：
<frameset rows="20%,*">
<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" >
<frameset cols="18%,*">
<frame name="leftFrame" noresize src="leftpage.htm">
<frame name="mainFrame" src="mainpage.htm">
</frameset>
</frameset>
从上面的代码中可看出，建立复杂分帧页面的方法是由简到繁，如本例中，先用<frameset>定义其“rows”参数，把窗口分成上下两个窗口，再用<frame>标记定义上部窗口，因下部窗口还需再分，所以不用<frame>定义其属性，而是用<frameset>标记设置其cols参数，把它再分成左右两个窗口，因已达目的，所以开始用<frame>标记定义左右两个窗口的属性。
只要记住：先粗分，后细分，cols横向分， rows纵向分，无需再分的窗口用<frame>定义属性，这些基本原则，制作分帧窗口页面就会轻松自如。
帧窗口之间的交互技巧
在多窗口的分帧页面中，各分窗口之间的信息交互是经常的事。在导航窗口中点了超级链接，那么如何在另一窗口中打开链接的网页呢？我在这个窗口中按下按钮，能在另一个窗口中写信息吗？窗口那么多，又如何识别窗口呢？请看下面的例子。
一、在导航窗口点击链接，在另一窗口打开网页
现有一分帧页面如上图所示的，A窗口是网站logo及广告，B窗口是导航栏，C是显示页面的窗口。该分帧页面的源代码为：
<frameset rows="20%,*">
<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" >
<frameset cols="18%,*">
<frame name="leftFrame" noresize src="leftpage.htm">
<frame name="mainFrame" src="mainpage.htm">
</frameset>
</frameset>
若要求在B窗口中的链接页面（test.htm）在C窗口中打开，那么B窗口中的链接应这样写：<a herf="test.htm" target="mailFrame">此链接的页面在C窗口中打开</a>，在这里起关键作用的是<A>标记中的target参数，你想在那个窗口中打开网页，就在Target参数中设置那个窗口的名称。关于该参数的其它用法请看《用好超级链接标记—A》一文。
二、在B窗口中按下一个按钮，在C窗口中写一行字
本例的页面格式与上例相同，完成后的效果是这样的：按下B窗口中“在C窗口写字”的按钮后，在C窗口中就出现一行文字“嗨！你好！这是通过B窗口控制而写的字。”。分帧页面的代码及每个窗口中的网页文件与上例相同。
制作方法：
1、 在C窗口网页（mainpage.htm）的源代码<head>与</head>之间插入下面这段Javascript程序：
<script language="Javascript">
<!–
function htest(){
document.write("嗨！你好！这是通过B窗口控制而写的字。")
}
–>
</script>
这段程序的作用是在当前窗口写上一段文字。
2、那么如何在B窗口中调用C窗口中的程序呢？先看B窗口中“在C窗口中写字”这个按钮的源代码：
<input type="button" value="在C窗口中写字" onclick="parent.mainFrame.htest()">
在这段代码中，关键是代码“parent.mainFrame”，这里引入一个新的概念—窗口结构关系，也就是在多窗口页面中，各窗口之间的关系是以什么原则来确定的。窗口关系的确定原则是：当前窗口分割出来的窗口为当前窗口的“子窗口”（children），那么当前窗口就是分割出来窗口的“父窗口”（parent）。如本例中各窗口的关系如下：
从上表可得知，“浏览器窗口”是“topFrame”和“下部窗口”的“父窗口”，而下部窗口又是“leftFrame”和“mainFrame”两个窗口的“父窗口”。两个窗口之间的联系必须通过它们的父窗口才能进行，所以本例中要调用C窗口中网页上的“htest()”很显然是通过C与B的parent再到mainFrame，然后调用htest()程序。
那么若C窗口中向B窗口中写字的代码就是这样的了： onclick="parent.leftFrame.htest()"；那么，在A窗口中要向C窗口中写一段文字的代码你知道怎样写吗？对了，就是这样：onclick="grandchildren.mainFrame.htest()"。
从上面的例子中可看出，在各窗口之间进行交互信息，关键的问题是要搞清楚窗口与窗口之间的关系，其它的操作就比较简单了。
转载于：
1 评论