《基于DIVCSS技术的网站界面毕业论文》由会员分享，可在线阅读，更多相关《基于DIVCSS技术的网站界面毕业论文（54页珍藏版）》请在金锄头文库上搜索。
1、基于DIV+CSS技术的界面毕业论文目录摘要Abstract第一章 绪论11.1 课题背景11.2 研究目的和意义11.3 国外研究现状21.4 本文的主要研究容5第二章 关键技术分析62.1 DIV+CSS简介62.2 DIV+CSS基本元素72.3 盒模型92.4 分形设计理论142.5 DIV+CSS设计优势21第三章 基于DIV+CSS技术的界面设计223.1 DIV+CSS项目设计实例23第四章 网页实际设计与优化404.1 色彩404.2 文字444.3 布局47第五章 总结与展望495.1 心得与体会495.2 结束语495.3 致谢50参考文献51第一章 绪论1.1 课题背景随
2、着容的不断丰富,网页上的图像、动画、字幕以及其他控件也不断地增加, 这就提出了一个新的问题,如何实现这些元素在网页中的准确定位。传统的网页制作工具都已经显得力不从心了。随着互联网和移动通信技术的快速发展，网页作为信息的主要载体，承担着将各类信息展现和传达的任务 网页设计的使命是直接有效地传达信息给用户 现在网页用户群体复杂，层次多样，对网页的好用性要求越来越高，要求一个网页在很好的需求战略，功能规格，信息架构的基础上更多的关注交互细节设计1996年底, CSS应运而生,它很好地解决了这个问题。要对网页元素进行准确定位,要想做出精美的网页就一定要用到CSS。CSS( CascadingStyle
3、sheets, 层叠样式表)是一种制作网页的新技术, 它的全称是级联样式表, 即Cascading StyleSheets的缩写, 又称之为风格样式表单。现已成为网页设计中必不可少的工具之一。1.2 研究目的和意义过去的网页通常缺少动感,而且在网页容的排版布局上也有很多困难, 如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试, 才能驾驭好这些信息的排版, 其过程是十分漫长和痛苦的。样式表就是在这种需求下诞生的。探究DIV+CSS网页设计思想，可以在当今这个互联网技术飞速发展、用户需求的局，合理的安排呈现的数据信息，在大
4、数据量的前提下，让用户更加有效、快捷地信息量成倍增加并越来越看重用户体验的时代中，设计人员更好的去设计网页布获取信息，浏览网页保持愉快的体验感觉；在开发庞大的代码量的同时，又可以很方便地后期维护，不会出现牵一发而动全身的情况；也可以严格的划分不同功能的代码模块。总之，基于DIV+CSS技术的网页制作技术，会对web时代的设计思想产生不可估量的影响力。1.3 国外网页设计现状正当网络作为第四媒体，逐渐走向成熟和完善的时候，网页设计业也已逐步脱离了传统广告设计的畴，形成特殊而独立的体系。同时表明了，设计人员对视觉审美以及功能应用等多个方面的认知达到了新的高度。抛去媒体这层外衣，是信息的储存空间。请
5、思考一下：从理论上来说，套用相同的模板，只要保证浏览者能够获取信息，的功能就实现了。如同96年以前的几乎是纯文字的页面，没有什么所谓“设计”的概念可言。而从实际情况上看，至今的网络上依旧到处充斥着那种仅仅是通过信息堆砌而成的。那么，设计师们到底是为了什么而工作呢？不了解网页美术的意义所在，设计人员如何能够正确的面对创作。面对激烈竞争的网络环境众所周知，“优者生存”是事物繁衍发展的自然规律。随着网络技术的更新换代，以及计算机美术的可达到的围越来越广，无法继续满足于：只有几篇文字和版式一模一样的。不可否认，互联网的共享环境给信息储备和更新带来了很大的冲击，现今已不是十年前数得出来的几百个，而是无法
6、估量的上千万个。主题相同或雷同的多到无数，想要从千百个相同主题的中脱颖而出，确实不易。互联网的全球共享信息环境，能够使地球另一端的竞争者与设计人员站在同一条跑道上，竞争加剧了，的视觉设计也就变成了竞争环节中的一大利器。面对信息结构的日益复杂化不是发布几条消息，或者放上几个广告那么简单的载体。它可能是一个大型的信息资料库，也可能是琳琅满目的信息转盘，信息的重要性决定了信息的摆放顺序及浏览者的使用频率。由于信息结构变得越来越复杂，一个信息空间部结构如何设计、信息类别多如何管理、异类信息如何分主次、同类信息如何分类分层，以及单一页面上的信息结构安排等等诸多问题。“页面上有文字就可以”这一原则已经无法
7、解决现今的互联网的信息情况了。设计人员必须依据信息结构去规划设计，科学的进行信息管理。在不影响信息下载的同时，提供给浏览者一种美好的视觉环境，帮助他们科学且快速的查阅信息。信息的传播涵与外沿网民们是为了不同的目的登陆相关的站点上查询信息的。试想一下，一个需要阅读娱乐新闻的人是不会到体育上去寻找的，而一个需要收集出国政策的人更是不会到游戏上去搜索的，这是有关信息类别的不同选择。信息不同，的气氛亦会不同。当浏览者进入娱乐中，却感觉如同进入体育竞技场，那么这个所传递出的信息概念则完全错误，浏览者对的设计及本身都不会给予认可。也就是说，的信息容有着特殊的传播涵与外沿。弄错了游戏规则，可能会损失大量的浏
8、览者，同等于失去了成功的机会。网络承载的使命更多网络不仅仅是信息的储存空间，它更是一种新形式的电子信息传播方式，区别于电波、纸、电视设计人员称之为第四媒体（或新媒体）。任何以个人、团体、公司等不同名义都可以建设属于自己的，这些有别于综合性门户或资讯类站点，它们并不依靠大量信息吸引访问者，而是他们创造商业价值的间接手段。企业需要建立形象，把VIS系统导入到设计中，这无形是延伸了形象传播的宽度和深度。通过网络，企业信息和相关资料被广泛传播给全球客户，无法估计的各种机遇层出不穷。更有甚者，一个非常大气而庄重的可以给一个仅有几人的贸易公司带来数万生意。不同的企业，有着不同的企业文化，跟随所要传播的信息
9、概念，设计的形式和气氛绝对不能相同。如果把可口可乐公司的，设计如同劳力士手表一样时，谁能想象这会造成多么大的经济损失？视觉审美关系到生存与发展作为新媒体的媒介主体，具有更多与传统媒体不同的特征和特性。这些特征决定了网页设计的形式和使命，它的意义将与传统媒介的“设计”截然不同。网页设计是的视觉容部分，它是浏览者进入站点第一时间接收到的视觉信息。它可以给浏览者一个概念，一种印象，这种印象有时候是致命的。NWP ( .newwebpick. )是全球最权威的网络在线创意与潮流杂志，它的第二版的设计形式并不新颖，以至于，第一次进入NWP V2首页时（图1），认为它是一个无关紧要的，便没有进入页浏览，而
10、且直接关闭了浏览器。当V3 发布后（图2），无意中进入时，还以为是一个新发布的优秀，并在其停留了很久。其实就信息容来说，V2 与V3之间并没有太大变化，直到V4才有了信息结构的突破性扩充。但多数人认识NWP是却是从V3版本开始的，而NWP也是从V3开始奠基了它作为国际知名品点的地位，同时才拥有了V4版向综合性设计门户迈进的起点和基点。NWP V2图1-1 . NWP V2首页 设计单调，缺乏美感 NWP V3图1-2. NWP V3首页 轻快动感，风格独特在如此激烈的竞争之中，一个可用性强的、独特创新的设计成为长期发展的必要条件之一。回顾网页设计发展历史，不论对比几年前设计人员进步多少，现今仍
11、处在设计业的初期。行业的标准、客户的观点以及审美的准则都不尽成熟。设计人员仅仅看到了这座高山的一部分轮廓，实际上设计人员要向上攀岩、摸索前行的路还很远。依旧还是设计师，但是能够在满足客户的目的的同时，确保作品的艺术性和完整性。假如又站在市场的角度去看待设计又当如何呢？市场就是客户的客户，终端客户接收了传递给他们的信息概念：看到暖色，他们会感觉这个企业是很有亲和力的，容易沟通的；看到大量的矢量风格的插图时，他们会感觉这个企业是潮流派的、有个性的、有活力的。作为真正的使用者，他们比任何人都知道自己需要什么。1.4 本文的主要研究容首先回顾DIV+CSS技术的发展过程，分析关键技术体系，介绍CSS语
12、法，选择器、容器的使用方法和布局常见的方式等容。然后通过对比传统的Web网页设计布局，从用户交互、代码可用，设计思想等方面阐述DIV+CSS技术的优缺点，如何在实际设计中灵活地应用CSS设计模式。接下来主要介绍2种CSS设计思想:盒子模型和分型设计模型。分别从设计模式，web设计的优势,实际中的应用3个方面来描述。最后针对于当前web设计中的网页设计缺陷，以web设计最优的用户体验为基准，通过实例，结合CSS设计思想分析问题，探究解决方案，优化网页设计，总结一些属于自己的页面设计的体会。第二章 关键技术分析2.1 DIV+CSS简介2.1.1 DIV元素DIV元素是用来为Html文档大块(bl
13、ock-level)的容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块，DIV的起始标签和结束标签之间的所有容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制。 2.1.2 CSS简介CSS(Cascading Style Sheets,层叠样式表)是一种制作网页的新技术，他的全称是级联样式表，即Cascading Style Sheets的缩写，又称之为风格样式表单。是用于控制网页样式并允许将样式信息与网页容分离的一种标记性语言，使用CSS可以将格式和结构分离,能更好地控制页面布局，从而制作体积更小、下载更快的网页。2.2 DIV+CSS 基本元素2.2.1
14、.基本格式CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property: value（选择符 属性：值）选择符是可以是多种形式，一般是你要定义样式的html标记，例如body、p、table等，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开body color: black选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。下面这行代码的作用是将 h1 元素的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个
15、例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。h1 color:red; font-size:14px;下面的示意图展示了上面这段代码的结构：图2-1 h1选择器如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p font-family: sans serif（定义段落字体为sans serif）如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开：p text-align: center; color: red（段落居中排列；并且段落中的文字为红色） 为了使你定义的样式表方便阅读，你可以采用分行的书写格式：ptext-align: center;color: black;font-family: arial （段落排列居中，段落中文字为黑色，字体是arial）2.2.2.选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 color: green （这
