从方法到实践：手把手教你学网页美工设计

网页设计近年来在商业活动中的作用凸显，是互联网时代企业和产品对外展示的重要窗口，网页美工设计的优劣直接影响着企业的形象和品牌的构建。市场上网页美工设计类图书以“鉴赏型”居多，“鉴赏型”图书的特点是案例多、图片精美、启发性强，但弊端是书不耐读，读者无法明白其原理，无法举一反三，没有太大的延伸价值。鉴于这种情况，我们组织策划了“从方法到实践：手把手教你学设计”系列图书，本套图书面向初学者，在“鉴赏型”的基础上，侧重理论和方法，即使是非专业人员，也能从中学到很多有用的设计技巧。《从方法到实践：手把手教你学网页美工设计》是本系列中的一个分册，通过扎实的网页美工设计理论和大量的经典国外设计案例，让初学者短时间内洞悉网页美工设计的奥秘，并能够将所学内容应用于网页设计工作中。本书共分8章，具体内容包括网页设计理论、网页设计的基础知识、设计基础色、网页设计的界面布局方法、网页设计的构成元素、不同行业的网页色彩搭配、网页色彩的情感和网页配色实战等。编者以网页美工设计的基本应用方法为起点，以拓展读者朋友对网页设计的思路为目的，希望通过通俗易懂的理论知识、精致多样的赏析案例、色彩斑斓的配色方案、完整详细的综合案例，给读者一个更好的学习思路，进而从本质上提高网页设计能力。本书由TOPART视觉研究室组织编写，曹茂鹏主编。瞿颖健、曹爱德、曹明、曹诗雅、曹玮、曹元钢、曹子龙、崔英迪、丁仁雯、董辅川、高歌、韩雷、鞠闯、李进、李路、马啸、马扬、瞿吉业、瞿学严、瞿玉珍、孙丹、孙芳、孙雅娜、王萍、王铁成、杨建超、杨力、杨宗香、于燕香、张建霞、张玉华等同志参加编写和整理。由于时间仓促，加之水平有限，书中难免存在不妥之处，敬请广大读者批评指正。编者

本书是一本讲解网页设计和配色的图书，共计分为8章，分别为网页设计理论、网页设计的基础知识、设计基础色、网页设计的界面布局方法、网页设计的构成元素、不同行业的网页色彩搭配、网页色彩的情感和网页配色实战。　　本书章节安排合理，理论扎实、案例精彩，全书使用了“手把手教你”、“小妙招”、“优秀作品赏析”等特色模块，并结合了大量国内外优秀的案例和作品赏析，且均为国际*潮、*流行的网页设计、广告设计、创意设计、影视设计作品，既有经典的理论分析又有易懂的思路扩展，非常值得读者借鉴和学习。　　案例中有精准的色彩数值和设计剖析，既可以当作工具书查阅，也可以当作参照书赏析。　　本书是网页设计、标志设计、广告设计、报刊设计、平面设计、展示设计等的速查工具书，也可作为各大培训机构、公司的理论参考书，还可作为各大、中专院校网页设计专业的教材和参考书。

本书是一本讲解网页设计和配色的图书，共计分为8章，分别为网页设计理论、网页设计的基础知识、设计基础色、网页设计的界面布局方法、网页设计的构成元素、不同行业的网页色彩搭配、网页色彩的情感和网页配色实战。　　本书章节安排合理，理论扎实、案例精彩，全书使用了“手把手教你”、“小妙招”、“优秀作品赏析”等特色模块，并结合了大量国内外优秀的案例和作品赏析，且均为国际*潮、*流行的网页设计、广告设计、创意设计、影视设计作品，既有经典的理论分析又有易懂的思路扩展，非常值得读者借鉴和学习。　　案例中有精准的色彩数值和设计剖析，既可以当作工具书查阅，也可以当作参照书赏析。　　本书是网页设计、标志设计、广告设计、报刊设计、平面设计、展示设计等的速查工具书，也可作为各大培训机构、公司的理论参考书，还可作为各大、中专院校网页设计专业的教材和参考书。

1网页设计理论

1.1　网页设计概念/003

1.2　网页的设计标准/004

1.2.1　网页尺寸/004

1.2.2　网页字体/005

1.2.3　网页色彩/005

1.3　网页设计的八大法则/008

1.3.1　比例法则/010

1.3.2　对称法则/010

1.3.3　不对称法则/011

1.3.4　和谐法则/011

1.3.5　统一法则/011

1.3.6　平衡法则/012

1.3.7　反复法则/012

1.3.8　渐变法则/013

1.4　网页设计的四大原则/013

1.4.1　目的性原则/014

1.4.2　内涵性原则/014

1.4.3　个性化原则/015

1.4.4　艺术性原则/015

1.5　网页设计的点线面/016

1.5.1　点/017

1.5.2　线/017

1.5.3　面/018

2网页设计的基础知识

2.1 　网页色彩/021

2.1.1　色相、明度、纯度/021

2.1.2　主色、辅助色、点缀色/022

2.1.3　邻近色、对比色/024

2.1.4　色彩与面积/025

