华北水利水电学院校史馆网站建设设计说明

1、 . 分类号 编 号华北水利水电学院North China Institute of Water Conservancy and Hydroelectric Power毕 业 设 计题目 水利院校校史馆建设 学 院 管理与经济学院 专业 信息管理与信息系统 姓 名 晓 磊 学 号 200610305 指导教师 司 保 江 2010年05月30日水利院校校史馆建设摘要：校史，即学校之历史沿革，记载了一所学校的创设、变迁、发展，是学校最可宝贵的历史档案，是校园文化的溯源和载体，是学校应倍加珍惜、传承永续的精神财富。由于现实中的种种原因，很多学生不能亲身到校史馆中去了解母校的足迹，聆母校的命运，观摩

2、校史展览。这种情况也造成了很多学生从到学校一直到毕业都没能进到校史馆里面了解自己母校的历史。这是件多可悲的事情。同时，这也就造就了网络版校史馆诞生的条件。在网络充斥到每个人生活的方方面面的今天，如果可以把现有校史馆的容和展览放到网络中去，那么学子无论身在何方，只要有一台电脑，就可以到校史馆上去沉浸在母校的历史之中，也可以尽情宣泄自己思念母校的感情。由于现有的校史馆不够成熟，还有很多缺点，所以重新设计校史馆势在必行，本文系统的阐述了网页建设前期对的设计、中期用Photoshop和Dreamweaver对前台网页进行设计，后期用DeDecms进行站点建立以与模板制作的总过程。最终制作出来的系统页面

3、比较美观，而且后台管理很方便快捷。关键词：DeDeCMS，Dreamweaver，校史馆，设计Website construction of college history museumAbstract:The school history, namely, the historical evolution of a school, which recorded a school's creation, change and development, is the school's most precious historical archives, and the origi

4、n and carrier of the campus culture. It is a spiritual wealth that should be doubly cherished and passed down to many more generations to come. Due to various reasons in reality, many students can't personally go to the history museum to know the footprint of their alma mater, to listen to the d

5、estiny of the alma mater, to observe the school history exhibition. Its a pity that a lot of students even can not enter into the history museum from entering a school until the graduation to understand the history of one's alma mater. But at the same time, this in turn creates conditions for th

6、e emergence of a web version of history museum. Now internet flooded into every aspect of peoples daily lives. If we the existing contents and exhibitions of the history museum can be put onto the network, students can go to the history museum website to be immersed in the history of alma mater and

7、to express ones affection to ones alma mater to ones hearts content Because the existing history museum website is not mature enough and there are many short comings, so it is imperative to redesign history museum website. This thesis expounds the whole procedures of the construction of a website, i

8、ncluding website design in preliminary stage, front page design using Photoshop and Dreamweaver in intermediate stage, site construction and template design using DeDeCMS in later stage. The website system page finally made by this way is more beautiful, and the background management is very co

9、nvenient and fast.Key words:DeDeCMS, Dreamweaver, history museum,Website Design47 / 53目 录摘要：IAbstract:II1 绪论11.1 校史馆的意义和现状11.2 课题研究意义21.2.1 当前已有校史馆的优点和不足21.2.2 水利院校校史馆建设的整体方案21.3 水利院校校史馆的未来走向32 相关技术与知识52.1 Photoshop介绍52.2 MySQL数据库简介52.3 DeDeCMS简介62.3.1 什么是DedeCMS62.3.2 DedeCMS能为我们做什么62.4 Dreamweaver

10、开发环境介绍73 系统分析93.1 需求分析93.2 可行性分析93.2.1 必要性分析93.2.2 可行性分析103.3 系统功能分析104 系统的设计114.1 的栏目设计114.1.1 校史馆主页114.1.2 校史馆简介114.1.3 学校灵魂114.1.4 华水历程124.1.5 看图知校史124.1.6 华水人物124.1.7 图片记录室124.1.8 校园活动记124.2 网页的界面设计134.2.1 网页界面的构成要素134.2.2 网页的整体造型144.2.3 网页的色彩搭配155 的具体实现165.1 运行环境165.2 建立站点175.2.1 DeDeCMS的安装与设置1

