个人动态网页的设计与实现doc.docx

个人动态网页的设计与实现doc.docx

《个人动态网页的设计与实现doc.docx》由会员分享，可在线阅读，更多相关《个人动态网页的设计与实现doc.docx（26页珍藏版）》请在冰豆网上搜索。

个人动态网页的设计与实现doc

第1章引言

1.1电子商务概述

1.1.1“电子商务”的定义

今天，我们已经可以确信电子商务毋庸置疑是未来的发展方向。

但是电子商务却还没有一个标准的定义。

Intel公司认为：

电子商务=电子市场＋电子交易＋电子服务；IBM认为：

电子商务=web；HP公司则说：

“电子商务是通过电子化的手段来完成商业贸易活动的一种方式。

”如此等等。

那么究竟什么是电子商务？

电子商务，顾名思义是指在互联网上进行的电子化的商务活动。

从狭义上看，电子商务也就是电子交易，主要指利用Web提供的通信手段在网上进行交易活动，包括通过Internet买卖产品和提供服务。

产品可以是实体化的，如汽车、电视，也可以是数字化的，如新闻、录像、软件等基于比特的产品。

此外，还可以提供各类服务，如安排旅游、远程教育等。

总之，电子商务并不仅仅局限于在线买卖，它将从生产到消费各个方面影响进行商务活动的方式。

除了网上购物，电子商务还大大改变了产品的定制、分配和交换的手段。

而对于顾客，查找和购买产品乃至服务的方式也大为改进。

而从广义上讲，电子商务还包括企业内部商务活动，如生产、管理、财务等以及企业间的商务活动，它不仅仅是硬件和软件的结合，更是把买家、卖家、厂家和合作伙伴在Internet、Intranet和Extranet上利用Internet技术与现有的系统结合起来开展的业务活动。

从最初的电话、电报到电子邮件以及20多年前开始的EDI，都可以说是电子商务的某种形式；发展到今天，人们已提出了包括通过网络来实现从原材料的查询、采购、产品的展示、定购到出品、储运以及电子支付等一系列贸易活动在内的完整电子商务的概念。

在发达国家，电子商务已发展迅速，通过Internet进行交易已成为潮流。

基于电子商务而推出的金融电子化方案、信息安全方案、Internet方案，又形成一个又一个的产业，给信息技术带来许多新的机会，把握和抓住这些机会，正成为国际信息技术市场竞争的主流。

1.1.2“电子商务”的分类

电子商务从其交易双方和实质内容上划分，主要可以划分为两种：

（1）企业组织对企业组织（Business－Business，简称B-B、BtoB）型电子商务；

（2）企业组织对消费者（Business－Consumer，简称B-C、BtoC）型电子商务；

根据统计，目前电子商务活动中80%的收入属于B-B型电子商务活动，这由于企业组织的信息化程度和技术水平比个体消费者明显要高。

根据企业组织的商业性又将他们划分成赢利的企业和非赢利的组织机构（Organization），因此电子商务活动可以分为四类：

即B-B可分为B-B（企业-企业）型和B-O（企业对组织）型，B-C可分为B-C（企业-消费者）型和O-C（组织-消费者）型。

企业对消费者的电子商务基本等同于商业电子化的零售商务，随着WWW的出现和迅速发展，这种类型的电子商务发展很快。

目前，Internet上已遍布各种类型的商业中心，提供各种商品的电子商务服务，主要有鲜花、书籍、计算机、汽车和各种消费类商品。

企业对企业的电子商务是指企业使用Internet或各种商务网络向供应商定货、接收票证和付款。

企业对企业的电子商务发展最快，已经有了多年的贸易经验和历史，特别是企业之间通过专用增值网络，采用EDI技术，使企业对企业的电子商务得到了迅速扩大和推广。

国际性的电子商务是不同国家之间商家对商家或商家对个人客户的电子商务，Internet的发展、国际贸易的繁荣和国际贸易一体化的发展，为各国间的企业对企业或企业对消费者的电子商务开辟了广阔的前景。

伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。

随着互联网的飞速发展，有关网络的技术也层出不穷。

从静态网页到动态网页的变化也正说明了这一点。

