NWP V2
图1-1 . NWP V2首页 设计单调，缺乏美感
NWP V3
图1-2. NWP V3首页 轻快动感，风格独特
在如此激烈的竞争之中，一个可用性强的、独特创新的网站设计成为网站长期发展的必要条件之一。
4
回顾网页设计发展历史，不论对比几年前设计人员进步多少，现今仍处在网站设计业的初期。行业的标准、客户的观点以及审美的准则都不尽成熟。设计人员仅仅看到了这座高山的一部分轮廓，实际上设计人员要向上攀岩、摸索前行的路还很远。
依旧还是设计师，但是能够在满足客户的目的的同时，确保作品的艺术性和完整性。假如又站在市场的角度去看待网站设计又当如何呢？
市场就是客户的客户，终端客户接收了网站传递给他们的信息概念：看到暖色，他们会感觉这个企业是很有亲和力的，容易沟通的；看到大量的矢量风格的网站插图时，他们会感觉这个企业是潮流派的、有个性的、有活力的。作为网站真正的使用者，他们比任何人都知道自己需要什么。
1.4 本文的主要研究内容
首先回顾DIV+CSS技术的发展过程，分析关键技术体系，介绍CSS语法，选择器、容器的使用方法和布局常见的方式等内容。
然后通过对比传统的Web网页设计布局，从用户交互、代码可用，设计思想等方面阐述DIV+CSS技术的优缺点，如何在实际设计中灵活地应用CSS设计模式。
接下来主要介绍2种CSS设计思想:盒子模型和分型设计模型。分别从设计模式，web设计的优势,实际中的应用3个方面来描述。
最后针对于当前web设计中的网页设计缺陷，以web设计最优的用户体验为基准，通过实例，结合CSS设计思想分析问题，探究解决方案，优化网页设计，总结一些属于自己的页面设计的体会。
第二章 关键技术分析
2.1 DIV+CSS简介 2.1.1 DIV元素
DIV元素是用来为Html文档内大块(block-level)的内容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块，DIV的起始标签和结束标签
5
之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制。
2.1.2 CSS简介
CSS(Cascading Style Sheets,层叠样式表)是一种制作网页的新技术，他的全称是级联样式表，即Cascading Style Sheets的缩写，又称之为风格样式表单。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，使用CSS可以将格式和结构分离,能更好地控制页面布局，从而制作体积更小、下载更快的网页。
2.2DIV+CSS 基本元素 2.2.1.基本格式
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector { property: value}（选择符 { 属性：值}）
选择符是可以是多种形式，一般是你要定义样式的html标记，例如body、p、table等，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开
body { color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;} 下面的示意图展示了上面这段代码的结构：
6
图2-1 h1选择器
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p { font-family: \（定义段落字体为sans serif）
如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开： p { text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
为了使你定义的样式表方便阅读，你可以采用分行的书写格式： p {
text-align: center; color: black;
font-family: arial }
（段落排列居中，段落中文字为黑色，字体是arial）
2.2.2.选择符组
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色） p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字） 效果完全等效于： p { font-size: 9pt } table { font-size: 9pt }
2.2.3.类选择符
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，
7
相关推荐：
loading