網站作為新媒體，具有很多與傳統媒體不同的特征與特性，在開始制作網頁之前，需要對網站的設計有全面的了解和認識。這一章首先介紹網頁的基本概念及構成要素，幫助大家理解網頁的特點與結構；接下來學習網站建設的基本流程，了解網站是如何從無到有的；此外，網頁版式與風格設計是建設一個成功網站的關鍵，學習基本的規律有助于設計出更美觀、實用的網站。
認識網頁與網站
網頁（Web Page）實際上是一個文件，網頁經由網址（URL）來識別與存取。當瀏覽者輸入一個網址或單擊某個鏈接，在瀏覽器中顯示出來的就是一個網頁。
網站（Web Site）是各種各樣網頁的集合，有的網站內容眾多，如新浪、搜狐等門戶網站；有個網站只有幾個頁面，如個人網站。在構成網站的眾多網頁中，有一個頁面比較特殊，稱為首頁（Home Page）。例如，當瀏覽者輸入搜狐網站地址“www.sohu.com”后出現在第一個頁面，即sohu網站的首頁，如圖1.1所示。瀏覽者可以根據首頁的導航進入其他頁面，了解更多內容。
網頁的基本構成要素
雖然網頁種類繁多，形式內容各有不同。但網頁的基本構成要素大體相同，包括標題（Logo）、導航、文本、圖片、動畫、超鏈接、表單、音視頻等，如圖所示。網頁設計就是要將上述構成要素有機整合，表達出美與和諧。
網頁設計基礎知識
規范的網站建設應遵循一定的流程，主要由規劃設計階段、實施發布階段、評價階段組成，各個階段的具體環節如圖所示。
網頁版式設計
網頁的版式設計是網頁設計的核心，主要內容包括網頁整體布局設計和導航樣式的設計。本節將介紹常見的幾種網頁布局，以及網頁導航設計應遵循的原則。
網頁布局
網頁布局是網頁設計的基礎，目前網頁的布局主要可歸為三大類型：分欄式結構、區塊分布式結構、無框架局限式結構。
1．分欄式結構
2．區域分布式結構
3．無框架局限式結構
導航設計
導航是網頁設計中不可或缺的基礎元素之一。導航就如同一個網站的路標，有了它就不會在瀏覽網站時“迷路”。導航鏈接著各個頁面，只要單擊導航中的超級鏈接就能進入相應的頁面。
導航設計的好壞，決定著用戶是否能很方便地使用網站。導航設計應直觀明確，大限度地為用戶使用考慮，盡可能使網頁切換更便捷。導航的設計要符合整個網站的風格和要求，不同的網站會采用不同的導航方式。一般來說，在網頁的上端或左側設置導航欄是比較普遍的方式，如圖1.9所示。網站采用上端文字作為一級導航，左側樹狀結構菜單作為二級導航。
導航設計應遵循以下原則：
讓用戶能根據走過的路徑，確定下一步的前進方向和路徑；
不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡捷地找到所需的信息，并以好的路徑到達這些信息；
讓用戶使用網站遇到困難時，能尋求到解決困難的方法，找到好路徑；
讓用戶清楚地了解整個網站的結構概況，產生整體性感知；
對使用頻率不同的信息作有序處理
網頁風格設計
同樣的版式設計，配色不同，文字樣式不同，也可以呈現出多種不同的網頁風格。本節將結合實例從網頁配色、文字藝術兩個方面對網頁風格設計進行具體分析。
網頁配色
設計精美的網站都有其色調構成的總體傾向。以一種或幾種臨近顏色為主導，使網頁全局呈現某種和諧、統一的色彩傾向。下面介紹一些網頁配色的具體經驗。
運用色系。先根據網頁主題，選定一種主色，然后調整透明度或飽和度，也就是將色彩變淺或加深，調配出新的色彩。這樣的頁面看起來色彩一致，有層次感，如圖1.10所示。IBM網站運用藍色系營造出藍色海洋的感覺。
使用對比色。可以充分利用對比色進行設計，同時注意使用灰色調進行調和。這樣的作品頁面色彩豐富，
文字藝術
文字在版面中一般占有絕大部分空間，是網頁信息的主要載體。處理好文字關系到網頁設計的成敗。字體的選擇、字號的大小、文字的顏色、行與行的距離、段落與段落的安排，都需要認真考慮。好的文字設計會給網頁增色不少
實例分析
1．網站描述
這是一家航空公司的網站首頁。界面設計給人現代、驛動的感覺，這與公司的風格相一致。導航設計簡潔利落，很值得學習借鑒，
2．布局
網頁布局采用的是比較常見的分欄式結構，如圖1.15所示。A為網站的Logo所在的區域；B為網站主菜單所在的區域；C為搜索與其他公共功能所在的區域；D為網站的內容區域，主要由文字和圖片組成；E為版權信息所在的區域。
3．配色
網頁選用藍色系，象征天空，與網站主題一致。網頁主要運用了兩種藍色除此之外，網頁文字的配色主要以白色和藍色為主。

本文標題：網頁設計基礎知識
本文地址：http://m.newbst.com/news13/49813.html

成都網站建設公司_創新互聯，為您提供網站設計公司、自適應網站、標簽優化、App開發、用戶體驗、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