11、75.2.2 Dreamweaver中站点建设185.3 前台的实现195.3.1 导航栏容195.3.2 首页205.3.3 顶端Banner制作225.4 后台的实现235.4.1 管理后台介绍235.4.2 文章列表模板设计实现255.4.3 文章页板块设计实现265.4.4 Head模板设计与实现285.4.5 Footer模板设计与实现306 的测试与维护326.1 的测试326.1.1 测试方法与过程326.1.2 测试结果报告336.2 的维护337 结束语34参考文献35致36附录37附录1：英文原文37附录2：中文译文431 绪论1.1 校史馆的意义和现状校史，即学校之历史沿

12、革，记载了一所学校的创设、变迁、发展，是学校最可宝贵的历史档案，是校园文化的溯源和载体，是学校应倍加珍惜、传承永续的精神财富。校史又与校园文化紧紧地联系在一起。首先，校史可以体现校园文化脉络，校史是一个学校在发展过程中逐步形成的，校史记录了校园文化不同阶段的发展脉络。其次，校园文化的维系与传承离不开校史的贡献。大学四年，岁月匆匆，莘莘学子，如何浸润于母校的文化氛围，产生心灵的依归?当每位驻足在校史馆的学子，聆听校史讲解，观摩校史展览时，他们的心就会和母校融为一体。其三，校友借助校史馆这个文化载体，发扬母校的文化。校友深受母校文化的熏，尽管毕业后身在各地，但是对母校的怀恋非常情深，怀恋中最易触发

13、的就是母校的文化，校史馆的建立无疑提供了一个热爱母校、交流释放情感、宣泄思绪的平台，一方深情地文化花园，它会成为校友们的精神力量源泉之一。通过校史馆这个文化载体，校友们释放他们对母校满腔的眷念和深情。其四，校园文化的纷繁多样、蓬勃发展也丰富了校史的容。各个学校都精心设计和组织开展容丰富、形式新颖、吸引力强的思想政治、学术科技、文娱体育等校园文化活动，力求在高品位、宽覆盖、新形式上有突破，体现出学校独特的风格和文化涵。这些多样性的校园文化为校史增添了丰富多彩、更加鲜活的容。国不可无史，同样，校不可无史。没有历史，我们就无法总结经验，吸取教训；回顾历史，可以让我们明白我们从哪里来，将要到哪里去。树

14、固根源而叶茂，泉固渊源而流长。只有明白校史，了解校史，才能真正的把握学校的精神动脉，学校的优良传统和积淀的文化才能得到传承，乃至发扬光大。然而，由于现实中的种种原因，很多学生不能亲身到校史馆中去了解母校的足迹，聆母校的命运，观摩校史展览。这种情况也造成了很多学生从到学校一直到毕业都没能进到校史馆里面了解自己母校的历史。这是件多可悲的事情。同时，这也就造就了网络版校史馆诞生的条件。在网络充斥到每个人生活的方方面面的今天，如果可以把现有校史馆的容和展览放到网络中去，那么学子无论身在何方，只要有一台电脑，就可以到校史馆上去沉浸在母校的历史之中，也可以尽情宣泄自己思念母校的情感。1.2 课题研究意义1

15、.2.1当前已有校史馆的优点和不足通过对当前已有的几个学校的校史馆的调查和研究发现，现有校史馆已经基本能够体现出现实中校史馆所要向参观者展示的容和精神，定位比较明确，就是要向大家展示几代、几十代校友辛勤耕耘的汗水和智慧，杰出校友的英姿风采，以与学校优秀的办学经验和成果，体现学校优良的办学传统和独特的精神涵。然而这些也有一些共同的缺点，现列出如下：（1）页面没有整体风格可言。并不只是为了展示容而建设的，水利院校校史馆应该是一种厚重的文化气息或者是清新的校园文化气息。而现有的校史馆页面过于简单，给人一种多看几眼就会乏味的感觉，明显建站的时候过于仓促，缺少了校史馆应有的韵味。（2）网页板块杂乱无章。

16、这是现有校史馆普遍存在的问题，板块分配杂乱无章，不能给人一种一目了然的感觉，不能让访问者很快的找到自己想看的容，这是任何建设的大忌之处。建设最应该重视的就是给访问者以方便。（3）容过于单调死板。既然校史与校园文化密不可分，何尝不能在校史馆的上也增加板块记录校园里一些大型活动的信息呢，今天的活动就会成为明天的历史。这也是校史的一大部分，却被大多数的校史馆所忽略了。（4）容更新太少太慢。校史馆，并不代表展现的只是历史，不需要更新。如果说校史馆不更新的话，又怎么能够吸引大家的眼光呢？校史不一定只要表现很久很久以前的历史，一个月前的重大事情也叫校史。调查的几个现有的校史馆几乎没有更新，这也是跟他们对的

