WORD版本.

个人博客设计毕业论文

目录

引言......................................................1

一、网页设计的需求..........................................2

1.1、开发的背景..............................................2

1.2、网页的开发环境..........................................3

二、规划相关技术综述........................................5

2.1、开发工具的介绍及选择.....................................5

2.1.1、开发工具Dreamweavercs3介绍........................5

2.1.2、CSS+DIV介绍.......................................8

2.1.3、HTML简介.........................................14

2.1.4、IIS简介..........................................17

2.1.5、ASP简介..........................................21

2.1.6、数据库技术简介.....................................24

2.2、社会可行性研究..........................................27

2.2.1、本课题的研究意义...................................27

2.2.2、同类课题存在的问题.................................28

2.2.3、本课题要达到的设计目标.............................28

三、总体设计与规划........................................30

3.1网页艺术设计介绍.........................................30

3.1.1网页艺术设计的容....................................30

3.1.2网页艺术设计的原则..................................31

WORD版本.

3.1.3网页艺术设计的特点..................................35

3.2的整体布局及结构.........................................38

3.2.1确定建设的主题与规划................................38

3.2.2网页的整体布局和导航................................39

3.3画面风格的设计及素材处理.................................40

3.3.1网页画面风格设计....................................40

3.3.2网页素材处理技术....................................40

3.3.3栏目介绍及功能简介..................................41

四、的详细设计与制作......................................43

4.1站点.....................................................43

4.1.1创建和设计站点......................................43

4.2网页制作.................................................46

4.2.1创建文件夹..........................................46

4.2.2创建文件............................................46

4.2.3创建欢迎flash动画..................................47

4.2.4创建主页面.....................................48

4.2.5留言板及个人心情网页设计............................49

4.2.6实现的主要功能......................................52

五、的调试及维护..........................................55

5.1系统测试.................................................55

5.2系统维护.................................................57

六、结论...................................错误!未定义书签。

WORD版本.

七、结束语.................................................58

八、参考文献...............................................60

九、附录....................................错误!未定义书签。

WORD版本.

WORD版本.

引言

随着时代的发展，建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，

日益被建设者所注重。在目前国对此领域研究甚少的情况下，作者将网页艺术设计与其他

艺术设计形式进行比较，尝试从网页艺术设计的容、原则和特点等三个方面，对这个新的

艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高

度统一，指出网页艺术设计包含视听元素与版式设计两项容；以主题鲜明、形式与容相统

一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺

术与技术结合的紧密性等五个特点。在明确了网页艺术设计与主题的关系的基础上，提出

了“美”和“功能”都是为了更好地表达主题这一观点。

网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计

者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构

成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网

络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，

它不仅是一种技能，更是艺术与技术的高度统一。

数量的激增，意味着网络深远的影响力已经越来越多地为人们所共识，网络已经实实

在在地为人们带来了财富和知名度。于是，很多单位和个人都开始准备建立自己的。不论

出于什么目的，所有人都希望自己建立的信息量丰富，功能尽可能强大。

自己选择的这个个人的设计，首先，能丰富自己的文化知识，在建设的过程中能学到

实际的网络知识；其次，对与即将毕业的学生，个人是一个很好的网络明，可以让别人对

自己有更好的了解。最后，有这么一个自己设计和制作的，可以证明用有了一定的计算机

水平，这样比简单空白的文本式建立要更有说服力。

WORD版本.

一、网页设计的需求

1.1、开发的背景

近几年来，博客及博客文化正成为互联网的热点，并被视为继e－mail、bbs和icq

之后出现的第四种网络交流方式。在网络上发表Blog的构想始于1998年，但到了2000

年才真正开始流行。而2000年博客开始进入中国，并迅速发展，但都业绩平平。直到2004

年木子美事件，才让中国民众了解到了博客，并运用博客。2005年，国各门户，如新浪、

搜狐，原不看好博客业务，也加入博客阵营，开始进入博客春秋战国时代。起初，Bloggers

将其每天浏览的心得和意见记录下来，并予以公开，来给其他人参考和遵循。但随着

Blogging快速扩，它的目的与最初已相去甚远。目前网络上数以千计的Bloggers发表和

贴Blog的目的有很大的差异。不过，由于沟通方式比电子、讨论群组更简单和容易，Blog

已成为家庭、公司、部门和团队之间越来越盛行的沟通工具，因为它也逐渐被应用在企业

部网络（Intranet）。博客正在改变社会交流方式。目前，全球参与博客的人数已经达到

千万之众，而且每几秒钟，都有一名新的博客用户加盟进来。

很多记者、律师、教授、学者、专家，甚至法官和议员都有了自己的博客，形成了独

特的博客文化。美国总统候选人乐于开设博客站点，作为竞选的重要手段。企业界也正在

WORD版本.

把博客方式引入企业部网和公司，用于非正式的知识管理和网络营销等。政府部门和教育

领域都在尝试利用博客构建部知识管理和沟通交流的新体系，可以让职员发表评论，积累

知识，有意思的网络资源，促进彼此的交流沟通。

显然，博客的发展对应了全球围知识社会来临的背景。对于中国，这样一个组织机构

信息化仍处于初级阶段的国家，博客这种充分发挥个人主导性和积极性的非正式知识管理

工具和其深度沟通交流的功能，对于我们国家的知识传播、知识扩散和有效提升组织的学

习和创新能力，具有更特殊的意义。博客用户的快速增长以及组织机构对它的广泛应用，

有助于推动中国向学习型社会演进。

本系统根据现实的情况以及博客互动性的特点进行设计开发，旨在为用户提供一个交

流的平台，促进用户间的深度沟通；并根据博客共享性的特点，促进用户之间的知识交流，

使其成为一个学习的园地。

1.2、网页的开发环境

网页在制作的前期一定要考虑到网页的开发环境，因为这直接影响到网页在网络上的

使用情况。同时伴随着计算机和应用软件的快速发展，系统的开发环境对与一大部分的软

件已经不是那么重要，然而现阶段大多数用户所使用的的系统环境基本上是一样的，因此

我们还是必须在通用性的基础上考虑到大多数用户的系统环境开发环境。

第一是操作系统的选定。操作系统是计算机的操作平台，是计算机的灵魂所在，因此

必须先要决定软件开发所应用的操作系统。操作系统相对比较分散，但是系统的大部分功

能是通用的。如Windowsxp、Win7操作系统，还有在网络服务器上广泛应用的Unix操作

系统。根据应用的广泛性、普遍性和实用性，系统决定选用Win7操作系统作为软件的操

作系统平台。

WORD版本.

第二是数据库软件的选定。数据库是以个数据的存储中心，数据库软件就是这个存储

中心的缔造者，数据库的可用性直接影响着一个数据的多方功能。所以我选择了Microsoft

Access可以方便地生成各种数据对象，利用存储的数据建立窗体和报表，可视性好。作为

Office套件的一部分，可以与Office集成，实现无缝连接。

第三是IIS服务器的安装。IIS是InternetInformationServer的缩写，它是微软

公司主推的服务器，最新的版本是Windows2003里面包含的IIS6.0，IIS与WindowNT

Server完全集成在一起，因而用户能够利用WindowsNTServer和NTFS（NTFileSystem，

NT的文件系统）置的安全特性，建立强大，灵活而安全的Internet和Intranet站点。

IIS支持HTTP（HypertextTransferProtocol，超文本传输协议），FTP（FeleTransfer

Protocol，文件传输协议）以及SMTP协议，通过使用CGI和ISAPI，IIS可以得到高度的

扩展。IIS支持与语言无关的脚本编写和组件，通过IIS，开发人员就可以开发新一代动

态的，富有魅力的Web站点。IIS不需要开发人员学习新的脚本语言或者编译应用程序，

IIS完全支持VBScript，JScript开发软件以及Java，它也支持CGI和WinCGI，以及

ISAPI扩展和过滤器。IIS的设计目的是建立一套集成的服务器服务，用以支持HTTP，FTP

和SMTP，它能够提供快速且集成了现有产品，同时可扩展的Internet服务器。

