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

北京农业职业学院信息技术系网站建设 摘要 本文主要讨论了北京农业职业学院信息技术系网站的建设方法和技 术。该网站的主要功能是信息发布，经过综合分析采用了静态网站技术。 涉及的软件主要有 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 1 一、网站分析 （一）建设背景 随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落，作为网 络世界支撑点的网站，更是人们关注的热点。为了对外介绍信息技术系，让莘莘学 子更好的了解信息技术系的建设情况,系部领导觉得制作一个能体现信息技术系风采 和特点的网站。同时为了锻炼学生的动手能力，体现我系的教学成果，集众家之所 长，发动学生共同参与此项工作。我是在毕业实习期间完成了此项设计工作，我严 格按照建设的要求，一步步完成了网站设计作品。 （二）需求分析 政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用 网站宣传自己的形象，挖掘无限商机；校园利用网站指导教学，开拓进取。为了向 广大群众展示北京农业职业学院信息技术系的建设成果，所以需要搭建一个外界了 解信息技术系的平台，更好的介绍信息技术系，此设计就是以此为目的进行设计的。 设计之初，我跟系领导和系里的相关人员进行了深入的讨论，同时参考了其他学校 系部网站的具体内容。结合系里的实际情况和建站的目的，网站的主要内容包含了： 系部介绍、教学教改、系部建设、专业介绍、党建工作、学生管理、招生就业七项 内容，网站内容结构如图 1 所示。 北京农业职业学院信息技术系网站 系部介绍 教学教改 系部建设 专业介绍 党建工作 学生管理 招生就业 图 1 信息技术系网站功能结构图 网站每部分的具体功能如下： 系部介绍：对信息技术系做了概括性描述。 教学教改：针对教学方式方法和改进做了陈述。 系部建设：展示相关的教育和建设成果。 专业介绍：信息技术系的专业设置。 党建工作：党建思想方面的工作介绍。 学生管理：从学生的管理和活动做了说明。 2 招生就业：针对招生的地区和人数做了详细的统计。 （三）开发技术 综合考虑了网站的功能需求、服务器条件、建设时间以及后期的维护条件等综 合因素，网站采用静态模式，重点考虑页面的美观度、用户浏览的习惯、更新的方 便性等几个方面。站点开发过程中主要用到了 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 的方式 实现各种定位。 二、 网站的总体设计 （一） 网站的开发过程 3 网站的开发主要经过了：需求调研、网站功能与开发技术分析、版式设计、页 面效果图设计、页面制作以及站点测试等几个阶段，具体的建设流程如图 2 所示。 在网站建设的各个流程中，需求调研需要跟客户进行深入沟通，如果沟通不够，会 导致后续的翻工，非常的麻烦。当然，需求调研不只是限定在第一个阶段，在后面 的几个环节中，根据需要随时都要跟客户进行深入沟通。需求调研完成后，还有根 据网站设计，让客户提供必要的网站素材，素材主要包括：文字、图片、视频、音 乐等，当然根据网站主题，我们也可以通过其他渠道收集一些相关的资料，充实网 站。网站建设过程中，前期工作只占了所有总工作量的 30%，而站点测试和后期的 维护却占所有工作量的 70%。 需求调研 网站功能与开发技术分析 页面版式设计 页面效果图制作 页面排版 导航设计 站点测试 图 2 网站开发流程图 （二）页面风格设计 1.页面主体风格 信息技术系网站采用统一风格进行布局，色彩以蓝色、白色为主，充分体现了 校园的绿色气息，给人以清新活泼的感觉。以相同的风格分别对其他页面进行内容 的修改，以达成风格统一的效果。 网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体 现学校的勃勃生气，静态主页方式介绍学校风采、优点特色、信息发布。在页面布 局方面，我从以下几个方面进行了充分的考虑： 醒目性：指用户把注意力集中到你诱导起浏览的部分和内容 可读性：指网站的内容让人容易读懂 明快性：指准确、快速转达网站的构成内容 造型性：维持整体外型上的稳定感和均衡性 创造性：有鲜明个性，创意是必不可少的 布局的构成原则上是:统一、协调、流动、强调、均衡 2.首页页面布局 4 网页的最上面是导航条，网页顶端的标题“信息工程系”是一幅图片，在中间 的左侧我们弄的是三幅图片转换,下面有快速通道，网页中间的右侧是本栏目的介绍 和说明，网页背景是淡蓝色,呼应主体颜色，在最下端网站的版权区域。具体效果如 图 3 所示。 图 3 信息技术系网站首页效果图 网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如 何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起 来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶 段完成，所以如何表现功能以及美感就是研究的重点。 3.首页的布局实现 首页分为三大板块，也就是由三个主要的 div 框分别为构成了主页上中下三部 分，其中内嵌各自的内容分类，根据各个页面的主题不同，进行内容的更改，具体 的图层代码如下所示： #zhu height: auto; 5 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.站点链接设计 站点建设过程中，链接的打开方式有：在新的空白窗口打开，在当前窗口打开， 在父窗口打开等几种方式。为了让用户浏览信息技术系网站更加流畅，避免打开过 多的页面而影响计算机网络的运行速度，在网站设计过程中，所有链接都采用了 “在当前窗口打开”方式。同时在每个页面中都加入了“当前位置”模块，方便用 户来回跳转到各个页面。 三、网站导航菜单的设计与实现 （一）导航条的制作 6 网站的主导航条，包含了网站的所有内容，必须做到明显、易用。常用的导航 条制作方式有:表格定位、鼠标经过图片、flash 菜单、dreamweaver 的 spry、div+css 等形式。根据站点的具体功能，信息系的主导航条采用了 div+css 的实现方法，该方法具有代码量小、导航效果明显以及修改方便等特点。1.导航的 div 代码 1 插入一个 div（是在一个名为 zhu 的 div 下进行插入）： 学院首页 系部介绍 教学修改 系部建设 专业介绍 党建工作 学生管理 招生就业 2.对应的 css 样式表 css 样式表： #zhu #dao height: 40px;高 40 width: 680px;宽 680 float:left;浮动靠左 3.导航条的最终显示效果如图 4 所示： 图 4 导航条效果 （二） div+css 实现网站重点通道 重点通道放在页面的右上角，采用了下来菜单形式，把站点中最重要的四项内 容集中放在此栏目中，方便用户的快速访问。 1.重点通道的 div 代码 7 重点通道 本系建设 思想核心 领导班子 成果展示 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; 8 .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 下拉菜单效果 四、小结 经过一个阶段的努力，毕业设计和论文终于完成了。虽然经历了许多的困难， 在老师的帮助和自己的努力下都一一克服。感谢学校给了我一次锻炼的机会，并且 给自己在校三年的学习和生活画上了一个圆满的句号。 9 参考文献 （1）王辉，罗皇等编着 中