今天我們將會為各位朋友們分享下網頁設計基礎知識，如果你也對這個行業非常感興趣的話，自然就需要好好的學習下相關的知識，一定讓大家做好學習前的知識儲備的。

　　一、網頁設計工具

　　圖像處理設計:

　　adobePhotoShop(外語簡稱:PS、其程序圖標便是它的外語簡稱)是一個由AdobeSystems開發和發行的圖像處理軟件。 Adobe Photoshop有兩個發行版本:標準版Adobe Photoshop和擴展版Adobe Photoshop Extended，擴展版除包含標準版所有功能之外，還增加了3D處理功能、動畫圖形編輯功能和高級圖像分析功能。 Adobe只支持Windows操作系統和Mac OS操作系統版本的Photoshop ， 但Linux操作系統用戶可以通過使用Wine來運行Photoshop CS6。

　　Fireworks，跟Photoshop一樣都是圖像處理軟件，但Fireworks偏向于對網頁的處理。

　　StylePix(單位:Hornil)跟PhotoShop一樣都是圖象處理軟件，可以處理光柵及矢量圖形。

　　動畫設計:

　　Adobe Flash，前稱Macromedia Flash，外語簡稱Flash，前身FutureSplash，既指Adobe Flash Professional多媒體創作程序，也指Adobe Flash Player。

　　網頁代碼編輯器:

　　Adobe Dreamweave(前稱Macromedia Dreamweaver)用于編輯HTML、ASP、JSP、PHP、CSS、XML、JS的頁面制作工具;是Adobe公司的著名網站開發工具。它使用所見即所得的接口，亦有HTML編輯的功能。有支持Mac和Windows兩個系統的版本。

　　Amaya(單位:萬維網聯盟)用于編輯HTML、CSS、數學標記語言、可縮放矢量圖形的工具。

　　（圖片來自網絡）

　　二、網頁設計基礎知識

　　認識網頁與網站

　　網頁(Web Page)實際上是一個文件，網頁經由網址(URL)來識別與存取。當瀏覽者輸入一個網址或單擊某個鏈接，在瀏覽器中顯示出來的就是一個網頁。

　　網站(Web Site)是各種各樣網頁的集合，有的網站內容眾多，如新浪、搜狐等門戶網站;有個網站只有幾個頁面，如個人網站。在構成網站的眾多網頁中，有一個頁面比較特殊，稱為首頁(Home Page)。

　　網頁的基本構成要素

　　雖然網頁種類繁多，形式內容各有不同。但網頁的基本構成要素大體相同，包括標題(Logo)、導航、文本、圖片、動畫、超鏈接、表單、音視頻等，如圖所示。網頁設計就是要將上述構成要素有機整合，表達出美與和諧。

　　網頁設計基礎知識

　　規范的網站建設應遵循一定的流程，主要由規劃設計階段、實施發布階段、評價階段組成，各個階段的具體環節如圖所示。

　　網頁版式設計

　　網頁的版式設計是網頁設計的核心，主要內容包括網頁整體布局設計和導航樣式的設計。本節將介紹常見的幾種網頁布局，以及網頁導航設計應遵循的原則。

　　網頁布局

　　網頁布局是網頁設計的基礎，目前網頁的布局主要可歸為三大類型：分欄式結構、區塊分布式結構、無框架局限式結構。

　　1.分欄式結構

　　2.區域分布式結構

　　3.無框架局限式結構

　　導航設計

　　導航是網頁設計中不可或缺的基礎元素之一。導航就如同一個網站的路標，有了它就不會在瀏覽網站時“迷路”。導航鏈接著各個頁面，只要單擊導航中的超級鏈接就能進入相應的頁面。

　　導航設計的好壞，決定著用戶是否能很方便地使用網站。導航設計應直觀明確，最大限度地為用戶使用考慮，盡可能使網頁切換更便捷。導航的設計要符合整個網站的風格和要求，不同的網站會采用不同的導航方式。一般來說，在網頁的上端或左側設置導航欄是比較普遍的方式，如圖1.9所示。網站采用上端文字作為一級導航，左側樹狀結構菜單作為二級導航。

　　（圖片來自網絡）

　　導航設計應遵循以下原則：

　　讓用戶能根據走過的路徑，確定下一步的前進方向和路徑;

　　不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡捷地找到所需的信息，并以最佳的路徑到達這些信息;

　　讓用戶使用網站遇到困難時，能尋求到解決困難的方法，找到最佳路徑;

　　讓用戶清楚地了解整個網站的結構概況，產生整體性感知;

　　對使用頻率不同的信息作有序處理

　　網頁風格設計

　　同樣的版式設計，配色不同，文字樣式不同，也可以呈現出多種不同的網頁風格。本節將結合實例從網頁配色、文字藝術兩個方面對網頁風格設計進行具體分析。

　　網頁配色

　　設計精美的網站都有其色調構成的總體傾向。以一種或幾種臨近顏色為主導，使網頁全局呈現某種和諧、統一的色彩傾向。下面介紹一些網頁配色的具體經驗。

　　運用色系。先根據網頁主題，選定一種主色，然后調整透明度或飽和度，也就是將色彩變淺或加深，調配出新的色彩。這樣的頁面看起來色彩一致，有層次感，如圖1.10所示。IBM網站運用藍色系營造出藍色海洋的感覺。

　　使用對比色。可以充分利用對比色進行設計，同時注意使用灰色調進行調和。這樣的作品頁面色彩豐富，

　　以上就是我們為各位朋友們分享的網頁設計基礎知識，大家是不是都好好的學習了呢？相信上面的內容可以幫助大家更好的學習這項技能。