網站設計

目標

在設計網站之前，設定目標很重要。網站服務於什麼目的？並非所有網站都服務於相同目的。例如，零售網站的目標與非營利網站的目標截然不同。

一些常見的網站目標是

銷售
營銷
更新資訊
生成潛在客戶
分發資訊

目標，在任何環境中，對企業成功至關重要。透過設定業務某個方面的目標，在本例中為網站，將有助於實現業務的其他目標，例如

擴大受眾
增加銷售額
連線其他企業或公司其他部門
一般溝通

設計資訊

設計資訊是組織希望向讀者傳達的形象。這也可以稱為品牌。在建立網站外觀時，您必須考慮徽標、顏色、字型和影像。所有這些都必須支援組織的個性。

傳達品牌正在成為工作場所越來越普遍的事情。企業內部需要保持一致性，以便企業能夠呈現統一的形象——並相信它。為網頁賦予一致的外觀將有助於將其定義為一個有凝聚力的網站，並將使導航變得更容易。由於公司正在圍繞“主題”或“品牌”構建其工作場所，因此網站沒有理由不以相同的方式進行。事實上，這是品牌識別所必需的，因此可以幫助公司發展和成功。一致的品牌和形象也為公司建立了信任和價值。

在傳達品牌時，需要考慮一些重要事項

品牌，無論是透過網站還是客戶服務傳達，都必須保持一致
品牌應該無處不在——品牌曝光沒有限制
簡潔明瞭永遠是最好的路線
您就是品牌，品牌就是您。如果您的品牌不反映公司的價值觀和信念，那麼它絕對不應該出現在您的網站上。

識別您的受眾

瞭解您的受眾將有助於您在決定支援哪些瀏覽器以及認可哪些新技術方面做出更好的決定。在設計新網站之前，最好調查一下您要面向的受眾可能使用的瀏覽器、計算機使用者知識和連線速度。在重新設計現有網站時，您可以檢視過去的網站使用資訊，以便您在最需要的地方對網站進行改進。

在設計網站時，應遵循一些不同的指南。以下是一些常見的網站型別

學術和科學網站應該更加關注網站在無圖形瀏覽環境中的功能
面向消費者的網站應該特別注意網站效能和展示
在使用特定瀏覽器的受控環境中，例如企業環境中，最好充分利用網站的所有功能。員工通常會參加培訓以學習如何使用這些網站，而設計師可以使用瀏覽器的全部潛力。
遊戲網站可以假設使用者擁有最新的外掛和瀏覽器，並且在技術上非常精通

您還可以採取平衡的網頁設計方法。這種設計整合了最新的網頁技術，但以一種對那些使用舊瀏覽器的使用者仍然有效的方式實施。

檢查網站目的

弄清楚網站將如何使用是網站設計中另一個重要步驟。那些使用網際網路的人通常分為兩類

那些尋找資訊的人
那些在網際網路上尋找娛樂的人

對於資訊網站，您可能需要考慮客戶的技術水平或在設計中使用更通用的方法。對於那些尋找娛樂的網站，可以使用更前沿的技術來改善使用者訪問您的網站時的體驗。

對於那些想要在其網站上使用最新技術但又想讓每個人都能使用它的人，可以選擇。在這種情況下，您可以使用瀏覽器檢測器根據使用者使用的瀏覽器型別提供不同的版本。這允許您使用最新技術，同時仍然識別使用舊瀏覽器的使用者。

測試您的網站

在許多不同的瀏覽器和瀏覽器版本上測試您的網站。在上線之前這樣做將有助於在網站對公眾開放之前解決您可能遇到的問題。專業的網頁設計公司會對其網站進行嚴格的質量保證階段。如果這不可行，您可以在私有測試網站上釋出您的網站。然後，您可以對以下瀏覽器執行自己的質量保證測試

熟人的瀏覽器
公司辦公室瀏覽器
不同的 ISP

網站頁面在不同的環境中顯示會有所不同。這個測試階段的總體思路是確保資訊清晰地呈現，並且沒有明顯的錯誤。

內容

