学院网站设计

1、学院网站设计摘 要随着Internet在中国的迅速发展,人们在日常生活中越来越离不开通过上网来获得自己所需要的知识。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便，同时WEB页面能快速地得到我们所在地需要的信息。对于学校来说，建立自己的信息网站，让学生通过上网的方式来获得学校的相关信息，以加深对学校的了解，这对学校的宣传来说，是一个必不可少的方式。本课题就学院的网站设计展开研究，对现有的网站所存在的问题进行分析，总结出目前的网站在版面和功能上都存在不足，提出了自己的设计观点，对网站进行了全方位的重新设计。在后台管理系统方

2、面，对功能和程序进行了重新设计与编写，充分考虑到学校的发展对网站要求。前台访问页面作了重新思考，改变了目前传统的设计风格，大胆地运用色彩，排版上充分考虑了人机操作因素。关键词 网页设计，管理系统，数据库，程序设计ABSTRACTWith the rapid development of the Internet in China, more and more people in their daily lives through the Internet are required to obtain their own knowledge. As WEB can text, images, s

3、ound, animation, video and other media information sets into one, and not only shows more vivid information, and that information is more convenient browsing and WEB to the need for rapid access to our location information. For schools, to establish their own web site information to enable students

4、to access the Internet through the school-related information in order to deepen understanding of the schools, this publicity for the school, is an essential way.The topic centered on the study of the web site design of existing websites analyzed the problems, summed up the current site layout and f

5、unction in both shortcomings and proposed its own design perspective, a comprehensive web site redesign. In the background management systems, functions and procedures of the re-designed with the preparation, taking fully into account the development of the school web site. Prospects visit page made

6、 to rethink and change the current traditional design style, boldly using colors, layout, and full consideration has been given to both operational factors. Overall, this is a successful design. Keywords Web design, Management systems, Databases, Programming目 录摘 要ABSTRACT1 绪论1 1.1 课题背景1 1.2 本课题研究的意义

7、1 1.3 网站设计现状概述2 1.3.1网站类型2 1.3.2网站风格3 1.3.3网站建设的常用技术3 1.4 设计的任务和要求简介52网站的设计构思6 2.1需求分析6 2.1.1功能分析6 2.1.2风格分析6 2.2 结构分析7 2.3 设计出发点8 2.4 设计方案8 2.4.1默认风格8 2.4.1蓝色风格9 2.4.1古典风格9 2.5 设计目标103详细设计方案11 3.1 数据库设计11 3.2 管理系统设计 14 3.2.1登陆页的设计14 3.2.2管理首页的设计15 3.2.3资源分类页的设计16 3.2.4资源管理页的设计17 3.2.5图片管理页的设计18 3.2

8、.6其它管理页的设计19 3.2.7程序设计20 3.2.8管理系统设计总结20 3.3 默认风格的设计 20 3.3.1首页的设计20 3.3.2资源列表页的设计22 3.3.3阅读信息页的设计23 3.3.4图片列表页的设计23 3.3.5查看图片页的设计24 3.3.6其它页面的设计24 3.4 蓝色风格的设计25 3.4.1首页的设计25 3.4.2资源列表页的设计26 3.4.3阅读信息页的设计26 3.5 古典风格的设计 26 3.4.1首页的设计26 3.4.2资源列表页的设计27 3.4.3阅读信息页的设计274展示设计28 4.1 流程分析28 4.2 基本元素的确定28 4

9、.3 方案展示28 4.4 数据库与编程28 4.5 管理系统展示28 4.6 效果展示295 设计结果306 结论33参考文献34致 谢351 绪论1.1 课题背景随着Internet在中国的迅速发展，在很短的时间内网络已渗入到社会各个领域，改变着人类生活、学习与工作的方式，有人曾经说过“不知道如何使用网络将成为信息时代的文盲”，因此网络进入校园也是自然而然的事了。最近几年，校园网的建设可以说是“如雨后春笋一样”一个接一个地建立起来，面向全校教职工的校园网站也随之开办。这几年校园网站的发展，即有大中专院校的校园网站，也有中小学校的校园网站，其内容大体经历如下逐渐丰富的过程：校园组织结构介绍及

