網頁設計

維基百科,自由的百科全書
前往: 導覽搜尋

網頁設計是指使用標識語言(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. 測試網站

網頁設計工具[編輯]

網頁圖形設計工具[編輯]

網頁語言[編輯]

參見[編輯]

外部連結[編輯]