网页美术设计原理及实战策略

CONTENTS 目 录

第1 章 网页设计概述

1.7.4　测试发布..................................... 33

1.7.5　站点推广..................................... 33

1.7.6　反馈评估..................................... 34

1.8 网页美术设计的原则........................... 34

1.8.1　为用户考虑.................................. 34

1.8.2　主题突出..................................... 35

1.8.3　有机的整体.................................. 36

1.8.4　内容与形式相统一........................ 37

1.8.5　更新和维护.................................. 38

1.9 优秀网页设计的特征........................... 38

1.9.1　交互性........................................ 38

1.9.2　版式的不可控制性........................ 38

1.9.3　技术与艺术结合的紧密性............... 39

1.9.4　多媒体的综合性............................ 39

1.9.5　多维性........................................ 40

1.10 网站设计常用工具............................ 40

1.10.1　网页编辑排版软件

—Dreamweaver.................... 40

1.10.2　网页图片设计软件

—Photoshop......................... 41

1.10.3　网页动画制作软件—Flash....... 41

1.10.4　网页标记语言—HTML............. 42

第2 章 网页设计中的布局基础

2.1 网页功能与形态的比较........................ 43

2.2 网页设计中视觉空间的点、线、面.......... 44

2.2.1　网页设计中的点............................ 45

2.2.2　网页设计中的线............................ 47

2.2.3　网页设计中的面............................ 53

2.2.4　网页设计中由点、线、面组成的

基本几何图形............................... 54

2.3 大众化与个性化的网页视觉布局设计....... 58

2.3.1　大众化网页视觉布局设计............... 59

2.3.2　个性化网页视觉布局设计............... 60

2.4 网页布局设计中的实验形态.................. 61

2.5 优秀网页的布局结构........................... 63

2.5.1　网页布局结构的标准..................... 63

2.5.2　网页布局设计中的相关元素............ 65

2.5.3　网页的布局类型............................ 67

2.6 网页布局的基本方法........................... 71

2.6.1　网页布局的设计............................ 71

2.6.2　网页布局的构成原则..................... 72

1.1 网页美术设计概述................................ 1

1.2 完整网站设计所需的内容....................... 1

1.2.1　网页视觉风格的主旨....................... 2

1.2.2　网站设计的基本元素....................... 3

1.3 网页美术设计的要素............................. 5

1.3.1　设计与技术相结合.......................... 5

1.3.2　立体空间节奏感.............................. 9

1.3.3　视觉导向性.................................. 10

1.3.4　视觉服务..................................... 12

1.3.5　导航设置..................................... 12

1.4 各类多媒体视听元素的集合.................. 19

1.5 整体网站的结构设计........................... 19

1.5.1　网页的功能与形式美..................... 20

1.5.2　网页视觉形式美法则..................... 21

1.5.3　视觉设计与创造思维相结合............ 22

1.5.4　设计中常见的创意方法.................. 24

1.6 网页设计中应注意的问题..................... 27

1.6.1　要考虑浏览页面终端的影响............ 27

1.6.2　网页设计中易出现的问题............... 27

1.7 网站建设的整体设计流程..................... 28

1.7.1　项目规划..................................... 28

1.7.2　内容组织..................................... 31

1.7.3　页面设计..................................... 32

网页美术设计原理及实战策略（第二版）

IV

第4 章 网页设计中的文字元素

4.2.2　软件制作技术产生的

汉字造型语言............................. 114

4.2.3　计算机字体的形成...................... 115

2.6.3　网页布局的特征............................ 73

2.7 网站页面的布局方式........................... 74

2.7.1　左侧的页面布局............................ 74

2.7.2　水平居中的页面布局..................... 75

2.7.3　水平和垂直居中的页面布局............ 75

2.7.4　满屏的页面布局............................ 76

2.7.5　分割方式的页面布局..................... 76

第3 章 网页设计中的版式与风格

3.10 网页版式设计中的创意设计................ 95

3.10.1　创意设计在版式中的

角色和地位................................ 96

3.10.2　如何激发创意设计...................... 97

3.11 整体网站的视觉设计风格................... 99

3.11.1　怀旧风格................................... 99

3.11.2　简约抽象风格........................... 100

3.11.3　简洁风格................................. 100

3.11.4　仿古风格................................. 101

3.11.5　立体风格................................. 102

3.11.6　绘画风格................................. 102

3.11.7　剪贴画风格.............................. 103

3.11.8　插画风格................................. 104

3.11.9　照片风格................................. 104

