网页设计参考文献

?网页设计是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。

简单来说，网页设计的目的就是产生网站。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格，都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行，同样地它们亦需要标示语言移植在网站内。

随着浏览器和W3C标准一致性的改善，以及无表格网页设计的认同性增加，超文件标示语言与层叠样式表共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。
目录

1 网页格式
1.1 静态网页
1.2 动态网页
2 外观的影响
2.1 流动性 对 固定排版
2.2 Flash
2.3 两种设计模式
3 网页设计步骤
4 网页设计工具
5 网页图形设计工具
6 网页语言
7 参见
8 外部链接

网页格式
静态网页

静态网页多数为单一的超文件标示语言档案。现今不少网站皆倾向把动态网页静态化，从而令搜寻引擎最佳化。
动态网页

动态网页的内容随着用户的输入和互动而有所不同，或者随着用户、时间、数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(JavaScript、JScript、Actionscript）来改变。当然更普遍的是由服务器端的描述语言（Perl、PHP、ASP、JSP、ColdFusion等)进行编译，从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。

随着信息技术的更加专业化，越来越明显的倾向表明，网页设计和网站的发展会逐渐成为两个不同的领域。

网页是借助于美术构图与程序互动、动画等方式向大众推广相关信息的媒体，所以网页设计包括了几大部分：

版面构图（见平面设计）
程序开发（见网页应用程式）
网站内容管理（见内容管理系统、资讯架构学）

下面将会介绍网页的版面构图的技术为主。
外观的影响
流动性 对 固定排版

大部分网站设计师原本是每处地方都有绝对限界的平面设计师。可是在网页浏览器，却不能控制某些因素，特别是浏览器的阔度。

有些设计师将其网页定义在固定大小的表格中，每部分的宽度都有精确的数据，一般使用确定的值，这就是固定排版了。然而有人认为这不好，因为这种设计罔顾使用者

的设定，他们使用流动性排版，网页的宽度使用百分比定义宽度，因此网页会依浏览器的屏幕分辨率而改变。 但是流动性的排版对于日益增大的屏幕就不一定合适，因为人的眼睛进行横向阅读时，过长的文字会增加阅读的困难度，反之大约在十几个字即换行的文章，浏览者会更好吸收其内容。
Flash

Adobe Flash这套软件能够很轻易做到一些华丽的图像效果，亦可以进行编程，因此近年来出现在不少网站上。有些网站更以Flash完全代替HTML。

可是Flash带来的问题不少：

搜索引擎不能记录Flash的内容
盲人不能透过屏幕阅读器来取得其内容
Flash会占用大量资源(如内存)

所以大部分人都不会以Flash为主要设计，Flash通常成了首页的开场画面或网站内的小游戏。
两种设计模式

从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如Microsoft FrontPage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。

于是随着主流网页浏览器对CSS的支援度提高，近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命，其核心在于分隔网页的风格和内容(en:Separation of style and content)，指标记语言(如/index.html HTML,XML)负责定义页面的内容，但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的CSS档案负责。在排版方面，新的模式提倡使用由CSS定义的DIV进行页面排版，而将表格还原为排列数据的最初功能。这种模式有很多好处，例如可以协助搜寻引擎查找网页的情况，减小文件提及提高浏览速度，且由于一个CSS档案可以控制多个页面，这也给改版带来了很大方便。

由于W3C是该模式极力的倡导者，于是业界鉴定网页是否符合W3C标准，就可以在W3C网站自动检测该网站的情况。

这种模式也有缺点，其中一个弱点就是，在不同浏览器出来的效果会有分别，但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面，开始设计CSS时，并不能清楚看到目标，因此显得不直观
网页设计步骤
本章节需要扩充

设定目标
整理内容
勾画草图
制作模板
添加内容
测试网站

网页设计工具

Adobe Dreamweaver
Microsoft Expression Web
CSS Layout Generator

网页图形设计工具

Adobe Fireworks
Adobe Photoshop


网页语言

HTML
XHTML
DHTML
SHTML
CSS

参见

网页颜色
无表格网页设计