漫談網(wǎng)站裝飾風(fēng)格課件

網(wǎng)站裝飾風(fēng)格網(wǎng)站裝飾風(fēng)格1蒂姆·伯納斯·李（TimBerners-Lee）蒂姆·伯納斯·李（TimBerners-Lee）2漫談網(wǎng)站裝飾風(fēng)格課件3網(wǎng)頁裝飾之設(shè)計(jì)布局網(wǎng)頁裝飾之設(shè)計(jì)布局4單頁布局單頁布局就是使用一個(gè)單獨(dú)的網(wǎng)頁來呈現(xiàn)網(wǎng)頁的內(nèi)容。這種設(shè)計(jì)比較復(fù)雜優(yōu)點(diǎn)：它用豐富的圖像和生動(dòng)的動(dòng)畫效果來吸引大量的訪問者。圖像加載比較多，所以打開的時(shí)間會(huì)長一點(diǎn)。單頁布局單頁布局就是使用一個(gè)單獨(dú)的網(wǎng)頁來呈現(xiàn)網(wǎng)頁的內(nèi)容。5多欄布局

多欄布局可能是一個(gè)復(fù)雜的設(shè)計(jì)。優(yōu)點(diǎn)：它們?yōu)榭梢姷木W(wǎng)站導(dǎo)航提供了更好的瀏覽，從而使得用戶可以快速地找到他們想要的信息。這種布局能讓訪問者在網(wǎng)站上停留的時(shí)間盡可能的長，又能更簡單的找到內(nèi)容。多欄布局

多欄布局可能是一個(gè)復(fù)雜的設(shè)計(jì)。優(yōu)點(diǎn)：它們?yōu)榭梢姷?巨型插圖和充滿活力的圖形

就像商家在網(wǎng)站上發(fā)布巨型廣告一樣。在網(wǎng)站裝飾中，巨型插圖越來越受到歡迎。優(yōu)點(diǎn)：它們更具吸引力，并且更加生動(dòng)，也就更容易被訪問者記住。巨型插圖和充滿活力的圖形

就像商家在網(wǎng)站上發(fā)布巨型廣告7

現(xiàn)在很多網(wǎng)頁都采用社會(huì)性圖標(biāo)來裝飾在內(nèi)容旁邊。社會(huì)性圖標(biāo)受到很多網(wǎng)頁設(shè)計(jì)和訪問者的親睞社會(huì)設(shè)計(jì)元素

現(xiàn)在很多網(wǎng)頁都采用社會(huì)性圖標(biāo)來裝飾在內(nèi)容旁邊。社會(huì)性圖標(biāo)受8網(wǎng)頁裝飾之配色優(yōu)秀的網(wǎng)頁裝飾需要：直觀的設(shè)計(jì)，優(yōu)秀的配色，良好的交互性和快的響應(yīng)速度。（新聞網(wǎng)站的交互性，可以直接吸引大眾上網(wǎng)。對一則有爭議性的電視廣告，就可邀請讀者發(fā)表意見，或者讓讀者投票。）網(wǎng)頁裝飾之配色優(yōu)秀的網(wǎng)頁裝飾需要：直觀的設(shè)計(jì)，優(yōu)秀的配9簡單的配色方案純色的背景直觀簡潔，純色可以有很多種表達(dá)方式。當(dāng)然黑白灰不是很給力，可以多考慮下紅綠黃作為網(wǎng)頁主色調(diào)。這上面的網(wǎng)頁就是簡單的綠色，通過調(diào)節(jié)透明度設(shè)計(jì)而出。這個(gè)網(wǎng)頁只用了CSS和Javascript。簡單的配色方案純色的背景直觀簡潔，純色可以有很多種表達(dá)方式。10CSS級(jí)聯(lián)樣式表（CascadingStyleSheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（StyleSheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。