掌握动态网页的基本知识，以及动态网页设计原则和设计过程就显得尤为重要。

1.2电子商务的实现

简而言之，电子商务就是利用电子手段尤其是互联网进行商务活动。

电子商务的出现和发展，已经并仍然在改变个人和团体的商务活动的模式。

电子商务延伸了商务联系，能够极大地降低成本，加快商品和资金流通的速度，增强市场信息的可预测性和各种商务活动的可控制性。

不难看出，将来能在市场中取胜的，必是能充分利用电子商务的商家。

1.2.1由ASP来实现信息的交互

从技术上说，电子商务是通过互联网传输和交换商务数据，并能根据商务数据进行人工或自动处理。

数据的标准化在数据传输和交换过程中起着至关重要的作用，它决定了数据的语义，增强了数据的可读性和可理解性。

ASP的可扩展性和自相容性，使它成为数据标准化和信息交换的有力工具。

电子商务的发展，首先出现的是企业－消费者（B2C）和消费者－消费者（C2C）模式。

在这些模式当中，由于数据的传输路径是Web服务器－浏览器或者浏览器－Web服务器－浏览器，数据最后发布在浏览器上，供人们阅读和理解，侧重于信息对人的可理解性，因此数据表现被提到一个重要的地位，数据的结构化显得较为次要一些，侧重于数据表现的HTML基本上能够满足这些应用。

但是随着电子商务的发展，HTML在B2C和C2C这两种模式中已经开始显得力不从心。

所以就诞生了ASP这种全新的脚本运行环境，通过这种环境用户可以创建和运行动态的交互式Web服务器应用程序来实现信息的交互过程，从而也就成全了电子商务的进一步发展。

我们知道，在客户端和服务器端是通过表单Form的方式连接的，当表单的submit事件发生后，表单数据通过HTTP传输到服务器，在ASP中常用GET方式得到客户端的数据，而后ASP通过ODBC驱动程序，与后台数据库进行连接，运行相应的SQL程序，再把返回的结果生成一个HTML脚本，返回给客户端。

其过程如图1-1。

图1-1ASP的网络运行及与数据库的连接

1.2.2电子商务网站的主体――网页

伴随着网络的出现，网页逐渐融入人们的生活。

快速及时的新闻浏览，五彩缤纷的网上信息，网络与人们的生活息息相关，于是世界上又出现了第三媒体——Internet。

制作网页是企业和个人的宣传自己的重要手段，同时也是学习者获取学习信息的重要手段，尤其是在教育领域，在素质教育与终身教育成为必然的今天，人们对信息的需求有了更新，更高的要求，而网页由于本身所具有的信息量大，传递快速，没有时空限制等特点恰好满足这种要求。

所以网页也逐渐成为一种新兴的教育资源。

1）网页的定义

什么是网页呢？

网页实际是一个文件，他存放在世界某个角落的的某一台计算机中而这台计算机必须是与互联网相连的。

网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

文字与图片是构成一个网页的两个最基本的元素。

你可以简单的理解为：

文字，就是网页的内容，图片，就是网页的美观。

除此之外，网页的元素还包括动画、音乐、程序等等。

网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏缆器则对这些标记进行解释并生成页面。

2）网页的类型

通常我们看到的网页，都是以htm或html后缀结尾的文件，俗称HTML文件。

不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP甚至其他更多。

HTML

全称HyperTextMarkupLanguage，正式名称是超文本标记语言，利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。

CGI

CGI全称为CommonGatewayInterface（公共网关接口CGI），它是一种编程标准，它规定了Web服务器调用其它可执行程序（CGI程序）的接口协议标准。

CGI程式通过读取使用者的输入请求从而产生HTML网页。

CGI程序可以用任何程序设计语言编写，如Shell、Perl、C、Java等，其中最为流行的是Prel。

CGI程序通常用于查询、搜索、或其他的一些交互式的应用。

ASP

ASP全称为ActiveServerPages（动态服务器主页），它一种应用程序环境，可以利用VBscript或JavaScript语言来设计，主要用于网络数据库的查询与管理。

