基于DIV+CSS技术的网站界面毕业论文
目录
摘要 Abstract
第一章 绪论 ............................................................................................ 1
1.1 课题背景 .............................................................................................................................. 1 1.2 研究目的和意义 ................................................................................................................... 1 1.3国内外研究现状 .................................................................................................................... 2 1.4 本文的主要研究内容 .......................................................................................................... 5
第二章 关键技术分析 ............................................................................ 6
2.1 DIV+CSS简介 .................................................................................................................... 6 2.2 DIV+CSS基本元素 ............................................................................................................ 7 2.3盒模型 .................................................................................................. 错误！未定义书签。 2.4分形设计理论 ...................................................................................... 错误！未定义书签。 2.5 DIV+CSS设计优势 ............................................................................................................. 21
第三章 基于DIV+CSS技术的网站界面设计 ................................... 22
3.1DIV+CSS项目设计实例 ...................................................................................................... 23
第四章 网页实际设计与优化 .............................................................. 40
4.1 色彩 ..................................................................................................................................... 40 4.2 文字 ..................................................................................................................................... 44 4.3 布局 ..................................................................................................................................... 47
第五章 总结与展望 .............................................................................. 49
5.1 心得与体会 ........................................................................................................................ 49 5.2结束语 .................................................................................................................................. 49 5.3致谢 ...................................................................................................................................... 50
0
参考文献 ................................................................................................ 51
第一章 绪论
1.1 课题背景
随着网站内容的不断丰富,网页上的图像、动画、字幕以及其他控件也不断地增加, 这就提出了一个新的问题,如何实现这些元素在网页中的准确定位。传统的网页制作工具都已经显得力不从心了。随着互联网和移动通信技术的快速发展，网页作为信息的主要载体，承担着将各类信息展现和传达的任务 网页设计的使命是直接有效地传达信息给用户 现在网页用户群体复杂，层次多样，对网页的好用性要求越来越高，要求一个网页在很好的需求战略，功能规格，信息架构的基础上更多的关注交互细节设计
1996年底, CSS应运而生,它很好地解决了这个问题。要对网页元素进行准确定位,要想做出精美的网页就一定要用到CSS。
CSS( CascadingStylesheets, 层叠样式表)是一种制作网页的新技术, 它的全称是级联样式表, 即Cascading StyleSheets的缩写, 又称之为风格样式表单。现已成为网页设计中必不可少的工具之一。
1.2 研究目的和意义
过去的网页通常缺少动感,而且在网页内容的排版布局上也有很多困难, 如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试, 才能驾驭好这些信息的排版, 其过程是十分漫长和痛苦的。样式表就是在这种需求下诞生的。
探究DIV+CSS网页设计思想，可以在当今这个互联网技术飞速发展、用户需求的局，合理的安排呈现的数据信息，在大数据量的前提下，让用户更加有效、快捷地信息量成倍增加并越来越看重用户体验的时代中，设计人员更好的去设计网页布获取信息，浏览网页保持愉快的体验感觉；在开发庞大的代码量的同时，又可以很方便地后期维护，不会出现‘牵一发而动全身’的情况；也可以严格的划分不同功能的代码模块。
总之，基于DIV+CSS技术的网页制作技术，会对web时代的设计思想产生
1
不可估量的影响力。
1.3国内外网页设计现状
正当网络作为第四媒体，逐渐走向成熟和完善的时候，网页设计业也已逐步脱离了传统广告设计的范畴，形成特殊而独立的体系。同时表明了，设计人员对网站视觉审美以及网站功能应用等多个方面的认知达到了新的高度。
抛去媒体这层外衣，网站是信息的储存空间。请思考一下：从理论上来说，套用相同的模板，只要保证浏览者能够获取信息，网站的功能就实现了。如同96年以前的网站几乎是纯文字的页面，没有什么所谓“设计”的概念可言。而从实际情况上看，至今的网络上依旧到处充斥着那种仅仅是通过信息堆砌而成的网站。那么，设计师们到底是为了什么而工作呢？不了解网页美术的意义所在，设计人员如何能够正确的面对创作。 面对激烈竞争的网络环境
众所周知，“优者生存”是事物繁衍发展的自然规律。随着网络技术的更新换代，以及计算机美术的可达到的范围越来越广，无法继续满足于：只有几篇文字和版式一模一样的网站。
不可否认，互联网的共享环境给信息储备和更新带来了很大的冲击，现今已不是十年前数得出来的几百个网站，而是无法估量的上千万个网站。主题相同或雷同的网站多到无数，想要从千百个相同主题的网站中脱颖而出，确实不易。互联网的全球共享信息环境，能够使地球另一端的竞争者与设计人员站在同一条跑道上，竞争加剧了，网站的视觉设计也就变成了竞争环节中的一大利器。 面对信息结构的日益复杂化
网站不是发布几条消息，或者放上几个广告那么简单的载体。它可能是一个大型的信息资料库，也可能是琳琅满目的信息转盘，信息的重要性决定了信息的摆放顺序及浏览者的使用频率。
由于信息结构变得越来越复杂，一个信息空间内部结构如何设计、信息类别多如何管理、异类信息如何分主次、同类信息如何分类分层，以及单一页面上的信息结构安排等等诸多问题。“页面上有文字就可以”这一原则已经无法解决现今的互联网的网站信息情况了。设计人员必须依据信息结构去规划网站设计，科学的进行信息管理。在不影响信息下载的同时，提供给浏览者一种美好的视觉环境，帮助他们科学且快速的查阅信息。
信息的传播内涵与外沿
网民们是为了不同的目的登陆相关的站点上查询信息的。试想一下，一个需
2
要阅读娱乐新闻的人是不会到体育网站上去寻找的，而一个需要收集出国政策的人更是不会到游戏网站上去搜索的，这是有关信息类别的不同选择。
信息不同，网站的气氛亦会不同。当浏览者进入娱乐网站中，却感觉如同进入体育竞技场，那么这个网站所传递出的信息概念则完全错误，浏览者对网站的设计及网站本身都不会给予认可。也就是说，网站的信息内容有着特殊的传播内涵与外沿。弄错了游戏规则，可能会损失大量的浏览者，同等于失去了成功的机会。
网络承载的使命更多
网络不仅仅是信息的储存空间，它更是一种新形式的电子信息传播方式，区别于电波、纸张、电视设计人员称之为第四媒体（或新媒体）。任何以个人、团体、公司等不同名义都可以建设属于自己的网站，这些网站有别于综合性门户或资讯类站点，它们并不依靠大量信息吸引访问者，而网站是他们创造商业价值的间接手段。
企业需要建立形象网站，把VIS系统导入到网站设计中，这无形是延伸了形象传播的宽度和深度。通过网络，企业信息和相关资料被广泛传播给全球客户，无法估计的各种机遇层出不穷。更有甚者，一个非常大气而庄重的网站可以给一个仅有几人的贸易公司带来数万生意。不同的企业，有着不同的企业文化，跟随所要传播的信息概念，网站设计的形式和气氛绝对不能相同。如果把可口可乐公司的网站，设计如同劳力士手表网站一样时，谁能想象这会造成多么大的经济损失？
视觉审美关系到网站生存与发展
网站作为新媒体的媒介主体，具有更多与传统媒体不同的特征和特性。这些特征决定了网页设计的形式和使命，它的意义将与传统媒介的“设计”截然不同。网页设计是网站的视觉内容部分，它是浏览者进入站点内第一时间接收到的视觉信息。它可以给浏览者一个概念，一种印象，这种印象有时候是致命的。
NWP ( http://www.newwebpick.com )是全球最权威的网络在线创意与潮流杂志，它的第二版的设计形式并不新颖，以至于，第一次进入NWP V2首页时（图1），认为它是一个无关紧要的网站，便没有进入内页浏览，而且直接关闭了浏览器。当V3 发布后（图2），无意中进入时，还以为是一个新发布的优秀网站，并在其内停留了很久。其实就网站信息内容来说，V2 与V3之间并没有太大变化，直到V4才有了信息结构的突破性扩充。但多数人认识NWP是却是从V3版本开始的，而NWP也是从V3开始奠基了它作为国际知名品网站点的地位，同时才拥有了V4版向综合性设计门户迈进的起点和基点。
3
NWP V2
图1-1 . NWP V2首页 设计单调，缺乏美感
NWP V3
图1-2. NWP V3首页 轻快动感，风格独特
在如此激烈的竞争之中，一个可用性强的、独特创新的网站设计成为网站长期发展的必要条件之一。
4
基于DIV+CSS技术的网站界面毕业论文