內容是建立網站最重要的原因之一。仔細想想，沒有內容的網站就沒有目的。沒有目的的網站就是網際網路上的浪費空間。

在考慮網站內容時，請務必考慮以下事項

網站的目標是什麼？
網站試圖接觸到誰？
人們在網站上閱讀資訊要花多少時間？
個人如何訪問該網站？
對讀者來說最重要的資訊是什麼？
讀者有什麼問題？
讀者在閱讀網站內容後應該採取什麼行動？

另一個需要考慮的網站內容方面是它如何在不同的搜尋引擎中被搜尋。您的網站中需要包含關鍵詞，以確保該網站能夠被尋找特定資訊的人找到。使用關鍵詞時要具體，並使用多次，這樣搜尋引擎機器人就可以找到該詞並將其置於搜尋結果列表的高位。

內容還必須適合年齡和受眾。在網際網路上很難確定年齡是否合適，因為任何會使用計算機的人都可能訪問它。但是，網站上的內容仍然必須適合年齡，以便合適的受眾能夠閱讀合適的材料。年齡適當性還包括確保私人資訊不會在網際網路上公開的總體適當性。受眾適當性意味著網站的內容為人們提供了正確的資訊，並且處於合適的閱讀水平，以便目標讀者能夠理解。

隨著企業越來越重視網站的可使用性，專門負責內容寫作的職位正在湧現。網站內容撰寫者專門負責為網站撰寫資訊。這種寫作風格與學術寫作不同，旨在吸引網頁瀏覽者對網站以及資訊的興趣。

建立主頁

您的主頁將是您網站上訪問量最大的頁面。您的主頁可能並不總是包含您的訪客想要的內容，因此如果您有一些東西可以吸引他們，讓他們想要進一步尋找他們需要的資訊，您將有十秒鐘的時間來吸引您的客戶進入您的網站，否則他們將點選“返回”按鈕並開始尋找其他地方。您的主頁應該能夠快速載入。當客戶點選指向您網站的連結時，您擁有的十秒鐘時間來吸引客戶開始計時。如果您的網站載入需要五秒鐘，那麼您只有幾秒鐘的時間來吸引客戶進一步深入。以下是一些幫助您加快網站載入速度的技巧

保持媒體影像大小
- 將影像限制在不超過 5 到 10KB
- 每個頁面的大小不應超過 30KB
避免在您的主頁上使用來自外部網站的廣告，因為這些廣告可能會減慢載入時間。您無法控制其他伺服器提供其內容的速度。
將您的 HTML 程式碼分成幾個部分，這樣當頁面底部仍在載入時，您的客戶可以閱讀主頁的頂部部分。

關於主頁的另一個重要點是永遠不要停止修改它。當您的網站啟動並執行後，審查您的日誌檔案可以幫助您使您的主頁更易於使用者使用。更新連結或顏色可能會提高您網站的吸引力或易用性。請記住，一切都可以更改，如果您不滿意某個工作正常的東西，您不必接受它。

相容性

功能在不同的 Web 瀏覽器中並不總是以相同的方式顯示。使用多個瀏覽器檢查已建立的頁面可能很有用，以確保該頁面對更廣泛的受眾正確顯示。可以使用訪問 validator.w3.org 驗證已完成的 HTML 程式碼。可以上傳並檢查已儲存的 HTML 程式碼的準確性。將列出 HTML 語法中的任何問題，以及更改錯誤的建議。這樣可以消除需要人員在嘗試在瀏覽器中顯示 HTML 程式碼後搜尋自己的程式碼以查詢錯誤的必要性。

設計注意事項

綜合

可用性

可用性是指使用網站的便捷程度。這可能是指網站的目標受眾（參見受眾），也可能是指網站所需的行業或商業標準。隨著網際網路的發展，網站的可用性定義經歷了不同的變化。在網際網路的早期，許多人不知道如何瀏覽網站或閱讀提供的資訊。這使得網站無法使用。現在，人們尋找最便捷的方式來獲取所需的資訊。

可用性意味著溝通

