網站設計

網頁設計直接關係到網站的視覺效果。有效的網頁設計對於有效傳達理念至關重要。

網頁設計是網站開發的一個子集。但是這兩個術語經常互換使用。

要點

設計計劃應包括以下內容：

關於資訊架構的細節。
網站的計劃結構。
頁面站點地圖

線框圖

線框圖指的是網頁外觀的視覺指南。它有助於定義網站的結構、網頁之間的連結以及視覺元素的佈局。

線框圖中包含以下內容：

主要圖形元素的框圖
標題和副標題的放置
簡單的佈局結構
行動號召
文字塊

可以使用Visio之類的程式建立線框圖，但也可以使用筆和紙。

網頁設計工具

以下是可用於建立有效網頁設計的一些工具列表：

Coda 2
Coda 2是一個強大的Web開發和設計工具，具有更好的使用者介面、文字編輯、檔案管理、剪輯、站點、設計和更好的MySQL支援。OmniGraffle
OmniGraffle主要用於線框圖設計。該工具的缺點是它沒有互動式原型，並且僅適用於Mac。筆和紙
筆和紙可以用來繪製網站的外觀。Vim
Vim是一款出色的網頁設計工具。它支援完全可自定義的程式碼自動縮排、用於儲存剪下/複製程式碼的多個緩衝區以及用於自動重複操作的動作記錄。

序號	工具描述
1.	Photoshop CC 這是一個Adobe提供的優秀的網頁設計工具。最新的Photoshop CC 2014支援許多新功能，例如智慧物件、圖層樣張、智慧參考線、Typekit整合、字型搜尋和工作流程增強功能。
2.	Illustrator CC Illustrator CC也是一款網頁設計工具，它具有強大的功能，如AutoCad庫、白色疊印、文字的填充和描邊代理交換、自動角生成、取消嵌入影像和觸控型別工具等。
3.
4.
5.	Sublime Text Sublime Text是一個帶有Python應用程式程式設計介面的原始碼編輯器。其功能可以透過外掛擴充套件。
6.
7.
8.	Imageoptim 它主要用於最佳化網站上的影像，透過查詢最佳壓縮引數並刪除不必要的註釋來加快影像載入速度。
9.	Sketch 3 Sketch 3是一款專門為設計介面、網站、圖示等而開發的網頁設計工具。
10.	Heroku 它也是一個很棒的Web開發工具，支援Ruby、Node.js、Python、Java和PHP。
11.	Axure 它支援原型設計、文件和線框圖工具，用於建立互動式網站設計。
12.	Hype 2 Hype 2提供：動畫和新增互動性的最簡單方法、HTML5的強大功能、移動響應性和所見即所得功能。
13.	Image Alpha 此工具有助於減小24位PNG檔案的大小。它透過應用有失真壓縮並將檔案轉換為更有效的PNG8+alpha格式來實現。
14.	Hammer 此工具適用於非程式設計師，僅適用於小型專案。
15.	JPEGmini Lite 它是一個影像最佳化工具，支援任何解析度高達28兆畫素的照片。
16.	BugHerd 此工具有助於檢視專案的進展情況以及每個人的工作內容。它還有助於識別開發中的問題。

網頁結構

一個網站包括以下元件：

包含塊

容器可以是頁面的body標籤或一個包含所有內容的div標籤。如果沒有容器，就沒有地方放置網頁的內容。

Logo

Logo指的是網站的標識，並用於公司的各種營銷形式，例如名片、信頭、宣傳冊等等。

內容

網站上的內容應該與網站的目的相關。

頁尾

頁尾位於頁面的底部。它通常包含版權、合同和法律資訊，以及指向網站主要部分的幾個連結。

留白

它也稱為負空間，指的是頁面上未被文字或插圖覆蓋的任何區域。

網頁設計錯誤

應該注意以下常見錯誤，並始終牢記在心：

網站無法在Internet Explorer以外的任何其他瀏覽器中執行。
無故使用尖端技術。
自動啟動的聲音或影片。
隱藏或偽裝的導航。
100% Flash內容。

列印頁面

網站設計

線框圖

網頁設計工具

網頁結構

包含塊

Logo

導航

內容

頁尾

留白

網頁設計錯誤