1、第 1 章 网页制作基础使用浏览器上网时，你看到的一幅幅精彩画面，一般都是由服务器发送给浏览器，并由浏览器解释的 HTML 文档。那么， HTML 文档中有哪些内容，它们的格式是怎么样的，这是本章要向读者介绍的内容，它也是学习以后各章内容的基础。本章内容主要包括： Internet 及 Web 的概念 超文本标记语言 常用的主页制作工具通过这一章的学习，要求读者：了解 Internet 及 Web 的概念；熟悉 HTML 文档格式和常用标签；了解常用的主页制作工具。1.1 Internet 信息服务1.1.1 Internet 简介Internet(因特网 )是一个通过网络设备把世界各国的计算
2、机相互连接在一起的计算机网络，在 Internet 上，人们可以利用任何两台支持 TCP/IP 网络协议的计算机进行通信。所谓协议是指计算机通信所使用的语言和规则。Internet 还支持多种流行的程序，包括World Wide Web。World Wide Web(万维网 )是在因特网上运行的全球性分布式信息系统，它是一个抽象的信息场所，在这个场所中，包含了几十乃至几百万台通过超文本传输协议（HTTP）提供信息服务的 Web 服务器，当用户使用浏览器向这些服务器发出请求时，服务器将把响应信息发送给浏览器，最后由浏览器解释并显示。你正在使用的计算机可能是一台 Web 服务器，也可能是一台安装有
3、浏览器的普通计算机，这取决于这台计算机中安装了什么程序，以及这台计算机接入到 Internet 的接入方式，如果你的计算机不能让其它人访问，那么就不能成为真正的 Web 服务器。即使这样，你还是可以在计算机上安装一个称为个人 Web 服务器的程序来运行本教材中的所有实例。VBScript+ASP 动态网页制作 2 FTP(File Transfer Protocol 文件传输协议 )，用于将文本、二进制文件和图形从一台计算机传输到另一台计算机，有了它，你可以将编写好的网页传送到能被其它用户访问的Web 服务器上。HTTP(HyperText Transmission Protocol 超文本传
4、输协议)用于定义在 Web 浏览器和Web 服务器之间如何传送数据。在服务器向客户机传送文档之前，客户机和服务器间需要建立 TCP 连接，之后才发送 HTTP 请求信息，服务器接收到请求之后就给 Web 浏览器回送一个 HTTP 响应信息，最后服务器断开 TCP 连接。HTTP 协议主要用于定义信息的格式。1.1.2 Web 出版把一些文字、图片、声音等内容组织成一个或多个 Web 文档，放置在 Web 服务器上，供用户在能与该服务器相连的机器上访问，这一过程称为 Web 出版。Web 出版的方式主要有两种，一种是建立一个独立的 Web 服务器，这需要较高的代价，另一种是在其它服务器上开辟一个
5、空间，通过链接的形式来访问你的 Web 页。幸运的是，现在有许多站点（像网易、首都在线等）提供免费空间供大家建立网页。1.2 超文本标记语言当用户阅读一般文本文件时，一旦遇到不是很清楚的内容，就需要另外打开其它文件，或翻转到本文件的其它位置查看，查看完成后可能已经忘记应该回到哪里继续阅读了，这样给阅读带来很大的不便。为此，我们很希望有一种方法能在需要时自动转到相关内容，并方便地返回。超文本就是为此而设计的。一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。通常超文本使用超文本标记语言来描述。超文本标记语言(HyperText Makeup Langua
6、ge，简称 HTML)是一种用来创作万维网页面的描述语言，它使用 HTML 标签来定义文档的格式、组成和链接关系，供浏览器解释执行。所谓 HTML 标签，由 3 部分组成：左尖括号 “” ， “标签名称” ，和右尖括号“” 。标签通常是成对出现的，分别称为“开始标签”和“结束标签” ，结束标签的左尖括号后加一个斜杠符号“/” 。在各种 HTML 标签中，常常还可以定义一些属性，这些属性用于指出文档元素的一些特性，如背景颜色、字体大小、对齐方式等，指定文档元素属性的附加信息一般放在相应的“开始标签”中。由于 HTML 文档是一种没有格式的文档，也称为 ASCII 文件。因此，HTML 文档可以使
7、用任何一种文本编辑器来编写，如记事本、写字板和 WORD 等。1.2.1 第一个 HTML 文档第 1 章 网页制作基础 3 让我们先来看一个例子。【例 1-1】一个简单 Web 页我的第一个 WEB 页正文内容写在这里将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为 htm或 html 的文件后，在文件夹窗口双击该文件图标，就可看到如图 1-1 所示的结果。图 1-1 一个简单的 Web 页从例出可以看出，一个 HTML 文档的一般结构如下：1.一般形式头部主体部分2.说明：开始和结束标签VBScript+ASP 动态网页制作 4 头部信息，可以包含标题 (TITLE)
8、，媒体环境(META)等说明信息,客户端脚本也可放在这一部分。网页主体部分。它也有一些属性，形式为：其中： BGCOLOR 背景颜色text 非链接文字的颜色link 链接文字的颜色alink 正被点击的链接文字的颜色vlink 已经点击(访问)过的链接文字的颜色如果要使用背景图像，语法为：在 HTML 文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。3.调试 HTML 代码总有一些时候会忘了输入某些代码或敲错某些代码，这时 Web 页可能会变得非常滑稽。通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在
9、的错误，这一过程称为调试。对于 web 页的调试没有多少技巧可言。但要强调的一点是，应该仔细地观察显示的结果或系统给出的错误信息，从中判断出可能错在哪里，再去检查文件的内容，而不是在没有看清出了什么错误前就急着查文件内容，这样往往很难快速找到错误的位置。常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。如例 1-1 第 3 行中若结束位置的 遗忘了或写成，则其后的内容将显示在窗口的标题栏。只要仔细观察显示结果，不难发现其中的错误。1.2.2 文字修饰与布局1.修饰方法(1) 标题文字(Header)有时，希望将某些文字显示成像文章中的标题一样，这时，可使用 H 标签，
10、形式如下：作为标题的文字其中 n 为 1 到 6 的数字，根据 n 的大小不同，将显示出不同大小的黑体字。H1 最大，H6 最小。标题文字独立占一行，不受段落标记的影响。(2) 文字大小(FONT SIZE)形式： 需显示成 n 号大小的文字其中：n=1,2,37。第 1 章 网页制作基础 5 SIZE 的默认大小为 3，在此基础上，可以用-2，-1 ，0，+1 ，+2 ，+3 或+4 代替 n。另外，可以用指出缺省字符大小，用 或来指出字符相对于周围字符的大小。(3) 文字颜色(FONT COLOR)形式：需显示成指定颜色的文字其中：rrggbb 为 16 进制值，表示组成颜色的 RGB 三
11、原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb” ，对应关系为： Black(000000),Olive(008080),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsiz(ff00ff),White(ffffff),Green(008000),Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(00ffff)。(4) 定义字体(FONT FACE) ：形式：需显示成指定字体的文字其中：字体为 Aria
12、l、Times、Ms seriers 、宋体、楷体等。值得注意的是，在浏览器上是否能显示所设置的字体取决于浏览器所在的机器中是否安装了相应的字体。以上三种文字的修饰方法有一个共同点就是都使用相同的标签把要修饰的文字括起来，再用该标签的 SIZE 属性设置文字大小，用 COLOR 属性设置文字的颜色，用FACE 属性设置文字的字体。当需要同时设置文字大小和颜色时，应把它放在同一个标签中，例如，要用 6 号大小红色显示“动态网页”这几个字时，应使用如下形式：动态网页(5) 标记文字：对于文字还有一些常用的修饰，即加粗、斜体和加下划线。对此，HTML 中设计了独立的标签，使用形式如下：需要加粗的文字
13、需要显示成斜体的文字需要添加下划线的文字以上三个标签可重叠作用。如：动态网页 制作 ，将使“动态”两字加粗显示， “网页”两字加粗并加下划线， “制作”两字显示成斜体并加下划线。另外还有一些标签如： 、 、和等，但这些标签不一定被所有浏览器所支持。【例 1-2】文字的修饰文字的修饰这是标题字体 H1这是标题字体 H6这是大小为5的楷体字VBScript+ASP 动态网页制作 6 本教材讨论的是：动态网页制作这是红色的文字本例中的代码，浏览时显示结果如图 1-2 所示。图 1-2 文字修饰2.文字布局(1) 段落段落是文档的基本单位，在 HTML 中可以使用标签来指定文档中具有独立意义的段落，通
14、过设置段落标签的某些属性可以控制段落的对齐方式。浏览器在显示时，一个段落的前后将留有较大的空隙，也可以说相当于有一个空行。(2) 换行一个段落中可以包含多个行，可以使用标签来强制文字换行。一般情况行与行之间的间隔比段与段之间的间隔要小。第 1 章 网页制作基础 7 注意：如果不使用段落标签指出从哪里开始新的一段或一行，那么显示时文本就会连成一整块，而不管你在文本中输入了多少个回车符。一般情况根据浏览器窗口的宽度，当一行太长时，会自动换行。(3) 文字对齐可以以段落为单位设置文字的对齐方式，形式如下：需要按照给定方式对齐的文字其中：对齐方式有 left、center 和 right，分别表示左对
15、齐、居中对齐和右对齐。默认为 left 表示左对齐。标题文字也有相应的属性，使用形式为：需要按照给定方式对齐的标题文字 如果需要将文字或其它对象居中对齐，也可以使用标签，形式如下：要居中的文字或对象注意：标题不能作为段落的一部分，也不受段落标记的影响。(4) 预格式化文本当需要按照输入时的格式来控制换行时，可以使用预格式化文本标签，使用形式如下：这里是多行文本注意：用这一标识符标识的文本不能随浏览器窗口的宽度大小而自动换行，这在低分辨率显示器上使用是很不方便的。1.2.3 加入其它网页元素网页中除了一般的文字外，通常还有一些其它对象，如线条、图片、表格等。要在HTML 中插入各种对象，通常需要
16、指出三个内容：即标签名称、标签属性及提示信息。其中标签名称，用于指出插入的是什么对象；标签属性，用于指出该对象的显示格式及行为特点；提示信息主要指出屏幕显示的文字内容。1.插入水平线有时为了较明显地划分上下各部分的内容，在文档中间加入一些水平线，使用形式如下：其中：HR 为标签名称，它指出插入的元素为一个线条。WIDTH、ALIGN 和 SIZE都是线条的属性，其右侧为该属性对应的值。式中的宽度可以是百分比，表示占屏幕宽度的百分比，如“90%”,也可以是屏幕的象数点个数，如“222”。对齐方式可以是左对齐，中间对齐及右对齐。高度为点数。请看例 1-3。【例 1-3】水平线水平线VBScript
17、+ASP 动态网页制作 8 这里是标题 以下是正文内容本例代码浏览时显示结果如图 1-3 所示。图 1-3 使用水平线2.加入超级链接使用超文本标记语言来编写网页的主要原因是网页的内容中常常需要使用超链接，通过超链接，用户可以简单地用点击某些文字来转向到其它网页或本网页的其它位置。根据需要转向的位置不同，超级链接的形式有所不同。1) 链接到其它地址形式：提示文字2) 链接到本页的其它地方形式：提示文字其中：位置是命名的一个地方，命名形式为：内容3) 链接到其它地址的某一地方形式：提示文字4) 在新窗口打开链接形式：【例 1-4】超级链接超级链接第 1 章 网页制作基础 9 友情链接：雅虎中文网
18、易我家的生活-喜 怒哀 乐全都有有人说：“生活像一条长长的路，崎岖蜿蜒。“有人说：“生活像一束鲜花，带来了希望和成功。“有人说：“生活像一个多彩的梦，是由红、橙、黄、绿编织而成。“可是我说：“生活不是梦，不是画，它有苦也有乐“喜有一年放暑假前夕，我去学校领小学生手册 。我刚拿到手册时，提心吊胆的，担心成绩不理想，就急忙把它翻开来看。语文九十八分，数学九十七分。“太好了!“我激动得喊了出来。于是妈妈看着我点了点头，满意地笑了。我望着妈妈满意的笑容，心中不由想起几个月之前的一件事来。怒那是一个狂风怒吼的阴天。“任浩数学七十六分!“老师紧皱着眉头，来到我身边，说：“这次你是怎么考数学的?好好查查原因
19、!“天才知道我是怎样回到家的。一进门，妈妈便笑眯眯地走出来迎接我，可她看了我的成绩单妈妈和我谈了两个小时。我心里才轻松了些。哀今天，我们家接到了老家来的电报，说家里发洪水，要求我们立即支援。我们得到消息后，充满阳光的生活变得灰蒙蒙的，全家都为这突然发生的事感到哀愁，不愉快。爸爸妈妈商量后便寄去了几百块钱和姐姐小时候的衣服给叔伯们。同时爸爸还准备回家去看看。谁知全家看完了电报，都十分高兴，家中的一丝阴云，又飞散了。乐“夫人，请-“爸爸调皮地向妈妈做了一个邀请动作。“哈哈 -“我们都笑了起来。妈妈白了爸爸一眼，从容地站了起来。奇怪，那步子既准确又合拍，把我们都看呆了。欢笑声和歌声交织在一起，随着微
20、风传出窗外本例浏览时，首先显示图 1-4 所示结果，单击“怒”字显示图 1-5 所示结果。VBScript+ASP 动态网页制作 10 图 1-4 插入超级链接例的初始显示 图 1-5 页内的链接单击“雅虎中文”将转到雅虎中文网站，显示如图 1-6 所示结果。图 1-6 链接到其它网站3.加入图像图片是网页的一个重要组成部分，显示在网页上的任何东西都可以用图像来实现，如特殊字体的文字、线条分隔符等。图片可以使页面更直观、更漂亮。但由于图片文件有较多的字节，在网络上传送需要较长的时间。要在网页的某个位置放置一个图像，使用标签，形式为：其中：SRC 属性指出显示的图片的文件名。常用的图像文件格式为
21、 GIF 和 JPEG 格式。WIDTH 和 HEIGHT 分别指出图片显示的宽度和高度，以像素点为单位。ALT 属性后面的“提示文字”指出当图片文件不存在时，或当鼠标移动到该图片上方时系统给出的提示内容。使用 BORDER 属性可为图像加边框。【例 1-5】加入图片第 1 章 网页制作基础 11 图片的例子本例浏览时显示结果如图 1-7 所示。当把例 1-5 中的代码输入，保存在一个扩展名为 htm 或 html 的文件后，可以通过双击该文件图标来观看结果。这时，你可能看不到任何图片显示，这是因为在同网页文件相同的目录中没有名字为 nju.jpg 的文件，如果你准备的图片文件已经放在另外一个
22、目录中，应该在 SRC 属性中写上它的目录路径。如果你看到的图片严重变形，则应该调整代码中 WIDTH 属性和 HEIGHT 属性的值。使用 IMG 标签的 ALIGN 属性，可指出图像的对齐方式。形式为：IMG ALGIN=“对齐方式”其中：对齐方式有 top、middle、bottom、left 和 right 等几种。分别表示顶端、中间、底部、左边和右边对齐。图 1-7 插入图片【例 1-6】图像和文字的对齐图像和文字的对齐默认对齐方式 top 对齐方式middle 对齐方式bottom 对齐方式left 对齐方式right 对齐方式VBScript+ASP 动态网页制作 12 验证本例
23、时，首先要找到一个图片文件，改名为 tu.jpg 放入网页文件目录，再双击该网页文件，显示结果如图 1-8 所示。在超链接的显示文本区放入图像，可让用户通过点击图像实现超链接。形式如例 1-7 中所示：【例 1-7】用图像建立链接用图像建立链接也许你找不到名为 yahoo.gif 的图片文件而得不到图 1-9 的浏览结果，如果能上网的话，你可以通过浏览网站“http:/” ，并另存它的标题图片。图 1-9 用图像建立链接4.插入表格要在网页中插入一个表格，需要用到一组标签，分别表示整个表格的属性、表格中一行的属性和表格中一列的属性。定义表格的有关标签如下：TABLE：定义表格：定义表行：定义表
24、头：定义表元(表格的具体数据)让我们先看一个例子【例 1-8】表格示例图 1-8 图像与文字的对齐第 1 章 网页制作基础 13 表格示例星期一星期二星期三MONTUEWED由于在表格中，下一行的开始就意味着上一行的结束，所以例中的行结束标签都可以省略。同样标签也可以省略。浏览结果如图 1-10 所示。VBScript+ASP 动态网页制作 14 图 1-10 使用表格以下对照例子说明表格定义中使用的常用属性。(1) 设定表格边框标识TABLE的 border 属性用于设置表格边框的宽定，范围为 1 到 4，设为 0 时或无此项时表格没有边框。在 IE 浏览器中，这一属性值的大小影响到外边框的
25、阴影宽度，取值不限，如图 1-11 所示。(2) 设定表格和表项的大小形式：其中：宽和高可以是数值，表示像素点个数，也可以用百分比，表示占窗口大小的比例。对于td和th也有 WIDTH 和 HEIGHT 两属性，其设置相同，如例中表格占窗口宽度的 50%，第 1 列占表格宽度的 50%，第二行占表格高度的 50%。(3) 设定表元间隙形式：TABLE CELLSPACING=n其中：n 为像素点个数，在 IE 浏览器中，反映了实际的表格线宽度，例中设为 10 点，它的颜色和表格背景颜色相同，即为红色(RED)。(4) 设定表元内部空白形式： 该属性用于设定单元格中的文字离开表格线的距离，例中设
26、为 20 点，当单元格宽度不足以容纳文字时，会自动换行，如例中的第 2 和第 3 列。(5) 设定表格和表项的对齐方式第 1 章 网页制作基础 15 形式：TABLE ALIGN=“对齐方式”其中：对齐方式可以是 left、center 和 right。这一属性指出宽度不是 100%的表格在窗口中的位置。例中设置为 center，即表格离窗口两边的距离相等。另外：也有 ALIGN 属性。它反映表格中的内容的对齐方式，th 的对齐方式缺省为 center，tr 的对齐方式缺省为 left，即左对齐，td 的对齐方式缺省值为本行的 tr 的设置值，若没有设置时，缺省值为左对齐。其设置形式同上，例中
27、把“星期二”设为左对齐，而把“TUE”设为居中。 (6) 在表格中加入图像用 BGCOLOR 可以设置整个表格的背景颜色或某一行或某一列的背景颜色。例中把整个表格的背景颜色设为红色(RED)。用 BACKGROUND 属性可指定一幅图像作为表格或单元格的背景图片，如例中把“tu.jpg”设为第 2 行第 1 列的背景图片。为了说明表格的其它一些属性，让我们再看另外一例【例 1-9】表格的其它属性课 程 表时间星期一星期二星期三上午 1-2 节数学语文英语3-4 节语文上网数学本例浏览结果如图 1-11 所示。VBScript+ASP 动态网页制作 16 图 1-11 表格的其它属性(7) 表格
28、的标题紧接着 标签的第一行，可以设置表格的标题，形式如下：标题内容其中：ALIGN 属性指出标题相对于表格的位置，可以取 top 或 bottom 分别表示标题在表格的上方或下方，缺省值为上方，例中设为下方。(8) 多列合并和多行合并可以让一个单元格占用表格的几列，形式如下：单元格内容或单元格内容其中：th 标签表示标题行，n 为列数。如例中所示。同样可以让一个单元格占用表格的几行，形式如下：单元格内容或单元格内容(9) 垂直方向的对齐对于、和标签，都有一个指出垂直方向对齐方式的属性 VALIGN，其取值为 TOP、BOTTOM 和 MIDDLE，分别表示顶端对齐，底端对齐和中间对齐。如例中所
29、示。(10) 单元格中使用超链接在和所界定的单元格内容中，可以使用超链接，如例中：上网同样，单元格中可以放入图片等其它网页元素。第 1 章 网页制作基础 17 另外，单元格的内容可以是另外一个表格，这时就构成表格的嵌套。表格的嵌套在实际的网页中经常出现，如需要在网页中显示左右两个表格时，就需要设计成表格嵌套形式，外层的表格一般不设置边框线。表格还常常用于排列页面中的内容，嵌套的表格更能灵活地用于进行页面的布置。如果在表格中不使用边框，可以使页面看上去象正常文本一样，或者是文本与图像的组合。由于篇幅限制，更进一步的内容请参考有关网页设计的教材。1.2.4 框架使用框架可以将一个浏览器窗口分成几个
30、部分，而每个部分可独立地装入一个网页文件，我们可以将分成的每个部分称为窗格。这样，可以在一个窗格中显示目录列表，而在另一个窗格中显示选中的文档内容，较好地体现出文档的层次结构。1、一个简单的框架【例 1-10】一个简单的框架网页文件一（设文件名为 L1_10.html）一个简单的框架网页文件二（设文件名为 L1_10a.html）这是页面 A网页文件三（设文件名为 L1_10b.html）这是页面 B在本例中，共有 3 个网页文件，其中一个文件主要用于说明框架的组成形式，各部分的大小比较及显示的文档名称。而另外两个网页文件是实际显示在框架的窗格里的内容。VBScript+ASP 动态网页制作
31、18 先看网页文件一，它包含一个标题说明，其后的一行：规定了将整个窗口分成两列，每列占 50%的宽度，它由 COLS=“50%，50%”来指定，高度占窗口的 100%，它由 ROWS=“100%”来指定，它是缺省值，若此处改为80%，则窗口下方将留下一个空白条。若指定列宽的两个值的总和不是 100%，则窗格按比例扩大或缩小到占满整个窗口。若指定列宽的各个值中有一个是“*” ，表示使用剩余值，即将 100%减去其它指定值后的值， 如 COLS=“*，20%” ，相当于COLS=“80%， 20%”。若需要将窗口分成上下两个部分，可改用如下形式：它把窗口分成上下两个部分，上面占 40%的高度，下面
32、占 60%的高度，COLS=“100%”可以缺省。即使这里改为“50%” ，显示效果相同。不能同时进行垂直划分和水平划分，即如果写成如下形式：则相当于：标签显示在窗格中的文档名称及窗格的名称。一般形式如下：注意：在网页文件一中，不应该使用标签。另外，网页文件二、网页文件三的文件名应和网页文件一中的内容（第 6、7 行）保持一致。本例浏览结果如图 1-12 所示。图 1-12 使用框架2、框架使用形式从上例可以看出，为使用框架，需要用到以下标签：第 1 章 网页制作基础 19 FRAMESET：指出各框架的大小分配：指出框架中的文档，及框架的名称：当浏览器不支持框架时的显示信息。3、框架间的尺寸
33、设置可以使用以下形式将一个窗口分成左右排列的多个窗格：三个窗格分别占 30%、20%和 50%的宽度。也可以将整个窗口分成上下排列的多个窗格，形式如下：使用框架的嵌套可以将整个窗口先进行上下划分，再对其中的某些部分左右划分。或进行相反顺序的处理。请看下例 1-11。【例 1-11】纵横排列多个窗口纵横排列多个窗口例中，首先将窗口上下分成 20%和 80%的高度，在上面窗格中显示网页文件L1_11a.html 的内容，再将下方的窗格分成左右两部分，左边显示网页文件 L1_11b.html的内容，右边显示网页文件 L1_11c.html 的内容。作为简单例子，请读者参照上例中的网页文件二和网页文件
34、三写出本例中各网页文件的内容。本例浏览结果如图 1-13 所示。VBScript+ASP 动态网页制作 20 图 1-13 纵横排列多个窗4、各窗口间相互操作通过对窗口的命名，结合超链接，可以实现窗口间的相互操作。如下例所示：【例 1-12】各窗口间相互操作网页文件一各窗口间相互操作网页文件二（根据网页文件一的内容，本文件名应为 L1_12a.html）各窗口间相互操作第一章第二章第三章第四章第 1 章 网页制作基础 21 网页文件三（根据网页文件一和网页文件二的内容，本页的文件名应为L1_12b.html）这里是第一章内容验证本例中的代码时，首先要建立以上各文件内容，放在同一目录中，另外，像
35、网页文件三那样写出另外三个文件作为第二章、第三章和第四章内容对应文档。再双击网页文件一所对应的文件图标，显示结果如图 1-14 所示。此时，单击窗口左侧的“第二章” ，显示如图 1-15 所示结果。图 1-14 多个窗口间相互操作 图 1-15 单击“第二章”时的显示1.2.5 使用表单表单为 Web 页的设计者提供了一种在 Web 中实现双向通信的方法。通过表单可以获得用户提交的信息。如下形式的网页在浏览时会出现一个可供用户输入信息的输入框。但要真正通过表单向服务器提交信息，还需要遵循一定的格式。VBScript+ASP 动态网页制作 22 表单使用的一般形式为：form action=“u
36、rl” method=GET(或 POST)表单域的定义用标签括起来的整个内容称为表单，在 form 标签中可设置的几个常用属性含义如下：action 属性，指出当表单提交时由哪个网页或程序接收表单域中的信息。但由于HTML 网页不能接收表单的输入信息，所以，使用本章所学内容，无法知道当用户提交表单时，浏览器发送了什么。如果你的网络是畅通的，为了检查表单发送了什么，可以将表单的信息发送到邮箱中，形式如下：action=“mailto:”其中：xuweilinpub.cz.jsinfo. net 是作者的邮箱地址，在你写的网页中应该写上你的邮箱地址。否则，建议读者暂时省去 action 这一项，
37、即不发送信息，等学完了第 7 章后，就可以方便地使用 ASP 网页文件来接收表单信息了。Method 属性，指出表单信息的发送方式，其值有 GET 和 POST 两种，关于两种方式的不同点，将在第 7 章中进行深入的讨论。Name 属性，指出表单的名称。可供客户端脚本中使用和接收表单信息的程序中使用。例如：表单中出现的一些供用户输入信息的地方称为表单域，简称为域。根据表单域输入信息类型的不同，表单域的形式也有所不同，最常见的是用标签引导的表单域，其一般形式为：其中：类型属性(type)说明表单域的具体类型，它的值可以是text、 password、checkbox、radio 、hidden
38、、submit 、reset 等，分别表示文本框、密码框、复选框、单选框、隐藏对象，提交按钮和复位按钮。名称属性(name)说明表单域的名称，当表单被提交时，表单域的名称和值一起发送到服务器，接收程序通过名称来得到相应表单域中输入的值，所以，真正用于输入信息的表单域需要有一个名称，若表单中只有一个提交按钮，可以不设置名称。名称属性之后可以放入一些用脚本语言编写的事件程序。对此将在以后各章中介绍。以下分别讨论各种不同类型表单域的使用形式。1、文本框和密码框文本框和密码框都用标签指出，文本框类型用 text 指定，密码框类型用password 指定，除了都有名称(name)属性外，文本框和密码框都
39、有value、 size、maxlength 等属性，分别用于指出它的初始值、显示的长度和允许输入的最大字符数，Maxlength 属性缺省时，表示不限制用户输入字符的个数。文本框和密码框的不同点在于密码框中输入字符时显示成“” 。【例 1-13】文本框、密码框第 1 章 网页制作基础 23 你的姓名：你所在部门：密码：本例浏览时显示如图 1-16 所示结果。图 1-16 表单中的文本框和密码框例中没有为表单指明信息发送到哪里，因为目前还没有讨论如何接收表单信息，把它指定到任何地方都可能产生一个不必要的错误提示。指定使用 GET 方式来发送信息，当提交时可以在地址栏中发现其中的变化。例中放置了
40、一个用于让用户输入姓名的文本框，它的名称为“姓名” ，使用中文名称并不一定是好的做法，在这里只是为了便于阅读，建议读者使用英文字符串作为表单域的名称。例中指定姓名框显示成 8 个字符宽度，但可以输入任意多个字符。例中设置了一个用于输入部门名称的文本框，文本框的名称为“部门” ，考虑到输入的最大可能是“计算机系” ，对该文本框中设置了它的初始值为“计算机系” 。例中设置的密码框限制输入的最大长度为 10 个字符，对于密码框一般情况不允许输入汉字。例中还放置了一个提交按钮和一个复位按钮，他们都没有设置名称属性。2、复选框和单选框VBScript+ASP 动态网页制作 24 复选框和单选框也是用标签
41、来指定，复选框的类型用 checkbox 表示，单选框类型用 radio 表示，复选框和单选框都可以用 checked 标识设置初始状态(选中还是没有选中) ，另外可以用 value 属性设置当选中时发送的值，若 value 缺省时，将用“on”作为值发送。多个复选框可以有相同的名称，这时，其值将形成一个数组。一组单选框应该具有相同的名称。【例 1-14】复选框和单选框白菜鱼蛋糕牛奶咖啡雪碧例中设置了三个复选框，它们名称各不相同，当选中时，前两个发送“on”作为值，第 3 个选中时，将发送“蛋糕”两个汉字作为其值。例中还设置了三个单选框，它们名称均为“饮料” ，初始状态“咖啡”为选中状态，当浏
42、览时，若选中的是“牛奶”或“咖啡” ，发送的值都是“on” ，若选中的是“雪碧” ，发送的值将是“雪碧” ，可以看出对于单选框，为了便于区分用户选中了哪一个，应设置其不同的 value 属性值。本例浏览结果如图 1-17 所示。图 1-17 表单中的复选框和单选框第 1 章 网页制作基础 25 3、下拉列表框和滚动列表框下拉列表框和滚动列表框都用标签指出，它们都有名称属性(name) ，对于滚动列表框用 SIZE 属性指出同时列出的选项个数，用 multiple 标识说明该列表框中是否可以同时选择多项。列表框中列出的每一个选项用option 标签来指出，例中给出了三种常见的形式。【例 1-15
43、】下拉式列表框请选择部门：计算机专业网络与通讯专业多媒体专业请选择现有职位：主任主任秘书组长例中选择部门用了一个下拉的列表框，名称了bm ，它有个可选项，其中第项没有设置 value 属性，当选中该项时，将提示文本计算机专业作为值发送，第项设置了 value 属性，当选中该项时，将网络作为值发送，该项中的 selected 表示初始状态为选中，第项的情况类似，当选中时，发送给服务器的是多媒体专业。例中选择现有职位部分使用了一个滚动列表框，该列表框同时显示三个选项，并且同时可以选择多项。它的选项的表示形式同选择部门相同。本例浏览时显示结果如图 1-18 所示。VBScript+ASP 动态网页制
44、作 26 图 1-18 表单中的列表框4、文本区域使用文本区域可以让用户输入较多的文本，使用形式如下：textarea name=“名称”cols=列数 rows=行数初始文本注意：文本区域没有 Maxlength 属性。【例 1-16】文本区域请在下面的文本区域中输入你的简历:例中设置了一个 10 行 40 列的文本区域。在输入内容时，遇到右边界会自动换行，输入满 10 行后会自动上滚。本例浏览结果如图 1-19 所示。第 1 章 网页制作基础 27 图 1-19 文本区域5、隐藏表单的元素用类型为 hidden 的表单域可实现网页间信息的传递。隐藏域有 name 属性和 value 属性分
45、别用于记录该域的名称和值。当表单提交时，这种类型的域的内容将和其它元素一样发送到服务器中。【例 1-17】隐藏表单的元素隐藏表单的元素这里隐藏了一个表单元素。1.3 主页制作工具要想制作出理想的网页，需要使用一个好的工具，尤其是对于具有丰富内容的网页来说，色彩的搭配、对象的布局等都是非常重要的，而要做到这些，没有一个可视化的VBScript+ASP 动态网页制作 28 设计环境，是很难做到的。由于本课程不是讨论如何设计出一个完整的、优美的网页，而是讨论网页中可以使用的一种技术，所以，各种主页制作工具不是学习本课程所必须的，但是，一个好的制作环境，既能为编写代码提供必要的帮助，又能及时指出代码中
46、存在的语法错误，有的还能自动生成代码。当忘记了某些标签的书写格式，或者要合理地设计一个表格时，有一个可视化的环境会非常方便。所有本节主要简单介绍常用的几个网页制作环境。1.3.1 FrontPage 98 或 Frontpage 2000图 1-20 FrontPage 2000 开发界面FrontPage 是一种所见即所得的主页制作软件，通过它可以象操作 WORD 那样轻松地完成一个网页的设计。在 FrontPage 中还提供了许多模板，让使用者方便地构成整个站点的框架，提高了制作效率。在普通视图中，你可以输入文字，插入图片，设计制作表格，之后在 HTML 视图中，可以观看相应的 HTML
47、代码。最后，还可以使用预览观看实际显示结果。FrontPage2000的编辑界面如图 1-20 所示。1.3.2 DreamWeaver2.0 或 3.0DreamWeaver 是一套针对专业网页开发者的可视化网页设计工具，它采用所见所得的操作界面，并能同时管理多个站点。在学习本课程的有关实例时，你使用DreamWeaver 可以方便地调试 ASP 脚本。DreamWeaver 的运行界面如图 1-21 所示。第 1 章 网页制作基础 29 图 1-21 DreamWeaver 开始环境1.3.3 Microsoft InterDev 6.0InterDev 6.0 是一个集成的网页开发环境，
48、它是面向代码的，在这一环境中，你可以方便地书写 HTML 代码或 ASP 脚本，它能提供必要的帮助，对于每一种标签，都能显示出它的所有属性，以及该对象可编写的事件过程等。InterDev 的工作界面如图 1-22 所示。建议读者在学习本课程，尤其是在学习第 7 章开始的内容时使用这一开发环境。VBScript+ASP 动态网页制作 30 图 1-22 InterDev 开发界面习 题1HTML 页的基本结构是什么样子的？2创建一个可以链接到 http:/ 的页面，并且用插入的一张图片实现链接。3在 HTML 页面上如何实现左对齐、右对齐和居中对齐？4请模仿例 1-9 的形式自己制作一张课程表。5把窗口分成三个部分的框架通常要设计几个网页文件？为什么？6请设计一个用于输入一般个人信息的表单。7用#rrggbb 的形式固然可以组成各种不同的颜色，但对常用的颜色有一个名称使用起来还是方便的，你想知道 plum 是什么颜色吗？还有“gold” 、 “hotpink”、 “midnightblue”、“khaki”、 “chartreuse”等，也不妨试一下。8标签一定要出现在 和 标签之间吗？
