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