科技: 人物 企业 技术 IT业 TMT
科普: 自然 科学 科幻 宇宙 科学家
通信: 历史 技术 手机 词典 3G馆
索引: 分类 推荐 专题 热点 排行榜
互联网: 广告 营销 政务 游戏 google
新媒体: 社交 博客 学者 人物 传播学
新思想: 网站 新书 新知 新词 思想家
图书馆: 文化 商业 管理 经济 期刊
网络文化: 社会 红人 黑客 治理 亚文化
创业百科: VC 词典 指南 案例 创业史
前沿科技: 清洁 绿色 纳米 生物 环保
知识产权: 盗版 共享 学人 法规 著作
用户名: 密码: 注册 忘记密码?
    创建新词条
科技百科
  • 人气指数: 8544 次
  • 编辑次数: 1 次 历史版本
  • 更新时间: 2010-02-16
高兴
高兴
发短消息
相关词条
体验设计活动收敛的11件事
体验设计活动收敛的11件事
情感交互
情感交互
响应式网页设计之年
响应式网页设计之年
交互设计师价值
交互设计师价值
交互设计初体验
交互设计初体验
产品经理必读九步法
产品经理必读九步法
菲兹定律
菲兹定律
移动应用十项设计原则
移动应用十项设计原则
情境化
情境化
Web设计8个趋势
Web设计8个趋势
推荐词条
希拉里二度竞选
希拉里二度竞选
《互联网百科系列》
《互联网百科系列》
《黑客百科》
《黑客百科》
《网络舆情百科》
《网络舆情百科》
《网络治理百科》
《网络治理百科》
《硅谷百科》
《硅谷百科》
2017年特斯拉
2017年特斯拉
MIT黑客全纪录
MIT黑客全纪录
桑达尔·皮查伊
桑达尔·皮查伊
阿里双十一成交额
阿里双十一成交额
最新词条

热门标签

微博侠 数字营销2011年度总结 政务微博元年 2011微博十大事件 美国十大创业孵化器 盘点美国导师型创业孵化器 盘点导师型创业孵化器 TechStars 智能电视大战前夜 竞争型国企 公益型国企 2011央视经济年度人物 Rhianna Pratchett 莱恩娜·普莱契 Zynga与Facebook关系 Zynga盈利危机 2010年手机社交游戏行业分析报告 游戏奖励 主流手机游戏公司运营表现 主流手机游戏公司运营对比数据 创建游戏原型 正反馈现象 易用性设计增强游戏体验 易用性设计 《The Sims Social》社交亮 心理生理学与游戏 Kixeye Storm8 Storm8公司 女性玩家营销策略 休闲游戏的创新性 游戏运营的数据分析 社交游戏分析学常见术语 游戏运营数据解析 iPad风行美国校园 iPad终结传统教科书 游戏平衡性 成长类型及情感元素 鸿蒙国际 云骗钱 2011年政务微博报告 《2011年政务微博报告》 方正产业图谱 方正改制考 通信企业属公益型国企 善用玩家作弊行为 手机游戏传播 每用户平均收入 ARPU值 ARPU 游戏授权三面观 游戏设计所运用的化学原理 iOS应用人性化界面设计原则 硬核游戏 硬核社交游戏 生物测量法研究玩家 全球移动用户 用户研究三部曲 Tagged转型故事 Tagged Instagram火爆的3大原因 全球第四大社交网络Badoo Badoo 2011年最迅猛的20大创业公司 病毒式传播功能支持的游戏设计 病毒式传播功能 美国社交游戏虚拟商品收益 Flipboard改变阅读 盘点10大最难iPhone游戏 移动应用设计7大主流趋势 成功的设计文件十个要点 游戏设计文件 应用内置付费功能 内置付费功能 IAP功能 IAP IAP模式 游戏易用性测试 生理心理游戏评估 游戏化游戏 全美社交游戏规模 美国社交游戏市场 全球平板电脑出货量 Facebook虚拟商品收益 Facebook全球广告营收 Facebook广告营收 失败游戏设计的数宗罪名 休闲游戏设计要点 玩游戏可提高认知能力 玩游戏与认知能力 全球游戏广告 独立开发者提高工作效率的100个要点 Facebook亚洲用户 免费游戏的10种创收模式 人类大脑可下载 2012年最值得期待的20位硅谷企业家 做空中概股的幕后黑手 做空中概股幕后黑手 苹果2013营收 Playfish社交游戏架构

