基于ASP的高压实验室信息管理研究 毕业论文.doc

《基于ASP的高压实验室信息管理研究 毕业论文.doc》由会员分享，可在线阅读，更多相关《基于ASP的高压实验室信息管理研究 毕业论文.doc（24页珍藏版）》请在三一文库上搜索。

1、华北电力大学本科毕业设计（论文） I 基于基于 ASP 的高压实验室信息管理研究的高压实验室信息管理研究 摘要 计算机网络是社会信息化的基础，网页是计算机网络应用的重要组成部分，本文详 细介绍了高压实验室信息管理建设以及网页制作过程。 首先，讨论了高压实验室信息管理研究重要性，然后分析比较了目前比较成熟的网 页制作技术ASP 技术，以及几种重要的网页制作工具软件和有关站点规划的内容， 接下来搜集高压实验室的有关资料和此类网页制作的有关资料，为后面网页制作打下基 础。综合以上工作后，开始主页的主体构思，布局设计，页面设计，美工设计等，最后， 概要介绍了网页的制作过程。 关键词关键词：高压实验室，

2、信息管理，网页 华北电力大学本科毕业设计（论文） II STUDY ON THE INFORMATION MANAGEMENT OF THE HIGH- VOLTAGE LABORATORY BASED ON ASP Abstract Computer networks are the foundation of social informatization, the website is an important component of the computer network applications, This paper details the high-voltage labora

3、tory information management and website-building process. First, discussed the importance of reseach on the information management of the high- voltage laboratory, and then compare and analysis the current relatively mature technology- ASP website production technologies, as well as several importan

4、t web site planning and related software tools, Next,we collected the relevant information and such web-related research and information. behind lay the foundation for creating web pages. Taking the above work, the homepage of the main idea started, the layout design, web design, design artists, the

5、 final outlined the website production process. Keywords: High-voltage laboratory,Information management,Website 华北电力大学本科毕业设计（论文） III 目录 摘要.I Abstract.II 1. 高压实验室信息管理研究的意义 .1 2. ASP 技术概况与网页制作软件2 2.1 ASP 技术概况2 2.1.1 ASP 方法与传统静态主页的区别.2 2.1.2 ASP 的工作原理和配置.2 2.1.3 ASP 的特点与功能.3 2.2 网页制作软件 .4 2.2.1 DREAMW

6、EAVER.4 2.2.2 FLASH 5 2.2.3 关于矢量图象和点阵图象.6 3. 制作网页 .8 3.1 搜集相关资料 .8 3.2 网页制作 .8 3.2.0 网页规划与布局.8 3.2.1 网页内容组织的一般结构.8 3.2.2 网页内容组织原则.9 3.2.3 规划网页设计风格.10 3.2.4 以首页为例说明页面的整体分析.11 3.2.5 页面的细节分析.11 结论 13 致谢 14 参考文献 15 附录 A 外文翻译 16 华北电力大学本科毕业设计（论文） 1 1. 高压实验室信息管理研究的意义 高压实验室信息管理研究旨在建设高压实验室对外交流的一个重要窗口和内部成员 之间

7、沟通的一个重要渠道，高压实验室主页较全面的介绍了高压实验室的科研，教学， 试验等方面的基本情况。有较大的信息量，是全面了解高压实验室情况的重要途径。 但随着信息技术的快速发展，网页制作技术的不断进步和网页浏览者对网页制作要 求的不断提高，该主页已日益显现出一些不足之处：无法实现交互性，用户无法和站点 间进行信息与数据的交流，不便于及时更新内容。且网页以静态为主，页面设计过于单 调而内容也有待充实。1 综合考虑各种网页制作方法和技术后，我们计划用目前较成熟的国际互联网站点开 发语 ASP 来创作该主页，ASP 是一种运行于 web 服务器端的程序语言。ASP 对 WEB 站点的影响力来自于他创造