3.11.10　大字体风格............................ 105

3.11.11　艺术作品风格......................... 105

3.11.12　自然风光风格......................... 106

3.11.13　诱人美食风格......................... 106

3.11.14　破旧报纸风格......................... 107

3.11.15　绿意盎然风格......................... 107

3.11.16　原木风格............................... 108

3.11.17　白云元素风格......................... 108

3.11.18　喷溅元素风格......................... 109

3.11.19　印刷元素风格......................... 109

3.11.20　办公元素风格......................... 110

3.1 网页中的版式设计............................. 80

3.2 常见的网页版式类型........................... 81

3.2.1　骨骼式........................................ 81

3.2.2　满版式........................................ 82

3.2.3　分割式........................................ 82

3.2.4　中轴式........................................ 83

3.2.5　导引式........................................ 83

3.2.6　对角式........................................ 84

3.2.7　对称式........................................ 84

3.2.8　重心式........................................ 84

3.2.9　三角式........................................ 85

3.2.10　并置式...................................... 85

3.2.11　自由式...................................... 86

3.2.12　组合式....................................... 86

3.3 网页版式的统一与变化........................ 87

3.4 网页版式的对比与调和........................ 87

3.5 网页版式的均衡与对称........................ 89

3.6 网页版式的节奏与韵律........................ 89

3.7 网页版式的单纯与秩序........................ 90

3.8 网页版式的空间留白........................... 90

3.9 合理的网页视觉流程设计..................... 91

3.9.1　网页视觉流程的规划..................... 91

3.9.2　视觉流程的视觉力场..................... 92

3.9.3　网页的视觉流程类型..................... 94

4.1 传统文字字体的形态特征....................112

4.2 现代计算机字体的形态特征.................114

4.2.1　计算机中的字体与字库................ 114

V

目 录

4.3 网页设计中文字的作用.......................115

4.3.1　适合性...................................... 116

4.3.2　明确性...................................... 116

4.3.3　易读性...................................... 117

4.3.4　美观性...................................... 117

4.3.5　创新性...................................... 117

4.4　网页设计中的基本字体.......................117

4.4.1　汉字基本字体............................. 118

4.4.2　拉丁文基本字体.......................... 119

4.4.3　字号大小................................... 119

4.4.4　字符间距................................... 121

4.4.5　字体的形态................................ 122

4.4.6　字体设计原理............................. 122

4.5 网页中文字元素的版式编排.................124

4.5.1　文字版式的规则.......................... 125

4.5.2　文字版式设计的常用手法............. 128

4.5.3　文字群体编排............................. 131

4.6 网页文字的色彩处理与情感.................134

4.6.1　网页文字的色彩处理................... 134

4.6.2　网页文字的情感因素................... 135

4.7 网页文字设计的原则..........................136

4.7.1　可读性...................................... 137

4.7.2　图形化...................................... 137

4.7.3　重叠.......................................... 138

第5 章 网页设计中的图像元素

5.4.3　照片.......................................... 159

5.4.4　页面分割................................... 162

5.4.5　立体图形................................... 163

5.5 网页图像的前期处理..........................166

5.5.1　图像的外形................................ 166

5.5.2　图像的面积................................ 166

5.5.3　图像的数量................................ 167

5.5.4　图底关系................................... 167

5.5.5　图像文件的大小.......................... 168

5.5.6　图像的优化处理.......................... 168

5.5.7　动态图像的使用.......................... 168

5.6 网页图像的编排设计..........................168

5.6.1　四角与中轴四点结构................... 168

5.6.2　块状组合与散点组合结构............. 169

5.7 网页图像与文字的混排.......................169

5.7.1　网页设计中文字和图像的关系...... 170

5.7.2　图文混排的版式设计................... 170

5.8 网页图像的色彩选择.........................170

5.1 网页设计中的图像文件格式.................139

5.1.1　GIF 格式...................................

139

5.1.2　JPEG 格式................................

140

5.1.3　PNG 格式.................................

140

5.1.4　MNG 格式.................................

141

5.2 图像在网页视觉设计中的作用..............142

5.2.1　传达性...................................... 142

5.2.2　艺术性...................................... 142

5.2.3　表现性...................................... 142

5.2.4　趣味性...................................... 142

5.2.5　超越性...................................... 143

5.3 网页中图像的创意与设计....................143

5.3.1　出发点...................................... 143

5.3.2　表现技巧................................... 146

5.3.3　造型与手法................................ 148

5.4 图像的设计类型...............................150