2.1.5　色彩混合/025

2.1.6　色彩与网页设计的关系/027

2.2　网页设计的元素/028

2.2.1　网页的规格/028

2.2.2　网页的LOGO/028

2.2.3　顶部通栏/029

2.2.4　网页文本/030

2.2.5　图像的设计/030

3网页设计基础色

3.1　红/033

3.1.1　浅谈红色/033

3.1.2　应用实例/034

3.1.3　常见色分析/034

3.1.4　猜你喜欢/035

3.2　橙/035

3.2.1　浅谈橙色/035

3.2.2　应用实例/036

3.2.3　常见色分析/036

3.2.4　猜你喜欢/037

3.3　黄/038

3.3.1　浅谈黄色/038

3.3.2　应用实例/039

3.3.3　常见色分析/039

3.3.4　猜你喜欢/040

3.4　绿/040

3.4.1　浅谈绿色/040

3.4.2　应用实例/041

3.4.3　常见色分析/041

3.4.4　猜你喜欢/042

3.5　青/042

3.5.1　浅谈青色/042

3.5.2　应用实例/043

3.5.3　常见色分析/044

3.5.4　猜你喜欢/044

3.6　蓝/045

3.6.1　浅谈蓝色/045

3.6.2　应用实例/046

3.6.3　常见色分析/046

3.6.4　猜你喜欢/047

3.7　紫/048

3.7.1　浅谈紫色/048

3.7.2　应用实例/049

3.7.3　常见色分析/049

3.7.4　猜你喜欢/050

3.8　黑/050

3.8.1　浅谈黑色/050

3.8.2　应用实例/051

3.8.3　猜你喜欢/051

3.9　白/052

3.9.1　浅谈白色/052

3.9.2　应用实例/053

3.9.3　猜你喜欢/053

3.10　灰/054

3.10.1　浅谈灰色/054

3.10.2　应用实例/055

3.10.3　猜你喜欢/055

4网页设计的界面布局方法

4.1　骨骼型/059

4.1.1　手把手教你——骨骼型网页设计方法/059

4.1.2　骨骼型网页设计方案/060

4.1.3　骨骼型网页设计/061

4.1.4　骨骼型网页设计小妙招——红色与绿色互补的视觉感/062

4.1.5　优秀作品赏析/062

4.2　满版型/063

4.2.1　手把手教你——满版型网页设计方法/063

4.2.2　满版型网页设计方案/064

4.2.3　满版型网页设计/065

4.2.4　满版型网页设计小妙招——实物与虚景的不同妙处/066

4.2.5　优秀作品赏析/066

4.3　分割型/067

4.3.1　手把手教你——分割型网页设计方法/067

4.3.2　分割型网页设计方案/068

4.3.3　分割型网页设计/069

4.3.4　分割型网页设计小妙招——纵向分割/070

4.3.5　优秀作品赏析/070

4.4　中轴型/071

4.4.1　手把手教你——中轴型网页设计方法/071

4.4.2　中轴型网页设计方案/072

4.4.3　中轴型网页设计/073

4.4.4　中轴型网页设计小妙招——色彩的沉着感/074

4.4.5　优秀作品赏析/074

4.5　曲线型/075

4.5.1　手把手教你——曲线型网页设计方法/075

4.5.2　曲线型网页设计方案/076

4.5.3　曲线型网页设计/077

4.5.4　曲线型网页设计小妙招——不同的线条与色彩/078

4.5.5　优秀作品赏析/078

4.6　倾斜型/079

4.6.1　手把手教你——倾斜型网页设计方法/079

4.6.2　倾斜型网页设计方案/080

4.6.3　倾斜型网页设计/081

4.6.4　倾斜型网页设计小妙招——高明度与低明度的色彩/082

4.6.5　优秀作品赏析/082

4.7　对称型/083

4.7.1　手把手教你——对称型网页设计方法/083

4.7.2　对称型网页设计方案/084

4.7.3　对称型网页设计/085

4.7.4　对称型网页设计小妙招——同对称的形式/086

4.7.5　优秀作品赏析/086

4.8　焦点型/087

4.8.1　手把手教你——焦点型网页设计方法/087

4.8.2　焦点型网页设计方案/088

4.8.3　焦点型网页设计/089

4.8.4　焦点型网页设计小妙招——圆形的焦点设计/090

4.8.5　优秀作品赏析/090

4.9　三角型/091

4.9.1　手把手教你——三角型网页设计方法/091

4.9.2　三角型网页设计方案/092

4.9.3　三角型网页设计/093

4.9.4　三角型网页设计小妙招——绿色的清爽感/094

4.9.5　优秀作品赏析/094

4.10　自由型/095

4.10.1　手把手教你——自由型网页设计方法/095

4.10.2　自由型网页设计方案/096

4.10.3　自由型网页设计/096

4.10.4　自由型网页设计小妙招——耐人寻味的色彩/098

4.10.5　优秀作品赏析/098

5网页设计的构成元素

5.1　导航/101

5.1.1　手把手教你——网页导航设计方法/101

5.1.2　网页导航设计方案/102

