1、网页设计参考文献网页设计是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。简单来说,网页设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格,都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行,同样地它们亦需要标示语言移植在网站内。随着浏览器和 W3C 标准一致性的改善,以及无表格网页设计的认同性增加,超文件标示语言与层叠样式表共同用作网页内容的
2、设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展,使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。目录1 网页格式1.1 静态网页1.2 动态网页2 外观的影响2.1 流动性 对 固定排版2.2 Flash2.3 两种设计模式3 网页设计步骤4 网页设计工具5 网页图形设计工具6 网页语言7 参见8 外部链接网页格式静态网页静态网页多数为单一的超文件标示语言档案。现今不少网站皆倾向把动态网页静态化,从而令搜寻引擎最佳化。动态网页动态网页的内容随着用户的输入和互动而有所不同,或者随着用户、时间、数据修正等而改变。网页上的内容也可以由用户通过使用客户端描
3、述语言(JavaScript、JScript、Actionscript)来改变。当然更普遍的是由服务器端的描述语言(Perl、PHP、ASP、JSP、ColdFusion 等)进行编译,从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。随着信息技术的更加专业化,越来越明显的倾向表明,网页设计和网站的发展会逐渐成为两个不同的领域。网页是借助于美术构图与程序互动、动画等方式向大众推广相关信息的媒体,所以网页设计包括了几大部分:版面构图(见平面设计)程序开发(见网页应用程式)网站内容管理(见内容管理系统、资讯架构学)下面将会介绍网页的版面构图的技术为主。外观的
4、影响流动性 对 固定排版大部分网站设计师原本是每处地方都有绝对限界的平面设计师。可是在网页浏览器,却不能控制某些因素,特别是浏览器的阔度。有些设计师将其网页定义在固定大小的表格中,每部分的宽度都有精确的数据,一般使用确定的值,这就是固定排版了。然而有人认为这不好,因为这种设计罔顾使用者的设定,他们使用流动性排版,网页的宽度使用百分比定义宽度,因此网页会依浏览器的屏幕分辨率而改变。 但是流动性的排版对于日益增大的屏幕就不一定合适,因为人的眼睛进行横向阅读时,过长的文字会增加阅读的困难度,反之大约在十几个字即换行的文章,浏览者会更好吸收其内容。FlashAdobe Flash 这套软件能够很轻易做
5、到一些华丽的图像效果,亦可以进行编程,因此近年来出现在不少网站上。有些网站更以 Flash完全代替 HTML。可是 Flash 带来的问题不少:搜索引擎不能记录 Flash 的内容盲人不能透过屏幕阅读器来取得其内容Flash 会占用大量资源(如内存)所以大部分人都不会以 Flash 为主要设计,Flash 通常成了首页的开场画面或网站内的小游戏。两种设计模式从前一般网页都使用表格进行排版设计,这样作的优点在于设计制作速度快,尤其在可视化网页编辑器,如 Microsoft FrontPage 中,这样设计显得直观而方便,然而这让越来越复杂的版面需要许多不断嵌套的表格设计,致使网页代码变得冗长复杂
6、,使文件体积增大,且不容易被搜索引擎查找。同时,这样做也不利于大型网站的改版工作。于是随着主流网页浏览器对 CSS 的支援度提高,近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命,其核心在于分隔网页的风格和内容(en:Separation of style and content),指标记语言(如 http:/ HTML,XML)负责定义页面的内容,但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的 CSS 档案负责。在排版方面,新的模式提倡使用由 CSS 定义的 DIV 进行页面排版,而将表格还原为排列数据的最初功能。这种模式有很多好处,例如可以协助搜寻引擎查找网
7、页的情况,减小文件提及提高浏览速度,且由于一个 CSS 档案可以控制多个页面,这也给改版带来了很大方便。由于 W3C 是该模式极力的倡导者,于是业界鉴定网页是否符合 W3C标准,就可以在 W3C 网站自动检测该网站的情况。这种模式也有缺点,其中一个弱点就是,在不同浏览器出来的效果会有分别,但这种情况主要是由于微软的 Internet Explorer 对CSS 文档的支持有众多缺陷造成的。另一方面,开始设计 CSS 时,并不能清楚看到目标,因此显得不直观网页设计步骤本章节需要扩充设定目标整理内容勾画草图制作模板添加内容测试网站网页设计工具Adobe DreamweaverMicrosoft Expression WebCSS Layout Generator网页图形设计工具Adobe FireworksAdobe Photoshop网页语言HTMLXHTMLDHTMLSHTMLCSS参见网页颜色无表格网页设计