网页制作六六顺｜第五讲：欲穷千里目，更上一层楼

前一讲介绍了网页制作的基本技能，您都记住了吗？您应该可以建立包括文字和超链接在内的普通HTML网页了。

但这还是很不够的。今儿个咱们来讨论网页制作较高级的一些技术，包括表格（Table）、表单（Form）、窗框（Frame）、图象（Image）以及音频和视频五个方面。

一、表格（Table）

表格在HTML文档中非常常见、非常有用、不可或缺。在HTML中，表格不仅用于真正需要表格的场合，而且在页面布局、分栏和对齐等方面取着重要作用。

1. 表格的基本语法

表格用TABLE元素定义。表格的开始是标题（可以省略），后面是一个或多个表行。表格的每一行由若干表元（Cell，也称单元格）组成，浏览器将它们分成名称表元和数据表元，且在默认情况下，将名称表元居中显示，将数据表元居左显示。

在HTML中，表格中可包含非常广泛的内容，如段落、列表、标题、表单、数字和预格式化文本等。

除必须用TABLE元素定义表格外，还需要用另一些元素定义表格组件。它们是：

• TR：用来定义表行（Table Row）；
• TH：用来定义表头（Table Head）；
• TD：用来定义表格数据（Table Data），也就是表头以外各行的表元。

用这四个元素定义一个规则表格是非常容易的。下面的示例定义了一个两行三列的表格：

<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>     
</table>

没有属性的<TABLE>标记生成的表格没有边框。可以使用BORDER属性定义表格边框及其宽度（其中#为边框线尺寸的象素值）：

<TABLE BORDER = #>

2. 跨多行、多列的表元

HTML的表格当然也可以是不规则表格。表元可跨多列或多行，跨列用属性COLSPAN实现，跨行用属性ROWSPAN实现，其属性值为所跨的列或行数。例如，下图分别使用了<th colspan=3>和<th rowspan=3>：

3. 表格尺寸设置

可以设置表格的多种尺寸，包括表格尺寸、表元间隙大小和表元内部空白尺寸等。

表格尺寸用WIDTH属性和HEIGHT属性来规定：

<table border width=# height=# >

表元间隙是指两个表元之间的距离。它可以通过CELLSPACING来定义：

<table border cellspacing=#>

还可以用CELLPADDING属性设置表元内部空白的大小：

<table border cellpadding=#>

4. 表格对齐与布局

表格内的文字相对于表格线的对齐可以整行设置，也可以只设置一个表元。水平方向对齐用ALIGN属性，垂直方向对齐用VALIGN属性。

<tr align= left ｜ center ｜ right>
<th align= left ｜ center ｜ right>
<td align= left ｜ center ｜ right>
<tr valign= top ｜ middle ｜ bottom ｜ baseline>
<th valign= top ｜ middle ｜ bottom ｜ baseline>
<td valign= top ｜ middle ｜ bottom ｜ baseline>

另外，表格整体也可以在网页中水平居中、居左或居右。通过ALIGN属性实现：

<table align=left ｜ center ｜ right>

还可以设定表格与表格附近的文字之间的空距。HSPACE控制水平间距，VSPACE控制垂直间距：

<table vspace=# hspace=#>

5. 表格的标题

表格可以通过CAPTION元素规定标题。表格标题默认放在表格的上方（VALIGN属性值为TOP），但也可以放在表格的下方（VALIGN=BOTTOM）。同时，表格在水平方向也可以居中、居左或居右。

<caption valign= top ｜ bottom>
<caption align= left ｜ center ｜ right >

二、表单（Form）

HTML从2.0版本开始包括表单（Form）元素，使HTML文档中能够接受用户输入和对用户输入进行反馈。表单的作用是从用户方面收集信息，当用户填好表单上所需信息并将表单交付处理后，服务器就可以得到表单中包含的信息，并经公共网关接口CGI（Common Gateway Interface）程序进行处理。

1. 表单基本用法

表单由表单元素FORM定义，它将放置在表单中的其他元素组合在一起。FORM元素的起始和结束标记之间，一般是一系列输入元素INPUT。

表单元素最重要的两个属性是METHOD和ACTION。METHOD说明应该如何处理来自表单的输入数据，最常用的属性值是GET和POST。ACTION则指定负责处理表单数据的程序（程序的URL）。

表单的基本结构为：

<form action=url method=get ｜ post>
  ……
  <input type=submit> <input type=reset>
</form>

也就是说，表单除开始定义其METHOD和ACTION属性外，通常在结束前会使用TYPE=SUBMIT和TYPE=RESET设计提交（寄送）和重新设置两个按钮。这两个按钮上显示的文字可用VALUE属性指定，不指定时其默认值分别为“Submit Query”和“Reset”。