10、重要事件通知等等；后来随着接入校园网的机器越来越多，特别是学生机房或学生用机也接入校园网，校园网内容在原来的基础上又加入了交流的模块，如BBS、聊天室等；再后来才逐渐地加入了学习内容。根据攀枝花学院现在的校园网站建设来看，整体上说各部门的网站建设得还比较完整，目前存在的问题是学校主页因长期没有改版，版面设计上显得时过近迁，用色方面也显得陈旧，所以提出这个课题，有一定的实际意义。在颜色方面，采用的是比较深沉的颜色，这与正大发展中的攀枝花学院不太相符；在排版方面，目前的版面主要是文字，没有与图片很好地接合起来，显得网站看起来很死板；在整个网站的美工方面，都显得没有活力，颜色等各方面没有很好地运用起

11、来；在网站结构方面，也有很多地方做得不完善，还需要加强。1.2 本课题的研究意义校园网站不仅是在校园内发布信息的通道与环境，也是对外联系和宣传自己的良好途径。它的意义已不仅仅是计算机的普及与学习，而是计算机应用，进而在校园中形成富有特色的信息文化。从对外联系和宣传自己的角度来看，校园网站所面对的不再是“被动”的读者，而是有目的的“主动”访问者。访问者通过浏览网站加深对学校基本情况的了解。也可以通过论坛发表自己的见解和建议。多年来很多学校依靠传统的宣传方式来宣传自己，以扩大自己的影响力。这样不仅浪费大量的人力、物力，也放慢了信息的传播速度，更不便于和读者进行沟通。因此，校园网站的设立无论对于学校

12、还是对于社会都是非常有利的。从教学角度看，教学资料的积累查阅；多媒体课件的共享；通过与外部的Internet 连通获取教学信息；学科成绩管理与分析、网上考试报名；教务管理课程设置，排课安排，教室、实验室安排等；各类活动的安排都可以网页的形式发布于校园网内，也可以以电子邮件的形式进行传递。使教育教学的信息及时流通并有了最佳保存信息的方式，同时因为有了网络，上述信息便可以使老师共享，这些信息在应用者的电脑上用统一的浏览器进行访问、查询，简洁方便，容易上手。从电脑进入教室的意义上看，一般是为了教学，再拓展一点的话，可为学校对外宣传自己以及扩大招生、学生分配、用人单位了解学生情况、对外培训招生等等，这

13、对攀枝花学院有重大的现实价值。1.3 网站设计现状概述1.3.1 网站类型根据我国目前的网站性质的不同，将网站分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型等。其中企业性网站比例最大，占整个网站总体的70.9%，其次为商业网站，占8.2%，第三是个人网站，占6.5%，随后依次为教育科研机构网站占5.1%，其它非盈利机构网站占5.0%，政府网站占3.2%，其它类型占1.1%。如下图所示。 图1.1 网站分类比例商业性网站是指主要在网上进行的电子商业等业务的网站，如新浪、搜狐等网站；企业网站是相对于商业网站而言，指业务主要在网下的企业所建立的网站，如联

14、想集团的网站。1.3.2 网站风格根据网站性质的不同，网站的设计风格也有所不同。政府网站主要业务是电子政务，讲就是的办公效率和政务公开，方便人们查看政府的一些决策和动态。在网站设计上一般没有广告和过多的装饰图片，要求页面大方，能体现政府的威严，同时也要满足功能的需要。商业网站一般是通过信息服务来营利，页面上有较多的广告，为了大量信息的显示版面设计上就要求结构紧凑，适当加以图片修饰。教育科研机构网站与政府网站有类似的地方，差别不是太大，只是教育科研机构网站在设计方面更加灵活，可以突出个性化。个人网站就是纯属设计者自己的主观愿望，自由设计和表达自己的想法，没有一个固定的格式，风格化突出，用色和排版

15、都十分灵活。非盈利机构网站的风格它比个人主页有一定的限制，它包括了一定的数据，给用户提供某项服务的功能，所以它的设计介于教育科研机构网站与个人主页之间。1.3.3 网站建设的常用技术(1) HTMLHTML（Hyper Text Mark-up Language）的学名是超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体。(2) JavaScriptJavaScript是插入到HTML静态网页文件中的一段JAVA代码，这个代码是动态的，它可以在静态页面中实现一部分动态的功能，如根据用户的不同

16、输入显示不同的网页内容等。但这样的动态功能一般只是一些简单的功能。(3) VBScriptVBScript 跟JavaScript相同，只不过插入到HTML中的不是JAVA代码，而是VB（Visual Basic）代码。(4) ASP以上我们提到的都是静态页面技术，从这里开始，就要开始介绍一些动态的脚本语言。ASP（Active Server Pages，活动服务器页面），微软公司推出的一种技术，实质是把VB（Visual Basic）语言嵌入到HTML中，通过VB程序来控制网站。ASP因为其程序开发较容易、微软公司对它的支持也不错，所以它早已成为业界主流的动态网页技术之一。(5) PHPPH

