網頁美工設計基礎教程

1 網頁設計理論 001
1．1　網頁設計概念 003
1．2　網頁的設計標準 004
1．2．1　網頁尺寸 004
1．2．2　網頁字體 005
1．2．3　網頁色彩 005
1．3　網頁設計的八大法則 009
1．3．1　比例法則 010
1．3．2　對稱法則 010
1．3．3　不對稱法則 011
1．3．4　和諧法則 011
1．3．5　統(tǒng)一法則 011
1．3．6　平衡法則 012
1．3．7　反復法則 012
1．3．8　漸變法則 013
1．4　網頁設計的四大原則 013
1．4．1　目的性原則 014
1．4．2　內涵性原則 015
1．4．3　個性化原則 015
1．4．4　藝術性原則 016
1．5　網頁設計的點線面 016
1．5．1　點 017
1．5．2　線 018
1．5．3　面 019
2 網頁設計的基礎知識 021
2．1　網頁色彩 023
2．1．1　色相、明度、純度 023
2．1．2　主色、輔助色、點綴色 024
2．1．3　鄰近色、對比色 026
2．1．4　色彩與面積 027
2．1．5　色彩混合 027
2．1．6　色彩與網頁設計的關系 029
2．2　網頁設計的元素 030
2．2．1　網頁的規(guī)格 030
2．2．2　網頁的LOGO 031
2．2．3　頂部通欄 032
2．2．4　網頁文本 032
2．2．5　圖像 033
3 網頁設計基礎色 035
3．1　紅 037
3．1．1　淺談紅色 037
3．1．2　應用實例 038
3．1．3　常見色分析 038
3．1．4　優(yōu)秀作品賞析 039
3．2　橙 039
3．2．1　淺談橙色 039
3．2．2　應用實例 040
3．2．3　常見色分析 040
3．2．4　優(yōu)秀作品賞析 041
3．3　黃 042
3．3．1　淺談黃色 042
3．3．2　應用實例 043
3．3．3　常見色分析 043
3．3．4　優(yōu)秀作品賞析 044
3．4　綠 044
3．4．1　淺談綠色 044
3．4．2　應用實例 045
3．4．3　常見色分析 045
3．4．4　優(yōu)秀作品賞析 046
3．5　青 046
3．5．1　淺談青色 046
3．5．2　應用實例 047
3．5．3　常見色分析 048
3．5．4　優(yōu)秀作品賞析 048
3．6　藍 049
3．6．1　淺談藍色 049
3．6．2　應用實例 050
3．6．3　常見色分析 050
3．6．4　優(yōu)秀作品賞析 051
3．7　紫 052
3．7．1　淺談紫色 052
3．7．2　應用實例 053
3．7．3　常見色分析 053
3．7．4　優(yōu)秀作品賞析 054
3．8　黑 054
3．8．1　淺談黑色 054
3．8．2　應用實例 055
3．8．3　優(yōu)秀作品賞析 055
3．9　白 056
3．9．1　淺談白色 056
3．9．2　應用實例 057
3．9．3　優(yōu)秀作品賞析 057
3．10　灰 058
3．10．1　淺談灰色 058
3．10．2　應用實例 059
3．10．3　優(yōu)秀作品賞析 059
4 網頁設計的界面布局方法 063
4．1　骨骼型 065
4．1．1　手把手教你——骨骼型網頁設計方法 065
4．1．2　骨骼型網頁設計方案 066
4．1．3　骨骼型網頁設計 067
4．1．4　骨骼型網頁設計小妙招——稍顯錯落的排版打破呆板 068
4．1．5　優(yōu)秀作品賞析 068
4．2　滿版型 069
4．2．1　手把手教你——滿版型網頁設計方法 069
4．2．2　滿版型網頁設計方案 070
4．2．3　滿版型網頁設計 071
4．2．4　滿版型網頁設計小妙招——實物與虛景的不同妙處 072
4．2．5　優(yōu)秀作品賞析 072
4．3　分割型 073
4．3．1　手把手教你——分割型網頁設計方法 073
4．3．2　分割型網頁設計方案 074
4．3．3　分割型網頁設計 075
4．3．4　分割型網頁設計小妙招——縱向分割 076
4．3．5　優(yōu)秀作品賞析 076
4．4　中軸型 077
4．4．1　手把手教你——中軸型網頁設計方法 077
4．4．2　中軸型網頁設計方案 078
4．4．3　中軸型網頁設計 079
4．4．4　中軸型網頁設計小妙招——色彩的沉著感 080
4．4．5　優(yōu)秀作品賞析 080
4．5　曲線型 081
4．5．1　手把手教你——曲線型網頁設計方法 081
4．5．2　曲線型網頁設計方案 082
4．5．3　曲線型網頁設計 083
4．5．4　曲線型網頁設計小妙招——不同的線條與色彩 084
4．5．5　優(yōu)秀作品賞析 084
4．6　傾斜型 085
4．6．1　手把手教你——傾斜型網頁設計方法 085
4．6．2　傾斜型網頁設計方案 086
4．6．3　傾斜型網頁設計 087
4．6．4　傾斜型網頁設計小妙招——高明度與低明度的色彩 088
4．6．5　優(yōu)秀作品賞析 088
4．7　對稱型 089
4．7．1　手把手教你——對稱型網頁設計方法 089
4．7．2　對稱型網頁設計方案 090
4．7．3　對稱型網頁設計 091
4．7．4　對稱型網頁設計小妙招——同對稱的形式 092
4．7．5　優(yōu)秀作品賞析 092
4．8　焦點型 093
4．8．1　手把手教你——焦點型網頁設計方法 093
4．8．2　焦點型網頁設計方案 094
4．8．3　焦點型網頁設計 095
4．8．4　焦點型網頁設計小妙招——圓形的焦點設計 096
4．8．5　優(yōu)秀作品賞析 096
4．9　三角型 097
4．9．1　手把手教你——三角型網頁設計方法 097
4．9．2　三角型網頁設計方案 098
4．9．3　三角型網頁設計 099
4．9．4　三角型網頁設計小妙招——綠色的清爽感 100
4．9．5　優(yōu)秀作品賞析 100
4．10　自由型 101
4．10．1　手把手教你——自由型網頁設計方法 101
4．10．2　自由型網頁設計方案 102
4．10．3　自由型網頁設計 103
4．10．4　自由型網頁設計小妙招——耐人尋味的色彩 104
4．10．5　優(yōu)秀作品賞析 105
5 網頁設計的構成元素 107
5．1　導航 109
5．1．1　手把手教你——網頁導航設計方法 109
5．1．2　網頁導航設計方案 110
5．1．3　網頁導航設計 111
5．1．4　網頁導航設計小妙招——垂直導航 112
5．1．5　優(yōu)秀作品賞析 112
5．2　banner 113
5．2．1　手把手教你——網頁banner設計方法 113
5．2．2　網頁banner設計方案 114
5．2．3　網頁banner設計 115
5．2．4　網頁banner設計小妙招——動感時尚的灰色圖片 116
5．2．5　優(yōu)秀作品賞析 116
5．3　模塊 117
5．3．1　手把手教你——網頁模塊設計方法 117
5．3．2　網頁模塊設計方案 118
5．3．3　網頁模塊設計 119
5．3．4　網頁模塊設計小妙招——幾何形狀 120
5．3．5　優(yōu)秀作品賞析 120
5．4　文字 121
5．4．1　手把手教你——網頁文字設計方法 121
5．4．2　網頁文字設計方案 122
5．4．3　網頁文字設計 123
5．4．4　網頁文字設計小妙招——增加標題文字字號，增加文字對比 124
5．4．5　優(yōu)秀作品賞析 125
6 不同行業(yè)的網頁色彩搭配 127
6．1　食品類 129
6．1．1　手把手教你——食品類網頁設計方法 129
6．1．2　食品類網頁設計方案 130
6．1．3　食品類網頁設計 131
6．1．4　食品類網頁設計小妙招——通過顏色讓畫面變得“更好吃” 132
6．1．5　優(yōu)秀作品賞析 132
6．2　服裝類 133
6．2．1　手把手教你——服裝類網頁設計方法 133
6．2．2　服裝類網頁設計方案 134
6．2．3　服裝類網頁設計 135
6．2．4　服裝類網頁設計小妙招——網頁的版式設計 136
6．2．5　優(yōu)秀作品賞析 136
6．3　企業(yè)類 137
6．3．1　手把手教你——企業(yè)類網頁設計方法 137
6．3．2　企業(yè)類網頁設計方案 138
6．3．3　企業(yè)類網頁設計 139
6．3．4　企業(yè)類網頁設計小妙招——富饒與簡易的對比 140
6．3．5　優(yōu)秀作品賞析 140
6．4　美妝類 141
6．4．1　手把手教你——美妝類網頁設計方法 141
6．4．2　美妝類網頁設計方案 142
6．4．3　美妝類網頁設計 143
6．4．4　美妝類網頁設計小妙招——黑色對稱版式 144
6．4．5　優(yōu)秀作品賞析 144
6．5　數碼類 145
6．5．1　手把手教你——數碼類網頁設計方法 145
6．5．2　數碼類網頁設計方案 146
6．5．3　數碼類網頁設計 147
6．5．4　數碼類網頁設計小妙招——繪畫的插入 148
6．5．5　優(yōu)秀作品賞析 148
6．6　文娛類 149
6．6．1　手把手教你——文娛類網頁設計方法 149
6．6．2　文娛類網頁設計方案 150
6．6．3　文娛類網頁設計 151
6．6．4　文娛類網頁設計小妙招——簡潔的分割手法 152
6．6．5　優(yōu)秀作品賞析 152
6．7　家居類 153
6．7．1　手把手教你——家居類網頁設計方法 153
6．7．2　家居類網頁設計方案 154
6．7．3　家居類網頁設計 155
6．7．4　家居類網頁設計小妙招——清爽的視覺 156
6．7．5　優(yōu)秀作品賞析 156
6．8　汽車類 157
6．8．1　手把手教你——汽車類網頁設計方法 157
6．8．2　汽車類網頁設計方案 158
6．8．3　汽車類網頁設計 159
6．8．4　汽車類網頁設計小妙招——深色調體現高端定位 160
6．8．5　優(yōu)秀作品賞析 160
6．9　旅游類 161
6．9．1　手把手教你——旅游類網頁設計方法 161
6．9．2　旅游類網頁設計方案 162
6．9．3　旅游類網頁設計 163
6．9．4　旅游類網頁設計小妙招——通過高清大圖吸引訪客 164
6．9．5　優(yōu)秀作品賞析 164
6．10　創(chuàng)意類 165
6．10．1　手把手教你——創(chuàng)意類網頁設計方法 165
6．10．2　創(chuàng)意類網頁設計方案 166
6．10．3　創(chuàng)意類網頁設計 167
6．10．4　創(chuàng)意類網頁設計小妙招——動畫的趣味性 168
6．10．5　優(yōu)秀作品賞析 169
7 網頁色彩的情感 171
7．1　美味 173
7．1．1　手把手教你——美味網頁設計方法 173
7．1．2　美味網頁設計方案 174
7．1．3　美味網頁設計 175
7．1．4　美味網頁設計小妙招——暗色背景的使用 176
7．1．5　優(yōu)秀作品賞析 176
7．2　清新 177
7．2．1　手把手教你——清新網頁設計方法 177
7．2．2　清新網頁設計方案 178
7．2．3　清新網頁設計 179
7．2．4　清新網頁設計小妙招——帶有灰度的顏色 180
7．2．5　優(yōu)秀作品賞析 180
7．3　溫暖 181
7．3．1　手把手教你——溫暖網頁設計方法 181
7．3．2　溫暖網頁設計方案 182
7．3．3　溫暖網頁設計 183
7．3．4　溫暖網頁設計小妙招——暖系燈光 184
7．3．5　優(yōu)秀作品賞析 184
7．4　涼爽 185
7．4．1　手把手教你——涼爽網頁設計方法 185
7．4．2　涼爽網頁設計方案 186
7．4．3　涼爽網頁設計 187
7．4．4　涼爽網頁設計小妙招——巧用藍色背景 188
7．4．5　優(yōu)秀作品賞析 188
7．5　飽滿 189
7．5．1　手把手教你——飽滿網頁設計方法 189
7．5．2　飽滿網頁設計方案 190
7．5．3　飽滿網頁設計 191
7．5．4　飽滿網頁設計小妙招——運用飽和度較高的色彩 192
7．5．5　優(yōu)秀作品賞析 192
7．6　時尚 193
7．6．1　手把手教你——時尚網頁設計方法 193
7．6．2　時尚網頁設計方案 194
7．6．3　時尚網頁設計 195
7．6．4　時尚網頁設計小妙招——用黃色點綴暗系背景 196
7．6．5　優(yōu)秀作品賞析 196
7．7　神秘 197
7．7．1　手把手教你——神秘網頁設計方法 197
7．7．2　神秘網頁設計方案 198
7．7．3　神秘網頁設計 199
7．7．4　神秘網頁設計小妙招——合理運用黑色背景 200
7．7．5　優(yōu)秀作品賞析 200
7．8　喧鬧 201
7．8．1　手把手教你——喧鬧網頁設計方法 201
7．8．2　喧鬧網頁設計方案 202
7．8．3　喧鬧網頁設計 203
7．8．4　喧鬧網頁設計小妙招——多種顏色的搭配 204
7．8．5　優(yōu)秀作品賞析 204
7．9　科技 205
7．9．1　科技感網頁設計的搭配特征 205
7．9．2　科技感網頁設計方案，舉一反三 206
7．9．3　神秘悠揚的科技感色彩搭配 207
7．9．4　設計巧妙的科技感色彩搭配 208
7．9．5　科技感網頁設計小妙招 208
7．9．6　優(yōu)秀作品賞析 210
7．10　專業(yè) 210
7．10．1　專業(yè)感網頁設計的搭配特征 210
7．10．2　專業(yè)感網頁設計方案，舉一反三 211
7．10．3　清爽簡潔的專業(yè)感色彩搭配 212
7．10．4　現代化的專業(yè)感色彩搭配 213
7．10．5　專業(yè)感網頁設計小妙招 213
7．10．6　優(yōu)秀作品賞析 215
8 網頁配色實戰(zhàn) 217
8．1　簡約風格網頁設計 218
8．2　矢量風格圖像裝飾 222