8、出高度的交互性能力。这种高度交互性的实质就是所有的变 化都是实时的，用户可以和站点之间随时进行信息和数据的交换。 按照实用性原则、开放性原则、先进性原则和交互性原则，签于软件的易用性和稳 定性我在这次毕业设计中我选用了 Dreamweaver UltraDev 和用 ASP（Active Server Page）来编写脚本语句，并利用了 Photoshop，Flash，Access 等软件辅助制作，并参考 现有有关资料，完成了本网页的制作。 华北电力大学本科毕业设计（论文） 2 2. ASP 技术概况与网页制作软件 2.1 ASP 技术概况 ASP 是 Active Server Pages(

9、动态服务器主页)的缩写，它是一个服务器端的脚本环 境，在站点的 Web 服务器上解释脚本，可产生并执行动态、交互式、高效率的站点服 务器应用程序。ASP 可以胜任基于微软 Web 服务器的各种动态数据发布。2 2.1.1 ASP 方法与传统静态主页的区别 把信息系统纳入 Internet/Intranet 的框架之后，首先要解决的问题是通过网页访问后 台数据库信息。所有应用程序都被分割为页面的形式，用户的交互操作是以提交表单等 方式来实现的，这就要求 Web 站点具有很强的动态数据发布能力。然而，目前 Web 的 服务，仍以提供“静态”主页内容为主。所谓“静态” ，指的就是站点的主页内容是 “

10、固定不变”的，无法根据用户的需求和实际情况作出相应的变化。当浏览器通过 Internet 的 HTTP 协议向站点的 Web 服务器申请主页时，站点服务器就会将已设计好的 静态的 HTML 文件传送给浏览器。若要更新主页的内容，只能用非在线的手动方式更 新 HTML 的文件数据。 ASP 所设计出的是动态主页，可接收用户提交的信息并作出反应，其中的数据可随 实际情况而改变，无须人工对网页文件进行更新即可满足应用需要。例如:当在浏览器 上填好表单并提交 HTTP 请求时，可以要求在站点服务器上执行一个表单所设定的应用 程序，而不只是一个简单的 HTML 文件。该应用程序分析表单的输入数据，根据不

11、同 的数据内容将相应的执行结果(通常是数据库查寻的结果集)以 HTML 的格式传送给浏览 器。数据库的数据可以随时变化，而服务器上执行的应用程序却不必更改，客户端得到 的网页信息会始终保持新鲜的魅力。3 2.1.2 ASP 的工作原理和配置 当用户申请一个*.asp 主页时，Web 服务器响应该 HTTP 请求，调用 ASP 引擎，解 释被申请文件。当遇到任何与 ActiveX Scripting 兼容的脚本(如 VBScript 和 JScript)时， ASP 引擎会调用相应的脚本引擎进行处理。若脚本指令中含有访问数据库的请求，就通 过 ODBC 与后台数据库相连，由数据库访问组件执行访库

12、操作。ASP 脚本是在服务器 端解释执行的，它依据访库的结果集自动生成符合 HTML 语言的主页，去响应用户的 请求。所有相关的发布工作由 Web 服务器负责。4 有必要注意访库的具体运作细节。当遇到访库的脚本命令时，ASP 通过 ActiveX 组 件 ADO(ActiveX Data Objects)与数据库对话(ADO 是建立在微软新的数据库 API，即 OLE DB 之上的，目前的 OLE DB 通过 ODBC 引擎与现存的 ODBC 数据库交互，进一 步的 OLE DB 版本将直接与数据库打交道，不再通过 ODBC 引擎)，并将执行结果动态 生成一个 HTML 页面来返回服务器端，以

13、响应浏览器的请求。在用户端浏览器所见到 的是纯 HTM L 表现的画面，例如用表格来表现的后台数据库表中的字段内容。由于 ASP 结合了脚本语言，可以通过编程访问 Acti veX 组件，并且具有现场自动生成 HTML 的能力，所以它成为建立动态 Web 站点的有效工具。5 在结构关系上，ASP 是通过 ODBC 与数据库打交道。因此，向上层可兼容各类数 据库系统。而对于下层，ASP 产生的 HTML 对客户端的浏览器又有广泛的适应性。但 ASP 对 Web 服务器本身有所挑剔，这看起来似乎是一种缺陷，而实际上也许是一种商 业策略它只支持微软各种操作系统下的 Web 服务器，它们的最低版本是:

14、 Windows NT Server 4.0:MicrosoftS(Internet Information Server)3.0; 华北电力大学本科毕业设计（论文） 3 Windows NT Workstation 4.0:Microsoft Peer Web Services 3.0; Windows 95:Microsoft PWS(Personal Web Server)1.0，中文 Win95 应配中文的 PWS。 ASP 的安装分为 Windows NT 和 Windows 95 两种情况。对于 NT ，IIS 及 ActiveX Server Pages 都包含在 Service