17、P，是英文“Hypertext Preprocessor”（超级文本预处理语言）的缩写。它是一种 HTML 内嵌式的语言，与微软的ASP颇有几分相似，现在被很多的网站编程人员广泛的运用。本课题就采用PHP作为动态编程语言。(6) CGICGI（Common Gate Intergace，通用网关接口），它是一段程序，运行在服务器上，提供同客户端HTML页面的接口，通俗的讲CGI就像是一座桥，把网页和WEB服务器中的执行程序连接起来，实现态网页功能。(7) JAVAJava是Sun公司推出的一种编程语言，是一种跨平台的程序设计语言。Java非常适合于企业网络和Internet环境，现在已成为In

18、ternet中最受欢迎、最有影响的编程语言之一。Java有许多值得称道的优点，如简单、面向对象、分布式、解释性、可靠、安全、结构中立性、可移植性、高性能、多线程、动态性等。Jave可以运行与任何微处理器，用Java开发的程序可以在网络上传输，并运行于任何客户机上。(8) JSPJSP(Java Server Pages)是由Sun公司倡导、许多公司参与一起建立的一种动态网页技术标准。在传统的网页HTML文件(*.htm,*.html)中加入Java程序片段(Scriptlet)和JSP标记(tag)，就构成了JSP网页(*.jsp)。即将JAVA程序嵌入到HTML语言中就是JSP。JSP是将J

19、AVA技术运用于HTML的一种语言。(9) ASP.NET由于ASP程序和网页的HTML混合在一起，这就使得程序看上去相当的杂乱。在现在的网站设计过程中，通常是由程序开发人员做后台的程序开发，前面有专业的美工设计页面，这样，在相互配合的过程中就会产生各种各样的问题。同时，ASP页面是有脚本语言解释执行的，使得其速度受到影响。受到脚本语言自身条件的限制，我们在编写ASP程序的时候不得不调用COM组件来完成一些功能。由于以上种种限制，微软推出了ASP.NET。ASP.NET为我们提供了一个全新而强大的服务器控件结构。从外观上看，ASP.NET和ASP是相近的，但是从本质上是完全不同的。ASP.NE

20、T几乎全是基于组件和模块化，每一个页，对象，和HTML元素都是一个运行的组件对象。在开发语言上，ASP.NET抛弃了VBSCRIPT和JSCRIPT，而使用.NET Framework所支持的VB.NET，C#.NET等语言作为其开发语言，这些语言生成的网页在后台被转换成了“类”并编译成了一个DLL。由于ASP.NET是编译执行的，所以它比ASP拥有了更高的效率。(10) 数据库数据库是按一定的结构和规则组织起来的相关数据的集合。是综合各用户数据形成的数据集合，是存放数据的仓库，它的根本作用是存贮数据和共享这些数据。数据库的作用就是用户利用浏览器作为输入接口，浏览器将这些数据传送给网站，而网站

21、程序再对这些数据进行处理，例如，将数据存入数据库，或者对数据库进行查询操作等，最后网站将操作结果传回给浏览器，通过浏览器将结果告知用户。目前在虚拟主机上常用的数据库有三种，分别是微软公司的ACCESS数据库、MS SQL 2000数据库、自由代码的MySQL数据库和大型数据库Oracle。本课题采用MySQL作为PHP的数据库。1.4 设计的任务和要求简介对当前攀枝花学院的网站设计所需要的相关信息进行调研，在深入进行调研的基础上，运用网站设计制作的相关技术和手段完成攀枝花学院的网站设计。在设计的定位上要有一定的开拓性与创新性，不但要满足网站的各项功能，而且要从网站的结构、色彩、文字图片、人机关

22、系等方面来完成整个设计。2 网站的设计构思2.1 需求分析2.1.1 功能分析一般高校的网站主要特点是发布学校的相关新闻信息，对外宣传学校，以提高学校的影响力，并同时推动招生就业工作。从总体上分析，整个网站包括两个部分，即前台访问页面和后台管理系统。它们之间的关系是通过后台管理系统来添加、修改、审核或删除信息，以达到对网站内容管理的目的。而前台访问平台则是对外显示信息，用户通过网站域名访问主页，查看网站的详细内容，功能上要求能发布大量的信息，包括图片文字的混排，有可以显示所有数据的信息库，方便用户查询自己所需要的信息。由于学校有多个部门，信息的来源各有不同，各部门都要参与网站的管理，所以在管理