17、定位和设计有一定关系。1.2.2水利院校校史馆建设的整体方案针对现有校史馆所存在的缺陷我们主要进行如下几个方面的完善：（1）对进行精心设计。每一个都有自己要体现的容，要代表的单位形象，应该有一套自己独有的风格，校史馆也是一样，要代表的是学校的灵魂和精神。网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。所以要建设的校史馆总体以草绿色为主色调，体现青青校园的清新气息。（2）为所建进行明确的定位。据了解，华北水利水电学院校史馆与2007年12月23日正式对外开放，但是有很多同学都没有机会真正到校史馆中去了解母校的历史，建设校史馆

18、网络版的目的就是要给没有机会到实际校史馆中餐馆的同学很方便的了解母校历史的路径，同时可以在该上发表一下自己对母校的感情。该也作为一些已经毕业的校友们回忆和交流的平台。（3）精心划分校史馆（网络版）的板块设置。虽然现有校史馆已经能展现给访问者想要得到的信息，但是最主要的特点应该是能够让来访者一目了然，清楚该的总体布局，轻松找到自己想要了解的信息。这也就要求栏目板块的设置一定要合理，经过精心规划，所要建设的校史馆分为七大块，下面会有详细解释。（4）丰富所建设的容。校史馆虽然向大家展示的是学校的历史，主题比较严肃，但是如果只是历史的话缺乏吸引学生们参观访问的潜力，鉴于此原因，校史馆还是需要加入一些学

19、生们感兴趣的容，而这些容又应该符合校史馆的主题。进过调查，许多同学对毕业晚会等校园活动有很大的兴趣，并且表示找不到这些活动相关的资料和照片，所以我决定在所建设的校史馆上添加一个校园活动记实的栏目，通过贴一些活动中的照片供同学们进行回忆和欣赏。（5）通过板块设计加快的更新速度。由于现在已有的很多学校校史馆都只是向大家展示之前的历史，这种形式决定了这些很少或者基本上没有更新，所以一些同学浏览过一遍后就不会再回访了，这样大大降低了的浏览率和影响力。所以我准备在所建设上添加一些需要经常更新的版块，以促进的更新速度，从而吸引更多的人点击浏览，并且栓住一些人经常回访。1.3 水利院校校史馆的未来走向水利院

20、校校史馆的建设是网络快速发展和学校校史馆深入学生心中的必然趋势，由于现实中的校史馆有很少人能真正去参观，校史馆的局限性决定了校史馆的影响会越来越明，校史类将会收到同学们的欢迎和认可。（1）新兴前途光明。由于校史馆类是近几年才出现的用于向用户展示学校历史和校园文化的，该的定位决定了学生们会很欢迎，并且会丰富同学们的校园文化生活，从而达到双赢的效果。（2）容更加贴切同学的实际生活。随着时间的流逝，校园生活不断丰富，的容也在不断的更新，容也会更加丰富。（3）管理更新技术更加先进。由于该用国最流行的DeDeCMS解决方案，居于现时最流行的LAMP架构，从而使站长更方便更新容，后台操作更加可视化。（4）

21、使同学和学校之间的融合更加紧密。学校的展示，学生的意见与建议，都为该进一步优化取得了良好的条件，并且加强了学校与学生之间的交流与沟通，唤起学生和教师的自豪感和荣誉感，从而也加快了校园文化的发展与进步。2 相关技术与知识2.1 Photoshop介绍Photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以与运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。网络的普与是促使更多人需要掌握Photoshop的一个重要原因。因为在制作网

22、页时，Photoshop是必不可少的网页图像处理软件。从功能上看，Photoshop可分为图像编辑、图像合成、校色调色与特效制作部分。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是Photoshop中

23、深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 而这里我用Photoshop而不选用现在网络上新兴起的一些傻瓜式图片处理软件，因为Photoshop还是图片处理中的大师，那些傻瓜式图片处理软件虽然简单，但是功能太少，不能够满足网页设计与美化的需要。处理出来的图片也不能满足自己想要的效果。2.2 MySQL数据库简介MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年,SUN又被Oracle收购.对于Mysql的前途,

