網(wǎng)頁(yè)設(shè)計(jì)與制作立體化教程（Photoshop+Dreamweaver+Flash CS6 微課版）

第 1章．網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)基礎(chǔ)　　1．
1．1　網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)　2
1．1．1　認(rèn)識(shí)網(wǎng)站與網(wǎng)頁(yè)　2
1．1．2　常見(jiàn)的網(wǎng)站類(lèi)型　2
1．1．3　常見(jiàn)的網(wǎng)頁(yè)類(lèi)型　3
1．1．4　常用的網(wǎng)站結(jié)構(gòu)　3
1．1．5　網(wǎng)頁(yè)的基本構(gòu)成元素　4
1．1．6　網(wǎng)頁(yè)常用術(shù)語(yǔ)　5
1．1．7　網(wǎng)頁(yè)色彩搭配　5
1．1．8　HTML標(biāo)記語(yǔ)言　7
1．2　課堂案例：創(chuàng)建婚紗攝影網(wǎng)站　9
1．2．1　商業(yè)網(wǎng)站開(kāi)發(fā)流程　10
1．2．2　網(wǎng)站制作流程　10
1．2．3　常用網(wǎng)頁(yè)制作軟件　12
1．2．4　創(chuàng)建本地站點(diǎn)　15
1．2．5　編輯站點(diǎn)　15
1．2．6　管理站點(diǎn)和站點(diǎn)文件夾　16
1．3　項(xiàng)目實(shí)訓(xùn)　18
1．3．1　賞析電商購(gòu)物類(lèi)網(wǎng)站　18
1．3．2　規(guī)劃并創(chuàng)建“果蔬網(wǎng)”站點(diǎn)　18
1．4　課后練習(xí)　19
練習(xí)1：規(guī)劃個(gè)人網(wǎng)站　19
練習(xí)2：創(chuàng)建“會(huì)展中心”站點(diǎn)　20
1．5　技巧提升　20
1．站點(diǎn)命名規(guī)則　20
2．網(wǎng)頁(yè)設(shè)計(jì)師需要知道的網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容　21
3．網(wǎng)頁(yè)設(shè)計(jì)需要遵循的原則　21
4．網(wǎng)站設(shè)計(jì)時(shí)的色彩聯(lián)想　22
第　2章．使用Photoshop編輯網(wǎng)頁(yè)圖像．． 23．

