网页设计

维基百科,自由的百科全书
跳转至: 导航搜索

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

简单来说,网页设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格,都可以通过使超文件標示語言可擴展超文本標記語言標示語言放置到网站页面上。而更复杂的信息如矢量圖形、动画视频声频多媒體檔案则需要插件程序來運行,同樣地它們亦需要標示語言移植在網站內。

随着浏览器和W3C标准一致性的改善,以及無表格網頁設計的認同性增加,超文件標示語言層疊樣式表共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展,使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。

網頁格式[编辑]

靜態網頁[编辑]

靜態網頁多數為單一的超文件標示語言檔案。現今不少網站皆傾向把動態網頁靜態化,從而令搜尋引擎最佳化

動態網頁[编辑]

动态网页的内容随着用户的输入和互动而有所不同,或者随着用户、时间、数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(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),指標記語言(如HTML,XML)負責定義頁面的內容,但不可以定義任何涉及網站外觀(風格)的東西。而網站風格就由另外的CSS檔案負責。在排版方面,新的模式提倡使用由CSS定义的DIV进行页面排版,而将表格还原为排列数据的最初功能。這種模式有很多好處,例如可以協助搜尋引擎查找網頁的情況,减小文件提及提高浏览速度,且由于一个CSS档案可以控制多个页面,这也给改版带来了很大方便。

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

这种模式也有缺点,其中一個弱點就是,在不同瀏覽器出來的效果会有分別,但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面,開始設計CSS時,並不能清楚看到目標,因此显得不直观

网页设计步骤[编辑]

  1. 设定目标
  2. 整理内容
  3. 勾画草图
  4. 制作模板
  5. 添加内容
  6. 测试网站

网页设计工具[编辑]

網頁圖形設計工具[编辑]


つ==网页語言==

參見[编辑]

外部鏈結[编辑]