24、没有任何人抱乐观的态度.目前MySQL被广泛地应用在Internet上的中小型中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型为了降低总体拥有成本而选择了MySQL作为数据库。Mysql数据库具有以下特性：（1）使用C和C+编写，并使用了多种编译器进行测试，保证源代码的可移植性 （2）支持AIX、FreeBSD、HP-UX、Linux、Mac OS、Novell Netware、OpenBSD、OS/2 Wrap、Solaris、Windows等多种操作系统 （3）为多种编程语言提供了API。这些编程语言包括C、C+、Python、Java、Perl、PHP、Eif

25、fel、Ruby和Tcl等。 （4）支持多线程，充分利用CPU资源 （5）优化的SQL查询算法，有效地提高查询速度 （6）既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB 2312、BIG5，日文的Shift_JIS等都可以用作数据表名和数据列名 （7）提供TCP/IP、ODBC和JDBC等多种数据库连接途径 （8）提供用于管理、检查、优化数据库操作的管理工具 （9）可以处理拥有上千万条记录的大型数据库2.3 DeDeCMS简介2.3.1 什么是DedeCMS织梦容管理系统（DedeCMS），是一个集容发布、编

26、辑、管理检索等于一体的管理系统（Web CMS），他拥有国外CMS众多特点之外，还结合中国用户的需要，对容管理系统概念进行明确分析和定位。作为国第一个开源的容管理系统，DedeCMS在创建以来都在摸索中国互联网容管理系统的道路，并且引领众多开源CMS前进的道路，程序由当年个人作品，现已组建团队，在提升用户服务、提高产品质量的同时，对中国容管理系统进行研究，成为目前市场上最受欢迎的容管理系统。2.3.2 DedeCMS能为我们做什么前面我们了解过容管理系统的概念，大家可能还不知道DedeCMS作为国首家开源容管理系统能够为我们做些什么，下面我们通过以下5个方面来进一步了解DedeCMS。自由管理

27、的容结构：独创灵活的站点管理机制，独创的容模型机制，强大的自定义插件管理机制、所见即所得的编辑器、自定义专题等容管理模式，处处体现自由的功能帮助您更容易的管理维护您的；自由的设计的风格与表现：灵活的模版设计与管理体系，能结合个性容框架的模版机制，让您能不断扩展您个性独创的风格表现，简单的模版制作过程结合强大的模版定义机制，让您不管是简洁还是复杂的风格都能很方便、自由的设计出充满个性魅力表现的网页，真正实现只要想到就能做到的要求；自由的获取并搜集整理需要的容信息：把复杂的处理技术用简单的方式表现给您，让您能够轻轻松松的获取所需要的信息来源，并根据需要汇集您的精华，形成新的专题容展示出来，节省管理

28、容时间，快速获得建立高质量容门户的资源；自由的组织您的容和信息：灵巧好用的站点，结合容关联分类机制，可以让您轻松组织具有复杂容关联的结构，并可以简单而自由的组织容数据的归类以表现成不同的风格，结合自由的模版表现让您更可以更随心所欲的组织容，建立容表现和层次丰富的门户；自由的扩展系统功能：自由开放的系统结构与分层系统处理技术构建了高效稳定的系统平台、开放的插件扩展方式、简单的模版扩展定制功能，让您也可以不断的根据需求个性的变化扩展系统功能，还能结合其它的不同应用系统一起工作。自由管理和自由扩展的机制使得您在需要改版升级时，只需要设计新的容项目与风格即可完成；2.4 Dreamweaver开发环境

29、介绍Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前设计、开发、制作的首选工具。（1）灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。（2）可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减

30、少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理变得更容易。（3）功能更多的CSS支持CSS可视化设计、CSS检查工具（4）动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。（5）Dreamweaver的集成特

31、性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。（6）丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以与其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。系统分析是应用系统思想和方法，把复杂的对象分解成简单的组成部分，找出这些部分

