第五章 静态HTML网页制作

5.1 HTML文件编辑环境介绍 5.1.1常用名词

在学习网页制作之前，我们有必要先了解一些常用的概念。 （1）WWW万维网 “万维网”（Word Wide Web）简称WWW，这是号称除了报纸、广播、电视外的第四大传播媒体。

（2）Browser浏览器

要观看万维网上的内容，一个必要条件是要有一个万维网浏览器。目前常用的浏览器是微软（Microsoft）公司的Internet Explorer（简称IE），网景公司（Netscape）的Communicator（通讯家），还有Opera等。

（3）WebPage网页

当你浏览一个网站时，网站中的每一页都称为一个“网页”。网页是用来显示各种数据与信息的，它由文字、图片、声音、动画等组件组成。每个网页都是一个文件，我们通过浏览器可以查看其内容。

（4）HomePage主页

当你上网浏览某个网站时，我们进入网站最先看到的网页称为“主页”，也叫作“首页”，这有点像自己家的门面一样。一般的网站管理者为了吸引上站者的眼球，都将主页做得很炫、很漂亮。

（5）Web Site网站

“网站”就是用来存放网页文件的地方，通过浏览器便可以浏览网站上面的网页。 （6）Hypertext超文本

“超文本”文件本身是一个文本文件，但其内容和一般文本文件又不一样，除了有一般信息内容之外，还有一些加注性描述用来产生特殊效果，在显示文件时，浏览器先根据加注性描述对信息内容进行处理，最后才把结果展示给浏览者。这种文件当然也可以用一般的文字编辑软件打开，但却看不到加注性描述所产生的特殊效果，因为一般的文字编辑软件不能像浏览器那样根据加注性描述对信息内容进行处理。

（7）Hyperlink超级链接

万维网能风行全球当然有其原因：美丽而动态的画面，方便而简易的使用界面，精彩而富于变化的内容，这些都是它的引人之处；但除了这些之外，它还有一个成功的利器，即它的无限的超级链接能力。譬如它具有网站内部网页间彼此连接的能力，我们称为“内部超级链接”，还可以连接到其他网站，我们称之为“外部超级链接”。

网络具有无限的连接性才有它的意义，若没有连接功能，网站就像一座孤岛。 （8）HTML超文本描述语言

HTML(HyperText Markup Language)，是一种专门用来设计网页的计算机语言，HTML对网页上的文字、图片等信息出现的位置、形式、顺序及关系都使用标记语法做出定义，同时对网页间加注超级链接关系。一般用HTML语言编写的网页文件，其扩展名都是.htm

或.html。

（9）TCP/IP通讯协议

TCP/IP（Transport Control Protocol/Internet Protocol，传输控制协议/Internet协议）是一组通讯协议的名称，而此通讯协议则是Internet中成千上万台计算机间沟通的语言，就好像人类的使用的语言一样，Internet上的计算机主机就借着TCP/IP而能互相沟通，并且交换彼此音的文件数据。

（10）IP地址

在Internet上每一台计算机之间要进行数据交换时，必须通过TCP/IP通讯协议，并且每一台计算机都最少有一个专属的IP地址，而要进行数据交换时，必须知道双方的IP地址，就好像打电话一样，必须知道电话号码。IP地址的长度为32位，分为4段，每段8位，用十进制数字表示，每段数字范围为0～255，段与段之间用句点隔开。例如159.226.1.1。 （11）DNS域名服务器

由于IP地址是由四个8位的数字组成，并不容易记忆，因此我们大多使用域名（Domain Name）来代表IP地址，为了将Domain Name转换成对应的IP地址，就必须经由DNS服务器来进行转换，就好像查字典一样，将Domain Name转换成IP地址。

（12）URL统一资源定位法

网页上的超级链接是让你取得Internet上的网络资源，而这些网络资源的服务单位的IP地址（Internet Protocol Address，简称网址），是国际间是唯一的，我们将这些独一无二的身份证称为“统一资源定位法”（Universal Resource Locator，简称URL）。URL的格式如下图所示：