其工作原理是当浏览者发出浏览请求的时候，服务器会自动将ASP的程序码，解释为标准HTML格式的网页内容，再送到浏览者浏览器上显示出来。

我们也可以将ASP理解为一种特殊的CGI。

利用ASP生成的网页，与HTML相比具有更大的灵活性。

只要结构合理，一个ASP页面就可以取代成千上万个网页。

尽管ASP在工作效率方面较之一些新技术要差，但胜在简单、直观、易学，是涉足网络编程的一条捷径。

PHP

PHP是HypertextPreprocessor的缩写，代表：

超文本预处理器。

其优势在于其运行效率比一般的CGI程序要高，而且，PHP是完全免费，不用花钱，你可以从PHP官方站点（）自由下载。

PHP在大多数Unix平台，GUN/Linux和微软Windows平台上均可以运行。

JSP

JSP与ASP非常相似。

不同之处在于ASP的编程语言是VBScript之类的脚本语言，而JSP使用的是Java。

此外，ASP与JSP还有一个更为本质的区别：

两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。

在ASP下，VBScript代码被ASP引擎解释执行；在JSP下，代码被编译成Servlet并由Java虚拟机执行。

3）一些与网页相关的技术

Java

Java是由Sun公司开发而成的一种编程语言，利用Jave写成的小程序叫做JavaApplet。

使用它可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。

而且，不论你使用的是哪一种WWW浏览器，哪一种计算机，哪一种操作系统，只要WWW浏览器上面注明了“支持Java”，你就可以看到生动的主页。

当初Java面世的时候，曾经轰动一时，被认为将会成为Internet应用的主要开发语言。

但时至今日，Java的风头已大不如前，原因是Java也有着起致命的弱点，就是在客户端的编译运行的速度慢，资源消耗大。

现在Java多用于服务器端、及一些复杂的客户端程序的编写。

JavaScript

JavaScript具有脚本语言的“简单”这个特性，编写容易，不需要有很深的编程经验。

JavaScript语言是通过嵌入或整合在标准HTML语言中实现的，也就是说JavaScript的程序是直接加入在HTML文档里，当浏览器读取到HTML文件中JavaScript的程序，就立即解释并执行有关的操作，无须编译器，其运行速度比JavaApplet要快得多。

现在，JavaScript已经成为了制作动态网页必不可少的元素，大家经常在网页上看到的动态按钮、滚动字幕，就大多数都是使用JavaScript技术制作的。

CSS

CSS（CasadingStyleSheets层叠样式表），跟HTML一样也是一种标记语言，甚至很多属性都是来源于HTML。

利用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

Flash

Flash是Macromedia公司出品的一个适量动画制作软件，用他做出来的动画就叫Flash动画，其特点是：

　　1、动画具有很强的交互性，我们甚至可以完全使用Flash来制作一个网站；

　　2、采用“准”流（Stream）式的设计，就是说，我们可以一边下载动画文件一边欣赏动画；

　　3、由于它是基于矢量的图形系统，因而只要使用得当，就可以大大地减少文件的数据存储量，所占空间比位图少得多，非常适合在网络上使用。

同时，矢量图像可以做到真正的无级放大，这样，无论用户的浏览器使用多大的窗口，图像始终可以完全显示，并且不会降低画面质量。

如果你看过使用了Flash技术的网站，你一定会被其神奇的魅力所倾倒。

当然，Flash也有其弊端，就是维护更新不方便，不适宜用于一些更新频繁、信息量大的网站。

DHTML

DHTML的全称为DynamicHTML，即我们常说的动态HTML。

很多人都误会DHTML是一种语言，其实DHTML仅仅是一个概念——通过各种技术的综合发展而得以实现的概念，这些技术包括JavaScript，VBScript，DOM（DocumentObjectModel，文件目标模块），Layers（层）和CSS等。

DHTML的目的在于加强网页的交互性；对用户的操作在本地就可做实时处理，从而得到更快的用户响应；使网页的界面更丰富多变，使页面设计者可以随心所欲地表达自己的构思。

VRML虚拟现实

VRML是HTML的3D模拟，它使用VRML浏览器来描述现实世界和链接。