32、的基本属性和彼此间的关系。系统分析是系统开发中最重要，也是最困难的阶段。系统分析阶段的基本任务是系统分析员与用户在一起充分了解用户的需求，并把双方的理解用系统说明书表达出来。系统说明书审核通过之后，将成为系统设计的依据，也是将来验收系统的依据。3 系统分析系统分析是应用系统思想和方法，把复杂的对象分解成简单的组成部分，找出这些部分的基本属性和彼此间的关系。系统分析是系统开发中最重要，也是最困难的阶段。系统分析阶段的基本任务是系统分析员与用户在一起充分了解用户的需求，并把双方的理解用系统说明书表达出来。系统说明书审核通过之后，将成为系统设计的依据，也是将来验收系统的依据。由于该建设所采用的DeD

33、eCMS管理系统具有它配套的数据库和运行环境，不需要我们再像以前建设那样自己配置运行环境和数据库环境。所以我们不需要考虑数据库方面的问题，大大减轻了建设者的工作量。由此，我们做如下分析：3.1 需求分析需求分析的目标是深入了解的功能和达到的效果，确定设计的约束、同其他元素的接口细节，定义的其他有效性需求。需求分析阶段研究的对象是用户对项目的需求。通过对各大高校现有校史馆的观察分析发现现在要建设校史馆有如下需求： （1）功能需求：校史馆能够图文并茂向访问者展示水利院校的历史和校园文化神韵。访问者能够通过校史馆清楚地了解到该院校的历程和校园动态。并且管理者能够方便快捷的更新容和图片。 （2）用户界

34、面需求：鉴于已有的界面比较普通，没有能吸引人的亮点，此次校史馆建设需要特别注意网页页面的美化和整体风格。3.2 可行性分析系统的可行性分析包括建立的必要性分析和建立的可行性分析两个部分。3.2.1 必要性分析从校史对于一个学校的重要性和对学生以与老师的重大影响出发，考虑到当前接触到校史的困难的情况，并且针对现有校史馆的种种缺点，从而得出校史馆建设的必要性结论。随着信息化以与互联网技术的高速发展，建立新的校史馆势在必行。3.2.2 可行性分析（1）技术可行性分析技术上的可行性分析主要分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。该页面采用了PHP和HTML语言编写代码，数据库

35、服务器选用微软公司的MySQL数据库，它简单易用，作为开发初期的数据库已经远远满足需要。因此，系统的软件开发平台已成熟可行。（2）经济可行性分析开发一个需要动用大量的人力物力，不单单开发时需要耗费，后期维护升级也需要。DedeCMS这种建设流程，让软件用户在不改变高效、轻便等特性的情况下还减少了总成本。 所以该建设在经济上是可行的。（3）社会可行性分析随着经济和科技的进一步发展，网络已经成为人们生活中不可或缺的一部分，上网浏览信息页成为学生日常生活中的一部分。另外学生们热切希望能有更多的机会接触到母校的校史，所以校史馆的建设具有社会可行性。3.3 系统功能分析校史馆本身是为高校做宣传、向学生和

36、校外人员展示本校历史和校园文化的平台。该的重点在于展示信息，就好像举办校史展览一样。这样的性质就决定了该对管理员管理功能的要求比较高。在这种需求的条件下，我们为校史馆的管理员设置了如下管理功能：图3-1系统功能图4 系统的设计4.1 的栏目设计通过精心规划和设计，校史馆分为三个层次：主页，顶级栏目，子栏目。而顶级栏目就是所谓的版块，顶级栏目分为以下八个版块：4.1.1 校史馆主页经过分析，决定校史馆主页不采用常规的小版块格式，而是采用以整图片为背景，设置导航栏到校史馆的每个栏目。这样能够避免来访者看到千篇一律的主页，给人以耳目一新的感觉，也增加了整体的美感。4.1.2 校史馆简介该版块主要对华

37、北水利水电学院的情况进行简要的介绍，包括学校的简介和校史馆的简介，该版块除了主页排第一个，也是为了让来访者能首先了解到学校和校史馆的基本情况，为下面的浏览校史做一定的铺垫。经过调查，很多学校的校史馆中都有简介，但是它们只是介绍了学校情况或者只是介绍了校史馆情况，我们综合它们的优点，在校史馆简介栏目中分别对华北水利水电学院和学院校史馆进行介绍。第一，这样使该不脱离华北水利水电学院这个大整体。第二，也不会远离该的主题校史馆。同时也丰富了校史馆的容，可谓一举多得。4.1.3 学校灵魂准确的来说，校训称之为学校的灵魂。但是这里学校的灵魂不只包括校训，因为我感觉学校几十年发展得到的精华都是学校的灵魂经过

