第 1章　网站设计基础
1.1　了解网站设计　2
1.1.1　什么是网站设计　2
1.1.2　网站设计的特点　2
1.2　网站设计构成元素　6
1.2.1　文字　6
1.2.2　图形符号　6
1.2.3　图像　7
1.2.4　多媒体　7
1.2.5　色彩　7
1.3　网站设计原则　8
1.3.1　以用户为中心　8
1.3.2　主题明确　9
1.3.3　视觉美观　11
1.3.4　内容与形式统一　11
1.3.5　有机的整体　12
1.4　色彩在网站设计中的作用　13
1.4.1　突出网页主题　13
1.4.2　划分视觉区域　14
1.4.3　吸引浏览者的目光　14
1.4.4　增强网站页面的艺术性　14
1.5　如何设计出好的网站　15
1.5.1　不要主动降低自己的眼光　15
1.5.2　多尝试新技术、新方法　15
1.6　如何提升网站的用户体验　16
1.6.1　用户体验包含的内容　16
1.6.2　用户体验对于网站的重要性　18
1.6.3　网站如何寻求突破　19
1.6.4　提升网站用户体验　20
第　2章 网站页面规划与元素设计
2.1　网站栏目结构与页面策划　22
2.1.1　网站栏目结构　22
2.1.2　网站栏目规划　24
2.1.3　网站页面策划　24
2.2　网站 Logo设计　25
2.2.1　网站 Logo的特点　25
2.2.2　网站 Logo的设计规范　26
2.2.3　网站 Logo的表现形式　28
2.2.4　实战分析：设计影视 网站 Logo　29
2.3　网站图标设计　31
2.3.1　了解网站图标　31
2.3.2　网站图标设计原则　31
2.3.3　网站图标应用　33
2.3.4　实战分析：设计简约实用的 网站图标　34
2.4　网站按钮设计　36
2.4.1　网站按钮的功能　36
2.4.2　如何设计出色的网站按钮　38
2.4.3　实战分析：设计游戏 网站按钮　42
2.5　网站导航设计　43
2.5.1　了解网站导航　43
2.5.2　导航在网站页面中的布局位置　45
2.5.3　网站导航设计的基本原则　49
2.5.4　实战分析：设计汽车网站 导航菜单　50
2.6　网站广告设计　53
2.6.1　网站广告的常见类型　53
2.6.2　如何设计出色的网站广告　55
2.6.3　实战分析：设计家电网站 宣传广告　56
第3　章 网站中的图形与文字排版设计
3.1　网站页面中的文字　59
3.1.1　关于字体　59
3.1.2　网页中常用的中文字体　59
3.1.3　字体大小　60
3.1.4　网页文字使用技巧　63
3.2　网页文字的排版　65
3.2.1　文字排版的易读性规则　65
3.2.2　文字排版设计常用手法　67
3.2.3　实战分析：设计手机宣传网站页面　70
3.3　图形在网站设计中的作用　73
3.4　网站图形设计类型　75
3.4.1　插图　75
3.4.2　图形符号　75
3.4.3　照片　76
3.4.4　页面分割　77
3.4.5　立体图形　77
3.5　网站图片的排列布局形式　78
3.5.1　传统矩阵展示　78
3.5.2　大小不一的矩阵展示　79
3.5.3　瀑布流展示　79
3.5.4　下一张图片预览　79
3.5.5　实战分析：设计产品促销活动页面　80
第4　章 网站页面布局与视觉风格
4.1　了解网站页面布局　85
4.1.1　网站页面布局的目的　85
4.1.2　网站页面布局的操作顺序　86
4.2　网页布局的基本方法　86
4.2.1　网页布局的设计　87
4.2.2　网页布局的构成原则　87
4.2.3　实战分析：设计手机宣传网站页面　88
4.3　根据整体内容位置决定的网页视觉布局　91
4.3.1　满屏式页面布局　91
4.3.2　两栏式页面布局　92
4.3.3　三栏式页面布局　95
4.3.4　水平和垂直居中的页面布局　96
4.4　页面分割方向的布局方式　97
4.4.1　纵向分割　97
4.4.2　横向分割　98
4.4.3　纵向与横向复合型　98
4.4.4　运用固定区域的设计　99
4.4.5　实战分析：设计类网站页面　100
4.5　初始页面的网页布局类型　102
4.6　网页布局的要点　104
第5　章 网站页面视觉布局形态
5.1　网页功能与网页形态哪个更重要　107
5.2　网页布局形态的含义及情感　108
5.2.1　点　108
5.2.2　圆　109
5.2.3　三角形　110
5.2.4　矩形　111
5.2.5　菱形　112
5.2.6　直线　113
5.2.7　斜线　114
5.2.8　曲线　115
5.2.9　自由曲线　116
5.2.10　实战分析：设计产品促销页面　117
5.3　大众化网页布局形态　120
5.4　个性化网页布局形态　122
5.5　常见网页视觉风格解析　123
5.5.1　简洁风格　123
5.5.2　极简风格　124
5.5.3　扁平化风格　124
5.5.4　插画风格　125
5.5.5　怀旧风格　126
5.5.6　照片风格　127
5.5.7　立体风格　128
5.5.8　大字体风格　129
5.5.9　实战分析：设计企业网站页面　130
第6　章 网页配色基础
6.1　色彩基础　134
6.1.1　色彩的产生　134
6.1.2　光源色与物体色　135
6.2　RGB 颜色与CMYK 颜色的区别　135
6.2.1　RGB 颜色　136
6.2.2　CMYK 颜色　137
6.3　色彩的属性　137
6.3.1　色相　137
6.3.2　明度　138
6.3.3　饱和度　138
6.3.4　色调　139
6.3.5　无彩色与有彩色　139
6.4　网页配色的联想作用　140
6.4.1　色彩联想和心理效果　140
6.4.2　红色　141
6.4.3　粉色　141
6.4.4　橙色　141
6.4.5　黄色　142
6.4.6　棕色　142
6.4.7　绿色　142
6.4.8　蓝色　143
6.4.9　紫色　143
6.4.10　黑色　144
6.4.11　白色　144
6.4.12　灰色　144
6.4.13　实战分析：设计珠宝首饰网站页面　145
6.5　网页配色常见问题　147
6.5.1　如何培养色彩的敏感度　147
6.5.2　通用配色理论是否适用　148
6.5.3　配色时应该选择双色还是多色组合　148
6.5.4　尽可能使用两至三种颜色进行搭配　149
6.5.5　如何快速实现完美的配色　149
6.5.6　实战分析：设计汽车宣传网站页面　150
第7　章 网页元素的基本配色
7.1　网页配色的基本方法　154
7.1.1　主题色　154
7.1.2　背景色　155
7.1.3　辅助色　156
7.1.4　点缀色　157
7.2　网页文本配色　158
7.2.1　网页与文本的配色关系　158
7.2.2　良好的网页文本配色　159
7.3　网页元素色彩搭配160
7.3.1　Logo 与网页广告　160
7.3.2　导航菜单　161
7.3.3　背景与文字　161
7.3.4　链接文字　162
7.3.5　实战分析：设计咖啡馆宣传网站页面　162
7.4　根据受众群体选择网页配色　165
7.4.1　不同性别的色彩偏好　165
7.4.2　不同年龄的色彩偏好　166
7.5　根据商品销售阶段选择网页配色　168
7.5.1　新产品上市期的网页配色　168
7.5.2　产品拓展期的网页配色　168
7.5.3　产品稳定销售期的网页配色　169
7.5.4　产品衰退期的网页配色　169
7.5.5　实战分析：设计酒类产品宣传网站页面　170
7.6　如何打造成功的网页配色　172
7.6.1　遵循色彩的基本原理　172
7.6.2　考虑网页的特点　173
7.6.3　灵活应用配色技巧　174
7.6.4　避免配色混乱　175
7.6.5　实战分析：设计产品宣传网站页面　176
第8　章 网页配色的方法
8.1　基于色相进行配色　180
8.1.1　基于色相的配色关系　180
8.1.2　相反色相、类似色调配色　181
8.1.3　相反色相、相反色调配色　181
8.1.4　渐变配色　182
8.1.5　无彩色和彩色　183
8.2　基于色调进行配色　183
8.2.1　基于色调的配色关系　184
8.2.2　同一色相或类似色相、类似色调配色　184
8.2.3　同一色相或类似色相、相反色调配色　185
8.3　色彩感觉在网页配色中的应用　186
8.3.1　冷暖感　186
8.3.2　轻重感　188
8.3.3　软硬感　189
8.3.4　前后感　189
8.3.5　大小感　190
8.3.6　华丽感与朴实感　191
8.3.7　宁静感与兴奋感　192
8.3.8　活力感与庄重感　193
8.3.9　实战分析：设计计算机产品促销广告页面　193
8.4　色彩对比的配色　196
8.4.1　冷暖对比　196
8.4.2　面积对比　198
8.4.3　色相对比　200
8.4.4　同时对比　204
8.4.5　连续对比　204
8.4.6　实战分析：设计运动鞋宣传网站页面　205
第9　章 网页配色的技巧
9.1　突出主题的配色技巧　209
9.1.1　明确主题焦点　209
9.1.2　提高饱和度　209
9.1.3　增大明度差　210
9.1.4　增强色相　211
9.1.5　增强点缀色　212
9.1.6　抑制辅助色或背景　213
9.2　整体融合的配色技巧　214
9.2.1　接近色相　215
9.2.2　统一明度　216
9.2.3　接近色调　216
9.2.4　添加类似色或同类色　217
9.2.5　网页产生稳定感　217
9.2.6　实战分析：设计房地产宣传网站页面　218
9.3　网页配色印象　221
9.3.1　女性化的网站配色　221
9.3.2　男性化的网站配色　222
9.3.3　稳定安静的网站配色　223
9.3.4　兴奋激昂的网站配色　224
9.3.5　轻快律动的网站配色　225
9.3.6　清爽和风的网站配色　226
9.3.7　浪漫甜美的网站配色　227
9.3.8　传统稳重的网站配色　229
9.3.9　雍容华贵的网站配色　230
9.3.10　实战分析：设计清新自然的环保网站页面　231
9.4　使用配色软件进行配色　233
9.4.1　ColorKey XP 软件　233
9.4.2　Color Scheme Designer　235
9.4.3　Check My Colours　236
9.4.4　ColorJack　236