北京农业职业学院毕业论文 信息技术系网页设计
网站的开发主要经过了：需求调研、网站功能与开发技术分析、版式设计、页面效果图设计、页面制作以及站点测试等几个阶段，具体的建设流程如图2所示。在网站建设的各个流程中，需求调研需要跟客户进行深入沟通，如果沟通不够，会导致后续的翻工，非常的麻烦。当然，需求调研不只是限定在第一个阶段，在后面的几个环节中，根据需要随时都要跟客户进行深入沟通。需求调研完成后，还有根据网站设计，让客户提供必要的网站素材，素材主要包括：文字、图片、视频、音乐等，当然根据网站主题，我们也可以通过其他渠道收集一些相关的资料，充实网站。网站建设过程中，前期工作只占了所有总工作量的30%，而站点测试和后期的维护却占所有工作量的70%。
需求调研 网站功能与开发技术分析 页面版式设计 页面效果图制作 页面排版 导航设计 站点测试
图2 网站开发流程图
（二）页面风格设计 1.页面主体风格
信息技术系网站采用统一风格进行布局，色彩以蓝色、白色为主，充分体现了校园的绿色气息，给人以清新活泼的感觉。以相同的风格分别对其他页面进行内容的修改，以达成风格统一的效果。
网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校风采、优点特色、信息发布。在页面布局方面，我从以下几个方面进行了充分的考虑：
醒目性：指用户把注意力集中到你诱导起浏览的部分和内容 可读性：指网站的内容让人容易读懂 明快性：指准确、快速转达网站的构成内容 造型性：维持整体外型上的稳定感和均衡性 创造性：有鲜明个性，创意是必不可少的
布局的构成原则上是:统一、协调、流动、强调、均衡 2.首页页面布局
3
北京农业职业学院毕业论文 信息技术系网页设计
网页的最上面是导航条，网页顶端的标题“信息工程系”是一幅图片，在中间的左侧我们弄的是三幅图片转换,下面有快速通道，网页中间的右侧是本栏目的介绍和说明，网页背景是淡蓝色,呼应主体颜色，在最下端网站的版权区域。具体效果如图3所示。
图3 信息技术系网站首页效果图
网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是研究的重点。 3.首页的布局实现
首页分为三大板块，也就是由三个主要的DIV框分别为构成了主页上中下三部分，其中内嵌各自的内容分类，根据各个页面的主题不同，进行内容的更改，具体的图层代码如下所示： #zhu {
height: auto;
4
北京农业职业学院毕业论文 信息技术系网页设计
}
width: 740px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;
background-color: #FFFFFF;
导航条和Logo区 #main { } 主体部分 #bq { } 版权区
4.站点链接设计
站点建设过程中，链接的打开方式有：在新的空白窗口打开，在当前窗口打开，在父窗口打开等几种方式。为了让用户浏览信息技术系网站更加流畅，避免打开过多的页面而影响计算机网络的运行速度，在网站设计过程中，所有链接都采用了“在当前窗口打开”方式。同时在每个页面中都加入了“当前位置”模块，方便用户来回跳转到各个页面。
width: 740px; margin-top: 10px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 540px; width: 740px; margin-top: 180px; margin-right: auto; margin-bottom: 0px; margin-left: auto;
三、网站导航菜单的设计与实现
（一）导航条的制作
5
北京农业职业学院毕业论文 信息技术系网页设计
网站的主导航条，包含了网站的所有内容，必须做到明显、易用。常用的导航条制作方式有:表格定位、鼠标经过图片、flash菜单、Dreamweaver的SPRY、DIV+CSS等形式。根据站点的具体功能，信息系的主导航条采用了DIV+CSS的实现方法，该方法具有代码量小、导航效果明显以及修改方便等特点。1.导航的DIV代码 1插入一个div（是在一个名为zhu的div下进行插入）：
2.对应的CSS样式表 CSS样式表： #zhu #dao { }
3.导航条的最终显示效果如图4所示：
height: 40px\\\\;高40 width: 680px;\\\\宽680 float:left;\\\\浮动靠左
图4 导航条效果
（二） DIV+CSS实现网站重点通道
重点通道放在页面的右上角，采用了下来菜单形式，把站点中最重要的四项内容集中放在此栏目中，方便用户的快速访问。 1.重点通道的DIV代码
6
北京农业职业学院毕业论文 信息技术系网页设计
2.对应的CSS样式： menu { }
.menu ul {list-style-type:none;} //设置列表的格式为none。也就是没有格式。 .menu li {float:left;position:relative;} .menu #000;}
.menu table {position:absolute; top:0; left:0;} //绝对位置.
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;} // 能见度：可见 .menu
a{display:block;background:#360;padding:2px
10px;color:#fff;text-decoration:none;border:1px solid #360;} .menu a:hover{background:#690;color:#000;} .menu ul ul,
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
7
position:relative; width:50px;
background-color:#360; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; float:left;
ul ul solid
{visibility:hidden;position:absolute;left:3px;top:22px;border:1px