网站设计与网页配色PDF电子书下载

Chapter 01　网页设计概述 1

1.1　网页设计基础知识 2

1.1.1　网页设计的概念 2

1.1.2　网页设计的定位 3

1.1.3　网页设计所属的范畴 4

1.1.4　网页设计的准则 4

1.2　用户的阅读习惯 5

1.2.1　人机交互的概念 5

1.2.2　用户习惯分析 5

1.2.3　易用性设计 6

1.3　网站类型 8

1.3.1　综合（门户）类网站 8

1.3.2　新闻类网站 9

1.3.3　交易类网站 9

1.3.4　IT类网站 10

1.3.5　教育类网站 11

1.3.6　生活娱乐类网站 11

1.3.7　政府类网站 12

1.3.8　个人类网站 12

1.3.9　功能型网站 13

1.3.10　其他行业类网站 13

1.4　网络的特点 14

1.4.1　信息的开放性 14

1.4.2　信息的互动性 14

1.4.3　信息的不稳定性 14

1.4.4　网络时代性 14

1.4.5　信息传播的迅速性 14

1.5　网页设计方法分析 15

1.5.1　栏目划分法 15

1.5.2　网格划分法 16

1.5.3　色彩定位法 17

1.5.4　Logo引导法 17

1.6　网页设计实践分析 18

1.6.1　联合利华网站设计方案分析 18

1.6 2　西部数据色彩设计网站方案分析 19

Chapter 02　网页制作的基本流程 21

2.1　网站资料整理 22

2.1.1　文字资料归纳整理分类 22

2.1.2　图片资料整理筛选分类 23

2.1.3　视频素材筛选 24

2.1.4　Flash动画 24

2.2　准备素材（使素材符合网页设计需求） 24

2.2.1　准备图片素材 24

2.2.2　文字再编辑，提取要点，总结标题 32

2.2.3　视频素材的剪辑及压缩处理 32

2.3　网站结构划分（网站脚本编创） 33

2.3.1　根据素材分析网站结构 33

2.3.2　提取分类列出栏目 35

2.3.3　栏目下子栏目划分 36

2.4　网站风格定位——风格设计 37

2.4.1　分析网站的主题定位——网站主基调 38

2.4.2　风格的统一与变化 43

2.5　网页色彩定位 44

2.5.1　标准色彩定位 44

2.5.2　根据网站风格定位选择色彩设计 45

2.5.3　分析栏目间的色彩变化 45

2.6　设计草稿的绘制 46

2.6.1　主页面设计草稿及创意 47

2.6.2　栏目二级页面的设计 51

2.7　分析模块，划分模块，信息布局 52

2.7.1　按照栏目划分页面模块 52

2.7.2　二级页面的模块划分 55

2.8　整体页面设计及细部调整 56

2.8.1　“完美像素级细节”实例 56

2.8.2　网站细节设计分析 58

2.8.3　阴影细节 61

2.8.4　自我克制与精妙细节 62

Chapter 03　网页设计的理念 63

3.1　网页设计的定位 64

3.1.1　怎样才是好的网页设计 64

3.1.2　好的网页设计是怎样做出来的 66

3.2　网页设计需要设计什么 68

3.2.1　视听元素设计 68

3.2.2　网格设计 68

3.2.3　信息设计 69

3.2.4　布局设计 69

3.3　网页设计基础信息 73

3.3.1　可视范围内信息设计与布局 73

3.3.2　设计内容图文率 75

3.3.3　网页设计与其他设计的区别 76

3.3.4　网页设计中应该处理好的事项 78

3.3.5　网页设计的视觉传达 78

3.3.6　版式设计 81

3.4　网页创意设计 82

3.4.1　创意是传达信息的一种特殊手段 83

3.4.2　创意是将现有的要素重新组合 84

3.5　网页中的文字设计 85

3.5.1　文字在网页中的应用 85

3.5.2　留白的艺术 86

3.6　设计的实现案例分析 88

3.6.1　设计草稿绘制案例 88

3.6.2　制作页面效果 89