WORD版本.

二、规划相关技术综述

2.1、开发工具的介绍及选择

2.1.1、开发工具Dreamweavercs3介绍

Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页

制作和管理于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的

视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充

满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，

代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本

语言。

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移

至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，

快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，

如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整

体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或

Photoshop来进行编辑与设定图档的最佳化。

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。

它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无

法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排

WORD版本.

序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉

置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子

商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，

ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动

态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML

Dreamweaver将容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观

的样版，指定可编辑或不可编辑的部份，容提供者可直接编辑以样式为主的容却不会不小

心改变既定之样式。您也可以使用样版正确地输入或输出XML容。全方位的呈现利用

Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading

stylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在

Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知

您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的在下

载它的描述档，便可得知详尽的成效报告。

主要功能

1.业界领先的工具

利用世界级的Web设计工具的所有灵活性和强大功能。在“设计”视图中进行像素

完美型设计,在“代码”视图中制作复杂的代码,或专功一方面的研究。使用您的最佳工

作方式工作。

2.集成的工作流

在DreamweaverCS3设计、开发和维护容,同时利用与其他Adobe工具(包括

AdobeFlashCS3Professional、FireworksCS3、PhotoshopCS3、ContributeCS3及

用于创建移动设备容的全新AdobeDeviceCentralCS3)的智能集成。

WORD版本.

3.完整的CSS支持

发现可视CSS工具的优势,使用这些工具可以轻松地在文件或文件之间查看、编辑

和移动样式,以及查明您的更改将如何影响设计。借助全新的CSS布局加速您的工作流,

并借助全新的浏览器兼容性检查测试您的设计。

4.集成的编码环境

借助代码折叠、颜色编码、行号及带有注释/取消注释和代码片断的编码工具栏,组

织并加速您的编码。应用适用于HTML和服务器语言的代码提示。

5.支持领先的技术

利用对领先Web开发技术(包括HTML、XHTML、CSS、XML、Javascript、Ajax、PHP、

AdobeColdFusion、ASP、和JSP)的支持。

6.轻松的XML

使用XSL或适合于Ajax的Spry框架,快速集成XML容。指向XML文件或XML

feedURL,DreamweaverCS3将显示其容,这使您能够将适当的字段拖放到您的页面上。

支持

无需任何Flash知识,只需五次点击,即可轻松地将FLV文件添加到您的Web页

中。自定义视频环境以匹配您的。

8.学习资源

在您使用全面的教程、参考容和指导性模板的同时进行学习,这样可轻松扩展您的技

能集并采用最新的技术。

9.扩展的Dreamweaver社区

享受庞大的Dreamweaver社区的所有益处,包括在线Adobe设计中心和Adobe开

发人员中心、培训和研讨会、开发人员认证计划、用户论坛以及DreamweaverExchange中

WORD版本.

提供的超过1,000个可下载的扩展。

10.跨平台支持

挑选您的平台:DreamweaverCS3可用于基于Intel或PowerPC的Macintosh计

算机,也可用于WindowsXP和WindowsVista™系统。在您的首选平台中设计,然后跨

平台交付更加可靠、一致和高性能的结果。

2.1.2、CSS+DIV介绍

CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格

式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的

容与表现形式分离。页面容存放在HTML文档中，而用于定义表现形式的CSS规则则存放

在另一个文件中或HTML文档的某一部分，通常为文件头部分。将容与表现形式分离，不

仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的

加载时间。

在网页上使用样式表有三种方法可以在站点网页上使用样式表：

将网页到外部样式表。

在网页上创建嵌入的样式表。

应用嵌样式到各个网页元素。

每一种方法均有其优缺点：

当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一

个或多个外部样式表中定义样式，并将它们到所有网页，便能确保所有网页外观的一致性。

如果人们决定更改样式，只需在外部样式表—中作一次更改—而该更改会反映到所有

与该样式表相的网页上。通常外部样式表以.css做为文件扩展名，例如。

WORD版本.

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式

表，“嵌”在网页的标记符。嵌入的样式表中的样式只能在同一网页上使用。使

用嵌样式以应用级联样式表属性到网页元素上。如果网页到外部样式表，为网页所创建的

嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

当创建或修改网页样式时，可使用位于“格式”菜单的“样式”命，Dreamweaver

会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表将此样式保存为类选择

器。

可以使用“样式”对话框来创建新类选择器，修改或删除现有类选择器，或将CSS

格式设置属性应用到标准HTML标记符上例如

。当单击“确定”关闭对话框时，

Dreamweaver会将格式设置特征写回到使用正确语法的外部或嵌入的样式表中。或者，可

以用正确CSS语法键入样式信息。要键入嵌入的样式表的样式信息，请单击网页视图模

式下的“HTML”选项卡。

如果对应用到站点的主题选择“应用CSS”复选框，Dreamweaver将在站点的根

目录下创建名为的文件，其中Theme是主题的名称。如果修改主题，

Dreamweaver自动将更改写回主题CSS里。也可以通过直接编辑主题CSS来修改主题。

DIV元素是用来为HTML文档大块（block-level）的容提供结构和背景的元素。DIV

的起始标签和结束标签之间的所有容都是用来构成这个块的，其中所包含元素的特性由

DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为

区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在DIV

中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。

而中文我们把它称作“层次”。

以以下容为例：

WORD版本.

align="center"

可选值：center;left;right。决定字、画、表格等居中、靠左或靠右的作用和

居中标记

CSS单元的位置和层次-div标签

我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们

必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作

平台不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设

定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！

CascadingStyleSheets（CSS）是DHTML的基础。CSS用来设定你网页上的元素是

如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一个扩展，它可

用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS和CSS－

P。下面四个英文网址提供了详细的关于CSS和CSS-P的文件和解释。

当我们使用CSS-P的时候，我们主要把它用在DIV（division）tag上。当你把文

字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或

“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到

这些名词的时候，你就知道它们是指一段在DIV中HTML。

使用DIV的方法跟使用其他tag的方法一样：

ThisisaDIVtag.

如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用是一样的。

但当我们把CSS-P用到DIV中去以后，我么就可以严格设定它的位置。首先我们需

要给这个可以被CSS-P控制的DIV一个ID或说是它的名字。比如说我们给下面这个

WORD版本.

DIV的名字是truck。给名字的目的是我们以后可用JavaScript来控制它，比如说移

动它或改变它的一些性质等等。

Thisisatruck

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。

有两种把CSS-P应用到DIV的方法。

InlineCSS：Inline是最常用的方法。

Thisisatruck.

ExternalSTYLEtag：使用External方法的结果是一样的。我们会在以后的课程里

再详细解释这种方法。现在我们主要讨论Inline方法。请注意在External方法里，在

STYLE里的ID和DIV里的关系。

Thisisatruck.

Cross-BrowrCSS性质：

我们这个课程的主要目的是让你写出的网页在NS4和IE4上都能工作，所以我们

主要讨论那些对俩者都通用的性质。下面这些性质符合由W3C给出的标准。

position决定DIVtag是如何放置的。“relative”意思是DIV的位置是相对于

其他tag的，而“absolute”是说DIVtag的位置是相对于它所在的窗口。

left相对于窗口左边的位置

top相对于窗口上边的位置

widthDIVtag的宽度。所有在DIV里的文字或html都在里面。

WORD版本.

heightDIVtag的高度。这个性质很少用除非你想Clip层次。

clip给出layer的clipping（可看的见的）部分。Clip可使得DIV显示为一个

可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在DIV位置和大小。

clip:rect(top,right,bottom,left);

visibility隐蔽或展现DIV根据它的值“visible”，“hidden”，“inherit”。

z-indexDIVtag的立体位置。值越大DIV的位置越高。

background-colorDIV背景的颜色。

layer-background-colorNetscape的DIV背景颜色。

background-imageDIV的背景图象。

layer-background-imageNetscape的DIV的背景图象。

绝对定位和相对定位（position）

绝对定位：

定位属性将是网虫们打开幸福之门的钥匙：

H4{;left:100px;top:43px}

这项CSS规则让浏览器将