網站是一種視覺傳達形式，具有多種用途。網站可以是資訊性的、說服性的、長期的、廣告性的或娛樂性的。可用性是根據網站的目標確定的。

如果網站實現了其目標並傳達了必要的訊息，那麼它就可以被認為是可用的。

開發可用性

在網站建成之前就開始對其進行測試將有助於在投入大量精力之前避免一些問題。計劃在焦點小組中進行可用性測試，以幫助您為一個更好、更易於使用者使用的網站做好準備。如果您無法訪問焦點小組，您可以打印出您的想法並與家人和朋友分享，並徵求他們的意見。在開始建立您的網站時，需要注意一些要點

瞭解人們對您網站的期望。客戶可能想要與您準備構建的內容不同的東西。
您使用的措辭將對您網站的有效性至關重要。如果您儘早開始測試，您可以瞭解哪些詞語可以更好地向您的受眾傳達您的訊息。
客戶將為您提供好的想法。與客戶進行測試將為您提供您可能沒有想到的想法。
使用描述性標題、粗體字和專案符號列表以方便閱讀
整合連結和資源以獲取更多資訊
新增圖片、圖表和圖形以增強傳達效果
避免新增不必要的資訊、圖片、聲音或顏色，這些東西會分散注意力而不是提供幫助
與受眾一起測試網站以確定其實用性

測試是構建網站的關鍵。您必須願意傾聽他人的意見，無論是朋友還是潛在客戶，這樣您就可以從一開始就擁有一個更好的網站。

外觀

外觀應賞心悅目，易於觀看和操作。最重要的是使用者來到這個頁面想要找的任務（例如電子郵件地址或關於某個事件的資訊）或最常搜尋的任務應該成為網頁的主要焦點。無論是某些顏色引導著這種重要性，還是大小、或在頁面上的位置，甚至引導您到那個點的方向線，重要的任務都絕不能成為次要的。換句話說，它們應該更突出，而不是成為影像或背景的次要內容。您網站上的所有內容都應該有其目的，有其位於當前位置並以當前外觀呈現的原因。

圖片和顏色很重要也很有趣，但遠遠沒有內容重要。對於任何網頁來說都是如此。使用者進入網站後不應該感到困惑。他們應該知道需要點選哪裡（並理解點選後會發生什麼），並且不應該被影像分散注意力。除非有意，否則影像應該最小化，並且只幫助推動內容的重要性，而不是壓倒頁面。因此，網頁設計師的職責是確保這種情況不會發生。無論是透過佈局（參見佈局）還是透過視覺干擾、使用線條或顏色強制眼球運動、或透過設計師認為有價值的任何其他手段，內容都應該首先看到，影像其次或第三。

可見性

可見性可以被認為是網站設計中最重要的方面。人們必須先找到網站才能檢視它。通常人們透過搜尋引擎找到網站。

以下是一些提高可見性的技巧

為圖片新增文字
檢查 html 程式碼以查詢錯誤
使用相關的標題標籤
使用所有網際網路使用者都能看到的導航
刪除重複內容
不要使用隱藏文字

佈局

網站的佈局應該儘可能簡單。額外的裝飾只會分散使用者的注意力，造成混亂。您希望您的網站具有視覺上的吸引力，但最重要的是，要易於理解。使用者訪問您的網站是有原因的，如果佈局不成功，使用者很可能會離開頁面，到其他地方尋找他們需要的資訊。

建立佈局時要牢記的要點

