学习内容：掌握网页制作语言的基本语法、了解制作网页工具的基本情况
7.1.1网页制作语言
制作网页，通常需要网页制作软件、图形处理软件和网页动画软件的配合使用来完成，在介绍以上内容之前，有必要了解一些网页制作的语言知识。
1. HTML 语言
HTML 即超级文本标志语言的缩写，是专门在 Internet 上进行传输，可以让设计者建立能让所有使用 Web 的人相当有把握地读出页面，是人们在网上获取、发布信息的最主要手段。简单地说，就是人们上网通过浏览器能够显示的各种含有信息的页面。它是一种描述性的标识符号的集合，称为“标记”语言。之所以称为标记语言，主要是因为这种语言的元素是由若干“标记”组成的，它们扮演了语言中保留字和控制代码的角色，通常以．html 或．htm 为后缀。
HTML 不是一种“所见即所得”的文本标志语言，它只是标记了一个对象如何显示，剩余的全部工作包括翻译、显示等都留给了浏览器。任何人都可以用纯文本编辑器（如记事本、写字板）创建网页文件，也可釆用“所见即所得”的编辑工具来创建，但要保存为．htm 格式，最终用户通过浏览器来读取这些网页文件。
【例 7-1】用 HTML 语言设计一个网页，该网页包含文字和图形，文字分别用 24 磅“黑体”和正常的“宋体”修饰。程序如下：
该程序在浏览器中显示的结果如图 7-1 所示。
制作网页可以使用 HTML 语言，也可以使用各种各样的网页编辑器，但是，在让孩子使用计算器计算乘法前，得先让他们学习乘法表。同样的原因，在使用专业网页编辑器创作网页之前，理解基本的 HTML 是很有帮助的。这样才知道可以做什么，怎么做和怎么处理遇到的问题，如果知道了怎么编写 HTML，就很容易打开 HTML 文件，手工添加额外的标记——包括在站点创作网页发布后开发的新标记。
1） HTML 的元素与标记
HTML 语言中的<>（尖括号）之间的内容就称为元素或标记。标记分为两大类：一类用于确定超文本在浏览器中显示的方式；另一类用于确定超文本在浏览器中显示的内容。
HTML 标记就是用来安排文字、图像、链接，例如在页面左边显示一幅图像，粗体显示一个词或者是链接到其他资源上，就要用 HTML 标记，HTML 标记遵循以下基本原则：
①标记总是用尖括号包围，例如<HEAD〉或<1>〉。并且是成对出现的，包围它们影响的内容。就像一个电灯开关，第二个标记打开，第一个标记关上。
②结束标记总是用反斜线“/”开头。例如，开始粗体用<B>，返回正常字体用</B>。
③标记开始越早，关闭越晚。标记是嵌入的，不能交叉。例如，如果使用：
<HEAD><TITLE>你的文本＜/HEAD></TITLE>
这样是不起作用的，正确的顺序应该是：
＜HEAD＞＜TITLE＞你的文本＜/TITLE＞＜/HEAD＞
④有一些标记具有参数，这些参数一般能精确地确定这种标记的显示方式，称为该标记的属性。标记参数的取值一般用双引号引起来，其位置不受限制。例如例 7-1 程序中的 face=”黑体”语句。
⑤另外还有一种元素，不对文档中的某个部分起作用，只是用来提供给浏览器一种显示方式，如＜HR＞就显示一条同栏分隔线。
⑥标记不区分大小写，因此＜HTML＞、＜Html＞、＜htmL＞、＜HtMl＞和＜html＞对浏览器来说没有区别，但在编写网页时最好保持元素的大小写一致，要么全部大写，要么全部小写，这样便于辨认，有利于减少编制网页中的错误。
2） HTML 文档的结构
HTML 语言定义了 4 种标记，用于描述页面的整体结构及浏览器和 HTML 工具对页面的确认，页面结构标记不影响页面的显示效果，它们帮助 HTMLI 具对 HTML 文件进行解释和过滤，这些标记是可选的，如果页面中不包含它们，浏览器通常也能读取页面。但是对于一个程序设计者来说，程序的可读性和通用性是非常重要的，因此，要有在 HTML 文档中写上页面结构标记的习惯。HTML 4 个页面的结构标记是：
（1） 文档标识（HTML）。
全部文档放在＜HTML＞…＜/HTML＞之间，＜HTML＞标记放在 HTML 文件的最开头，意思是告诉浏览器这个文件是 HTML 文件，而在文件的最后，当然是以＜/HTML＞作为结束标记了。虽然这个标记可以省略不用，但希望你还是养成使用该标记的习惯。
（2） 文档首部（HEAD）。
文档首部是框在＜HEAD＞…＜/HEAD＞中的部分。＜HEAD＞标记放在＜HTML＞标记的后面，是用来标明文件的题目或定义部分，它们通常不会显示在页面上。
（3） 文档标题（TITLE）。
文档标题是框在＜TITLE＞…＜/TITLE〉中的部分。这个标记是用来设定文件的标题，一般用来注释这个文件的内容，通常＜TITLE＞＜/TITLE＞中间的文字会显示在浏览器的标题栏上，它相当于 Windows 窗口中的标题栏。
（4） 文档主体（BODY）。
文档主体则是位于＜BODY＞…＜/BODY＞之间的部分。这个标记一般都是用来指明
HTML 文档里主要的对象，如标题、文字、图片、超链接、背景图案及对象的修饰等。
3） 几个常用的标记
（1） 换行和分段。
HTML 忽略源代码里面的回车换行符，如果要换行或分段，就必须用专门的标记安排段落格式，即用＜BR＞和＜P＞这两个标签：
• 换行＜BR＞：该标记用于一段文本中的强制换行，无论该段文本是否超出了浏览器窗口的边界＜BR＞都要强迫产生一个换行，并且没有垂直空白。＜BR＞标记除了用来标识一个换行动作外，在 HTML 文件中还可以用它来调整行间距。
• 分段＜P＞：该标记打断行并插入一个空行，把段落区分开，其后的文本另起一个段落。
（2） 超链接的设置。
HTML 超文本的功能体现在链接功能上。使用超文本链接可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。特色就是随时按一个键就可以链接到世界的任何一个角落，这样的功能其实只要＜A＞和＜/A＞一行指令就可以做到了。超文本链接在网页的表现形式为：当鼠标移到链接对象时，光标会从箭头转变成手指，表示可以在这儿用鼠标单击一下，它就跳转到链接所指的地方。
①链接到某一个目标。
在文件中用到这样一条指令：＜A HREF="services．html"＞服务＜/A＞
＜A＞标记告诉浏览器建立了一个链接并将“服务”两个字显示为蓝字带下划线，用鼠标单击“服务”，浏览器就会显示 services，html 的内容。
②链接到某一个网站的主页。
如果将指令写成：＜a href="http：//www．sina．com．cn"＞新浪网＜/a＞
在浏览器中单击“新浪网”，就会显示新浪网的主页。
③链接电子邮件。
＜A HREF="mailto：wjh@163．com"＞发邮件＜/A＞
单击“发邮件”时，电子邮件程序就会自动启动，并准备发送一个信件到 wjh@163．com邮箱中。
④用图片作链接指针。
＜a href="http：//www．sina．com．cn"＞新浪网或＜img src=”图像文件．gif"＞＜/a＞ 在浏览器上单击“新浪网”字符串或单击显示出来的图像，都能链接到新浪网的主页上。
常用的 HTML 标记符号及简要说明见表 7-1。
2. XML 语言
随着因特网的发展，越来越多的信息进入互联网，信息的交换、检索、保存及再利用等迫切的需求，使 HTML 这种最常用的标记语言越来越捉襟见肘。HTML 将数据内容与表现融为一体，数据的可修改性和可检索性差，而 XML（可扩展的标记语言）借鉴了 HTML 与数据库、程序语言的优点，将内容与表现分开，不仅使检索更为方便。更主要的是用户之间数据的交换更加方便，数据可重用性更强。
但 XML 在更多的时候只是一种数据文件，要把它变成日常所看到的 HTML 格式那样的文件，还需要借助 XSL 模式化查询语言，转换过程如图 7-2 所示。
3. 脚本语言
脚本语言是介于 HTML 和 Java、C++和 Visual Basic 等编程语言之间的语言。HTML 通常用于格式化文本和链接网页。编程语言通常用于向计算机发送一系列复杂指令。脚本语言也可用来向计算机发送指令，但它们的语法和规则不像可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。
脚本语言弥补了 HTML 不能解决动态和交互的缺点，是一种面向对象的解释性程序语言，有客户端脚本和服务器端脚本两种。
1） 客户端脚本语言
客户端的脚本语言是在客户端执行的脚本，通过<script>和</script>标记无缝地嵌入在 HTML 代码中，可以实现网页元素的动态效果和控制网页元素的外观。常用客户端的脚本语言有两种：JavaScript 与 VBScript，微软公司的 Internet Explorer 和网景公司的 Netscape 两种浏览器都支持，但是 JavaScript 的效果比 VBScript 要好。
2） 服务器端脚本语言
服务器端的脚本语言是在服务器端执行的脚本，通过执行服务器端的脚本和后台数据库的查询可完成与客户的交互功能。服务器端常用的脚本有 ASP、JSP、PHP、Perl 和．Net 等，这几种脚本语言广泛应用于网站建设及网页设计中。而数据库系统则根据网站的规模大小、功能来确定，常采用 SQL Server、Access 等数据库系统。
7.1.2 网页制作工具
制作网页的工具很多，且各有特点，一般都能生成 HTML 代码。从原理上来讲，虽然直接用记事本也能写出网页，但是网页制作者需要熟悉 HTML 语言且效率也很低，不适合初学者。用 Office 的组件 Word、Excel 和 PowerPoint 也能做出网页，但有许多效果做不出来，产生的垃圾代码太多，也是不可取的。
现在制作网页就像 Word 排版一样方便，因为有很多“所见即所得”的编辑工具，尤其是被称为网页制作三剑客的 Flash、Fireworks 和 Dreamweaver，使用最为广泛。下面简单介绍几种常用的网页编辑工具。
1. FrontPage
FrontPage 目前是随同 Office 软件包捆绑在一起的，使用如同字处理软件中的 Word，界面继承微软 Office 产品的特点，引导过程易学易用，开发效率高，适合于网页设计的初学者。该软件 2003 版以后已经作为一个专用工具独立存在。
2. Dreamweaver 8．0
Dreamweaver 8．0 是 Macromedia 公司继 Dreamweaver MX 后推出的。Dreamweaver 8．0支持编写的网页文件非常多，尤其是增加了对 ASP、JSP、ASP、NET、PHP 这些动态网页文件的支持，这说明 Dreamweaver 8．0 已经不仅仅只局限于一个网页编辑软件的范畴，它已经可以实现完整的数据库文件的编写，也是一个“所见即所得”的可视化网站开发工具，众多专业网站和个人主页将其作为建站的首选工具。
3. Adobe Pagemill
Adobe Pagemill 是 Adobe 公司推出的一个网页制作工具。适用于主页需要用到很多框架、表单和图像地图的网页制作。虽然该工具的功能不算强大，但使用起来很方便，非常适合初学者。PagemilLGoLive 和 LiveMotion 是 Adobe 公司推出的网页设计组合。
4. HotDog
HotDog 是初学者较容易上手的网页制作工具。借助该软件提供的大量模板，网页制作者甚至连设计都不用考虑，直接填入内容即可。
制作网页，除需要网页制作软件外，通常还需要图像处理软件、动画制作软件和数据库系统（交互式网页）配合使用。下面主要介绍用 Dreamweaver 8．0 制作网页的过程和步骤。
视频学习资料