的起始位置精确地定在距离浏览器左边100象素，距离

其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，

从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）

设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比

例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位：

WORD版本.

绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设

置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：

I{;left:40px;top:10px}

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对

定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分

开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，

否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static是position

特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也

就是说，除了边距特性，或通过使用float特性来浮动单元可影响单元的定位外，其它

均不可以。

定位单元的控制（width、height、visiblility）

除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的

可视性。

宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以

设定字符向右流动的限制，即设定要素的宽度。

DIV{;left:200px;top:40px;width:150px}

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落最大水平尺寸

限制在150象素。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使

用比例值设定宽度，比例值指相对于母体要素的比例。IE4中，这项属性还可用于图象。

你可以通过宽度设置人为地拉宽或压缩图象。

WORD版本.

高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV{;left:200px;top:40px;height:150px}

这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的

和未定位的要素都适用。

H4{visibility:hidden}

选项：

visible使要素可以被看见

hidden使要素被隐藏

inherit指它将继承母体要素的可视性设置。

值inherit为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，

则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段

的EM单元被指定为可见，这时如果该段被隐藏，则段的所有其它容都将消失，而唯有EM

单元中的文本是可见的。

2.1.3、HTML简介

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本标示语言，是目前

网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、

声音、表格、等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述

浏览器所需的信息，而主体则包含所要说明的具体容。

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW

WORD版本.

盛行的原因之一，HTML语言的特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取

子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以

使用在广泛的平台上，这也是WWW盛行的另一个原因。

HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：

1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你

用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以

解释执行了。

2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间做

出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作

坊。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做

出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclip、UltraEdit。

一个HTML文件由一个HTML元素组成，即文件以开始。以结束，文档

中其他元素及其属性的声明都是HTML的元素体。

HTML元素的元素体和元素体由两大部分组成，即头元素…和体元素

…。头元素和体元素的元素体又由其他元素、文本和注释等组成。

一个标准的HTML文件应该具备如下结构：

标记一个HTML文件的开始

HTML文件的文件头部分开始

WORD版本.

…文件头部分容

HTML文件的文件头部分结束

HTML文件的文件体部分开始

…文件体

HTML文件的文件部分结束

标记该HTML文件结束

有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在

体元素中。在头元素中的元素表示的是该HTML文件的一般信息，比如该文件的标题、来

源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML

文件的属性值。但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序

就会改变HTML文件在浏览器上输出的形式。

HTML是一种规，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页

文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中

的容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文

件，然后根据标记符解释和显示其标记的容，对书写出错的标记将不指出其错误，且不停

止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的

是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的

显示效果。

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级”点。所谓超级，

就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML

获得广泛应用的最重要的原因之一。

由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、

WORD版本.

组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网

是建立在超文本基础之上的。

每种HTML标记符在使用中可带有不同的属性项，用于描述该标记符说明的容显示不

同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。

BGCOLOR用于定义网页的背景色，

BACKGROUND用于定义网页背景图案的图像文件

TEXT用于定义正文字符的颜色，默认为黑色

LINK用于定义网页中超级字符的颜色，默认为蓝色

VLINK用于定义网页中已被访问过的超接字符的颜色，默认为紫红色

ALINK用于定义被鼠标选中，但未使用时超链字符的颜色，默认为红色

例如：标记将定义页面的背景色为黑色，正文字体显示为白色。

以上属性使用中，需要对颜色进行说明，在HTML中对颜色可使用2种方法说明颜色

属性值，即颜色名称（英文名）和颜色值。其中颜色值用6个十六进制数来分别描述红、

绿、蓝三原色的配方法——称为RGB值，每2个十六进制数表示一种颜色。使用颜色值时，

应在值前冠以“#”号。

使用图案代替背景颜色，可以使页面更生动、美观。

可将图像文件所表示的一幅图像作为页面的背景，若图像幅面不够大，将

会将图像重复平铺在窗口中。

2.1.4、IIS简介

IIS(Inter-ICSoundbus)又称I2S，是菲利浦公司提出的串行数字音频总线协议。目

前很多音频芯片和MCU都提供了对IIS的支持。IIS总线只处理声音数据。其他信号(如控

WORD版本.

制信号)必须单独传输。为了使芯片的引出管脚尽可能少，IIS只使用了三根串行总线。这

三根线分别是：提供分时复用功能的数据线、字段选择线(声道选择)、时钟信号线。

IIS是InternetInformationServices的缩写，是一个WorldWideWebrver。

Gopherrver和FTPrver全部包容在里面。IIS意味着你能发布网页，并且有ASP

（ActiveServerPages）、JAVA、VBscript产生页面，有着一些扩展功能。IIS支持一些

有趣的东西，像有编辑环境的界面（FRONTPAGE）、有

全文检索功能的（INDEXSERVER）、有多媒体功能的（NETSHOW）其次,IIS是随Windows

NTServer4.0一起提供的文件和应用程序服务器，是在WindowsNTServer上建立

Internet服务器的基本组件。它与WindowsNTServer完全集成，允许使用WindowsNT

Server置的安全性以及NTFS文件系统建立强大灵活的Internet/Intranet站点。IIS

（InternetInformationServer，互联网信息服务）是一种Web（网页）服务组件，其中

包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传

输、新闻服务和发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件

很容易的事。

在同一时间允许打开的页面数，打开一个页面占一个iis，打开一个站框架页面占2

到3个iis；若图片等被盗链，在其它打开本站图片同样占一个iis。假若设置参数为50

个iis，则这个站允许同时有50个页面被打开。但要在同一时间（极短的时间）有50个

页面被打开，需要50个人同时操作，这个概率还是比较低的。所以，100个iis支持日

ip1000（同时访问人数必定远低于1000人）以上都不是很大问题，除非被盗链或框架引

发其它消耗。

1、IIS的添加请进入“控制面板”，依次选“添加/删除程序→添加/删除Windows

组件”，将“Internet信息服务（IIS）”前的小钩去掉（如有），重新勾选中后按提示操

WORD版本.

作即可完成IIS组件的添加。用这种方法添加的IIS组件中将包括Web、FTP、NNTP和SMTP

等全部四项服务。

2、IIS的运行当IIS添加成功之后，再进入“开始→设置→控制面板→管理工具

→Internet服务管理器(Internet信息服务)”以打开IIS管理器，对于有“已停止”字

样的服务，均在其上单击右键，选“启动”来开启。

3、在WindowsXPHome版本中添加IIS的方法一般情况下按照“一”的方法只适用

于WindowsXP的专业版本，而对于家庭版，如今已有了破解方法：

步骤1首先我们需要准备一Windows2000的安装光盘，假设你的WindowsXP家庭版

安装在“C:Windows”，启动记事本程序，在打开对话框中选择打开

“C:”，找到“[Components]”小节，并继续找到类似“iis=

,OcEntry,,hide,7”的行，把这一行替换为“iis=,OcEntry,

,,7”，之后保存文件。

步骤2把Windows2000专业版的光盘插入光驱，用Winrar打开光盘i386目录下的

_和_这两个CAB格式的文件，将解压缩得到的“”改名为

“”，复制到“C:Windowssystem32tup”目录下；将“”改名

为“”，复制到“C:Windowsinf”目录下。

步骤3打开控制面板，单击“添加删除程序”图标，然后在窗口左侧导航栏上单击

“添加/删除Windows组件”按钮，在打开的“Windows组件向导”中，选中“Internet

信息服务(IIS)”前的复选框。单击右下角的“详细信息”按钮可以打开对话框，在该对

话框中我们可以选择需要安装的IIS组件容。选择完毕后单击“确定”按钮，退回到界面

中再单击“下一步”，系统就会开始复制文件。提示：如果在安装过程中系统需要插入

WindowsXPCD，或者需要你提供“exch_”文件，那是因为你按照默认的选

WORD版本.

项安装了IIS。要解决这个问题，只要清空“SMTPService”选项前的复选框即可。如果

进入窗口中，“Internet信息服务(IIS)”选项无法选择，那么很可能因为你使用的

“_”和“_”是从WindowsXP专业版中提取的，只要换成Windows2000