VRML既可以用来建立真实世界场景的模型，也可以建立虚构的三维世界，就像许多游戏中的那样。

在3D中浏览，并不等于把2D抛掉，你仍可以保留图像、视频和音频，但你拥有了最具吸引力的3D界面。

VRML提供了6＋1度的自由，你可以沿着三个方向移动，也可以沿着三个方位旋转，同时还可以建立其它3D空间的超链接。

VRML文件是虚拟空间的文本性描述。

它是一个由文本编辑器（如记事本等）生成的文本文件，以.wrl为扩展名。

当然也可由能够生成VRML三维空间的工具可视化地生成（如用3DStudioMAX生成），但这样生成的文件一般比自己编写的文件要大得多。

当你编写了一个符合VRML语法的文本文件，并以.wrl为文件扩展名，你就可以用VRML浏览器浏览了。

IE和NetscapeNavigator这两种最常用的浏览器只要是3.0以上的版本均可以安装用于浏览VRML文件的插件。

IE5.0自带了一个MicrosoftVRML2.0Viewer。

IE的浏览界面中包括中间的浏览区、左边和下边的操作按钮，通过鼠标或键盘的操作，我们可以在虚拟三维世界里穿行，对虚拟事务进行操纵。

4）网页编辑工具

了解了网页的类型及相关技术之后，下一步，就是要选择一个适合自己的网页编辑工具。

现在非常流行的有以下几种软件：

Frontpage

Frontpage是Microsoft出品的，可能是最简单、最容易，却又功能强大的网页编辑工具。

采用典型的Word界面设计，只要你懂得使用Word，就差不多等于已经会使用Frontpage。

就算你不懂Word也没关系，“所见即所得”的操作方式会让你很快上手，而且你无须学习HTML语法。

但Frontpage的也有其不足之处：

首先是浏览器兼容性不好，做出来的网页，用Netscape往往不能正常显示；其次，生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便；再次，对DHTML的支持不好。

但不管怎么说，Frontpage的确是最好的入门级网页编辑工具。

Dreamweaver

Dreamweaver是Macromedia公司的产品的另一款“所见即所得”的网页编辑工具。

与Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。

但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。

Dreamweaver对于DHTML的支持特别好，可以轻而易举地做出很多眩目的页面特效。

插件式的程序设计使得其功能可以无限的扩展。

Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。

而最新推出的DreamweaverUltraDev更支持Asp，Jsp。

因此，说Dreamweaver是高级网页制作的首选并不为过。

第2章网站的总体设计

2.1建立网站的本机环境

无论是在本机上运行网站，还是在局域网中提供Web服务，或者是充当Internet的主机，都需要安装相应的Web服务器软件。

因为目前国内的主流操作系统是Windows，又因为本系统采用MyEclipse+tomcat技术，因此，需要安装能够运行MyEclipse+tomcat的Web服务器软件如图2-1。

图2-1Web服务器软件

然后在此选择“File->new->DynamicWebProject”

在Projectname里面写入工程名然后点击finish，工程完成如图2-2。

在左边右键点击工程名选择properties->javabuildpath

->Browse将classes键入到WEB-INFO下图2-3。

一切准备完成后就可以写自己的web了

用浏览器访问先开启tomcat，然后在浏览器输入

http:

//localhost:

8080/工程名/web网站的网址

图2-2游览器输入

图2-3游览器输入

2.2网站主要功能

主要有个人主页，图片浏览，灵感交流，此处留名，兴趣上传几个模块

个人主页主要提供了个人主要信息。

图片浏览展示自己收集的图片和个人动态。

此处留名注册登录本站，对作者发表的文章进行评论。

灵感交流可以留下自己对本站的感觉。

兴趣上传可惜将自己喜欢的图片上传到本站中。

第3章网站设计的理论基础

3.1ASP技术在网站中的应用

3.1.1ASP技术简介

工作原理

当在Web站点中融入ASP功能后，将发生以下事情：

1、用户向浏览器地址栏输入网址，默认页面的扩展名是.asp。

2、浏览器向服务器发出请求。

3、服务器引擎开始运行ASP程序。

4、ASP文件按照从上到下的顺序开始处理，执行脚本命令，执行HTML页面内容。