3.6.3　不规则页面设计 100

3.7　内页与主页的设计统一 101

3.7.1　结构的一致性 101

3.7.2　色彩的一致性 102

3.7.3　利用导航取得统一 102

3.7.4　特别元素的一致性 102

3.7.5　利用图像取得统一 102

3.7.6　利用背景取得统一 102

3.8　网页设计的背景 103

3.8.1　主背景 103

3.8.2　内容背景 103

3.8.3　封装／banner背景 104

3.8.4　其他背景图片形式介绍 106

3.9　网页设计妙招 113

Chapter 04　网页设计页面布局 121

4.1　网页设计页面布局概述 122

4.1.1　浅谈网页设计布局 122

4.1.2　简约的设计——简洁大方的版式 125

4.2　网页页面布局的规范 125

4.2.1　网页布局类型的确定方法 126

4.2.2　把内容放入自己喜欢的网页类型中 126

4.2.3　草绘出两三个不同网页类型的模板 127

4.2.4　网页布局的连贯性和多样性 127

4.2.5　网页布局结构 129

4.2.6 16布局法 133

4.3　信息布局区域划分 135

4.3.1　如何设计有效的信息布局 135

4.3.2　信息布局、信息结构设计 138

4.4　信息结构设计 139

4.4.1　单一结构 140

4.4.2　复合结构 140

4.5　页面分栏布局形式 141

4.6　页面布局形式与内容关系分析 142

4.6.1　功能优先还是形式优先 142

4.6.2　网页布局形式对网站含义及情感的影响 142

4.6.3　形式分析解剖 143

4.7　网页副空间设计 144

4.8　文字布局 146

4.9　表单布局 147

4.9.1　表单中使用可视化元素 148

4.9.2　主次操作 149

4.9.3　表单安排实例 150

Chapter 05　新型网站设计 153

5.1 Flash网站概述 154

5.1.1　全Flash网站和单个Flash作品的区别 154

5.1.2　全屏Flash的尺寸分析 155

5.2 Flash网站的特点 156

5.2.1　全Flash网站设计的优势与劣势 157

5.2.2 Flash网站打造真实感 161

5.2.3 Flash网站的用户体验特性 162

5.2.4 Flash网站的转场动画 163

5.3 Flash网站的设计与构建 164

5.3.1 Flash网站的基本布局 165

5.3.2 loading（加载）的设计与制作 165

5.3.3　关于按钮 166

5.3.4 Flash全站的页面切换 169

5.3.5　文本内容的显示 170

5.3.6　音乐开关 171

5.3.7 Flash的调试与常见问题 173

5.4　Flash网站的效果 174

5.5　传统的Flash网站制作 176

5.5.1　全Flash网站的案例分析 177

5.5.2 Flash网站设计的常用技术 179

5.6 Flash网站设计特色 184

5.7 Flash网站设计欣赏 185

5.7.1　图片变换网站设计 185

5.7.2 Speak Visual GPU测试网站 186

5.7.3　很有意思的牛奶网站gotmilk 188

5.7.4　冰淇淋展示网站 191

5.7.5　丰田摩托车的展示网站 191

5.7.6　大众（Volkswagen）汽车网站 193

5.7.7 Victorscomics作品展示网站 194

5.7.8　摄影作品网站 196

5.7.9 Flash摄影展示 198

5.7.10 2Advanced Studios 200

5.7.11　优秀网站设计 202

5.7.12　大底纹图片Flash网站设计风格 204

Chapter 06　色彩基础知识 206

6.1　色彩的文化 207

6.2　色彩的变动性 207

6.3　色彩的关联性 208

6.4　色彩组合 208

6.5　色彩体系 209

6.5.1　色彩基本概念 209

6.5.2　色彩的三原色 209

6.5.3　电脑影像的色彩 209

6.6　色彩的三要素 210

6.6.1　明度 211

6.6.2　色相 211

6.6.3　纯度 213

6.6.4　颜色三属性的相互关系 213

6.7　色彩三属性的对比分析 213

