基于Div+CSS的艺术设计系网站设计

　　摘要：首先介绍了Div+CSS技术，分析了用该技术布局网页的意义，最后给出了河南机电职业学院艺术设计系网站的设计方案，并用Div+CSS技术进行网页布局。经过网页上传后应用表明，应用Div+CSS布局的网页具有浏览速度快、易被引擎搜索、能够保持整个站点网页的视觉一致性、适应于不同的显示器分辨率等效果，便于被用户接受，使用情况良好。
　　关键词：Div+CSS，网页设计
　　中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)17-4187-02
　　在网络普及的今天，人们的工作、学习和生活都已经离不开网络。学生升学和就业选择也不例外，家长和孩子都已经习惯于把目光聚集到网络上，因此，一个系部网站的建立是适应现代信息技术的发展，加大系部对内、对外交流宣传力度，提高招生、就业、教学、科研、管理效率的重要途径。Div+CSS是网站标准中常用术语之一，是近几年比较流行的网页制作方法。基于Div+CSS的网页有利于SEO（搜索引擎优化），有利于网上在线咨询，有利于站点的维护[1]。
　　1 DIV+CSS技术
　　Div+CSS技术是区别于表格定位方式的另外一种标准的网页定位方式。随着Web2.0标准化设计理念的普及和Div+CSS技术的灵活性，国内很多大型门户网站都开始采用该技术进行网页制作。Div+CSS网页布局的意义主要体现在如下几个方面[2-3]。
　　1）使网页载入得更快，能够更好地被搜索引擎收录。由于将大部分网页代码在CSS中，使得页面体积容量变得更小，使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。相对于表格嵌套的方式，DIV+CSS技术将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
　　2）降低流量费用。页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
　　3）修改设计时更有效率。由于使用了DIV+CSS技术制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
　　4）保持视觉的一致性，对浏览者和浏览器更具亲和力。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形，从而对浏览者和浏览器更具亲和力。
　　2 网站设计
　　2.1 网站系统分析
　　艺术设计系是河南机电职业学院的一个职能部门，是教学管理和学生管理的一个基层组织。主要功能有教学计划的制定及运行管理、教学质量管理、师资队伍管理、教研科研管理、专业及课程建设管理、实训教学管理、学生管理。因此，该网页设计应为学校系列网站的设计，设计应从系部的职能进行分解制作，应能够包含以上全部功能。
　　2.2 网站总体设计
　　根据艺术系的功能进行网站的整体设计，主要包括各网页及新闻发布系统两大部分的设计，本文主要介绍网页部分的设计。网页主要包括系部主页、系部概况、名师介绍、专业设置、作品展示、学习园地六个页面的设计。艺术设计系的网站结构如图1所示。
　　2.3 网站详细设计
　　2.3.1 艺术部分设计（前期设计）
　　1）整体形象设计
　　整体形象设计包括Logo、导航条、字体及颜色等。为了主页上不缺少学校形象，Logo采用河南机电职业学院的现有Logo；采用黄白大小相间的字体来突出艺术设计系的特色和自身的个性；导航条采用与背景过渡自然，线条优美的细长条导航；背景采用具有艺术特色的方式介绍系部部分专业。
　　2）色彩设计
　　以学校的主色调（蓝色）为主，为了能使整个网站看上去更“干净”，加入了黄色和绿色进行搭配，这样能够达到在不脱离学校主色调的基础上突出自己系部特色的色调。
　　3）版式设计
　　依据学校系列网站的设计模式，既能突出重点部分（新闻），表示主题（Logo和系部名称），又具有快速进入其他部分的通道（导航条）
　　整个网页的设计原则为简单大方，不脱离整个学校主题，又能够表现出艺术设计系所独特的特色。艺术设计系主页及子页的设计如图2和图3所示。
　　2.3.2 技术部分设计（后期制作）
　　1）主页的设计
　　根据整个网站进行整体规划设计，为了避免CSS样式之间的重复，主页设计了两个CSS样式文档分别为layout.css和Home.css。layout.css中主要定义整个主页布局所用的类和样式，这里面的类和样式都是对背景、logo、字体所对应的div和样式进行定位及设置，相对比较简单，在这里不再详细介绍。Home.css中主要定义导航条所需的类和样式，导航条包括背景的div和样式设置、鼠标滑动样式、点击样式、字体样式等样式的设计，主要的div及样式代码如下。
　　#header .tabbar div.tabs{left:1px;position:absolute;top:60px;font-size:14px;font-weight:bold;
　　width: 598px;background-image: url(images/bar.gif);padding-left: 31px;float: left;}
　　#header .tabbar .tabs a{float:left;width:95px;height:24px;line-height:24px;padding-top:7px;
　　text- align:center;color:#FFFFFF;font-weight:lighter;font-size:18px;background:transparent;}
　　#header .tabbar .tabs a:hover{text-decoration:none;margin-left:-1px;padding-left:1px;
　　background-color: #fff;background-image: url(images/nav_hover_100x31.gif);background-repeat: no-repeat;}
　　#header .tabbar .tabs a.actived{font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;
　　background-color: #fff;background-image: url(images/nav_80x31.gif);background-repeat: no-repeat;}
　　#header .tabbar .tabs a.actived:hover{font-weight:bold;color:#fff;text-decoration:underline;
　　background-color: #fff;background-image: url(images/nav_hover_100x31.gif);background-repeat: no-repeat;}
　　
　　#header .tabbar .bg{position:absolute;left:197px;top:140px;width:594px;height:31px;z-index:-1;}
　　#header .tabbar .bg .nw{float:left;width:80px;height:31px;background-color: transparent;
　　background-image: url(images/nav_hover_100x31.jpg);background-repeat: no-repeat;}
　　#header .tabbar .bg .cen{float:left;width:80px;height:31px;background-color: transparent;
　　background-image: url(images/navlcenter_80x31.gif);background-repeat: no-repeat;}
　　#header .tabbar .bg .ne{float:left;width:80px;height:31px;background-color: transparent;
　　background-image: url(images/navright_80x31.gif);background-repeat: no-repeat;}
　　2）子页的设计
　　子页的网页设计是通过设计模板，再运用模板进行具体的网页的设计。以“作品展示”子页的div和样式表的设计为例进行介绍。作品展示子页主要包括每个作品div的定位及样式设计、鼠标滑动样式设计。具体实现的主要代码如下。
　　作品的div分别为apDiv1到apDiv13，鼠标滑动显示实现主要代码为：
　　onmouseover="MM_showHideLayers('apDi