网站配色与布局课件

网站配色与布局——理论部分

网站配色与布局——理论部分课程回顾使用list-style-type属性设置列表符号时，其常用属性值none、disc、circle、square、decimal分别代表什么样式？清除属性的含义是什么？定位属性的含义，及其显示效果如何？z-index属性的含义是什么？2课程回顾使用list-style-type属性设置列表符号时技能展示了解常见的网页布局形式了解网页设计配色原则3技能展示了解常见的网页布局形式3色彩的属性3-1色相色彩的相貌，用以区别色彩类别名称色相是色彩的首要特征红橙黄绿青蓝紫七色页面从红色到黄色推移，画面整体色调统一和谐4色彩的属性3-1色相红橙黄绿青蓝紫七色页面从红色到黄色推移，色彩的属性3-2纯度色彩的纯净程度加入白色后纯度的变化高纯度的色彩给人以欢快、充满朝气的感觉低纯度的色彩给人以雅致、沉稳的感觉5色彩的属性3-2纯度加入白色后纯度的变化高纯度的色彩给人以欢色彩的属性3-3明度色彩的明亮程度，体现了颜色的明暗强弱6色彩的属性3-3明度6色彩的基本知识三原色：红、绿、蓝非彩色和彩色非彩色是指黑色、白色、灰系统色彩色是指除了非彩色以外的所有色彩7色彩的基本知识三原色：红、绿、蓝7色彩的感觉2-1冷暖感觉轻重感觉进退感觉兴奋、沉静感觉红色、黄色、橙色等颜色给人温暖的感觉蓝色、青色、绿色等颜色给人寒冷的感觉浅色感觉轻，深色感觉重明度高的色彩感觉轻，明度低的色彩感觉重暖色具有前进感，冷色具有后退感明度高的色具有前进感，明度低的色具有后退感色相方面红、橙、黄等暖色，是令人兴奋的色彩蓝、蓝紫、蓝绿给人的感觉沉静明度方面明度高的色使人兴奋，明度低的色使人沉静非彩色系中的白和黑有兴奋感，灰色有沉静感纯度方面高纯度色使人兴奋，低纯度色有沉静感8色彩的感觉2-1冷暖感觉红色、黄色、橙色等颜色给人温暖的感觉色彩的感觉2-2各种色彩的心理感觉红色：视觉冲击力强，是热烈冲动的色彩橙色：具有轻快、热烈、温馨、时尚的效果黄色：明亮度最高的颜色，灿烂、辉煌绿色：温和，给人宁静的感觉青色：基本与绿色相同，只是比绿色显得冷静蓝色：最凉爽、清新、专业的色彩紫色：给人神秘、高贵的感觉白色：洁白、明快、纯真、清洁的感觉黑色：深沉、神秘、寂静、悲哀、压抑的感觉灰色：柔和、高雅的感觉9色彩的感觉2-2各种色彩的心理感觉9常用的色调4-1色调准确地表示一幅作品的画面综合观感效果包括构图、形象、色彩、明暗等因素造成的综合效果10常用的色调4-1色调10常用的色调4-2根据色彩的冷暖感觉分类暖色调：红、橙、黄等颜色使人想到阳光、烈火冷色调：绿、青、蓝等颜色称为“冷色”中性色调：以黑、白、灰三种颜色组成11常用的色调4-2根据色彩的冷暖感觉分类11常用的色调4-3页面中色彩所占比重分为主色调页面色彩的主要色调、总趋势辅色调仅次于主色调的视觉面积辅助色点睛色在小范围内加上强烈的颜色来突出主题，使页面更加生动背景色衬托环抱整体的色调，起协调、支持整体的作用12常用的色调4-3页面中色彩所占比重分为12常用的色调4-4画面中色阶的跨度大小分类高调：颜色跨度大，色彩明确，给人干脆、明快的感觉低调：对比效果弱，它阴暗、低沉、有分量中调：不强或者不弱中调对比，有丰富饱满的感觉13常用的色调4-4画面中色阶的跨度大小分类13色彩的对比色相对比明度对比纯度对比冷暖对比面积对比因色相之间的差异所形成的对比色彩之间明暗程度的差异所形成的对比不同色彩之间纯度的差异所形成的对比不同色彩之间的冷暖差异所形成的对比面积越大，明度、纯度的感觉越强面积越小，明度、纯度的感觉越低14色彩的对比色相对比因色相之间的差异所形成的对比色彩之间明暗程网页设计中色彩运用的基本原则3-1整体性15网页设计中色彩运用的基本原则3-1整体性15网页设计中色彩运用的基本原则3-2适用性根据网站类型选择合适的色彩，使内容与形式相统一16网页设计中色彩运用的基本原则3-2适用性16网页设计中色彩运用的基本原则3-3独特性网页设计要有独特的个性，大胆突破，出奇制胜17网页设计中色彩运用的基本原则3-3独特性17小结网页配色原则鲜明性网页的色彩要鲜艳，容易引人注目独特性要有与众不同的色彩，使得浏览者对网站印象强烈合适性色彩和表达的内容气氛相适应联想性不同的色彩会产生不同的联想18小结网页配色原则18页面布局概述2-1组成页面的各种元素框架：框架指页面中区分不同内容的边距或区块顶部：在网站顶部放置一个通栏，宣传、展示产品等Logo：几乎所有的网站都会有自己的Logo导航栏：显示网站的各种分支页面的分类内容：网站的正文部分页脚：在页面底部主要包括：版权、联系方式等空白区：各元素之间的间距、页面和浏览器边缘的间距顶部Logo导航栏特殊展示、广告等内容页脚空白19页面布局概述2-1组成页面的各种元素顶部Logo导航栏特殊展页面布局概述2-2页面布局条理清晰主次分明色彩对比度适当布局疏密适当20页面布局概述2-2页面布局20常见页面结构的分析7-1上下结构式通常上方为导航条21常见页面结构的分析7-1上下结构式21常见页面结构的分析7-2左右结构式又称二分栏式，清晰地分列两旁的框架结构22常见页面结构的分析7-2左右结构式22常见页面结构的分析7-3上左右结构式通常上方多数为菜单导航条下方多数为栏目及广告等，右侧为内容区域23常见页面结构的分析7-3上左右结构式23常见页面结构的分析7-4上左中右结构式又称三分栏式24常见页面结构的分析7-4上左中右结构式24常见页面结构的分析7-5不规则结构式一般为封面式或Flash式，使用图片或动画作为网站首页25常见页面结构的分析7-5不规则结构式25常见页面结构的分析7-6少见结构式为了放置更多的信息栏目和内容追求个性26常见页面结构的分析7-6少见结构式26常见页面结构的分析7-7结构式的综合应用几种布局结构的综合27常见页面结构的分析7-7结构式的综合应用27网站配色与布局——理论部分

