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