通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。CSS級(jí)聯(lián)樣式表（CascadingStyleSheet11上面這個(gè)網(wǎng)站獨(dú)特的紅色和文字設(shè)計(jì)使整個(gè)網(wǎng)頁給人一種很強(qiáng)的視覺沖擊上面這個(gè)網(wǎng)站獨(dú)特的紅色和文字設(shè)計(jì)使整個(gè)網(wǎng)頁給人一種很強(qiáng)的視覺12目前用大背景圖裝飾網(wǎng)頁越來越受到歡迎，這些背景圖像一般是高分辨率，覆蓋這個(gè)網(wǎng)頁，高清照片是個(gè)迅速抓住訪問者的好方式，它可以產(chǎn)生極具沖擊力的視覺效果。上面這個(gè)網(wǎng)站就是使用了高分辨率的圖片作為網(wǎng)站的背景，網(wǎng)站主色調(diào)是黃色。使用大背景圖裝飾網(wǎng)頁目前用大背景圖裝飾網(wǎng)頁越來越受到歡迎，這些背景圖像一般是高分13漫談網(wǎng)站裝飾風(fēng)格課件14漫談網(wǎng)站裝飾風(fēng)格課件15漫談網(wǎng)站裝飾風(fēng)格課件16漫談網(wǎng)站裝飾風(fēng)格課件17漫談網(wǎng)站裝飾風(fēng)格課件18漫談網(wǎng)站裝飾風(fēng)格課件19漫談網(wǎng)站裝飾風(fēng)格課件20網(wǎng)站裝飾風(fēng)格網(wǎng)站裝飾風(fēng)格21蒂姆·伯納斯·李（TimBerners-Lee）蒂姆·伯納斯·李（TimBerners-Lee）22漫談網(wǎng)站裝飾風(fēng)格課件23網(wǎng)頁裝飾之設(shè)計(jì)布局網(wǎng)頁裝飾之設(shè)計(jì)布局24單頁布局單頁布局就是使用一個(gè)單獨(dú)的網(wǎng)頁來呈現(xiàn)網(wǎng)頁的內(nèi)容。這種設(shè)計(jì)比較復(fù)雜優(yōu)點(diǎn)：它用豐富的圖像和生動(dòng)的動(dòng)畫效果來吸引大量的訪問者。圖像加載比較多，所以打開的時(shí)間會(huì)長一點(diǎn)。單頁布局單頁布局就是使用一個(gè)單獨(dú)的網(wǎng)頁來呈現(xiàn)網(wǎng)頁的內(nèi)容。25多欄布局

多欄布局可能是一個(gè)復(fù)雜的設(shè)計(jì)。優(yōu)點(diǎn)：它們?yōu)榭梢姷木W(wǎng)站導(dǎo)航提供了更好的瀏覽，從而使得用戶可以快速地找到他們想要的信息。這種布局能讓訪問者在網(wǎng)站上停留的時(shí)間盡可能的長，又能更簡單的找到內(nèi)容。多欄布局

多欄布局可能是一個(gè)復(fù)雜的設(shè)計(jì)。優(yōu)點(diǎn)：它們?yōu)榭梢姷?6巨型插圖和充滿活力的圖形

就像商家在網(wǎng)站上發(fā)布巨型廣告一樣。在網(wǎng)站裝飾中，巨型插圖越來越受到歡迎。優(yōu)點(diǎn)：它們更具吸引力，并且更加生動(dòng)，也就更容易被訪問者記住。巨型插圖和充滿活力的圖形

就像商家在網(wǎng)站上發(fā)布巨型廣告27

現(xiàn)在很多網(wǎng)頁都采用社會(huì)性圖標(biāo)來裝飾在內(nèi)容旁邊。社會(huì)性圖標(biāo)受到很多網(wǎng)頁設(shè)計(jì)和訪問者的親睞社會(huì)設(shè)計(jì)元素

現(xiàn)在很多網(wǎng)頁都采用社會(huì)性圖標(biāo)來裝飾在內(nèi)容旁邊。社會(huì)性圖標(biāo)受28網(wǎng)頁裝飾之配色優(yōu)秀的網(wǎng)頁裝飾需要：直觀的設(shè)計(jì)，優(yōu)秀的配色，良好的交互性和快的響應(yīng)速度。（新聞網(wǎng)站的交互性，可以直接吸引大眾上網(wǎng)。對一則有爭議性的電視廣告，就可邀請讀者發(fā)表意見，或者讓讀者投票。）網(wǎng)頁裝飾之配色優(yōu)秀的網(wǎng)頁裝飾需要：直觀的設(shè)計(jì)，優(yōu)秀的配29簡單的配色方案純色的背景直觀簡潔，純色可以有很多種表達(dá)方式。當(dāng)然黑白灰不是很給力，可以多考慮下紅綠黃作為網(wǎng)頁主色調(diào)。這上面的網(wǎng)頁就是簡單的綠色，通過調(diào)節(jié)透明度設(shè)計(jì)而出。這個(gè)網(wǎng)頁只用了CSS和Javascript。簡單的配色方案純色的背景直觀簡潔，純色可以有很多種表達(dá)方式。30CSS級(jí)聯(lián)樣式表（CascadingStyleSheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（StyleSheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。

通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。CSS級(jí)聯(lián)樣式表（CascadingStyleSheet31上面這個(gè)網(wǎng)站獨(dú)特的紅色和文字設(shè)計(jì)使整個(gè)網(wǎng)頁給人一種很強(qiáng)的視覺沖擊上面這個(gè)網(wǎng)站獨(dú)特的紅色和文字設(shè)計(jì)使整個(gè)網(wǎng)頁給人一種很強(qiáng)的視覺32目前用大背景圖裝飾網(wǎng)頁越來越受到歡迎，這些背景圖像一般是高分辨率，覆蓋這個(gè)網(wǎng)頁，高清照片是個(gè)迅速抓住訪問者的好方式，它可以產(chǎn)生極具沖擊力的視覺效果。上面這個(gè)網(wǎng)站就是使用了高分辨率的圖片作為網(wǎng)站的背景，網(wǎng)站主色調(diào)是黃色。