網(wǎng)站配色與布局課件

網(wǎng)站配色與布局——理論部分

網(wǎng)站配色與布局——理論部分課程回顧使用list-style-type屬性設(shè)置列表符號(hào)時(shí)，其常用屬性值none、disc、circle、square、decimal分別代表什么樣式？清除屬性的含義是什么？定位屬性的含義，及其顯示效果如何？z-index屬性的含義是什么？2課程回顧使用list-style-type屬性設(shè)置列表符號(hào)時(shí)技能展示了解常見(jiàn)的網(wǎng)頁(yè)布局形式了解網(wǎng)頁(yè)設(shè)計(jì)配色原則3技能展示了解常見(jiàn)的網(wǎng)頁(yè)布局形式3色彩的屬性3-1色相色彩的相貌，用以區(qū)別色彩類別名稱色相是色彩的首要特征紅橙黃綠青藍(lán)紫七色頁(yè)面從紅色到黃色推移，畫(huà)面整體色調(diào)統(tǒng)一和諧4色彩的屬性3-1色相紅橙黃綠青藍(lán)紫七色頁(yè)面從紅色到黃色推移，色彩的屬性3-2純度色彩的純凈程度加入白色后純度的變化高純度的色彩給人以歡快、充滿朝氣的感覺(jué)低純度的色彩給人以雅致、沉穩(wěn)的感覺(jué)5色彩的屬性3-2純度加入白色后純度的變化高純度的色彩給人以歡色彩的屬性3-3明度色彩的明亮程度，體現(xiàn)了顏色的明暗強(qiáng)弱6色彩的屬性3-3明度6色彩的基本知識(shí)三原色：紅、綠、藍(lán)非彩色和彩色非彩色是指黑色、白色、灰系統(tǒng)色彩色是指除了非彩色以外的所有色彩7色彩的基本知識(shí)三原色：紅、綠、藍(lán)7色彩的感覺(jué)2-1冷暖感覺(jué)輕重感覺(jué)進(jìn)退感覺(jué)興奮、沉靜感覺(jué)紅色、黃色、橙色等顏色給人溫暖的感覺(jué)藍(lán)色、青色、綠色等顏色給人寒冷的感覺(jué)淺色感覺(jué)輕，深色感覺(jué)重明度高的色彩感覺(jué)輕，明度低的色彩感覺(jué)重暖色具有前進(jìn)感，冷色具有后退感明度高的色具有前進(jìn)感，明度低的色具有后退感色相方面紅、橙、黃等暖色，是令人興奮的色彩藍(lán)、藍(lán)紫、藍(lán)綠給人的感覺(jué)沉靜明度方面明度高的色使人興奮，明度低的色使人沉靜非彩色系中的白和黑有興奮感，灰色有沉靜感純度方面高純度色使人興奮，低純度色有沉靜感8色彩的感覺(jué)2-1冷暖感覺(jué)紅色、黃色、橙色等顏色給人溫暖的感覺(jué)色彩的感覺(jué)2-2各種色彩的心理感覺(jué)紅色：視覺(jué)沖擊力強(qiáng)，是熱烈沖動(dòng)的色彩橙色：具有輕快、熱烈、溫馨、時(shí)尚的效果黃色：明亮度最高的顏色，燦爛、輝煌綠色：溫和，給人寧?kù)o的感覺(jué)青色：基本與綠色相同，只是比綠色顯得冷靜藍(lán)色：最涼爽、清新、專業(yè)的色彩紫色：給人神秘、高貴的感覺(jué)白色：潔白、明快、純真、清潔的感覺(jué)黑色：深沉、神秘、寂靜、悲哀、壓抑的感覺(jué)灰色：柔和、高雅的感覺(jué)9色彩的感覺(jué)2-2各種色彩的心理感覺(jué)9常用的色調(diào)4-1色調(diào)準(zhǔn)確地表示一幅作品的畫(huà)面綜合觀感效果包括構(gòu)圖、形象、色彩、明暗等因素造成的綜合效果10常用的色調(diào)4-1色調(diào)10常用的色調(diào)4-2根據(jù)色彩的冷暖感覺(jué)分類暖色調(diào)：紅、橙、黃等顏色使人想到陽(yáng)光、烈火冷色調(diào)：綠、青、藍(lán)等顏色稱為“冷色”中性色調(diào)：以黑、白、灰三種顏色組成11常用的色調(diào)4-2根據(jù)色彩的冷暖感覺(jué)分類11常用的色調(diào)4-3頁(yè)面中色彩所占比重分為主色調(diào)頁(yè)面色彩的主要色調(diào)、總趨勢(shì)輔色調(diào)僅次于主色調(diào)的視覺(jué)面積輔助色點(diǎn)睛色在小范圍內(nèi)加上強(qiáng)烈的顏色來(lái)突出主題，使頁(yè)面更加生動(dòng)背景色襯托環(huán)抱整體的色調(diào)，起協(xié)調(diào)、支持整體的作用12常用的色調(diào)4-3頁(yè)面中色彩所占比重分為12常用的色調(diào)4-4畫(huà)面中色階的跨度大小分類高調(diào)：顏色跨度大，色彩明確，給人干脆、明快的感覺(jué)低調(diào)：對(duì)比效果弱，它陰暗、低沉、有分量中調(diào)：不強(qiáng)或者不弱中調(diào)對(duì)比，有豐富飽滿的感覺(jué)13常用的色調(diào)4-4畫(huà)面中色階的跨度大小分類13色彩的對(duì)比色相對(duì)比明度對(duì)比純度對(duì)比冷暖對(duì)比面積對(duì)比因色相之間的差異所形成的對(duì)比色彩之間明暗程度的差異所形成的對(duì)比不同色彩之間純度的差異所形成的對(duì)比不同色彩之間的冷暖差異所形成的對(duì)比面積越大，明度、純度的感覺(jué)越強(qiáng)面積越小，明度、純度的感覺(jué)越低14色彩的對(duì)比色相對(duì)比因色相之間的差異所形成的對(duì)比色彩之間明暗程網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-1整體性15網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-1整體性15網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-2適用性根據(jù)網(wǎng)站類型選擇合適的色彩，使內(nèi)容與形式相統(tǒng)一16網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-2適用性16網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-3獨(dú)特性網(wǎng)頁(yè)設(shè)計(jì)要有獨(dú)特的個(gè)性，大膽突破，出奇制勝17網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-3獨(dú)特性17小結(jié)網(wǎng)頁(yè)配色原則鮮明性網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目獨(dú)特性要有與眾不同的色彩，使得瀏覽者對(duì)網(wǎng)站印象強(qiáng)烈合適性色彩和表達(dá)的內(nèi)容氣氛相適應(yīng)聯(lián)想性不同的色彩會(huì)產(chǎn)生不同的聯(lián)想18小結(jié)網(wǎng)頁(yè)配色原則18頁(yè)面布局概述2-1組成頁(yè)面的各種元素框架：框架指頁(yè)面中區(qū)分不同內(nèi)容的邊距或區(qū)塊頂部：在網(wǎng)站頂部放置一個(gè)通欄，宣傳、展示產(chǎn)品等Logo：幾乎所有的網(wǎng)站都會(huì)有自己的Logo導(dǎo)航欄：顯示網(wǎng)站的各種分支頁(yè)面的分類內(nèi)容：網(wǎng)站的正文部分頁(yè)腳：在頁(yè)面底部主要包括：版權(quán)、聯(lián)系方式等空白區(qū)：各元素之間的間距、頁(yè)面和瀏覽器邊緣的間距頂部Logo導(dǎo)航欄特殊展示、廣告等內(nèi)容頁(yè)腳空白19頁(yè)面布局概述2-1組成頁(yè)面的各種元素頂部Logo導(dǎo)航欄特殊展頁(yè)面布局概述2-2頁(yè)面布局條理清晰主次分明色彩對(duì)比度適當(dāng)布局疏密適當(dāng)20頁(yè)面布局概述2-2頁(yè)面布局20常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-1上下結(jié)構(gòu)式通常上方為導(dǎo)航條21常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-1上下結(jié)構(gòu)式21常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-2左右結(jié)構(gòu)式又稱二分欄式，清晰地分列兩旁的框架結(jié)構(gòu)22常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-2左右結(jié)構(gòu)式22常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-3上左右結(jié)構(gòu)式通常上方多數(shù)為菜單導(dǎo)航條下方多數(shù)為欄目及廣告等，右側(cè)為內(nèi)容區(qū)域23常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-3上左右結(jié)構(gòu)式23常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-4上左中右結(jié)構(gòu)式又稱三分欄式24常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-4上左中右結(jié)構(gòu)式24常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-5不規(guī)則結(jié)構(gòu)式一般為封面式或Flash式，使用圖片或動(dòng)畫(huà)作為網(wǎng)站首頁(yè)25常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-5不規(guī)則結(jié)構(gòu)式25常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-6少見(jiàn)結(jié)構(gòu)式為了放置更多的信息欄目和內(nèi)容追求個(gè)性26常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-6少見(jiàn)結(jié)構(gòu)式26常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-7結(jié)構(gòu)式的綜合應(yīng)用幾種布局結(jié)構(gòu)的綜合27常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-7結(jié)構(gòu)式的綜合應(yīng)用27網(wǎng)站配色與布局——理論部分