38、长年发展，每个学校都会形成自己独有的教学体系和教学风格，以与办学理念。这些都会表现在一些学校标志上，该版块的设立就是为了向大家展示华北水利水电学院的各种标志，包括校徽、校训、校歌、学风、校风、教风、政风等。以体现华北水利水电学院“育人为本，学以致用”的办学理念。4.1.4 华水历程讲述华北水利水电学院从“水利学校”到“水利水电学院”再到更名为“华北水利水电学院”直到现在坐落与的曲折历程。主要以文字加图片的表现方法向访问者展示学校历史。该栏目以校史展览的形式，分为前言、时期、岳城时期、时期、时期、结束语几个版块，在这几个版块中分别介绍华北水利水电学院的几次变迁，以与每次变迁对学校的意义。4.1.

39、5 看图知校史与“华水历程”是配套板块，由于只有文字表现太单调，专门设立该版块，主要以各时期的图片来展现历史重温历史，文字历程与照片历程共同展现，更富吸引力和表现力。4.1.6 华水人物该版块的设立为的是展示一些华水有名校友的光辉成绩和华水名师以与各时期的领导，向外人展现我校的教学成绩以与教学实力，同时激发同学们的自豪感，激励老师们更加努力的提升教学质量。该栏目下又分为华水名师、桃芬芳、各时期书记、院长三个子栏目，从这三个方面对华北水利水电学院的优秀人物与校友进行介绍和展示。4.1.7 图片记录室该版块主要用图片记录一些与学院相关的大事件，以与一些比较重要的事情，向大家展示我们学院的影响力。栏

40、目下又分为母校荣誉、国际交流与合作、嘱托与期盼、省部共建四个子栏目。4.1.8 校园活动记该版块的设立是经过调查和严格论证的结果。上边说过校史馆如果只是讲述校史，第一会限制的更新速度；第二会降低的访问率和吸引力。这是一个致命的缺点。经过调查发现很多同学比较关注校园活动，但是却没有路径去获得校园活动的一些资料。该版块的子栏目可以在后台实现很简单的添加，根据校园活动的举办更新，给同学们更方便了解校园活动的一个平台。基于以上版块的设置和划分，我们得到下面这个的结构图：图4-1 结构图4.2 网页的界面设计4.2.1 网页界面的构成要素水利院校校史馆建设除了文字和图像以外，还包含幻灯片等新兴元素，更借

41、助由代码语言编程所实现的各种交互式效果，增加建设了网页界面的生动性和复杂性，也使得在进行设计时需要考虑更多页面元素的排布、优化。一般来说，本的网页界面主要由下面几个因素构成：（1）文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字、几种主要形式。标题和传统媒体息传达的基本作用一样，是其相关容的简要说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。（2）图形：图形在网页建设界面中具有重要作用。合理的运用图形。可以生动直观、形象地表现设计主题。校史馆中常用的图形格式包括jpg和gif，这两种格式

42、压缩比高，得到了规浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、图标四种。（3）页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。 （4）色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。（5）技术：建设网页的技术要素并非任何情况下在网页中都能直观体现，但是却代表了设计的整体水平，也是衡量设计成功的重要标准。网页界面设计最基本的技术要求包括：浏览器、传输速度、屏幕分辨率、颜色显示。4.2.2 网页的整体造型在制作网页的过程中，最先考

43、虑的因素是的布局。一个网页是否做的成功，容和色彩固然十分重要，如果没有一个好的整体架构来实现它，那么这个网页是不会成功的。用户看到的要么是满篇文字，要么是色彩绚烂，吸引眼球但找不到重点。所以在选择网页所要表达的主题和填写容，考虑色调之前，一定要预先考虑好网页的整体布局，这样才能牢牢的抓住用户，让用户轻松容易的找到这个网页想要传达的首要信息。网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。最重要的就是让用户第一眼就看到这个网页所想要传达的信息。本的特点就是网页的整体架构十分的清晰明了，便于用户浏览。在本的建设中中，创建网页的构架主要有以下几点： （1）首先虑整个网页的长和宽，以与长度和

