第四章++电子商务网站建设.ppt

第四章电子商务网站建设 4 1网页与HTML4 2 所见即所得 型网页制作工具4 3页面动态效果4 4网站的发布4 5数据库与动态网页设计4 6电子商务站点需求4 7小结习题 4 1网页与HTML 4 1 1第一个网页的制作 例4 1 用HTML制作一个网页 第一个网页 我们使用 记事本 来制作 记事本 是Windows系列自带的一个用来创建简单文档的文本编辑器 主要用来处理扩展名为 txt 的文本文件 具体制作过程如下 用鼠标单击 开始 程序 附件 记事本 就可以打开记事本 在 记事本 的编辑区 请大家写入下列文本 注意 要使用英文标点 在记事本中显示如图4 1所示 大家好 大家好 这是我们制做的第一个网页 点击超级链接进入新浪 图4 1在记事本中编辑网页的代码 在D盘的根目录下 建立一个 MyWeb 文件夹 将刚才编辑好的文本文件保存到该文件夹里此目录下 需要注意的是保存的文件名要取名为 index htm 如图4 2所示 点击 保存 按钮后 在 MyWeb 文件夹下 可以发现多了一个带 e 图标的文件 显然 这就是我们刚才编辑并保存的文件 双击该文件图标 就可以在浏览器中看到效果了 这是一个简单的网页 如图4 3所示 图4 2保存记事本中编辑的网页 图4 3浏览器中例4 1的效果 4 1 2超文本与HTML通过刚才的操作 大家可能会提出一个疑问 网页文件到底是一个什么文件 为什么可以用 记事本 来编辑 它和扩展名为 txt 的文本文件有什么关系 下面我们一一解答这些问题 实际上 网页文件的本质是文本文件 这就是网页文件可以用 记事本 制作的原因 只不过 网页文件是一种比较特殊的文本文件 称为超文本文件 这里的 超 主要是指超级链接 即在一个网页上可以通过事先嵌入的超级链接跳转到其他位置的网页 网页 超文本 文件的扩展名为 htm 或者 html 这和普通扩展名为 txt 的文本文件是有区别的 超文本文件如果使用 记事本 打开 则表现为文本形式 如果使用浏览器打开 则表现为网页形式 实际上 使用浏览器打开网页文件时 也可以查看其文本文件的形式 点击浏览器工具栏上的 查看 源文件 就可以用 记事本 打开网页的源文件了 即文本形式的网页文件 在上面编辑的超文本文件中 我们输入的代码是用一种页面描述语言编写的 这种语言称为HTML HyperTextMarkupLanguage 超文本标记语言 换一句话说 在创建网页时 我们需要使用HTML语言来描述网页 一般地 我们认为网页文件 超文本文件 HTML文件这些说法的含义是相同的 是同一种文件不同的称呼 上面创建的网页中 包围的部分就是HTML的代码 我们称这种小的单元为标记 Tag 即一个标记由小于号 组成 超文本 文件是由标记和文本组成的 标记在使用的时候 不需要区分大小写 HTML标记有单边标记和双边标记两类 凡是成对出现的标记 就是双边标记 显然 既然是成对出现 必然是有头有尾了 双边标记的开始标记和结束标记的区别 就是结束标记在小于号 是完全一样的 例如 超级链接的标记就是双边标记 如果只有开始标记而没有结束标记 就是单边标记 例如 换行标记就是单边标记 大家找找看 在例4 1中 有哪些双边标记 哪些单边标记 一个HTML文件应该具有下面的基本结构 HTML文件开始文件头部开始文件头部内容文件头部结束文件体开始文件头部内容文件体结束HTML文件结束 我们来具体解释一下以上三对标记的含义 和是HTML文件的开始和结束标记 HTML文件中所有的内容都应该在这一对标记之间 一个HTML文件总是以开始 以结束的 和标记一般位于文档的头部 用于包含当前文档的相关信息 例如标题和关键字等 通常我们将这一对标记之间的内容统称为HTML文件的 头部 一般来说 位于头部的内容都不会在网页上直接显示 而是通过另外的方式起作用 例如 在我们制作的第一个网页中 标题的标记是在HTML的头部定义的 它里面的内容不会显示在网页上 但是会出现在浏览器的标题栏上 和用于定义HTML文档的正文部分 通常它在标记之后 而在标记之前 所有出现在网页上的正文内容都应该写在这一对标记之间 例如 在我们制作的第一个网页中 超级链接的标记就出现在这对标记中间 浏览时显示在浏览器的网页浏览区内 大家可以按照前面所提到的方式查看一下网页的源文件 看这些网页是否有刚才所讲的基本结构 除了这三对标记 在HTML文件中 还有很多其他的标记 这些标记能够被浏览器识别 使HTML文件在浏览器中以一定的方式显示出来 如果读者有兴趣学习这些标记 可以查看一下相关的HTML参考手册 4 1 3超媒体可能有的读者会有疑问了 网页文件既然是文本文件 使用的是字符方式的标记 那么 为什么我们上网时 能够看到网页中有丰富多彩的图片 动画 声音 有时候还能看到视频 这是因为 超文本 文件还有一个含义即 超媒体 超文本与多媒体的融合产生了超媒体 事实上 超媒体的原文Hypermedia就是超文本HyperText和多媒体Multimedia的结合词 简单地讲 允许超文本的信息结点存储多媒体信息 图形 图像 音频 视频 动画和程序 并使用与超文本类似的机制进行组织和管理 就构成了超媒体 通过下面的例子 我们来了解一下超文本文件在浏览时是如何显示图片的 例4 2 超文本文件在浏览时显示图片 在前面建好的MyWeb文件夹下 建立一个images子文件夹 在images文件夹下 存入一幅图片 要求图片的扩展名为 jpg 或 gif 并且图片名称不能含有中文字符 否则浏览器不能正确显示图片 例如 在下面的例子中 我们在images文件夹下存入文件名为 logo jpg 的图片 然后 将例4 1中的HTML代码按如下文本稍加修改 大家好 大家好 这是我们制做的第一个网页 点击超级链接进入新浪 保存该文件后 在浏览器中浏览的效果如图4 4所示 可以看到 图片已经被加入了网页中 在网页文件的HTML代码中 就是加入图片的标记 该标记的作用就是在浏览器显示网页时 告诉浏览器这里应该放置一幅图片 这幅图片在存放该网页的文件夹的子文件夹images下 文件名称为logo jpg 如果放置的图片文件名和本例中不相同 只需要修改文件名即可 图4 4浏览器中例4 2的效果 我们来对比一下在超文本页面中加入图片和在Word文档中加入图片的区别 在Word文档中 加入图片后 Word文档会把图片包含到文件中去 即使把以前的图片文件删除 Word文档也能够正确地显示图片 而超文本页面并没有把图片包含进去 只是通过文本形式的标记告诉浏览器图片的存放路径 然后由浏览器去查找图片文件并显示出来 标记的作用如同一个路标 告诉浏览器图片文件放在什么地方 如果将图片文件删除 或者图片的路径错误 浏览器中就不能正确显示图片 如图4 5所示 这说明 超文本页面中本身并不包含图片 它只是含有指示图片位置的标记 在浏览时由浏览器去调用图片 图4 5浏览器中不能正确显示图片的效果 实际上 在网页中加入其他的多媒体信息如音频 视频 动画和其他程序等 使用的也是类似的方式 将超文本和多媒体结合 就构成我们平时在浏览网页时能够看到的丰富多彩的 超媒体 页面了 4 2 所见即所得 型网页制作工具 4 2 1 所见即所得 型网页制作工具在4 1节里 我们介绍了通过 记事本 来制作网页的基本方法 这种制作网页的方法需要我们手工输入每一个标记和标记的属性 然后通过浏览器 我们才能看到最终的页面效果 我们称 记事本 这一类需要手工输入标记的网页制作工具为标记型网页制作工具 除了 记事本 之外 还有一些更专业的标记型网页制作工具如HotDog CutePage等 这些工具一般内置了HTML参考手册 使用起来比 记事本 要方便一些 但是依然需要手工输入HTML代码 标记型页面制作工具的主要优点是用户能很方便地控制代码 由于每一行几乎都是自己手工输入的 因此用户能非常好地把握整个HTML文件的结构 同时保证代码是最精简的 没有冗余的成分 但是 标记型网页制作工具的缺点也是非常明显的 首先 用户必须相当熟悉HTML 由于HTML的标记以及标记的属性非常多 对于普通用户来说 记忆量过大 其次 使用标记型网页制作工具的效率太低 而电子商务网站一般内容多 更新快 例如 易趣 网 首页的HTML代码就超过了一千行 如果这些代码全部用手工输入 开发网站的过程则是很烦琐和枯燥的 发生错误时也不容易被发现 而且制作 排版不直观 难于控制 需要反复修改很多次才能达到预期的效果 我们有没有办法像在Word中处理电子文档一样来制作网页呢 能否把制作网页的过程变得像Word中打字和排版那么简单呢 答案是肯定的 我们可以通过 所见即所得 型网页制作工具来实现这个目标 所谓 所见即所得 Whatyouseeiswhatyouget WYSIWYG 是指创建中的HTML文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的 所见即所得 有时候也称为 可视化 Visual 在使用 所见即所得 型网页制作工具创建和编辑网页的整个过程中 制作者只需要了解如何格式化文本和将各种 超媒体 插入页面即可 其他所有细节问题均由编辑器自动处理 所见即所得 型网页制作工具采用类似文字处理软件的工作界面 把 敲代码 变成 画页面 编辑者在编辑过程中 从屏幕上能够看到最终的页面效果 当然 在需要的时候 也能查看相应的HTML文本 目前市面上流行的两种 所见即所得 型网页制作工具是FrontPage和Dreamweaver 下面就分别对这两种工具进行简要介绍 并利用FrontPage2000来实现例4 2的效果 然后再对这两种工具做一对比 4 2 2FrontPageFrontPage是属于Microsoft公司Office套件中的 所见即所得 型网页制作工具 在Office企业版中含有FrontPage的安装程序 Microsoft公司也出售单独的FrontPage安装盘 FrontPage有FrontPage97 FrontPage98 FrontPage2000 FrontPage2002 XP 这几个版本 编者推荐使用FrontPage2000或FrontPage2002 XP 下面 我们就以FrontPage2000为例 来实现例4 2的效果 在电脑上安装好FrontPage2000后 用鼠标单击 开始 程序 MicrosoftFrontPage 就可以进入FrontPage2000的工作界面 如图4 6所示 这个界面和Microsoft公司Office套件中的其他产品如Word等很相似 大家以前在Word中的文字处理经验可以套用 图4 6FrontPage2000的工作界面 点击FrontPage2000工具栏上的 插入 图片 来自文件 通过 选择文件 的对话框查找到D盘MyWeb文件夹下的子文件夹images下的 logo jpg 文件 点击 确定 按钮后 就可以插入图片了 在插入图片的操作完成后 直接在编辑区输入文字 大家好 这是我们制做的第一个网页 以及 点击超级链接进入新浪 需要说明的是 在FrontPage2000中包含两种换行方式 一种是直接敲回车键 这种换行方式称为段落换行 这样上下两段之间会留出一行空白 对应的标记是 另一种是按住Shift键后再敲回车键 这种换行方式称为段内换行 上 下两段之间没有空白行 对应的标记是 在这里我们使用段内换行 加入超级链接的方式也很简单 选中 新浪 两个字 即按住鼠标左键选择这两个字使其反色显示 然后点右键 在弹出的对话框中选择 超链接 选项 如图4 7所示 在弹出的 创建超链接 对话框中的URL里填入 如图4 8所示 然后单击 确定 按钮 超级链接制作完毕 最后 将该文件保存在 D MyWeb 文件夹下 取名为 index1 htm 图4 7FrontPage2000中超级链接的制作 1 图4 8FrontPage2000中超级链接的制作 2 在FrontPage2000的左下角 有三个选项卡即 普通 HTML 预览 刚才我们使用的是 普通 模式 即使用 所见即所得 方式编辑网页 点击 HTML 可以切换到查看HTML代码的模式 如图4 9所示 在该模式下 就可以看到刚才编辑的网页的HTML代码 为什么我们没有输入过代码 却能看到该网页的代码呢 实际上 我们看到的代码都是由FrontPage2000帮助我们自动生成的 我们每做一步操作 FrontPage2000就会把我们的操作转换为相应的HTML代码 换一句话说 在4 1节里 我们是用手工书写代码的 现在则由FrontPage2000自动生成代码 不过 万变不离其宗 HTML的标记才是网页的本质 我们也可以在FrontPage2000的 HTML 模式下直接输入代码 换为 普通 模式时就可以看到 所见即所得 方式下编辑的效果 图4 9FrontPage2000的 HTML 模式 预览 模式下 可以看到刚才编辑的文档在浏览器中浏览的效果 事实上 在制作比较简单的网页时 普通 模式和 预览 模式没有太大区别 但是 在制作较为复杂的网页时 普通 模式就难以精确达到与浏览器完全一致的显示效果 即 普通 模式下的网页和 预览 模式下的网页效果还是略有区别的 4 2 3DreamweaverDreamweaver是Macromedia公司推出的 所见即所得 型网页制作工具 Dreamweaver和Macromedia推出的图像处理软件Fireworks以及动画制作软件Flash号称网页制作三剑客 Dreamweaver有过Dreamweaver1 0 Dreamweaver2 0 Dreamweaver3 0 Dreamweaver4 0以及DreamweaverMX几个版本 现在最新的版本为DreamweaverMX2004 编者推荐使用DreamweaverMX或DreamweaverMX2004 用户可以到 在电脑上安装好DreamweaverMX后 用鼠标单击 开始 程序 Macromedia MacromediaDreamweaverMX 就可以进入DreamweaverMX的工作界面了 如图4 10所示 这个界面和Microsoft公司的FrontPage2000有较多的不同 由于DreamweaverMX的工作方式和传统的Windows应用程序不太相同 限于篇幅 不在此实现例4 2的效果了 如果读者有兴趣学习DreamweaverMX的话 可以查阅相关书籍 图4 10DreamweaverMX的工作界面 4 2 4FrontPage与Dreamweaver比较FrontPage与Dreamweaver都是比较知名的网页设计软件 可称得上是网页设计中的佼佼者 但到底谁更好些呢 下面进行一下简单的比较 FrontPage主要面向初中级用户 比较重视网页的开发效率 易学易用的引导过程 它是Microsoft公司Office套件的一个产品 其工作界面 基本使用方法 菜单 快捷键等与文字处理软件Word非常相似 如果用户有使用Word的经验 那么FrontPage的入门是非常简单的 同时 FrontPage和Word的软件同为Microsoft公司的产品 所以彼此的兼容性更好 FrontPage内置的向导功能非常强大 用户使用内置的模板 不需要太多的操作就可以制作出一定规模的站点 不足之处就是限制较多 用户使用不太灵活 Dreamweaver主攻的是网页高级设计市场 所强调的是更强大的网页控制 设计能力及创意的完全发挥 使用Dreamweaver制作的网页产生的垃圾代码少 网页可读性好 可以提高网页浏览速度 通过图层等功能 可以快速制作出复杂的页面 图片定位更容易 创作随意性强 可充分展现用户的创意 但是由于Dreamweaver的工作方式和传统的Windows应用程序不太相同 其入门要比FrontPage难 高级功能的学习也需要花费一定的时间 总的来说 Dreamweaver在功能的完善 使用的便捷上比FrontPage要强一些 Dreamweaver囊括了FrontPage的所有基本操作 并开发了许多独具特色的设计新概念 诸如行为 Behaviors 时间线 Timeline 资源库 Library 等 还支持层叠式样表 CSS 和动态网页设计 动态网页设计是Dreamweaver最令人欣赏的功能 是它的最大的特色 所谓动态网页设计就是服务器端Web应用程序开发 最新的DreamweaverMX和DreamweaverMX2004支持如ASP ASP NET JSP PHP和CFML等几乎所有的服务器端脚本语言 关于动态网页设计 请读者参考4 5节的内容 如果读者想学习一种 所见即所得 型网页制作工具 根据编者的开发经验 推荐使用DreamweaverMX或DreamweaverMX2004 虽然入门要难一些 但以后带来的便捷和强大功能是FrontPage无法比拟的 同时 虽然有了这些 所见即所得 型网页制作工具 但编者建议读者能够读懂和理解相关的HTML代码 很多时候 对HTML代码的直接操作能够达到事半功倍的效果 出现错误之后 能够更方便地查找 所以读者如果直接学习 所见即所得 型网页制作工具 最好能够同时学习HTML语言 4 3页面动态效果 4 3 1页面动态效果实际上 如果对HTML语言了解得比较深入的话 就会发现HTML是一种 静态 网页设计语言 它主要提供文本和图形的显示功能 但很难提供页面元素二维空间移动 精确定位文字和图形的大小及位置 多媒体控制等功能 也就是说 仅使用HTML标记是无法实现页面动态效果的 随着网络技术的发展 现在已经有很多种方法能够实现页面动态效果 这些技术包括JavaScript VBScript CascadingStyleSheets 层叠样式表 简称CSS DocumentObjectModel 文件目标模块 简称DOM 等 这些使网页 运动 起来的技术统称为DHTML DynamicHTML 即动态HTML 需要理解的是 DHTML作为浏览器自带的功能 实际上只是一种概念 它并不指一种专门技术 如JavaScript CSS等 而是各种技术综合发展的结果 正因为如此 不同的浏览器实现的程度也不一样 例如 Microsoft公司的IE浏览器和Netscape 网景公司 的Navigator 航海家 浏览器所支持的DHTML并不完全相同 总的来说 DHTML就是一种即使在网页下载到浏览器以后 仍然能够随时变换更新网页内容 排版格式以及对网页对象进行操作的多种技术的综合 这和前面提到的HTML是不一样的 HTML是一种页面描述语言 专指一门技术 DHTML涉及多种技术 下面我们将逐一介绍这些技术 4 3 2JavaScript为了读者对JavaScript有一个感性的认识 我们先来做一个例子 例4 3 使用JavaScript创建 跑马灯 的动态效果 使用本章第一节的方法 打开 记事本 写入下面代码 varmsg 大家好 这里是 跑马灯 的动态效果 varinterval 300 seq 0 functionScroll len msg length window status msg substring 0 seq 1 seq if seq len seq 0 window setTimeout Scroll interval 大家好 跑马灯 效果的制作 将该文件保存在D盘的 MyWeb 文件夹下 取名为 javascript htm 用浏览器打开该网页 在浏览器的状态栏 就可以看到 跑马灯 的动态效果 如图4 11所示 图4 11 跑马灯 的动态效果 我们来简单解释一下例4 3中的代码 中间的代码 就是使用JavaScript编写的程序段 而中的onload Scroll 表示在打开页面时 就是用该JavaScript动态效果 通过刚才的例子 我们已经简单地了解到了JavaScript的作用 JavaScript是适应动态网页制作的需要而诞生的一种编程语言 如今越来越广泛地使用于Internet网页制作之上 如果大家想欣赏更多的JavaScript实例 可以到 洪恩在线 的 网页制作 栏目里浏览和学习 洪恩在线 的网址为 JavaScript是由Netscape公司开发的一种脚本语言 ScriptingLanguage 或者称为描述语言 它可以非常自由地被嵌入到HTML的文件之中 在HTML基础上 使用JavaScript可以开发交互式Web网页 JavaScript的出现使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 使网页包含更多活跃的元素和更加精彩的内容 由于JavaScript短小精悍 又是在客户机上执行的 因此大大提高了网页的浏览速度和交互能力 JavaScript的语法和C语言的语法很相似 如果读者有使用C语言的知识 学习JavaScript就比较容易了 需要注意的是 JavaScript和大名鼎鼎的Java语言是不同的 虽然它们的名字中都含有 Java Java是SUN公司推出的新一代面向对象的程序设计语言 特别适合于Internet应用程序开发 其前身是Oak语言 而JavaScript是Netscape公司的产品 其目的是为了扩展浏览器的功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言 它的前身是LiveScript JavaScript和Java也有一些相似之处 例如它们的语法和C语言的语法都比较接近 但是 它们是两种完全不同的语言 不能混为一谈 如果读者有使用C BASIC等程序设计语言的知识 就知道对于C BASIC这些程序设计语言来说 都有相应的程序编译器 使得编写好的源程序运行 那么 JavaScript语言编写的源程序在什么地方可以编译运行呢 答案就是浏览器 运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器 幸运的是 各种浏览器对JavaScript的支持都很不错 Netscape公司Navigator3 0以上版本的浏览器都能支持JavaScript程序 微软公司InternetExplorer3 0以上版本的浏览器基本上支持JavaScript 4 3 3VBScriptVBScript和JavaScript的功能基本上是相同的 也是一种能够实现页面动态效果的脚本语言 VBScript是Microsoft公司的产品 是Microsoft公司为了对抗JavaScript而推出的 VBScript的语法和BASIC很相似 可以认为VBScript是Microsoft公司程序开发语言VisualBasic的一个组成部分 如果读者有使用VisualBasic的经验 学习VBScript就相当容易了 由于VBScript是Microsoft公司的产品 因此只有IE浏览器支持 Navigator是不支持的 由于JavaScript对浏览器的兼容性更好 因此JavaScript比VBScript使用的要更多一些 4 3 4CascadingStyleSheetsCascadingStyleSheets 通常简称为CSS 中文翻译为层叠样式表 为了读者对CSS有一个感性的认识 我们先来做一个例子 这个例子在网络上经常见到 即鼠标放到超级链接上的时候超级链接会改变颜色 例4 4 用CSS创建网页的动态效果 使用本章4 1节的方法 打开 记事本 写入如下代码 大家好 a link color 0000FF a visited color 0000FF a hover color FF0000 新浪搜狐 将该文件保存在D盘的 MyWeb 文件夹下 取名为 css htm 用浏览器打开该网页 就可以看到页面动态效果 鼠标放到超级链接上的时候 超级链接由蓝色变成了红色 我们来简单解释一下例4 4中的代码 中间的代码 就是使用CSS编写的程序段 这个动态效果的原理很简单 a link 后面的代码设置没有访问时超级链接的颜色 a visited 后面的代码设置访问后超级链接的颜色 a hover 后面的代码设置鼠标停留在超级链接上时文字的颜色 在例4 4中 我们给 a hover 设置 FF0000 红色 给 a link 和 a visited 设置 0000FF 蓝色 当然 二者也可设置为其他颜色 通过刚才的例子 我们已经简单地了解到了CSS的作用 实际上 CSS主要是为了弥补HTML在页面排版和格式控制上面的不足而提出的 它的主要作用是对网页中的文本内容进行精确的格式化控制 CSS扩展了HTML的标记功能 能够实现更多的效果 并且比HTML标记更具有一般性和通用性 CSS功能相当强大 能够实现很多页面效果 例4 4就是比较常见的一个CSS的应用实例 使用CSS样式惟一的缺点在于 只有较高版本的浏览器 如InternetExplorer4 0及以上版本 NetscapeNavigator4 0及以上版本 才能够正确显示带有CSS样式的网页 InternetExplorer3 0虽然号称支持CSS样式 但实际上并不能识别所有的CSS样式 而对于其他较早版本的浏览器 则不能支持CSS样式 当然 随着计算机技术的飞速发展 现在还在使用那些低版本浏览器的用户也实在罕见了 4 3 5DocumentObjectModel在了解了前面的一些技术后 有的读者可能会有一个疑问 这些技术太多 而且各个公司提出的各种技术彼此也不一定兼容 我们能否为这些技术找到一个共同的 接口 呢 WWW协会 TheWorldWideWebConsortium 简称W3C 也考虑到了这个问题 并提出了DocumentObjectModel 文件目标模块 简称DOM 技术 由于理解DOM需要较多的面向对象程序设计和数据结构等计算机方面的知识 对于普通读者 这里的难度可能比较大一些 可以这么说 DOM是从DHTML对象模型发展而来的 但更准确地说 DOM是DHTML对象模型根本变革的产物 借助DHTML对象模型技术 我们能够单独地访问并更新HTML页面上的对象 每个HTML标记通过它的ID和Name属性被操纵 每个对象都具有自己的属性 方法和事件 通过方法操纵对象 通过事件触发因果过程 DOM则要比DTHML对象模型功能更全面 它提供了一个对整个文档的访问模型 而不仅仅再局限于单一的HTML标记 Tag 范围内 DOM将文档描绘为一个树形 Tree 结构 Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项 树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性 这种关联性包括Child 孩子 类型 Parent 双亲 类型和兄弟 Sibling 类型 使用DHTML对象模型访问和更新HTML页面内容时 不可避免地需要查询相关技术手册 因为HTML对象很多 每个HTML对象又有很多的属性 方法和事件 所以这种查询是相当麻烦的 但是采用DOM技术访问和更新HTML页面内容时 任何手册都可以放在一边了 首先查看一下HTML源代码 推算出页面的Tree结构模型 然后 按照层次结构关系操纵需要的属性 总之 通过将各种DHTML对象封装为DOM 我们就能够使用一个与具体语言无关的通用 接口 了 与DOM相关的更详细的内容 读者可以查阅相关书籍 或到http www w3 org DOM 去查看 如果读者有兴趣学习的话 上面提到的JavaScript VBScript CSS DOM等技术 每一种技术都要学习厚厚的一本书 如果读者仅仅是需要给自己的网页加入几个动态效果 那么大部分代码可以直接去网上下载 如果使用了 所见即所得 型网页制作工具 不论是FrontPage还是Dreamweaver 都内置了大量的动态效果 用户点点鼠标 设置几个参数 就可以做出非常漂亮的效果 尤其是DreamweaverMX和DreamweaverMX2004 对JavaScript和CSS的支持非常完美 当然 如果用户能够读懂和理解相关的代码 有时候对代码的直接操作能够达到事半功倍的效果 总之 制作简单的站点时 对相关语言 不学也行 学了更好 4 4网站的发布 4 4 1WWW技术要想了解网站的发布原理和方法 我们首先必须讨论一下WWW技术 这是除Internet技术外 推动电子商务迅速发展的又一重要技术基础 大家知道 WWW是WorldWideWeb的缩写 意为 万维网 它是基于互联网提供的一种友好的信息服务 用于检索和阅读连接到互联网上的服务器的有关内容 该服务利用超文本 Hypertext 超媒体 Hypermedia 等技术 允许用户通过浏览器 如IE Netscape等 检索远地计算机上的文本 声音 图形以及视频文件等 许多企业已开始把已有的应用和数据扩展到Web上 以实现电子商务的价值 1 WWW的体系结构简单地说 Web是建立在客户机 服务器 C S Client Server 模型上的 以HTML语言和HTTP协议为基础 能够提供面向各种Internet服务的用户界面的信息浏览系统 下面 我们来解释一下这个定义 Web的实质是一个信息浏览系统 既然称为 系统 它就不是由单一要素构成的 构成Web系统的对象主要有两个 Web浏览器和Web服务器 Web浏览器是客户端软件 客户 Client 必须通过这类软件实现与服务器的交互 Web服务器是为客户提供WWW服务的软 硬件系统 这种计算机通信模式被称为客户机 服务器结构 例如 大家在浏览器的地址栏输入 后 浏览器就显示相关网页 上面的操作结果之所以能够显示新浪的网页 是因为浏览器向新浪的WWW服务器发出了请求 而新浪的WWW服务器响应了该请求 这些过程因为都是在底层运行的 不需要人工干预 所以平时一般大家感觉不到 但是 如果现在新浪网的服务器被黑客攻击了 那么大家就没办法访问新浪网了 这时候 就能够体会到客户机 服务器的这种结构了 当然 客户机程序有时候使用浏览器 例如浏览网页 有时候也不使用浏览器 例如使用Outlook Foxmail发送电子邮件 我们将这些统称为C S结构 现在网络上常常提到的B S Browser Server 浏览器 服务器结构 可以看成C S的特例或者改进 所谓的B S 即客户机程序仅仅采用浏览器 Browser 这样做的好处是用户界面比较统一 客户端Web浏览器要向Web服务器提出服务请求 必须遵循两者特定的通信规约 HTTP Web服务器响应客户端的请求 并以HTML文档方式给出反馈信息 HTML语言经浏览器翻译后 展现在用户面前的就是图文并茂的WWW页面了 Web最初用来发布静态HTML页面 即仅能提供信息浏览服务 随着技术的不断进步 WWW的功能不断增强 现在 我们可以通过WWW享受各种Internet服务 包括E mail服务 FTP服务 Telnet服务 新闻组 Newsgroup 服务等 在WWW出现之前 这些Internet服务已经存在 分别通过不同的客户和服务器端软件实现 WWW的出现 使这些分散的服务可以集中在统一的用户界面下执行 这个统一的界面就是Web浏览器为我们提供的WWW页面 当然 目前这些独立的服务与WWW服务同时存在 并仍被广泛使用着 比如 我们仍可以通过OutlookExpress或Foxmail收发邮件 使用CuteFTP上传 下载文件 使用Cterm或NetTerm进行远程登录 或是通过NetMeeting召开网络会议 这些专用服务软件的优势是它们往往更加 专业 基本的Web体系结构和通信模式可见图4 12 其扩展应用及通信模型将在4 5节加以介绍 图4 12Web的基本体系结构模型 2 Web浏览器的功能Web浏览器是用来与Web服务器交互的工具软件 它可以向Web服务器发出服务请求 同时接收Web服务器送回的请求响应 并以Web页面的形式将其显示出来 具体来说 Web浏览器包括如下基本功能 1 检索查询Web浏览器可以读入超文本标记语言 HTML HyperTextMarkupLanguage 文件 解释HTML所描述的图表 声音 动画 表格以及链接信息 并可利用超文本传输协议 HTTP HyperTextTransferProtocol 在任意Web服务器上获得信息 2 文件服务浏览器可在文件下载时实时查阅 并通过HTTP跟踪感兴趣的链接 也可以随时中止下载过程 对正在查阅的文件随时保存 打印 前后浏览等 3 热表管理 热表 是用户访问过的Web地址的列表 浏览器能够记住这些地址 供用户进行不同网页地址之间的快速切换 4 离线浏览能够把从Web服务器获得的网页 图像以及其他数据存放在磁盘缓存中 并建立相应的文档索引 当使用浏览器进行数据检索时 浏览器首先检索磁盘缓存中是否存在相应的数据 如果有 则直接从本地磁盘上读取 显示 而不再从Web服务器上下载 节省了信息获取的时间 5 其他Internet服务浏览器还可以提供其他的一些Internet服务 如文件传输FTP 电子邮件E mail 远程登录Telnet 网络新闻组UseNet等 表4 1对几种常用的Web浏览器进行了简单介绍 表4 1几种常用的Web浏览器 3 Web服务器的功能Web服务器是驻留在服务器计算机上的一个应用程序 它通过Web浏览器与用户进行交互 Web服务器主要包括如下功能 1 静态信息发布Web服务器可以将大量HTML文件及其他信息文件存储在自己的文件系统中 然后根据浏览器发出的请求 将相应的文件发送给浏览器 这样 用户就可以通过浏览器看到含有文字 图像 声音及动画等多媒体信息的页面 同时 通过点击页面中具有超链接的文字或图像 用户可以迅速切换到其他页面上 2 动态信息发布Web服务器还可以根据用户要求动态生成页面发送给用户 利用Web服务器的动态信息发布功能可以获得交互的效果 如用户可以将自己的姓名 地址 信用卡号 购买意向等通过页面上的表格发送给Web服务器 Web服务器可以将这些信息写入数据库 并给用户一个反馈 实现电子购物 用户也可以通过浏览器将自己要查找的某方面信息通过页面上的表格发送给Web服务器 Web服务器可以查找数据库 并将查找的结果反馈给用户 表4 2对几种常用的Web服务器进行了简要的介绍 表4 2几种常用的Web服务器 注 CGI CommonGatewayInterface 公共网关接口 ISAPI InternetServerApplicationProgrammingInterface Internet服务应用程序接口 NSAPI NetscapeServerApplicationProgrammingInterface Netscape服务应用程序接口 ASP ActiveServerPages 活动服务器页 PHP HypertextPreprocessor 超文本预处理器 JSP JavaServerPages Servlet和Java服务器页面 J2EE Java2platformEnterpriseEdition Java2平台企业版 4 4 2发布站点通过4 4 1节的介绍 大家已经了解了WWW的基本工作方式和机理 如果想拥有自己的服务器 一台性能良好的 装有WWW服务器软件的计算机 那么 你只需在这台服务器上进行一些设置 就可以发布你的站点了 如果没有自己的服务器 可以向专门的ISP申请主页空间 多数是收费的服务 特别是商务站点 也有一些站点提供容量较小的免费个人主页空间 并把你的站点上传 可使用CuteFTP等专门的上传工具 到ISP为你提供的服务器上 作为访问量较小的个人站点 我们甚至可以使用运行Windows98或Windows2000的PC作为WWW服务器 最简单的发布方法是利用微软的个人Web服务器PWS PersonalWebServer 软件发布自己的个人站点 在完整的Windows操作系统光盘里即包含有PWS 它位于光盘的add onspws文件夹中 运行其中的setup exe进行安装 然后再进行相应的设置就可以了 当然 这种计算机和操作系统的组合不能支持每秒2万次访问的WWW流量 对于访问量较大的站点 可以使用性能较好的服务器 而不是PC 进行站点发布 下面我们来配置一台WWW服务器 现在常用的服务器操作系统有WindowsNT Windows2000 UNIX Linux 由于一般读者对Windows系列较为熟悉 我们采用Windows2000Server作为WWW服务器的实现范例 进入Windows2000Server后 在桌面上用鼠标右键单击 我的电脑 在弹出的对话框中选择 管理 就可以打开 计算机管理 窗口了 双击 服务和应用程序 打开其菜单后再双击 Internet信息服务 在 Internet信息服务 上点鼠标右键 在弹出的菜单中选择 新建 Web站点 如图4 13所示 就可以打开 Web站点创建向导 如图4 14所示 图4 13使用Windows2000Server建立WWW服务器 1 图4 14使用Windows2000Server建立WWW服务器 2 选择 下一步 站点创建向导 提示输入Web站点的说明 这里就是给网站取一个名称 输入 MyWeb 如图4 15所示 图4 15使用Windows2000Server建立WWW服务器 3 再点击 下一步 站点创建向导 提示输入Web站点使用的IP地址 点击下拉条 选择 192 168 15 22 如图4 16所示 图4 16使用Windows2000Server建立WWW服务器 4 需要注意的是 这里的IP地址 192 168 15 22 是编者现在使用的计算机的IP地址 如果读者自己做操作 那么该处能够选择的IP地址是不一样的 下面的TCP端口号是用默认的80 主机头不用填写 再点击 下一步 站点创建向导 提示输入Web站点的主目录的路径 在第一节中 我们建立的站点存放在D盘的 MyWeb 文件夹下 所以在该处点击 浏览 选择D盘的 MyWeb 文件夹 如图4 17所示 点击下一步 站点创建向导 提示输入Web站点主目录的访问权限 默认为 读取 和 运行脚本 如图4 18所示 在这里 我们不需要更改 点击下一步 站点创建向导 提示所有的操作都已经完成 如图4 19所示 点击 完成 操作结束 图4 17使用Windows2000Server建立WWW服务器 5 图4 18使用Windows2000Server建立WWW服务器 6 图4 19使用Windows2000Server建立WWW服务器 7 由于Windows2000Server对于一个IP地址只能够支持一个WWW站点 如果用户出现了如图4 20的界面 则需要把该服务器内其他的WWW站点停掉 才能启用 MyWeb 站点 操作如下 用鼠标右键点击 默认Web站点 在弹出的菜单中选择 停止 如图4 21所示 然后用鼠标右键点击 MyWeb 在弹出的菜单中选择 启动 如图4 22所示 这样 就可以启动 MyWeb 站点了 图4 20 MyWeb 站点为 已停止 的状态 图4 21将默认Web站点停止 图4 22启动 MyWeb 站点 一个网站的首页一般命名为 index htm 在本章第一节中做的第一个网页取名即为 index htm 我们需要对 MyWeb 站点进行首页设置 用鼠标右键点击 MyWeb 在弹出的菜单中选择 属性 在弹出的对话框中选择 文档 如图4 23所示 点击 添加 在弹出的对话框中输入 index htm 如图4 24所示 然后点击 确定 图4 23设置 MyWeb 站点首页为 index htm 1 图4 24设置 MyWeb 站点首页为 index htm 2 打开IE浏览器 在地址栏输入 MyWeb 的IP地址 192 168 15 22 如果读者的IP地址不一样 在Windows2000或WindowsXP操作系统中 用鼠标单击 开始 程序 附件 命令提示符 输入 ipconfig 敲回车 即可以查看本机的IP地址 如图4 25所示 就可以通过浏览器浏览 MyWeb 站点了 如图4 26所示 图4 25使用 ipconfig 命令查看本机的IP地址 图4 26通过浏览器浏览 MyWeb 站点 因为笔者的计算机的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地址 然后申请专线接入 或者将服务器放入电信公司的机房 称为服务器托管 还需要申请域名 最后才能够从外部访问 4 4 3虚拟主机上面的做法是我们自己来建立服务器 称为自营主机 自营主机是企业拥有并且维护服务器及所有的软件 这种方式的优点是完全的控制权 随时接近硬件和完全的灵活性 缺点是需要额外的人员 WWW知识 昂贵的设备和互联网的高速接入 让我们来从成本角度考虑一下上面做法的费用 首先 用户需要购买服务器 这需要数万元 也有更贵的服务器 当然 如果网站的访问量不大 也可以使用普通PC 如果是专线接入 根据接入速率不同 每月需要一千至数千元 如果是服务器托管 服务器托管是企业拥有主机 但放在主机服务商那里 由主机服务商根据企业的要求提供维护 每月也需要一千元左右 如果算上各种其他的费用 一个网站一年所需的维护费用至少数万元 若站点规模较大 则需要数十万到上百万的费用 对于规模较大的企业 按照上面的方式建立网站是不错的选择 但是 对于中小型企业或个人用户来说 这无疑是一笔难以承受的投入 这时 我们可以选择 虚拟主机 服务 所谓 虚拟主机 VirtualHost VirtualServer 也称虚拟服务器或共享主机 是指使用特殊的软硬件技术 把一台运行在互联网上的服务器主机分成一台台 虚拟 的主机 以使多个用户可以共用一台服务器 达到降低建站成本和维护费用的目的 每一台 虚拟主机 都具有独立的域名或IP地址 具有完整的Internet服务器 WWW FTP E mail等 功能 不仅如此 虚拟主机 之间完全独立 互不干扰 用户可以自行管理各自的 虚拟主机 在外界看来 每一台 虚拟主机 就和一台独立主机的表现完全一样 利用 虚拟主机 技术 可以使用户节省大量的初始投入和维护费用 包括购置服务器 租用专线以及其他硬件设备和安排专业系统管理人员等多方面的费用 但是 由于 虚拟主机 是多个站点共享一台服务器 所以在性能上不如专有的服务器 虚拟主机 比较适合中小企业建立网站以及个人用户建立站点 现在有很多ISP都提供 虚拟主机 的业务 如中国万网 表4 3中国万网的 虚拟主机 及功能列表 用户购买虚拟主机后 ISP会提供相应的用户名和密码 我们要通过网络将建好的网站上传到ISP分配的空间 现在一般都使用FTP方式上传站点 前面曾经提到 CuteFTP是一个比较好的FTP客户端软件 由于ISP都会提供上传的帮助 读者可以到相关ISP主页去查询 4 5数据库与动态网页设计 4 5 1 动态 网页介绍对于普通用户而