23、系统的设计上，必须考虑严格的管理权限，比如：某领导有对某信息栏目下的信息有审核的权限，该领导下属用户则只有发布信息的权限等。在主页的设计过程中通过人机界面分析，为了让用户访问主页时更加得心应手，可以运用一些特殊效果，满足用户的人机需要。2.1.2 风格分析在网站风格设计方面，由于受到教育网的网络速度限制，所以不宜设计太多的图片和动画，主要从以下方面来考虑：(1) 色彩系列（简称色系）：网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易

24、读性。(2) 页面排版：网站的排版是让网页浏览者阅读方便，且内容主题明确的重要指针，若网站的排版经过精心规划，将会使浏览者更能迅速的找到所需的资料。网站的排版包含了表格、框架的应用、文字缩排、段落等等，而排版并不是整齐就好，还要有明确的分类，以及主题的适当规划。(3) 网站特效：网站的特效，能够使网站看起来更为生动活泼，以常见的几种技术来说，包含了Flash 、Java script 、 Java applets、 DHTML等等。适当得宜的使用这些网页小技巧，如同蜻蜓点水般的不着痕迹带过，往往能让这写小特效发挥最大的效果，使网页更美观且设计出独特的风格。比如：可以适当设计下拉菜单的特效，不但

25、美观，还可以方便用户访问内容；让公告信息滚动起来，不但能使页面具有活力，还会更加引人注意。所以适当使用网页特效，恰当配合网站风格，这样就能使网站的整体效果得到提升。2.2 结构分析由于本设计是一个实际应用的课题，所以要根据学校的相关部门的需要来设置网站的内容结构。结合对网站内容的调查结果，总结出如下结构图：图2.1 攀枝花学院网站前台的结构由于目前学校相关部门提供的网站内容分类，只是暂时的，随着学校的发展和学校的需要，会增加新的内容或者更改现有内容，所以在系统的设计方面，还必须考虑对以后的发展问题，不能爱到目前信息的局限。在网站布局方面，也要为以后的扩展作好准备。在后台管理平台的设计上，就显得

26、格外重要，必须满足对前台所有信息的管理功能。总体上可以将网站的管理平台分为如下三类：图2.2 后台管理系统的结构当然一个完整的网站管理平台，还远远不止如此，还包括一些辅助功能，比如管理员账号管理、登陆日志、插件管理等。2.3 设计出发点攀枝花学院网站是面向全国甚至全球的教育机构网站，网站的形象也从一定方面体表了学校的形象，这是不可否认的。网站的作用就是对外发布信息，让别人了解学校，在别人心里形成一个具体的形象，并且能够从一定深度上体现学校的办学条件、师资力量和学校文化。由于攀枝花学院的办学历史不是很久远，可以说是一所新兴的现代高校，所以没有很多能直接运用于网站的文化标志或建筑。那么我的设计出发

27、点可以定义为现代化风格的网站设计思路，当然也可以人为地将它古典化。同时这是一套实际应用方案，设计过程中不必运用过于夸张的设计表现手法，在色彩运用上一定要根据实际情况配置，不益过于鲜艳或低沉，反而还要体现学校蓬勃发展的势头。2.4 设计方案在方案的设计上，也是从两个方面来进行，即前台风格方案和后台管理风格方案。前台风格考虑了三套方案，默认风格、蓝色风格和古典风格。2.4.1 默认风格这套方案是基于学校现有的配色，对它进行重新思考，开拓性地设计出最适用，也最利于用户访问网站结构方案。在这个方案上将花大量的时间对它进行优化，最后学校也将运用这套方案。首页的总体设计如下图：图2.3 默认风格(1)页面

28、配色：该设计采用深红色（#92191C）为整个网页的背景，搭配了黑色（#000000）、浅灰色（#E7E6E6）和红色（#B21E23）作衬托，从整个页面来看，比较和谐完整。(2)字体运用：网站的标志采用学校标准的VI系统，为手写体。页面普通字体为网页常用的12像素和14像素的宋体，在阅读信息页面还运用了二号黑体字作为标题。(3)页面排版：在页面的左上角运用了学校的VI系统中的标志，顶部中央用于显示日期，这是一般网站的传统制作风格，给用户一种完整的感觉，右上角设计了网站信息搜索功能。中间部分分成了两行两列，黑色部分用于显示学校的校训，右边是网站的导航栏，一些重要的链接就设置在上面；第二行左边为

