校园网版面设计.docx
《校园网版面设计.docx》由会员分享，可在线阅读，更多相关《校园网版面设计.docx（18页珍藏版）》请在冰豆网上搜索。
校园网版面设计
重庆信息技术职业学院
毕业设计
题目校园门户网版面设计
选题性质：
设计□报告□其他
院系电子工程学院
专业计算机网络技术
班级
学号
学生姓名
指导教师
教务处制
2012年9月1日
摘要
Internet以惊人的速度对经济活动和社会活动产生日益广泛的影响，同时加剧了招生信息服务业的生存环境，加快了整个市场的结构变革。
为了在市场竞争中生存和发展，招生信息服务业的学校必须实现信息化。
招生信息门户网站成为招生信息业信息化的重要组成不分，建立了学校与学生的交流平台，招生信息门户网站的建立意义在于树立学校的形象，建立新型的招生信息业交流传播交易的媒介，为学生提供更完善的服务，加强了学校与学生之间的信息联系，改善内部管理，提高浏览的效率。
本文研究的是校园网站的设计，具有用户使用更简单、界面更直观等有点。
校园网站在我国刚起步，发展很快。
随着互联网的普及和校园网站的更加成熟，会有更多的网络用户，市场潜力会得到充分发挥。
校园网站能更好展示学校的风采。
增强与学生及家长间的联系，在网上实现部分校务，提高办事效率。
关键字：
信息化、校园网站设计、网络
目录
摘要I
目录II
绪论1
第1章校园网的概述2
第2章开发软件简介3
2.1Dreamweaver简介3
2.1.1最佳的制作效率3
2.1.2网站管理3
2.1.3无可比拟的控制能力3
2.2HTML语言简介4
第3章高职门户网站需求分析5
3.1网站用户需求分析5
3.2网站功能需求分析5
3.3网站可行性分析5
3.3.1技术可行性分析5
3.3.2操作可行性分析5
第4章网站总体分析和设计7
4.1网站系统分析7
4.2主页设计7
4.3网页版面设计分析7
第5章网页界面设计8
5.1网页的板块设计8
5.2站点的整理13
5.3部分模版的展示14
5.3.1校园网导航14
5.3.2访问者登录界面14
5.3.3综合新闻15
5.3.4通知公告16
5.3.5网上评优16
5.4校园网主页17
第6章校园网后起维护18
总结19
参考文献20
绪论
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
为了更好的办学，提高学校知名度，特构建校园网站。
所以在不久的将来通过网络来传播信息将成为重要的信息交流的平台，建设招生信息门户网站有着重要的意义。
因此，创建招生信息门户网站是潮流趋向。
第1章校园网的概述
校园网是在学校范围内，在一定的教育思想和理论指导下，为学校教学、科研和管理等教育提供资源共享、信息交流和协同工作的计算机网络。
概括地讲，校园网是为学校师生提供教学、科研和综合信息服务的宽带多媒体网络。
首先，校园网应为学校教学、科研提供先进的信息化教学环境。
这就要求：
校园网是一个宽带、具有交互功能和专业性很强的局域网络。
多媒体教学软件开发平台、多媒体演示教室、教师备课系统、电子阅览室以及教学、考试资料库等，都可以在该网络上运行。
如果一所学校包括多个专业学科（或多个系），也可以形成多个局域网络，并通过有线或无线方式连接起来。
其次，校园网应具有教务、行政和总务管理功能。
在我国，近年来校园网建设发展迅速，到目前为止仅在我国中小学就有近6000所学校建设了校园网。
他们为我国中小学内部实现教育的资源共享、信息交流和协同工作提供了较好的范例。
然而，随着我国各地校园网数量的迅速增加，校园网之间如何实现教育的资源共享、信息交流和协同工作的要求越来越强烈。
第2章开发软件简介
2.1Dreamweaver简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。
它是第一套针对专业网页设计师特别发展的视觉化网页开发工具。
利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
其特点有以下几方面：
2.1.1最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks，FreeHand或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单，快捷键与格式控制，都只要一个简单步骤便可完。
Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。
除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
2.1.2网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名称，Dreamweaver会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
2.1.3无可比拟的控制能力
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧（frames）和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP、Apache、BroadVision、Cold、Fusion、iCAT、Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
Dreamweaver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。
2.2HTML语言简介
HTML，即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部、主体两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
第3章高职门户网站需求分析
3.1网站用户需求分析
高职在线网站是一个中小型网站，可以为各类用户提供方便的发贴、评论、交流的平台，符合目前国内流行的网站模式。
用户可以在系统中实现发表新贴子、进行贴子评论、修改用户资料以及浏览用户资料等功能；管理员可以通过多种操作功能来对网站进行维护更新。
（1）登录系统：
用户成为会员进行发贴。
（2）基本信息：
用户的基本信息及查看信息。
（3）贴子管理：
已发贴子及评论的管理。
（4）显示贴子作者：
即显示发贴者的用户名。
（5）阅读回复信息：
显示贴子的浏览次数及回复次数
（6）修改系统：
修改用户的个人信息。
3.2网站功能需求分析
高职门户网站主要进行的校/院务管理和教育活动，对外开展公众教育服务新平台。
其主要手段是充分利用网络信息技术和通信技术，在整合与开发各类管理系统的基础之上，实现信息资源共享。
为了准确把握功能定位。
在高职门户网站建设过程中应把握以下个方面:
（1）管理系统高度集成
（2）管理主客体互动
（3）院系网络资源共享
（4）网站建设应坚持“网站与后台数据库同行”
3.3网站可行性分析
3.3.1技术可行性分析
在制作高职门户网站的过程中需要考虑到技术可行性的问题，对制作人员一般要求要掌握计算机技术，具有一定的数据库基础，至少熟悉运用一个网页制作的软件（如：
Dreamweaver），并对多媒体软件具有一定的熟悉（如：
Photoshop、Flash等等）。
2.3.2操作可行性分析
本作品操作简单、界面简洁清晰,对于那些有一般计算机知识的人员就可以轻松上手。
并兼容与所有网页浏览的软件（如:
InternetExplorer）综和以上方面，本网站具有很高的可开行性，无论是从技术方面还是操作方面都是可行的。
3.3.3相关术语及解释
CSS：
中文翻译为样式表，它的作用简单的说：
就是可以使你在通一个页面里使用不通的超链接样式。
风格：
风格是抽象的，是指站点的整体形象给浏览者的综合感受。
这个“整体形象”包括站点的CI（标记，色彩，字体，标语），八年布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素。
创意：
这里说的创意是指站点的整体创意，网页的平面设计创意与此处所说的概念不同。
Asp:
asp是activeserverpages的英文缩写，即动态服务器主页active表示可以根据用户的请求动态生成网页，server表示这是一种后台服务端的技术，page则表示网页的概念。
流媒体：
“流媒体”不同于传统的多媒体，他的主要特点就是运用可变宽带技术，以“流”的形式进行数字媒体传送，使人在从28K到1200K的宽带环境下都可以在线欣赏到连续不断的高品质的音频和视频节目。
第4章网站总体分析和设计
4.1网站系统分析
按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：
（1）学校风采通过学校概括、教师风采、校园之星及部分图片等内容来展现。
（2）优点特色通过新闻、生动活泼的教育教学栏目来展现。
（3）信息发布通过公告栏、信息查询等栏目来实现，内容有招生政策、活动安排等。
（4）部分校务根据校务的公开程度与参与人数的多少，特选择图书管理、考试查分在网上实现。
4.2主页设计
网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现学校的勃勃生气，静态主页设计方式介绍学校风采、优点特色、信息发布，对于四大校务，采用交互式的动态的web画面来实现。
4.3网页版面设计分析
（1）校园网站的整体布局：
基本上校园网站的布局分为，上中下、左中右、左右、上下、与上下左右之混合几类。
（2）校园网站的色彩搭配：
做为一个优秀的校园网站，其色彩的搭配是一个重要的环节。
每种颜色都有其不同的含义。
比如白色代表：
纯净、简洁、清白、青春等含义；红色代表：
热情奔放、充满希望、蕴含能量、干劲等含义；绿色代表含义：
生命、新鲜、、春天、青春、未来和朝气等含义。
也可以选择多种颜色来设计你的网站。
（3）整个网站色调统一：
网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。
两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。
色彩调和是求得视觉统一，达到人们心理平衡的重要手段。
（4）不要将所有颜色都用到，尽量控制在3~5种色彩以内：
这就好比一个页面，它的主要字体和颜色搭配不应该超过三种，他们分别用做：
最重要的，比较重要的，一般的。
别试图什么都强调，你会到头来什么都抓不到。
第5章网页界面设计
5.1网页的板块设计
（1）站点的建立：
打开Dreamweaver8→站点→新建站点；进入【站点定义】窗口，点击【高级】选项卡进入,【本地信息】分类窗口分别输入，进入【测试服务器】窗口，分别选择，完成后点击【确定】按钮完成站点设置。
完成后右下角的站点窗口会显示一个新的站点如图5.1
图5.1上图就是开始步骤锁设置的站点
（2）创建HTML：
做静态网页首先要创建一个HTML如下图5.2
图5.2创建HTML页面
（3）网页的背景：
做一个网页的前提首先要先创建一个背景如图5.3
图5.3创建网页的背景
（4）建立表格：
表格是网页的一个非常重要的元素，因为HTML本身没有提供更多的排版手往往要借助表格实现网页的精细排版。
创建表格、设置表格属性、添加文本、其他图像。
如图5.4建立表格
图5.4表格的建立
（5）字体颜色以及大小的设置，如图5.5
图5.5字体的设置
（6）图像的插入图像是网页中不可或缺的组成成分，恰当的使用图像，可以使网站充满生命力和说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。
在网页中插入图像其实很简单，首先将鼠标留在要插入图像的地方，然后单击“菜单栏”下面“插入快捷栏”的下拉表，选择其中的“常用”类；则右侧将会显示该类中可以插入的对象快捷按钮。
从计算机中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选择文件URL地址的类型，插入图像，如图5.6所示
图5.6图片的插入
（7）HTML中按钮以及空白行的添加，如图5.7、5.8、5.9
图5.7按钮的插入
图5.8复选框的插入方式
图5.9本域的插入
（8）超链接，作为网站肯定有很多的网页，彼此都是独立的，这样的网页是不能运行的，所以就要用上超链接才能建立起关系。
如图5.10
图5.10超链接的设置
（9）完成后浏览的方式。
如图5.11
图5.11浏览器阅览
5.2站点的整理
网页做完以后往往不能马上发布还需要检验下网页之间的链接是否准确，文件是否正确，有时还需要掌握整个站点的结构以备日后的修改。
5.2.1查看站点地图
站点地图用查看链接关系和导航关系，在小型站点和整齐有序的站点中一般不起太多的作用。
（1）在Dreamweaver8.0窗口菜单下的“站点地图”命令，打开“站点”面板。
（2）单击“站点”面板的展开/折叠按钮，Dreamweaver会显示出站点的结构图。
5.2.2检查超链接情况
链接检查不仅仅在此外使用，当在站点窗口中移动一个文件的时候，Dreamweaver也会问我们是否需要扫描结果显示出来，还会询问是否需要更新链接。
在“站点”面板中选择“站点”菜单下的“检查站点范围的链接”命令。
Dreamweaver会弹出“链接检查器”面板。
检查完毕后，可让用户查看不同类型的链接情况，还可以保存链接检查结果。
5.3部分模版的展示
5.3.1校园网导航
本网站主要是服务于高职院学生，对高职院最新动态能及时的了解。
而且用户可注册，登陆，直接浏览该网站的所有内容。
内容包括：
首页、校园新闻、学院概况、在线联系、学子风采、招生就业、实验中心、在线资源、计算机协会、网上投票等十个主要版块。
如图5.12
图5.12网页的项目栏版块
插入的图片如下图所示是校园机房的大致情况（如图5.13、5.14）
图5.13校园机房
图5.14校园教学楼
5.3.2访问者登录界面
该界面是为了能更好的提供查用户用来在论坛中发表建议和交流意见，同时还可以查阅相应的资料。
如图5.15
图5.15用户登录界面
5.3.3综合新闻
主要是介绍学校的重大新闻。
浏览者可以通过点击其中的一项进入浏览来了解校园内的情况。
如图5.16
图5.16综合新闻
5.3.4通知公告
主要是介绍了些学校的一些杂物事，以及一些招标内容。
浏览者可以通过点击其中的一项进入浏览如图5.17
图5.17通知公告
5.3.5网上评优
网上调查是通过某些表单设计完成的，比如复选框，单选按钮等。
如图5.18
图5.18网上投票
5.4校园网主页
该页面作为整个网站的首页，为了用户浏览方便，所以在进行版面设计时，将本作品的十个主要版块的内容都浓缩在首页的界面里，从而令用户可以快速的看到用户所感兴趣的内容，节省用户浏览的时间。
另外由于本网站新增留言板、在线自动排版工具、用户帮助中心等等实用性版块，协助用户解决一些时常出现的问题。
如图5.19
图5.19上图为主页
第6章校园网后起维护
网站是一个信息窗口，每一个浏览者在浏览网站时都希望看到新内容。
一个网站的资料,哪怕是短短的一段新闻，如果不重视信息的时效性，那么久而久之就不会再有人去访问。
为了让网站能随时给访问者带来新的气息和吸引力，应对网站进行更新与维护，时时保持新鲜感，这样才能吸引更多的人。
建网站相对容易，但更新与维护工作往往重复而死板，网站的后期维护工作量视网站的结构组成而定。
如果网站的结构不复杂，内容侧重静态展示和介绍，更新不频繁，后期维护工作量不会太大。
如果网站信息量比较多，网站结构不合理，往往改动一个链接会使很多网页相关链接都需要改动，后期维护工作量就会很大,所以说网站的维护是最费力、费时的工作。
网站管理维护，就是要做好更新与完善两方面工作。
随着网络应用的深入、网络知识的普及，没有更新与维护过的网站，根本就不会有人常来访问，这样下去完全是在浪费宝贵的网络资源。
网站更新维护并不像投资建一个网站那么简单，更重要的工作在于网站建成后的长期更新与完善。
网站的维护还要考虑到各种浏览器之间的兼容，即使是同一种浏览器，不同的版本也存在兼容性问题。
网站建成后要不断地在浏览器之间进行调试，并作出取舍，同时要考虑网页效果的兼容性，如文本的格式、图片的插入、JavoscriPt或VbscriPt等脚本都应该调试。
网站的内容应及时更新，为规范高校网站信息资源及信息管理工作，充分发挥网站信息沟通、宣传交流的窗口作用，网站内容编辑工作最好由一个综合行政部门（有条件的学校尽可能成立像网络中心一样的专门部门）来管理和维护。
高校网站的静态信息（学校简介、院系介绍、教学资源、科学研究等）、动态信息（校园快讯、校园新闻、招生、就业信息等）都应根据学校的发展变化而实时地更新。
网站中信息更新频繁，有论坛、校友录、留言板等，虽然后期维护工作量成倍增加,但是一个更新频繁信息量大的网站总是会吸引人的，因此，做好校园网站的后期更新与维护，是树立形象的根本、生存的根本。
总结
校园网页的设计，首先要明确校园网页对于校园的发展的重要作业和意义。
从现代校园发展的角度看，校园网站的网页不仅能实现学校掌握的学校资源的共享，优化学校资源配置，更能便捷地传递校园管理信息，更快捷、更广泛、更深入、更低成本地完成校园管理和服务职能。
随着互联网的普及和发展，网站已经逐渐成为各行业对外进行展示、信息沟通最方便、最快捷的平台。
学校网站是学校的“商标”，每所学校都有自己的特色，每所学校都有自己的个性。
所以说，在这个高度信息化的社会里，建立自己学校的门户网是最直接的宣传手段。
通过制作校园网页的制作，我掌握了的制作过程，了解了的基本知识巩固了我对网页制作的学习。
感谢老师的指导和教诲，感谢同学的帮助，使我能够取得好成绩，你们的教导我心永记。
本论文是在指导老师姜静的细心教诲和指导下完成的。
她以多年的工作经验指导我如何在整个设计过程当中找到切实可行的方法，遇到什么样的问题应该如何去解决。
我从中受益匪浅，她带给我的不仅是知识，更重要的是在学习和工作上给了我很大帮助。
她很耐心，对人热情，对工作热情，是一位好老师，十分感谢她在这次毕业设计中对我的照顾，她是一位极具人格魅力的老师，她深深地感动、感染着周围的每一位学生。
我还要感谢计算机分院的每一位老师，他们同样给了我很多的关心和帮助！
感谢学校给了我良好的学习环境，让我拥有快乐和宝贵的知识！
一句发自内心的感谢，丝毫不能表达对您们的谢意和尊敬！
您们既然选择教书育人，我就选择奋发向上贡献社会！
参考文献
[1]金颖·《新编网页制作三合一教程》·中国铁道出版社·2006
[2]陈强·霍继文·叶兵·《网页制作实用技术FrontPage2000》·清华大学出版社2000
[3]刘海疆·李东博·《网页制作三剑客教程》·西安电子科技大学出版社·2004
[4]张福成·谭国鹏·《制作网页宝典》·人民邮电出版社·2000
[5]王凯·张家才·《跟我学网页制作网页制作技巧与实例》·冶金工业出版社·1999
[6]韩小祥·张薇等编著·《Dreamweaver网页设计》·中国计划出版社·2007
[7]赵丰年编著·《网页制作技术》·清华大学出版社·2002
[8]StephenWalther.·ASP.NET3.5UnleashedUnleashedSeries[M].Sams·2008.
[9]ChangChun,·S.Z.C.S·etal·ANovelTwo-stageAlgorithmofFuzzyC-MeansClustering·2010
升级会员 