從線框圖開始；使用簡單的方框和線條來組織您的頁面。圖片應該是事後考慮的。
想想您希望使用者首先看到什麼，以及什麼是最重要的。將這些內容設定為最大、最粗體、最鮮豔的色彩，任何能夠吸引注意力的方式都可以（但要小心，不要讓使用者感到不知所措）。
始終牢記，大多數文化習慣從左到右，從上到下閱讀。
- 將您的徽標放在左上角，以吸引使用者關注頁面的其他部分。
- 將您最不重要的資訊（聯絡方式、外部連結、網站地圖、相關資訊等）放在左下角。人們不會錯過它，但他們會在瀏覽頁面其他部分之後才會進入那個角落。這樣可以防止檢視者看到他們可能不想看的內容。
嘗試將您的檢視者從左上角以向下對角線的方式引導到右下角。如果以這種方式設計您的資訊，您的檢視者將首先看到該對角線上的內容。然後他們會繼續檢視您在頁面其他地方戰略性地放置的任何其他資訊。
如果您是網頁設計新手，我建議您堅持使用自定義佈局，標題放在左上角，選項卡橫跨左上角（在插入選項卡之前，在徽標下方留出空間，徽標需要空間來展示），捲軸位於右側，按鈕是半 3D 的（提供點選效果，讓使用者知道“嘿，我可以點選，我在另一個頁面上提供更多關於此內容的資訊”。人們會掃描突出顯示的內容，如果某些內容看起來不可點選，沒有人會嘗試點選它）。

這些只是基本知識。在實現成功的網頁之前，還有更多要考慮的事情，但這只是一個起點。

構建網站

整理

組裝

網頁創作程式

網站檔案

模板

對搜尋引擎友好

標題標籤

標題標籤在任何網頁中都起著重要的作用。放在標題標籤內的文字將成為頁面的名稱，可以在瀏覽器工具欄中看到。例如，如果您正在檢視 Google 的網站，頁面的標題將簡單地是“Google”。標題很有用，因為它們允許使用者透過簡單地檢視其網頁瀏覽器中的選項卡來輕鬆檢視他們打開了哪些網站。標題標籤還在將頁面新增到收藏夾時為頁面提供標題，並在搜尋引擎結果中顯示頁面的標題。

在 HTML 中，標題標籤位於 head 標籤內。與所有其他 HTML 標籤類似，它以<title>開頭，以</title>結尾。在這兩個標籤之間，HTML 文件的建立者可以放置他們認為最能標識他們正在建立的網頁的任何文字。例如，Google 標題將寫成<title>Google</title>。

主體標籤

body 標籤定義 HTML 文件的主體。HTML 文件的所有內容都放置在這裡。這包括文字、連結、影像、表格、列表以及頁面需要的任何其他內容。在檢視網頁時可以看到的任何內容都在 body 標籤內。

雖然 body 標籤的寫法與所有其他 HTML 標籤相同，但它幾乎總是不止一行。例如

<body>

文件內容

</body>

body 中的每一行通常都是一個單獨的元素。例如，一行可能是連結，下一行是圖片。以這種方式將 body 拆分為多行使編寫和編輯 HTML 變得容易得多，因為它使所有內容都更容易單獨檢視。此外，可以縮排行，使文件更易於閱讀和編輯。例如

<body>

</body>

這也使 HTML 文件的建立者能夠輕鬆地檢視所有標籤是否正確開啟和關閉。雖然建議將 HTML 拆分為不同的行並相應地縮排，但這並不是必需的。

ALT 標籤

META 標籤

與 HTML 中的許多其他標籤不同，<meta> 標籤沒有結束標籤。也就是說，包含在標籤中的所有資訊都放置在方括號內。例如

在這個例子中，<meta> 標籤告訴瀏覽器 HTML 文件的關鍵字是 HTML 和 CSS。name 和 content 欄位可以是作者希望包含的任何資訊。如果作者希望包含文件的建立日期，他們可以編寫

這使得<meta> 標籤在建立和組織多個 HTML 文件時非常有價值。

這會告訴瀏覽器每 30 秒重新載入頁面。除了這一點，<meta> 標籤還可以告訴瀏覽器如何處理 cookie 並指定文字方向，以及許多其他事情。

門戶頁面

參考資料

Concepción, Anne - Marie. 專業網站設計從頭到尾. 辛辛那提：How Design Books，2001 年。

Heng, Christopher. “如何建立對搜尋引擎友好的網站”。http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml。2010 年 4 月 11 日。

Kyrnin, Jennifer. About.com 網頁設計指南. 艾文，馬薩諸塞州：F+W 出版公司，2007 年。

Niederst, Jennifer. 網頁設計概述. 塞巴斯托波爾，加州：O'Reilley 和 Associates, Inc.，1999 年。