第2章 网页制作的第一次接触

本章读者将学习网页服务器的安装和配置，以保证网页测试的准确性，为制作完整的网站做好技术铺垫。其后读者将了解到网页的工作全过程，对网页技术的本质有一个透彻的认识。最后读者将学习一个简单的HTML网页的制作，以掌握HTML页面的基本编写方法。

2.1 配置Web服务器运行环境

在上一章，读者了解了网页开发的B/S模式，配置网页运行环境时，要把读者的电脑当成网页服务器端，而在测试自己制作的网页时把读者的电脑当成浏览器端。本节先讲述如何把读者的电脑配置成网页服务器。

2.1.1 系统要求

HTML网页制作的学习对硬件系统要求非常低，主流的电脑的硬件配置都可以胜任，但必须有网卡。在软件方面，操作系统为Windows 2000/XP或以上，并且推荐安装IIS组件。

2.1.2 IIS是干什么的

因为读者的电脑须配置为网页服务器，所以电脑不仅要存储整个网站的资源，而且能让浏览器端通过IP地址及URL访问。在Windows平台上实现网页服务器的配置，笔者推荐安装微软的IIS。

IIS是Internet Information Server的缩写，中文名称为因特网信息服务。它是一种Web服务，主要包括WWW服务器、FTP服务器等。它使得在Intranet（局域网）或Internet（因特网）上发布信息成了一件很容易的事。利用IIS可以在电脑主机上建立最常用的HTTP网页服务器、FTP文件传输服务器和SMTP邮件服务器，实现最基本的页面浏览、文件传输和电子邮件功能。

综上所述，电脑主机安装了IIS后可以配置为网页服务器、文件传输服务器和邮件服务器。本书只讲述配置网页服务器。

2.1.3 安装IIS

IIS虽然是Windows XP的组件之一，但需要读者自己手动安装，请读者安装IIS之前准备好Windows XP Professional的安装光盘。

（1）打开“我的电脑|控制面板”窗口。

（2）单击“添加/删除Windows组件”选项。

（3）在“Windows组件向导”对话框中，勾选“Internet信息服务”选项，如图2.1所示。

图2.1 选择安装Internet信息服务（IIS）

（4）单击“下一步”按钮开始IIS的安装，安装进行时需要在光驱中放入Windows XP Professional的安装光盘，如图2.2所示。

（5）安装完成后打开“控制面板|管理工具”窗口，可以看到“Internet信息服务”（IIS）的启动快捷方式，如图2.3所示。

图2.2 放入Windows XP Professional安装光盘

图2.3 IIS的快捷方式

2.1.4 配置IIS

配置IIS的详细步骤可参考如下操作：

（1）双击“Internet信息服务”快捷方式，读者应可见到IIS配置界面。双击左边树形窗口的“网站”项，即可看到“默认网站”项，如图2.4所示。

图2.4 IIS界面

（2）读者只需要配置“默认网站”项的属性。读者可右击“默认网站”项，单击菜单中的“属性”项，属性设置对话框如图2.5所示。

图2.5 网站基本属性设置选项卡

（3）初步学习网页前台制作，读者只需要设置图2.5中的三个选项卡，“网站”、“主目录”和“文档”。

· “网站”选项卡是设置网站的外部访问属性。

· “描述”选项只是IIS中网站点名称，可忽略。

· “IP地址”选项非常重要，默认情况下是“全部未分配”，适用于本机测试网站，访问网站的域名用“localhost”代替。如果网站需要从外部访问则单击“IP地址”选项右边的下拉菜单，选择相应的IP地址供外部访问。

“IP地址”选项下面的“TCP端口”选项是指访问网站时所用的网络端口，默认是“80”，非特殊情况下读者不需要设置。

（4）单击“主目录”选项卡，界面如图2.6所示。默认情况下“连接到资源时的内容来源”选项选择“此计算机上的目录”，即网站资源存储在本机上。“本地路径”选项设置网站目录在电脑中的位置，默认为“C:\Inetpub\wwwroot”，“C:\Inetpub”是IIS安装完后再C盘自动生成的目录。如果读者制作的网站在其他目录，只需单击“浏览”按钮选择网站目录。