网页设计发展历程 发表评论(0) 编辑词条

目录

网页设计的发展历程编辑本段回目录

自从第一个网站在上个世纪 90 年代初诞生以来,设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成,除了一些小图片和毫无布局可言的标题与段落。然而,时代在进步,接下来出现了表格布局,然后是 Flash,最后是基于 CSS 的网页设计。

19-01_evolution_web_design.jpg

本文涵盖了不同时期网页设计的历史,还包括了不同类型的设计案例。

第一张网页

1991 年 8 月,Tim Berners-Lee 发布了第一个简单的,基于文本,包含几个链接的网站。原始网页的副本现在仍然在线。它有十多个链接,试图告诉人们什么是万维网。

随后的网页都比较相似,完全基于文本,单栏设计,有一些链接等等。最初版本的 HTML 只有最基本的内容结构:标题 (<h1>, <h2>...),段落(<p>)和链接(<a>)。随后新版本的HTML开始允许在页面上添加图片(<img>),然后开始支持制作表格(<table>)。

W3C 的出现

1994 年,万维网联盟(W3C)成立,他们将 HTML 确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心,因为这会对网络的完整性产生不利的影响。W3C 一直致力于确立与维护网页编程语言的标准(例如 JavaScript)。

The first web page (1992)19-02_first_webpages.png

Yahoo! (1996)

19-03_yahoo1996.png

Altavista (1996)

19-04_altavista1996.jpg

基于表格的设计

表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据,但是设计师很快意识到可以利用表格来构造他们设计的网页,这样就可以制作较以往作品更加复杂的,多栏目的网页。

表格布局就这样流行了起来,融合了背景图片切片技术,常给人以看起来较实际布局简洁得多的结构。

结构设计

这个时期的网页设计还不太关注语义化和可用性方面的问题,主要还在追求良好的结构美学。

19-14_spacer_gifs.png

同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软的“关于 HTML 表格中的 GIF 占位”。

第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外,某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面),设计师们都要依赖于表格来创建。

W3C (1998)

19-07_w3c1998.png

Yahoo! (2002)

19-05_yahoo2002.jpg

Altavista (2002)

19-06_altavista2000.png

基于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 使创建复杂的,互动性强并且拥有动画元素的网站成为可能。

19-08_werkette.jpg
19-09_rw2studios.jpg

动态HTML(DHTML)

19-15_dhtml_example.png

在 Flash 初次涉足网页设计领域的同一时期(20世纪90年代末至21世纪初),由几种网络技术(如 JavaScrip t和一些服务器端脚本语言)组成的用于创作互动/动画页面元素的 DHTML 技术的推广,也在如火如荼地进行中。

这时,随着 Flash 的发展和 DHTML 的普及,不只是阅读静态内容,还允许用户与网页内容互动的交互页面的概念诞生了。

3DML

3DML 是一个鲜为人知的用于制作三维站点的网页设计语言。由 Michael Powers 编写于 1996 年,3DML 文件实际上由一种非标准的 XML 语言写成。

19-16_flatland_rover.png

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会缓存在访问者的浏览器里(默认情况下),这样接下来的访问过程中,网页就都会迅速显示了。

W3C (2003)

19-12_w3c2003.jpg

W3C (2009)

19-13_w3c2009.jpg

Yahoo! (2009)

19-10_yahoo2009.jpg

Altavista (2009)

19-11_altavista2009.jpg

......未来?

网页设计路在何方?在评论中分享你的想法并加入讨论吧!

英文原文 http://sixrevisions.com/web_design/the-evolution-of-web-design/

原作者 Cameron Chapman

→如果您认为本词条还有待完善,请 编辑词条

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
0

标签: 网页设计的发展历程 网页设计发展历程

收藏到: Favorites  

同义词: 暂无同义词

关于本词条的评论 (共0条)发表评论>>

对词条发表评论

评论长度最大为200个字符。