第四章 电子商务网站建设

null第四章 电子商务网站建设第四章 电子商务网站建设4.1 网页与HTML 4.2 “所见即所得”型网页制作工具 4.3 页面动态效果 4.4 网 站 的 发 布 4.5 数据库与动态网页设计 4.6 电子商务站点需求 4.7 小 结 习 题4.1 网页与HTML4.1 网页与HTML 4.1.1 第一个网页的制作 【例4-1】 用HTML制作一个网页。 第一个网页，我们使用"记事本"来制作。"记事本"是Windows系列自带的一个用来创建简单文档的文本编辑器，主要用来处理扩展名为".txt"的文本文件。 具体制作过程如下： 用鼠标单击"开始"→"程序"→"附件"→"记事本"，就可以打开记事本。在"记事本"的编辑区，请大家写入下列文本(注意"<"、">"要使用英文标点)，在记事本中显示如图4-1所示。null 大家好！这是我们制做的第一个网页。
点击超级链接进入新浪 null图4-1 在记事本中编辑网页的代码null 在D盘的根目录下，建立一个"MyWeb"文件夹，将刚才编辑好的文本文件保存到该文件夹里此目录下，需要注意的是保存的文件名要取名为"index.htm"，如图4-2所示。点击"保存"按钮后，在"MyWeb"文件夹下，可以发现多了一个带"e"图标的文件，显然，这就是我们刚才编辑并保存的文件。双击该文件图标，就可以在浏览器中看到效果了，这是一个简单的网页，如图4-3所示。null图4-2 保存记事本中编辑的网页null图4-3 浏览器中例4-1的效果null 4.1.2 超文本与HTML 通过刚才的操作，大家可能会提出一个疑问，网页文件到底是一个什么文件？为什么可以用"记事本"来编辑？它和扩展名为".txt"的文本文件有什么关系？下面我们一一解答这些问题。 实际上，网页文件的本质是文本文件，这就是网页文件可以用"记事本"制作的原因，只不过，网页文件是一种比较特殊的文本文件，称为超文本文件。这里的"超"主要是指超级链接，即在一个网页上可以通过事先嵌入的超级链接跳转到其他位置的网页。null 网页"超文本"文件的扩展名为".htm"或者".html"，这和普通扩展名为".txt"的文本文件是有区别的。超文本文件如果使用"记事本"打开，则表现为文本形式；如果使用浏览器打开，则表现为网页形式。实际上，使用浏览器打开网页文件时，也可以查看其文本文件的形式。点击浏览器工具栏上的"查看"→"源文件"，就可以用"记事本"打开网页的源文件了，即文本形式的网页文件。 null 在上面编辑的超文本文件中，我们输入的代码是用一种页面描述语言编写的，这种语言称为HTML(HyperText Markup Language，超文本标记语言)。换一句话说，在创建网页时，我们需要使用HTML语言来描述网页。一般地，我们认为网页文件、超文本文件、HTML文件这些说法的含义是相同的，是同一种文件不同的称呼。null 上面创建的网页中，"<"和">"包围的部分就是HTML的代码，我们称这种小的单元为标记(Tag)，即一个标记由小于号"<"、中间的标记名及其参数和一个大于号">"组成。"超文本"文件是由标记和文本组成的。标记在使用的时候，不需要区分大小写。HTML标记有单边标记和双边标记两类。凡是成对出现的标记，就是双边标记。显然，既然是成对出现，必然是有头有尾了。双边标记的开始标记和结束标记的区别，就是结束标记在小于号"<"的后面要加上斜杠字符"/"，中间的标记名和后面的大于号">"是完全一样的。例如，超级链接的标记就是双边标记。如果只有开始标记而没有结束标记，就是单边标记。例如，换行标记
就是单边标记。大家找找看，在例4-1中，有哪些双边标记？哪些单边标记？null 一个HTML文件应该具有下面的基本结构： HTML文件开始 文件头部开始 文件头部 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 文件头部结束 文件体开始 文件头部内容 文件体结束 HTML文件结束null 我们来具体解释一下以上三对标记的含义，和是HTML文件的开始和结束标记，HTML文件中所有的内容都应该在这一对标记之间，一个HTML文件总是以开始，以结束的。和标记一般位于文档的头部，用于包含当前文档的相关信息，例如标题和关键字等，通常我们将这一对标记之间的内容统称为HTML文件的"头部"。一般来说，位于头部的内容都不会在网页上直接显示，而是通过另外的方式起作用。例如，在我们制作的第一个网页中，标题的标记是在HTML的头部定义的，它里面的内容不会显示在网页上，但是会出现在浏览器的标题栏上。null 和用于定义HTML文档的正文部分，通常它在标记之后，而在标记之前，所有出现在网页上的正文内容都应该写在这一对标记之间。例如，在我们制作的第一个网页中，超级链接的标记就出现在这对标记中间，浏览时显示在浏览器的网页浏览区内。大家可以按照前面所提到的方式查看一下网页的源文件，看这些网页是否有刚才所讲的基本结构。 除了这三对标记，在HTML文件中，还有很多其他的标记。这些标记能够被浏览器识别，使HTML文件在浏览器中以一定的方式显示出来。如果读者有兴趣学习这些标记，可以查看一下相关的HTML参考手册。 null 4.1.3 超媒体 可能有的读者会有疑问了，网页文件既然是文本文件，使用的是字符方式的标记，那么，为什么我们上网时，能够看到网页中有丰富多彩的图片、动画、声音，有时候还能看到视频？这是因为"超文本"文件还有一个含义即"超媒体"。超文本与多媒体的融合产生了超媒体，事实上，超媒体的原文Hypermedia就是超文本HyperText和多媒体Multimedia的结合词。简单地讲，允许超文本的信息结点存储多媒体信息(图形、图像、音频、视频、动画和程序)，并使用与超文本类似的机制进行组织和管理，就构成了超媒体。通过下面的例子，我们来了解一下超文本文件在浏览时是如何显示图片的。null 【例4-2】 超文本文件在浏览时显示图片。 在前面建好的MyWeb文件夹下，建立一个images子文件夹，在images文件夹下，存入一幅图片， 要求 对教师党员的评价套管和固井爆破片与爆破装置仓库管理基本要求三甲医院都需要复审吗 图片的扩展名为".jpg"或".gif"，并且图片名称不能含有中文字符(否则浏览器不能正确显示图片)。例如，在下面的例子中，我们在images文件夹下存入文件名为"logo.jpg"的图片。然后，将例4-1中的HTML代码按如下文本稍加修改。null
大家好！这是我们制做的第一个网页。
点击超级链接进入新浪 null 保存该文件后，在浏览器中浏览的效果如图4-4所示，可以看到，图片已经被加入了网页中。在网页文件的HTML代码中，就是加入图片的标记。该标记的作用就是在浏览器显示网页时，告诉浏览器这里应该放置一幅图片，这幅图片在存放该网页的文件夹的子文件夹images下，文件名称为logo.jpg。如果放置的图片文件名和本例中不相同，只需要修改文件名即可。null图4-4 浏览器中例4-2的效果null 我们来对比一下在超文本页面中加入图片和在Word文档中加入图片的区别。在Word文档中，加入图片后，Word文档会把图片包含到文件中去，即使把以前的图片文件删除，Word文档也能够正确地显示图片。而超文本页面并没有把图片包含进去，只是通过文本形式的标记告诉浏览器图片的存放路径，然后由浏览器去查找图片文件并显示出来。标记的作用如同一个路标，告诉浏览器图片文件放在什么地方。如果将图片文件删除，或者图片的路径错误，浏览器中就不能正确显示图片，如图4-5所示。这说明，超文本页面中本身并不包含图片，它只是含有指示图片位置的标记，在浏览时由浏览器去调用图片。null图4-5 浏览器中不能正确显示图片的效果null 实际上，在网页中加入其他的多媒体信息如音频、视频、动画和其他程序等，使用的也是类似的方式。将超文本和多媒体结合，就构成我们平时在浏览网页时能够看到的丰富多彩的"超媒体"页面了。4.2 "所见即所得"型网页制作工具4.2 "所见即所得"型网页制作工具 4.2.1 "所见即所得"型网页制作工具 在4.1节里，我们介绍了通过"记事本"来制作网页的基本方法。这种制作网页的方法需要我们手工输入每一个标记和标记的属性，然后通过浏览器，我们才能看到最终的页面效果。我们称"记事本"这一类需要手工输入标记的网页制作工具为标记型网页制作工具。除了"记事本"之外，还有一些更专业的标记型网页制作工具如HotDog、CutePage等，这些工具一般内置了HTML参考手册，使用起来比"记事本"要方便一些，但是依然需要手工输入HTML代码。标记型页面制作工具的主要优点是用户能很方便地控制代码。由于每一行几乎都是自己手工输入的，因此用户能非常好地把握整个HTML文件的结构，同时保证代码是最精简的，没有冗余的成分。null 但是，标记型网页制作工具的缺点也是非常明显的。首先，用户必须相当熟悉HTML，由于HTML的标记以及标记的属性非常多，对于普通用户来说，记忆量过大；其次，使用标记型网页制作工具的效率太低，而电子商务网站一般内容多，更新快。例如，"易趣"网(http://www.eachnet.com)首页的HTML代码就超过了一千行。如果这些代码全部用手工输入，开发网站的过程则是很烦琐和枯燥的，发生错误时也不容易被发现，而且制作、排版不直观，难于控制，需要反复修改很多次才能达到预期的效果。 我们有没有办法像在Word中处理电子文档一样来制作网页呢？能否把制作网页的过程变得像Word中打字和排版那么简单呢？答案是肯定的，我们可以通过"所见即所得"型网页制作工具来实现这个目标。null 所谓"所见即所得"(What you see is what you get，WYSIWYG)是指创建中的HTML文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的，"所见即所得"有时候也称为"可视化"(Visual)。在使用"所见即所得"型网页制作工具创建和编辑网页的整个过程中，制作者只需要了解如何格式化文本和将各种"超媒体"插入页面即可，其他所有细节问题均由编辑器自动处理。"所见即所得"型网页制作工具采用类似文字处理软件的工作界面，把"敲代码"变成"画页面"。编辑者在编辑过程中，从屏幕上能够看到最终的页面效果。当然，在需要的时候，也能查看相应的HTML文本。 null 目前市面上流行的两种"所见即所得"型网页制作工具是FrontPage和Dreamweaver。下面就分别对这两种工具进行简要介绍，并利用FrontPage2000来实现例4-2的效果，然后再对这两种工具做一对比。 null 4.2.2 FrontPage FrontPage是属于Microsoft公司Office套件中的"所见即所得"型网页制作工具，在Office企业版中含有FrontPage的安装程序， Microsoft公司也出售单独的FrontPage安装盘。FrontPage有FrontPage97、FrontPage98、FrontPage2000、FrontPage2002(XP)这几个版本，编者推荐使用FrontPage2000或FrontPage2002(XP)。下面，我们就以FrontPage2000为例，来实现例4-2的效果。 在电脑上安装好FrontPage2000后，用鼠标单击"开始"→"程序"→"Microsoft FrontPage"，就可以进入FrontPage2000的工作界面，如图4-6所示。这个界面和Microsoft公司Office套件中的其他产品如Word等很相似。大家以前在Word中的文字处理经验可以套用。null图4-6 FrontPage2000的工作界面null 点击FrontPage2000工具栏上的"插入"→"图片"→"来自文件"，通过"选择文件"的对话框查找到D盘MyWeb文件夹下的子文件夹images下的"logo.jpg"文件，点击"确定"按钮后，就可以插入图片了。在插入图片的操作完成后，直接在编辑区输入文字"大家好！这是我们制做的第一个网页。"以及"点击超级链接进入新浪"。需要说明的是，在FrontPage2000中包含两种换行方式，一种是直接敲回车键，这种换行方式称为段落换行，这样上下两段之间会留出一行空白，对应的标记是

；另一种是按住Shift键后再敲回车键，这种换行方式称为段内换行，上、下两段之间没有空白行，对应的标记是
。null 在这里我们使用段内换行。加入超级链接的方式也很简单，选中"新浪"两个字(即按住鼠标左键选择这两个字使其反色显示)，然后点右键，在弹出的对话框中选择"超链接"选项，如图4-7所示。在弹出的"创建超链接"对话框中的URL里填入http://www.sina.com.cn，如图4-8所示。然后单击"确定"按钮，超级链接制作完毕。最后，将该文件保存在"D:\MyWeb"文件夹下，取名为"index1.htm"。 null图4-7 FrontPage2000中超级链接的制作(1)null图4-8 FrontPage2000中超级链接的制作(2)null 在FrontPage2000的左下角，有三个选项卡即"普通"、"HTML"、"预览"。刚才我们使用的是"普通"模式，即使用"所见即所得"方式编辑网页。点击"HTML"，可以切换到查看HTML代码的模式，如图4-9所示。在该模式下，就可以看到刚才编辑的网页的HTML代码。为什么我们没有输入过代码，却能看到该网页的代码呢？实际上，我们看到的代码都是由FrontPage2000帮助我们自动生成的，我们每做一步操作，FrontPage2000就会把我们的操作转换为相应的HTML代码。换一句话说，在4.1节里，我们是用手工书写代码的，现在则由FrontPage2000自动生成代码。不过，万变不离其宗，HTML的标记才是网页的本质。我们也可以在FrontPage2000的"HTML"模式下直接输入代码，换为"普通"模式时就可以看到"所见即所得"方式下编辑的效果。null图4-9 FrontPage2000的"HTML"模式null "预览"模式下，可以看到刚才编辑的文档在浏览器中浏览的效果。事实上，在制作比较简单的网页时，"普通"模式和"预览"模式没有太大区别。但是，在制作较为复杂的网页时，"普通"模式就难以精确达到与浏览器完全一致的显示效果，即"普通"模式下的网页和"预览"模式下的网页效果还是略有区别的。null 4.2.3 Dreamweaver Dreamweaver是Macromedia公司推出的"所见即所得"型网页制作工具。Dreamweaver和Macromedia推出的图像处理软件Fireworks以及动画制作软件Flash号称网页制作三剑客。Dreamweaver有过Dreamweaver 1.0、Dreamweaver 2.0、Dreamweaver 3.0、Dreamweaver 4.0以及Dreamweaver MX几个版本，现在最新的版本为Dreamweaver MX 2004，编者推荐使用Dreamweaver MX或Dreamweaver MX 2004，用户可以到http://www.macromedia.com/cn/(Macromedia中国网站)下载30天免费试用版软件，感受其强大的网页制作功能。null 在电脑上安装好Dreamweaver MX后，用鼠标单击"开始"→"程序"→"Macromedia"→"Macromedia DreamweaverMX"，就可以进入Dreamweaver MX的工作界面了，如图4-10所示。这个界面和Microsoft公司的FrontPage2000有较多的不同。 由于Dreamweaver MX的工作方式和传统的Windows应用程序不太相同，限于篇幅，不在此实现例4-2的效果了。如果读者有兴趣学习Dreamweaver MX的话，可以查阅相关书籍。null图4-10 Dreamweaver MX的工作界面null 4.2.4 FrontPage与Dreamweaver比较 FrontPage与Dreamweaver都是比较知名的网页设计软件，可称得上是网页设计中的佼佼者。但到底谁更好些呢？下面进行一下简单的比较。 FrontPage主要面向初中级用户，比较重视网页的开发效率、易学易用的引导过程；它是Microsoft公司Office套件的一个产品，其工作界面、基本使用方法、菜单、快捷键等与文字处理软件Word非常相似，如果用户有使用Word的经验，那么FrontPage的入门是非常简单的；同时，FrontPage和Word的软件同为Microsoft公司的产品，所以彼此的兼容性更好；FrontPage内置的向导功能非常强大，用户使用内置的 模板 个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载 ，不需要太多的操作就可以制作出一定规模的站点。不足之处就是限制较多，用户使用不太灵活。null Dreamweaver主攻的是网页高级设计市场，所强调的是更强大的网页控制、设计能力及创意的完全发挥。使用Dreamweaver制作的网页产生的垃圾代码少，网页可读性好，可以提高网页浏览速度；通过图层等功能，可以快速制作出复杂的页面，图片定位更容易；创作随意性强，可充分展现用户的创意。但是由于Dreamweaver的工作方式和传统的Windows应用程序不太相同，其入门要比FrontPage难，高级功能的学习也需要花费一定的时间。null 总的来说，Dreamweaver在功能的完善，使用的便捷上比FrontPage要强一些。Dreamweaver囊括了FrontPage的所有基本操作，并开发了许多独具特色的设计新概念，诸如行为(Behaviors)、时间线(Timeline)、资源库(Library)等，还支持层叠式样表(CSS)和动态网页设计。 动态网页设计是Dreamweaver最令人欣赏的功能，是它的最大的特色。所谓动态网页设计就是服务器端Web应用程序开发，最新的Dreamweaver MX和Dreamweaver MX 2004支持如ASP、ASP.NET、JSP、PHP和CFML等几乎所有的服务器端脚本语言。关于动态网页设计，请读者参考4.5节的内容。null 如果读者想学习一种"所见即所得"型网页制作工具，根据编者的开发经验，推荐使用Dreamweaver MX或Dreamweaver MX 2004。虽然入门要难一些，但以后带来的便捷和强大功能是FrontPage无法比拟的。同时，虽然有了这些"所见即所得"型网页制作工具，但编者建议读者能够读懂和理解相关的HTML代码。很多时候，对HTML代码的直接操作能够达到事半功倍的效果，出现错误之后，能够更方便地查找。所以读者如果直接学习"所见即所得"型网页制作工具，最好能够同时学习HTML语言。4.3 页面动态效果4.3 页面动态效果 4.3.1 页面动态效果 实际上，如果对HTML语言了解得比较深入的话，就会发现HTML是一种"静态"网页设计语言，它主要提供文本和图形的显示功能，但很难提供页面元素二维空间移动、精确定位文字和图形的大小及位置、多媒体控制等功能，也就是说，仅使用HTML标记是无法实现页面动态效果的。 null 随着网络技术的发展，现在已经有很多种方法能够实现页面动态效果。这些技术包括JavaScript、VBScript、Cascading Style Sheets(层叠样式表，简称CSS)、Document Object Model(文件目标模块，简称DOM)等，这些使网页"运动"起来的技术统称为DHTML(Dynamic HTML，即动态HTML)。 null 需要理解的是，DHTML作为浏览器自带的功能，实际上只是一种概念，它并不指一种专门技术(如JavaScript、CSS等)，而是各种技术综合发展的结果。正因为如此，不同的浏览器实现的程度也不一样，例如，Microsoft公司的IE浏览器和Netscape(网景公司)的Navigator(航海家)浏览器所支持的DHTML并不完全相同。总的来说，DHTML 就是一种即使在网页下载到浏览器以后，仍然能够随时变换更新网页内容、排版格式以及对网页对象进行操作的多种技术的综合。这和前面提到的HTML是不一样的，HTML是一种页面描述语言，专指一门技术。 DHTML涉及多种技术，下面我们将逐一介绍这些技术。null 4.3.2 JavaScript 为了读者对JavaScript有一个感性的认识，我们先来做一个例子。 【例4-3】 使用JavaScript创建"跑马灯"的动态效果。 使用本章第一节的方法，打开"记事本"，写入下面代码：null "跑马灯"效果的制作！ null 将该文件保存在D盘的"MyWeb"文件夹下，取名为"javascript.htm"。用浏览器打开该网页，在浏览器的状态栏，就可以看到"跑马灯"的动态效果，如图4-11所示。 null图4-11 "跑马灯"的动态效果null 我们来简单解释一下例4-3中的代码，中间的代码，就是使用JavaScript编写的程序段。而中的onload="Scroll()"表示在打开页面时，就是用该JavaScript动态效果。 通过刚才的例子，我们已经简单地了解到了JavaScript的作用。JavaScript是适应动态网页制作的需要而诞生的一种编程语言，如今越来越广泛地使用于Internet网页制作之上。如果大家想欣赏更多的JavaScript实例，可以到"洪恩在线"的"网页制作"栏目里浏览和学习。"洪恩在线"的网址为http://www.hongen.com。null JavaScript是由 Netscape公司开发的一种脚本语言(Scripting Language)，或者称为描述语言。 它可以非常自由地被嵌入到HTML 的文件之中。在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。由于JavaScript短小精悍，又是在客户机上执行的，因此大大提高了网页的浏览速度和交互能力。 null JavaScript的语法和C语言的语法很相似，如果读者有使用C语言的知识，学习JavaScript就比较容易了。需要注意的是，JavaScript和大名鼎鼎的Java语言是不同的，虽然它们的名字中都含有"Java"。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发，其前身是Oak语言；而JavaScript是Netscape公司的产品，其目的是为了扩展浏览器的功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script。JavaScript和Java也有一些相似之处，例如它们的语法和C语言的语法都比较接近，但是，它们是两种完全不同的语言，不能混为一谈。 null 如果读者有使用C、BASIC等程序设计语言的知识，就知道对于C、BASIC这些程序设计语言来说，都有相应的程序编译器，使得编写好的源程序运行。那么，JavaScript语言编写的源程序在什么地方可以编译运行呢？答案就是浏览器，运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。幸运的是，各种浏览器对JavaScript的支持都很不错。Netscape公司Navigator 3.0以上版本的浏览器都能支持JavaScript程序，微软公司Internet Explorer 3.0以上版本的浏览器基本上支持JavaScript。null 4.3.3 VBScript VBScript和JavaScript的功能基本上是相同的，也是一种能够实现页面动态效果的脚本语言。VBScript是Microsoft公司的产品，是Microsoft公司为了对抗JavaScript而推出的。VBScript的语法和BASIC很相似，可以认为VBScript是Microsoft公司程序开发语言Visual Basic的一个组成部分。如果读者有使用Visual Basic的经验，学习VBScript就相当容易了。由于VBScript是Microsoft公司的产品，因此只有IE浏览器支持，Navigator是不支持的。由于JavaScript对浏览器的兼容性更好，因此JavaScript比VBScript使用的要更多一些。 null 4.3.4 Cascading Style Sheets Cascading Style Sheets，通常简称为CSS，中文翻译为层叠样式表。为了读者对CSS有一个感性的认识，我们先来做一个例子，这个例子在网络上经常见到，即鼠标放到超级链接上的时候超级链接会改变颜色。 null 【例4-4】 用CSS创建网页的动态效果。 使用本章4.1节的方法，打开"记事本"，写入如下代码：

新浪

搜狐

null 将该文件保存在D盘的"MyWeb"文件夹下，取名为"css.htm"。用浏览器打开该网页，就可以看到页面动态效果，鼠标放到超级链接上的时候，超级链接由蓝色变成了红色。 我们来简单解释一下例4-4中的代码，中间的代码，就是使用CSS编写的程序段。这个动态效果的原理很简单，"a:link"后面的代码设置没有访问时超级链接的颜色；"a:visited"后面的代码设置访问后超级链接的颜色；"a:hover"后面的代码设置鼠标停留在超级链接上时文字的颜色。在例4-4中，我们给"a:hover"设置"#FF0000"(红色)，给"a:link"和"a:visited"设置"#0000FF"(蓝色)，当然，二者也可设置为其他颜色。null 通过刚才的例子，我们已经简单地了解到了CSS的作用。实际上，CSS主要是为了弥补HTML在页面排版和格式控制上面的不足而提出的，它的主要作用是对网页中的文本内容进行精确的格式化控制，CSS扩展了HTML的标记功能，能够实现更多的效果，并且比HTML标记更具有一般性和通用性。CSS功能相当强大，能够实现很多页面效果，例4-4就是比较常见的一个CSS的应用实例。 null 使用CSS样式惟一的缺点在于，只有较高版本的浏览器，如Internet Explorer 4.0及以上版本，Netscape Navigator 4.0及以上版本，才能够正确显示带有CSS样式的网页。Internet Explorer 3.0虽然号称支持CSS样式，但实际上并不能识别所有的CSS样式。而对于其他较早版本的浏览器，则不能支持CSS样式。当然，随着计算机技术的飞速发展，现在还在使用那些低版本浏览器的用户也实在罕见了。 null 4.3.5 Document Object Model 在了解了前面的一些技术后，有的读者可能会有一个疑问，这些技术太多，而且各个公司提出的各种技术彼此也不一定兼容，我们能否为这些技术找到一个共同的"接口"呢？WWW协会(The World Wide Web Consortium，简称W3C)也考虑到了这个问题，并提出了Document Object Model(文件目标模块，简称DOM)技术。由于理解DOM需要较多的面向对象程序设计和数据结构等计算机方面的知识，对于普通读者，这里的难度可能比较大一些。 null 可以这么说，DOM是从DHTML对象模型发展而来的。但更准确地说，DOM是DHTML对象模型根本变革的产物。 借助DHTML对象模型技术，我们能够单独地访问并更新HTML页面上的对象，每个HTML标记通过它的ID和Name属性被操纵，每个对象都具有自己的属性、方法和事件，通过方法操纵对象，通过事件触发因果过程。 null DOM则要比DTHML对象模型功能更全面，它提供了一个对整个文档的访问模型，而不仅仅再局限于单一的HTML标记(Tag)范围内。DOM将文档描绘为一个树形(Tree)结构，Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性，这种关联性包括Child(孩子)类型、Parent(双亲)类型和兄弟(Sibling)类型。null 使用DHTML对象模型访问和更新HTML页面内容时，不可避免地需要查询相关技术手册。因为HTML对象很多，每个HTML对象又有很多的属性、方法和事件，所以这种查询是相当麻烦的。但是采用DOM技术访问和更新HTML页面内容时，任何手册都可以放在一边了。首先查看一下HTML源代码，推算出页面的Tree结构模型；然后，按照层次结构关系操纵需要的属性。总之，通过将各种DHTML对象封装为DOM，我们就能够使用一个与具体语言无关的通用"接口"了。与DOM相关的更详细的内容，读者可以查阅相关书籍，或到http://www.w3.org/DOM/去查看。null 如果读者有兴趣学习的话，上面提到的JavaScript、VBScript、CSS、DOM等技术，每一种技术都要学习厚厚的一本书。如果读者仅仅是需要给自己的网页加入几个动态效果，那么大部分代码可以直接去网上下载。如果使用了"所见即所得"型网页制作工具，不论是FrontPage还是Dreamweaver，都内置了大量的动态效果，用户点点鼠标，设置几个参数，就可以做出非常漂亮的效果，尤其是Dreamweaver MX和Dreamweaver MX 2004，对JavaScript和CSS的支持非常完美。当然，如果用户能够读懂和理解相关的代码，有时候对代码的直接操作能够达到事半功倍的效果。总之，制作简单的站点时，对相关语言，不学也行，学了更好。4.4 网 站 的 发 布4.4 网 站 的 发 布 4.4.1 WWW技术 要想了解网站的发布原理和方法，我们首先必须讨论一下WWW技术。这是除Internet技术外，推动电子商务迅速发展的又一重要技术基础。 大家知道，WWW是World Wide Web的缩写，意为"万维网"。它是基于互联网提供的一种友好的信息服务，用于检索和阅读连接到互联网上的服务器的有关内容。该服务利用超文本(Hypertext)、超媒体(Hypermedia)等技术，允许用户通过浏览器(如IE、Netscape等)检索远地计算机上的文本、声音、图形以及视频文件等。许多企业已开始把已有的应用和数据扩展到Web上，以实现电子商务的价值。null 1. WWW的体系结构 简单地说，Web是建立在客户机/服务器(C/S，Client/Server)模型上的，以HTML语言和HTTP 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 为基础，能够提供面向各种Internet服务的用户界面的信息浏览系统。下面，我们来解释一下这个定义。 Web的实质是一个信息浏览系统。既然称为"系统"，它就不是由单一要素构成的。构成Web系统的对象主要有两个：Web浏览器和Web服务器。Web浏览器是客户端软件，客户(Client)必须通过这类软件实现与服务器的交互。Web服务器是为客户提供WWW服务的软、硬件系统。这种计算机通信模式被称为客户机/服务器结构。例如，大家在浏览器的地址栏输入"http://www.sina.com.cn"后，浏览器就显示相关网页。null 上面的操作结果之所以能够显示新浪的网页，是因为浏览器向新浪的WWW服务器发出了请求，而新浪的WWW服务器响应了该请求。这些过程因为都是在底层运行的，不需要人工干预，所以平时一般大家感觉不到。但是，如果现在新浪网的服务器被黑客攻击了，那么大家就没办法访问新浪网了。这时候，就能够体会到客户机/服务器的这种结构了。 null 当然，客户机程序有时候使用浏览器(例如浏览网页)，有时候也不使用浏览器(例如使用Outlook、Foxmail发送电子邮件)，我们将这些统称为C/S结构。现在网络上常常提到的B/S(Browser/Server，浏览器/服务器结构)可以看成C/S的特例或者改进。所谓的B/S，即客户机程序仅仅采用浏览器(Browser)，这样做的好处是用户界面比较统一。 客户端Web浏览器要向Web服务器提出服务请求，必须遵循两者特定的通信规约--HTTP。Web服务器响应客户端的请求，并以HTML文档方式给出反馈信息。HTML语言经浏览器翻译后，展现在用户面前的就是图文并茂的WWW页面了。null Web最初用来发布静态HTML页面，即仅能提供信息浏览服务。随着技术的不断进步，WWW的功能不断增强。现在，我们可以通过WWW享受各种Internet服务，包括E-mail服务、FTP服务、Telnet服务、新闻组(Newsgroup)服务等。在WWW出现之前，这些Internet服务已经存在，分别通过不同的客户和服务器端软件实现。WWW的出现，使这些分散的服务可以集中在统一的用户界面下执行，这个统一的界面就是Web浏览器为我们提供的WWW页面。当然，目前这些独立的服务与WWW服务同时存在，并仍被广泛使用着。 null 比如：我们仍可以通过Outlook Express或Fox mail收发邮件；使用CuteFTP上传、下载文件；使用Cterm或NetTerm进行远程登录；或是通过NetMeeting召开网络会议。这些专用服务软件的优势是它们往往更加"专业"。 基本的Web体系结构和通信模式可见图4-12，其扩展应用及通信模型将在4.5节加以介绍。 null图4-12 Web的基本体系结构模型null 2. Web浏览器的功能 Web浏览器是用来与Web服务器交互的工具软件，它可以向Web服务器发出服务请求，同时接收Web服务器送回的请求响应，并以Web页面的形式将其显示出来。具体来说，Web浏览器包括如下基本功能。 1) 检索查询 Web浏览器可以读入超文本标记语言(HTML，HyperText Markup Language)文件，解释HTML所描述的图表、声音、动画、表格以及链接信息，并可利用超文本传输协议(HTTP，HyperText Transfer Protocol)在任意Web服务器上获得信息。null 2) 文件服务 浏览器可在文件下载时实时查阅，并通过HTTP跟踪感兴趣的链接，也可以随时中止下载过程，对正在查阅的文件随时保存、打印、前后浏览等。 3) 热表管理 "热表"是用户访问过的Web地址的列表，浏览器能够记住这些地址，供用户进行不同网页地址之间的快速切换。 null 4) 离线浏览 能够把从Web服务器获得的网页、图像以及其他数据存放在磁盘缓存中，并建立相应的文档索引。当使用浏览器进行数据检索时，浏览器首先检索磁盘缓存中是否存在相应的数据，如果有，则直接从本地磁盘上读取、显示，而不再从Web服务器上下载，节省了信息获取的时间。 null 5) 其他Internet服务 浏览器还可以提供其他的一些Internet服务，如文件传输FTP、电子邮件E-mail、远程登录Telnet、网络新闻组UseNet等。表4-1对几种常用的Web浏览器进行了简单介绍。null表4-1　 几种常用的Web浏览器null 3. Web服务器的功能 Web服务器是驻留在服务器计算机上的一个应用程序，它通过Web浏览器与用户进行交互。Web服务器主要包括如下功能。 1) 静态信息发布 Web服务器可以将大量HTML文件及其他信息文件存储在自己的文件系统中，然后根据浏览器发出的请求，将相应的文件发送给浏览器。这样，用户就可以通过浏览器看到含有文字、图像、声音及动画等多媒体信息的页面。同时，通过点击页面中具有超链接的文字或图像，用户可以迅速切换到其他页面上。null 2) 动态信息发布 Web服务器还可以根据用户要求动态生成页面发送给用户，利用Web服务器的动态信息发布功能可以获得交互的效果，如用户可以将自己的姓名、地址、信用卡号、购买意向等通过页面上的表格发送给Web服务器，Web服务器可以将这些信息写入数据库，并给用户一个反馈，实现电子购物。用户也可以通过浏览器将自己要查找的某方面信息通过页面上的表格发送给Web服务器，Web服务器可以查找数据库，并将查找的结果反馈给用户。表4-2对几种常用的Web服务器进行了简要的介绍。nullnull表4-2　几种常用的Web服务器null 注：① CGI：Common Gateway Interface，公共网关接口； ② ISAPI：Internet Server Application Programming Interface, Internet服务应用程序接口； ③ NSAPI：Netscape Server Application Programming Interface, Netscape服务应用程序接口； ④ ASP：Active Server Pages，活动服务器页； ⑤ PHP：Hypertext Preprocessor，超文本预处理器； ⑥ JSP：Java Server Pages,Servlet和Java服务器页面； ⑦ J2EE：Java2 platform Enterprise Edition，Java2平台企业版。null 4.4.2　发布站点 通过4.4.1节的介绍，大家已经了解了WWW的基本工作方式和机理。 如果想拥有自己的服务器(一台性能良好的，装有WWW服务器软件的计算机)，那么，你只需在这台服务器上进行一些设置，就可以发布你的站点了。如果没有自己的服务器，可以向专门的ISP申请主页空间(多数是收费的服务，特别是商务站点，也有一些站点提供容量较小的免费个人主页空间)，并把你的站点上传(可使用CuteFTP等专门的上传工具)到ISP为你提供的服务器上。null 作为访问量较小的个人站点，我们甚至可以使用运行Windows 98或Windows 2000的PC作为WWW服务器。最简单的发布方法是利用微软的个人Web服务器PWS(Personal Web Server)软件发布自己的个人站点。在完整的Windows操作系统光盘里即包含有PWS，它位于光盘的add-onspws文件夹中。运行其中的setup.exe进行安装，然后再进行相应的设置就可以了。当然，这种计算机和操作系统的组合不能支持每秒2万次访问的WWW流量。 对于访问量较大的站点，可以使用性能较好的服务器(而不是PC)进行站点发布。下面我们来配置一台WWW服务器。现在常用的服务器操作系统有Windows NT、Windows 2000、UNIX、Linux。由于一般读者对Windows系列较为熟悉，我们采用Windows2000 Server作为WWW服务器的实现范例。null 进入Windows2000 Server后，在桌面上用鼠标右键单击"我的电脑"，在弹出的对话框中选择"管理"，就可以打开"计算机管理"窗口了，双击"服务和应用程序"，打开其菜单后再双击"Internet信息服务"。在"Internet信息服务"上点鼠标右键，在弹出的菜单中选择"新建"→"Web站点"，如图4-13所示，就可以打开"Web站点创建向导"，如图4-14所示。null图4-13 使用Windows2000 Server建立WWW服务器(1)null图4-14 使用Windows2000 Server建立WWW服务器(2)null 选择"下一步"，"站点创建向导"提示输入Web站点的说明，这里就是给网站取一个名称，输入"MyWeb"，如图4-15所示。null图4-15 使用Windows2000 Server建立WWW服务器(3)null 再点击"下一步"，"站点创建向导"提示输入Web站点使用的IP地址，点击下拉条，选择"192.168.15.22"，如图4-16所示。null图4-16 使用Windows2000 Server建立WWW服务器(4)null 需要注意的是，这里的IP地址"192.168.15.22"是编者现在使用的计算机的IP地址，如果读者自己做操作，那么该处能够选择的IP地址是不一样的。下面的TCP端口号是用默认的80，主机头不用填写，再点击"下一步"，"站点创建向导"提示输入Web站点的主目录的路径，在第一节中，我们建立的站点存放在D盘的"MyWeb"文件夹下，所以在该处点击"浏览"，选择D盘的"MyWeb"文件夹，如图4-17所示。点击下一步，"站点创建向导"提示输入Web站点主目录的访问权限，默认为"读取"和"运行脚本"，如图4-18所示，在这里，我们不需要更改。点击下一步，"站点创建向导"提示所有的操作都已经完成，如图4-19所示，点击"完成"，操作结束。null图4-17 使用Windows2000 Server建立WWW服务器(5)null图4-18 　使用Windows2000 Server建立WWW服务器(6)null图4-19 使用Windows2000 Server建立WWW服务器(7)null 由于Windows2000 Server对于一个IP地址只能够支持一个WWW站点，如果用户出现了如图4-20的界面，则需要把该服务器内其他的WWW站点停掉，才能启用"MyWeb"站点。操作如下：用鼠标右键点击"默认Web站点"，在弹出的菜单中选择"停止"，如图4-21所示；然后用鼠标右键点击"MyWeb"，在弹出的菜单中选择"启动"，如图4-22所示。这样，就可以启动"MyWeb"站点了。null图4-20 "MyWeb"站点为"已停止"的状态 null图4-21 将默认Web站点停止 null图4-22 启动"MyWeb"站点null 一个网站的首页一般命名为"index.htm"，在本章第一节中做的第一个网页取名即为"index.htm"。我们需要对"MyWeb"站点进行首页设置。用鼠标右键点击"MyWeb"，在弹出的菜单中选择"属性"，在弹出的对话框中选择"文档"，如图4-23所示。点击"添加"，在弹出的对话框中输入"index.htm"，如图4-24所示，然后点击"确定"。null图4-23 设置"MyWeb"站点首页为"index.htm"(1)null图4-24 设置"MyWeb"站点首页为"index.htm"(2)null 打开IE浏览器，在地址栏输入"MyWeb"的IP地址"192.168.15.22"(如果读者的IP地址不一样，在Windows 2000或WindowsXP操作系统中，用鼠标单击"开始"→"程序"→"附件"→"命令提示符"，输入"ipconfig"，敲回车，即可以查看本机的IP地址，如图4-25所示)，就可以通过浏览器浏览"MyWeb"站点了，如图4-26所示。null图4-25 使用"ipconfig"命令查看本机的IP地址null图4-26 通过浏览器浏览"MyWeb"站点null 因为笔者的计算机的IP地址"192.168.15.22"是私有IP(这类IP地址只能够在内部网络使用，例如学校的校园网， 10.0.0.0～10.255.255.255，172.16.0.0～172.31.255.255，192.168.0.0～192.168.255.255都是私有IP地址)，所以不需要收取任何费用，作为外部用户，是不能够访问的。如果要让外部的用户访问，则需要向电信公司申请IP地址，然后申请专线接入，或者将服务器放入电信公司的机房(称为服务器托管)，还需要申请域名，最后才能够从外部访问。null 4.4.3　虚拟主机 上面的做法是我们自己来建立服务器，称为自营主机。自营主机是企业拥有并且维护服务器及所有的软件。这种方式的优点是完全的控制权、随时接近硬件和完全的灵活性。缺点是需要额外的人员、WWW知识、昂贵的设备和互联网的高速接入。让我们来从成本角度考虑一下上面做法的费用。首先，用户需要购买服务器，这需要数万元(也有更贵的服务器)，当然，如果网站的访问量不大，也可以使用普通PC。如果是专线接入，根据接入速率不同，每月需要一千至数千元，如果是服务器托管(服务器托管是企业拥有主机，但放在主机服务商那里，由主机服务商根据企业的要求提供维护)，每月也需要一千元左右。如果算上各种其他的费用，一个网站一年所需的维护费用至少数万元。若站点规模较大，则需要数十万到上百万的费用。null 对于规模较大的企业，按照上面的方式建立网站是不错的选择。但是，对于中小型企业或个人用户来说，这无疑是一笔难以承受的投入。这时，我们可以选择"虚拟主机"服务。 所谓"虚拟主机"(Virtual Host/Virtual Server)，也称虚拟服务器或共享主机，是指使用特殊的软硬件技术，把一台运行在互联网上的服务器主机分成一台台"虚拟"的主机，以使多个用户可以共用一台服务器，达到降低建站成本和维护费用的目的。每一台"虚拟