網(wǎng)站配色與布局——理論部分課程回顧使用list-style-type屬性設(shè)置列表符號(hào)時(shí)，其常用屬性值none、disc、circle、square、decimal分別代表什么樣式？清除屬性的含義是什么？定位屬性的含義，及其顯示效果如何？z-index屬性的含義是什么？29課程回顧使用list-style-type屬性設(shè)置列表符號(hào)時(shí)技能展示了解常見(jiàn)的網(wǎng)頁(yè)布局形式了解網(wǎng)頁(yè)設(shè)計(jì)配色原則30技能展示了解常見(jiàn)的網(wǎng)頁(yè)布局形式3色彩的屬性3-1色相色彩的相貌，用以區(qū)別色彩類別名稱色相是色彩的首要特征紅橙黃綠青藍(lán)紫七色頁(yè)面從紅色到黃色推移，畫(huà)面整體色調(diào)統(tǒng)一和諧31色彩的屬性3-1色相紅橙黃綠青藍(lán)紫七色頁(yè)面從紅色到黃色推移，色彩的屬性3-2純度色彩的純凈程度加入白色后純度的變化高純度的色彩給人以歡快、充滿朝氣的感覺(jué)低純度的色彩給人以雅致、沉穩(wěn)的感覺(jué)32色彩的屬性3-2純度加入白色后純度的變化高純度的色彩給人以歡色彩的屬性3-3明度色彩的明亮程度，體現(xiàn)了顏色的明暗強(qiáng)弱33色彩的屬性3-3明度6色彩的基本知識(shí)三原色：紅、綠、藍(lán)非彩色和彩色非彩色是指黑色、白色、灰系統(tǒng)色彩色是指除了非彩色以外的所有色彩34色彩的基本知識(shí)三原色：紅、綠、藍(lán)7色彩的感覺(jué)2-1冷暖感覺(jué)輕重感覺(jué)進(jìn)退感覺(jué)興奮、沉靜感覺(jué)紅色、黃色、橙色等顏色給人溫暖的感覺(jué)藍(lán)色、青色、綠色等顏色給人寒冷的感覺(jué)淺色感覺(jué)輕，深色感覺(jué)重明度高的色彩感覺(jué)輕，明度低的色彩感覺(jué)重暖色具有前進(jìn)感，冷色具有后退感明度高的色具有前進(jìn)感，明度低的色具有后退感色相方面紅、橙、黃等暖色，是令人興奮的色彩藍(lán)、藍(lán)紫、藍(lán)綠給人的感覺(jué)沉靜明度方面明度高的色使人興奮，明度低的色使人沉靜非彩色系中的白和黑有興奮感，灰色有沉靜感純度方面高純度色使人興奮，低純度色有沉靜感35色彩的感覺(jué)2-1冷暖感覺(jué)紅色、黃色、橙色等顏色給人溫暖的感覺(jué)色彩的感覺(jué)2-2各種色彩的心理感覺(jué)紅色：視覺(jué)沖擊力強(qiáng)，是熱烈沖動(dòng)的色彩橙色：具有輕快、熱烈、溫馨、時(shí)尚的效果黃色：明亮度最高的顏色，燦爛、輝煌綠色：溫和，給人寧?kù)o的感覺(jué)青色：基本與綠色相同，只是比綠色顯得冷靜藍(lán)色：最涼爽、清新、專業(yè)的色彩紫色：給人神秘、高貴的感覺(jué)白色：潔白、明快、純真、清潔的感覺(jué)黑色：深沉、神秘、寂靜、悲哀、壓抑的感覺(jué)灰色：柔和、高雅的感覺(jué)36色彩的感覺(jué)2-2各種色彩的心理感覺(jué)9常用的色調(diào)4-1色調(diào)準(zhǔn)確地表示一幅作品的畫(huà)面綜合觀感效果包括構(gòu)圖、形象、色彩、明暗等因素造成的綜合效果37常用的色調(diào)4-1色調(diào)10常用的色調(diào)4-2根據(jù)色彩的冷暖感覺(jué)分類暖色調(diào)：紅、橙、黃等顏色使人想到陽(yáng)光、烈火冷色調(diào)：綠、青、藍(lán)等顏色稱為“冷色”中性色調(diào)：以黑、白、灰三種顏色組成38常用的色調(diào)4-2根據(jù)色彩的冷暖感覺(jué)分類11常用的色調(diào)4-3頁(yè)面中色彩所占比重分為主色調(diào)頁(yè)面色彩的主要色調(diào)、總趨勢(shì)輔色調(diào)僅次于主色調(diào)的視覺(jué)面積輔助色點(diǎn)睛色在小范圍內(nèi)加上強(qiáng)烈的顏色來(lái)突出主題，使頁(yè)面更加生動(dòng)背景色襯托環(huán)抱整體的色調(diào)，起協(xié)調(diào)、支持整體的作用39常用的色調(diào)4-3頁(yè)面中色彩所占比重分為12常用的色調(diào)4-4畫(huà)面中色階的跨度大小分類高調(diào)：顏色跨度大，色彩明確，給人干脆、明快的感覺(jué)低調(diào)：對(duì)比效果弱，它陰暗、低沉、有分量中調(diào)：不強(qiáng)或者不弱中調(diào)對(duì)比，有豐富飽滿的感覺(jué)40常用的色調(diào)4-4畫(huà)面中色階的跨度大小分類13色彩的對(duì)比色相對(duì)比明度對(duì)比純度對(duì)比冷暖對(duì)比面積對(duì)比因色相之間的差異所形成的對(duì)比色彩之間明暗程度的差異所形成的對(duì)比不同色彩之間純度的差異所形成的對(duì)比不同色彩之間的冷暖差異所形成的對(duì)比面積越大，明度、純度的感覺(jué)越強(qiáng)面積越小，明度、純度的感覺(jué)越低41色彩的對(duì)比色相對(duì)比因色相之間的差異所形成的對(duì)比色彩之間明暗程網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-1整體性42網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-1整體性15網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-2適用性根據(jù)網(wǎng)站類型選擇合適的色彩，使內(nèi)容與形式相統(tǒng)一43網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-2適用性16網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-3獨(dú)特性網(wǎng)頁(yè)設(shè)計(jì)要有獨(dú)特的個(gè)性，大膽突破，出奇制勝44網(wǎng)頁(yè)設(shè)計(jì)中色彩運(yùn)用的基本原則3-3獨(dú)特性17小結(jié)網(wǎng)頁(yè)配色原則鮮明性網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目獨(dú)特性要有與眾不同的色彩，使得瀏覽者對(duì)網(wǎng)站印象強(qiáng)烈合適性色彩和表達(dá)的內(nèi)容氣氛相適應(yīng)聯(lián)想性不同的色彩會(huì)產(chǎn)生不同的聯(lián)想45小結(jié)網(wǎng)頁(yè)配色原則18頁(yè)面布局概述2-1組成頁(yè)面的各種元素框架：框架指頁(yè)面中區(qū)分不同內(nèi)容的邊距或區(qū)塊頂部：在網(wǎng)站頂部放置一個(gè)通欄，宣傳、展示產(chǎn)品等Logo：幾乎所有的網(wǎng)站都會(huì)有自己的Logo導(dǎo)航欄：顯示網(wǎng)站的各種分支頁(yè)面的分類內(nèi)容：網(wǎng)站的正文部分頁(yè)腳：在頁(yè)面底部主要包括：版權(quán)、聯(lián)系方式等空白區(qū)：各元素之間的間距、頁(yè)面和瀏覽器邊緣的間距頂部Logo導(dǎo)航欄特殊展示、廣告等內(nèi)容頁(yè)腳空白46頁(yè)面布局概述2-1組成頁(yè)面的各種元素頂部Logo導(dǎo)航欄特殊展頁(yè)面布局概述2-2頁(yè)面布局條理清晰主次分明色彩對(duì)比度適當(dāng)布局疏密適當(dāng)47頁(yè)面布局概述2-2頁(yè)面布局20常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-1上下結(jié)構(gòu)式通常上方為導(dǎo)航條48常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-1上下結(jié)構(gòu)式21常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-2左右結(jié)構(gòu)式又稱二分欄式，清晰地分列兩旁的框架結(jié)構(gòu)49常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-2左右結(jié)構(gòu)式22常見(jiàn)頁(yè)面結(jié)構(gòu)的分析7-3上左右結(jié)構(gòu)式通常上方多數(shù)為菜單導(dǎo)航條下方多數(shù)為欄目及廣告等，右側(cè)為內(nèi)容區(qū)域