1.2 网页设计的前世今生

1.2.1 诞生——第一个网站

第一个网站诞生于1991年，它由“互联网之父”——蒂姆·伯纳斯·李（Tim Berners-Lee）建立，它的主要功能是向人们解释什么是万维网和如何创建网页等。同时，蒂姆·伯纳斯·李也在这个网站中列举了其他网站，原始网址现在已经无法访问，但在1993年，该网站的副本又被重新创建，如图1-3所示。

由于技术水平限制，这个年代的网页基本以文本格式为主，常用标签包括<h1>、<a>、<p>等，尽管样式上没有什么美感，但这却代表了人类在科技领域的全新尝试，如图1-4所示。

1994年，同样由蒂姆·伯纳斯·李创立的万维网联盟（W3C理事会）（他也曾任万维网联盟主任）盛誉颇高，是国际上的标准化组织，也是Web技术领域的权威机构，主要负责制定Web标准，而目前我们所看到的网页都是基于这个标准来设计的。在学习网页设计时，我们可以通过万维网联盟网站上的教程来了解相关信息，并且，这些教程全部都是免费的，如图1-5所示。

1.2.2 探索——表格布局

表格，英文名称table，简单的表格由table元素以及一个或多个tr、th或td元素组成，如图1-6所示。其中，tr用来定义表格行，th用来定义元表头，td用来定义表格单元。

表格最初是为了显示表格化数据而生的，后来被许多设计师用来布局形式复杂的网页，相比文本的网页设计来说，表格布局更好地表现了网页的组织结构，使网页在视觉上有了明确的层级关系。随着互联网技术的进步，设计师们开始利用切片和表格的组合，创造出许多比以往的效果更加出众的网页作品，表格布局在DIV（全称DIVision）布局出现之前，一直是网页设计的主流。如今绝大多数的网页设计师已经不再用它来进行网页布局，但这并不代表表格已经毫无作用，事实上，目前许多网页上的数据展示设计仍旧使用表格布局，因而table这一元素又恢复了它最初的作用。

这个时期的网页设计已经告别单调，许多图片通过“切片”技术被穿插在网页之中使用，使网页变得丰富多彩，这也极大地提高了网页的观赏性，如图1-7和图1-8所示。

类似苹果公司的这种侧边栏导航布局，在目前的网页设计中，尤其是针对电子商务类的设计上尤为常见，如淘宝网、京东等主流电子商务网站的设计，如图1-9和图1-10所示。如此，设计师可以用色彩来明确用户的视觉重心，并突出一些重要功能，在用户的视觉浏览路线上起到了良好的导向作用。

1.2.3 发展——Flash的“崛起”

Flash的前身是Future Splash，后更名为Flash，它是交互式矢量图和Web动画的标准。

在Flash出现之前，想要利用HTML实现复杂的视觉效果是十分困难的事情，而在Flash出现之后，设计师们通过Flash可以满足各种新颖的网页布局、网页交互甚至是网页动效制作的需要。不过，由于Flash在运行过程中需要消耗大量的内存，且在加载时对网速的要求较高，使它无法在网页设计领域占据主流，但现今仍有一些网站采用Flash来实现动态效果，如图1-11和图1-12所示。

在这个时期，设计师们开始越来越重视排版在网页设计中的作用，此时设计师可以通过不同的排版方式，在网页布局上做进一步优化，使功能模块和文本的主次关系变得更加明确，这非常有利于用户体验的提升，如图1-13和图1-14所示。

1.2.4 渐入佳境——DIV与CSS的诞生

DIV（全称DIVision）：层叠样式表中的定位技术，用来为HTML内的内容提供结构、背景的元素。

CSS（全称Cascading Style Sheets）：用来表现HTML或XML等文件样式的计算机语言。

在网页设计中，DIV的作用主要是定位层叠样式表中的单元位置和层次。使用DIV布局的网页能够极大地简化网页中的代码。对于搜索引擎来说，这种技术相比表格布局更容易抓取到页面中的信息，且DIV布局在浏览器兼容性上的表现也更为优秀。

CSS的主要作用是对网页中的元素实现位置、样式上的精确控制。在网页设计中，CSS的优点是将网页设计中的样式与内容完全分离出来，几乎所有的设计属性都会被写在CSS文件中，而网页的内容可以独立存在于HTML中，这也使网站的维护变得更加便利。相比Flash来说，CSS样式表在加载时更为迅速，表现也更为出色，这会使用户在浏览网站时感觉更加流畅，体验也会更加美妙，如图1-15所示。

自DIV与CSS出现之后，设计师们有了更大的空间来发挥自己的创意，而在这个阶段的设计中，出现了一种对后世影响深远的设计风格，那就是“拟物化”设计风格。这种设计来源于真实生活中的场景，在设计中，页面中显示的物品接近真实场景中的物品材质和形态，同时模拟真实生活中的交互过程，使用户能够快速理解设计的含义。同时，这种设计风格也从实物延伸到网页设计中，而“水晶质感”是这个时期非常具有代表性的一种拟物风格，它利用高光和阴影真实地再现了水晶的造型，如图1-16和图1-17所示。

1.2.5 划时代——移动端兴起与响应式布局

伴随着科技的发展，尤其是智能手机的广泛普及，人们对碎片时间的利用率也越来越高，移动端逐渐超越传统的PC端，成为互联网科技的主流。因此，如何适配多尺寸的移动设备，怎样提高移动端网页的加载速度等，也就成为了设计师们需要面对的全新挑战。

在2010年，伊森·马考特（Ethan Marcotte）首先提出了响应式布局的概念——一个设计方案可以兼容多个终端设备，布局样式随着不同的设备尺寸做出相应的变化。在网页设计中，响应式布局意味着网站能在不同的终端得到完美显示，且即便是在移动端也能流畅加载。设计师们不再需要针对不同设备进行多版本的设计，大大减少了工作量，而这对于用户来说，也是一种全新的体验，如图1-18所示。

网页设计中的栅格系统（由平面设计的栅格系统发展而来，英文名称grid systems，它的作用是用规则的网格阵列来设计和规范网页设计布局）的出现，给了设计师们新的启发。此时960和1200栅格系统成为设计师们应用较广泛的工具，随后问世的Bootstrap和Foundation使网页设计更加简洁和迅速，各种常见的导航、按钮组以及进度条等元素都被放入组件库中，并且可以重复使用，通过它们设计师可以快速搭建功能完备的网站，这些技术都使移动端网页设计变得更加成熟和便捷，如图1-19所示。

这个阶段的网页设计更趋向于简洁化、抽象化和扁平化，此种设计抛弃了拟物化中复杂的高光、投影以及纹理等细节，多采用极简的色块、符号来表现其中的含义。因此，扁平化风格给设计师们带来的更多的是配色以及排版方面的考验，如何让用户准确明白图形的含义，且更专注内容本身，是他们应当重点考虑的问题，如图1-20～图1-22所示。