15、 Pack 3 中;对于 Win95，可使用 Visual Studio 服务器构件 下的 ActiveX Server Pages 安装选项。安装成功之后，在程序管理器中会找到一个 ActiveX Server Pages Roadmap 主页，引导你学习和使用 ASP。 2.1.3 ASP 的特点与功能 从软件的技术层面看，ASP 有如下的特点： 1. 无需编译 ASP 脚本集成于 HTML 当中，容易生成，无需编译或链接即可直接解 释执行。 2. 易于生成使用常规文本编辑器(如 WINDOWS 下的记事本)，即可进行*.asp 页面 的设计。若从工作效率来考虑，不妨选用具有可视化编辑能力

16、的 Visual InterDev。 3. 独立于浏览器用户端只要使用可解释常规 HTML 码的浏览器， 即可浏览 ASP 所设计的主页。ASP 脚本是在站点服务器端执行的，用户端的浏览器不需要支持它。因 此，若不通过从服务器下载来观察*.asp 主页，在浏览器端见不到正确的页面内容。 4. 面向对象在 ASP 脚本中可以方便地引用系统组件和 ASP 的内置组件，还能通过 定制 ActiveX Server Component(ActiveX 服务器组件)来扩充功能。 5. 与任何 ActiveX scripting 语言兼容除了可使用 VBScript 和 JScript 语言进行设计 外，

17、还可通过 Plug-in 的方式，使用由第三方所提供的其它 scripting 语言。 6. 源程序码不会外漏 ASP 脚本在服务器上执行，传到用户浏览器的只是 ASP 执行 结果所生成的常规 HTML 码，这样可保证辛辛苦苦编写出来的程序代码不会被他人盗 取。 从应用的层面看，ASP 有如下的功能: 1处理由浏览器传送到站点服务器的表单输入。 2访问和编辑服务器端的数据库表。使用浏览器即可输入、更新和删除站点服 务器的数据库中的数据。 3读写站点服务器的文件，实现访客计数器、座右铭等功能。 4提供广告轮播器、取得浏览器信息、URL 表管理等内置功能。 5由 cookies 读写用户端的硬盘文

18、件，以记录用户的数据。 6可以实现在多个主页间共享信息，以开发复杂的商务站点应用程序。 7使用 VBScript 或 JScript 等简易的脚本语言，结合 HTML 码，快速完成站点 的应用程序。通过站点服务器执行脚本语言，产生或更改在客户端执行的脚本语言。 8扩充功能的能力强，可通过使用 Visual Basic、Java、Visual C + 等多种程 序语言制作 ActiveX Server Component 以满足自己的特殊需要。4 ASP 有如下四个重要特征，具备很强的通用性。 ASP 可以包括服务端脚本，可以利用 VBCcript 和 Jscript 来创建 ASP，创建动态内

19、 容网页。 Asp 提供了一些内置对象。利用这些对象，可以使脚本更加强大，这些对象允许从 浏览器中接受和发送信息。例如，request 对象，可以将用户在 HTMLForm 中的信息接 受到 Script 中来响应它。 Asp 可以用另外的组件来扩展。Asp 本身就是源于相当数量的标准服务端 Active 组 件，这些组件允许做诸如依据浏览器能力进行不同显示以及在浏览器内包含计数器的功 华北电力大学本科毕业设计（论文） 4 能，不过程序员不会局限于标准 ActiveX 组件，你可以创建附加 ActiveX 组件。 ASP 可以和诸如 SQL Server 这样的数据库进行挂接。这是 ASP 一

20、个非常强大的功 能所在，高级的动态更新的站点都需要数据库的支持，而且需要数据库内容的更新而自 动更新 这样用户就可以利用 Asp 自己建立很多类似的高级站 2.2 网页制作软件 “功欲其善，必先利其器”，在做网页之前，选择一款好的制作网页的软件很重要。 虽然直接用记事也能写出网页，用 WORD 也能做出网页，但有许多效果做不出来，且 垃圾代码太多，也是不可取的。我认为比较合适的网页制作软件首推 Dreamweaver，它 简单易学，功能强大，用它做出的网页垃圾代码也比较少，另外，它还可以在我们用所 见即所得的环境制作网页的同时可以在代检视窗中看到对应的 HTML 代码，这对我们 学习 HTML

