华北水利水电学院校史馆网站建设.doc

华北水利水电学院毕业设计分类号 编 号 华北水利水电学院North China Institute of Water Conservancy and Hydroelectric Power 毕 业 设 计题目 水利院校校史馆网站建设 学 院 管理与经济学院 专 业 信息管理与信息系统 姓 名 刘 晓 磊 学 号 200610305 指导教师 司 保 江 2010年05月30日水利院校校史馆网站建设摘要：校史，即学校之历史沿革，记载了一所学校的创设、变迁、发展，是学校最可宝贵的历史档案，是校园文化的溯源和载体，是学校应倍加珍惜、传承永续的精神财富。由于现实中的种种原因，很多学生不能亲身到校史馆中去了解母校的足迹，聆母校的命运，观摩校史展览。这种情况也造成了很多学生从到学校一直到毕业都没能进到校史馆里面了解自己母校的历史。这是件多可悲的事情。同时，这也就造就了网络版校史馆诞生的条件。在网络充斥到每个人生活的方方面面的今天，如果可以把现有校史馆的内容和展览放到网络中去，那么学子无论身在何方，只要有一台电脑，就可以到校史馆网站上去沉浸在母校的历史之中，也可以尽情宣泄自己思念母校的感情。由于现有的校史馆网站不够成熟，还有很多缺点，所以重新设计校史馆网站势在必行，本文系统的阐述了网页建设前期对网站的设计、中期用Photoshop和Dreamweaver对网站前台网页进行设计，后期用DeDecms进行站点建立以及模板制作的总过程。最终制作出来的网站系统页面比较美观，而且后台管理很方便快捷。关键词：DeDeCMS，Dreamweaver，校史馆，网站设计Website construction of college history museumAbstract: The school history, namely, the historical evolution of a school, which recorded a schools creation, change and development, is the schools most precious historical archives, and the origin 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 cant personally go to the history museum to know the footprint of their alma mater, to listen to the destiny 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 ones alma mater. But at the same time, this in turn creates conditions for the 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 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, including website design in preliminary stage, front page design using Photoshop and Dreamweaver in intermediate stage, site construction andtemplate design using DeDeCMS in later stage. The website system page finally made by this way is more beautiful, and the background management is very convenient and fast.Key words: DeDeCMS, Dreamweaver, history museum,Website DesignIII目 录摘要：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开发环境介绍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的安装与设置175.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 校史馆的意义和现状校史，即学校之历史沿革，记载了一所学校的创设、变迁、发展，是学校最可宝贵的历史档案，是校园文化的溯源和载体，是学校应倍加珍惜、传承永续的精神财富。校史又与校园文化紧紧地联系在一起。首先，校史可以体现校园文化脉络，校史是一个学校在发展过程中逐步形成的，校史记录了校园文化不同阶段的发展脉络。其次，校园文化的维系与传承离不开校史的贡献。大学四年，岁月匆匆，莘莘学子，如何浸润于母校的文化氛围，产生心灵的依归?当每位驻足在校史馆的学子，聆听校史讲解，观摩校史展览时，他们的心就会和母校融为一体。其三，校友借助校史馆这个文化载体，发扬母校的文化。校友深受母校文化的熏陶，尽管毕业后身在各地，但是对母校的怀恋非常情深，怀恋中最易触发的就是母校的文化，校史馆网站的建立无疑提供了一个热爱母校、交流释放情感、宣泄思绪的平台，一方深情地文化花园，它会成为校友们的精神力量源泉之一。通过校史馆网站这个文化载体，校友们释放他们对母校满腔的眷念和深情。其四，校园文化的纷繁多样、蓬勃发展也丰富了校史的内容。各个学校都精心设计和组织开展内容丰富、形式新颖、吸引力强的思想政治、学术科技、文娱体育等校园文化活动，力求在高品位、宽覆盖、新形式上有突破，体现出学校独特的风格和文化内涵。这些多样性的校园文化为校史增添了丰富多彩、更加鲜活的内容。国不可无史，同样，校不可无史。没有历史，我们就无法总结经验，吸取教训；回顾历史，可以让我们明白我们从哪里来，将要到哪里去。树固根源而叶茂，泉固渊源而流长。只有明白校史，了解校史，才能真正的把握学校的精神动脉，学校的优良传统和积淀的文化才能得到传承，乃至发扬光大。然而，由于现实中的种种原因，很多学生不能亲身到校史馆中去了解母校的足迹，聆母校的命运，观摩校史展览。这种情况也造成了很多学生从到学校一直到毕业都没能进到校史馆里面了解自己母校的历史。这是件多可悲的事情。同时，这也就造就了网络版校史馆诞生的条件。在网络充斥到每个人生活的方方面面的今天，如果可以把现有校史馆的内容和展览放到网络中去，那么学子无论身在何方，只要有一台电脑，就可以到校史馆网站上去沉浸在母校的历史之中，也可以尽情宣泄自己思念母校的情感。1.2 课题研究意义1.2.1 当前已有校史馆网站的优点和不足通过对当前已有的几个学校的校史馆网站的调查和研究发现，现有校史馆网站已经基本能够体现出现实中校史馆网站所要向参观者展示的内容和精神，网站定位比较明确，就是要向大家展示几代、几十代校友辛勤耕耘的汗水和智慧，杰出校友的英姿风采，以及学校优秀的办学经验和成果，体现学校优良的办学传统和独特的精神内涵。然而这些网站也有一些共同的缺点，现列出如下：（1）页面没有整体风格可言。网站并不只是为了展示内容而建设的，水利院校校史馆网站应该是一种厚重的文化气息或者是清新的校园文化气息。而现有的校史馆网站页面过于简单，给人一种多看几眼就会乏味的感觉，明显建站的时候过于仓促，缺少了校史馆网站应有的韵味。（2）网页板块杂乱无章。这是现有校史馆网站普遍存在的问题，板块分配杂乱无章，不能给人一种一目了然的感觉，不能让访问者很快的找到自己想看的内容，这是任何网站建设的大忌之处。网站建设最应该重视的就是给访问者以方便。（3）网站内容过于单调死板。既然校史与校园文化密不可分，何尝不能在校史馆的网站上也增加板块记录校园里一些大型活动的信息呢，今天的活动就会成为明天的历史。这也是校史的一大部分，却被大多数的校史馆网站所忽略了。（4）内容更新太少太慢。校史馆网站，并不代表展现的只是历史，不需要更新。如果说校史馆网站不更新的话，又怎么能够吸引大家的眼光呢？校史不一定只要表现很久很久以前的历史，一个月前的重大事情也叫校史。调查的几个现有的校史馆网站几乎没有更新，这也是跟他们对网站的定位和设计有一定关系。1.2.2 水利院校校史馆网站建设的整体方案针对现有校史馆网站所存在的缺陷我们主要进行如下几个方面的完善：（1）对网站进行精心设计。每一个网站都有自己要体现的内容，要代表的单位形象，应该有一套自己独有的风格，校史馆网站也是一样，要代表的是学校的灵魂和精神。网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。所以要建设的校史馆网站总体以草绿色为主色调，体现青青校园的清新气息。（2）为所建网站进行明确的定位。据了解，华北水利水电学院校史馆与2007年12月23日正式对外开放，但是有很多同学都没有机会真正到校史馆中去了解母校的历史，建设校史馆网络版的目的就是要给没有机会到实际校史馆中餐馆的同学很方便的了解母校历史的路径，同时可以在该网站上发表一下自己对母校的感情。该网站也作为一些已经毕业的校友们回忆和交流的平台。（3）精心划分校史馆（网络版）的板块设置。虽然现有校史馆网站已经能展现给访问者想要得到的信息，但是网站最主要的特点应该是能够让来访者一目了然，清楚该网站的总体布局，轻松找到自己想要了解的信息。这也就要求网站栏目板块的设置一定要合理，经过精心规划，所要建设的校史馆网站分为七大块，下面会有详细解释。（4）丰富所建设网站的内容。校史馆网站虽然向大家展示的是学校的历史，主题比较严肃，但是如果只是历史的话缺乏吸引学生们参观访问的潜力，鉴于此原因，校史馆网站还是需要加入一些学生们感兴趣的内容，而这些内容又应该符合校史馆网站的主题。进过调查，许多同学对毕业晚会等校园活动有很大的兴趣，并且表示找不到这些活动相关的资料和照片，所以我决定在所建设的校史馆网站上添加一个校园活动记实的栏目，通过贴一些活动中的照片供同学们进行回忆和欣赏。（5）通过板块设计加快网站的更新速度。由于现在已有的很多学校校史馆网站都只是向大家展示之前的历史，这种形式决定了这些网站很少或者基本上没有更新，所以一些同学浏览过一遍后就不会再回访了，这样大大降低了网站的浏览率和影响力。所以我准备在所建设网站上添加一些需要经常更新的版块，以促进网站的更新速度，从而吸引更多的人点击浏览，并且栓住一些人经常回访。1.3 水利院校校史馆网站的未来走向水利院校校史馆网站的建设是网络快速发展和学校校史馆深入学生心中的必然趋势，由于现实中的校史馆有很少人能真正去参观，校史馆的局限性决定了校史馆网站的影响会越来越明，校史类网站将会收到同学们的欢迎和认可。（1）新兴网站前途光明。由于校史馆类网站是近几年才出现的用于向用户展示学校历史和校园文化的网站，该网站的定位决定了学生们会很欢迎，并且会丰富同学们的校园文化生活，从而达到双赢的效果。（2）网站内容更加贴切同学的实际生活。随着时间的流逝，校园生活不断丰富，网站的内容也在不断的更新，网站内容也会更加丰富。（3）网站管理更新技术更加先进。由于该网站用国内最流行的DeDeCMS解决方案，居于现时最流行的LAMP架构，从而使站长更方便更新网站内容，后台操作更加可视化。（4）网站使同学和学校之间的融合更加紧密。学校的展示，学生的意见及建议，都为该网站进一步优化取得了良好的条件，并且加强了学校与学生之间的交流与沟通，唤起学生和教师的自豪感和荣誉感，从而也加快了校园文化的发展与进步。2 相关技术与知识2.1 Photoshop介绍Photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。网络的普及是促使更多人需要掌握Photoshop的一个重要原因。因为在制作网页时，Photoshop是必不可少的网页图像处理软件。从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 而这里我用Photoshop而不选用现在网络上新兴起的一些傻瓜式图片处理软件，因为Photoshop还是图片处理中的大师，那些傻瓜式图片处理软件虽然简单，但是功能太少，不能够满足网页设计及美化的需要。处理出来的图片也不能满足自己想要的效果。2.2 MySQL数据库简介MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年,SUN又被Oracle收购.对于Mysql的前途,没有任何人抱乐观的态度.目前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、Eiffel、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），是一个集内容发布、编辑、管理检索等于一体的网站管理系统（Web CMS），他拥有国外CMS众多特点之外，还结合中国用户的需要，对内容管理系统概念进行明确分析和定位。作为国内第一个开源的内容管理系统，DedeCMS在创建以来都在摸索中国互联网内容管理系统的道路，并且引领众多开源CMS前进的道路，程序由当年个人作品，现已组建团队，在提升用户服务、提高产品质量的同时，对中国网站内容管理系统进行研究，成为目前市场上最受欢迎的内容管理系统。2.3.2 DedeCMS能为我们做什么前面我们了解过内容管理系统的概念，大家可能还不知道DedeCMS作为国内首家开源内容管理系统能够为我们做些什么，下面我们通过以下5个方面来进一步了解DedeCMS。自由管理网站的内容结构：独创灵活的站点管理机制，独创的内容模型机制，强大的自定义插件管理机制、所见即所得的编辑器、自定义专题等内容管理模式，处处体现自由的功能帮助您更容易的管理维护您的网站；自由的设计网站的风格与表现：灵活的模版设计与管理体系，能结合个性内容框架的模版机制，让您能不断扩展您个性独创的网站风格表现，简单的模版制作过程结合强大的模版定义机制，让您不管是简洁还是复杂的网站风格都能很方便、自由的设计出充满个性魅力表现的网页，真正实现只要想到就能做到的要求；自由的获取并搜集整理网站需要的内容信息：把复杂的处理技术用简单的方式表现给您，让您能够轻轻松松的获取所需要的信息来源，并根据需要汇集您网站的精华，形成新的专题内容展示出来，节省管理内容时间，快速获得建立高质量内容门户网站的资源；自由的组织您网站的内容和信息：灵巧好用的站点，结合内容关联分类机制，可以让您轻松组织具有复杂内容关联的网站结构，并可以简单而自由的组织内容数据的归类以表现成不同的风格，结合自由的模版表现让您更可以更随心所欲的组织网站内容，建立内容表现和层次丰富的网站门户；自由的扩展系统功能：自由开放的系统结构及分层系统处理技术构建了高效稳定的系统平台、开放的插件扩展方式、简单的模版扩展定制功能，让您也可以不断的根据需求个性的变化扩展系统功能，还能结合其它的不同应用系统一起工作。自由管理和自由扩展的机制使得您在需要改版升级网站时，只需要设计新的内容项目与风格即可完成；2.4 Dreamweaver开发环境介绍Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。（1）灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。（2）可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。（3）功能更多的CSS支持CSS可视化设计、CSS检查工具（4）动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。（5）Dreamweaver的集成特性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。（6）丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。系统分析是应用系统思想和方法，把复杂的对象分解成简单的组成部分，找出这些部分的基本属性和彼此间的关系。系统分析是系统开发中最重要，也是最困难的阶段。系统分析阶段的基本任务是系统分析员与用户在一起充分了解用户的需求，并把双方的理解用系统说明书表达出来。系统说明书审核通过之后，将成为系统设计的依据，也是将来验收系统的依据。3 网站系统分析系统分析是应用系统思想和方法，把复杂的对象分解成简单的组成部分，找出这些部分的基本属性和彼此间的关系。系统分析是系统开发中最重要，也是最困难的阶段。系统分析阶段的基本任务是系统分析员与用户在一起充分了解用户的需求，并把双方的理解用系统说明书表达出来。系统说明书审核通过之后，将成为系统设计的依据，也是将来验收系统的依据。由于该网站建设所采用的DeDeCMS网站管理系统具有它配套的数据库和运行环境，不需要我们再像以前建设网站那样自己配置运行环境和数据库环境。所以我们不需要考虑数据库方面的问题，大大减轻了网站建设者的工作量。由此，我们做如下分析：3.1 网站需求分析需求分析的目标是深入了解网站的功能和达到的效果，确定网站设计的约束、网站同其他元素的接口细节，定义网站的其他有效性需求。需求分析阶段研究的对象是用户对网站项目的需求。通过对各大高校现有校史馆网站的观察分析发现现在要建设校史馆网站有如下需求： （1）功能需求：校史馆网站能够图文并茂向访问者展示水利院校的历史和校园文化神韵。访问者能够通过校史馆网站清楚地了解到该院校的历程和校园动态。并且网站管理者能够方便快捷的更新网站内容和图片。 （2）用户界面需求：鉴于已有网站的界面比较普通，没有能吸引人的亮点，此次校史馆网站建设需要特别注意网页页面的美化和整体风格。3.2 网站可行性分析网站系统的可行性分析包括建立网站的必要性分析和建立网站的可行性分析两个部分。3.2.1 必要性分析从校史对于一个学校的重要性和对学生以及老师的重大影响出发，考虑到当前接触到校史的困难的情况，并且针对现有校史馆网站的种种缺点，从而得出校史馆网站建设的必要性结论。随着信息化以及互联网技术的高速发展，建立新的校史馆网站势在必行。3.2.2 可行性分析（1）技术可行性分析技术上的可行性分析主要分析技术条件能否顺利完成网站开发工作，硬、软件能否满足开发者的需要等。该网站页面采用了PHP和HTML语言编写代码，数据库服务器选用微软公司的MySQL数据库，它简单易用，作为网站开发初期的数据库已经远远满足需要。因此，系统的软件开发平台已成熟可行。（2）经济可行性分析开发一个网站需要动用大量的人力物力，不单单开发时需要耗费，后期维护升级也需要。DedeCMS这种网站建设流程，让软件用户在不改变网站高效、轻便等特性的情况下还减少了总成本。 所以该网站建设在经济上是可行的。（3）社会可行性分析随着经济和科技的进一步发展，网络已经成为人们生活中不可或缺的一部分，上网浏览信息页成为学生日常生活中的一部分。另外学生们热切希望能有更多的机会接触到母校的校史，所以校史馆网站的建设具有社会可行性。3.3 网站系统功能分析 校史馆网站本身是为高校做宣传、向学生和校外人员展示本校历史和校园文化的平台。该网站的重点在于展示信息，就好像举办校史展览一样。这样的网站性质就决定了该网站对管理员管理功能的要求比较高。在这种需求的条件下，我们为校史馆网站的管理员设置了如下管理功能：图3-1网站系统功能图4 网站系统的设计4.1 网站的栏目设计通过精心规划和设计，校史馆网站分为三个层次：主页，顶级栏目，子栏目。而顶级栏目就是所谓的版块，顶级栏目分为以下八个版块：4.1.1 校史馆网站主页经过分析，决定校史馆网站主页不采用常规的小版块格式，而是采用以整张图片为背景，设置导航栏链接到校史馆网站的每个栏目。这样能够避免来访者看到千篇一律的主页，给人以耳目一新的感觉，也增加了网站整体的美感。4.1.2 校史馆网站简介该版块主要对华北水利水电学院的情况进行简要的介绍，包括学校的简介和校史馆的简介，该版块除了主页排第一个，也是为了让来访者能首先了解到学校和校史馆的基本情况，为下面的浏览校史做一定的铺垫。经过调查，很多学校的校史馆网站中都有简介，但是它们只是介绍了学校情况或者只是介绍了校史馆情况，我们综合它们的优点，在校史馆网站简介栏目中分别对华北水利水电学院和学院校史馆进行介绍。第一，这样使该网站不脱离华北水利水电学院这个大整体。第二，也不会远离该网站的主题校史馆。同时也丰富了校史馆网站的内容，可谓一举多得。4.1.3 学校灵魂准确的来说，校训称之为学校的灵魂。但是这里学校的灵魂不只包括校训，因为我感觉学校几十年发展得到的精华都是学校的灵魂经过长年发展，每个学校都会形成自己独有的教学体系和教学风格，以及办学理念。这些都会表现在一些学校标志上，该版块的设立就是为了向大家展示华北水利水电学院的各种标志，包括校徽、校训、校歌、学风、校风、教风、政风等。以体现华北水利水电学院“育人为本，学以致用”的办学理念。4.1.4 华水历程讲述华北水利水电学院从“北京水利学校”到“河北水利水电学院”再到邯郸更名为“华北水利水电学院”直到现在坐落与郑州的曲折历程。主要以文字加图片的表现方法向访问者展示学校历史。该栏目以校史展览的形式，分为前言、北京时期、岳城时期、邯郸时期、郑州时期、结束语几个版块，在这几个版块中分别介绍华北水利水电学院的几次变迁，以及每次变迁对学校的意义。4.1.5 看图知校史与“华水历程”是配套板块，由于只有文字表现太单调，专门设立该版块，主要以各时期的图片来展现历史重温历史，文字历程与照片历程共同展现，更富吸引力和表现力。4.1.6 华水人物该版块的设立为的是展示一些华水有名校友的光辉成绩和华水名师以及各时期的领导，向外人展现我校的教学成绩以及教学实力，同时激发同学们的自豪感，激励老师们更加努力的提升教学质量。该栏目下又分为华水名师、桃李芬芳、各时期书记、院长三个子栏目，从这三个方面对华北水利水电学院的优秀人物及校友进行介绍和展示。4.1.7 图片记录室该版块主要用图片记录一些与学院相关的大事件，以及一些比较重要的事情，向大家展示我们学院的影响力。栏目下又分为母校荣誉、国际交流与合作、嘱托与期盼、省部共建四个子栏目。4.1.8 校园活动记该版块的设立是经过调查和严格论证的结果。上边说过校史馆如果只是讲述校史，第一会限制网站的更新速度；第二会降低网站的访问率和吸引力。这是一个网站致命的缺点。经过调查发现很多同学比较关注校园活动，但是却没有路径去获得校园活动的一些资料。该版块的子栏目可以在后台实现很简单的添加，根据校园活动的举办更新网站，给同学们更方便了解校园活动的一个平台。基于以上版块的设置和划分，我们得到下面这个网站的结构图：图4-1 网站结构图4.2 网页的界面设计 4.2.1 网页界面的构成要素水利院校校史馆网站建设除了文字和图像以外，还包含幻灯片等新兴元素，更借助由代码语言编程所实现的各种交互式效果，增加网站建设了网页界面的生动性和复杂性，也使得在进行网站设计时需要考虑更多页面元素的排布、优化。一般来说，本网站的网页界面主要由下面几个因素构成：（1）文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是其相关内容的简要说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。（2）图形：图形在网页网站建设界面中具有重要作用。合理的运用图形。可以生动直观、形象地表现设计主题。校史馆网站中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。（3）页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。 （4）色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。（5）技术：网站建设网页的技术要素并非任何情况下在网页中都能直观体现，但是却代表了设计的整体水平，也是衡量设计成功的重要标准。网页界面设计最基本的技术要求包括：浏览器、传输速度、屏幕分辨率、颜色显示。4.2.2 网页的整体造型在制作网页的过程中，最先考虑的因素是网站的布局。一个网页是否做的成功，内容和色彩固然十分重要，如果没有一个好的整体架构来实现它，那么这个网页是不会成功的。用户看到的要么是满篇文字，要么是色彩绚烂，吸引眼球但找不到重点。所以在选择网页所要表达的主题和填写内容，考虑色调之前，一定要预先考虑好网页的整体布局，这样才能牢牢的抓住用户，让用户轻松容易的找到这个网页想要传达的首要信息。网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。最重要的就是让用户第一眼就看到这个网页所想要传达的信息。本网站的特点就是网页的整体架构十分的清晰明了，便于用户浏览。在本网站的建设中中，创建网页的构架主要有以下几点： （1）首先虑整个网页的长和宽，以及长度和宽度之间的比例。通常情况下，为了方便用户的浏览习惯，网页的长度极限被定制为网页满屏显示后不出现横向滚动条。纵向则没有太大的限制，采取的是垂直滚动的形式来显示页面的内容。设计一个边框来分开文字和浏览器的边缘，或者是设置背景颜色来区分。有了边框或者背景色来区分文字和浏览器的边缘，整个网页的内容显得更加紧凑，集中。（2）其次是考虑导航条的设置。导航条是网页中最最重要的部分，从用户的习惯来讲，导航条一般设置在网页的顶端靠近第一排文字的地方或者设置在正文的左边，本网站的导航条设置在网页的顶端，方便用户浏览网页的内容，所以导航条一定要反映整个网站的架构，把最值得推荐的网页链接放置在导航条中。（3）正文的框架设置（横向因素和纵向因素交错）网页做的是否成功通常就会取决于正文的框架结构。华北水利水电学院校史馆网站的建设中，正文采用左边是文章，右边分为子栏目导航、推荐文章、热点文章三个板块，这样避免了整个网页只是一篇文章的单调性，同时给访问者更方便浏览和切换文章的功能。4.2.3 网页的色彩搭配打开一个网站，给用户留下第一印象的既不是网站的丰富内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决与设计者对色彩的运用和搭配。网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。该网站不论导航栏还是一些边框，默认采用草绿色，给人一种清新自然的感觉，同时每个页面右上方都有颜色转换的插件，用户可以根据自己的喜好