網(wǎng)頁設(shè)計必備知識

網(wǎng)頁設(shè)計必備知識認(rèn)識網(wǎng)頁頁面元素網(wǎng)頁的頁面元素主要包括瀏覽者所能看到的文字、圖像、動畫、影片，以及不可見的表格、圖層等內(nèi)容。網(wǎng)頁頁面元素種類以網(wǎng)頁具體內(nèi)容的類型來分，頁面元素主要由文本、圖像、表格、圖層、音效、動畫、影片、特效等。以網(wǎng)頁元素的功能和作用分，頁面元素則可分為網(wǎng)站logo、按鈕、搜索元件、聯(lián)系信息、版權(quán)信息、信息欄橫幅、廣告等。

網(wǎng)頁圖像元素的格式圖像是構(gòu)成頁面最基本的元素之一，即提供了文本不可替代的信息傳播作用，同時也是裝飾頁面外觀不可缺少的。在網(wǎng)頁設(shè)計中，一般使用的圖像格式主要為JPEG、PNG和GIF，它們具有不同的特性。GIF格式

GIF(Graphics

Interchange

Format圖形互換格式)。它是Internet上使用最早、應(yīng)用最廣泛的圖像格式。GIF圖片的擴展名是gif。現(xiàn)在所有的圖形瀏覽器都支持GIF格式，而且有的圖形瀏覽器只認(rèn)識GIF格式。GIF是一種索引顏色格式，在顏色數(shù)很少的情況下，產(chǎn)生的文件極小。GIF格式支持背景透明。GIF圖片如果背景色設(shè)置為透明，它將與瀏覽器背景相結(jié)合，生成非矩形的圖片。GIF圖像最多只能存儲256種顏色，因此在顯示上不具優(yōu)勢。JPEG格式是在Internet上被廣泛支持的圖像格式，一般也簡稱JPG。JPG支持16M色彩也就是通常所說的24位顏色或真彩色，其典型的壓縮比為4:1。由于人類眼睛并不能看出存儲在一個圖像文件中的全部信息，可以去掉圖像中的某些細(xì)節(jié)，并對圖像中某些相同的色彩進(jìn)行壓縮。JPG是一種以損失質(zhì)量為代價的壓縮方式，壓縮比越高，圖像質(zhì)量損失越大，適用于一些色彩比較豐富的照片以及24位圖像。PNG格式