21、 有很大好处。虽然用 Dreamweaver，即使我们一点不懂 HTML 也能做出漂 亮的网页，但 HTML 毕竟是制作网页的基础，我们要想把网页做活了，必须要知其然 还要知其所以然，最终我们还是要熟练掌握 HTML 才行。当然 Frontpage 也不错，但比 起 Dreamweaver 来还是要稍逊一筹。 当然光有 Dreamweaver 是不够的，做网页少不了要用到图片，用扫描仪扫出来的图 片，少则几百 K，多几 M 甚至几十 M，而网页中用的图片一般要求在 10K 左右，所以 必对图片进行处理，转换成 Jpg 或 gif 的格式。做这些事，用 Dreamweaver 的兄弟 Firew

22、ork 相当方便，在它的文件（File）菜单下的转存向导可以很方便地完成这项工作， 而且可以选择失真度，从而可以使你在图片质量和图片大小之间找一个最佳点，即在保 证图片质量失真不大的前提下，获得最大的压缩比（jpg 和 gif 都是一种压缩格式） 。当 然 Firework 处理图片的能力是很强的，是仅次于 Photoshop 的图象处理软件。 网页上若是缺少了动画，可能总会使人感觉到少了点什么是的，做动画的软件很多， 我感到 Flash 是比较方便实用的，它也是 Dreamweaver 的兄弟，用它可以做出非常漂亮 的动画，且文件还比较小，这是一般动画制作软件所不及的。 好了，有了 Drea

23、mweaver、Firework、Flash 这三个软件，人们称之为网页制作三剑 客，可见其非同凡响。有了它们做网页就不用愁了。6 2.2.1 Dreamweaver Dreamweaver 是 Macromedia 公司的出品的一款“所见即所得“的网页编辑工具。与 Frontpage 不同，Deamweaver 采用的是 Mac 机浮动面版的设计风格，对于初学者来说可 能会感到不适应。但当你习惯了其操作方式后，就会发现 Dreamweaver 的直观性与高效 性是 Frontpage 所无法比拟的。 Dreamweaver 对于 DHTML（动态网页）的支持特别好，可以轻而易举地做出很多 眩

24、目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver 与 Flash、Fireworks 并称为 Macromedia 的网页制作三剑客，由于是同一公司的产品，因 而在功能上有着一个非常紧密的结合。因此，说 Dreamweaver 是高级网页制作的首选并 不为过。 Dreamweaver 在多媒体方面颇有建树的 Macromedia 公司推出的可视化网页制作工 具，它与 Flash、Fireworks 合在一起被称为网页制作三剑客，这三个软件相辅相承，是 制作网页的最佳选择。其中，Dreamweaver 主要用来制作网页文件，制作出来的网页兼 容性比较好，制作效率

25、也很高，Flash 用来制作精美的网页动画，而 Fireworks 用来处理 网页中的图形。 Dreamweave 字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久不 华北电力大学本科毕业设计（论文） 5 衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力，使你成为真正 的网页设计大师。 Macromedia 公司推出的 Dreamweaver UltraDev （以下简称 UltraDev）是在 Dreamweaver 的基础之上能够对动态网页进行编辑的 Web 制作工具。因此，当我们打开 UltraDev 以后，发现它的界面与 Dreamweaver 非常相似。我们

26、可以把 UltraDev 理解为 Dreamweaver 下的一个大型“PlugIn（插件） ”模块。如果你粗通 Dreamweaver 的话，那么 学起 UltraDev 来将会变得非常容易。 作为用来制作动态网页的 Web 开发工具，UltraDev 不仅可以实现 Dreamweaver 静 态网页“所见即所得”的编辑功能，而且还能够支持 ASP、JSP 和 CFML 三种服务器技术， 实现动态网站的设计创建。对于初学者来说，即使他完全不懂各种编辑动态网页的脚本 语言，也可以在 Dreamweaver UltraDev 的可视化开发环境中快速创建动态 Web 站点， 轻松实现网页与数据库的

27、连接，添加服务器操作行为。如果你是一个网页制作高手，那 也不必为它的可视化界面所“迷惑”，你可以在它的全代码（Code View）环境下进行脚 本的编写，而且还可以利用它的活动数据浏览（Live Data View）功能，在工作区中直 接实现对各种动态数据进行测试。7 为了保持与 Dreamweaver4.0 同步，Micromedia 公司在推出了 Dreamweaver UltraDev 1.0 之后没有推出 2.0，3.0，而是直接推出了 4.0。 如果你还在对那些“大虾”级的“动态”站点顶礼膜拜的时候，当你产生了要做自己的 “动态”网站的莫名冲动的时候，当你对那些密密麻麻的脚本语句看得