5、页面信息发送到浏览器。

网页特点

ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。

ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。

利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。

与HTML相比，ASP网页具有以下特点：

⑴利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术；

⑵ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试；

⑶服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页；

⑷ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。

例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息；

⑸ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、发送Email或访问文件系统等；

⑹由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取；

⑺方便连接ACCESS与SQL数据库；

⑻开发需要有丰富的经验，否则会留出漏洞，让骇客（cracker）利用进行注入攻击。

ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。

但是其原理也是一样的。

3.1.2数据访问方式

Web提供了与客户进行通信联络的有效手段，利用Web技术，实现Web服务器与数据库系统的连接，完成对数据的处理与查询，用户可以通过操作简单易学的浏览器来查询处理所需要的各种数据。

实现Web服务器与数据库的连接一般有两种方法：

一种是利用中间件技术在两者之间建立连接和通信，如CGI（通用网关接口）和API（应用程序编程接口）。

Web服务器通过调用CGI程序实现与Web浏览器的交互，即CGI程序接受浏览器发给Web服务器的信息，进行处理后，将相应结果再送回给Web服务器，通过Web服务器将信息传送给浏览器。

但CGI程序在响应速度和资源利用等方面有较大局限性，客户端每请求一个CGI程序，服务器端便打开一个进程，当请求的数量较大时容易引起瓶颈现象，开发人员常利用API编程来扩展服务器功能，API程序占系统资源少，运行效率较高，但它的编程较CGI程序更为复杂。

另一种是由浏览器中的Java小应用程序（JavaApplet）通过浏览器访问Web服务器上的数据库，利用了JDBC（JavaDatabaseConnectivity）技术，它通过JDBC提供的API实现对WebServer的访问。

由于JavaApplet本身的局限性，目前大多数的应用是基于中间件技术的。

ASP也是属于中间件的一种模式，但在Windows平台上它比较网关及服务器扩展模式有着较大的优点。

网关的最大特点是它的平台无关性，但网关程序通常较难编写和改变。

网关程序通常是一个独立的程序，并不和HTML文件融合在一起，它需要用如C、C++、VB、Perl等语言来编写独立的应用程序，而ASP应用改变了这一点。

使用ASP不仅可以读取Access和SQLServer的数据库，而且还可以读取其他ODBC（OpenDatabaseConnect开放式数据库互联）兼容的数据库。

在ASP中访问数据库是通过ADO（ActiveXDatabaseObject活动数据对象）及事务处理语句来实现的。

ADO是一种操作Microsoft所支持的数据库的方法，是一项容易使用并且可扩展的将数据库访问添加到Web页的技术。

ADO对象的使用与DAO（数据访问对象）、RDO（远程数据对象）的方式相似。

在ASP中，ADO可以看作是一个服务器组件，更简单点说，是一系列的对象，应用这些功能强大的对象，即可轻松完成对数据库复杂的操作。

3.2SQL语句介绍

SQL全称是“结构化查询语言（StructuredQueryLanguage）”，最早的是IBM的圣约瑟研究实验室为其关系数据库管理系统SYSTEMR开发的一种查询语言，它的前身是SQUARE语言。

SQL语言结构简洁，功能强大，简单易学，所以自从IBM公司1981年推出以来，SQL语言，得到了广泛的应用。

如今无论是像Oracle,Sybase,Informix,SQLserver这些大型的数据库管理系统，还是像VisualFoxporo,PowerBuilder这些微机上常用的数据库开发系统，都支持SQL语言作为查询语言。

StructuredQueryLanguage包含4个部分：

Ø数据查询语言DQL-DataQueryLanguageSELECT

Ø据操纵语言DQL-DataManipulationLanguageINSERT,UPDATE,DELETE

Ø数据定义语言DQL-DataDefinitionLanguageCREATE,ALTER,DROP

Ø数据控制语言DQL-DataControlLanguageCOMMITWORK,ROLLBACKWORK

3.2.1SQL的优点

SQL广泛地被采用正说明了它的优点。

它使全部用户，包括应用程序员、DBA管理员和终端用户受益非浅。

1.非过程化语言

SQL是一个非过程化的语言，因为它