图1 URL

［其中］：

① protocol：为网络资源的通讯协议。常用的网络资源通讯协议如下：

http：HyperText Tarnsfer Protocol，超文本传输协议，通过这种协议，才能显示出万

维网上的各种媒体效果。

ftp：File Transfer Protocol，是一种文件传输协议，用途在于使Internet上的主机可以交换文件数据。

mail：电子邮件，经由网络系统将文件传送至远程的计算机主机。 ② host.domain：为所联机网络资源的主机名称。

如：阜阳师范学院网站的地址为：

图2主机名称 ③ path/filename：网络资源存放在网站内的路径及文件名称。

如阜阳师范学院文学院的网址为：

图3 路径及文件名

［说明］：通讯协议和主机名称的英文字母可以不分大小写，但路径及文件名称的英文字母的大小写被视为不同的字符。

表1 网域类型代码和地区代码

初期规划

中期实际行动

后期维护

图3 网站设计整体流程图

5.1.3HTML文件的生成、编辑与查看

编辑网页有多种语言，目前最基本最常用的是HTML，HTML（Hyper Text Markup Language）是一种文件标记式的网络语言，现在已经成为Internet上专门用来制作网页文件的标准语言。由于HTML文件是一个纯文本文件(Text File)，因此要产生HTML文件很简单，只要使用一般的文本编辑软件就可以了。在Windows环境下可以使用记事本、写字板、Word或使用网页制作专用软件如FrontPage、Dreamweaver等，一旦文件的内容编辑好了，以扩展名.htm或.html方式存盘，就可以了。编辑好之后想查看生成网页的效果，可以直接双击它就行了，这时计算机会自动使用IE浏览器打开HTML网页文件。

现在给大家演示一下怎么用这些软件编辑HTML文件，也就是网页文件，并比较一下它们的优劣。

其实目前专门用于HTML文件制作的软件很多，有的有自动提示功能，这里给大家推荐ASPstudio，它还可以方便以后大学习动态网页的制作。

5.2 HTML编辑文字图片技巧

HTML是制作网页最基础的语言，Internet上所有的Web网站的网页，95%以上都是以HTML格式来制作的。当然HTML一般只能生成静态的网页，以后大家可能会使用ASP、JSP或PHP等语言来制作动态的网页，但这些ASP或PHP程序经服务器解译之后，最后呈现在客户端浏览器上的还是HTML格式的，更为重要的是不管是ASP、JSP或PHP或其他什么语言，一般都要和嵌入到HTML文件之中，或者自己被HTML嵌入。因此，有人认为使用Frontpage或Dreamweaver等所见即所得的网页编辑软件，就可以不必学习HTML语言了，这是错误的，当然，如何你只想制作一个静态的网页，用这样的软件就可以了，甚至可以不学习HTML语言，但这种做法只能说是沙堆上建高楼，根基太差，只知其然不知其所以然，以后几乎没有进步发展的可能。

5.2.1 HTML基本语法

标记

一份标准的HTML文件是由标记（Tag）和欲显示在网页上的内容所组成。欲显示的内容当然包括文字、图片、图像、声音、视频等元素；而标记（Tag）的

作用是标记网页元素在网页上出现的位置、形式、顺序及元素间的关系。在HTML中文件中，有些标记规定必须是以“＜tagname＞”符号开始，而以“＜/tagname＞”符号结束，我们称之为“成对标记”；有些标记允许单一标记出现在欲显示元素的前面或后面，这是非成对标记，其基本格式有下列两种写法：

①是标记名称，用来表示这是标记的开始，标记前面加斜线表示这是标记的结束。

②displaydata代表欲在网页上显示的内容。

③在标记内的property（属性）用来改变displaydata的属性值。之前的内容都按property的值来显示。

④在设定value值时不一定要用双引号将属性值的头尾括起来，但建议最好用双引号，以免字符串中有空白而产生错误。