28、头都快要炸了的时 候，当你不想再听我在这里继续罗索下去的时候，那么让我们一起来使用 Dreamweaver UltraDev 4.0 构建自己的动态站点。它的确非常容易上手相信我，没 错的_ 在开始之前，我们必须澄清一点，并不是说包含了各种动画效果的网页就是动态网 页，而是指那些包含了在服务器上运行的脚本语句的网页才能称为动态网页（Dynamic Page） 。与此相对应的就是静态网页，严格的说，静态网页并不是绝对“静止”的，它有 可能包含了 Flash 动画，也可以包含脚本语句，但是与动态网页相比，它的脚本语句都 不是在服务器上运行的。当一个网页中包含了在服务器上运行的脚本语句之后，它就可

29、以处理服务器上的各种资源（比如数据库） ，换句话说，它能够“命令”服务器按它的要 求对各种数据资源进行处理。在 UltraDev 中，在服务器上运行的脚本语句被称为“服务 器行为（Server Behavior） ”。我们下面所建立的显示查询结果、编辑记录内容、新用户 注册都可以称为动态网页（那些以 asp 结尾的网页就是动态网页） 。4 由于 UltraDev 支持 ASP、JSP 和 CFML 三种服务器技术。所以在使用 UltraDev 之 前我们必须选定一种技术，这里我们就选用 ASP 啦，这样 UltraDev 将使用 ASP 来编写 脚本语句。8 不过只有 UltraDev 还无法

30、创建动态网页，我们还必须建立一个适合动态网页运行的 环境，这就是 Web 服务器环境和数据库运行环境。他们之间的关系为：动态网页必须 通过 Web 服务器中服务器程序来对数据库内容进行操作，而服务器程序只有通过数据 库驱动程序（Driver）才能够处理数据库。 2.2.2 FLASH 2.2.2.1 FLASH 基础知识 FLASH 电影是专为网页服务的画像或动画(当然，也可用于其它用途)。主 要含有 矢量图形，但是也可以包含导入的位图和音效，还可以把浏览者输入 的信息同交互性 联系起来，从而产生交互效果，也可以生成非线性电影动画 。该动画可以同其它的 WEB 程序产生交互作用。网页设计师可以

31、利用 FLASH 来 创建导航控制器、动态 华北电力大学本科毕业设计（论文） 6 LOGOS、含有同步音效的长篇动画、甚至可以产生完整 的、富于敏感性的网页。 FLASH 电影是由压缩的矢量图形组成，所以，FLASH 电影可以很快地下载和 充 满浏览者的屏幕。 2.2.2.2 FLASH 工作流 使用 FLASH 创建动画的过程，就是通过在平台中绘画、输入作品、重新安 排各元 素对象、并使用时间轴使它们“动“起来而生成电影的过程。通过使 用“ACTIONS“令电 影以特殊的方式对事件发生反应，于是产生了交互式效果。 电影制作完成后，可以把它输出成可由 FLASH 播放器播放的文件，也可以 输出

32、成 “STAND ALONE“项目电影，这种格式的电影项目已经内置了 FLASH 播放 器，可自 行播放电影。 可按以下方法播放 FLASH 电影： * 在已配置了 FLASH 播放器的浏览器(如 IE。NN)中播放； * 在微软的“OFFICE“中，或其 ACTIVE X 主机环境中播放，但它们必须配 置了 FLASH ACTIVE X 控制器； * FLASH 播放器中播放； 2.2.2.3 FLASH 动画 所谓 FLASH 动画，就是改变对象的形状、大小、色彩、透明度、旋转或者 其它对 象属性，最易理解的就是对象在舞台上的位移。FLASH 动画分两类，其 一：逐帧动画； 其二：区间动画

33、。逐帧动画要求你为每一个帧创建一个独立 的画像，而区间动画仅要 求你创建动画的开始帧和结束帧，并适当指使 FLASH 自动生成这两个帧之间的所有帧。 也可以使用“SET PROPERTY“行为，在 电影中创建动画。 2.2.2.4 FLASH 交互电影 所谓 FLASH 交互电影，是指电影观众可以使用键盘或鼠标操作来跳转到电 影的其 它部分、移动对象、在表格里填写数据、或者执行其它许许多多的操作。 2.2.2.5 FLASH 播放器的服务器端的设置 如果使用户能够观看 WEB 页上的动画，必须正确配置 WEB 服务器，以便它 能够 识别 FLASH 电影文件，配置服务器就是为服务器建立适当的

