一、实例展示
查看原图
图2-1
某高校学生会网效果图 |
查看原图
图2-2计算机工程系学生会网效果图 |
问题1：请分析这两个网站有什么共同点？
有什么不同点？
问题2：两个网站各有什么特色？从页面布局、网页配色、资源内容等方面考虑，你比较喜欢哪个？
问题3：怎样做一个符合组织、部门性质的网站？
二、案例分析
总体来看，上面两个网页都是一般高校学生会的信息发布平台，均应当具有“高校”“学生会”“信息网站”的特征。下面我们就从网页的总体设计简单分析这两个案例。
1.首先我们来看第一个案例：
网站是白色的，且为以白色为主色调，页面颜色过于浅淡，不怎么符合其“学生会”的特征，更没有大学校园的气息，不能体现出那种大学激情、阳光活力的一面。网页头部与底部版权条设计也很欠缺，没有意象与风格。
网站的整体布局风格，显得十分杂乱，排版及样式规范略差，网页模块分布不够明确，甚至出现大多数模块与网站主题脱关系，而失去网站效应，无功能模块的主次之分，导致网站主题丢失。
2.案例二分析：
网站主色调为红色与白色。其中红色为主色调。一般而言，红色实用于政府、机关、企事业单位，用于“学生会”这样一个学生群团组织的网站，能够突出“学生会”的群团组织性、严肃性与大学校园活力、激情、阳光所在。
从该案例的导航与栏目设置来看：学生会简介、机构设置、规章制度、通知公告、新闻动态、校园活动、专题栏目、先进表彰等等，均能抓住“学生会”网站的主题特征，网站主体中“新闻动态栏目”套用轮换图片新闻，增强网页动感；“投票调查”与“留言投递”栏目，给人以互动的感官。
再看网站头部：结合FLASH动画特效，简洁布而不失大方，单一而不脱离主题。标识“服务同学，锻炼自我”等上进口号、标语，直接体现网站主题与网站思想。使人进站第一眼就能感知“学生会”的本质所在，给人以亲切和温馨。
网站页面布局明了，操作方便，简介大方。网页两侧设“浮动图片”，右侧设“信息检索”与“友情链接”等模块更是为网页总体效果增色不少。
三、“计算机工程系学生会网站”实例制作
接下来我们一起来制作一下这个漂亮网站的主页。
1、界面制作：
网页主要分为三大模块：网站头部、网站导航、网站主体、网站尾部，如图2-3
1）网站头部：运用渐变实现背景阴影图片效果，并适当将其色调调深，从而不破坏网站总体色调效果（红色），导入学校图标，添加相应文字，效果如下图2-4所示：
2）网站导航制作：运用两个半形红色色块过渡效果。如下图2-5所示：
3）网站主体制作：网站主体区域都是同一种效果，这里就举出一个模块。运用圆角矩形、选框、移动等工具，将颜色色差由红到深红，使其具有过渡效果与立体感。效果如下图2-6所示：
4）网站尾部：同网站主体设计方法，在此只有红色两种色块，并且与头部形成对应（注意：色块方向相反）。如下图2-7所示：
2.切割整合网页
注意：切图时应尽可能考虑到后期网站开发及编码实现的方便性与操作性。
3.Dreamweaver排版
1）表格排版
用表格（Table）进行页面的排版，因为在界面中，有的部分可以只作为图片，但有的部分需网站显示内容，因而作为背景图片，并对表格的大小（宽、高）进行设定，方便后面网站的代码实现。例如：
2）删除多余图片，并设定该单元格大小，将删除图片设为该表格的背景图片。
【常见错误】
1、网站的色彩太过浅淡，没有抓住网站的性质、风格。
2、网页模块设置不能很好地表现网站的主题。
3、板块布局凌乱，无主次之分，甚至“偏题”。
4、互动模块设计欠佳，无互动性。
5、适当应用动画等特效，增强网页动感。
【建站素材】
【模仿练习】
模仿本实例设计制作机电工程系“学生会”网站首页。
|