PNG（PortableNetworkGraphic）流式網(wǎng)絡(luò)圖形格式。PNG格式相對較新，也是W3C推薦的格式。此格式圖像具有高壓縮率和透明色彩背景兩大優(yōu)點，不但使圖像所占空間較少，而且支持24bit圖像色彩，可產(chǎn)生無鋸齒邊緣的背景透明效果，增強了該類圖像的用途。隨著PNG圖像的普及，越來越多的圖像編輯程序支持該格式。網(wǎng)頁多媒體元素的分類網(wǎng)頁中多媒體元素可分為音頻和視頻兩種，下面分別介紹這兩種多媒體元素在網(wǎng)頁設(shè)計中的常用格式。常用的網(wǎng)頁音頻格式主要包括WAV、MIDI、MP3、WMA四種，其特性分別如下：WAV格式：格式后綴名為.wav，是微軟公司早期開發(fā)的數(shù)字音頻格式，也稱為波形音頻文件，被Windows平臺及其他應(yīng)用程序廣泛支持。WAV的音質(zhì)與CD相差無幾，但WAV格式對存儲空間需求太大不便于交流和傳播。MIDI格式：格式后綴名為.midi，是數(shù)字音樂/電子合成樂器的統(tǒng)一國際標(biāo)準(zhǔn)。它定義了計算機音樂程序、數(shù)字合成器及其他電子設(shè)備交換音樂信號的方式，規(guī)定了不同廠家的電子樂器與計算機連接的電纜和硬件及設(shè)備間數(shù)據(jù)傳輸?shù)膮f(xié)議，可以模擬多種樂器的聲音。MP3格式：格式后綴名為.mp3，是目前最流行的一種數(shù)字音樂格式，以低采樣率對數(shù)字音頻文件進(jìn)行壓縮，將人耳根本無法察覺的音質(zhì)去除，從而把文件容量壓縮到更小同時保持較高的音質(zhì)。WMA格式：格式后綴名為.wma，是微軟公司開發(fā)的另一種互聯(lián)網(wǎng)傳播音頻格式。WMA格式是以減少數(shù)據(jù)流量但保持音質(zhì)的方法來達(dá)到更高壓縮率的，其壓縮率一般可達(dá)到1:18。此外，WMA音頻文件可通過DRM方案加入防止復(fù)制，或者加入限制播放時間和播放次數(shù)，甚至是播放機器的限制，可有力地防止盜版。常用的網(wǎng)絡(luò)視頻格式包括ASF、RM、RMVB、MOV等，此外MPEG、AVI猶豫具備較高畫質(zhì)，常常作為資源下載傳播，下面分別介紹這些視頻格式的特性：ASF格式：格式后綴名為.asf，最為Microsoft公司W(wǎng)indowsMedia的核心技術(shù)之一，具有體積小的優(yōu)點，同時也是一種綜合了音頻、視頻、圖像以及控制命令腳本等多媒體信息的視頻格式，能以網(wǎng)絡(luò)數(shù)據(jù)包的形式傳輸，無需等候下載完畢便可以即時同步播放影片，因此非常適合在網(wǎng)絡(luò)中傳輸。RM格式：格式后綴為.rm，是RealNetworks公司開發(fā)的一種流媒體視頻文件格式，主要包含RealAudio、RealVideo和RealFlash三部分。RM可以根據(jù)網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)牟煌俾手贫ú煌膲嚎s比率，在56KModem撥號上網(wǎng)的條件下，依然能夠在線實時傳送和播放。RMVB格式：格式后綴是.rmvb，這是RealNetworks公司為了彌補RM不適合高畫質(zhì)視頻存儲的缺陷而推出的新格式。其中的VB全稱VariableBitRate，意思是可改變比特率。RMVB打破了RM格式那種自始至終保持固定壓縮比的方式，引入了動態(tài)壓縮比率，將較高的比特率用于復(fù)雜的動態(tài)畫面，而在靜態(tài)畫面時則靈活地轉(zhuǎn)為較低的編碼率，合理地利用了比特率資源。MOV格式：格式后綴是.mov。MOV格式的視頻文件采用不壓縮或壓縮的方式，其壓縮算法包括Cinepak、IntelIndeoVideoR3.2和Video編碼。MPEG格式：格式后綴是.mpeg。其壓縮標(biāo)準(zhǔn)是針對運動圖像而設(shè)計的，其基本原理是在單位時間內(nèi)采集并保存第一幀信息，然后只存儲其余幀相對第一幀所發(fā)生變化的部分，從而達(dá)到最大壓縮比。此外，MPEG壓縮標(biāo)準(zhǔn)可實現(xiàn)幀之間的壓縮，平均壓縮比可達(dá)50:1，在較高的壓縮率下用統(tǒng)一格式實現(xiàn)最佳兼容性。目前支持MPEG視頻壓縮標(biāo)準(zhǔn)的主要有MPEG-1、MPEG-2、MPEG-4三種。AVI格式：格式后綴是.avi。在AVI文件中，視頻信息和伴音信息是分別存儲的，因此可以把一段AVI文件中的視頻與另一段AVI文件中的伴音合成在一起。網(wǎng)頁動畫元素在網(wǎng)頁設(shè)計中只有兩種多媒體動畫素材，一種是作為圖像衍生格式的GIF文件，另一種則是具備影音效果的Flash動畫。GIF動畫圖像

GIF格式圖像具有無損高壓縮性和支持透明背景，而除了這些優(yōu)點，GIF圖像還有一個突出的特點就是具備動畫效果。由GIF圖像衍生的一種名為GIF89α的格式類型，其最大特點是可保存多幅圖像，并借由多幅圖像逐幅讀取而產(chǎn)生動畫效果。Flash動畫

Flash動畫具有體積小、兼容性強，同時支持互動和影音效果等諸多優(yōu)點，因此自面世以來就成為一種流行的網(wǎng)絡(luò)動畫格式。