34、MIME 类型，以 便把文 件同属于 SHOCKWAVE FLASH 的有.SWF 后辍的文件联系起来。浏览器收到 正确的 MIME 类型后，便载入合适的插件、控制器或者帮助程序来处理或者正 确显示进入的 数据。如果 MIME 类型丢失或者传递不正确，则浏览器会显示出 一个错误通知或者一 个空白的窗口。9 同时，在你发布 FLASH 电影之前，你也必须正确配置 FLASH 电影，这样观 众才 能用 FLASH 播放器观看。 采取以下操作之一来配置服务器： * 如果你的网站是 ISP 提供的，则要同该 ISP 联系，要求 ISP 提供正确的 MIME 类型，以便能把.SWF 格式文件加入到服务器

35、里；5 * 如果你是自己管理服务器，查看一下 WEB 服务器软件的文件，找到正确填加、 配置 MIME 类型的用法说明。 2.2.3 关于矢量图象和点阵图象 计算机显示的图片要么是矢量图象，要么是点阵图象。正确理解这两种 不同格式 图象之间的差异，能帮助你更有效地设计、创建 FLASH 电影。FLASH 允许你创建压缩 的矢量图形，并使它“动“起来。FLASH 还允许你输 入或者模拟由其它程序生成的矢量 或点阵图形。 2.2.3.1 关于矢量图形 矢量图形是用称之为向量的直线或曲线来描绘图像，例如，一个树叶的 图象(下图) 华北电力大学本科毕业设计（论文） 7 是由很多点组成，由直线或曲线通过

36、这些个点，最后形成树叶轮 廓，而树叶的色彩是 由轮廓的色彩或轮廓包围区域的色彩确定的。 对矢量图形的编辑，就是修改构筑该图形的直线和曲线。你可以移动、 缩放、重 塑一个矢量图形，包括更改它的颜色，所有这些操作都不会改变该 矢量图形的品质。 矢量图形具有分辨率独立性，就是说矢量图形可以在不同 分辩率的输出设备上显示， 却不会改变图像的品质。 2.2.3.2 关于点阵图形 点阵图形是以称之为像素的彩色点来描绘图象，例如，下图的树叶，它 是由特定 的位置和每个像素的色值来确定的，如同“玛赛克“一样的方式形成 图象。 当你编辑位 图图象时，修改的是像素，而不是直线或曲线，位图图象是 非分辨率独立性的，

37、这是 因为构成图象的数据被固定在特定大小的栅格里。 编辑位图图象将影响它的外观品质， 尤其是缩放点阵图象时，将使图象的边 缘变得模糊不堪，这是因为栅格内的像素被重 新分布了的缘故。10如果用低于 图象自身清晰度的输出设备来显示该位图，也将降低 位图的外观品质。 华北电力大学本科毕业设计（论文） 8 3. 制作网页 3.1 搜集相关资料 登陆“中国电力信息网”及各地方电力公司网站，及一些大学的高压教研室网站，搜 集有关信息，图片等。 查看了有关网页应用的资料，对现今的网络趋势作了大体的了解，分析十年来校园 网发展的历史。 从图书馆借阅有关网页设计及美工制作，网站规划，建设，管理等的资料。 搜集高

38、压教研室人员组成，科研，教学等方面情况的资料，统计研究生培养，硕士 点，博士点的情况，实验室的设备情况等等。 3.2 网页制作 3.2.0 网页规划与布局 对于网站，总是以内容决定形式的。网站发布的形式是网页，网页信息的种类和多 少会大影响网站的表现能力。所以设计和制作一个网站的网页，首先要定下发布的内容， 然后对其进行组织、规划和布局。 3.2.1 网页内容组织的一般结构 建立网站之后，首先应为所建的网站构建一个信息结构，将一个网站中众多网页 （一个首页和我多个子页）有机地组织起来。一个网站内容的组织首先要让读者认可， 要作到这一点，一方面组织丰富的、可读性强的内容，另一方面在内容组织上也应

