网页设计的演变

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

自从20世纪90年代初出现第一个网站以来,设计师们一直在尝试网站的外观。早期的网站完全是基于文本的,只有很少的图片,除了标题和段落之外没有真正的布局。然而,随着行业的发展,最终出现了基于表格的设计,然后是Flash,最后是基于css的设计。

网页设计的演变这篇文章介绍了概要网页设计不同时代的历史,包括每种设计的少量示例。

第一个网页

1991年8月,蒂姆•伯纳斯-李发布了第一个网站,一个简单的,基于文本的页面,有几个链接。一个1992年副本原始页面仍然存在于网上。它有十几个链接,只是用来告诉人们万维网是怎么回事。

随后的页面也类似,它们完全是基于文本的,并且是带有内联链接的单列设计。最初版本的HTML(超文本标记语言)只允许非常基本的内容结构:标题(<标题>,< h2 >等)、段落(< p >),及连结(<一>).后来的HTML版本允许添加图像(< img >)到页,并最终支持表(<表>)。

万维网联盟成立

1994年,万维网联盟(W3C),并将HTML作为标记网页的标准。这就阻止了任何一家公司建立一个专有的浏览器和编程语言,这可能会对整个网络产生不利影响。W3C继续为开放web标记和编程语言(如JavaScript)制定标准。

例子:

第一个网页(1992年)

第一个网页(1992年)

雅虎(1996)

雅虎(1996)

Altavista (1996)

Altavista (1996)

表格布局

基于表格的布局为网页设计师创建网站提供了更多的选择。HTML中最初的表格标记是用来显示表格数据的,但设计师很快意识到他们可以利用它来为他们的设计提供结构,并创建比HTML最初所能做到的更复杂的多列布局。基于表格的设计越来越复杂,包含了切片的背景图像,通常会给人一种结构比实际表格布局更简单的错觉。

设计重于结构

这个时代的网页布局很少关注语义和网页可访问性,通常选择美观而不是良好的标记结构。设计重于结构这是同一个时代间隔gif用于控制网页布局中的空白。一些大公司甚至教设计师使用Spacer动图;看到介绍间距GIF在Microsoft.com的HTML表格中使用。

第一个WYSIWYG网页设计应用程序的开发,都使用了基于表格的布局,增加了表格的使用。此外,其中一些程序创建的表格非常复杂,以至于许多设计师永远不会从头开始创建它们(例如行只有1像素高和数百个单元格的表格)。如果设计师想要创建稍微复杂的设计(比如多列设计),他们就必须依赖表格。

例子:

W3C (1998)

W3C (1998)

雅虎(2002)

雅虎(2002)

Altavista (2002)

Altavista (2002)

基于flash的网页设计

闪光(最初被称为FutureSplash Animator,然后是Macromedia Flash,现在是Adobe Flash)开发于1996年。它从非常基本的工具和时间表开始,发展到拥有强大的工具来开发整个网站。Flash提供了大量超出HTML所能提供的选项。

Macromedia冲击波

在Flash出现之前,就有了Macromedia冲击波(后来Adobe Shockwave)。Shockwave被用来为cd - rom创建菜单和其他多媒体内容。Shockwave文件很大,虽然宽带互联网使在线播放Shockwave文件成为可能,但当标准的互联网连接是拨号上网时,Shockwave文件是不切实际的。

相比之下,Flash电影更小,更适合在线使用。

Flash的优势

HTML网站的设计选项非常有限,特别是在使用早期版本的HTML构建时。为了创建复杂的设计,你经常不得不创建疯狂的表格结构和/或使用间隔图像(就像一些所见即所得的网页设计程序所做的那样)。Flash使创建具有动画功能的复杂交互式网站成为可能。

例子:注意:这些都是最近的Flash设计实例。例子:rw2

动态HTML (DHTML)

动态HTML (DHTML)大约在同一时间,Flash被引入到场景中网页设计(20世纪90年代末- 21世纪初),DHTML技术的普及,包括一些web技术,如JavaScript,有时是服务器端脚本,用于创建交互式/动画页面元素。在此期间,随着Flash的出现和DHTML的流行,交互式网页的概念开始出现,它不仅允许用户阅读静态内容,还允许用户与web内容进行交互。

3 dml

3 dml是一种鲜为人知的网页设计语言,用于创建三维网站。3DML文件是由Michael Powers在1996年发明的,它实际上是用一种无效的XML编写的。3 dml平地探测器是一个独立开发的3DML浏览器,虽然也有用于Internet Explorer、Netscape Navigator、AOL浏览器和Opera的插件,但由于在2005年停止开发,Firefox没有可用的插件。

现在仍有一些基于3DML构建的网站,但如果没有浏览器或插件,就无法查看。3DML被用来构建称为“斑点”的世界或场景。3DML真正的优势在于,它比其他大多数允许你构建3D模拟的语言(比如Flash,它也需要你访问Flash桌面应用程序来创建和编辑Flash内容)要快得多,而且文件大小要小得多。

基于css的设计

基于css的设计在2000年早期的网络热潮之后开始流行起来。虽然CSS早在那之前就有了,但主流浏览器对它的支持有限,许多设计师对它不熟悉(甚至被它吓倒了)。基于css的设计比基于表格或Flash的设计有很多优势。

首先,它将设计元素从内容中分离出来,这最终意味着在网页布局的视觉方面和它的内容之间会有更大的区别。CSS也是布局网页的最佳实践,而基于表格的布局则不是。它还减少了标记的混乱,使网页布局更加清晰和语义化。

CSS还使维护网站变得更容易,因为内容和设计元素是分开的。您可以更改基于css的站点的整体外观,而无需更改内容。CSS设计的文档大小通常也比基于表格的设计要小,这意味着页面响应时间的改善。

虽然当你第一次下载一个你从未访问过的网站的样式表时,初始带宽会受到影响,但CSS是由用户的浏览器缓存的(默认情况下),因此后续的页面视图将更快地加载。例子:

W3C (2003)

W3C (2003)

W3C (2009)

W3C (2009)

雅虎(2009)

雅虎(2009)

Altavista (2009)

Altavista (2009)

未来吗?

网页设计将走向何方?谁知道呢。

现在的企业主来自高尔夫球场暖通空调技术人员的业主将他们的网站设计重点放在用户体验上,以确保用户的满意度维护他们的声誉.我有一种感觉,这种趋势不仅会持续下去,而且还会继续发展。你怎么看?

在评论中分享你的想法并加入讨论。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!