表单中用INPUT元素来收集数据。INPUT元素决定了表单提供给用户的输入形式，它支持TYPE、NAME和其他属性。

<input type="type" name="name">

“type“=text, password, checkbox, radio, image, hidden, submit, reset

“name“=CGI程序所需的符号名

2. 文字和密码输入

需要用户输入文字时，应将INPUT的TYPE属性设置为TEXT（这是TYPE属性的默认值）。希望用户输入密码时，则应使用TYPE=PASSWORD。通过这种方式使用PASSWORD，表单将不显示用户输入的字符。

下列语句定义的表单说明了文字与密码属性的使用：

<form action=/cgi-bin/post-query method=POST>
  您的姓名: <input type=text name="name" size=10><br>
  您的主页: <input type=text name="URL" value="http://" size=50><br>
  您的密码: <input type=password name="passwd" size=10>
  <P><input type=submit value="发送"><input type=reset value="重设">
</form>

3. 复选框和单选框

INPUT元素支持的另外两个TYPE属性是复选框（Checkbox）和单选框（Radio Button），其对应的TYPE属性值分别为CHECKBOX和RADIO。如果要将复选框或单选框初始化为已选中，则可以在INPUT元素中使用CHECKED属性。

复选框提供多项选择，即所提供的选项中可选择多项；单选框提供单项选择，即提供的选项中只能选择一项。在形式上，复选框为方框形，选中时方框内出现对号符；单选框为圆圈形，选中时圆圈内部填一实心圆点。

<input type=checkbox ｜ radio>
<input type=checkbox ｜ radio checked>
<input type=checkbox ｜ radio value="value">

4. 图象输入

根据表单的需要，有时希望设置一个图象，使用户点击时可以发送表单信息。图象表单输入需要将INPUT元素的TYPE属性设置为IMAGE，并使用NAME属性指定输入区域的名字，用SRC属性指定图象资源的URL。

<input type=image src=url>

5. 列表框

HTML表单还允许设计列表框，包括下拉式列表和滚动式列表两种。列表框用SELECT和OPTION两种元素实现，基本格式为：

<select name="name">
<option> ……
</select>

SELECT元素用来定义列表框。它支持NAME、SIZE和MULTIPLE三种属性。NAME属性指定SELECT元素的名字。SIZE属性定义列表框的大小，即用户一次可见到的列表项的数目，如果SIZE=1（默认值），列表框显示为下拉列表。使用MUTIPLE属性时，表示允许用户进行多项选择（使用Ctrl键和Shift键配合鼠标进行多项选择）。

OPTION元素定义列表框的各选项。它可以使用属性SELECTED，表示预先已选定。还可以使用属性VALUE，用来指定用户选择某选项后的返回值。

6. 文本框

当预计用户的输入文本超过一行时，可使用文本框。文本框由TEXTAREA元素定义，它的常用属性有三个：由NAME规定文本框的名字，ROWS定义文本框的行数，COLS定义文本框的列数。

<textarea name="name" rows=number cols=number>

三、窗框（Frame）

窗框（Frame）功能可将浏览器显示窗口分割为多个部分，每一部分可保持相对独立的操作。简单地说，Frame的作法是将窗口划分为几块，每块称为一个窗框，所有窗框总称窗框集（Frameset）。因此，在HTML文档中首先是定义一个窗框集，然后逐个定义窗框，并应保证支持窗框功能的浏览器能够正常浏览。

窗框功能扩展了Web网页的排版布局和链接能力，使用户能够在同一窗口中浏览不同的内容。每一窗框具有以下特性：

• 可载入独立的URL，与其他窗框无关；
• 可赋予一个名字，以便其他URL作为目标进行调用；
• 可根据用户浏览器的窗口大小，自动调整尺寸，并能选择允许或不允许用户手动调节窗框大小。

1．窗框的基本用法

设计HTML窗框时使用的三个主要元素分别是：FRAMESET元素定义窗框集，它是一个整体框架；FRAME元素定义每一个窗框；考虑到有的浏览器不支持窗框功能，使用NOFRAME元素来显示没有窗框时的信息（对于支持窗框功能的浏览器，这一部分内容不会显示）。

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

由于窗框功能从根本上改变了HTML文档的结构，所以规定：出现FRAEMSET元素的文档中，不再使用BODY元素。

2．窗框的排列与尺寸设置

