第1篇 网页设计与布局 1
第1章 网页设计入门基础 1
1.1 网页设计的原则 2
1.1.1 了解用户需要 2
1.1.2 内容与形式的统一 2
1.1.3 主题鲜明 3
1.1.4 易用性 4
1.1.5 整体统一 5
1.1.6 对比性 6
1.2 网页设计的定位 6
1.2.1 什么才是好的网页设计 7
1.2.2 怎样做好网页设计 7
1.3 色彩在网页设计中的重要性 9
第2章 网站策划与网页布局 10
2.1 网站栏目和页面设计策划 11
2.1.1 为什么要进行策划 11
2.1.2 网站的栏目策划 11
2.1.3 网站的页面策划 12
2.2 网站布局的基本元素 13
2.2.1 网站Logo 13
2.2.2 网站Banner 14
2.2.3 导航栏 14
2.2.4 主体内容 14
2.2.5 文本 15
2.2.6 图像 15
2.2.7 Flash动画 16
2.2.8 页脚 16
2.2.9 广告区 16
2.3 版面布局设计 16
2.3.1 版面布局原则 17
2.3.2 纸上布局 18
2.3.3 软件布局 18
2.4 常见的版面布局形式 19
2.4.1 “国”字形布局 19
2.4.2 “厂”字形布局 19
2.4.3 “框架”型布局 19
2.4.4 “封面”型布局 20
2.4.5 Flash型布局 20
2.5 页面排版布局趋势 20
第3章 网站页面的视觉元素设计 22
3.1 网页构成 23
3.1.1 点的应用 23
3.1.2 线的应用 23
3.1.3 面的应用 24
3.2 页面中的文字设计 24
3.2.1 文字的字体、字号、行距 24
3.2.2 文字的颜色 25
3.2.3 文字的图形化 25
3.2.4 让文字易读 26
3.3 页面中的图像应用 26
3.3.1 常见的网页图像格式 26
3.3.2 网页中应用图像的注意要点 27
3.3.3 让图片更合理 28
3.4 网站导航设计 29
3.4.1 导航设计的基本要求 29
3.4.2 全局导航的基础要素 30
3.4.3 导航设计注意要点 30
3.4.4 让按钮更易点击 31
第4章 网站页面创意方法与技巧 32
4.1 页面设计创意思维 33
4.1.1 什么是创意 33
4.1.2 创意思维的原则 33
4.1.3 创意过程 34
4.2 创意的方法 34
4.2.1 富于联想 34
4.2.2 巧用对比 35
4.2.3 大胆夸张 35
4.2.4 趣味幽默 35
4.2.5 善用比喻 36
4.2.6 以小见大 36
4.2.7 偶像崇拜 36
4.2.8 古典传统 36
4.2.9 流行时尚 37
4.2.10 设置悬念 37
4.2.11 突出人物 37
4.2.12 神奇梦幻 38
4.2.13 综合创意 38
4.3 网站页面风格 38
4.3.1 金属风格 38
4.3.2 大幅配图 39
4.3.3 面板风格 39
4.3.4 像素风格 39
4.3.5 三维风格 39
4.3.6 书报风格 40
4.4 网页的创意视觉表现 40
第2篇 网页设计与配色 42
第5章 网页色彩搭配基础 42
5.2 色彩的分类 43
5.2.1 无彩色 43
5.2.2 有彩色 44
5.3 色彩的三要素 44
5.3.1 明度 44
5.3.2 色相 45
5.3.3 纯度 45
5.4 色彩模式 46
5.4.1 RGB模式 46
5.4.2 CMYK模式 46
5.4.3 Lab模式 47
5.5 色调分析 47
5.5.1 纯色调 47
5.5.2 中纯调 47
5.5.3 低纯调 48
5.5.4 明灰调 48
5.5.5 中灰调 48
5.5.6 暗灰调 48
5.5.7 中暗调 49
5.5.8 深暗调 49
第6章 网页色彩原理与色调基础 50
6.1 色彩对比 51
6.1.1 色相对比 51
6.1.2 明度对比 55
6.1.3纯度对比 56
6.1.4 色彩的面积对比 57
6.1.5 色彩的冷暖对比 58
6.2 色彩的调和 60
6.2.1 色彩调和的原则 60
6.2.2 色彩调和的基本方法 61
6.3 色彩调和的类型 62
6.3.1 同类色调和 62
6.3.2 渐变色调和 62
6.3.3 对比调和 63
6.3.4 同一调和 63
6.3.5 面积调和 64
第7章 网页配色方法与技巧 65
7.1 网页配色安全 66
7.1.1 216网页安全色 66
7.1.2 网页安全色配色辞典 66
7.1.3 使用各种不同的安全色调色板 67
7.2 网页配色技巧 68
7.2.1 背景与文字颜色搭配 68
7.2.2 使用一种色彩 69
7.2.3 两色搭配是用色的基础 69
7.2.4 色彩的数量 70
7.3 使用配色软件 70
7.3.1 ColorKey Xp 71
7.3.2 Color Scheme Designer 71
7.3.3 Check My Colours 71
7.3.4 ColorJack 72
7.3.5 Color Schemer Online v2 72
第8章 网页配色中主色、辅色及点缀色的作用 73
8.1 主色的魅力 74
8.1.1 主色可以决定整个作品风格 74
8.1.2 主色的面积原理 74
8.1.3 区别主色的关键 75
8.2 辅助色的秘密 76
8.2.1 辅助色的功能 76
8.2.2 背景色是特殊的辅助色 77
8.2.3 选择辅助色的诀窍 77
8.3 点缀色的应用 77
8.3.1 点缀色也会影响页面风格 78
8.3.2 点缀色能让页面放光彩 78
第9章 网页设计配色搭配方案剖析 79
9.1 配色色标 80
9.2 强烈 82
9.2.1 推荐配色方案 82
9.2.2 配色解析 82
9.3 丰富 83
9.3.1 推荐配色方案 83
9.3.2 配色解析 83
9.4 浪漫 84
9.4.1 推荐配色方案 84
9.4.2 配色解析 84
9.5 奔放 85
9.5.1 推荐配色方案 85
9.5.2 配色解析 85
9.6 柔和 86
9.6.1 推荐配色方案 86
9.6.2 配色解析 86
9.7 热情 87
9.7.2 配色解析 87
9.7.1 推荐配色方案 87
9.8 动感 87
9.8.1 推荐配色方案 87
9.8.2 配色解析 88
9.9 高雅 88
9.9.1 推荐配色方案 88
9.9.2 配色解析 89
9.10 流行 89
9.10.1 推荐配色方案 89
9.10.2 配色解析 90
9.11 清新 90
9.11.1 推荐配色方案 90
9.11.2 配色解析 91
9.12 古典 91
9.12.1 推荐配色方案 91
9.12.2 配色解析 92
9.13 堂皇 92
9.13.1 推荐配色方案 92
9.13.2 配色解析 93
9.14 神奇 93
9.14.1 推荐配色方案 93
9.14.2 配色解析 94
9.15 职业 94
9.15.1 推荐配色方案 94
9.15.2 配色解析 95
第10章 网页配色中色相的应用 96
10.1 红色系的配色 97
10.1.1 红色系的分类 97
10.1.2 红色适合的配色方案 98
10.1.3 适用红色系的网站 100
10.2 橙色系的配色 101
10.2.1 橙色系的分类 101
10.2.2 橙色适合的配色方案 102
10.2.3 适用橙色系的网站 103
10.3 黄色系的配色 104
10.3.1 黄色系的分类 104
10.3.2 黄色适合的配色方案 105
10.3.3 适用黄色系的网站 107
10.4 紫色系的配色 108
10.4.1 紫色系的分类 108
10.4.2 紫色适合的配色方案 109
10.4.3 适用紫色系的网站 110
10.5 绿色系的配色 112
10.5.1 绿色系的分类 112
10.5.2 绿色适合的配色方案 113
10.5.3 适用绿色系的网站 114
10.6 蓝色系的配色 116
10.6.1 蓝色系的分类 116
10.6.2 蓝色适合的配色方案 117
10.6.3 适用蓝色系的网站 118
10.7 无彩色的配色 119
10.7.1 白色的网站 119
10.7.2 灰色系的网站 120
10.7.3 黑色系的网站 120
第3篇 综合案例解析 121
第11章 各类网站设计与配色案例解析 121
11.1 个人网站 122
11.1.1 个人网站特点 122
11.1.2 页面分析 122
11.1.3 网站配色讲解 123
11.2 政府网站 123
11.2.1 政府网站的特点 123
11.2.2 页面分析 124
11.2.3 网站配色讲解 125
11.3 艺术网站 125
11.3.1 艺术网站的特点 125
11.3.2 页面分析 125
11.3.3 网站配色讲解 126
11.4 在线视频网站 126
11.4.1 在线视频网站的特点 127
11.4.2 页面分析 127
11.4.3 网站配色讲解 127
11.5 音乐网站 128
11.5.1 音乐网站的特点 128
11.5.2 页面分析 128
11.5.3 网站配色讲解 128
11.6 游戏网站 129
11.6.1 游戏网站的特点 129
11.6.2 页面分析 130
11.6.3 网站配色讲解 131
11.7 婚恋交友网站 131
11.7.1 婚恋交友网站的特点 131
11.7.2 页面分析 132
11.7.3 网站配色讲解 132
11.8 旅游网站 132
11.8.1 旅游网站的特点 133
11.8.2 页面分析 134
11.8.3 网站配色讲解 134
11.9 医疗保健网站 135
11.9.1 医疗保健网站的特点 135
11.9.2 页面分析 136
11.9.3 网站配色讲解 136
11.10 设计装饰类网站 137
11.10.1 设计装饰类网站的特点 137
11.10.2 页面分析 137
11.10.3 网站配色讲解 137
11.11 房地产网站 138
11.11.1 房地产网站的特点 138
11.11.2 页面分析 138
11.11.3 网站配色讲解 138
11.12 餐饮酒店网站 139
11.12.1 餐饮酒店网站的特点 139
11.12.2 页面分析 139
11.12.3 网站配色讲解 140
11.13 新闻网站 140
11.13.1 新闻网站的特点 140
11.13.2 页面分析 141
11.13.3 网站配色讲解 142
11.14 教育网站 143
11.14.1 教育网站的特点 143
11.14.2 页面分析 144
11.14.3 网站配色讲解 144
11.15 综合门户网站 145
11.15.1门户网站的特点 145
11.15.2 页面分析 145
11.15.3 网站配色讲解 146
11.16 女装网站 146
11.16.1 女装网站的特点 146
11.16.2 页面分析 146
11.16.3 网站配色讲解 147
11.17 美容化妆网站 147
11.17.1 美容化妆网站的特点 148
11.17.2 页面分析 148
11.17.3 网站配色讲解 149
11.18 IT数码网站 149
11.18.1 IT数码网站的特点 149
11.18.2 页面分析 150
11.18.3 网站配色讲解 150
11.19 家居日用品网站 151
11.19.1 家居用品网站的特点 151
11.19.2 页面分析 151
11.19.3 网站配色讲解 151
11.20 男性商品类网站 152
11.20.1 男性商品类网站的特点 152
11.20.2 页面分析 152
11.20.3 网站配色讲解 153
11.21 鞋类网站 153
11.21.1 鞋类网站的特点 153
11.21.2 页面分析 153
11.21.3 网站配色讲解 154
11.22 童装网站 154
11.22.1 童装网站的特点 154
11.22.2 页面分析 154
11.22.3 网站配色讲解 155
11.23 珠宝饰品网站 155
11.23.1 珠宝饰品网站的特点 155
11.23.2 页面分析 155
11.23.3 网站配色讲解 156
11.24 食品网站 156
11.24.1 食品网站的特点 156
11.24.2 页面分析 156
11.24.3 网站配色讲解 157
附录1 各行业网站色彩搭配 158
附录2 配色形容词色卡 164
附录3 页面安全色 169
附录4 160种配色方案 173