（5）单击“文档”选项卡，界面如图2.7所示。读者可看到列表框中列出了很多网页文件的文档名，这就是默认首页，即外部通过域名或IP地址访问该网站时自动定位的首页面。其上下顺序代表优先顺序，读者应尽量把网站对应的首页文档名调整于首位，如果文档列表中没有读者需要的首页文档，可通过“添加”按钮添加。

图2.6 网站路径设置

图2.7 网站默认主页设置

2.1.5 网页制作工具的选择

网页制作的工具相当多，读者在选择前必须先明确网页的以下本质。

（1）网页文件即扩展名为htm、html的文件，本质上是文本类型的文件。

（2）网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。

（3）一个网站的默认首页文件在IIS中配置，一般是以index为文件名，即index.htm或index.html。

笔者在这里列出部分比较常用的制作网页的工具软件：

记事本：既然网页文件本质是一种文本文件，那么网页文件可以用Windows自带的记事本程序创建和编辑。其优点是方便快捷，缺点是无任何语法提示、无行号提示、格式混乱等，初学者使用困难。

EditPlus：一个非常优秀的代码编辑器，可以很方便地创建和编辑网页文件。其优点也是方便快捷、有语法高亮、行号提示、HTML代码快捷插入。缺点是无语法自动提示、无所见即所得的网页设计视图。对于代码熟练的读者非常适用，但仍然不适合初学者。

Dreamweaver：著名的网页三剑客之一，是传统的网页制作主流工具。其优点是有可见即可得的设计视图、能通过鼠标拖放直接创建并编辑网页文件、自动生成HTML代码。其代码视图有非常完善的语法自动提示、自动完成、关键词高亮等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，正是由于其功能强大，从而导致运行速度偏慢。

以上工具各有其优点，考虑到读者须掌握HTML代码编写，所以在本书前期，笔者建议读者用记事本来学习制作网页。

2.2 了解网页技术的工作原理

初学网页的读者对网页技术的实现有很多不解，在实际的操作中出现的问题往往不知其所以然。在本节，笔者将从各种网页技术的工作原理的角度来讲述其本质，读者理解后将对网页实践中的问题解决中有很大帮助。

2.2.1 静态HTML的工作流程

静态HTML网页文件及相应的其他资源存储在网页服务器上，其根目录看做一个有组织的网站。当浏览器端在地址栏输入该网站域名或URL时，浏览器端的请求被发送到网页服务器的IIS。IIS调用相应的网页以及相应的其他资源发回给浏览器端，浏览器对服务器发回的HTML代码进行解析，从而在浏览器端显示出完整的网页，如图2.8所示。

图2.8 静态HTML网页工作流程

从图2.8可以了解静态网页的工作流程，在网页制作时读者自己的电脑往往既充当网页服务器端，也充当浏览器端。

2.2.2 如何设置Web技术中的访问路径

路径在网页技术中是一个很重要的概念，如果读者没有把路径理解透彻，在接下来的学习中会遇到很多麻烦。由于完整的网页是由网页文件组织外部资源（图片、动画等），HTML代码通过路径寻找资源的位置。网页与网页之间的互相访问也是通过路径定位，每个网页文件都可通过路径访问。

路径分为绝对路径和相对路径。绝对路径即上一章讲的URL，就是网站中文件的绝对位置。如“http://www.google.cn/images/logo_cn.gif”，这代表网站中的一个图片文件的URL，即绝对路径。定位同一个网站（同一个域名）中的网页或资源很少用绝对路径，因为书写比较麻烦，重复部分太多。其次，当整个网站域名更换了，网站内所有的绝对路径都要更换域名部分。

相对路径参照物分为相对网站根目录和相对文档，常用于定位同一网站（同一个域名）下的网页或资源。