39、做到 严谨清晰、层次结构、网状结构及复合结构。 3.2.1.1 顺序结构 这种结构适合一些顺序性较强的内容，只需简单地按照一定的顺浏览。它类似幻灯 片显示，用户在页面之间前进、后退，如电子图书、邮展、网上教材等。在这种结构中， 首页担当标题或引言，其它内容按照顺序排列。如图 3.1 所示。 图 3.1 3.2.1.2 层次结构 这种网页组织结构是网页设计中最常见、也是最基本的一种。其优点是前后顺序清 楚，关系明确，用从首页开始，首页的链接使用户能到达一系列子页，每个页都是内容 页或可能有一下一层的链接页，如图 3.2 所示。这种结构的网页一般层次关系不超过四 层，因为用户得到实际的信息和内容不

40、应该在索引和目录里中跋涉太久。 Page1Page2Page3 Page4 华北电力大学本科毕业设计（论文） 9 Page1 Page2Pag3 Page4Page5Page7Page6 图 3.2 3.2.1.3 网状结构 网状结构是浏览都较为喜欢的一种网页结构。其特点是网页内容之间的链接很灵活， 即只要某一网页中引用了其它网页的内容，则在此处建立超链接连向其它页面，这一点 比较符合人们的联想思维心习惯。但这种将所有相关内容的不同网页连到一起很容易使 读者迷路，因此需在网页中设置“导航”、 “返回上层”或“返回首页”等链接给读者引路。另 一点这种结构的网页添加或删除页时改动量比较大。 3.2

41、.1.4 复合结构 实际上，大多数网页之间的组织在结构上不是具体采用上三种结构中的一种，而是 二种或三种结构的组合，形成复合结构。比如对一个网站的不同主题的页可以采用网状 结构，某一主题的下面若为一冗长的文本，或一系列图象，可以使用线性结构。 在网页设计中，不管采用什么组织结构，目的是让浏览者快速而准确地找到所需的 内容。因此，在许多网页的界面上通常都是提供了自己的搜索引擎，可让浏览者对网站 进行全文检索；在许多网站中还提供站点地图，通过引导浏览者可以直接链接到自己所 需的页面，而不需按采用的组织结构一层一层去找。 3.2.2 网页内容组织原则 将网站中的众多素材合理地分配到由超链接组织起来的

42、不同网页中，为了使自己的 网页能吸引众多浏览者，应遵循以下几条原则： 3.2.2.1 可读性要好 背景不能喧宾夺主，它与正文的对比度要适当，使用户容易辨读正文； 页内容要求精练，尽量避免长篇累牍。在页面中可适当加入一些动画，以引起读者 的注意，或者给网页增加一些生机。 设计简短的 Web 页可以将它当成一次讲演所用的黑点主题幻灯片。将一系列的论 点标题呈现给用户。每一个论点都包含一个链接，它指向更详细的支撑信息。 3.2.2.2 重要的信息放在首页 在网页内容的安排上应该注意先后顺序，他清主次和轻重缓急，将重要的和最新的 内容放在主在的和靠前的页面中。这可通过在页面的靠前位置放一导航栏，或将自

43、己的 主要论点提炼成一、两个单独的句子，将它们入置于页面的顶部等来实现。 3.2.2.3 页面内容独特，具有个性 华北电力大学本科毕业设计（论文） 10 要使所设计的网页内容独特，具有个性，在设计网页时，就要考虑你的网页性质是 什么？核心内容有哪些？主要提供给什么样的浏览者？你的网页如何与众不同？如何能 吸引众多浏览者？在这就要充分利用网页的交互功能，设计一些表单、留言板，征求读 者的意见。 3.2.2.4 内容的完整性 针对每一网页，我们应决定在这一页面中要向读者提供哪些信息，尽量把联系紧密 的内容放在同一页面中，使得每个页面的内容具有完整性。 3.2.2.5 版式编排布局合理 网页设计作为

44、一种视觉语言，当然讲究编排和布局，虽然网页的设计不等同于平面 设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间 组合，表达出和谐与美。版式设计通过视觉要素的理性分析，和严格的形式构成训练， 培养对整体画面的把握能力和审美能力。一个优秀的网页设计者了应该知道哪一段文字 图形该落于何处，才能使整个网页生辉。11 努力做到整体布局合理化、有序化、整体化。优秀之作，善于以巧妙、合理的视觉 方式使一些语言无法表达的思想以阐述，做到丰富多样而又简洁明了。 多页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题是页面之 间和页面内的秩序与内容的关系。为了达到最佳的视觉表

