北京农业职业学院信息技术系网站建设毕业论文.doc

北京农业职业学院信息技术系网站建设摘要本文主要讨论了北京农业职业学院信息技术系网站的建设方法和技术。该网站的主要功能是信息发布，经过综合分析采用了静态网站技术。涉及的软件主要有photoshop和dreamweaver，photoshop主要用于网站设计图的绘制，dreamweaver主要用于网页合成。为了提高网站的操控性和页面的美观度，页面导航采用了下拉菜单。下拉菜单使用方便，美观大方。实现下拉菜单的技术有多种，综合比较后采用的是div+css方式，这种方式实现相对简单，可编辑性强，显示效果好。关键词： Dreamweaver Photoshop div css目录一、网站分析1（一）建设背景1（二）需求分析1（三）开发技术2二、网站的总体设计2（一） 网站的开发过程2（二）页面风格设计3三、网站导航菜单的设计与实现5（一）导航条的制作5（二） DIV+CSS实现网站重点通道6四、小结8参考文献9致谢10一、网站分析（一）建设背景随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落，作为网络世界支撑点的网站，更是人们关注的热点。为了对外介绍信息技术系，让莘莘学子更好的了解信息技术系的建设情况,系部领导觉得制作一个能体现信息技术系风采和特点的网站。同时为了锻炼学生的动手能力，体现我系的教学成果，集众家之所长，发动学生共同参与此项工作。我是在毕业实习期间完成了此项设计工作，我严格按照建设的要求，一步步完成了网站设计作品。（二）需求分析政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，挖掘无限商机；校园利用网站指导教学，开拓进取。为了向广大群众展示北京农业职业学院信息技术系的建设成果，所以需要搭建一个外界了解信息技术系的平台，更好的介绍信息技术系，此设计就是以此为目的进行设计的。设计之初，我跟系领导和系里的相关人员进行了深入的讨论，同时参考了其他学校系部网站的具体内容。结合系里的实际情况和建站的目的，网站的主要内容包含了：系部介绍、教学教改、系部建设、专业介绍、党建工作、学生管理、招生就业七项内容，网站内容结构如图1所示。北京农业职业学院信息技术系网站系部介绍教学教改系部建设专业介绍党建工作学生管理招生就业图1 信息技术系网站功能结构图网站每部分的具体功能如下：系部介绍：对信息技术系做了概括性描述。教学教改：针对教学方式方法和改进做了陈述。系部建设：展示相关的教育和建设成果。专业介绍：信息技术系的专业设置。党建工作：党建思想方面的工作介绍。学生管理：从学生的管理和活动做了说明。招生就业：针对招生的地区和人数做了详细的统计。（三）开发技术综合考虑了网站的功能需求、服务器条件、建设时间以及后期的维护条件等综合因素，网站采用静态模式，重点考虑页面的美观度、用户浏览的习惯、更新的方便性等几个方面。站点开发过程中主要用到了photoshop、dreamweaver两个软件。起初photoshop主要用于页面效果图的设计，dreameaver主要用于页面的合成和特效添加。在网站导航方面，还采用了DIV+CSS技术，实现了下拉菜单功能。1.PhotoshopPhotoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。在网站建设过程中，Photoshop主要用于网页效果图的制作和网站合成时的截图操作。做网站效果图时，主要会用到Photoshop的图形绘制、抠像、图层、蒙板、色彩调整等功能。原来的网页三剑客主要指：Firwork、Flash和Dreamweaver，但由于Photoshop的功能越来越强大，慢慢地很多地方都把网络三剑客改成了Photoshop、Flash和Dreamweaver。2.DreamweaverDreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。对于初学网页设计者来说，Dreamweaver非常容易上手，功能也非常强大，它采用所见即所得的模式编辑网页，非常形象直观。通过Dreamweaver可以很方便地把网页设计图纸转变成为一个真正的网页。3.DIV+CSSDIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。二、 网站的总体设计（一） 网站的开发过程网站的开发主要经过了：需求调研、网站功能与开发技术分析、版式设计、页面效果图设计、页面制作以及站点测试等几个阶段，具体的建设流程如图2所示。在网站建设的各个流程中，需求调研需要跟客户进行深入沟通，如果沟通不够，会导致后续的翻工，非常的麻烦。当然，需求调研不只是限定在第一个阶段，在后面的几个环节中，根据需要随时都要跟客户进行深入沟通。需求调研完成后，还有根据网站设计，让客户提供必要的网站素材，素材主要包括：文字、图片、视频、音乐等，当然根据网站主题，我们也可以通过其他渠道收集一些相关的资料，充实网站。网站建设过程中，前期工作只占了所有总工作量的30%，而站点测试和后期的维护却占所有工作量的70%。需求调研网站功能与开发技术分析页面版式设计页面效果图制作页面排版导航设计站点测试图2 网站开发流程图（二）页面风格设计1.页面主体风格信息技术系网站采用统一风格进行布局，色彩以蓝色、白色为主，充分体现了校园的绿色气息，给人以清新活泼的感觉。以相同的风格分别对其他页面进行内容的修改，以达成风格统一的效果。网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校风采、优点特色、信息发布。在页面布局方面，我从以下几个方面进行了充分的考虑：醒目性：指用户把注意力集中到你诱导起浏览的部分和内容可读性：指网站的内容让人容易读懂明快性：指准确、快速转达网站的构成内容造型性：维持整体外型上的稳定感和均衡性创造性：有鲜明个性，创意是必不可少的布局的构成原则上是:统一、协调、流动、强调、均衡2.首页页面布局网页的最上面是导航条，网页顶端的标题“信息工程系”是一幅图片，在中间的左侧我们弄的是三幅图片转换,下面有快速通道，网页中间的右侧是本栏目的介绍和说明，网页背景是淡蓝色,呼应主体颜色，在最下端网站的版权区域。具体效果如图3所示。图3 信息技术系网站首页效果图网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是研究的重点。3.首页的布局实现首页分为三大板块，也就是由三个主要的DIV框分别为构成了主页上中下三部分，其中内嵌各自的内容分类，根据各个页面的主题不同，进行内容的更改，具体的图层代码如下所示：#zhu height: auto;width: 740px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;background-color: #FFFFFF;导航条和Logo区#main height: 540px;width: 740px;margin-top: 180px;margin-right: auto;margin-bottom: 0px;margin-left: auto;主体部分#bq width: 740px;margin-top: 10px;margin-right: auto;margin-bottom: 0px;margin-left: auto;版权区4.站点链接设计站点建设过程中，链接的打开方式有：在新的空白窗口打开，在当前窗口打开，在父窗口打开等几种方式。为了让用户浏览信息技术系网站更加流畅，避免打开过多的页面而影响计算机网络的运行速度，在网站设计过程中，所有链接都采用了“在当前窗口打开”方式。同时在每个页面中都加入了“当前位置”模块，方便用户来回跳转到各个页面。三、网站导航菜单的设计与实现（一）导航条的制作 网站的主导航条，包含了网站的所有内容，必须做到明显、易用。常用的导航条制作方式有:表格定位、鼠标经过图片、flash菜单、Dreamweaver的SPRY、DIV+CSS等形式。根据站点的具体功能，信息系的主导航条采用了DIV+CSS的实现方法，该方法具有代码量小、导航效果明显以及修改方便等特点。1.导航的DIV代码1插入一个div（是在一个名为zhu的div下进行插入）：<div id="dao"><ul><li><a href="index.html">学院首页</a></li><li><a href="index.html">系部介绍</a></li><li><a href="jxjg.html">教学修改</a></li><li><a href="js.html">系部建设</a></li><li><a href="zy.html">专业介绍</a></li><li><a href="dj.html">党建工作</a></li><li><a href="xs.html">学生管理</a></li><li><a href="zs.html">招生就业</a></li></ul></div>2.对应的CSS样式表CSS样式表：#zhu #dao height: 40px;高40width: 680px;宽680float:left;浮动靠左3.导航条的最终显示效果如图4所示：图4 导航条效果（二） DIV+CSS实现网站重点通道重点通道放在页面的右上角，采用了下来菜单形式，把站点中最重要的四项内容集中放在此栏目中，方便用户的快速访问。1.重点通道的DIV代码<div class="menu"><ul><li><a href="#">重点通道<ul><li><a href="js.html">本系建设</a></li><li><a href="dj.html">思想核心</a></li><li><a href="index.html">领导班子</a></li><li><a href="xs.html">成果展示</a></li></ul></ul></div>2.对应的CSS样式：menu position:relative;width:50px;background-color:#360;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;float:left;.menu ul list-style-type:none; /设置列表的格式为none。也就是没有格式。.menu li float:left;position:relative;.menu ul ul visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;.menu table position:absolute; top:0; left:0; /绝对位置. .menu ul li:hover ul,.menu ul a:hover ulvisibility:visible; / 能见度：可见.menu adisplay:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;.menu a:hoverbackground:#690;color:#000;.menu ul ul,.menu ul ul li clear:both;text-align:left;.menu ul ul li adisplay:block;width:100px;height:15px;.menu ul ul li a:hoverbackground:#690;3.重要通道的下来效果如图5所示：图5下拉菜单效果四、小结经过一个阶段的努力，毕业设计和论文终于完成了。虽然经历了许多的困难，在老师的帮助和自己的努力下都一一克服。感谢学校给了我一次锻炼的机会，并且给自己在校三年的学习和生活画上了一个圆满的句号。参考文献（1）王辉，罗皇等编着 中文Dreamweaver 8 网页制作 -北京：清华大学出版（2）卓越科技编着 Photoshop cs2特效制作 电子工业出版社致谢这次毕业设计得到了很多老师、同学的帮助，其中我的导师万春旭老师对我的指导和帮助。另外，感谢校方给予我这样一次机会，能够独立地完成一个课题，并在这个过程当中，给予我们各种方便，使我们在即将离校的最后一段时间里，能够更多学习一些实践应用知识，增强了我们实践操作和动手应用能力，提高了独立思考的能力。再一次对我的母校表示感谢。 最后，感谢所有在这次毕业设计中给予过我帮助的人。 对上述朋友，再一次真诚地表示感谢！