网站前端设计 毕业论文 - 图文

图 3-15 网站标题LOGO

3.5.3 版式编排布局合理性

图 3-16 网站版式排版图

网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字，图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3-16所示：

图中的A区域是数字媒体技术系网站的大logo以及网站名称，能展现网站的主题。访问者第一眼就能看的出来网站的类别等。

B区域是网站的导航栏，导航的颜色基本上是青白色，能展现网站的大体内容。导航栏 跟顶端logo的颜色基本上一直用户浏览网页时不会产生视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。

C区域 是首页中的大图片，是浙江理工大学的全景图片，图片清晰拍摄角度广，色彩调整完美。现在正流行全景图片大大小小网站上都会用到全景图片。使用全景

21

图给人一种舒服的视觉感受。能够提升网站的美观程度。

D区域是教务信息区。 发表各种有关教务类的信息

E 区网站最新动态区域。 最近在系发生的最新鲜的新闻，消息等内容都在这里按时间循序显示。

F区域 中间区域的图片，为什么在网页中间放置图片呢？

是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来很乱没有主次层次的体现。让读者看起来无从下手的感觉。而且文字内容太多容易引起用户的反感。插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。

D区域 师资力量介绍，介绍老师及附上图片。 H区域 成果展示

J区域 底部logo 整个网站的底端。能起到调节整个网站的内容平衡。让网站设计的更加完美。

3.6 网站前台页面设计

数字媒体技术系网站主要包括：系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作等7个子页面。制作过程如下： 3.6.1 首页

网站制作过程：首先利用Photoshop制作了网站的首页效果图，大小为900px*1004px。在制作网页的过程中首先是在Dreamweaver中用布局画出整个网站的大体布局格式，主要是分了三栏，各个栏目有可以分多个小栏目，并且通过CSS样式来调表格以及图片，文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO，版权。导航条又包含系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作。

22

3.6.2 系内概况

图 3-17 系内概况

系内概况又分为3个2级菜单，本系概况，实验室介绍，师资介绍等。本系概况当中介绍数字媒体技术系的近期情况如图3-17所示。并以最新动态的形式展现出来。师资介绍方面介绍任课老师的基本资料，还附上照片，并把这个模块显示在首页的G区域。实验室介绍当中点击实验室介绍会进入实验室介绍页面。具体介绍实验设计建设状况等。 3.6.3 系内新闻

系内新闻分成3个2级菜单，行业资讯，院系动态，系内新闻。制作过程中采用的制作方法和调用的模块内容跟上一个差不多。可是连接不同的数据表。所体现的内容不同。

3.7 本章小结

本章主要介绍了数字媒体技术系网站的具体布局，具体结构。也说明了设计前端的工作流程，还讲述了界面UI设计，交互设计中的一些理理念设计思想，并用图片的形式展现了设计以后的效果图。

第4章 主要功能的实现

4.1 界面设计

设置公开地联系方式；设置网站整体信息与用户为一体；设置完善地个性化

23

地会员管理与交互系统。

完善的网站内容，网站内容下载系统。网站的整体颜色：灰白色为导航颜色；主体颜色：黑色色；字体：宋体；行距：150%。

网站统一顶部为导航条 站标，系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作 。

网站上中部：网站图片结合；位置导航。

网站中部：网站信息；站点数据；网站导航条；图文信息。 网站底部：网站/版面制作；版权信息。

4.2 具体设计文档

内容和功能设计

这个校园网站主要实现新闻，信息等功能，目标用户主要是Internet的在校学生。先明确这个校园网站提供的主要功能：

(1) 管理员登录系统： 管理网站内容，新闻动态等 (2) 网上教学系统： 提供给学生一些必要的电子书供下载 (3) 教学科研专区： 提供学院教师在个方面的成果及新闻的功能

(4) 新闻公告专区： 提供有关学院的公告通知，计算机方面的最新资讯。

4.3 前台新闻文摘显示

可以根据网站的需要，进行各种方式的插入，自动更新。如显示栏目导航，显示某栏目的最新N条新闻等。 使用管理系统制作动态网页时，可在需要的地方插入相应的代码，即可以多种形式显示新闻 文章的栏目或内容。例如：

一级栏目列表，二级栏目列表，栏目导航列表，栏目的最新新闻(文章)显示条数，某一栏目的热门文章可任意调整。该系统也可经后继开发，使之生成JS代码，在一个主机上维护新闻文章，在其他静态网页中插入代码后显示相应的新闻文章。 4.3.1 网站装饰风格

采用了灰白色为主导航颜色，首页中运用最新更新图片，以及文字交错排版，使整个网站看上去符合跳动的风格。

24