29、学校的快速通道，主要放置各院系的网站和其它部门网站的链接，方便用户明确地找到想要的信息，右边则是最新一些新闻动态等信息。底部是版权信息和联系方式等信息。2.4.2 蓝色风格这套风格是采用蓝色为主基调的一套方案在版面安排上没有太大的变化，同样包括了默认风格的内容，在配色方面作了很大改变。在本方案中运用了Flash特效技术，把校训做成了动画，让页面更有生命力。采用蓝色为主色调，看起来清新自然，同时作为学校类网站，用蓝色比较稳重。首页的总体设计如下图：图2.4 蓝色风格(1)页面配色：该设计采用灰色（#CCCCCC）为整个网页的背景，运用蓝色为顶部和底部的主要色彩，导航栏采用浅灰色（#F1F1F1）

30、为背景，重要链接处的背景采用浅蓝色（#E3EEF8）为背景。(2)字体运用：网站的标志采用学校标准的VI系统，为手写体。页面普通字体为网页常用的12像素和14像素的宋体，在阅读信息页面还运用了二号黑体字作为标题。(3)页面排版：本方案在排版方面与默认风格的不同之是，将链接通道栏排在了右边，在顶部运用一个Flash动画，将学校的标志和校训有机地结合起来，动静结合，让网站更富有生机。2.4.3 古典风格古典风格自然是运用了一些古典元素，让网站呈现出来的是给人一种古色古香的感觉。作为学校类网站，如果设计为古典型，自然也能明白，具有书香门第的含义。(1)页面配色：该设计采用80%黑色（#4D4F3A）

31、为整个网页的背景，运用一张古老的残纸作为网页的页面，它的颜色具有渐变效果，大体色标为（#E8E0BA）。总体配色都有采用古典色，包括将要显示的文字（#C2A083）。图2.5 古典风格(2)字体运用：网站的标志采用学校标准的VI系统，为手写体。页面普通字体为网页常用的12像素和14像素的宋体，在阅读信息页面还运用了二号黑体字作为标题。(3)页面排版：为了体现古典风格，运用了非常典型的挂画边框对内容进行修饰，使细部内容与整体页面形成一个相互衬托的效果，让古典风格更加突出。导航栏处也运用了较古典的边框进行修饰，右上角用一幅水墨画来点缀攀枝花学院的VI标志，使书香气息更加浓厚。2.5 设计目标结合实

32、际，根据上述结构分析和设计方案的构思，在现有网站的基础上，做到具有创造性的创新设计，改变现有网站落后的状况，在满足所有功能的基础上，要有更多的创新设计，并且结合人机界面分析，合理分布网站内容，从各方面都给用户以完整、人性化的感觉，充分体现人机界面分析在网页设计中的重要性。在网站功能的设计上，不能受到目前信息限制，要把目光投向未来，要达到在未来几年内设计依然能满足学校的需要的目标。3 详细设计方案3.1 数据库设计在众多数据库中，与PHP编程语言搭配最好的则是MySQL数据库了，因为PHP和MySQL都是开源类程序，而且是跨平台的服务器软件，它们的结合是非常恰当的，在Linux操作系统下运行速度

33、非常快。网站所涉及到的数据表如下：图3.1 网站数据库上图显示的是网站数据库中的所有的表和它的作用，下面将详细介绍几个网站所必须的几个重要的数据表的字段和数据类型等属性。首先看AdminUser表的结构：图3.2 AdminUser表结构该表的作用是贮存管理用户的详细账号，包括：登陆名、密码、姓名、所属部门、管理组、管理范围、用户信息、添时间、上次登陆时间、现登陆时间与登陆次数。下面分析一下Announcement表的结构：图3.3 Announcement表结构该表的作用是存放学校的公告信息，包括：标题、内容、出处、发布者、是否通过审核和发布日期，它的数据类型如第二列所示。文章信息库是网站较

34、为核心的部分，它们数据字段相对来说要复杂一些：图3.4 Article表结构文章信息库将贮存网站的绝大部分数据，在网站运行中起到了不可缺少的作用，它包括：所属分类、标题、内容、简介、缩略图、出处、发布者、是否通过审核、点击次数与发布时间。所属分类是一个独立的表，主要作用是用来对文章信息进行分类，比如可以把信息分为“新闻动态”、“教育科研”等类别。而此表则只是获取分类信息的编号，在具体显示信息分类时利用这个编号就可以直接获得它所属分类名称。信息的审核是相当重要的，如果你只能发布信息，有可能存在问题，要经过拥有审核权限的管理员审核之后，才能显示在网站上。同时也提高了安全意识。各字段的作用都是不可缺