专业版中的这两个文件即可。步骤4安装结束后，你可以打开“控制面板→性能和选项

→管理工具”查看“Internet信息服务管理”。再打开IE，在地址栏中输入“localhost”

后回车，验证一下IIS是否正常运行。经过验证，WWW、FTP等几个服务经过这样的修改

都可以在WindowsXP家庭版上正常运行。不过经过这样处理安装的IIS在运行上可能存

在某种未知的缺陷。

在Vista系统中安装IIS7.0相对于早先的版本，IIS7.0带来了许多引人注目的新特

色新功能，比如基于mework的全局配置文件，可简单地通过文本编

辑器或MicrosoftVisualStudio编辑；全新的IIS管理器，可同时管理IIS和ASP.

NET，操作更加方便；以及引入了命令行工具，给Web服务器的日常管理、

监视和配置提供了除图形接口外的另一种方式，更为简单、高效。同WindowsXP一样，

在WindowsVista的默认设置下，IIS(Internet信息服务)7.0未予安装，要想使用它，

必须首先安装IIS。下面简单介绍IIS的安装过程：依次点击“开始”=>“控制面板”

=>“程序”，选择“打开或关闭Windows功能”。这是一个触发UAC的操作，如果Windows

Vista没有关闭UAC，则会弹出提示信息，确认并继续；如果仅需要IIS7.0支持静态容，

可直接选中“Internet信息服务”，如果希望Web服务器支持动态容，则需展开“万维

网服务”分支，将所需的选项全部选中；点击“确定”，WindowsVista即启动IIS的安

装过程；安装完成后，打开浏览器输入“localhost/”，检查IIS是否正常。

WORD版本.

2.1.5、ASP简介

ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。它可以根据客

户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回

给浏览器。ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设

计环境。

1、什么是ASP

ASP的全称是ActiveServerPages,中文名称叫做动态服务器网页，其功能在于可以

使用它来开发运行在Windows服务器平台上的动态网页和网页。尽管我们常把“ASP脚本”

挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同样也不是一种应用程序，

它实际上是一种开发动态网页的技术。

2、ASP的脚本语言

ASP的脚本语言可以是VBScript或者Jscript，也可以是两者的结合，所以任何一种

文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。和通常的

VBScript和Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏

览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的ASP代码了。

程序执行完毕，服务器仅将执行的结果返回给客户端浏览器，这样即使客户端的浏览

器不支持VBScript或Jscript，但是仍然可以浏览动态的网页。

VBScript是IIS默认的脚本语言，当然可以在IIS中更改默认的脚本语言。如果改成

Jscript，那么默认的脚本语言就是Jscript。因为VBScript在属性和方法上的灵活表现

方式更适合作为服务器的脚本，所以推荐大家用VBScript作为ASP的默认脚本语言。

3、ASP的运行环境

由于ASP是一种服务器的脚本语言，所以并不是所有的Web服务器都具有这个功能。

WORD版本.

ASP是由Microsoft公司推出的，当然在目前页只有Microsoft公司推出的服务器能实现

ASP的强大功能，其他的一些服务器在安装了ASP组件后才能实现这个功能。

Microsoft公司推出的支持ASP的Web服务器有以下几个：

MicrosoftInternetInformationServerversion(IIS);

MicrosoftPeerWebServer;

MicrosoftPersonalWebServer(PWS);

其中前两个主要是为Microsoft公司的WindownsNT/2000/XP系统开发的，当然它

们的功能以及稳定性都要强很多。目前大型的站点大多是有IIS作为服务器，而PWS是为

一般的PC用户开发的。

既然ASP是在服务器端执行的，因此访问这些以.asp为后缀的文件时，就不能使用实

际的物理路径，而只能用虚拟路径。使用虚拟路径访问ASP最简单的方法就是将ASP文件

拷贝到IIS的安装目录中(默认的安装目录为C：Inetpubwwwroot),然后就可以通过IE

浏览器直接访问了。

访问文件名为“”的ASP文件，如果在IE浏览器中用物理路径访问，本来

期望的结果是不会出现的，浏览器只会显示普通的HTML页面。为此应该将“”

文件拷贝到服务器目录下，然后通过虚拟路径来访问该页面。如果程序没有错的话即可看

到预期的效果。

4、ASP的工作原理

通过上述介绍，大家应该了解到一个ASP页面从服务器端传送到客户端的原理与一般

静态HTML页面是不同的。

从客户端的一URL请求到服务器反馈一个页面给浏览器，其大致的流程如下：

(1)用户在客户端浏览器中输入一个网址，与服务器建立连接。

WORD版本.

(2)服务器根据用户请求的网址在硬盘上找到相应的文件。

(3)如果文件是普通的HTML文档，那么服务器将直接把该文件传送到客户端。

(4)如果文件是服务器脚本，那么服务器将运行这个文件。如果需要查询数据库，则

通过ADO组件连接ODBC或DSN数据源访问数据库。进行了一系列的运算和解释后，将最

终结果形成一个纯HTML文档。

(5)把这个文档传送到客户端。

(6)结束这次连接。

由于最后传送给客户端的是一个纯HTML文本文件，因此用户在浏览器上是看不到ASP

文件的源代码的。

5、ASP的开发工具

使用ASP进行网路编程，选择一个合适的开发工具是很重要的。ASP对开发工具没有

特殊的要求，只要具有文本编辑器功能的工具均可。因此ASP的开发工具很多，比较好的

由VisualInterdev、Dreamweaver等。

Dreamweaver是一个集成的Web应用软件开发系统，包括开发、发行以及管理数据库

驱动的Web应用软件所需的所有的功能，所以一般情况下推荐使用Dreamweaver。

6、ASP网页特点

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

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

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

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

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

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

WORD版本.

（3）服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传

送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页；

（4）ASP提供了一些置对象，使用这些对象可以使服务器端脚本功能更强。例如可以

从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，

然后向web浏览器发送信息；

（5）ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、

发送Email或访问文件系统等。

（6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用

者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。

(7)方便连接ACCESS与SQL数据库.

(8)开发需要有丰富的经验,否则会留出漏洞,让骇客（cracker）利用进行注入攻击.

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

WAP手机。但是其原理也是一样的。

2.1.6、数据库技术简介

数据库技术是信息系统的一个核心技术。是一种计算机辅助管理数据的方法，它研究

如何组织和存储数据，如何高效地获取和处理数据。是通过研究数据库的结构、存储、设

计、管理以及应用的基本理论和实现方法，并利用这些理论来实现对数据库中的数据进行

处理、分析和理解的技术。即：数据库技术是研究、管理和应用数据库的一门软件科学。

数据库技术是现代信息科学与技术的重要组成部分，是计算机数据处理与信息管理系

统的核心。数据库技术研究和解决了计算机信息处理过程中大量数据有效地组织和存储的

WORD版本.

问题，在数据库系统中减少数据存储冗余、实现数据共享、保障数据安全以及高效地检索

数据和处理数据。

数据库技术研究和管理的对象是数据，所以数据库技术所涉及的具体容主要包括：通

过对数据的统一组织和管理，按照指定的结构建立相应的数据库和数据仓库；利用数据库

管理系统和数据挖掘系统设计出能够实现对数据库中的数据进行添加、修改、删除、处理、

分析、理解、报表和打印等多种功能的数据管理和数据挖掘应用系统；并利用应用管理系

统最终实现对数据的处理、分析和理解。

数据库（Databa）是按照数据结构来组织、存储和管理数据的仓库，它产生于距今

五十年前，随着信息技术和市场的发展，特别是二十世纪九十年代以后，数据管理不再仅

仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据库有很多种类型，

从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个

方面得到了广泛的应用。

数据库是“按照数据结构来组织、存储和管理数据的仓库”。在经济管理的日常工作

中，常常需要把某些相关的数据放进这样的“仓库”，并根据管理的需要进行相应的处理。

例如，企业或事业单位的人事部门常常要把本单位职工的基本情况(职工号、、年龄、性别、

籍贯、工资、简历等)存放在表中，这表就可以看成是一个数据库。有了这个"数据仓库"