⑤不同标记所拥有的property（属性）不一定相同，而且书写几个属性时，没有前后次序关系。

⑥每个property（属性）都有其默认值。因此，标记内若省略某属性不写，则会使用默认值。

结构

HTML的整体结构。人类的身体是由头部（Head）和身体（Body）两大部分组

成。HTML文件的整体结构也是如此。其中头部（Head）就是指文件的标题，

以开头，以结束，中间用来定义标题的内容，身体是以开头，以结束，两个标记之间用来放置欲显示的网页元素及其标记。其整体构架如图所示：

图4 HTML的整体结构

标记

一个完整的HTML文件是以标记开始，用来告诉浏览器这个文件是使用HTML格式编写的；最后使用标记结束，用来告诉浏览器此处是HTML文件的结束点。由图4我们可以看到，~两者之间包含两个主要部分：一个是HTML文件的头部，我们称之为“标题设定区”，放置一些有关该文件的识别数据，前后使用~标记框住；另一部分是主体我们称之为“HTML网页文本区”，是呈现给浏览者观点的文件内容及其格式，前后使用~标记住。

标记

标记主要用来提供此份文件的整体信息。包括标题栏名称、文件的网址、所采用的语种等。标记用来告诉浏览器这是文件标头的开始点；最后使用标记告诉浏览器此处是文件标头的结束点。但要记住~必须成对出现。这对标记之间可以使用下列标记：

（1）通过~来设定标题栏名称。

（2）通过来设定文件中超级链接的网址。

（3）通过说明本文件使用什么语种，如本例是使用国标码。

（4）通过来加入背景音乐。音乐文件的格式只能是.mid、.wav或.asf格式的。“URL”为音乐文件的全路径，如为本地音乐，格式为：“src="file:///D:\work in fuyang\语言文字信息处理教案\第5章\d067.WAV"”

（5）通过可以在HTML文件任何地方加上注释。在一些关键地方加入注释是一个非常好的习惯。

标记

~必须成对出现，之间所夹的文字就是你在浏览器标题栏所看到的标题名称。但要记住：~必须出现包含在~标记之间。

标记

由于Internet的范围涵盖全球，因此也就面临英文、中文、法文、日文等语种在显示文字上的问题，我们可以在HTML文件中通过标记来设定网页所属的语种。当然，这个标记还可以指定其他附加信息，这里不再多提。

①非成对标记，该标记必须写在~之间。

②本例作用是指定文件格式为text/html，语种是大五码（charset=big5） ③其他作用请参考HTML手册。

标记

这个标记的作用是在网页中加入背景音乐，其语法如下：

说明：

①非成对标记，必须写在~之间。

②src的值为“URL”，用来指定音乐所在位置 ③loop的值为“playtimes”，用来设定音乐播放次数，缺少值为1次，若值为-1，则表示播放无限次。

④该标记只在IE中有效。

⑤音乐文件的格式只能是.mid、.wav或.asf格式的。“URL”为音乐文件的全路径，如为本地音乐，格式为：“src="file:///D:\work in fuyang\语言文字信息处理教案\第5章\d067.WAV"”

5.2.2设定段落与对齐

在HTML文件中，可以配合各种不同的标记来美化文字，如：设定文字的颜色、大小，字体等。

标记

到之间是HTML文件最重要的部分，是真正呈现到浏览者面前的图文内

容及其格式，的语法如下：

说明：

bgcolor：设置背景色 background：设置背景图片 text：设置文本颜色

link：设置链接文本颜色

alink：活动链接颜色值

vlink：访问过的颜色值 注：表示颜色：（1）用red blue yellow green black white cyan magenta

（2）用#rrggbb表示：r、g、b使用16进制数

如品红：#880088、青色：#008888

省略全部属性，则网页背景色为白色，文字为黑色。

前面提到，到之间的内容将按照其格式呈现到浏览者面前。我们现在在这中间输入一些内容来试试。

