北 京 农 业 职 业 学 院
毕 业 论 文
论文（设计）题目：北京农业职业学院信息技术系网站建设
系 别： 信息技术系 专 业： 计算机网络 班 级： 网络0811 学生姓名（学号）： 王攀（ 05 ） 指导 教师 姓 名： 万春旭 论文完成日期： 2011 年 5 月 10 日
摘要
本文主要讨论了北京农业职业学院信息技术系网站的建设方法和技术。该网站的主要功能是信息发布，经过综合分析采用了静态网站技术。涉及的软件主要有photoshop和dreamweaver，photoshop主要用于网站设计图的绘制，dreamweaver主要用于网页合成。为了提高网站的操控性和页面的美观度，页面导航采用了下拉菜单。下拉菜单使用方便，美观大方。实现下拉菜单的技术有多种，综合比较后采用的是div+css方式，这种方式实现相对简单，可编辑性强，显示效果好。
关键词： Dreamweaver Photoshop div css
1
目录
一、网站分析 ......................................................... 1 （一）建设背景 ...................................................................................................................................... 1 （二）需求分析 ...................................................................................................................................... 1 （三）开发技术 ...................................................................................................................................... 2 二、网站的总体设计 .................................................... 2 （一） 网站的开发过程 ..................................................................................................................... 2 （二）页面风格设计 ............................................................................................................................ 3 三、网站导航菜单的设计与实现 .......................................... 5 （一）导航条的制作 ............................................................................................................................ 5 （二） DIV+CSS实现网站重点通道 ............................................................................................... 6 四、小结 ............................................................. 8 参考文献 ............................................................. 9 致谢 ................................................................ 10
2
北京农业职业学院毕业论文 信息技术系网页设计
一、网站分析
（一）建设背景
随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落，作为网络世界支撑点的网站，更是人们关注的热点。为了对外介绍信息技术系，让莘莘学子更好的了解信息技术系的建设情况,系部领导觉得制作一个能体现信息技术系风采和特点的网站。同时为了锻炼学生的动手能力，体现我系的教学成果，集众家之所长，发动学生共同参与此项工作。我是在毕业实习期间完成了此项设计工作，我严格按照建设的要求，一步步完成了网站设计作品。 （二）需求分析
政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，挖掘无限商机；校园利用网站指导教学，开拓进取。为了向广大群众展示北京农业职业学院信息技术系的建设成果，所以需要搭建一个外界了解信息技术系的平台，更好的介绍信息技术系，此设计就是以此为目的进行设计的。设计之初，我跟系领导和系里的相关人员进行了深入的讨论，同时参考了其他学校系部网站的具体内容。结合系里的实际情况和建站的目的，网站的主要内容包含了：系部介绍、教学教改、系部建设、专业介绍、党建工作、学生管理、招生就业七项内容，网站内容结构如图1所示。
北京农业职业学院信息技术系网站 系部介绍 系部建设 党建工作 招生就业 教学教改 专业介绍 学生管理 图1 信息技术系网站功能结构图
网站每部分的具体功能如下：
系部介绍：对信息技术系做了概括性描述。 教学教改：针对教学方式方法和改进做了陈述。 系部建设：展示相关的教育和建设成果。 专业介绍：信息技术系的专业设置。 党建工作：党建思想方面的工作介绍。 学生管理：从学生的管理和活动做了说明。
1
北京农业职业学院毕业论文 信息技术系网页设计
招生就业：针对招生的地区和人数做了详细的统计。 （三）开发技术
综合考虑了网站的功能需求、服务器条件、建设时间以及后期的维护条件等综合因素，网站采用静态模式，重点考虑页面的美观度、用户浏览的习惯、更新的方便性等几个方面。站点开发过程中主要用到了photoshop、dreamweaver两个软件。起初photoshop主要用于页面效果图的设计，dreameaver主要用于页面的合成和特效添加。在网站导航方面，还采用了DIV+CSS技术，实现了下拉菜单功能。 1.Photoshop
Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。在网站建设过程中，Photoshop主要用于网页效果图的制作和网站合成时的截图操作。做网站效果图时，主要会用到Photoshop的图形绘制、抠像、图层、蒙板、色彩调整等功能。原来的网页三剑客主要指：Firwork、Flash和Dreamweaver，但由于Photoshop的功能越来越强大，慢慢地很多地方都把网络三剑客改成了Photoshop、Flash和Dreamweaver。 2.Dreamweaver
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。对于初学网页设计者来说，Dreamweaver非常容易上手，功能也非常强大，它采用所见即所得的模式编辑网页，非常形象直观。通过Dreamweaver可以很方便地把网页设计图纸转变成为一个真正的网页。 3.DIV+CSS
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
二、 网站的总体设计
（一） 网站的开发过程
2