我们就可以根据需要随时查询某职工的基本情况，也可以查询工资在某个围的职工人数等

等。这些工作如果都能在计算机上自动进行，那我们的人事管理就可以达到极高的水平。

此外，在财务管理、仓库管理、生产管理中也需要建立众多的这种"数据库"，使其可以利

用计算机实现财务、仓库、生产的自动化管理。

给数据库下了一个比较完整的定义：数据库是存储在一起的相关数据的集

合，这些数据是结构化的，无有害的或不必要的冗余，并为多种应用服务；数据的存储独

WORD版本.

立于使用它的程序；对数据库插入新数据，修改和检索原有数据均能按一种公用的和可控

制的方式进行。当某个系统中存在结构上完全分开的若干个数据库时，则该系统包含一个

“数据库集合”。

数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合

具有如下特点：尽可能不重复，以最优方式为某个特定组织的多种应用服务，其数据结构

独立于使用它的应用程序，对数据的增、删、改和检索由统一软件进行管理和控制。从发

展的历史看，数据库是数据管理的高级阶段，它是由文件管理系统发展起来的。

Access是微软公司推出的基于Windows的桌面关系数据库管理系统（RDBMS），是

Office系列应用软件之一。它提供了表、查询、窗体、报表、页、宏、模块7种用来建

立数据库系统的对象；提供了多种向导、生成器、模板，把数据存储、数据查询、界面

设计、报表生成等操作规化；为建立功能完善的数据库管理系统提供了方便，也使得普

通用户不必编写代码，就可以完成大部分数据管理的任务。

Access能够存取Access/Jet、MicrosoftSQLServer、Oracle，或者任何ODBC兼

容数据库的资料。熟练的软件设计师和资料分析师利用它来开发应用软件，而一些不熟练

的程序员和非程序员的"进阶用户"则能使用它来开发简单的应用软件。虽然它支援部份

面向对象（OO）技术，但是未能成为一种完整的面向对象开发工具。

MicrosoftAccess在很多地方得到广泛使用，例如小型企业，大公司的部门，和喜爱

编程的开发人员专门利用它来制作处理数据的桌面系统。它也常被用来开发简单的WEB

应用程序．这些应用程序都利用ASP技术在InternetInformationServices运行．比较

复杂的WEB应用程序则使用PHP/MySQL或者ASP/MicrosoftSQLServer．

它的使用方便程度和强大的设计工具为初级程序员提供许多功能。不过，这种便于

使用可能使人误解。这类开发者都是没有在应用或者数据设计方面训练的办公室从业人

WORD版本.

员。因此许多人以为这样的开发者能够创造可用的系统，但也有很多人认为工具本身的

局限性产生了这样的误导。

一些专业的应用程序开发人员使用Access用作快速应用开发，特别是给街道上的

推销员制作一个初型或独立应用程序的工具。可是如果是透个网络存取数据的话，

Access的可扩放性并不高．因此当程序被较多使用者使用时，他们的选择多会是倾向于

一些客户端-服务器为本的方案，例如Oracle、DB2、MicrosoftSQLServer、Windows

SharePointServices、PostgreSQL、MySQL、AlphaFive、MaxDB，或者Filemaker。无论

如何，不少Access的功能（表单，报告，序列和VB代码）可以用作其他数据库的后期

应用，包括JET（档案为主的数据库引擎，Access缺省使用）、MicrosoftSQLServer、

Oracle和任何其他跟ODBC兼容的产品。这种方法允许开发者把一个成熟的应用的数据移

动到一台更大功率的服务器而没有已经在适当的位置牺牲发展。

很多开发者谁使用MicrosoftAccess使用Leszynski命名约定，虽然这不普遍；它

是一次编程大会，并非一个DBMS实施的规章。

MicrosoftAccess容易被应用于小的工程但是规模无效对大的工程如果应用被不好设

计。全部数据库质问，形式和报告被储存在数据库里，并且与相关的模型的理想协调，

没有与他们做一个身体上组织的阶层的可能性。

2.2、社会可行性研究

2.2.1、本课题的研究意义

博客的发展对应了全球围知识社会来临的背景。对于中国，这样一个组织机构信息化

仍处于初级阶段的国家，博客这种充分发挥个人主导性和积极性的非正式知识管理工具和

其深度沟通交流的功能，对于我们国家的知识传播、知识扩散和有效提升组织的学习和创

WORD版本.

新能力，具有更特殊的意义，随着Internet在中国的迅速发展，人们日常生活中越来越

多地使用这项新的技术来为自己的工作和学习服务。由于，WEB页面能把文本、图像、声

音、动画、视像等多媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览

更为方便，同时动态的网页能实现网上交易平台、把个人信息反馈方便了朋友与网友之间

信息交流，因此许多网友纷纷建设具有自己独特风格的以展示自己的个性。也可以让我们

更加深刻的了解网页设计这门课，也可以通过设计网页，通过实践老让我们更贴近社会，

了解社会的需要，需要什么样的网页，需要什么样的人才，在今后迈向社会奠定了基础。

2.2.2、同类课题存在的问题

其他存在一些问题，有的布局方面很不理想，颜色搭配上有些混乱，导航的颜色较轻

与背景颜色相近，不明显，让人进入网页中找不到需要的连接。

在设计中排版与在WEB页中浏览时显示的不相符比较混乱。各个子页的颜色风格不相

符，整体的效果很乱。让人眼花缭乱，进而使得使用者感觉不舒服，放弃网页的浏览。

2.2.3、本课题要达到的设计目标

本设计是在学生完成了两年半的课程之后进行的一项综合检验学生学习成果的一次

综合的训练，同时也是学生就业前的一次练兵机会，主要的目的有几下方面：

1、加深、巩固学生所学的专业课程的基本理论知识，理论联系实际，进一步培养学

生综合分析问题和解决问题的能力。

2、学到一些网页制作的资料收集整合等一系列的实践训练，使学生掌握基本理论知

识及其实际业务能力，从而达到提高学生专业的最终目的。

3、利用所学的知识，查阅相关信息，发挥创造力掌握运用等其它应用软件的综合性

相关设计的技能，培养其独立设计的综合能力。

WORD版本.

WORD版本.

三、总体设计与规划

3.1网页艺术设计介绍

3.1.1网页艺术设计的容

设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和

熟悉设计的对象和构成的要素。网页艺术设计涉及的具体容很多，可以概括为视听元素和

版式设计两个方面。

1.视听元素

这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导

航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计

者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用

大大丰富了网页艺术设计的表现力。

以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支

持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件

（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏

览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供

WORD版本.

了基于OLE的ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。

另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应

用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因

此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运

用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页

的艺术设计提出了更高的要求。

2.版式设计

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术

设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元

素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色

的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。

但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则

不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸

和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了

一定的难度。

3.1.2网页艺术设计的原则

网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之

处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，

网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，容与形式的统

一。它要求设计者必须掌握以下三个主要原则：

1.主题鲜明

WORD版本.

视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将

主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接

受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且

在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设

计主题。

根据认知心理学的理论，大多数人在短期记忆中只能同时把握４到７条分立的信息，

而对多于７条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就

是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人

们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵

从。

作为视觉设计畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种

效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者

获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成

元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出

主题，增强浏览者对网页的注意力，增进对网页容的理解。只有两个方面有机地统一，才

能实现最佳的主题诉求效果。

优秀的网页设计必然服务于的主题，就是说，什么样的，应该有什么样的设计。例如，

设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术

设计与主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结

合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更

好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主

题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的

WORD版本.

“功能”。而一个个人，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为

目的。它的主题只有一个，就是——美。

只注重主题思想的条理性而忽视网页构成元素空间关系的形式美组合，或者只重视网

页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最佳诉求效果，难以吸引浏

览者的注意力，出现平庸的网页设计或使网页设计以失败而告终。

要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的

空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。

2.形式与容统一

任何设计都有一定的容和形式。容是构成设计的一切在要素的总和，是设计存在的基

础，被称为“设计的灵魂”；形式是构成容诸要素的部结构或容的外部表现方式。设计的