35、少的，都有它独自的功能，在网站运行时，就可以显示出它的功能来。图片信息也是网站的一个不可缺少的部分，它的可以让网站图文并茂，并且发布一些风景图对学校的宣传有很大好处。它的结构如下：图3.5 PicNews表结构图片信息库主要是为网站提供学校的相关图片，比如：“校园风光”、“学生风采”等内容，如果学校网站没有图片信息这块将是不完整的，用户在访问学校网站时，总希望能看到更真实、更实际的信息，即图片信息。它包括：所属分类、图片标题、图片存放的地址、图片宽度、图片介绍、是否通过审核、发布者、发布时间。随着学校的发展各部门已经有了自己独立的网站，所以学校主页上没有必要再重复相关内容，只需要建立一个链接，

36、直接访问部门的主页，所以链接信息也是网站不可缺少的部分：图3.6 UrlList表结构一般链接所需要的字段不是太多，但此表在结构设计上比较灵活，显得有点复杂，它包括了：所属分类、链接标题、是否为图片链接、图片地址、链接地址、链接说明、是否通过审核与添加时间。当为“图片链接”时“图片地址”是必填内容。在程序制作上要进行相应的验证。为了增加网站互动，让学生与学校领导直接进行沟通，所以设置了“校长信箱”这个板块，同样需要数据库的支持：图3.7 Guestbook表结构“校长信箱”通常一点的说法即留言本，它所要满足的功能是用户留言，留下自己的联系方式，网站相关人员进行回复。本“校长信箱”包括的字段有：

37、留言标题、留言内容、回复内容、用户名、用户所在IP地址、用户电子邮箱、是否公开显示、留言时间与回复时间。其它数据表在网站中也有它自己的任务。PicClass表是对PicNews进行分类的专用表，作用就是把图片信息分成若干类，而UrlClass表则是对UrlList进行分类的表。Department表是贮存学校部门的表，主要用于信息发布后出显示信息来自哪个部门，从一定程度上也反映了学校的组织结构。NavTitle表是用来贮存设置网站导航菜单的专用表，可以进行栏目排序等操作。UserLoginIP表的作用是记录登陆日志，这是学校为了网站的安全设置的一项必须的功能，随时监视管理员登陆日志。3.2管理

38、系统的设计后台管理系统是一套完整的软件，主要作用是对数据库进行操作，并将数据按照一定格式进行格式化存入数据库。同时它可以对网站内的文件等进行查看或操作。最核心的部分是能实现信息内容的动态更新，分配用户管理权限，并分用户对网站内容和板块进行管理，让学校相关部门发挥他们的职能，充分参与到网站管理中来。由于管理系统是是功能性的页面，所以在版面上没有太多点缀性的设计，越精简速度和性能就越好。3.2.1 登陆页的设计管理员要想进入管理系统进行操作，则必须通过后台登陆页面，使用自己已经拥有的用户名和密码进行用户登陆验证，当验证成功后就可以顺利转到管理页面。它的登陆界面如下图：图3.8 登陆页面窗口在版面设

39、计上采用蓝色为主色调，用攀枝花学院第一教学楼的图片作背景，字体运用合理，结构清晰自然，并显得大方得体。这里需要说明的是为什么要使用验证码？在以前还没有人意识到验证码的作用，使用的人也不多，一些人（黑客）为了得到管理员账号，就制造出黑客工具来不停地测试账号，为了防止这种现就产生了验证码。验证码是随机产生的，如果不登陆到这个页面来并填写验证码，是无法提交登陆的，如果验证码输入不正确，就会被直接反弹回来，不予验证用户和密码。这样使网站更加安全。3.2.2 管理首页的设计管理员通过了用户登陆验证后进入的第一个页面，这里没有太多的内容，主要是显示一些常规信息，包括自己的账号管理组等。图3.9 管理首页根

40、据人的一般操作习惯，首页出现的机率最高，所以可以在管理首页设置一些常用按钮，进行一些简单操作。“改密”即更改密码，单击它就会出现修改密码的“层”窗口。如下图：图3.10 管理首页这个具有我独创设计的层窗口，可以在网页上自由移动、关闭或最小化，打破了一般网站的弹出新页面的限制。3.2.3 资源分类页的设计资源分类页的设计包括：添加资源分类、修改资源分类和删除资源分类三个部分，在页面设计上所设计的填写内容如下图所示。图3.11 添加资源分类页图3.12 管理资源分类页根据人机操作界面分析，在填写内容的旁边注明相关的操作说明，对不太清楚操作需知的管理用户有一定的帮助。同时人们在上网注册时总会看一下旁

