计算机专业学年论文

成绩：

学年论文

题目：

学院：数学与计算机科学学院专业：计算机科学与技术班级：一班

学号：

姓名：

指导教师：

年月日

江西科技师范大学学年论文

校园资讯泛网

DIV+CSS网站设计

计算机科学与技术(1)班

指导老师:

摘要相较于网站兴起之时的网站建设，大篇幅的都是表格的应用，然而在当下环境中的网站，单表格的网站建设已经满足不了浏览者对网站需求了。DIV+CSS的网站设计思路是现在最流行的技术。在使用CSS样式的时候，网页的文本属性和格式由CSS来控制的话可以使得网页比较美观。最初的网页设计是由HTML标记来定义的，但是这些标记不能满足更多的文档样式需求。所以在以后的标准更新的时候，样式的使用慢慢被大家所注意。

关键词：校园；资讯；分享

引言对于网站的建设，主题选择是考验网站生存性的一大要素，我们的校园资讯网站立足于当下的校园生活，力求还原一个真实的校园。并且还要建立一个可以引导大家多角度的认识我们的校园。

1 DIV+CSS

1.1 简介

DIV+CSS是网站标准中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式，可实现网页页面内容与表现相分离。XHTML 基于可扩展标记语言，是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

1.2 使用心得

简单地说，div 用于搭建网站结构（框架）、css用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎捕获。

2 总体设计

2.1 网站设计思想

将校园信息规模化，构建主题为学生用户展示校园。在收集网站建设资料的过程中，渐渐的发现网站的更新速度实在是很快，在如今的网站布局上面，色彩搭配问题，还有使用过的特效都已经达到了令人叹为观止的地步，所以我在设计网站的同时也参考色彩设计，平面设计原理，力求能够将自己的思路尽可能的表达出来。现在校园生活虽然平凡，但是这是真实的，将真实世界与虚拟的网络世界挂钩，将两者的信息联系到一块，并且整合。网站实为信息的分享，三十我希望通过网站的建设能够做出一些关注校园文化，现象的主题性研究，其实网站的内容页可以使很内涵的，我立足将深思的校园空间发布到网络媒体上，让更多的人去讨论，去实现自己对校园生活的多角度认识，这才是网站的中心所在。

2.2网站功能分析

将网站划分为三大板块：新闻，影像，活动。我们将这三板块放在首页的最突出的文字区域，方便同学们阅读。之所以将信息划分为三个板块是因为在现有的信息中，以此三种形式的信息最为明显，其次我们可以将这些信息与我们的网站的主题互相呼应，分享这些信息。我们的资讯泛网将信息用这三种板块形式发布，使得整个网站的后台管理也变得简洁明了。

2.3网页设计

banner也好，导航也好。我们都选择的是最简约的形式。颜色的搭配也是灰色为主，陪以一些蓝色使得网站整体色感不会那么弱。其实我们是特意营造这种简约风格的界面，这样的界面能够使人产生思考空间。在现在用户设计体感中，用户思考空间尤为重要，它决定了浏览者是否是只看一眼还是会对其中的信息产生兴趣，继而这些信息对他有作用，或者能够反馈一些其他方面的信息给我们网站，这就是传统意义上面的交互式体感设计。我们网站注重这种交互，所以才会提供这种简约风格的界面，其实我们的网站设计体感不仅仅凸显在这里。我们对整个网站建设的网页都赋予了这种体感设计。

Flash展示

网站首页巨型的flash也是我们网站的一大特色，我们舍弃小型框架，因为flash本来就是一种特型信息的展示，肯定会吸引更多的眼球，我们何不使这种抓人眼球的东西扩大以达到

更好的目标呢。巨型图片展示，附上专题式的文字说明，网站首页的核心构成。

三大板块

对于板块的选择，三大板块区域性更强。我们网站建设初期就很明确的制定了信息的分类，

图片，新闻，活动。所以三大板块的构思就这么得来了。

导航设计

导航使用JS特效，简约时尚，在此处设置的JS特效在很大程度上面节约了网页空间。样式结构的第一次定点使用。同时也是抛弃使用前代导航的单一下拉，整个下拉表整齐时尚。

图片展示

图片展示区域也是简约风格的再现，同时这种样式结构也是整个网站设计的精华体现。之前一直强调的DIV+CSS的美观性可以从此处得到最好的体现。我们没有使用任何一张单纯的网页模式，单纯的样式结构不仅简单明了的展示了图片，并且是以一种不同于以往的形式。在每张图片的下方我们可以给出该张图片信息或者评论，可以说这种样式具备了美观及功能性。

文章中心

文章区域是仿博客的样式构建，对于大家都喜爱的阅读形式，为什么要浪费。左右样式独立，一个展示的是文章的标题，另一个则是文章点击率的分类。

后台界面

后台的设置因为其功能性优先性，框架的建设比较重要。能够一目了然的设置信息才是后台应该有的样子。并且还要在同一网页中实现三信息分区域的跳转，所以该网页也不能设置成单一样式，必须要有嵌套模式才能使得不同信息管理界面统一在单独网页中。

网站设计思路是将校园信息资讯分享的概念贯穿于整个网站，使得三类信息板块能够将网站中心表达出来，并且在主题的表达上面能够更加完整。网站内容会比以前更加集中。在我们网站初期建设的时候有考虑过网站的运行问题，后期问题也是不可忽视的一块。DIV+css样式的网站设计结构在现下正流行，HTML5时代的带来还需技术的更新，随着移动设备诸如智能手机，平板电脑，超级本等设备的不断更新，我们将会在后期再将网站进行完善，使其能够适合这些设备的需求。

该网站由于使用的是样式结构，所以在代码方面以及美工设计上面可以方便的更改，并且在代码方面的作用尤为明显，它减少了我在设计网页时代码的重复。代码的精简可以使代码的操作变得极易上手。

结论通过这次比较完整的网站设计，我们摆脱了单纯的理论知识学习状态，和实际设计的结合锻炼了我的综合运用所学的专业基础知识，解决实际工程问题的能力，同时也提高我查阅文献资料、设计手册、设计规范等其他专业能力水平，而且通过对整体的掌控，对局部的取舍，以及对细节的斟酌处理，都使我的能力得到了锻炼，经验得到了丰富，并且意志品质力，抗压能力及耐力也都得到了不同程度的提升。这是我们都希望看到的也正是我们进行设计的目的所在。

参考文献：

图书著作文献：

王可《设计色彩》，上海人民美术出版社2005.8第一版

秦鹏《HTMLDREAMWEAVER8网页制作》中国青年电子出版社2007.4第一版