容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表

现方式。容决定形式，形式反作用于容。一个优秀的设计必定是形式对容的完美表现。正

如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再

现现实，而在于使其外部形式传达和表现出一定的情绪、气氛、格调、风尚、趣味，使物

质经由象征变成相似于精神生活的有关环境。”

一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只

讲花哨的表现形式以及过于强调“独特的设计风格”而脱离容，或者只求容而缺乏艺术的

表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题

的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的

分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了

炫耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考

虑来实现全面的功能并体现美感才能实现形式与容的统一。

WORD版本.

据有关资料所做的保守估计，目前在WWW上网页数据传输平均以每秒1.5k的速度到

达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素

等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者

必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它

不符合网页传播信息的突出特性之一——快捷性，使网页容不能很快地到达访问者，影响

了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，

因而不是形式与容的完美统一。

网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多

变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与容统一的

同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体容的统一。因此，

在网页设计中必须注意形式与容的高度统一。

3.强调整体

网页的整体性包括容和形式上的整体性，这里主要讨论设计形式上的整体性。

网页是传播信息的载体，它要表达的是一定的容、主题和意念，在适当的时间和空间

环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，

可以使浏览者更快捷、更准确、更全面地认它、掌握它，并给人一种部有机联系、外部和

谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。

网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共

性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色

彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织

和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决

定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，

WORD版本.

不可设计完第一屏再考虑下一屏。同样，整个网页部的页面，都应统一规划，统一风格，

让浏览者体会到设计者完整的设计思想。

从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极

必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可

能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”

基础上的整体。

3.1.3网页艺术设计的特点

1.交互性与持续性

网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web

成为热点的主要原因，也是网页设计时必须考虑的问题。传统媒体（如广播、电视节目、

报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式

来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动

参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像

印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据各个阶段的经营

目标，配合不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。

例如，为了保持浏览者对的新鲜感，很多大型总是定期或不定期的进行改版，这就需要设

计者在保持视觉形象一贯性的基础上，不断创作出新的网页设计作品。

2.多维性

多维性源于超级，主要体现在网页设计中对导航的设计上。由于超级的出现，网页的

组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息

的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构

WORD版本.

等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者

带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而

完善的导航设计。

印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻

到下一页查找剩余部分，为了帮助读者找到他们要找的信息，出版者提供了目录、索引或

脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于“续68页”

这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合

于网页导航。在替浏览者考虑得很周到的网页中，导航提供了足够的、不同角度的，帮助

读者在网页的各个部分之间跳转，并告知浏览者现在所在的位置、当前页面和其他页面之

间的关系等。而且，每页都有一个返回主页的按钮或，如果页面是按层次结构组织的，通

常还有一个返回上级页面的。对于网页设计者来说，面对的不是按顺序排列的印刷页面，

而是自由分散的网页，因此必须考虑更多的问题。如：怎样构建合理的页面组织结构，让

浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助、页面、查询功能在

的导航系统？这一切从哪儿开始，到哪儿结束？

3.多种媒体的综合性

目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络带宽

的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合

运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量提出的更高要

求。目前国网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流（Stream）

技术的推动下，Internet网上出现实时的音频和视频服务，典型的有在线音乐、在线广播、

网上电影、网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未来

的发展方向。

WORD版本.

4.版式的不可控性

网页版式设计与传统印刷版式设计有着极大的差异：

(1)印刷品设计者可以指定使用的纸和油墨，而网页设计者却不能要求浏览者使用什

么样的电脑或浏览器；

(2)网络正处于不断发展之中，不象印刷那样基本具备了成熟的印刷标准；

(3)网页设计过程中有关Web的每一件事都可能随时发生变化。

这一切说明，网络应用尚处在发展之中，关于网络应用也很难在各个方面都制订出统

一的标准，这必然导致网页版式设计的不可控制性。其具体表现为：

(1)网页页面会根据当前浏览器窗口大小自动格式化输出；

(2)网页的浏览者可以控制网页页面在浏览器中的显示方式；

(3)不同种类、版本的浏览器观察同一个网页页面，效果会有所不同；

(4)用户的浏览器工作环境不同，显示效果也会有所不同。

把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，

但这也正是网页设计的吸引人之处。

5.技术与艺术结合的紧密性

设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越

自身已有经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律基础上得

到了完全的自由，一种想象和创造的自由。网络技术主要表现为客观因素，艺术创意主要

表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和

艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量

需求。

例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或电影下载回本地机器，

WORD版本.

然后使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间。流

（Stream）技术出现以后，网页设计者充分、巧妙地应用此技术，让浏览者在下载过程中

就可以欣赏这段音乐或电影，实现了实时的网上视频直播服务和在线欣赏音乐服务，无疑

增强了页面传播信息的表现力和感染力。

网络技术与艺术创意的紧密结合，使网页的艺术设计由平面设计扩展到立体设计，由

纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，

而更接近于电影或电视的观赏效果。技术发展促进了技术与艺术的紧密结合，把浏览者带

入一个真正现实中的虚拟世界。

3.2的整体布局及结构

3.2.1确定建设的主题与规划

现在的WEB页面能把文本、图像、声音、动画、视像等多媒体信息集于一体，不但使

信息的显示更加生动，而且使信息的浏览更为方便，同时动态的网页能实现网上交易平台、

把个人信息反馈方便了朋友与网友之间信息交流。所以我这次所设计的为个人博客，即能

提高自己的设计的技术，丰富自己的文化知识，在建设的过程中能学到实际的网络知识；

其次，对与即将毕业的学生，个人是一个很好的网络明，可以让别人对自己有更好的了解。

最后，有这么一个自己设计和制作的，可以证明用有了一定的计算机水平，对于以后的应

聘中能有个很好的筹码，本人比较喜欢中国的古典文化，所以我所设计的页面设计中有

很浓厚的中国水墨风格。每个标题下都设有，方便访问者访问其他页面

首先建立自己的站点，在站点shixun中我建立了几个文件夹用于保存设计所需要的

各种素材和网页存根s，其中文件夹包括images、music、css、data、video、zhaopian

等，images文件夹保存着我的个人设计中的导航等图片，music文件夹保存着我的中的背

WORD版本.

景音乐及音乐下载文件，css文件夹中保存的是我的中涉及到的页面格式，data文件夹中

保存的是我的动态网页中所需要的数据库文件，video文件夹中保存的是我的首页flash

动画，zhaopian文件夹中所保存的是我的相册中所有的相片。每个网页的文件都是保存在

shixun站点下的文件夹中，包括留言板、个人心情等动态网页，使得我的个人博客的增加

了很多的多变性，游人可以随时浏览我的个人心情和留言等，增加了访问者与被访问者的

互动性，可以使得被访者和访问者能够更好的沟通共同进步。

3.2.2网页的整体布局和导航

1．网页的布局其实就是一个网页的排版过程，只有你布局布的合理让人一看就能明

白你要表达的意思，这才是最重要的。成功的网页中，一个共同的特点就是网页的整体

架构十分的清晰明了，便于用户浏览。

我的个人网页布局采用的是“三”字型的设计，就是最上方是体现个人风格图片和

导航图片，中间是各个网页的主题的主打容，最下方是的结尾宣示所有及联系方式等。

总体布局来看比较整齐简洁和美观。

2．导航栏能让我们在浏览时会很容易的到达不同的网页，是网页元素中非常重要的

部分，所以导航栏一定要清晰醒目，一般来讲，导航栏要在“第一屏”能显示出来，但

是有时第一屏可能会小于435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导

航栏。

我的导航栏基于以上想法制作的是横向的导航栏，借用PS软件制作出类似毛笔笔画

的导航，贴切与网页的整体风格。保证了统一的中国水墨风格。

WORD版本.

3.3画面风格的设计及素材处理

3.3.1网页画面风格设计

首先要明确的目标，要有明确的主题，体现自己的风格，，特别是对于个人，不可能

像大型那样做得容全面，所以必须要找准一个自己感兴趣容，做深、做透，办出自己的特