44、宽度之间的比例。通常情况下，为了方便用户的浏览习惯，网页的长度极限被定制为网页满屏显示后不出现横向滚动条。纵向则没有太大的限制，采取的是垂直滚动的形式来显示页面的容。设计一个边框来分开文字和浏览器的边缘，或者是设置背景颜色来区分。有了边框或者背景色来区分文字和浏览器的边缘，整个网页的容显得更加紧凑，集中。（2）其次是考虑导航条的设置。导航条是网页中最最重要的部分，从用户的习惯来讲，导航条一般设置在网页的顶端靠近第一排文字的地方或者设置在正文的左边，本的导航条设置在网页的顶端，方便用户浏览网页的容，所以导航条一定要反映整个的架构，把最值得推荐的网页放置在导航条中。（3）正文的框架设置 

45、（横向因素和纵向因素交错）网页做的是否成功通常就会取决于正文的框架结构。华北水利水电学院校史馆的建设中，正文采用左边是文章，右边分为子栏目导航、推荐文章、热点文章三个板块，这样避免了整个网页只是一篇文章的单调性，同时给访问者更方便浏览和切换文章的功能。4.2.3 网页的色彩搭配打开一个，给用户留下第一印象的既不是的丰富容，也不是合理的版面布局，而是的色彩。色彩对人的视觉效果非常明显，一个设计成功与否，在某种程度上取决与设计者对色彩的运用和搭配。的色系是浏览者整体的视觉观感，若一个色系能有一致性，不仅会使看起来美观，更能让浏览者对容不易混淆，增加了浏览的简洁与方便。而的色系更能衬托出的主题，若色

46、系能与主题合理搭配，将会增加浏览者的易读性。的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个容，与主题。该不论导航栏还是一些边框，默认采用草绿色，给人一种清新自然的感觉，同时每个页面右上方都有颜色转换的插件，用户可以根据自己的喜好选择整个的颜色。5 的具体实现5.1 运行环境建立该共用到三种软件，其中PhotoShop和DreamWeaver没有专用的运行环境：（1）PhotoShop运行环境为Windows 2000/2003/XP/Vista；（2）DreamWeaver的运行环境为Win9x/NT/2000/XP/2003；下面主要介

47、绍DeDeCMS的运行环境：（3）DeDeCMS运行环境与安装。在安装DeDeCMS之前，我们需要有一个服务器环境来支持，在本地安装服务器环境最简单的方法就是使用Apache+MySQL+PHP的一键式服务器套件，国外这样的服务器环境套件非常多，例如APMServer、XAMPP、WAMP、PHPNow等等，这里我们以织梦自主制作的DeDeAMP套件来架设DeDeCMS所需要的服务器环境。首先从织梦官方上下载DedeAMPZForDebug.zip压缩包：解压后得到一个自解压包：双击得到以下界面：图5-1 环境安装界面选择要安装到的目录下，点击安装按钮。安装完成后到自己安装的目录下找到setu

48、p.exe。双击出现以下界面：图5-2 环境安装界面根据自己的需要选择上边的选项，建议选择PHP5+Mysql5。然后点击安装。直到结束，这样DeDeCMS的运行环境就安装完成了。我们完成了环境的准备之后，我们就可以按照下面DeDeCMS的安装步骤安装DeDeCMS主程序了。5.2 建立站点5.2.1 DeDeCMS的安装与设置首先在浏览器地址栏输入安装向导的网址，出现以下页面;图5-3 DeDeCMS安装界面选择“我已经阅读并同意此协议”后点击继续。下一步出现环境检测页面，如果前面的运行环境已经顺利完成，可以直接点击继续。出现下面的参数配置页面：图5-4 参数配置界面只需要在数据库密码栏中填

49、入默认密码123456和管理员密码栏中输入你的密码，其它的就按默认的设定，点击下一步，安装完成。DeDeCMS就安装完成了。这样我们就可以看到我们的站点。5.2.2 Dreamweaver中站点建设启动Macromedia Dreamweaver 8，启动后显示的是起始页。在右边的侧边栏中间，“文件”面板上有一个蓝色的“管理站点”，点一下；出来一个“管理站点”的对话框，里面现在还是空的，点右上角的“新建”按钮，在弹出的复选框中选择“站点”，出来一个面板；（1）这时候就开始进行站点的创建步骤，把中间站点的名字改为“校史馆”，第二行的站点地址不动它，点“下一步”；（2）在第二个页面中，由于在此建设

