網(wǎng)頁設(shè)計師培訓(xùn)教程

第1章　網(wǎng)頁設(shè)計基礎(chǔ)概述 1
1.1　全面認(rèn)識網(wǎng)頁 2
1.1.1　網(wǎng)站、網(wǎng)頁和主頁 2
1.1.2　HTML的組成及語法 4
1.2　網(wǎng)站設(shè)計的流程 7
1.2.1　注冊域名與申請空間 7
1.2.2　新建站點(diǎn)與收集網(wǎng)頁素材 8
1.2.3　整合站點(diǎn)內(nèi)容和編寫服務(wù)器端代碼 8
1.2.4　實(shí)現(xiàn)FTP服務(wù)器的上傳與下載 8
1.2.5　對網(wǎng)站進(jìn)行維護(hù) 9
1.3　網(wǎng)頁的基本組成元素 9
1.3.1　網(wǎng)頁中的文本 9
1.3.2　網(wǎng)頁中的圖片 10
1.3.3　網(wǎng)頁中的多媒體 11
1.4　申請免費(fèi)空間與發(fā)布網(wǎng)站 11
1.4.1　申請免費(fèi)空間流程 11
1.4.2　在免費(fèi)空間發(fā)布網(wǎng)站 12
1.4.3　網(wǎng)站的宣傳與推廣 13
本章小結(jié) 15
習(xí)題與動手操作 15
第2章　網(wǎng)頁配色知識基礎(chǔ) 17
2.1　網(wǎng)頁配色基礎(chǔ) 18
2.1.1　網(wǎng)頁中顏色搭配與原理 18
2.1.2　RGB顏色和色相環(huán) 19
2.1.3　不同顏色的含義 20
2.2　按網(wǎng)站風(fēng)格進(jìn)行配色 21
2.2.1　清爽風(fēng)格 22
2.2.2　活潑風(fēng)格 22
2.2.3　商業(yè)風(fēng)格 22
2.2.4　古典風(fēng)格 23
2.2.5　科技金屬風(fēng)格 23
2.3　網(wǎng)站配色 24
2.3.1　按企業(yè)形象進(jìn)行配色 24
2.3.2　按顏色對比進(jìn)行配色 25
2.3.3　配色后的修飾和色彩的搭配 26
本章小結(jié) 27
習(xí)題與動手操作 27
第3章　Dreamweaver CS3使用基礎(chǔ) 29
3.1　Dreamweaver CS3的工作界面 30
3.1.1　標(biāo)題欄、工具欄和菜單欄 30
3.1.2　屬性檢查器和右側(cè)面板組 32
3.1.3　文檔窗口和狀態(tài)欄 33
3.2　網(wǎng)頁文檔的基本操作 34
3.2.1　創(chuàng)建網(wǎng)頁文檔 34
3.2.2　打開網(wǎng)頁文檔 35
3.2.3　保存網(wǎng)頁文檔 35
3.2.4　預(yù)覽網(wǎng)頁 35
3.2.5　設(shè)置頁面屬性 36
3.3　文本和表格的應(yīng)用 36
3.3.1　輸入和編輯文本 36
3.3.2　設(shè)置文本屬性 37
3.3.3　插入表格和修改表格 39
3.3.4　表格屬性的設(shè)置 41
3.3.5　嵌套表格 42
3.3.6　通過表格構(gòu)造網(wǎng)頁布局 42
3.4　Dreamweaver CS3中的表單應(yīng)用 43
3.4.1　創(chuàng)建HTML表單 43
3.4.2　設(shè)計一個用戶注冊頁面的完整表單 44
3.4.3　跳轉(zhuǎn)菜單的設(shè)計 48
本章小結(jié) 49
習(xí)題與動手操作 49
第4章　Dreamweaver CS3應(yīng)用詳解 51
4.1　框架與框架集 52
4.1.1　制作框架頁面 52
4.1.2　Iframe標(biāo)記功能 54
4.1.3　制作Iframe頁面 54
4.2　在Dreamweaver CS3中創(chuàng)建超鏈接 56
4.2.1　設(shè)置頁面超鏈接 57
4.2.2　設(shè)置下載文件超鏈接 57
4.2.3　設(shè)置Email超鏈接 58
4.2.4　設(shè)置圖片超鏈接 59
4.3　應(yīng)用CSS樣式表 61
4.3.1　新CSS樣式表的創(chuàng)建 61
4.3.2　定義CSS樣式表的參數(shù) 62
4.3.3　應(yīng)用CSS樣式 62
4.4　在網(wǎng)頁中使用層和行為 63
4.4.1　層的插入與基本操作 63
4.4.2　轉(zhuǎn)換層與表格 65
4.4.3　應(yīng)用行為 66
4.4.4　Dreamweaver CS3中的內(nèi)置行為 67
4.5　模板和庫的應(yīng)用 74
4.5.1　模板的使用 74
4.5.2　編輯和使用庫 79
本章小結(jié) 81
習(xí)題與動手操作 82
第5章　Photoshop CS3使用基礎(chǔ) 84
5.1　Photoshop CS3中的常用工具 85
5.1.1　選擇工具 85
5.1.2　畫筆類工具 88
5.1.3　修飾工具 89
5.1.4　剪切和切片工具 93
5.1.5　其他常用工具 96
5.2　Photoshop CS3中的常用調(diào)板 96
5.2.1　圖層調(diào)板與樣式調(diào)板 97
5.2.2　通道調(diào)板 98
5.2.3　歷史記錄調(diào)板 99
5.2.4　路徑調(diào)板 99
5.3　Photoshop CS3中的常見濾鏡 100
5.3.1　扭曲濾鏡組 100
5.3.2　模糊濾鏡組 102
5.3.3　渲染濾鏡組 103
5.3.4　素描效果濾鏡組 105
5.3.5　紋理濾鏡組 105
5.3.6　風(fēng)格化濾鏡組 107
本章小結(jié) 109
習(xí)題與動手操作 110
第6章　應(yīng)用Photoshop CS3文字和圖層 112
6.1　在Photoshop CS3中創(chuàng)建文字 113
6.1.1　文字工具 113
6.1.2　創(chuàng)建文字選區(qū) 113
6.1.3　文字的變形 115
6.1.4　實(shí)例：特殊文字效果 116
6.2　Photoshop CS3中圖層的應(yīng)用 118
6.2.1　圖層的混合模式 119
6.2.2　實(shí)例：背景特效制作 121
本章小結(jié) 122
習(xí)題與動手操作 123
第7章　應(yīng)用路徑、色彩和通道 125
7.1　在Photoshop CS3中創(chuàng)建路徑 126
7.1.1　使用路徑工具 126
7.1.2　編輯路徑 128
7.1.3　實(shí)例：繪制網(wǎng)站Logo 130
7.2　調(diào)整圖像色彩和色調(diào) 131
7.2.1　調(diào)整圖像的色彩 131
7.2.2　調(diào)整圖像的色調(diào) 137
7.2.3　實(shí)例：校正網(wǎng)頁中的偏色圖片 141
7.3　應(yīng)用通道 142
7.3.1　通道的操作 142
7.3.2　專色通道 147
7.3.3　實(shí)例：對圖片進(jìn)行處理 149
本章小結(jié) 151
習(xí)題與動手操作 152
第8章　Flash CS3使用基礎(chǔ) 153
8.1　熟悉Flash CS3的工具界面 154
8.1.1　標(biāo)題欄、菜單欄和工具欄 154
8.1.2　繪圖工具箱 155
8.1.3　時間軸面板 155
8.1.4　舞臺和工作區(qū) 156
8.1.5　屬性面板 156
8.2　Flash CS3中的常用工具 156
8.2.1　線條工具和形狀工具 157
8.2.2　鉛筆工具、鋼筆工具和橡皮擦工具 159
8.2.3　填充圖形 161
8.2.4　文本的添加與編輯 162
8.2.5　對象的變形 163
8.3　元件、實(shí)例與元件庫 164
8.3.1　元件的創(chuàng)建 164
8.3.2　元件庫的類型 167
8.3.3　將元件庫里的元件加到舞臺中 168
8.3.4　元件庫面板操作 168
8.3.5　編輯舞臺中的實(shí)例 171
本章小結(jié) 173
習(xí)題與動手操作 174
第9章　Flash CS3動畫制作基礎(chǔ) 176
9.1　時間軸和幀 177
9.1.1　插入幀、選擇并移動幀 177
9.1.2　幀的刪除與清除 178
9.1.3　轉(zhuǎn)換關(guān)鍵幀為普通幀 178
9.1.4　翻轉(zhuǎn)幀與更改幀頻 179
9.1.5　洋蔥皮技術(shù) 179
9.1.6　時間軸特效 181
9.2　Action Script腳本應(yīng)用 182
9.2.1　將Action Script建立在幀中 182
9.2.3　將Action Script建立在影片剪輯中 183
9.3　Flash CS3中的影音特效 183
9.3.1　添加聲音元件至按鈕 183
9.3.2　將聲音加入拖到舞臺中 185
9.3.3　設(shè)置聲音效果 186
9.3.4　壓縮并導(dǎo)出聲音 187
9.4　測試與發(fā)布動畫 189
9.4.1　優(yōu)化與測試動畫 189
9.4.2　Flash CS3文檔的導(dǎo)出 191
9.4.3　發(fā)布Flash CS3文檔 193
本章小結(jié) 194
習(xí)題與動手操作 195
第10章　在Dreamweaver中插入動畫 197
10.1　插入Flash對象 198
10.1.1　插入Flash按鈕 198
10.1.2　插入Flash文本 199
10.1.3　插入Flash動畫 200
10.1.4　插入Flash視頻 201
10.1.5　插入Flash Paper 202
10.2　插入其他媒體對象 204
10.2.1　插入ActiveX 204
10.2.2　插入Java Applet 205
10.2.3　插入插件 205
10.3　插入聲音 206
10.3.1　嵌入聲音文件 206
10.3.2　鏈接到聲音文件 207
本章小結(jié) 207
習(xí)題與動手操作 208
第11章　構(gòu)建房地產(chǎn)類網(wǎng)站 209
11.1　實(shí)例分析 210
11.2　主要知識點(diǎn) 210
11.3　設(shè)計流程 211
11.4　在Photoshop CS3中設(shè)計頁面效果 211
11.4.1　設(shè)置背景圖片 211
11.4.2　制作網(wǎng)站的Logo 214
11.4.3　添加廣告語 217
11.4.4　對圖片進(jìn)行裁剪 219
11.4.5　制作新聞元素 220
11.5　在Flash CS3中編輯網(wǎng)頁動畫 222
11.5.1　制作網(wǎng)頁導(dǎo)航欄 222
11.5.2　設(shè)計文字滾動效果 225
11.5.3　制作Flash動畫 229
11.6　在Dreamweaver CS3中編輯網(wǎng)頁 231
11.6.1　創(chuàng)建并設(shè)置站點(diǎn) 231
11.6.2　設(shè)置頁面屬性 233
11.6.3　添加Logo和頂部圖片 234
11.6.4　添加Flash CS3動畫 236
11.6.5　添加圖片和文字 238
11.6.6　網(wǎng)頁底部制作 239
11.6.7　創(chuàng)建超級鏈接 241
本章小結(jié) 243
習(xí)題與動手操作 243
第12章　構(gòu)建IT類商務(wù)網(wǎng)站 245
12.1　實(shí)例分析 246
12.1.1　背景概述 246
12.1.2　實(shí)例簡介 246
12.2　主要知識點(diǎn) 246
12.3　設(shè)計流程 247
12.4　在Photoshop中設(shè)計頁面效果 247
12.4.1　設(shè)計頁面頂部顯示部分 247
12.4.2　設(shè)置banner和導(dǎo)航欄效果圖 253
12.4.3　設(shè)計用戶登錄面板 255
12.4.4　設(shè)置商品鏈接面板 259
12.4.5　設(shè)計頁面中間部分 263
12.4.6　設(shè)計公告欄面板 267
12.4.7　制作頁面底部效果 269
12.4.8　對圖片進(jìn)行裁剪 271
12.5　在Flash CS3中編輯網(wǎng)頁動畫 271
12.5.1　在Flash CS3中設(shè)計Banner動畫 271
12.5.2　設(shè)計圖片動畫展示效果 277
12.6　在Dreamweaver CS3中編輯網(wǎng)頁 279
12.6.1　添加Logo與頂部導(dǎo)航 279
12.6.2　添加Flash動畫 281
12.6.3　添加圖片與文字 282
12.6.4　添加友情鏈接 286
12.6.5　添加其他鏈接和欄目 287
本章小結(jié) 290
習(xí)題與動手操作 290
附錄A　習(xí)題參考答案 292
附錄B　模擬試卷及參考答案 301
參考文獻(xiàn) 310