（1）相对网站根目录方式的路径参照物是整个网站的根目录，类似于绝对路径，只是把http协议及域名部分省略了。相对网站根目录路径的写法是在被访问的网页或资源路径前加个“/”表示网站根目录，例如，“http://www.google.cn/images/logo_cn.gif”写成相对网站根目录路径为“/images/logo_cn.gif”，同一个网站中任何页面访问这个图片文件都使用这个路径。

相对网站根目录路径解决了绝对路径的域名更换问题，域名变化不会影响到路径的编写。

（2）相对文档路径参照物是引用该路径的文档（HTML网页文件），不同位置的网页访问同一个网页或资源，其相对文档路径也不同。当需要寻找的网页文件（资源）和文档处在同一目录下，文档代码中的路径即为被寻找到网页文件（资源）的文件名。例如“http://www. google.cn/images/logo_cn.gif”，当所编辑的网页文档在“http://www.google.cn/images/”下，网页文档中该图片的路径为“logo_cn.gif”；当所编辑的网页文档在“http://www.google.cn/”下，网页文档中该图片的路径为“images/logo_cn.gif”；当所编辑的网页文档在“http://www. google.cn/images/abc/”下，网页文档中该图片的路径为“../logo_cn.gif”。这种方法和DOS操作系统的路径方法非常相似，向上一级目录使用“../”。

相对网站根目录路径和相对文档路径的表示和区分如图2.9所示。

从图2.9可看出，使用相对文档路径，不同的网页文档由于所处位置不同，对同一个网页文件（资源）的路径表示也不同。并且相对文档路径非常适合于寻找比较“近”的网页文件（资源）。

图2.9 相对路径的表示方法

2.2.3 网页中怎么表示颜色

光的三原色是红色、绿色、蓝色，而计算机也是根据这个原理显示颜色。不过自然光的颜色数量是无限的，计算机的颜色数量是有限的。

计算机表示的任何颜色都可分为红色、绿色、蓝色三原色，任何颜色都是由这三种颜色混合而成，如图2.10所示。RGB是Red，Green，Blue的意思，所以也叫RGB三原色模式。因为网页最终是显示在浏览器端的显示器上，所以网页创作时同样采用RGB三原色模式表示颜色。

在HTML技术里，颜色有两种表示方式。一种是用颜色名称表示，比如blue表示蓝色、white表示白色，另外一种是用16进制的数值表示RGB的颜色值，后者表示颜色更加精确。

RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，最小值就是#00，最大值就是#FF，通过R、G、B三种颜色值的组合获取丰富的颜色。

组合规则如图2.11所示。

图2.10 三原色示意图

图2.11 三原色组合方式

表示不同的颜色有其规律，白色是三原色值均为最大的时候（红绿蓝最亮时）混合成的颜色，所以颜色表示为RGB（255，255，255），16进制就用#ffffff表示；反之，黑色的RGB （0，0，0），就用#000000表示；灰色介于黑色和白色之间，只要RGB三原色的颜色值相等，表示的就是灰色，且值越大越接近白色（浅灰），值越小越接近黑色（深灰），如#111111（深灰）、#ababab（浅灰）。

黑白以外的颜色表示同样有规律。表示最亮的红色为#ff0000、蓝色为#00ff00、绿色为#0000ff。通过颜色混合的理论，红色和蓝色混合得出紫色（洋红色），所以表示最亮的红色为#ffff00；蓝色和绿色混合得出青色，所以表示最亮的青色为#00ffff；红色和绿色混合得出黄色，所以表示最亮的黄色为#ff00ff。

2.2.4 学习网页技术的顺序

学习网页技术和其他任何技术一样，需要循序渐进。笔者推荐读者学习网页技术的顺序如图2.12所示。

图2.12 网页技术学习顺序

2.3 制作一个完整的HTML网页

网页技术的基本知识已经讲完了，本节制作一个基本的、完整的网页，读者在实践的同时，必须对每一个步骤有所理解。本节能让读者消除对网页技术的恐惧心理，更轻松地学习后面的技术。