5.4.1　插图.......................................... 151

5.4.2　图形符号................................... 156

第6 章 网页设计中的色彩元素

6.1.1　色彩属性................................... 6.1　色彩的基本特性...............................173 173

网页美术设计原理及实战策略（第二版）

VI

第7 章 把握不同类型的网站设计

7.8.2 体育信息网站............................. 217

7.8.3 运动团队网站............................. 218

7.9 游戏娱乐网站..................................219

7.10 漫画网站......................................220

7.11 时尚、购物网站..............................220

7.11.1 时尚网站................................. 221

7.11.2 购物网站................................. 221

7.12 女性、美容网站.............................223

7.13 婴幼儿、儿童网站...........................224

7.14 医疗健康网站................................224

7.15 餐饮网站......................................225

7.16 汽车网站......................................227

7.17 金融网站......................................228

7.18 教育网站......................................229

7.19 数码通信网站................................230

7.20 宠物网站......................................231

6.1.2　配色.......................................... 174

6.2　色彩的心理特征...............................176

6.2.1　色彩的联想作用和心理效果.......... 176

6.2.2 常见颜色的分析.......................... 176

6.3　网页中色彩的搭配............................181

6.3.1　网页色彩搭配的基础................... 181

6.3.2　网页色彩搭配的原则................... 183

6.4　色彩在各个领域中的表现力.................185

6.4.1　综合门户型网站.......................... 185

6.4.2　娱乐休闲类网站.......................... 186

6.4.3　商业经济类网站.......................... 187

6.4.4　人类艺术类网站.......................... 187

6.4.5　政府机构类网站.......................... 188

6.4.6　体育休闲类网站.......................... 188

6.4.7　个人网站................................... 189

6.5　网页色彩的编排设计..........................189

6.5.1　网页色彩的4 种功能角色............

189

6.5.2　网页配色的基本方法................... 194

6.5.3　使用基本色配色.......................... 197

6.5.4　使用多色彩配色.......................... 198

6.5.5　网页配色常见问题...................... 200

7.1 个人网站........................................205

7.2 影视、音乐、传媒网站.......................206

7.2.1 影视网站................................... 206

7.2.2 音乐网站................................... 207

7.2.3 传媒网站................................... 208

7.2.4 艺人网站................................... 209

7.3 照片、摄影网站...............................210

7.4 像素、插图网站...............................211

7.5 设计公司网站..................................211

7.6 设计网站........................................212

7.6.1 广告设计网站............................. 212

7.6.2 建筑设计网站............................. 213

7.7 旅游网站........................................214

7.7.1 旅游信息网站............................. 214

7.7.2 宾馆、度假村网站...................... 215

7.8 体育网站........................................216

7.8.1 体育用品网站............................. 216

本书是一本讲解网站页面设计的教程，语言浅显易懂，配合精美的网页设计案例，讲解了网页设计的相关知识以及进行网页设计制作的方法和技巧，使用户能够掌握网页设计中不同元素的使用技巧，并能够综合运用到实际设计工作中。本书共分7 章，全面介绍了网页设计中的理论设计知识以及具体案例的制作方法，包括网页设计概述、网页设计中的布局基础、网页设计中的版式与风格、网页设计中的文字元素、网页设计中的图像元素、网页设计中的色彩元素以及把握不同类型的网站设计。本书超值赠送立体化教学资源，内容包括PPT 课件、14 个网页设计案例教学电子书、案例素材和源文件以及视频教程，帮助用户更好地进行学习。本书可作为各高等院校、职业院校和培训学校的相关专业教材使用，也适合网页设计爱好者、网页设计初学者、网页设计从业人员以及相关设计制作专业的人员阅读。

本书特点：
1、全书内容丰富、条理清晰，通过7章的内容，为读者全面、系统地介绍了网页设计的知识以及进行网页设计的方法和技巧，详细地对理论知识进行讲解，并通过与立体化教学资源相结合的方式，使知识融会贯通。
2、语言通俗易懂，涉及大量网页设计的丰富知识讲解，帮助读者深入了解网页设计。
3、实例涉及面广，几乎涵盖了网页设计中所在的各个领域，每个领域下通过对基础知识讲解帮助读者掌握网页设计的知识点。
4、注重动手实践能力，采用理论知识和课后练习相结合的方式，使读者更好地对知识点进行归纳和吸收。
5、赠送资源丰富，其中每一个案例的制作过程都配有相关视频教程和素材，步骤详细，使读者能够轻松掌握
6、本书免费提供立体化教学资源包