41、边的相关说明，这里也传承了这样的版面设计风格，也是功能设计的需要。3.2.4 资源管理页的设计资源管理页面是管理网站内容的重点部分，它包括添加资源信息、修改信息、删除信息与审核信息等，在权限分配上也具有严格的考验。添加资源页面与修改资源页面外观都一样，只是实现的功能不一样，包括了标题、内容、摘要、缩略图、出处与发布者等内容。如下图：图3.13 添加资源页资源管理页面可以按信息的不同分类来显示资源，进行完整的列表分页处理，只要拥有管理权限的用户打开管理面板，就可以进行操作。图3.14 资源管理页创新地将操作面板独立出来，当鼠标移动到信息标题上时就会提示“展开操作面板”，按下鼠标，就会出现操作项目

42、。这里的独创设计，是通过人机操作界面分析，使操作变得更加精简，并且能让人们轻易地明白它的操作规则，而不需要阅读说明书。3.2.5 图片管理页的设计图片管理页面的设计也包括了添加图片、修改图片、删除图片与审核图片的功能。添加图片页面如下图：图3.15 添加图片页根据人机操作界面分析，为了让用户更好地添加图片，在填写图片地址时，只需要点击“浏览”就会弹出图片浏览器窗口，用鼠标指向某一图片文件，鼠标右下角就会显示缩略图，让用户可以很清楚地找到要添加的图片，如果没有需要的图片，在窗口的底部就要以直接上传至网站上，操作非常简单方便。图片管理页面的功能主要是已经添加的图片进行管理。由于管理的是图片，则预览

43、图片是一个很重要的环节，所以设计了当鼠标指向图片标题时就，在右下角就会显示图片的缩略图，很方便地查看图片。点击图片标题就可以展开操作面板，对其进行审核、删除等操作。如果还要查看更大的图片和详细的说明，则可以点击操作面板上的“预览图片”，就可以打开图片和说明窗口，再点击“预览图片”就可以关闭预览窗口。从整个人机操作界面分析来看，充分利用了人的操作习惯。如下图：图3.16 图片管理页3.2.6 其它管理页的设计以上详细分析了几个功能比较强大的页面，也是网站管理系统的重要部分，而其它页面也不是不重要，由于受到篇幅的限制，只能作小小的概述。图3.17 管理菜单管理页面突出的是功能与性能，所以在版面设计

44、上都比较简洁，上图显示的是管理系统的全部管理内容，它们都具有独立的页面进行操作。其中链接管理、用户管理与系统设置包含了强大的管理功能，如“添加新管理员”涉及到设置权限的问题，其操作详细地运用了人们习惯性的菜单收缩效果。其详细的界面设计与图3.2.3(1)和图3.2.3(2)相类似，在此不用赘述了。3.2.7 程序设计本系统采用PHP编程语言进行程序制作，编程过程中运用函数块把功能模块化，书写代码时注意了代码的缩进，并注明了函数作用与参数等，方便以后他人修改与阅读。图3.18 编写代码3.2.8 管理系统设计总结经过一段时间的设计与开发，总体上完成了了后台管理系统的制作，并能上机正常运行，各功能

45、已经完备。从设计指标来说，颜色采用带底纹的蓝色标题背景，加上蓝色边框，看起来清新明了；从性能指标来看，采用PHP搭配MySQL的平台，运行速度非常优良；从安全指标来看，采用登陆验证、强制字符替换与登陆日志记录的手段，将安全加上了一道保险锁。3.3 默认风格的设计3.3.1 首页的设计网站首页的风格统领了整个网站的风格，只要将首页的框架设计好了，其它页面的设计在此基础上就可以顺利地展开起来。(1) 色彩运用：这套方案整体上采用了红色作为基本色调，背景色与导航栏的红色形成独特的映衬效果，这种运用同一类颜色来达到相互映衬的方式，突破了传统设计的界限。再采用非常经典的灰色作为左边链接信息的背景，使它与

46、右边的白色形成一道反差，划开了界限，这样使右边的内容可以更加自由地安排。采用黑色作为整个页面的点缀色，它与灰色和红色的搭配相当默契。图3.19 默认风格首页(2) 功能特效与人机：左边链接菜单采用可以扩展的下拉样式，即通常情况下链接信息条数只能显示设定的少数几个链接，在点击“more”一次时，在最后一条信息的下方可以接着显示所有该类别下的链接信息，点击两次即可关闭。如下图所示：图3.20 链接菜单特效在网站的导航栏处设置了下拉菜单的特效，如果在某一栏目下设置了二级栏目，当鼠标移动到该链接上时就会显示下拉菜单，直接选择二级栏目即可。这种设计不但使页面更富有生机，同时也方便了访问者，管理员也可以灵