5.1.3  网页导航设计/103

5.1.4　网页导航设计小妙招——加入底色突出导航/104

5.1.5　优秀作品赏析/104

5.2　banner/104

5.2.1　手把手教你——网页banner设计方法/105

5.2.2　网页banner设计方案/106

5.2.3　网页banner设计/107

5.2.4　网页banner设计小妙招——动感时尚的灰色图片/108

5.2.5　优秀作品赏析/108

5.3　模块/108

5.3.1　手把手教你——网页模块设计方法/109

5.3.2　网页模块设计方案/110

5.3.3　网页模块设计/111

5.3.4　网页模块设计小妙招——几何形状/112

5.3.5　优秀作品赏析/112

5.4　文字/113

5.4.1　手把手教你——网页文字设计方法/113

5.4.2　网页文字设计方案/114

5.4.3　网页文字设计/115

5.4.4　网页文字设计小妙招——字体设计 居中摆放/116

5.4.5　优秀作品赏析/116

6.不同行业的网页色彩搭配

6.1　食品类/119

6.1.1　手把手教你——食品类网页设计方法/119

6.1.2　食品类网页设计方案/120

6.1.3　食品类网页设计/121

6.1.4　食品类网页设计小妙招——棕色的沉稳感/122

6.1.5　优秀作品赏析/122

6.2　服装类/123

6.2.1　手把手教你——服装类网页设计方法/123

6.2.2　服装类网页设计方案/124

6.2.3　服装类网页设计/125

6.2.4　服装类网页设计小妙招——网页的版式设计/126

6.2.5　优秀作品赏析/126

6.3　企业类/127

6.3.1　手把手教你——企业类网页设计方法/127

6.3.2　企业类网页设计方案/128

6.3.3　企业类网页设计/129

6.3.4　企业类网页设计小妙招——富饶与简易的对比/130

6.3.5　优秀作品赏析/130

6.4　美妆类/131

6.4.1　手把手教你——美妆类网页设计方法/131

6.4.2　美妆类网页设计方案/132

6.4.3　美妆类网页设计/133

6.4.4　美妆类网页设计小妙招——黑色对称版式/134

6.4.5　优秀作品赏析/134

6.5　数码类/135

6.5.1　手把手教你——数码类网页设计方法/135

6.5.2　数码类网页设计方案/136

6.5.3　数码类网页设计/137

6.5.4　数码类网页设计小妙招——绘画的插入/138

6.5.5　优秀作品赏析/138

6.6　文娱类/139

6.6.1　手把手教你——文娱类网页设计方法/139

6.6.2　文娱类网页设计方案/140

6.6.3　文娱类网页设计/141

6.6.4  文娱类网页设计小妙招——简洁的分割手法/142

6.6.5  优秀作品赏析/142

6.7　家居类/143

6.7.1　手把手教你——家居类网页设计方法/143

6.7.2　家居类网页设计方案/144

6.7.3　家居类网页设计/145

6.7.4　家居类网页设计小妙招——清爽的视觉/146

6.7.5　优秀作品赏析/146

6.8　汽车类/147

6.8.1　手把手教你——汽车类网页设计方法/147

6.8.2　汽车类网页设计方案/148

6.8.3　汽车类网页设计/149

6.8.4　汽车类网页设计小妙招——典雅端庄的黑色/150

6.8.5　优秀作品赏析/150

6.9　旅游类/151

6.9.1　手把手教你——旅游类网页设计方法/151

6.9.2　旅游类网页设计方案/152

6.9.3　旅游类网页设计/153

6.9.4　旅游类网页设计小妙招——圆圈元素设计/154

6.9.5　优秀作品赏析/154

6.10　创意类/155

6.10.1　手把手教你——创意类网页设计方法/155

6.10.2　创意类网页设计方案/156

6.10.3　创意类网页设计/157

6.10.4　创意类网页设计小妙招——动画的趣味性/158

6.10.5　优秀作品赏析/158

7网页色彩的情感

7.1　美味/161

7.1.1　手把手教你——美味网页设计方法/161

7.1.2　美味网页设计方案/162

7.1.3　美味网页设计/163

7.1.4　美味网页设计小妙招——暗色背景的使用/164

7.1.5　优秀作品赏析/164

7.2　清新/165

7.2.1　手把手教你——清新网页设计方法/165

7.2.2　清新网页设计方案/166

7.2.3　清新网页设计/167

7.2.4　清新网页设计小妙招——带有灰度的颜色/168

7.2.5　优秀作品赏析/168

7.3　温暖/169

7.3.1　手把手教你——温暖网页设计方法/169

7.3.2　温暖网页设计方案/170

7.3.3　温暖网页设计/171

7.3.4　温暖网页设计小妙招——暖系灯光/172

7.3.5　优秀作品赏析/172

7.4　凉爽/173

7.4.1　手把手教你——凉爽网页设计方法/173

7.4.2　凉爽网页设计方案/174

7.4.3　凉爽网页设计/175

7.4.4　凉爽网页设计小妙招——巧用蓝色背景/176

7.4.5　优秀作品赏析/176

7