6.7.1　明度对比 214

6.7.2　色相对比 214

6.7.3　纯度对比 215

6.8　色彩的其他对比 216

6.8.1　色彩的面积对比 216

6.8.2　色彩的形状对比 216

6.8.3　色彩的冷暖对比 218

6.8.4　色彩的肌理对比 219

6.9　色彩模式 219

6.9.1 RGB模式 219

6.9.2 CMYK模式 219

6.9.3 Lab模式 220

6.10　色彩调和 220

6.10.1　色彩调和的方式 220

6.10.2　色彩调和的基本法则 224

6.11　色彩心理学 224

6.11.1　红色 224

6.11.2　黄色 225

6.11.3　蓝色 226

6.11.4　绿色 226

6.11.5　紫色 226

6.11.6　橙色 227

6.11.7　白色 227

6.11.8　黑色 228

6.11.9　灰色 228

6.11.10　金色 229

6.11.11　银色 229

6.12　色彩传达的心理效应 229

6.12.1　色彩的进退和胀缩感觉 230

6.12.2　色彩的冷暖感觉 230

6.12.3　色彩的轻重和软硬感觉 230

6.12.4　色彩的华丽与朴素感觉 230

6.12.5　色彩的积极与消极感觉 230

6.13　色彩传达的信息效率 231

6.14　网页设计中的色彩运用策略 231

6.14.1　网页色彩设计的原则 231

6.14.2　对比关联与应用 232

Chapter 07　网页设计配色 235

7.1　色彩带来的联想与网页传递感情 236

7.1.1　声音与网页色彩 236

7.1.2　味觉与网页色彩 237

7.1.3　嗅觉与网页色彩 238

7.1.4　冷暖与网页色彩 238

7.2　色彩的联想与感情表达 239

7.2.1　色彩的空间感 239

7.2.2　色彩的亲切感 241

7.2.3　色彩的层次感 242

7.2.4　色彩的神秘感 243

7.2.5　色彩的柔软感与坚硬感 244

7.2.6　色彩的兴奋感与忧郁感 244

7.2.7　色彩的华丽感与朴素感 245

7.3　色彩搭配 245

7.3.1　色彩的平衡原则 245

7.3.2　色彩的适应性原则 246

7.3.3　网页色彩搭配原则 246

7.3.4　网页色彩搭配技巧 248

7.3.5　网页色彩选择标准 253

Chapter 08　网站分析 256

8.1　漂亮的网页布局赏析 257

8.1.1　ipassmall网站欣赏 257

8.1.2　苹果公司官网 259

8.1.3　joy-lggm730网站欣赏 262

8.1.4　cest-moi网站欣赏 264

8.1.5 winstorm 2010网站欣赏 265

8.2　绝佳网页创意设计赏析 267

8.2.1 metsdelacreme网站欣赏 267

8.2.2 lgled LG显示器展示网站 269

8.2.3　happymeal网站欣赏 271

8.2.4 nate10th网站欣赏 274

8.2.5 thepixel网站欣赏 275

8.2.6 toyota网站欣赏 277

8.2.7 Lijiang Vision Singapore网站欣赏 278

8.2.8　暗黑破坏神3网站欣赏 280

8.3　色彩出众的网页设计赏析 282

8.3.1　色彩斑斓的：哈瓦那人字拖网站 282

8.3.2 cndiv网站欣赏 286

8.3.3 converse网站欣赏 287

8.3.4 sadia网站欣赏 288

8.3.5 divplayers网站欣赏 290

8.3.6　迷你忍者游戏官方网站 291

8.3.7　“韩站”网站设计风格分析 293

8.3.8　绿色色彩设计 294

8.3.9　白色主题设计风格 297

8.3.10　红色网页设计 298

8.3.11　黄色系页面色彩设计 299

8.3.12　柔和的卡通风格设计 300

8.3.13　红、白、黑色彩搭配 301

8.3.14　蓝色系的页面设计 302

8.3.15　黑色系页面的设计 303

8.3.16　红色系页面的设计 305