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

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