Flash動畫最明顯的特點就是矢量性的畫面效果，以及集聲音、視頻和用戶的參與于一體，極富表現(xiàn)能力。由Flash動畫制作軟件所完成的動畫文件原始格式為.fla，用戶可將其輸出為.swf文件，也就是可直接添加到網(wǎng)頁設(shè)計中的Flash動畫成品，由于輸出過程已經(jīng)過大幅度壓縮并包裝成一個獨立的可播放文件，因此網(wǎng)頁瀏覽器已支持該格式文件的情況下供人瀏覽。網(wǎng)頁配色網(wǎng)頁設(shè)計的過程就是將不同的內(nèi)容完整地集合在一個頁面上，為了產(chǎn)生精美的頁面效果，如何規(guī)劃網(wǎng)頁的版型及配色的處理在網(wǎng)頁設(shè)計工作中就顯得非常重要。由于網(wǎng)頁設(shè)計的特殊性，網(wǎng)頁配色又與其他設(shè)計配色工作有很大不同，例如會涉及網(wǎng)頁安全色的概念。為了能更好地應(yīng)用色彩來設(shè)計網(wǎng)頁，我們先來了解一下色彩的一些基礎(chǔ)知識。自然界中有多種多樣的顏色，如玫瑰是紅色的，大海是藍(lán)色的，桔子是橙色的，但這所有的顏色其實都是有3種最基本的顏色（紅色、黃色及藍(lán)色）組合而成的，這3種顏色也就是大家常說的“三原色”?，F(xiàn)實生活中的色彩可以分為彩色和非彩色，其中黑白灰屬于非彩色系列，其他的色彩都屬于彩色。任何一種彩色都具備“色相”、“明度”、和“純度”三個特征，其中非彩色只有明度屬性。色相：色彩的色相是色彩的最大特征，是指能夠比較確切地表示某種顏色色別的名稱。色彩的成分越多，色彩的色相越不鮮明。純度：色彩的純度是指色彩的純凈程度。它表示顏色中所含有色成分的比例，比例愈大，色彩愈純，比例愈小，則色彩的純度也愈小。明度：色彩的明度是指色彩的明亮純度。各種有色物體由于它們反射光量的區(qū)別就產(chǎn)生顏色的明暗強弱。色彩的明度有兩種情況：一是同一色相不同明度；二是各種顏色的不同明度。網(wǎng)頁中的色彩通常都用十六進(jìn)制來表示，如“#FF0000”表示紅色，“#00FF00”表示綠色，“#0000FF”表示藍(lán)色，“#FFFF00”表示黃色，“#FFFFF”表示白色，“#000000”表示黑色等。即每兩位為一種色彩，從左到右分別為紅、綠、藍(lán)三原色，每組色彩取值從00到FF。在網(wǎng)頁配色過程中，常使用這幾種方法。用一種色彩：指先選定一種色相，然后調(diào)整透明度或者飽和度（就是將色彩變淡或者加深），產(chǎn)生新的色彩。這樣用色的頁面看起來色彩統(tǒng)一、有層次感。用兩種色彩：先選定一種色彩，然后選擇它的對比色。這樣可以使整個頁面色彩豐富但不花哨。用一個色系：簡單的說就是用同一個感覺的色彩，例如淡藍(lán)、淡黃、淡綠或者土黃、土灰、土藍(lán)。要很好地表現(xiàn)一個網(wǎng)頁，給瀏覽者視覺上的沖擊，色彩是最好的表現(xiàn)方式。色彩是人類視覺最敏感的東西，不同色彩之間的對比會有不同的效果。網(wǎng)頁頁面的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則是“總體協(xié)調(diào)，局部對比”，也就是說，主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強烈的色彩對比。那么如何搭配顏色才能讓自己的頁面根據(jù)絢麗多彩呢？下面就對網(wǎng)頁制作中色彩的運用技巧進(jìn)行說明。確定主色：遵循主從關(guān)系，這是最普遍的色彩處理原則。在網(wǎng)頁制作過程中，首先就應(yīng)該確定整個網(wǎng)站的主色調(diào)，如果同一個頁面中運用的太多的顏色就會使整個頁面極不協(xié)調(diào)。最好從網(wǎng)站的服務(wù)對象出發(fā)，根據(jù)服務(wù)對象及網(wǎng)站的內(nèi)容來確定主色。如果想創(chuàng)建一個兒童網(wǎng)站，那么就可以以紅色或者黃色為基調(diào)。如果要創(chuàng)建一個關(guān)于茶葉的網(wǎng)站，則可以使用綠色為基調(diào)。利用相近色：在同一個網(wǎng)頁里面使用相近的顏色進(jìn)行搭配，不僅在制作過程中很容易搭配，也使瀏覽者在感觀上有一定的層次感而跳動又不會很大，往往給人一種和諧的感覺。同色彩系、明度不同或純度不同的幾種顏色搭配非常容易，比如挑選幾種深淺不同的綠色來搭配，一般頁面不會有太大的問題，但同一頁面最好不要多于4種顏色。黑白灰運用：其實在網(wǎng)頁制作中，黑白灰是慣用的主色調(diào)，合理利用它們往往能產(chǎn)生意想不到的效果。如果在用色上不好把握，可以大面積地加白、灰，小面積的加黑來與其他顏色進(jìn)行搭配。遇到純度很高的顏色，比如純藍(lán)、純黃時，這樣的搭配就很鮮艷，使視覺興奮。另外，把明度太高或降低，搭配上灰、白色，也是一種調(diào)節(jié)的方法。選擇適合內(nèi)容風(fēng)格的顏色：根據(jù)網(wǎng)頁內(nèi)容的不同，需要賦予相應(yīng)的顏色。頁面的色彩搭配：整個網(wǎng)頁中有不同的內(nèi)容，不同的內(nèi)容之間需進(jìn)行不同的搭配。認(rèn)識網(wǎng)頁安全色由于同一個頁面可能會在不同的環(huán)境中被打開瀏覽，因此網(wǎng)頁所使用的色彩必須在任何環(huán)境下都能正常顯示。網(wǎng)頁安全色就是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能正常顯示的顏色集合，而使用網(wǎng)頁安全色最為配色方案可以解決網(wǎng)頁顏色失真的問題。由于網(wǎng)頁上的顏色一般都是在電腦屏幕上顯示，作為數(shù)字顏色，跟自然色不一樣。所以網(wǎng)頁中的顏色會受到各種不同環(huán)境的影響。即使你的網(wǎng)頁使用了非常合理、非常漂亮的配色方案，但也有可能因環(huán)境的不同產(chǎn)生不同的效果。例如用戶需要通過電腦瀏覽網(wǎng)頁時，必須使用相應(yīng)的網(wǎng)頁瀏覽工具，而不同的瀏覽器內(nèi)置的調(diào)色板不一定都相同，所以不同瀏覽器所瀏覽網(wǎng)頁的顏色效果也不一樣。為了避免各種問題的發(fā)生，設(shè)計網(wǎng)頁時最好使用安全色來配色。網(wǎng)頁安全色總共包含216種顏色，因此網(wǎng)頁安全色也稱為216安全色?；镜呐渖椒ㄉ示哂袕娏业囊曈X沖擊力，不同的色彩給讓人的感官不同，所產(chǎn)生的意境、象征和情緒也不同，因此色彩的應(yīng)用要與設(shè)計主題相呼應(yīng)。漂亮的色彩在網(wǎng)頁設(shè)計中比其他任何設(shè)計要素都重要，不但能給人留下深刻的印象，同時可產(chǎn)生很好的視覺效果。因此，網(wǎng)頁設(shè)計中的配色與其他類型的設(shè)計一樣，使用太多色彩會使頁面看上去雜亂無章；若使用單一的色彩又會令頁面產(chǎn)生單調(diào)感，缺乏活力。下面簡單介紹幾種常用的色彩在網(wǎng)頁設(shè)計中的應(yīng)用搭配。白色：一種干凈的色彩，代表清潔、純真、和平，可使人聯(lián)想到雪花、沙灘、婚紗等。它雖然是一種干凈的色彩，不少網(wǎng)頁設(shè)計都應(yīng)用白色以使網(wǎng)站看起來整潔、明亮、高雅，但有些情況下若使用過多的白色將會令人感覺空洞、空虛、甚至是煩悶。黑色：是否定的、簡潔、凝重的色彩。由于其沉重、陰暗的氣息，與其他色彩配色時自然而然的強調(diào)了否定的意義。在當(dāng)代設(shè)計中，黑色也可以給人現(xiàn)代、簡潔的感覺。在網(wǎng)頁設(shè)計方面，許多時尚的、消費的、高檔的主題網(wǎng)站都愛用黑色，營造出高雅的、嚴(yán)肅的氣氛。紅色：這是一種強烈的、能夠吸引人們視線的色彩，常作為有攻擊性的、嚴(yán)格的、代表權(quán)利的色彩使用。紅色同時是充滿活力的色彩，可以讓人感覺到熱情和力量。紅色既可以作為網(wǎng)頁的主色彩，也可以作為強調(diào)色使用，但后者明顯會有更好的效果。綠色：是象征自然、安定與和平的色彩，該色彩給