例1：

原因是我们的HTML文件并没有对这些内容加任何美化的标记。要想使浏览器按我们排版的样式显示，只要在内容的前后加上下面的标记就可以了。

标记这个标记可以让文字的编排按我们设定的方式显示，也就是说浏览器里显示的文字和我们在HTML文件里的排版方式一模一样。注意

~

要成对出现在和内部。来试试。

标记

是换行标记，属于非成对标记。一般都是配合标记使用，使得网页的段落分明。如我们可以使用它来实现上面标记实现的功能。试试。实验结果我们发现，基本上实现了我们的要求，但每段开头没有空两格，尽管我们在源代码中手工加入了空格也不能让浏览器显示空格。这是因为要让浏览器显示空格，必须使用空格的特殊符号句柄“ ”。在网页中要显示特殊符号，需要使用句柄并且在句柄的前面加上＆作为开头，常见特殊符号的句柄如下表。

表2常见特殊符号句柄

①与组成成对标记。一般配合使用，让网页的段落分明。 ②会使接下来的文字从新的一行开始显示，并且每个用标记所形成的段落之间都会自动空一行，不会产生空行。也可以省略不写。 ③align属性且为设定文字的对齐方式，其value属性值可设为：

Left：左对齐；right：右对齐；center：中对齐。标记功能是将图文置中对齐，必须与成对出现。而„和„的差别在于后者会跳出一个空行，前者不会。5.2.3设定文字格式标记此为文字缩小一级标记，其后到之前的文字会缩小一级，此标记应该成对出现。 标记

与标记相反。 试试！

~

标题标记 说明：

①一般用来设定标题字的字体大小，使得标题字更加醒目，但它除了会改变字体大小之外，字体还会依大小自动加粗以提高浏览者的注意力，作为标题的文字会独占一行且上下各有一空行。

②

最大、

最小，此标记应该成对出现。

③此标记中可以加入align属性来控制文字对齐方式。字体标记在一份HTML文件中,设定字体大小当然可能使用前面的三个标记，和甚至还可以嵌套使用，但毕竟不太方便。因此HTML另外提供来对整个段落的文字大小作设定，而且不会像

~

那样将字体加粗并将文字上下空一行。字体标记除了可以设定字体大小之外，还通过face属性来设定字体和种类，通过color属性来设定文字的颜色，其语法如下：

①应与成对使用。②size属性，用来设定文字的大小。它的值为1~7值越大字体越大。默认值为3。也可以使用相对大小设定，例如size=”+1”或size=”-1”表示将目前字体大小上升一级或下降一级。③face属性，用来设定文字字体的种类（如：face=”楷体_GB2312”）。 ④color属性，用来设定文字颜色。正表是常用颜色名称（color=”green”）：文字的特殊标记 见下表：表3 常用的文字特殊标记

5.2.4在网页中插入水平线一个HTML文件通过来产生段落，可能让文件的段落层次分明，让浏览者知道彼此间哪些是属于同一个部分的内容。但是一张网页可能有标题以及不同性质的内容，单靠段落标记来区分，层次上不够清楚。此时可能通过

---

标记加入水平线来加以区分，让浏览者很快区分出不同性质的内容。

---

标记的语法如下：①非成对标记②属性说明如下:align: 对齐方式 center、left、right，默认为centerwidth: 左右长度，默认为窗口宽度，可用60%来指定其长度为屏幕宽度的比例 size: 上下宽度，也可以用%指定宽度 color: 颜色noshade: 无阴影5.2.5制作“跑马灯”在HTML标记中有个会产生简单特效的标记，人们俗称之为“跑马灯”。 语法如下：

5.2.6加入项目编号或符号【无序标签】1. 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3„一直延伸下去。  2. 我们先来看看“无序列表标签”如何使用：其中

