网页设计技术发展历史及设计案例回顾

自从第一个网站在上个世纪90年代初诞生以来，设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。时代在不断进步，接下来出现了表格布局，然后是Flash，最后是基于CSS的网页设计。本文涵盖了不同时期网页设计的历史，并以W3C、Yahoo、Altavista等网站不同时期的页面设计为例做了回顾和比较。第一张网页1991年8月，TimBerners-Lee发布了第一个简单的，基于文本，包含几个链接的网站。原始网页的副本现在仍然在线。它有十多个链接，试图告诉人们什么是万维网。推荐：HTML速查手册随后的网页都比较相似，完全基于文本，单栏设计，有一些链接等等。最初版本的HTML只有最基本的内容结构：标题(h1,h2...)，段落(p)和链接(a)。随后新版本的HTML开始允许在页面上添加图片(img)，然后开始支持制作表格(table)。W3C出现1994年，万维网联盟(W3C)成立，他们将HTML确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心，因为这会对网络的完整性产生不利的影响。W3C一直致力于确立与维护网页编程语言的标准(例如JavaScript)。Thefirstwebpage(1992)Yahoo!(1996)Altavista(1996)基于表格的设计表格布局使网页设计师制作网站时有了更多选择。在HTML中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。结构设计这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用GIF占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用GIF占位;如微软的“关于HTML表格中的GIF占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有1px高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。W3C(1998)Yahoo!(2002)Altavista(2002)请点击“下一页”，阅读更多精彩内容。基于Flash的网页设计Flash(最初被称为FutureSplashAnimator，然后是MacromediaFlash，现在叫做AdobeFlash)开发于1996年。起初只有非常基本的工具与时间线，最终发展成能够开发整套网站的强大工具。Flash提供了大量的远远超过HTML所能够实现的视觉表现效果。MacromediaShockwave在Flash之前，有MacromediaShockwave(之后是AdobeShockwave)。Shockwave用于为CD-ROM制作目录和多媒体内容，Shockwave文件体积庞大，考虑到当时的网络连接以拨号上网为主，应用Shockwave还是不够明智的。与之相比，Flash影片体积小巧，在线应用更加可行。Flash的优势在视觉效果上HTML有很多局限性，尤其是早期的HTML。要实现复杂的设计，人们往往需要制作大量疯狂的表格结构并/或依靠图像占位符(就像某些所见即所得软件所做的那样)。Flash使创建复杂的，互动性强并且拥有动画元素的网站成为可能。动态HTML(DHTML)在Flash初次涉足网页设计领域的同一时期(20世纪90年代末至21世纪初)，由几种网络技术(如JavaScript和一些服务器端脚本语言)组成的用于创作互动/动画页面元素的DHTML技术的推广，也在如火如荼地进行中。这时，随着Flash的发展和DHTML的普及，不只是阅读静态内容，还允许用户与网页内容互动的交互页面的概念诞生了。3DML3DML是一个鲜为人知的用于制作三维站点的网页设计语言。由MichaelPowers编写于1996年，3DML文件实际上由一种非标准的XML语言写成。FlatlandRover是一款独立开发的3DML浏览器，尽管还有对应的InternetExplorer，NetscapeNavigator，theAOLbrowser和Opera浏览器插件，但随着开发进度停滞于2005年，Firefox的插件始终未能问世。现在仍然有应用3DML构建的网站，但如果没有上述浏览器或是相应插件，3DML就是不可见的。3DML曾用于制作称作“Sopts”的世界与场景。3DML真正的杀手锏是比大多数语言都快的3D模型构建速度(就算是Flash也需要打开Flash桌面应用来创建并编辑Flash内容)与更加小巧的文件体积。基于CSS的设计CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生(甚至感到恐惧)。与表格布局与Flash网页相比，CSS有许多优势。首先它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。推荐：CSS速查手册CSS是网页布局的最佳实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互分离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。由CSS设计的网页的文件体积往往小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里(默认情况下)，这样接下来的访问过程中，网页就都会迅速显示了。W3C(2003)W3C(2009)Yahoo!(2009)Altavista(2009)