2.3.1 怎样写HTML网页的标签

标签是HTML技术中最基本的单位，也是HTML技术最重要的组成部分。标签可以轻松地控制网页的内容格式和样式。

编写HTML标签有四点要注意：

（1）任何标签必须用两个角括号括起来，即<和>，比如<html>。

（2）任何单独的标签都是闭合的（闭合就是标签的最后要有一个/来标示结束），比如<br />就是单独的（注意要在最后加上/，以表示其是独立的）。双标签必须有结束标签，比如<body>和</body>就是双标签（<body>是开始标签，</body>是结束标签，在开始和结束标签中可以有内容）。

（3）单标签里可以添加部分属性，用空格分隔，如<img width="100" />。而双标签可在其开始标签添加部分属性，用空格分隔，如<body bgcolor="#ffffff"></body>。

（4）标签是大小写无关的，<body>跟<BODY>表示的意思是一样的，标准推荐使用小写。

2.3.2 完成第一个网页

本节综合前面的知识制作一个网页，为了规范起见，以制作整个网站的流程来制作这个网页。

（1）建立网站根目录，笔者的根目录创建在D:\，目录名为web。

（2）双击“控制面板|管理工具|Internet信息服务”项，启动IIS。

（3）在IIS窗口中右击“默认网站|属性”选项，“IP地址”选项为“（全部未分配）”（如图2.13所示），“主目录”选项卡的“本地路径”选项为“D:\web”（如图2.14所示），“文档”选项卡的“默认文档”为“index.htm”（如图2.15所示）。

（4）笔者下载了一个jpg图片文件，并命名为test.jpg，移动到D:\web目录下。

图2.13 设置网站IP地址

图2.14 设置网站根目录路径

图2.15 设置网站默认主页

（5）在D:\web目录下新建一个文本文件（扩展名为txt），用记事本程序编辑该文本文档，输入代码如代码2.1所示。

代码2.1 第一个网页的HTML代码：index.htm

        <html>
        <head>
          <title>第一个网页</title>
        </head>
        <body>
          我的第一个网页完成了<br /><img src="test.jpg" ><br />
        网页制作如此简单啊。
        </body>
        </html>

（6）在记事本菜单栏单击“文件|另存为”命令，确认保存路径为“D:\web”，“文件名”项使用“index.htm”，“文件保存类型”项选择“所有文件”，如图2.16所示。

index.htm的网页文件已制作完成，如果需要再次编辑，读者只需要右击index.htm，单击菜单的“打开方式|记事本”命令。读者现在可以直接双击该文件，系统将调用IE浏览器浏览该网页。

既然已经配置好了IIS，读者也可以模拟浏览器端，访问网页服务器的形式测试网页。读者可打开IE浏览器，在地址栏输入“localhost”，回车测试，如图2.17所示。

图2.16 保存网页类型

图2.17 网页测试结果

读者完成了自己制作的第一个网页。在网页代码中的换行和空格是不起作用的，读者可以自己试试。新建文本文档只是为了启动记事本程序，所以网页制作完后可以将其删除。

这个页面虽然很简单，但是其表现了一个网页的完整结构，也完成了前面所学内容的实践论证。

2.4 小结

本书的所有实例都是静态页面，配置IIS并不是必要的，读者愿意的话，直接双击HTML文档进行浏览也是一样的效果。但是配置IIS，然后从浏览器中通过“http://localhost/”访问页面，这是模拟网络用户浏览的最佳方式。因为在进一步的动态页面学习中，必须要配置IIS才能正确运行页面。本章预先让读者适应用IIS配置站点方法浏览页面，可使读者在动态技术学习中入门更快。俗话说，工欲善其事，必先利其器。本章粗略比较了多种编辑网页的工具，读者可以根据自己需要使用。最后笔者制作了本书的第一个网页，使刚接触网页制作的读者能对以后的学习充满信心。