网页设计技术发展历史及设计.docx

网页设计技术发展历史及设计案例回顾自从第一个网站在上个世纪 90 年代初诞生以来，设计师们尝试了各种网页的视觉效果早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落时代在不断进步，接下来出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计 　　本文涵盖了不同时期网页设计的历史，并以 W3C、Yahoo、Altavista 等网站不同时期的页面设计为例做了回顾和比较第一张网页1991 年 8 月，Tim Berners-Lee 发布了第一个简单的，基于文本，包含几个链接的网站原始网页的副本现在仍然它有十多个链接，试图告诉人们什么是万维网推荐： HTML 速查手册随后的网页都比较相似，完全基于文本，单栏设计，有一些链接等等最初版本的 HTML 只有最基本的内容结构：标题 (, ...)，段落()和链接() 随后新版本的 HTML 开始允许在页面上添加图片 ()，然后开始支持制作表格()W3C 出现1994 年，万维网联盟(W3C)成立，他们将 HTML 确立为网页的标准标记语言这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心，因为这会对网络的完整性产生不利的影响。

W3C 一直致力于确立与维护网页编程语言的标准( 例如 JavaScript)The first web page (1992)　　Yahoo! (1996)　　Altavista (1996)　　基于表格的设计表格布局使网页设计师制作网站时有了更多选择在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构结构设计这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学　　同一时期也是大量应用 GIF 占位图片控制留白的时期一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软 的“ 关于 HTML 表格中的 GIF 占位” 第一批主要应用表格布局的“所见即所得” 网页设计软件的发展助长了表格的应用另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。

W3C (1998)　　　　Yahoo! (2002)Altavista (2002)　　 基于 Flash 的网页设计Flash(最初被称为 FutureSplash Animator，然后是 Macromedia Flash，现在叫做Adobe Flash)开发于 1996 年起初只有非常基本的工具与时间线，最终发展成能够开发整套网站的强大工具Flash 提供了大量的远远超过 HTML 所能够实现的视觉表现效果Macromedia Shockwave在 Flash 之前，有 Macromedia Shockwave(之后是 Adobe Shockwave)Shockwave 用于为 CD-ROM 制作目录和多媒体内容，Shockwave 文件体积庞大，考虑到当时的网络连接以拨号上网为主，应用 Shockwave 还是不够明智的与之相比，Flash 影片体积小巧，应用更加可行Flash 的优势在视觉效果上 HTML 有很多局限性，尤其是早期的 HTML要实现复杂的设计，人们往往需要制作大量疯狂的表格结构并/或依靠图像占位符(就像某些所见即所得软件所做的那样)Flash 使创建复杂的，互动性强并且拥有动画元素的网站成为可能。

　　动态 HTML(DHTML)　　在 Flash 初次涉足网页设计领域的同一时期(20 世纪 90 年代末至 21 世纪初)，由几种网络技术(如 JavaScrip t 和一些服务器端脚本语言)组成的用于创作互动/动画页面元素的 DHTML 技术的推广，也在如火如荼地进行中这时，随着 Flash 的发展和 DHTML 的普及，不只是阅读静态内容，还允许用户与网页内容互动的交互页面的概念诞生了3DML3DML 是一个鲜为人知的用于制作三维站点的网页设计语言由 Michael Powers 编写于 1996 年，3DML 文件实际上由一种非标准的 XML 语言写成Flatland Rover 是一款独立开发的 3DML 浏览器，尽管还有对应的 Internet Explorer， Netscape Navigator，the AOL browser 和 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)原作者 Cameron Chapman。