45、现效果，应讲究整体布局的合 理性。特别是关系十分紧密的有上下文关系的页面，一定设计有向前和向后的按钮，便 于浏览者仔细研读。 网页设计简单有序，主次关系分明，将零乱页面的组织过程混杂的内容依整体布局 的需要进行分组归纳，经过具有内在联系的组织排列，反复推敲文字、图形与空间的关 系，使浏览者一个流畅的视觉体验。 3.2.3 规划网页设计风格 要想建立一具优秀的网站，内容是最重要的，但好的内容没有一个好的形式，同样 吸引不了太多的读者。规划网页的设计风格，就应该给访问者一个风格统一、结构一致 的页面显，让感觉到整个网站内容清晰、不杂乱。网页风格的规划需要根据主题和内容 来确定设计标准。如果一个网站

46、的设计与制作是由多人分工合作完成的，则可将整个网 站根据主题内容分成若干网站，每个负责一块，具体设计时应遵照网站设计者规划的统 一页面风格来进行，以确保网页设计达到一致的预期效果，同时也确保在以后的增加、 删除、修改内容时都能保持所有页面的统一设计风格。 规划网页的设计风格，具体问题可灵活调整，但大体上遵循以下几条标准： 3.2.3.1 风格一致 在众多的网页中，根据页面等级，分别制作有代表性的页面。将网页结构、图片位 置、导航条、字体、字形、链接颜色统一设置，然后设计成模板，再将内容添入骨架里， 这样制用出来的网页效率高、风格一致、整体性强。应该包括图标、导航条、标题、正 文等。 3.2.3

47、.2 导航条一致 在页面的顶部放置一个直观的导航条，它将所有的网页分为几大类，可以帮助读者 快速地连接到感兴趣兴的网页，既而方便又防止用户迷路。通过此导航条可以方便进入 其它各个主题的网页。除此之外，在页面的合适位置，还有链接到其它页在或其它网站 的链接点，方便用户的漫游。 3.2.3.3 图标风格一致 巧妙安排页面中的图片可以引起浏览者的注意力的作用。Internet 的多媒体能力在 一定程度上促进因特网的发展，所以利用图片视觉效果将使网页生动活泼。12 华北电力大学本科毕业设计（论文） 11 3.2.4 以首页为例说明页面的整体分析 首先从整体部分进行分析，这里包括框架结构，色彩搭配以及页

48、面布局与内容编排。 3.2.4.1 框架结构 纵观整体页面，可以清楚地看出主页分为上中下三个主要区域，上区是标题区，主 要包括标题和导航，中区内容区，包括主要内容、登陆信息、新闻信息，下区为落款区， 主要版权信息。而且为保持所有统一，我们所有的基本网页框架都一样。 3.2.4.2 色彩色的搭配 色彩搭配可以说是一门艺术，和谐的色彩搭配会给人一种赏心悦目的感觉。同样的 内容用不同的色彩组合会产生意想不到的效果。 与大多数采用单色的主页不同的是本主页背景色为白色，主体色为蓝色的策略。这 种颜色的搭配给人一种蓝天白云的感觉、一种开阔、清新的感觉。还蓝色还代表科学技 术，把蓝色作为教研室主页的基色，也

49、是恰到好处了。13在颜色的运用方面，为不因为 单一的色调而使页面显得单调呆板，这里，巧妙的运了各种深浅不一的蓝色，这样不但 使页面活泼起来，还增强了网面的层次感。 3.2.5 页面的细节分析 人们对一件事物的第一印像往往是来自对它的整体感觉，整体印像的好坏往往决定 了人们对这件事物的兴趣程度。主页也不例外，主页的风格的好坏往往极大的影响人们 对这个网站的访问兴趣。所以整体设计相当重要，但是不止本风格需要靠每一个细节去 实现，即使只有一个粗劣的细节也会导致整个页面的不协调，所以要制作一个优秀的主 页，每一个细节都需要好了设计。下面是我做高压教研室主页所考虑的一些细节问题。 3.2.5.1 文字的处理 从文字的表现方式上分，文字可以用文本和图片两种方式来表现。而考虑到网页的 下载浏览速度和网页的大小。在本主页中除了少数一些文字需要用特效来表现的采用了 图片形，其它的基本都是用了纯文本形式。而普通的文本方式了可以有许多样式，比如 说，加粗、斜体、变色、放大、缩小、变换字体等。在这个主页上，除了极个别的标题 以外基本上都是统一使用大小为 9pt 的标准宋体字条符，这么做使得页面显得非常整齐， 而且几乎所有的文字都采用黑色，使用权色彩艳丽的整体页面在色调上得以缓解。14 3