50、中只是用DW做一个本地网页设计器，所以我们选择选择“否，不使用服务器技术”，然后点“下一步”；（3）这时出来保存位置的对话框，选择“编辑我计算机上的本地副本，完成后再上传到服务器”选项，下边设置为D:DeDeCMS，点“下一步”继续；（4）在“您如何连接到远程服务器”下的下拉菜单中选择“无”，点“下一步”继续；（5）这时候就出来了“总结”页面，显示一下刚才的设置情况，确认无误后点“完成”即可。这样就在DreamWeaver中成功地建立了一个站点。5.3 前台的实现5.3.1 导航栏容导航栏设置八个栏目，包括主页、简介、学校灵魂、华水历程、看图知校史、华水人物、图片记录室、校园活动记。以下进行简

51、要介绍。首页：显示的首页。以一完整的图片做为背景，最下方设置导航栏以连接到每个栏目。简介：连接到简介板块，对华北水利水电学院以与学院校史馆进行介绍。学校灵魂：展示校徽、校歌、校训、校风、学风、教风、政风。华水历程：讲述华北水利水电学院几次变迁的发展历程。看图知校史：展示华北水利水电学院每个阶段的图片。华水人物：向大家展示华北水利水电的知名人物，包括名师，各时期的书记院长与知名校友。图片记录室：主要用图片记录一些与学院相关的大事件，以与一些比较重要的事情，向大家展示我们学院的影响力。栏目下又分为母校荣誉、国际交流与合作、嘱托与期盼、省部共建四个子栏目。校园活动记：记录每一个校园中举办的大型活动。

52、5.3.2 首页首页是一个最核心的部分之一，作用相当于校史馆的大门，可以给人很重要的第一印象。华北水利水电校史馆主页的背景图是用华北水利水电学院花园校区的一俯瞰图，经过Photoshop的特效处理而成，处理过程中分别运用了渐变工具，图片转移叠加，图层样式设置等技术，完成后效果如下图所示：图5-5 校史馆首页效果图首页样式是用Dreamweaver进行设计，将设计成的代码经过修改转移到CMS的模板中，代码如图所示。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "./TR/xh

53、tml1/DTD/xhtml1-transitional.dtd"><html xmlns="./1999/xhtml"><head><meta -equiv="Content-Type" content="text/html; charset=gb2312" /><title>华北水利水电学院校史馆（网络版）</title><style type="text/css"><!-body background-i

54、mage: url(dede:global.cfg_templets_skin/images/shouyebeijing.gif);background-repeat: repeat;-></style></head><body><img src="dede:global.cfg_templets_skin/images/shouye.gif" alt="华北水院校史馆（网络版）" width="1242" height="590" border="0&qu

55、ot; usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="4,503,94,544" href="dede:type typeid='6'field:typelink/dede:type" alt="学校与校史馆简介" /><area shape="rect" coords="101,503

56、,260,543" href="dede:type typeid='7'field:typelink/dede:type" alt="学校灵魂" /><area shape="rect" coords="267,503,434,543" href="dede:type typeid='8'field:typelink/dede:type" alt="华水历程" /><area shape="rect&

57、quot; coords="441,503,652,541" href="dede:type typeid='9'field:typelink/dede:type" alt="看图知校史" /><area shape="rect" coords="659,503,849,541" href="dede:type typeid='10'field:typelink/dede:type" alt="华水人物" /&g

58、t;<area shape="rect" coords="856,503,1052,541" href="dede:type typeid='11'field:typelink/dede:type" alt="图片记录室" /><area shape="rect" coords="1059,503,1238,541" href="dede:type typeid='12'field:typelink/dede:typ

59、e" alt="校园活动记" /></map></body></html>图5-6 首页代码主页中的导航栏连接到每个栏目的技术是用Dreamweaver中的热区配合DeDeCMS中栏目设置实现的，通过热区选中连接部分，通过加入每个栏目在DeDeCMS中的id，实现导航栏成功到每个栏目的主页上。导航栏部分的代码如下：<area shape="rect" coords="101,503,260,543" href="dede:type typeid='7'field:typelink/dede:type" alt="学校灵魂" /><area shape="rect" coords="267,503,434,543" href="dede:type typeid='8'field