47、活利用二级菜单，简化网站结构。其产生的效果如下图：图3.21 下拉菜单特效采用滚动的公告栏，并制作向上间歇式滚动的特效，停留时间为四秒，充分考虑了用户查看信息所需要的时间，如果时间设置得太长就体现不出滚动的效果，太短用户又来不急点击。(3) 字体运用：在网页设计中，人们常用的字体就是漂亮的12像素与14像素宋体字。本页运用12像素的宋体使整个页面显得紧凑、有规范，再适当加入了14像素的宋体，以区分其它性质的内容，使页面显得富有层次感与规范性。(4) 内容与排版：内容是根据学校的需要进行设置的，主要有新闻动态、图片新闻、电子公告与教育科研。由于内容较少，所以将网站的右边分成了三行和两列，按照图3

48、.3.1(1)进行排版，中间加入了校园风光和学校风采两项图片栏目，以点缀整个页面。在网站的底部，设置了图片链接，可以根据学校的需要，加入相关的图片链接信息。页面最底部是不可缺少的版权信息与联系方式，这是一般网站的固定格式。整套方案的页面宽度为970像素。3.3.2 信息列表页的设计图3.22 信息列表页面信息列表页面是网站所有资源集中的地方，到达本页可以点击首页的“more”按钮，也可以在导航栏处找到需要的信息栏目进入。当数据量大的时候，本页就可以根据管理员的设置进行分页显示，如果每页显示20条信息，超过20条信息就会自动分页，点击“下一页”就可以查看其余的信息。页面左边设计了“最新信息”和“

49、图片信息”两个小栏目，方便用户快速查看感兴趣的信息。3.3.3 阅读信息页的设计图3.23 阅读信息页面阅读信息页面是非常重要的页面，因为每条信息都要通过这个页面进行显示。它的工作原理是将你点击的信息从数据库中取出来，通过一定的格式输出在面面上。在页面的设计上出发点是要美观大方，标题运用了二号黑体字，显得大方得体，第二行显示了信息的一些基本属性，可以查看发布日期与出处等信息。如果没对信息内容的字体进行设置，默认显示为14像素的宋体。右下角还显示了阅读次数，记录标准为点击查看一次就记录增加一次。最下边提供了“下一条信息”和“上一条信息”，用户可以很方便地取得相关信息。左边设置了“图片信息”与“热

50、点信息”，也是为用户提供一些快速的链接通道，快速得到信息。3.3.4 图片列表页的设计图片列表页面的作用是将所有添加的图片信息进行一个列表显示，让用户选择自己需要的图片信息。它同样具有自动分页的功能，并且可以设置横排的显示个数。以是图文结合的方式显示列表，用户如果看不懂图片还可以结合文字，清楚地了解每一张图片的具体信息。图3.24 图片列表页面3.3.5 查看图片页的设计图片列表与查看图片是一个有机的结合体，当点击图片列表中的缩略图就可以打开查看图片页面。该页面是用来显示图片的详细信息，可以更清楚地查看图片的细节，图片的大小是根据后台输入的大小来进行判断显示图片的默认大小，单击图片可以打开图片

51、的原始大小。图片的下面同样提供了“下一张图片”与“上一张图片”的快速通道。图3.25 查看图片页面3.3.6 其它页面的设计传承网站首页的配色方案与设计风格，其它页面没有较大的改动，只是为了功能的需要，进行局部改动。其它页面包括：校长信箱、我要留言、搜索结果页面等，详细的设计请见具体的网站内容。3.4 蓝色风格的设计3.4.1 首页的设计(1) 色彩运用：本设计方案采用蓝色为基本色调，运用非常经典的灰色，作为标题或导航栏的背景，搭配浅蓝色为链接通道的衬托色，底部再以蓝色收尾，从颜色的映衬上分析能够体现整个版面的清新自然和美观大方。图3.26 蓝色风格首页(2) 功能特效与人机：这套方案移植了默认风格的所有功能，区别在于在不同的基本色调下面下拉菜单等的背景与边框配色有所不同。把链接通道放置于右边，让新闻动态等内容靠近左边，体现了以信息为重点的特点，但这只是从设计的角度思考，按照常规分析，用户访问本网站不一定是为了新闻，而是要了解各院系的教学情况，在这种情况下就不尽合理。如果反过来，链接放在右边不等于不重要，同样在比较显眼的位置。(3) 内容与排版：在内容方面没有作调整，只是把位置调整到了左边。为了与整体色调和设计版面相协调，栏目的标题与边框都作了较