色，这样才能给浏览者留下深刻的印象。至于的容则没有限制自己喜欢什么就弄什么，

但是要主题鲜明，切合自己的名字。

一个设计得是否成功，很大程度上决定于设计前的规划。规划包含的容很多，如的结

构、栏目的设置、的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之

前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网

页才能有个性、有特色，具有吸引力。

的整体色调以黑白色为主，然后点缀其他不同的图片进行搭配，突出主题，颜色没有

过多，过杂，以免给人一种杂乱的感觉。版面设计十分灵活，根据各部分的容决定字体风

格，相同的风格多次调用的是用CSS设定的样式，以保证随时，准确的调用。

中共分为10个页面，包括了开场的flash动画，和留言板等页面，页面的风格统一是中

国水墨风格，每页分三部分，最上方是风格图片和导航图片，中间是个网页的主题容，最

下方是的结尾宣示所有及联系方式等。总体布局来看比较整齐简洁和美观。

3.3.2网页素材处理技术

1．网页的排版与制作使用的是AdobeDreamweavercs3，是一款在网页设计与制作中

比较简单好用的软件.

2．用Photoshop制作和处理网页中相关的图片。

例如：

WORD版本.

我的logo用的是ps软件中的图层蒙版工具，把风格相同的图片叠加在一起使用图层

蒙版，运用画笔工具是最下图层突显出来，最后剪切完成。如图3-1、图3-2所示。

我的banner制作是用ps软件制作而成，因为要贴切去的整体风格我选用的是字体是

汉仪粗篆繁字体和经典行书简字体。效果如图3-3所示：

图3-3

我的导航栏是用ps软件中的画笔工具和文字工具制作而成的，通过修改画笔的各项

数值，使画笔画出的感觉如同毛笔的感觉，在其上用文字工具打上导航文字。每个导航各

制作了两种不同颜色，在网页效果中使用了鼠标经过图片，效果如图3-4所示：

图3-4

3．用flash软件制作了网页中的动画。（网页中的开场动画效果为例）如图3-5所示：

3.3.3栏目介绍及功能简介

本前台包括首页、日记、心情、照片、留言板等栏目，下面是对个栏目的简介：

1.首页：开始是一个自制的flash欢迎动画，采用自动跳转动作，自动跳转到包含个

人资料、日记等栏目的页面。

WORD版本.

2.日记：主要是作者的平时的日记，及各种相关的知识存储。

3.心情：主要是作者平时的个人心情介绍。只有主人能够通过密码登录修改心情。游

人没有权限去修改。

4.照片：是作者相关的图像资料。有人不需要登录即可浏览观看。

5.留言板：此栏目设立的主要目的是为了能够和大家进行交流。浏览者不需要登录即

可留言。

6.档案：简单的罗列了主人个人资料的相关介绍。

7.音乐：是作者喜欢以及收藏的音乐,可以供游人下载。

8.个人作品：是作者以前做过的flash、photograph作品的展示。

9.后台管理：只有主人有权限去修改、添加、删除信息。

WORD版本.

四、的详细设计与制作

4.1站点

4.1.1创建和设计站点

1、启用DreamweaverCS3，点击Dreamweaver站点管理，建立一个站点。如图4-1、

4-2所示：

WORD版本.

图4-1

WORD版本.

图4-2

2、在“站点定义”对话框的“高级”选项卡的“分类”栏中选择“本地信息”，设置

站点名称，将“本地根文件夹”设置为“E：shixun”，本地信息设置结果如图4-3所示：

图4-3

3、选择“测试服务器”,将服务器类模型设置为ASPJavaScript，如图4-4所示：

WORD版本.

图4-4

4、设置完毕，单击“确认”按钮返回到编辑站点对话框。

5、在编辑站点对话框中，点击“完成”按钮。如图4-5所示：

4.2网页制作

4.2.1创建文件夹

在文件夹里面建立一些文件夹，包括“image”（存储图片）、“video（存储flash)

“data”(用于存储数据库)、“music”（用于存储背景音乐）等。如图4-6所示：

图4-6

4.2.2创建文件

选择建立的站点文件夹，右键单击该文件夹，在弹出的快捷菜单栏中选择新建文件，

开场动画名为，主页名为，日记网页名为，主要是我的一些个

人日记。档案文件名为是我的一些个人资料，相片文件名为是我的个人相

片。音乐文件名为，是我的一些收藏。个人作品文件名为，是我以前的flash

作品和ps作品展示。留言板为因为是数据库的动态网页所以是asp格式

WORD版本.

的。心情也是一样的动态网页名为。登录页面为。如图4-7、4-8

所示：

图4-7

图4-8

4.2.3创建欢迎flash动画

1、打开文件，单击快捷工具栏中的ap-div标签绘制一个可调节大小的

标签框，在其中插入单元格，并把用flash制作的欢迎动画插入进来，如图4-9所示：

WORD版本.

图4-9

4.2.4创建主页面

1、打开主页文件，单击快捷工具栏中的ap-div标签绘制一个可调节大小的标签框，

在其中插入单元格，并把用Photoshop制作的首页图片插入进来，如图4-10所示：

图4-10

2、再次单击快捷工具栏中的ap-div标签绘制一个可调节大小的标签框，在其中插入

单元格，在单元格中插入ps制作的导航，制作成鼠标经过图片，并全部选中水平（居中

对齐）垂直（居中）。如图4-11所示：

3、再次单击快捷工具栏中的ap-div标签绘制一个可调节大小的标签框，在其中插入

WORD版本.

单元格，在其中插入个人资料，日记，留言板，心情等。如图4-12所示：

图4-12

4.2.5留言板及个人心情网页设计

1.使用Access建立一个空白数据库如图4-13所示：

图4-13

使用Access设计视图设计表格如图4-14所示：

WORD版本.

图4-14

建立三个表为xinqing（心情）、denglu（管理员账号和密码）、mytable（留言板）如

图4-15所示：

图4-15

2.数据库连接并添加服务器行为

WORD版本.

在dreamweaver软件中的应用程序绑定数据库记录集以及在网页表格中添加服务器行

为使其中能够显示留言及心情容等。如图4-16、图4-17所示：

3主要的数据表结构

中放留言信息，如图4-18所示：

4.主要留言和心情界面介绍及功能介绍：

留言板页面中可以看到有昵称及容填选框，所有游客都可以留言并发表，该页面在设

计中如图4-21所示：

心情填写页面中可以看到有容填选框，因为此为个人设计，所以心情更改只有本的管

理员可以通过密码登录点击进入，如图4-22、4-23所示：

WORD版本.

密码错误会提示从新输入并返回首页，如图4-24所示：

图4-24

4.2.6实现的主要功能

我的网页中主要包括了主页、日记、心情、档案、音乐、留言板、照片、个人作品。

主页主要上用来显示网页的主要容，在主页中里，我嵌套了一副Flash，并在网页中

添加了隐藏的音乐，使得本网页有了精美的音乐。如图4-25、图4-26所示：

WORD版本.

图4-26

日记主要是记录作者个人发表的文章及的文化知识让更多的人了解和学习更多的知

识，如图4-27所示：

图4-27

个人爱好主要是用来介绍自己和介绍自己的爱好，以便让更多的人了解自己。如图

4-28所示：

图4-28

个人像册是用来显示照片的，在个人像册里我使用了图片查看器在flash元素中添加

大量个人相片的，通过做个人像册我更加的了解图片查看器及flash元素的的使用。如图

4-29、图4-30所示：

图4-30

个人作品是作者以前学习中学习并加以制作的flash及photograph设计作品，可以

很好的让人们了解作者所学习的知识的程度，并对作者加以认识，如图4-31所示：

WORD版本.

留言板可以使进入此的游客和作者能够更好的沟通和相互学习，如图4-32所示：

音乐页面可以使浏览者看到主人的音乐兴趣所在也可以下载音乐资源。如图4-33、

4-34所示：

在音乐页面中我添加了一个行为动作，点击“此生不换”可播放音乐，首先点击行为

面板中是+弹出菜单中的~建议不在使用中的播放声音，如图4-35所示：

