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統一法則 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網頁的規格 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優秀作品賞析 039
3.2橙 039
3.2.1淺談橙色 039
3.2.2應用實例 040
3.2.3常見色分析 040
3.2.4優秀作品賞析 041
3.3黃 042
3.3.1淺談黃色 042
3.3.2應用實例 043
3.3.3常見色分析 043
3.3.4優秀作品賞析 044
3.4綠 044
3.4.1淺談綠色 044
3.4.2應用實例 045
3.4.3常見色分析 045
3.4.4優秀作品賞析 046
3.5青 046
3.5.1淺談青色 046
3.5.2應用實例 047
3.5.3常見色分析 048
3.5.4優秀作品賞析 048
3.6藍 049
3.6.1淺談藍色 049
3.6.2應用實例 050
3.6.3常見色分析 050
3.6.4優秀作品賞析 051
3.7紫 052
3.7.1淺談紫色 052
3.7.2應用實例 053
3.7.3常見色分析 053
3.7.4優秀作品賞析 054
3.8黑 054
3.8.1淺談黑色 054
3.8.2應用實例 055
3.8.3優秀作品賞析 055
3.9白 056
3.9.1淺談白色 056
3.9.2應用實例 057
3.9.3優秀作品賞析 057
3.10灰 058
3.10.1淺談灰色 058
3.10.2應用實例 059
3.10.3優秀作品賞析 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優秀作品賞析 068
4.2滿版型 069
4.2.1手把手教你——滿版型網頁設計方法 069
4.2.2滿版型網頁設計方案 070
4.2.3滿版型網頁設計 071
4.2.4滿版型網頁設計小妙招——實物與虛景的不同妙處 072
4.2.5優秀作品賞析 072
4.3分割型 073
4.3.1手把手教你——分割型網頁設計方法 073
4.3.2分割型網頁設計方案 074
4.3.3分割型網頁設計 075
4.3.4分割型網頁設計小妙招——縱向分割 076
4.3.5優秀作品賞析 076
4.4中軸型 077
4.4.1手把手教你——中軸型網頁設計方法 077
4.4.2中軸型網頁設計方案 078
4.4.3中軸型網頁設計 079
4.4.4中軸型網頁設計小妙招——色彩的沉著感 080
4.4.5優秀作品賞析 080
4.5曲線型 081
4.5.1手把手教你——曲線型網頁設計方法 081
4.5.2曲線型網頁設計方案 082
4.5.3曲線型網頁設計 083
4.5.4曲線型網頁設計小妙招——不同的線條與色彩 084
4.5.5優秀作品賞析 084
4.6傾斜型 085
4.6.1手把手教你——傾斜型網頁設計方法 085
4.6.2傾斜型網頁設計方案 086
4.6.3傾斜型網頁設計 087
4.6.4傾斜型網頁設計小妙招——高明度與低明度的色彩 088
4.6.5優秀作品賞析 088
4.7對稱型 089
4.7.1手把手教你——對稱型網頁設計方法 089
4.7.2對稱型網頁設計方案 090
4.7.3對稱型網頁設計 091
4.7.4對稱型網頁設計小妙招——同對稱的形式 092
4.7.5優秀作品賞析 092
4.8焦點型 093
4.8.1手把手教你——焦點型網頁設計方法 093
4.8.2焦點型網頁設計方案 094
4.8.3焦點型網頁設計 095
4.8.4焦點型網頁設計小妙招——圓形的焦點設計 096
4.8.5優秀作品賞析 096
4.9三角型 097
4.9.1手把手教你——三角型網頁設計方法 097
4.9.2三角型網頁設計方案 098
4.9.3三角型網頁設計 099
4.9.4三角型網頁設計小妙招——綠色的清爽感 100
4.9.5優秀作品賞析 100
4.10自由型 101
4.10.1手把手教你——自由型網頁設計方法 101
4.10.2自由型網頁設計方案 102
4.10.3自由型網頁設計 103
4.10.4自由型網頁設計小妙招——耐人尋味的色彩 104
4.10.5優秀作品賞析 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優秀作品賞析 112
5.2banner 113
5.2.1手把手教你——網頁banner設計方法 113
5.2.2網頁banner設計方案 114
5.2.3網頁banner設計 115
5.2.4網頁banner設計小妙招——動感時尚的灰色圖片 116
5.2.5優秀作品賞析 116
5.3模塊 117
5.3.1手把手教你——網頁模塊設計方法 117
5.3.2網頁模塊設計方案 118
5.3.3網頁模塊設計 119
5.3.4網頁模塊設計小妙招——幾何形狀 120
5.3.5優秀作品賞析 120
5.4文字 121
5.4.1手把手教你——網頁文字設計方法 121
5.4.2網頁文字設計方案 122
5.4.3網頁文字設計 123
5.4.4網頁文字設計小妙招——增加標題文字字號，增加文字對比 124
5.4.5優秀作品賞析 125
6 不同行業的網頁色彩搭配 127
6.1食品類 129
6.1.1手把手教你——食品類網頁設計方法 129
6.1.2食品類網頁設計方案 130
6.1.3食品類網頁設計 131
6.1.4食品類網頁設計小妙招——通過顏色讓畫面變得“更好喫” 132
6.1.5優秀作品賞析 132
6.2服裝類 133
6.2.1手把手教你——服裝類網頁設計方法 133
6.2.2服裝類網頁設計方案 134
6.2.3服裝類網頁設計 135
6.2.4服裝類網頁設計小妙招——網頁的版式設計 136
6.2.5優秀作品賞析 136
6.3企業類 137
6.3.1手把手教你——企業類網頁設計方法 137
6.3.2企業類網頁設計方案 138
6.3.3企業類網頁設計 139
6.3.4企業類網頁設計小妙招——富饒與簡易的對比 140
6.3.5優秀作品賞析 140
6.4美妝類 141
6.4.1手把手教你——美妝類網頁設計方法 141
6.4.2美妝類網頁設計方案 142
6.4.3美妝類網頁設計 143
6.4.4美妝類網頁設計小妙招——黑色對稱版式 144
6.4.5優秀作品賞析 144
6.5數碼類 145
6.5.1手把手教你——數碼類網頁設計方法 145
6.5.2數碼類網頁設計方案 146
6.5.3數碼類網頁設計 147
6.5.4數碼類網頁設計小妙招——繪畫的插入 148
6.5.5優秀作品賞析 148
6.6文娛類 149
6.6.1手把手教你——文娛類網頁設計方法 149
6.6.2文娛類網頁設計方案 150
6.6.3文娛類網頁設計 151
6.6.4文娛類網頁設計小妙招——簡潔的分割手法 152
6.6.5優秀作品賞析 152
6.7家居類 153
6.7.1手把手教你——家居類網頁設計方法 153
6.7.2家居類網頁設計方案 154
6.7.3家居類網頁設計 155
6.7.4家居類網頁設計小妙招——清爽的視覺 156
6.7.5優秀作品賞析 156
6.8汽車類 157
6.8.1手把手教你——汽車類網頁設計方法 157
6.8.2汽車類網頁設計方案 158
6.8.3汽車類網頁設計 159
6.8.4汽車類網頁設計小妙招——深色調體現高端定位 160
6.8.5優秀作品賞析 160
6.9旅遊類 161
6.9.1手把手教你——旅遊類網頁設計方法 161
6.9.2旅遊類網頁設計方案 162
6.9.3旅遊類網頁設計 163
6.9.4旅遊類網頁設計小妙招——通過高清大圖吸引訪客 164
6.9.5優秀作品賞析 164
6.10創意類 165
6.10.1手把手教你——創意類網頁設計方法 165
6.10.2創意類網頁設計方案 166
6.10.3創意類網頁設計 167
6.10.4創意類網頁設計小妙招——動畫的趣味性 168
6.10.5優秀作品賞析 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優秀作品賞析 176
7.2清新 177
7.2.1手把手教你——清新網頁設計方法 177
7.2.2清新網頁設計方案 178
7.2.3清新網頁設計 179
7.2.4清新網頁設計小妙招——帶有灰度的顏色 180
7.2.5優秀作品賞析 180
7.3溫暖 181
7.3.1手把手教你——溫暖網頁設計方法 181
7.3.2溫暖網頁設計方案 182
7.3.3溫暖網頁設計 183
7.3.4溫暖網頁設計小妙招——暖繫燈光 184
7.3.5優秀作品賞析 184
7.4涼爽 185
7.4.1手把手教你——涼爽網頁設計方法 185
7.4.2涼爽網頁設計方案 186
7.4.3涼爽網頁設計 187
7.4.4涼爽網頁設計小妙招——巧用藍色背景 188
7.4.5優秀作品賞析 188
7.5飽滿 189
7.5.1手把手教你——飽滿網頁設計方法 189
7.5.2飽滿網頁設計方案 190
7.5.3飽滿網頁設計 191
7.5.4飽滿網頁設計小妙招——運用飽和度較高的色彩 192
7.5.5優秀作品賞析 192
7.6時尚 193
7.6.1手把手教你——時尚網頁設計方法 193
7.6.2時尚網頁設計方案 194
7.6.3時尚網頁設計 195
7.6.4時尚網頁設計小妙招——用黃色點綴暗繫背景 196
7.6.5優秀作品賞析 196
7.7神秘 197
7.7.1手把手教你——神秘網頁設計方法 197
7.7.2神秘網頁設計方案 198
7.7.3神秘網頁設計 199
7.7.4神秘網頁設計小妙招——合理運用黑色背景 200
7.7.5優秀作品賞析 200
7.8喧鬧 201
7.8.1手把手教你——喧鬧網頁設計方法 201
7.8.2喧鬧網頁設計方案 202
7.8.3喧鬧網頁設計 203
7.8.4喧鬧網頁設計小妙招——多種顏色的搭配 204
7.8.5優秀作品賞析 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優秀作品賞析 210
7.10專業 210
7.10.1專業感網頁設計的搭配特征 210
7.10.2專業感網頁設計方案，舉一反三 211
7.10.3清爽簡潔的專業感色彩搭配 212
7.10.4現代化的專業感色彩搭配 213
7.10.5專業感網頁設計小妙招 213
7.10.6優秀作品賞析 215
8 網頁配色實戰 217
8.1簡約風格網頁設計 218
8.2矢量風格圖像裝飾 222