2．1　課堂案例：處理商品圖片展示效果　24
2．1．1　圖像處理基礎(chǔ)知識(shí)　24
2．1．2　旋轉(zhuǎn)并裁剪商品圖片　26
2．1．3　修復(fù)商品圖片　27
2．1．4　使用液化濾鏡處理圖片　31
2．1．5　調(diào)整圖片顏色　33
2．1．6　使用濾鏡處理圖片　34
2．1．7　摳取素材圖片　37
2．1．8　為圖像添加文本和形狀　41
2．2　課堂案例：制作Banner區(qū)海報(bào)　43
2．2．1　通過(guò)圖層制作海報(bào)　43
2．2．2　設(shè)置圖層樣式　44
2．3　項(xiàng)目實(shí)訓(xùn)　45
2．3．1　制作海報(bào)廣告　45
2．3．2　制作網(wǎng)頁(yè)廣告　47
2．4　課后練習(xí)　48
練習(xí)1：制作直通車(chē)圖片　49
練習(xí)2：制作“幫助中心”　49
2．5　技巧提升　50
1．快速控制圖像顯示大小　50
2．快速恢復(fù)圖像　50
3．使用濾鏡注意事項(xiàng)　50
4．使用外部畫(huà)筆的方法　50
第3章．使用Photoshop設(shè)計(jì)界面效果圖．．　51．
3．1　課堂案例：設(shè)計(jì)“燈具網(wǎng)主頁(yè)”效果圖　52
3．1．1　新建圖像文件　52
3．1．2　創(chuàng)建參考線(xiàn)　53
3．1．3　制作網(wǎng)頁(yè)頭部　54
3．1．4　制作網(wǎng)頁(yè)內(nèi)容部分　58
3．1．5　設(shè)計(jì)網(wǎng)頁(yè)頁(yè)尾　63
3．2　課堂案例：輸出“燈具網(wǎng)主頁(yè)”效果圖　65
3．2．1　創(chuàng)建切片　66
3．2．2　輸出切片　67
3．3　項(xiàng)目實(shí)訓(xùn)　68
3．3．1　設(shè)計(jì)“攝影之家”網(wǎng)頁(yè)效果圖　68
3．3．2　設(shè)計(jì)“訂餐網(wǎng)”界面效果　70
3．4　課后練習(xí)　71
練習(xí)1：設(shè)計(jì)婚紗售賣(mài)網(wǎng)站首頁(yè)　71
練習(xí)2：設(shè)計(jì)個(gè)人網(wǎng)頁(yè)效果圖　72
3．5　技巧提升　73
1．網(wǎng)頁(yè)效果圖設(shè)計(jì)技巧　73
2．組合切片　74
3．直接輸出為html文件　74
第4章．使用Dreamweaver制作基礎(chǔ)網(wǎng)頁(yè)．．　75．
4．1　課堂案例：創(chuàng)建index．html網(wǎng)頁(yè)　76
4．1．1　創(chuàng)建網(wǎng)頁(yè)文檔　76
4．1．2　設(shè)置頁(yè)面屬性　77
4．1．3　保存、預(yù)覽和關(guān)閉網(wǎng)頁(yè)文檔　78
4．2　課堂案例：制作“學(xué)校簡(jiǎn)介”網(wǎng)頁(yè)　79
4．2．1　添加文字　79
4．2．2　設(shè)置文本格式　80
4．2．3　添加水平線(xiàn)　82
4．2．4　添加空格　83
4．3　項(xiàng)目實(shí)訓(xùn)　83
4．3．1　制作“優(yōu)惠券說(shuō)明”網(wǎng)頁(yè)　83
4．3．2　制作“服務(wù)協(xié)議”網(wǎng)頁(yè)　85
4．4　課后練習(xí)　86
練習(xí)1：制作“保修服務(wù)”網(wǎng)頁(yè)　87
練習(xí)2：制作“代金券說(shuō)明”網(wǎng)頁(yè)　87
4．5　技巧提升　88
1．添加日期　88
2．添加滾動(dòng)文字　88
第5章．為網(wǎng)頁(yè)添加元素．．　89．
5．1　課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)　90
5．1．1　插入與編輯圖像　90
5．1．2　優(yōu)化圖像　92
5．1．3　創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像　94
5．1．4　插入Flash動(dòng)畫(huà)　95
5．1．5　添加背景音樂(lè)　97
5．2　課堂案例：鏈接“婚紗禮服”網(wǎng)頁(yè)　98
5．2．1　認(rèn)識(shí)超鏈接　98
5．2．2　插入文本超鏈接　100
5．2．3　創(chuàng)建空鏈接　102
5．2．4　創(chuàng)建圖像超鏈接　102
5．2．5　創(chuàng)建熱點(diǎn)圖片超鏈接　103
5．2．6　創(chuàng)建錨點(diǎn)超鏈接　104
5．2．7　創(chuàng)建電子郵件超鏈接　105
5．2．8　創(chuàng)建外部超鏈接　105
5．2．9　創(chuàng)建腳本鏈接　106
5．3　項(xiàng)目實(shí)訓(xùn)　107
5．3．1　制作“科技產(chǎn)品”網(wǎng)頁(yè)　107
5．3．2　制作“訂單”網(wǎng)頁(yè)　108
5．4　課后練習(xí)　110
練習(xí)1：制作“服裝”網(wǎng)頁(yè)　110
練習(xí)2：制作“產(chǎn)品介紹”網(wǎng)頁(yè)　111
5．5　技巧提升　112
1．在CSS中定義超鏈接樣式a：link、
a：visited、a：hover、a：active的順序　112
2．刪除鏈接圖片上的藍(lán)色邊框　112
3．設(shè)置鼠標(biāo)移動(dòng)到文字鏈接上改變文字的
大小或顏色　112
第6章．布局網(wǎng)頁(yè)版面．．　113．
6．1　課堂案例：布局“酒店預(yù)訂”網(wǎng)頁(yè)　114
6．1．1　創(chuàng)建表格　114
6．1．2　調(diào)整表格結(jié)構(gòu)　115
6．1．3　設(shè)置表格和單元格　117
6．1．4　在表格中插入內(nèi)容　118
6．1．5　創(chuàng)建框架和框架集　119
6．1．6　保存框架和框架集　121
6．1．7　設(shè)置框架集與框架屬性　123
6．1．8　在框架中添加網(wǎng)頁(yè)　124
6．2　課堂案例：布局“婚紗禮服”網(wǎng)
首頁(yè)　125
6．2．1　認(rèn)識(shí)CSS樣式　126
6．2．2　認(rèn)識(shí)CSS+DIV布局模式　127
6．2．3　CSS+DIV布局模式的優(yōu)勢(shì)　128
6．2．4　插入并編輯DIV　129
6．2．5　創(chuàng)建與編輯CSS樣式　131
6．2．6　使用AP Div元素　134
6．3　項(xiàng)目實(shí)訓(xùn)　136
6．3．1　制作“歇山園林”網(wǎng)頁(yè)　136
6．3．2　制作“花店”網(wǎng)頁(yè)　138
6．4　課后練習(xí)　140
練習(xí)1：制作“花卉推薦”網(wǎng)頁(yè)　140
練習(xí)2：制作“攝影網(wǎng)”網(wǎng)頁(yè)　141
6．5　技巧提升　142
1．CSS樣式鏈接　142
2．批量設(shè)置AP　Div　142
3．導(dǎo)入表格數(shù)據(jù)　142
第7章．使用表單和行為．．　143．
7．1　課堂案例：制作“學(xué)員注冊(cè)”網(wǎng)頁(yè)　144
7．1．1　認(rèn)識(shí)表單　144
7．1．2　創(chuàng)建表單　145
7．1．3　插入表單對(duì)象　145
7．2　課堂案例：完善網(wǎng)頁(yè)行為效果　154
7．2．1　行為的基礎(chǔ)知識(shí)　155
7．2．2　彈出窗口　156
7．2．3　打開(kāi)瀏覽器窗口　157
7．2．4　檢查表單　158
7．2．5　交換圖像　159
7．2．6　添加效果　161
7．3　項(xiàng)目實(shí)訓(xùn)　162
7．3．1　制作“會(huì)員注冊(cè)”網(wǎng)頁(yè)　162
7．3．2　制作“用戶(hù)注冊(cè)”網(wǎng)頁(yè)　164
7．4　課后練習(xí)　166
練習(xí)1：制作“航班查詢(xún)”網(wǎng)頁(yè)　166
練習(xí)2：制作搜索條　166
練習(xí)3：制作“l(fā)ogin．html”登錄界面　167
7．5　技巧提升　167
1．表單制作技巧　167
2．快速制作相同結(jié)構(gòu)的網(wǎng)頁(yè)　168
3．使用庫(kù)快速完成網(wǎng)頁(yè)制作　168
第8章．制作ASP動(dòng)態(tài)網(wǎng)頁(yè)．．　169．
8．1　課堂案例：搭建動(dòng)態(tài)網(wǎng)站平臺(tái)　170
8．1．1　認(rèn)識(shí)動(dòng)態(tài)網(wǎng)頁(yè)　170
8．1．2　動(dòng)態(tài)網(wǎng)頁(yè)常用的開(kāi)發(fā)語(yǔ)言　170
8．1．3　動(dòng)態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)流程　172
8．1．4　認(rèn)識(shí)Web服務(wù)器　173
8．1．5　安裝與配置IIS　173
8．1．6　使用Access創(chuàng)建數(shù)據(jù)表　175
8．1．7　創(chuàng)建與配置動(dòng)態(tài)站點(diǎn)　176
8．1．8　創(chuàng)建數(shù)據(jù)源　178
8．2　課堂案例：制作“發(fā)貨記錄”
動(dòng)態(tài)網(wǎng)頁(yè)　180
8．2．1　創(chuàng)建記錄集　180
8．2．2　插入動(dòng)態(tài)表格　181
8．2．3　創(chuàng)建記錄集導(dǎo)航　182
8．2．4　插入記錄　183
8．2．5　刪除記錄　184
8．3　課堂案例：制作“食孜源”APP頁(yè)面　184
8．3．1　認(rèn)識(shí)jQuery Mobile　185
8．3．2　創(chuàng)建頁(yè)面　187
8．3．3　添加jQuery Mobile組件　188
8．4　項(xiàng)目實(shí)訓(xùn)　191
8．4．1　制作“用戶(hù)登錄”網(wǎng)頁(yè)　191
8．4．2　制作jQuery Mobile頁(yè)面　193
8．5　課后練習(xí)　194
練習(xí)1：制作網(wǎng)站后臺(tái)系統(tǒng)　194
練習(xí)2：制作手機(jī)軟件網(wǎng)頁(yè)　195
8．6　技巧提升　195
1．通過(guò)字符串連接數(shù)據(jù)源　195
2．jQuery　Mobile的主題應(yīng)用　196
第9章．使用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)．．　197．
9．1　課堂案例：制作橫幅廣告　198
9．1．1　Flash動(dòng)畫(huà)在網(wǎng)頁(yè)中的應(yīng)用　198
9．1．2　新建文檔并制作動(dòng)畫(huà)背景　200
9．1．3　創(chuàng)建基本動(dòng)畫(huà)　202
9．1．4　輸入文字并編輯動(dòng)畫(huà)　205
9．2　課堂案例：制作圖片滾動(dòng)動(dòng)畫(huà)　206
9．2．1　制作基本動(dòng)畫(huà)效果　207
9．2．2　發(fā)布動(dòng)畫(huà)　209
9．3　課堂案例：制作網(wǎng)頁(yè)導(dǎo)航　210
9．3．1　認(rèn)識(shí)ActionScript　211
9．3．2　制作動(dòng)畫(huà)背景　211
9．3．3　添加ActionScript語(yǔ)句　212
9．4　項(xiàng)目實(shí)訓(xùn)　212
9．4．1　制作網(wǎng)頁(yè)片頭動(dòng)畫(huà)　212
9．4．2　制作動(dòng)態(tài)Banner　214
9．5　課后練習(xí)　216
練習(xí)1：制作玩具網(wǎng)站首頁(yè)　216
練習(xí)2：制作圖片輪播動(dòng)畫(huà)　216
9．6　技巧提升　217
1．快速刪除幀與清除幀　217
2．導(dǎo)出Flash動(dòng)畫(huà)為GIF動(dòng)畫(huà)　217
3．補(bǔ)間動(dòng)畫(huà)與傳統(tǒng)補(bǔ)間之間的差異　217
4．事件　218
第　10章．綜合案例——制作企業(yè)官網(wǎng)．． 219．
10．1　實(shí)訓(xùn)目標(biāo)　220
10．2　專(zhuān)業(yè)背景　221
10．3　操作思路　221
10．4　準(zhǔn)備工作　222
10．4．1　站點(diǎn)規(guī)劃　222
10．4．2　素材收集　222
10．5　操作過(guò)程　222
10．5．1　使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)效果圖　222
10．5．2　使用Flash制作圖片輪播動(dòng)畫(huà)　232
10．5．3　使用Dreamweaver合成網(wǎng)頁(yè)　234
10．6　項(xiàng)目實(shí)訓(xùn)　240
10．6．1　制作“微觀(guān)多肉植物”網(wǎng)頁(yè)　240
10．6．2　制作“注冊(cè)”和“登錄”頁(yè)面　241
10．7　課后練習(xí)　243
練習(xí)1：制作“產(chǎn)品中心”頁(yè)面　243
練習(xí)2：制作“聯(lián)系我們”頁(yè)面　244
附錄．．　245．
附錄1　網(wǎng)頁(yè)常用設(shè)計(jì)尺寸　245
附錄2　iPhone常用設(shè)計(jì)尺寸　245
附錄3　Android常用設(shè)計(jì)尺寸　246