FRAMESEET元素的COLS属性规定窗口按纵向将窗口划分为若干窗框，ROWS属性指定窗口按横向将窗口划分为若干窗框。它们的属性值可以按窗口尺寸的百分比给定，通常几个百分比之和应该等于100%；也可以按窗框尺寸的实际象素值给定。两种情况下都可以只给定希望严格限制的值，而将所剩之值以星号（*）表示。

<frameset cols=n%, n%, …>
<frameset rows=n%, n%, …>

也可以定义多个窗框集，从而将窗口按纵向划分后再按按横向划分，或者按横向划分后再按纵向划分。理论上设计很多层窗框集是可能的，不过实际上窗框不宜划分过细，因为太小的窗框会无论清楚地显示信息。

3．窗框的互操作

每一个窗框都可以用NAME属性给予一个名字，并通过超链接元素A的TARGET属性加以引用。这样，就可以实现各窗框之间的互操作。

<frame name="frame_name">
<a href=url target="frame_name">

窗框有四个预定义名，它们可加强窗框操作的便利：

• _blank：弹出新的无名窗框；
• _self：将链接指向本窗框；
• _parent：将链接指向父窗框（如果没有父窗框，就指向自身）；
• _top：指向最顶层，实际上就是整个浏览器窗框。

4．窗框的外观

可对窗框的外观进行以下各项设置。

窗框集定义默认是显示窗框的边框的。但也可以通过FRAMEBORDER属性设置其边框的有无：

<frame frameborder=yes ｜ no或1 ｜ 0>

窗框间距是指窗框间的空白区域，它可通过FRAMESET元素的FRAMESPACING属性设置：

<frameset framespacing=number>

可通过FRAMESET元素的BORDERCOLOR属性设置窗框边框的颜色。颜色可用十六进制值或预定义颜色名给定：

<frameset bordercolor=color>

默认情况下，当窗框不足以显示整个网页时自动出现滚动条，反之滚动条自动消失。也可以通过FRAME元素的SCROLLING属性使其一直显示或不显示（默认值为auto）：

<frame scrolling=yes ｜ no ｜ auto>

四、图象（Image）

对多媒体的支持是HTML非常重要的一个方面。现在人们可以在HTML文档中嵌入图象、声音和视频剪辑文件，还可能让文字运动起来。

图象元素IMG已成为第二重要的HTML元素（仅次于锚元素A）。现在通过IMG元素不仅能够支持图象和传统意义上的多媒体，而且允许嵌入客户端图象映射（Client side Image Maps）和VRML文件等。

1．基本用法

图象元素IMG用来将图象嵌入HTML文档。嵌入的图象称为内联图象（In-line image）。

IMG元素需要使用SRC属性来指定图象的URL：

<img src="URL">

对IMG元素来说，SRC属性是必须的。IMG元素允许放入超链接元素中，因而可通过内联图象建立对其他文档的链接。IMG元素不需要结束标记。

IMG元素的另一个常用属性是ALT，它指定对图象进行说明的一段文字，也就是浏览器尚未完全读入图象，或浏览器不支持内联图象，或用户为加快浏览速度时将图象置为不显示时，在图象位置显示的文字。在当前流行的一些浏览器中，将鼠标指向图象时，会以类似于工具提示的方式弹出ALT文字。

<img alt="Text">

还可以使用BORDER属性给图象添加边框和指定边框线的厚度。

<img src=URL border=number>

2．图象质量控制

为了加速文档显示过程，可使用IMG元素的WIDTH属性和HEIGHT属性来重新定义图象的尺寸：

<IMG WIDTH=value HEIGHT=value>

另一个控制图象质量的属性是LOWSRC。使用此属性可以在同一位置显示两个图象：

<IMG SRC="highres.gif" LOWSRC="lowres.jpg">

不识别LOWSRC属性的浏览器将忽略它，只加载图象highres.gif。但Netscape Navigator等浏览器则会在第一遍读入文档时加载图象lowres.jpg，然后，当文档和全部图象都已完全装入时，再扫描第二遍，并在同一位置显示图象highres.gif。这样，用户开始可以较低分辨率看到图象，如果愿意，再以较高分辨率（可能尺寸也较大）细看同一图象。

3．图象对齐与布局

IMG元素的另一个重要属性是ALIGN，它指定图象的对齐与布局方式：

<img src=”URL” align=left ｜ right ｜ top ｜ texttop ｜ middle ｜ absmiddle ｜ baseline ｜ bottom ｜ absbottom>

ALIGN=left和ALIGN=right使图象浮动，并向页面窗口左侧或右侧对齐。此时图象附近的文本则相应在图象右侧或左侧环绕。其他属性值则指定图象与文本的相对对齐方式（垂直方向）。