网站配色与布局——理论部分课程回顾使用list-style-type属性设置列表符号时，其常用属性值none、disc、circle、square、decimal分别代表什么样式？清除属性的含义是什么？定位属性的含义，及其显示效果如何？z-index属性的含义是什么？29课程回顾使用list-style-type属性设置列表符号时技能展示了解常见的网页布局形式了解网页设计配色原则30技能展示了解常见的网页布局形式3色彩的属性3-1色相色彩的相貌，用以区别色彩类别名称色相是色彩的首要特征红橙黄绿青蓝紫七色页面从红色到黄色推移，画面整体色调统一和谐31色彩的属性3-1色相红橙黄绿青蓝紫七色页面从红色到黄色推移，色彩的属性3-2纯度色彩的纯净程度加入白色后纯度的变化高纯度的色彩给人以欢快、充满朝气的感觉低纯度的色彩给人以雅致、沉稳的感觉32色彩的属性3-2纯度加入白色后纯度的变化高纯度的色彩给人以欢色彩的属性3-3明度色彩的明亮程度，体现了颜色的明暗强弱33色彩的属性3-3明度6色彩的基本知识三原色：红、绿、蓝非彩色和彩色非彩色是指黑色、白色、灰系统色彩色是指除了非彩色以外的所有色彩34色彩的基本知识三原色：红、绿、蓝7色彩的感觉2-1冷暖感觉轻重感觉进退感觉兴奋、沉静感觉红色、黄色、橙色等颜色给人温暖的感觉蓝色、青色、绿色等颜色给人寒冷的感觉浅色感觉轻，深色感觉重明度高的色彩感觉轻，明度低的色彩感觉重暖色具有前进感，冷色具有后退感明度高的色具有前进感，明度低的色具有后退感色相方面红、橙、黄等暖色，是令人兴奋的色彩蓝、蓝紫、蓝绿给人的感觉沉静明度方面明度高的色使人兴奋，明度低的色使人沉静非彩色系中的白和黑有兴奋感，灰色有沉静感纯度方面高纯度色使人兴奋，低纯度色有沉静感35色彩的感觉2-1冷暖感觉红色、黄色、橙色等颜色给人温暖的感觉色彩的感觉2-2各种色彩的心理感觉红色：视觉冲击力强，是热烈冲动的色彩橙色：具有轻快、热烈、温馨、时尚的效果黄色：明亮度最高的颜色，灿烂、辉煌绿色：温和，给人宁静的感觉青色：基本与绿色相同，只是比绿色显得冷静蓝色：最凉爽、清新、专业的色彩紫色：给人神秘、高贵的感觉白色：洁白、明快、纯真、清洁的感觉黑色：深沉、神秘、寂静、悲哀、压抑的感觉灰色：柔和、高雅的感觉36色彩的感觉2-2各种色彩的心理感觉9常用的色调4-1色调准确地表示一幅作品的画面综合观感效果包括构图、形象、色彩、明暗等因素造成的综合效果37常用的色调4-1色调10常用的色调4-2根据色彩的冷暖感觉分类暖色调：红、橙、黄等颜色使人想到阳光、烈火冷色调：绿、青、蓝等颜色称为“冷色”中性色调：以黑、白、灰三种颜色组成38常用的色调4-2根据色彩的冷暖感觉分类11常用的色调4-3页面中色彩所占比重分为主色调页面色彩的主要色调、总趋势辅色调仅次于主色调的视觉面积辅助色点睛色在小范围内加上强烈的颜色来突出主题，使页面更加生动背景色衬托环抱整体的色调，起协调、支持整体的作用39常用的色调4-3页面中色彩所占比重分为12常用的色调4-4画面中色阶的跨度大小分类高调：颜色跨度大，色彩明确，给人干脆、明快的感觉低调：对比效果弱，它阴暗、低沉、有分量中调：不强或者不弱中调对比，有丰富饱满的感觉40常用的色调4-4画面中色阶的跨度大小分类13色彩的对比色相对比明度对比纯度对比冷暖对比面积对比因色相之间的差异所形成的对比色彩之间明暗程度的差异所形成的对比不同色彩之间纯度的差异所形成的对比不同色彩之间的冷暖差异所形成的对比面积越大，明度、纯度的感觉越强面积越小，明度、纯度的感觉越低41色彩的对比色相对比因色相之间的差异所形成的对比色彩之间明暗程网页设计中色彩运用的基本原则3-1整体性42网页设计中色彩运用的基本原则3-1整体性15网页设计中色彩运用的基本原则3-2适用性根据网站类型选择合适的色彩，使内容与形式相统一43网页设计中色彩运用的基本原则3-2适用性16网页设计中色彩运用的基本原则3-3独特性网页设计要有独特的个性，大胆突破，出奇制胜44网页设计中色彩运用的基本原则3-3独特性17小结网页配色原则鲜明性网页的色彩要鲜艳，容易引人注目独特性要有与众不同的色彩，使得浏览者对网站印象强烈合适性色彩和表达的内容气氛相适应联想性不同的色彩会产生不同的联想45小结网页配色原则18页面布局概述2-1组成页面的各种元素框架：框架指页面中区分不同内容的边距或区块顶部：在网站顶部放置一个通栏，宣传、展示产品等Logo：几乎所有的网站都会有自己的Logo导航栏：显示网站的各种分支页面的分类内容：网站的正文部分页脚：在页面底部主要包括：版权、联系方式等空白区：各元素之间的间距、页面和浏览器边缘的间距顶部Logo导航栏特殊展示、广告等内容页脚空白46页面布局概述2-1组成页面的各种元素顶部Logo导航栏特殊展页面布局概述2-2页面布局条理清晰主次分明色彩对比度适当布局疏密适当47页面布局概述2-2页面布局20常见页面结构的分析7-1上下结构式通常上方为导航条48常见页面结构的分析7-1上下结构式21常见页面结构的分析7-2左右结构式又称二分栏式，清晰地分列两旁的框架结构49常见页面结构的分析7-2左右结构式22常见页面结构的分析7-3上左右结构式通常上方多数为菜单导航条下方多数为栏目及广告等，右侧为内容区域