• 标签即为“无序列表标签”，每增加一列内容，就必须加一个
• 。

  
  
  3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号

  形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）：

  【有序标签】

  1. 接下来，我们来看看“有序列表标签”如何使用：

  其中

  1. 标签即为“有序列表标签”，每增加一列内容，就必须加一个
  2. 。

     
     
     2. 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属

     性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：

     3. 另外，我们亦可指定序列起始的数目，其方法为：

     5.2.7插入图片

     在一个网页中，若能适时地插入一些图片、音乐、影像或是将某些文字语句改用图片来表示，不但使得该网页一目了然，而且生动引人。事实上几乎每个正式的网页都有图片。 先对图片文件有个大体的了解。

     一般而方言，我们见的图片格式最多的有.bmp、.gif、.jpeg等。这里.bmp是没有压缩的，所以文件很大，传输较费时，所在很少在网络上使用。

     （1）GIF：这种格式的图片只有256色，比较适合线条分明的图片。如小图标、按钮等，不适合储存照片或颜色较多的实物图片，另外这种格式可以用来制作简单的动画文件。

     （2）JPEG：可以储存全彩的图片或者灰度图形，与GIF适用类型正好相反。

     现在我们来向网页插入图片。语法如下：

     ①非成对标记。 ②各属性说明如下表。

     加入图片边框（border） 图片提示信息（alt）

     控制图片大小（width/height） 设置图片位置（left/center/right）

     注意：并不能实现图片的居中对齐，这是HTML语法的一个BUG，要实现图片居中对齐，须要用到

     标记，应该这样做：

     或者

     文字与同一行的图片对齐方式（top/middle/bottom） 文字、图片与图片的间隔（vspace/hspace）

     跑马灯上加入图片（） 如何在网上抓取图片

     5.2.8加入音乐控制组件

     前面我们学过加入背景音乐的标记，它必须置于标记内，而且它是否播放、播放次数不能由浏览者决定，它只限于midi、wav、asf格式的文件，这些是其缺点。为克服这些缺点，我们可以使用音乐控制组件标记。它可以让浏览者控制音乐的音量、播放次数、停止等。语法如下：

     说明：

     非对成对标记，应放在内。

     不再像那样受格式限制，也可以用、空格等来设置放置位置。

     5.2.9为网页加上背景图片

     5.3表格的制作

     前面我们讲到了如何调整文字、图片等元素在网页上的显示位置，使用的是align=left/center/right和，但它们的功能是很有限的。要想在网页中使文字、图片等信息更灵活的定位，最好是使用表格。

     HTML的表格功能

     表格（Tables）由多个水平行（Rows）和垂直栏（Colunms）组成，表格内的小方框为储存单元（Cells）。当你在设计一张网页的时候，可以在适当的地方插入一个表格，然后将文字、图片等组件放入指定的储存单元中，也可以在同一个储存单元中放入文字、图形等组件。这样做的好处是可以让数据限制在某个范围内显现，使得网页内的信息看起来井然有序。

     第1行 →

     第2行 →

     第1栏

     ↓ 第2栏 ↓ 第3栏 ↓

     标记
     
     上图为2×3表格的基本结构，此表格对应的HTML语法如下：

     语法说明：

     练习：利用上述所学的标记，制作一张含有姓名、性别、QQ号码的通讯簿表格。结果如下图。

     昵称 囧囧有神 凤栖梧 ＜愛國者搗蛋 咑尐僦鋌帥

     性别 女 女 男 男

     表格标题

     一张表格若缺少了标题，常常无法实时知道该表格的意义，因此大部分的表格都会在表格的上面加上标题文字，让人一开始就知道该表格的功用。在HTML中是通过

     说明： ① 此为成对标记，必须置于

     标记内，最好紧跟在的后面。 ②align属性：设定标题对方方式，有三种取值：left/center/right。 ③valign属性：设定标题位置，可以和align属性连用，有两种取值：
     
     top: 将标题置于表格的上方（默认） bottom: 将标题置于表格的下方。

     QQ号 447543891 157041432

     117520955 253346901

     美化表格

     我们可以加上一些属性来美化表格，常用属性见下表：

     表格中插入图片

     办法和在表格中加入文字是一样的，只要在

     之间加入便可以将指定的图片放入到存储单元格内。
     
     练习：试试使用border、cellspacing。

     表格的特殊变化：合并单元格

     先看一个简单的：单元格纵向跨多行，如下图，怎么做？

     这就是单元格的跨行或跨列的问题，就须要在

     标记来设定表格的标题的，其语法如下：

     ~	~	或	~	中使用rowspan指定当前单元格跨几行，使用colspan指定当前单元格跨几列(span:范围)，相当于Word中的合并单元格。我们来看源代码。 第二个简单的，单元格横向跨多列，如下图： 第三个稍微复杂的，表格内既有跨行又有跨列，如下图： 5.4超级链接 何谓超级链接（Hyperlink） 当你在浏览网页时，移动鼠标到网页的某些文字或图片上，光标马上变成一只小手，就表示该处有个“超级链接”，在该处单击鼠标左键，就可以立刻连接到这个“超级链接”所设定的位置去浏览。这些位置包括：某个网站、某个文件、某人的Email地址等等各式各样的Internet服务。 超级链接是网页最吸引人的地方。适当地插入“超级链接”可以让你的网站无限地延伸，充分利用网络上其他资源，来增加网站本身的广度与深度。下面我们就来讨论在网页中插入超级链接的方法。 标记 想把某些文字或图片设定为超级链接，必须使用标记，a是anchor（锚）的第一个字母，其语法如下： 说明： ①必须成对使用。 ②URL网络资源参数可以下列项目： 网站：URL为指定网站的地址。 网页：URL为指定网页的地址，甚至可以是本机的网页，其语法为： 表格1 下载文件： 如果连接的文件的后缀名不是html，会将连接的文件下载到浏览者的计算机。如：小狗儿 同份文件的书签 如果网页的长度超过屏幕的上下距离，浏览者在某个项目上按一下，便 直接跳到该项目的内容，省去滚动条的动作，此功能须有后面的name属性相配合。如bookmark.htm。 其他文件的书签 原理同上。 ③name属性 用来设定bookmark的名称， ④position属性 这是一个很重要的属性，用来指定网页的放置位置，有如下几种取值： target=”_self” target=”_blank” target=”_top” target=”_parent” 这里先了解一下，后面我们会结合实例来试试如何使用它们。 练习：用超级链接制作一个网页，从这里能快速打开阜阳大学各院系网站主页。 提供下载 格拉条 链接到Email 请给我写信 设定书签链接 bookmarkmemo，而bookmarkname代表书签名称。 Step2：跳到书第书签位置的超级链接语法 插入下载链接 标记除了可以用来连接其他网页之外，还可以连接动画文件，声音文件等。制作文法很简单，只要把URL设定为指定的文件名就可以了。当浏览者点击这个超级链接时，可以直接显示或下载到自己电脑硬盘中。 提示：除了.htm、html、.asp文件外，其他文件都可以通过此方式提供下载。 一些较大的文件，最好先压缩再上传，这样可以尽可能地减少浏览者等待的时间。 链接特效 （1）提示性文字 ★文学院 （2）鼠标悬停提示 ★文学院 （3）定制浏览器窗口 'scrollbars=yes,channelmode=yes,resizeble=yes,status=yes,toolbar=no,menubar=no')">Open 更多特效请上网查找！ 5.5表单的制作 “表单”是什么？“表单”就是提供给浏览者输入数据的地方，当数据输入完毕后点击“确定”按钮，表单内的数据会传送给服务器。服务器会根据输入的数据做必要的处理。所以，表单就是网站与浏览者之间的桥梁，以此达到浏览者与网站管理者之间的互动。我们从一个网站上看表单的例子。http://www.fync.edu.cn:8080/xiweb/zwx/htdocs/index.asp 表单中有单行文字框、单选框、复选框、下拉式清单、多行文字框、按钮等常见的6 种元素。好，我们现在学习如果生成这些表单元素。 第一个表单，“单行文字框与密码框”，运行效果见这里：第一个表单，单行文字。 第二个表单，“单选框”，运行效果见这里：第二个表单，单选框。 第三个表单，“复选框”，运行效果见这里：第三个表单，复选框。 第四个表单，“下拉式清单”，运行效果见这里：第四个表单，下拉式清单。 第五个表单，“多行文字框”，运行效果见这里：第五个表单，多行文字框。 第六个表单，“按钮”，运行效果见这里：第六个表单，按钮。 下面我们对表单做个小结：表单由标记来定义，各表单元素的标记置于其内部。这些元素标记有： ：可以生成单行文字栏（单行文字、密码文字、隐藏文字）； 单选框、复选框、按钮。 ：可以生成下拉式清单。 ：可以生成多行文字框。 最后，我们来为表单做个美化的工作。 我们可以使用制作表格的标记，将表单内的字段做有顺序的排列，如果以此方式来排列表单内的字段，一张网页下来，不知道要打了多少行的程序，不但费时且不经济。所幸，HTML提供了两个标记，和。标记可以制作一个字段外框，将表单内同性质的字段框起，再利用标记设定此字段外框的标题名称。 我们先来看一个范例的效果，第七个表单，表单外框标记。 现在来分析一个这个范例的源代码，之后我们知道： 可以用~标记将你认为是同一类型内容的表单元素括起来作为一个区块，并且可以在里面加上“区块名”来为每个区块取个标题名称。 进一步美化：边框控制 （1）设定边框大小 （2）设定边框粗细颜色 （3）同时设定（1）和（2） 【框架的基本概念】 1. 首先，各位先看看下边这张图，我将利用这张图来作解说，这样子，讲起 来可能会清楚一点。 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、 c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？ 2. 原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分 割成这样，也就是说，所有Frame的标签，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其他档名也是可以的。） 3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html 档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的 index.htm 档啦！） 【开始分割】 1. 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看 刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？ 2. 各位会发现，奇怪，在上面的语法中，怎么都没见到熟悉 的身影？呵呵...没错，它已经被待会儿要加进去的 标签给取代了！也就是说，如果我们要分割画面，就要先用标签告诉电脑说：‘喂！我要开始分割了！’此时，是派不上用场的，所以躲到一旁凉快去了！ 3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图： 4. 在中，我们要告诉电脑到底是要左右分（COLS）？还是上下分 （ROWS）。一开始我们是左右分，所以我们写成。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随视窗大小而变(如果写成“COLS="*,120"”会怎样？)。如果要上下切分，则应写成：“ rows="120,*" ”。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。 5. 然后，再复杂一点，分左右切分，再把右边的框窗割成上下两个画面。如 下图： 6. 看见了没？原本的（在第 3 点的语法中） 被另一组所取代了！所以要注意喔！第二组是被第一组所包围起来的喔！（乱七八糟了对不对？） 7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。 21 【其他标签参数说明】 1. COLS="120,*" 就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！ 2. ROWS="120,*" 就是横向切割画面，也就是将画面上下分开，切法同上。 3. frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。实在想调整，可用framespacing，但是一般不用调整! 4. framespacing=5 表示框架与框架间的保留空白的距离，以免看起来太挤。 1. SRC="a.htm" 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚） 2. NAME="1" 设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。 3. frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 4. scrolling="no" 设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。 5. noresize 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。 6. marginhight=2 表示框架高度部份边缘所保留的空间。 7. marginwidth=2 表示框架宽度部份边缘所保留的空间。 【相关用法】 22 1. 使用方法：请换有支援Frame功能的浏览器 2. 标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使 用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。 1. 使用方法：显示内容 2. 标签解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希 望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！ 1. 使用方法：奇摩站 2. 标签解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站， 竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！ 23