今天我們將會為各位朋友們分享下網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識，如果你也對這個行業(yè)非常感興趣的話，自然就需要好好的學(xué)習(xí)下相關(guān)的知識，一定讓大家做好學(xué)習(xí)前的知識儲備的。

　　一、網(wǎng)頁設(shè)計(jì)工具

　　圖像處理設(shè)計(jì):

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

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

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

　　動畫設(shè)計(jì):

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

　　網(wǎng)頁代碼編輯器:

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

　　Amaya(單位:萬維網(wǎng)聯(lián)盟)用于編輯HTML、CSS、數(shù)學(xué)標(biāo)記語言、可縮放矢量圖形的工具。

　　（圖片來自網(wǎng)絡(luò)）

　　二、網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識

　　認(rèn)識網(wǎng)頁與網(wǎng)站

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

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

　　網(wǎng)頁的基本構(gòu)成要素

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

　　網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識

　　規(guī)范的網(wǎng)站建設(shè)應(yīng)遵循一定的流程，主要由規(guī)劃設(shè)計(jì)階段、實(shí)施發(fā)布階段、評價階段組成，各個階段的具體環(huán)節(jié)如圖所示。

　　網(wǎng)頁版式設(shè)計(jì)

　　網(wǎng)頁的版式設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)的核心，主要內(nèi)容包括網(wǎng)頁整體布局設(shè)計(jì)和導(dǎo)航樣式的設(shè)計(jì)。本節(jié)將介紹常見的幾種網(wǎng)頁布局，以及網(wǎng)頁導(dǎo)航設(shè)計(jì)應(yīng)遵循的原則。

　　網(wǎng)頁布局

　　網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，目前網(wǎng)頁的布局主要可歸為三大類型：分欄式結(jié)構(gòu)、區(qū)塊分布式結(jié)構(gòu)、無框架局限式結(jié)構(gòu)。

　　1.分欄式結(jié)構(gòu)

　　2.區(qū)域分布式結(jié)構(gòu)

　　3.無框架局限式結(jié)構(gòu)

　　導(dǎo)航設(shè)計(jì)

　　導(dǎo)航是網(wǎng)頁設(shè)計(jì)中不可或缺的基礎(chǔ)元素之一。導(dǎo)航就如同一個網(wǎng)站的路標(biāo)，有了它就不會在瀏覽網(wǎng)站時“迷路”。導(dǎo)航鏈接著各個頁面，只要單擊導(dǎo)航中的超級鏈接就能進(jìn)入相應(yīng)的頁面。

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

　?。▓D片來自網(wǎng)絡(luò)）

　　導(dǎo)航設(shè)計(jì)應(yīng)遵循以下原則：

　　讓用戶能根據(jù)走過的路徑，確定下一步的前進(jìn)方向和路徑;

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

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

　　讓用戶清楚地了解整個網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體性感知;

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

　　網(wǎng)頁風(fēng)格設(shè)計(jì)

　　同樣的版式設(shè)計(jì)，配色不同，文字樣式不同，也可以呈現(xiàn)出多種不同的網(wǎng)頁風(fēng)格。本節(jié)將結(jié)合實(shí)例從網(wǎng)頁配色、文字藝術(shù)兩個方面對網(wǎng)頁風(fēng)格設(shè)計(jì)進(jìn)行具體分析。

　　網(wǎng)頁配色

　　設(shè)計(jì)精美的網(wǎng)站都有其色調(diào)構(gòu)成的總體傾向。以一種或幾種臨近顏色為主導(dǎo)，使網(wǎng)頁全局呈現(xiàn)某種和諧、統(tǒng)一的色彩傾向。下面介紹一些網(wǎng)頁配色的具體經(jīng)驗(yàn)。

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

　　使用對比色?？梢猿浞掷脤Ρ壬M(jìn)行設(shè)計(jì)，同時注意使用灰色調(diào)進(jìn)行調(diào)和。這樣的作品頁面色彩豐富，

　　以上就是我們?yōu)楦魑慌笥褌兎窒淼木W(wǎng)頁設(shè)計(jì)基礎(chǔ)知識，大家是不是都好好的學(xué)習(xí)了呢？相信上面的內(nèi)容可以幫助大家更好的學(xué)習(xí)這項(xiàng)技能。