中文版Dreamweaver CC+Flash CC+Photoshop CC網(wǎng)頁設(shè)計基礎(chǔ)培訓教程

了解網(wǎng)頁設(shè)計篇
第1章　了解網(wǎng)頁設(shè)計　13
1．1　什么是網(wǎng)頁設(shè)計　14
1．1．1　網(wǎng)頁設(shè)計概述　14
1．1．2　網(wǎng)頁設(shè)計中的術(shù)語　15
1．2　網(wǎng)頁設(shè)計常用軟件和技術(shù)　17
1．2．1　網(wǎng)頁圖像處理軟件——Photoshop CC　17
1．2．2　網(wǎng)頁動畫制作軟件——Flash CC　17
1．2．3　網(wǎng)頁編輯制作軟件——Dreamweaver CC　18
1．2．4　網(wǎng)頁標記語言——HTML　18
1．2．5　網(wǎng)頁特效腳本語言——JavaScript　19
1．3　“網(wǎng)頁三劍客”的關(guān)系　19
1．4　網(wǎng)站建設(shè)的基本流程　20
1．4．1　前期網(wǎng)站策劃　20
1．4．2　規(guī)劃站點結(jié)構(gòu)　20
1．4．3　收集網(wǎng)站相關(guān)素材　20
1．4．4　網(wǎng)頁的版式與布局分析　20
1．4．5　確定網(wǎng)頁的主色調(diào)　21
1．4．6　設(shè)計網(wǎng)站頁面　21
1．4．7　切割和優(yōu)化網(wǎng)頁圖像　22
1．4．8　制作網(wǎng)站HTML頁面　22
1．4．9　開發(fā)動態(tài)網(wǎng)站功能模塊　22
1．4．10　申請域名和服務(wù)器空間　22
1．4．11　測試并上傳網(wǎng)站　22
1．4．12　網(wǎng)站的更新與維護　22
Photoshop　CC篇
第2章　Photoshop CC入門　23
2．1　“網(wǎng)頁三劍客”之Photoshop　24
2．1．1　選擇合適的網(wǎng)頁圖像處理軟件　24
2．1．2　了解網(wǎng)頁圖像處理軟件——Photoshop　24
2．2　認識Photoshop CC工作界面　25
2．3　文件的基本操作　25
2．3．1　課堂案例——新建一個網(wǎng)頁常用尺寸的文檔　26
2．3．2　新建文件　27
2．3．3　打開文件　29
2．3．4　保存文件　29
2．3．5　導入文件　29
2．3．6　置入文件　29
2．3．7　導出文件　30
2．3．8　關(guān)閉文件　30
2．4　圖像編輯輔助操作　31
2．4．1　課堂案例——在Photoshop中查看網(wǎng)頁圖像　31
2．4．2　使用標尺和參考線　32
2．4．3　課堂案例—校正傾斜圖像　33
2．4．4　使用“裁剪工具”　34
2．4．5　使用“裁切”命令　35
2．5　調(diào)整網(wǎng)頁圖像　35
2．5．1　課堂案例—修改網(wǎng)頁圖像大小　35
2．5．2　“圖像大小”對話框　36
2．5．3　“畫布大小”對話框　37
2．6　課堂練習——制作鏡面投影效果　38
2．7　課后習題——裁剪網(wǎng)頁圖像　38
第3章　使用Photoshop CC處理網(wǎng)頁文本　39
3．1　輸入文本　40
3．1．1　課堂案例—輸入廣告文字　40
3．1．2　文字工具組　41
3．1．3　文字工具的“選項”欄　41
3．2　編輯文本　42
3．2．1　課堂案例—制作淘寶促銷廣告　42
3．2．2　“字符”面板　45
3．3　制作特殊文字效果　46
3．3．1　課堂案例—制作變形廣告文字　46
3．3．2　創(chuàng)建變形文字　48
3．3．3　課堂案例——制作路徑文字　49
3．3．4　路徑文字　50
3．4　使用“圖層”面板　50
3．4．1　課堂案例——制作游戲網(wǎng)站導航　50
3．4．2　“圖層”面板　53
3．4．3　圖層的基本操作　54
3．5　圖層樣式　55
3．5．1　課堂案例——使用圖層樣式制作網(wǎng)頁廣告文字　55
3．5．2　添加圖層樣式　57
3．6　課堂練習——制作網(wǎng)站導航菜單　58
3．7　課后習題——制作網(wǎng)頁圖文混排　58
第4章　修改網(wǎng)頁圖像的形狀和顏色　59
4．1　創(chuàng)建與編輯選區(qū)　60
4．1．1　課堂案例——制作精美網(wǎng)站促銷廣告　60
4．1．2　選框工具組　63
4．1．3　課堂案例——去除圖像不需要的內(nèi)容　63
4．1．4　套索工具組　65
4．1．5　魔棒工具組　65
4．1．6　修改選區(qū)　65
4．2　修改圖像　66
4．2．1　課堂案例——使用仿制圖章工具復制圖像　67
4．2．2　圖章工具組　68
4．2．3　橡皮擦工具組　69
4．2．4　課堂案例——去除水印　69
4．2．5　修復工具組　71
4．3　調(diào)整網(wǎng)頁圖像的顏色　71
4．3．1　課堂案例——調(diào)整網(wǎng)頁中的圖像　72
4．3．2　自動調(diào)整命令　73
4．3．3　“亮度/對比度”命令　73
4．3．4　課堂案例——調(diào)整網(wǎng)站廣告的色調(diào)　73
4．3．5　“色相/飽和度”命令　75
4．3．6　課堂案例——替換圖像顏色　75
4．3．7　“替換顏色”命令　77
4．4　課堂練習——調(diào)整網(wǎng)站廣告效果　77
4．5　課后習題——匹配網(wǎng)站廣告顏色　78
第5章　繪制網(wǎng)頁元素　79
5．1　基本繪圖工具　80
5．1．1　課堂案例——設(shè)計網(wǎng)站廣告圖片　80
5．1．2　畫筆工具　82
5．1．3　鉛筆工具　83
5．2　矢量繪圖工具　83
5．2．1　課堂案例——制作網(wǎng)站水晶質(zhì)感按鈕　83
5．2．2　矩形工具　87
5．2．3　橢圓工具　88
5．2．4　圓角矩形工具　88
5．2．5　多邊形工具　88
5．2．6　直線工具　89
5．2．7　自定形狀工具　89
5．3　鋼筆工具　89
5．3．1　課堂案例——設(shè)計教育網(wǎng)站Logo　90
5．3．2　鋼筆工具　94
5．3．3　添加和刪除錨點　95
5．3．4　課堂案例——設(shè)計網(wǎng)站廣告頁面　95
5．3．5　選擇路徑與錨點　101
5．3．6　調(diào)整路徑　101
5．3．7　變換路徑　102
5．4　課堂練習——設(shè)計網(wǎng)站實用圖標　102
5．5　課后習題——設(shè)計企業(yè)網(wǎng)站頁面　103
第6章　網(wǎng)頁動畫制作與切片輸出　104
6．1　創(chuàng)建與編輯切片　105
6．1．1　課堂案例——為網(wǎng)頁創(chuàng)建切片　105
6．1．2　創(chuàng)建切片　106
6．1．3　選擇和移動切片　106
6．1．4　刪除切片　107
6．2　圖像優(yōu)化與輸出　107
6．2．1　課堂案例——創(chuàng)建切片并輸出網(wǎng)頁　107
6．2．2　優(yōu)化圖像　109
6．2．3　輸出圖像　109
6．3　創(chuàng)建Gif動畫　110
6．3．1　課堂案例——創(chuàng)建網(wǎng)頁Gif動畫　110
6．3．2　認識“時間軸”面板　114
6．4　課堂練習——將圖片輸出為HTML網(wǎng)頁　116
6．5　課后習題——制作Gif廣告條　116
Flash　CC篇
第7章　Flash CC入門　117
7．1　“網(wǎng)頁三劍客”之Flash　118
7．1．1　Flash動畫基礎(chǔ)　118
7．1．2　Flash動畫的應(yīng)用及發(fā)展背景　118
7．2　Flash CC工作界面　120
7．2．1　課堂案例——自定義Flash CC工作區(qū)　121
7．2．2　認識Flash CC工作界面　122
7．2．3　選擇適合的工作區(qū)　123
7．3　新建Flash文件　124
7．3．1　課堂案例——通過Flash模板快速制作動畫　124
7．3．2　“新建文檔”對話框　126
7．3．3　“從模板新建”對話框　126
7．3．4　設(shè)置Flash文檔屬性　127
7．4　打開和保存Flash文件　128
7．4．1　課堂案例——打開Flash文件　128
7．4．2　保存Flash文件　129
7．4．3　另存為Flash文件　129
7．4．4　另存為Flash模板文件　130
7．4．5　關(guān)閉Flash文件　130
7．5　課堂練習——制作海底世界動畫　130
7．6　課后習題——制作下雨動畫　131
第8章　掌握Flash CC的繪圖技法　132
8．1　使用基本繪圖工具　133
8．1．1　課堂案例——繪制卡通表情　133
8．1．2　矩形工具和基本矩形工具　135
8．1．3　橢圓工具和基本橢圓工具　136
8．1．4　填充顏色和筆觸顏色　137
8．1．5　課堂案例——繪制卡通向日葵　138
8．1．6　多角星形工具　142
8．1．7　線條工具　143
8．1．8　鉛筆工具　143
8．1．9　刷子工具　143
8．1．10　橡皮擦工具　144
8．2　高級繪圖工具　145
8．2．1　課堂案例——繪制可愛雪人　145
8．2．2　鋼筆工具　148
8．2．3　調(diào)整錨點和錨點轉(zhuǎn)換　148
8．2．4　添加和刪除錨點　149
8．3　課堂練習——繪制可愛卡通貓　149
8．4　課后習題——繪制蘋果　149
第9章　基礎(chǔ)Flash動畫制作　151
9．1　逐幀動畫　152
9．1．1　課堂案例——制作人物舞蹈動畫　152
9．1．2　逐幀動畫的特點　154
9．1．3　幀、過渡幀、關(guān)鍵幀、空白關(guān)鍵幀　154
9．2　形狀補間動畫　155
9．2．1　課堂案例——制作太陽公公動畫　155
9．2．2　形狀補間動畫的特點　157
9．2．3　認識“時間軸”面板　157
9．2．4　幀的編輯操作　158
9．3　補間動畫　160
9．3．1　課堂案例——文字淡入淡出動畫　160
9．3．2　補間動畫的特點　164
9．3．3　什么是元件？　164
9．3．4　元件的類型　164
9．3．5　“動畫預設(shè)”面板　164
9．4　傳統(tǒng)補間動畫　164
9．4．1　課堂案例——制作卡通角色入場動畫　165
9．4．2　傳統(tǒng)補間動畫的特點　168
9．4．3　應(yīng)用濾鏡效果　169
9．5　課堂練習——制作圣誕老人飛入動畫　169
9．6　課后習題——制作圖像切換動畫　170
第10章　高級Flash動畫制作　171
10．1　引導線動畫　172
10．1．1　課堂案例——制作汽車路徑動畫　172
10．1．2　引導線動畫的特點　174
10．1．3　創(chuàng)建引導層和運動引導層　174
10．2　遮罩動畫　175
10．2．1　課堂案例——多層次遮罩動畫　175
10．2．2　遮罩動畫的特點　177
10．3　3D動畫　177
10．3．1　課堂案例——制作3D旋轉(zhuǎn)動畫　177
10．3．2　3D旋轉(zhuǎn)工具　182
10．3．3　3D平移工具　182
10．4　為動畫添加音樂　183
10．4．1　課堂案例——添加背景音樂　183
10．4．2　Flash中支持的音頻格式　186
10．4．3　支持的音頻類型　187
10．4．4　設(shè)置音頻屬性　187
10．5　為動畫導入視頻　188
10．5．1　課堂案例——制作網(wǎng)站視頻廣告　188
10．5．2　Flash中支持的視頻格式　190
10．5．3　“導入視頻”對話框　191
10．6　課堂練習——制作3D平移動畫　191
10．7　課后習題——制作圖像切換遮罩動畫　192
第11章　廣告文字動畫和按鈕動畫　193
11．1　廣告文字動畫　194
11．1．1　課堂案例——制作廣告文字動畫　194
11．1．2　文本類型　196
11．1．3　設(shè)置文本屬性　197
11．1．4　移動和選擇文本　197
11．1．5　課堂案例——制作閃爍文字動畫　198
11．1．6　為文本設(shè)置超鏈接　200
11．1．7　分離文本　200
11．2　按鈕動畫　200
11．2．1　課堂案例——制作按鈕菜單動畫　201
11．2．2　元件的中心點和注冊點　203
11．2．3　編輯元件　204
11．2．4　課堂案例——制作游戲按鈕動畫　205
11．2．5　認識“庫”面板　208
11．2．6　管理庫項目　209
11．3　課堂練習——制作發(fā)光文字動畫　210
11．4　課后習題——制作翻轉(zhuǎn)按鈕動畫　210
Dreamweaver　CC篇
第12章　Dreamweaver CC入門　211
12．1　“網(wǎng)頁三劍客”之Dreamweaver　212
12．1．1　了解網(wǎng)頁制作軟件——Dreamweaver　212
12．1．2　Dreamweaver在網(wǎng)頁制作方面的優(yōu)勢　212
12．2　認識Dreamweaver CC工作界面　212
12．3　網(wǎng)頁文件的基礎(chǔ)操作　213
12．3．1　課堂案例——制作第一個HTML頁面　214
12．3．2　新建網(wǎng)頁　215
12．3．3　打開網(wǎng)頁　216
12．3．4　預覽網(wǎng)頁　216
12．3．5　保存和關(guān)閉網(wǎng)頁　217
12．4　創(chuàng)建站點　218
12．4．1　課堂案例——創(chuàng)建站點并設(shè)置遠程服務(wù)器　218
12．4．2　切換站點　220
12．4．3　“管理站點”對話框　220
12．5　課堂練習——創(chuàng)建本地靜態(tài)站點　221
12．6　課后習題——在代碼視圖中創(chuàng)建HTML頁面　222
第13章　在網(wǎng)頁中插入基礎(chǔ)網(wǎng)頁元素　223
13．1　設(shè)置網(wǎng)頁整體屬性　224
13．1．1　課堂案例——控制歡迎頁面整體外觀　224
13．1．2　設(shè)置外觀（CSS）　226
13．1．3　設(shè)置外觀（HTML）　226
13．1．4　設(shè)置連接（CSS）　227
13．1．5　設(shè)置標題（CSS）　227
13．1．6　設(shè)置標題和編碼　227
13．1．7　設(shè)置跟蹤圖像　228
13．2　在網(wǎng)頁中添加文本　228
13．2．1　課堂案例——制作關(guān)于我們頁面　229
13．2．2　在網(wǎng)頁中輸入文本的方法　230
13．2．3　設(shè)置文本屬性　230
13．2．4　插入水平線　231
13．2．5　插入時間　232
13．2．6　插入特殊字符　232
13．3　在網(wǎng)頁中創(chuàng)建項目列表和編號列表　232
13．3．1　課堂案例——制作新聞列表　233
13．3．2　設(shè)置項目列表和編號列表屬性　235
13．4　在網(wǎng)頁中插入圖像　236
13．4．1　課堂案例——制作游戲介紹頁面　236
13．4．2　網(wǎng)頁圖像格式　238
13．4．3　設(shè)置圖像屬性　238
13．4．4　“插入鼠標經(jīng)過圖像”對話框　240
13．5　課堂練習——制作圖像頁面　240
13．6　課后習題——制作文本網(wǎng)頁　240
第14章　創(chuàng)建網(wǎng)頁鏈接　242
14．1　創(chuàng)建普通超鏈接　243
14．1．1　課堂案例——創(chuàng)建文字和圖像鏈接　243
14．1．2　相對路徑　245
14．1．3　絕對路徑　245
14．1．4　外部鏈接和內(nèi)部鏈接　246
14．1．5　超鏈接打開方式　246
14．2　創(chuàng)建特殊超鏈接　246
14．2．1　課堂案例——創(chuàng)建空鏈接和下載鏈接　247
14．2．2　空鏈接　248
14．2．3　下載鏈接　248
14．2．4　課堂案例——創(chuàng)建E-mail鏈接　248
14．2．5　電子郵件鏈接　250
14．2．6　腳本鏈接　250
14．2．7　圖像熱點工具　250
14．3　課堂練習——創(chuàng)建腳本鏈接　250
14．4　課后習題——創(chuàng)建圖像熱點鏈接　251
第15章　在網(wǎng)頁中運用多媒體元素　252
15．1　HTML5 Audio和HTML5 Video　253
15．1．1　課堂案例——為網(wǎng)頁插入HTML5視頻和音頻　253
15．1．2　插入HTML5 Audio并設(shè)置屬性　255
15．1．3　插入HTML5 Video并設(shè)置屬性　256
15．2　在網(wǎng)頁中插入Flash動畫　256
15．2．1　課堂案例——制作Flash網(wǎng)頁　257
15．2．2　設(shè)置Flash屬性　258
15．3　在網(wǎng)頁中插入FLV視頻　259
15．3．1　課堂案例——制作FLV視頻頁面　259
15．3．2　“插入FLV視頻”對話框　260
15．4　在網(wǎng)頁中插入普通視頻　261
15．4．1　課堂案例——在網(wǎng)頁中插入視頻　261
15．4．2　網(wǎng)頁中常用視頻格式　263
15．4．3　在網(wǎng)頁中添加背景音樂　263
15．4．4　網(wǎng)頁中支持的音頻格式　263
15．5　課堂練習——為網(wǎng)頁添加背景音樂　264
15．6　課后習題——制作Flash歡迎頁　264
第16章　CSS樣式與Div+CSS布局　265
16．1　創(chuàng)建CSS樣式　266
16．1．1　課堂案例——創(chuàng)建標簽CSS樣式和類CSS樣式　266
16．1．2　什么是CSS樣式　268
16．1．3　CSS樣式的基本寫法　269
16．1．4　CSS樣式的優(yōu)越性　269
16．1．5　課堂案例——創(chuàng)建ID CSS樣式和復合CSS樣式　269
16．1．6　全新的“CSS設(shè)計器”面板　272
16．1．7　編輯CSS樣式　273
16．2　豐富的CSS樣式設(shè)置　273
16．2．1　課堂案例——制作圖像展示頁面　274
16．2．2　布局樣式詳解　275
16．2．3　課堂案例——制作網(wǎng)頁文本介紹　276
16．2．4　文本樣式詳解　277
16．2．5　課堂案例——為網(wǎng)頁中的圖像添加邊框效果　278
16．2．6　邊框樣式詳解　280
16．2．7　課堂案例——設(shè)置網(wǎng)頁背景圖像　280
16．2．8　背景樣式詳解　282
16．2．9　課堂案例——美化新聞列表　283
16．2．10　其他樣式詳解　284
16．3　CSS樣式的特殊應(yīng)用　284
16．3．1　課堂案例——制作游戲網(wǎng)站新聞　284
16．3．2　CSS類選區(qū)　286
16．3．3　課堂案例——在網(wǎng)頁中實現(xiàn)特殊字體效果　286
16．3．4　Web字體　288
16．3．5　Adobe Edge Web Fonts　288
16．4　Div+CSS布局　289
16．4．1　課堂案例——CSS盒模型　289
16．4．2　了解CSS盒模型　291
16．4．3　CSS盒模型要點　291
16．5　課堂練習——創(chuàng)建網(wǎng)頁中超鏈接CSS樣式　292
16．6　課后習題——網(wǎng)頁布局中的空白邊疊加　292
第17章　制作網(wǎng)頁表單　293
17．1　在網(wǎng)頁中應(yīng)用常用表單元素　294
17．1．1　課堂案例——制作用戶登錄頁面　294
17．1．2　常用表單元素　298
17．1．3　文本域?qū)傩栽O(shè)置　299
17．1．4　圖像按鈕屬性設(shè)置　300
17．1．5　課堂案例——制作網(wǎng)站投票　301
17．1．6　單選按鈕屬性設(shè)置　303
17．1．7　復選框?qū)傩栽O(shè)置　303
17．1．8　課堂案例——制作搜索欄　303
17．1．9　選擇域?qū)傩栽O(shè)置　306
17．1．10　按鈕、重置按鈕和提交按鈕　306
17．2　在網(wǎng)頁中運用HTML5表單元素　307
17．2．1　課堂案例——制作網(wǎng)站留言表單頁面　307
17．2．2　HTML5表單元素　309
17．2．3　電子郵件　310
17．2．4　Url　311
17．2．5　Tel　311
17．3　課堂練習——制作登錄窗口　312
17．4　課后習題——制作用戶注冊頁面　312
第18章　為網(wǎng)頁添加特效　313
18．1　為網(wǎng)頁添加行為　314
18．1．1　課堂案例——為網(wǎng)頁添加彈出信息　314
18．1．2　什么是事件　315
18．1．3　什么是動作　316
18．1．4　課堂案例——為網(wǎng)頁添加彈出廣告　316
18．1．5　“打開瀏覽器窗口”對話框　317
18．2　為網(wǎng)頁添加文本行為　317
18．2．1　課堂案例——為網(wǎng)頁添加狀態(tài)欄文本　317
18．2．2　設(shè)置容器的文本　318
18．2．3　設(shè)置文本域文字　319
18．2．4　設(shè)置框架文本　319
18．3　為網(wǎng)頁添加jQuery效果　319
18．3．1　課堂案例——實現(xiàn)網(wǎng)頁元素的動態(tài)隱藏　320
18．3．2　了解jQuery效果　321
18．4　課堂練習——檢查網(wǎng)頁表單　322
18．5　課后習題——改變網(wǎng)頁元素的屬性　322
網(wǎng)站案例篇
第19章　制作社區(qū)類網(wǎng)站　324
19．1　設(shè)計社區(qū)類網(wǎng)站首頁面　325
19．2　制作網(wǎng)站Flash動畫　329
19．3　制作社區(qū)網(wǎng)站頁面　336