图4-35

修改行为的发生动作为onClick如图4-36所示：

图4-36

WORD版本.

五、的调试及维护

5.1系统测试

系统测试，英文是SystemTesting。是将已经确认的软件、计算机硬件、外设、网络

等其他元素结合在一起，进行信息系统的各种组装测试和确认测试，系统测试是针对整个

产品系统进行的测试，目的是验证系统是否满足了需求规格的定义，找出与需求规格不符

或与之矛盾的地方，从而提出更加完善的方案。系统测试发现问题之后要经过调试找出错

误原因和位置，然后进行改正。是基于系统整体需求说明书的黑盒类测试，应覆盖系统所

有联合的部件。对象不仅仅包括需测试的软件，还要包含软件所依赖的硬件、外设甚至包

括某些数据、某些支持软件及其接口等。

系统测试是开发中不可缺少的一个环节，它是衡量我们开发系统的一个标尺。它的

目标是发现软件中的错误，然后通过调试对其进行改正，从而开发出高质量的完全符合

用户需要的软件。

对本系统的测试主要包括以下几个方面：

1.连接测试

一个好的系统应该不包含中断，花费时间检查可以避免错误信息的发生率。测试可

以分为三个方面：首先，测试所有是否按指示的那样确实到了该的页面；其次，测试所

的页面是否存在；最后，保证Web应用系统尚没有孤立的页面。

经过系统连接测试，已经把系统中存在的所有错误都修改正确了。用户可以放心使

用。

2.检查布局的一致性

对于一个好的系统，布局的一致性也是十分重要的。我们在设计系统时，常常会因

WORD版本.

为追求单个页面的美观而忽略了系统的整体效果。这就需要对系统进行整体浏览，检查

布局和图像的一致性。

通过对系统的整体浏览调试，已经可以保证系统整体布局的一致性，相信能够为用

户提供简洁美观的页面。

本系统在运行过程中可能会伴随出现各种各样的软硬件问题，这就需要进行系统的

软件与硬件维护。

3．功能测试

测试软件系统的功能是否正确，其依据是需求文档，如《产品需求规格说明书》。由

于正确性是软件最重要的质量因素，所以功能测试必不可少。

4．健壮性测试

测试软件系统在异常情况下能否正常运行的能力。健壮性有两层含义：一是容错能力，

二是恢复能力。

5．性能测试

测试软件系统处理事务的速度，一是为了检验性能是否符合需求，二是为了得到某些

性能数据供人们参考（例如用于宣传）。

6．用户界面测试

重点是测试软件系统的易用性和视觉效果等。

7．安全性（curity）测试

是指测试软件系统防止非法入侵的能力。“安全”是相对而言的，一般地，如果黑客

为非法入侵花费的代价（考虑时间、费用、危险等因素）高于得到的好处，那么这样的系

统可以认为是安全的。

8．安装与反安装测试。

WORD版本.

5.2系统维护

系统维护工作在整个系统生命周期中常常被忽视。人们往往热衷于系统开发，当开发

工作完成以后，多数情况下开发队伍被解散或撤走，而在系统开始运行后并没有配置适当

的系统维护人员。这样，一旦系统发生问题或环境发生变化，最终用户将无从下手，这就

是为什么有些信息系统在运行环境中长期与旧系统并行运行不能转换，甚至最后被废弃的

原因。随着信息系统应用的深入，以及使用寿命的延长，系统维护的工作量将越来越大。

系统维护的费用往往占整个系统生命周期总费用的60%以上，因此有人曾以浮在海面的冰

山来比喻系统开发与维护的关系，系统开发工作如同冰山露出水面的部分，容易被人看到

而得到重视，而系统维护工作如同冰山浸在水下部分，体积远比露出水面的部分大得多，

但由于不易被人看到而常被忽视：从另一方面来看，相对具有“开创性”的系统开发来讲，

系统维护工作属于“继承性”工作，挑战性不强，成绩不显著，使很多技术人员不安心于

系统维护工作，这也是造成人们重视开发而轻视维护的原因。但系统维护是信息系统可靠

运行的重要技术保障，必须给予足够的重视。

1.系统的硬件维护

硬件系统的维护由专职的硬件人员承担，维护分为以下两种:

(1)定期的预防性维护，如周末或月末进行的例行检查与保养。

(2)突发性的故障维修，由专职人员过厂商进行，这种维护也有时间要求，以免影

响系统的正常工作。

2.系统的软件维护

系统的软件维护主要包括程序的维护，数据文件的维护，代码的维护。本系统采用

Access为数据库，客户端应用程序采用ASPX编写，系统的软件维护自然跟其有着密切的

关系。

WORD版本.

Access系统的运行需要有专门人员负责进行系统的正确性维护，防止因用户或管理

人员的非法操作带来的系统错误；随着学校环境和业务量的增减，系统可能会不适应当

时情况，这时就需要进行系统的完善性维护。除此之外，还要进行系统的预防性维护。

由于在编写本系统时，特别注意了代码的规化，在命名规则，程序书写规上做了很

大的努力，这对将来的代码维护带来了方便。

总之，在系统正式投入运行之后，为了让系统长期高效地工作，必须加强对系统运行

的日常管理。

七、结束语

这次的毕业设计经过老师的耐心细致的指导，及同学之间的相互交流，同时翻阅了大

WORD版本.

量的资料经一段时间的努力，个人的设计制作告一段落。总结这个个人博客的开发制作过

程，我综合使用了目前interest上比较流行的各种静态网页制作及交互式动态的设计手

段，并完成了利用后台数据库与动态网页的生成。同时也学会了对网页的处理风格，色彩

搭配，页面导航有了一定的经验。在交互式网页设计中学会了如何使用Access建立数据

库，以及对数据库浏览，修改，添加，查询。

网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，它兼容了传统平面设

计的特征，又具备其所没有的优势，成为今后信息交流的一个非常有影响的途径。网页设

计是一种综合性的设计，它所涉及的围非常的广泛，包括消费者心理学、视觉设计美学、

人机工程、哲学等诸多方面，当然也离不开一定的科学技术发展。在本文中只从视觉传达

的角度进行了一些阐述与分析。好的网页设计除首先应考虑其容上的精益求精外，其次就

是对容合理有效的视觉编排。美是任何网页所必需具备的基本因素，网页信息不仅是为了

满足使用者的需求，更重要的是创造一种愉悦的视觉环境，技术与艺术的紧密结合在网页

艺术设计中体现得尤为突出。

这次的毕业设计非常感谢老师给了我很多的帮助，从开始设计到设计的完成，没走一

步对于我来说都是新的尝试和挑战，我独立的完成设计的全过程，把设计中散乱的网页成

框架体系，我学到了很多知识和感受，通过学习和探索，查看相关资料和书籍，让我的头

脑中的知识逐渐清晰，使设计逐步完善，每一次的改进都是我受益匪浅，感谢老师的指导，

虽然我的设计还不是很成熟，但是在老师的帮助下知道了自己的不足，也进行了改进，希

望这次经历能让我在以后的学习中激励我继续进步

WORD版本.

八、参考文献

[1]徐国平.网页设计与制作[M].：机械工业.2008年.

[2]珊.个人网页设计与制作[J].电脑学习.2009年，第2期，28-29页。

[3]周琦.关于网页设计与制作技术的探讨[J].电脑知识与技术,2009年,第26期.7376-7378页。

[4]唐永明.浅议网页设计与制作[J].科技信息.2009年,第20期,193页。

[5]明月.网页设计与制作研究[J].职业技术学院学报.2009年，第2期,82-84页。

[6]王君学.网页设计与制作[J].：人民邮电.2009年.

[7]志泊、冬梅、王春玲等，数据库原理及应用教程，第1版，人民邮电，2002年3月

[8]萨师煊、王珊，数据库系统概论，第3版，高等教育，2000年2月

[9]齐治昌、谭庆平、宁洪等，软件工程，第2版，高等教育，2004年4月

[10]邓良松、海岩、陆丽娜，软件工程，电子科技大学，2001年

[11]新浪博客,.