4．图象映射

IMG元素的ISMAP（意为is map）属性将图象指定为图象映射（Image map）。图象映射是其某些区域可映射到URL的图形，通过点击图象映射的不同部位，可从同一图形访问不同的资源：

<A HREF="http://www.bh.com/htbin/imagemap/sample">
<IMG SRC="sample.gif" ISMAP> </A>

在HMTL文档中使用图象映射时，控制文档访问的HTTP服务器必须正确安装控制图象映射特性的CGI软件。也就是说，文档必须能够访问图象映射软件，而图象映射软件则应指向定义图形热点（Hot-spot）的 .map文件。

因此，人们又开发了较为简单的图象映射，称作客户端图象映射（Client-side image maps），作为HTML的延伸。它允许浏览器自行处理图象映射，可以通过映射关系访问HTML文件和FTP等机制的其他文件，而不需服务器端软件支持。

使用客户端图象映射时，必须给IMG元素添加USEMAP属性。USEMAP属性还可以与ISMAP同时使用，以指明图象可处理为客户端图象映射，也可处理为服务器端图象映射。USEMAP的参数指定所用图象的位置，其格式类似于锚元素的HREF属性。如果USEMAP参数以 # 号开始，则表明与IMG标记处于同一文档：

<IMG SRC="../images/tech/pic1.gif" USEMAP="maps.html#map1">

图象的不同部位用MAP元素来描述。也就是说，MAP元素说明图象中的每一个希望建立链接的部位，并指明链接关系。

客房端图象映射此处不作详细介绍，请参考拙著《Web技术大全》或其他相关文献。

五、音频和视频

1．文档声音

BGSOUND元素可为HTML文档创建背景声音。声音文件可以是采样声音（.WAV或 .AU格式）或MIDI音乐（.MID格式）：

<BGSOUND SRC="start.wav">

属性LOOP可指定声音播放的次数。如果取属性值为-1或INFINITE，则声音一直播放下去，直到离开内嵌BGSOUND标记的页面。

Mosaic支持SOUND元素来播放内联声音，它只允许 .WAV格式的声音：

<SOUND SRC="filename.wav">

SOUND不是背景声音，它可放置于HTML文档的的任何地方，只要声音文件所处的位置在浏览器窗口中可见，Mosaic就开始播放声音。

SOUND元素也可通过LOOP属性设置为背景声音。

2．多媒体文本

在HTML文档中可以使用EMBED元素嵌入多媒体文本。它支持的基本属性为SRC：

<embed src="URL">

EMBED中可以插入各种形式的多媒体文件（实际是各种对象），包括电影（movie）、声音（sound）、虚拟现实语言（VRML）对象等等。

浏览器通过插件（Plug-In）来播放EMBED嵌入的多媒体文本。因此，使用前必须将插件安装正确。

EMBED对于不同的插件具有不同的属性。

3．内联视频

MSIE允许用户将 .AVI视频剪辑文件嵌入HTML文档。它定义了IMG元素的DYNSRC属性（意为Dynamic Source），用来插入 .AVI文件：

<IMG DYNSRC="video.avi" SRC="TheEarth.gif" WIDTH=50 HEIGHT=50 LOOP=INFINITE ALIGN=RIGHT>

DYNSRC属性用来指定视频剪辑文件的URL，同时需要使用SRC属性来指定一个静态图象的URL。该图象可理解为该视频的“封面”，在浏览器尚未完全读入 .AVI文件时，先在 .AVI播放区域显示该图象。不支持视频剪辑的浏览器会忽略DYNSRC属性，而在相应位置显示SRC所指定的图象。

使用视频剪辑时，IMG元素还可使用START、CONTROLS、LOOP、WIDTH和HEITH等属性对视频剪辑文件进行控制。

4．VRML

给IMG元素扩充VRML属性后，可将VRML的三维世界嵌入HTML文档：

<IMG SRC="picture.gif" VRML="world.wrl" HEIGHT=250 WIDTH=300>

这是MSIE的做法。Netscape支持VRML的方法是使用EMBED元素将其嵌入。它甚至支持用锚元素A链接到VRML文件，并能正确打开。Netscape Navigator还可以直接打开VRML文件。

抱歉！以上两讲我们几乎是罗列HTML元素的基本用法，而没有篇幅来介绍示例和实用技巧。也许我是贪大求全，事实上我是希望把尽可能多的内容介绍给您。如果希望掌握这些内容，还得多多实践哦！使用第二讲向您介绍的工具，把这几次的内容作为参考，实践再实践，您便会很快成为高手的！

微信 复制链接 X