Dreamweaver CS6網(wǎng)頁設(shè)計實例教程

項目1網(wǎng)頁設(shè)計基礎(chǔ)/1
任務(wù)1.1認(rèn)識網(wǎng)頁1
1.1.1網(wǎng)頁的分類1
1.1.2網(wǎng)頁設(shè)計常用術(shù)語2
1.1.3網(wǎng)站開發(fā)流程5
任務(wù)1.2了解HTML5
1.2.1什么是HTML5
1.2.2用HTML編寫自己的第一個網(wǎng)頁6
1.2.3HTML中的常用標(biāo)簽符號7
任務(wù)1.3Dreamweaver CS6的安裝與使用11
1.3.1安裝Dreamweaver CS611
1.3.2使用Dreamweaver CS615
1.3.3用Dreamweaver CS6建立一個網(wǎng)頁16
項目小結(jié)20
項目實訓(xùn)20
實訓(xùn)1.1用HTML建立歡迎頁面20
實訓(xùn)1.2用Dreamweaver CS6建立歡迎頁面21
項目2建立及管理網(wǎng)站/22
任務(wù)2.1在計算機(jī)上建立本地網(wǎng)站22
2.1.1建立“我的第一個網(wǎng)站”23
2.1.2本地站點的管理24
2.1.3管理和編輯本地站點文件27
任務(wù)2.2發(fā)布網(wǎng)站29
2.2.1網(wǎng)站空間29
2.2.2設(shè)置遠(yuǎn)程服務(wù)器30
2.2.3上傳網(wǎng)站33
任務(wù)2.3網(wǎng)站的更新和維護(hù)33
2.3.1本地和遠(yuǎn)程文件夾的結(jié)構(gòu)33
〖2〗〖3〗〖4〗2.3.2下載站點中的文件34
2.3.3本地文件和遠(yuǎn)程文件的同步34
項目小結(jié)35
項目實訓(xùn)35
實訓(xùn)2.1為站點申請空間35
實訓(xùn)2.2建立并上傳網(wǎng)站“我的家”35
項目3向網(wǎng)頁中添加各種元素/37
任務(wù)3.1向網(wǎng)頁中添加文本37
3.1.1案例導(dǎo)入——建立“班級簡介”網(wǎng)頁37
3.1.2在Dreamweaver 中創(chuàng)建普通文本38
3.1.3一些特殊文本的輸入41
3.1.4文本的常用格式設(shè)置41
3.1.5觀察文本對應(yīng)的代碼44
任務(wù)3.2向網(wǎng)頁中添加圖像45
3.2.1案例導(dǎo)入——建立“汽車之家”網(wǎng)頁45
3.2.2網(wǎng)頁中常用的圖像格式45
3.2.3插入圖像46
3.2.4給無法顯示的圖像加注釋48
3.2.5圖像的編輯48
3.2.6觀察圖像對應(yīng)的代碼50
任務(wù)3.3向網(wǎng)頁中添加聲音50
3.3.1案例導(dǎo)入——建立“音樂播放”網(wǎng)站51
3.3.2向網(wǎng)頁中插入可控制播放的聲音51
3.3.3在網(wǎng)頁中應(yīng)用背景聲音54
任務(wù)3.4向網(wǎng)頁中添加視頻55
3.4.1案例導(dǎo)入——建立“視頻播放”網(wǎng)頁56
3.4.2向網(wǎng)頁中添加Flash動畫56
3.4.3向網(wǎng)頁中添加FLV視頻59
3.4.4向網(wǎng)頁中添加其他視頻文件60
3.4.5觀察各種插入視頻的方法對應(yīng)的代碼60
項目小結(jié)62
項目實訓(xùn)63
實訓(xùn)3.1建立文字編輯網(wǎng)頁63
實訓(xùn)3.2建立“香香美食”網(wǎng)63
項目4實現(xiàn)網(wǎng)頁的超鏈接/64
任務(wù)4.1認(rèn)識超鏈接64
4.1.1超鏈接的分類64
4.1.2超鏈接的路徑64
任務(wù)4.2創(chuàng)建內(nèi)部超鏈接65
4.2.1案例導(dǎo)入——設(shè)置“九寨溝四季”系列頁面的內(nèi)部超鏈接65
4.2.2創(chuàng)建文字超鏈接65
4.2.3創(chuàng)建圖像超鏈接66
4.2.4鼠標(biāo)經(jīng)過圖像鏈接69
4.2.5觀察鏈接對應(yīng)的代碼71
4.2.6設(shè)置“九寨溝四季”系列頁面的內(nèi)部超鏈接72
任務(wù)4.3創(chuàng)建錨記鏈接73
4.3.1案例導(dǎo)入——設(shè)置“插花藝術(shù)”網(wǎng)頁的錨記鏈接73
4.3.2創(chuàng)建命名錨記73
4.3.3鏈接到命名錨記74
4.3.4創(chuàng)建虛鏈接74
4.3.5觀察錨記鏈接對應(yīng)的代碼74
4.3.6設(shè)置“插花藝術(shù)”網(wǎng)頁的錨記鏈接74
任務(wù)4.4創(chuàng)建其他超鏈接76
4.4.1案例導(dǎo)入——向“九寨溝四季”網(wǎng)頁添加超鏈接76
4.4.2創(chuàng)建外部超鏈接76
4.4.3創(chuàng)建Email鏈接77
4.4.4創(chuàng)建下載文件超鏈接77
4.4.5創(chuàng)建腳本鏈接78
4.4.6為“九寨溝四季”網(wǎng)頁添加外部和電子郵件等鏈接78
任務(wù)4.5編輯超鏈接80
4.5.1設(shè)置超鏈接的外觀80
4.5.2刪除超鏈接80
項目小結(jié)81
項目實訓(xùn)81
實訓(xùn)4.1制作“犬類美容”網(wǎng)頁的導(dǎo)航條81
實訓(xùn)4.2制作“黃山四絕”系列頁面81
項目5用表格布局頁面/82
任務(wù)5.1表格的基本操作82
5.1.1案例導(dǎo)入——制作“經(jīng)典電影TOP 10”網(wǎng)頁82
5.1.2創(chuàng)建表格82
5.1.3調(diào)整表格的結(jié)構(gòu)84
5.1.4表格輸入內(nèi)容87
5.1.5利用屬性面板設(shè)置表格的外觀效果87
5.1.6觀察表格對應(yīng)的代碼88
5.1.7制作“經(jīng)典電影TOP 10”網(wǎng)頁89
任務(wù)5.2表格中的數(shù)據(jù)處理91
5.2.1案例導(dǎo)入——制作“各專業(yè)畢業(yè)生統(tǒng)計”網(wǎng)頁91
5.2.2數(shù)據(jù)的導(dǎo)入與導(dǎo)出92
5.2.3數(shù)據(jù)的排序94
5.2.4制作“各專業(yè)畢業(yè)生統(tǒng)計”網(wǎng)頁96
任務(wù)5.3使用表格布局網(wǎng)頁100
5.3.1案例導(dǎo)入——制作“畢業(yè)生就業(yè)信息網(wǎng)”首頁100
5.3.2嵌套表格100
5.3.3表格制作技巧101
5.3.4表格布局網(wǎng)頁的設(shè)計要點102
5.3.5制作“畢業(yè)生就業(yè)信息網(wǎng)”首頁103
項目小結(jié)107
項目實訓(xùn)107
實訓(xùn)5.1制作“信息工程系圖形圖像112班課程表”網(wǎng)頁107
實訓(xùn)5.2制作“花影襲人”網(wǎng)站中“菊花簡介”的網(wǎng)頁108
實訓(xùn)5.3制作“信息工程系教學(xué)評估網(wǎng)”首頁108
項目6用框架布局頁面/110
任務(wù)6.1創(chuàng)建框架網(wǎng)頁110
6.1.1案例導(dǎo)入——制作“信息系課程表”網(wǎng)頁110
6.1.2認(rèn)識框架網(wǎng)頁110
6.1.3創(chuàng)建框架網(wǎng)頁111
6.1.4保存框架網(wǎng)頁112
6.1.5觀察框架集文件對應(yīng)的代碼116
6.1.6制作“信息系課程表”框架網(wǎng)頁117
任務(wù)6.2框架和框架集的基本操作119
6.2.1案例導(dǎo)入——制作“花卉護(hù)理——牡丹”網(wǎng)頁119
6.2.2選擇框架和框架集120
6.2.3編輯框架集的屬性120
6.2.4編輯框架的屬性121
6.2.5調(diào)整框架的大小122
6.2.6刪除框架（合并框架）122
6.2.7制作“花卉護(hù)理——牡丹”網(wǎng)頁122
任務(wù)6.3設(shè)置框架網(wǎng)頁的鏈接125
6.3.1框架內(nèi)的鏈接125
6.3.2關(guān)鍵字的鏈接126
項目小結(jié)127
項目實訓(xùn)128
實訓(xùn)6.1制作“暗香盈袖”網(wǎng)站的系列網(wǎng)頁128
實訓(xùn)6.2制作“心情驛站”個人博客首頁129
項目7用CSS美化網(wǎng)頁/130
任務(wù)7.1認(rèn)識CSS130
7.1.1案例導(dǎo)入——對“影迷俱樂部”網(wǎng)站中的網(wǎng)頁應(yīng)用CSS130
7.1.2打開“新建CSS規(guī)則”的幾種方法133
7.1.3CSS常用屬性134
任務(wù)7.2建立和管理CSS樣式140
7.2.1建立可應(yīng)用于任何HTML元素的CSS樣式140
7.2.2建立應(yīng)用于一個HTML元素的CSS樣式142
7.2.3建立應(yīng)用于指定標(biāo)簽的CSS樣式144
7.2.4建立應(yīng)用于指定范圍內(nèi)標(biāo)簽的CSS樣式146
7.2.5建立應(yīng)用于多個標(biāo)簽的CSS樣式147
7.2.6建立定義超鏈接的CSS樣式149
7.2.7觀察CSS樣式對應(yīng)的代碼151
7.2.8用“CSS樣式”面板管理CSS樣式151
任務(wù)7.3建立并應(yīng)用外部CSS樣式154
7.3.1建立外部CSS樣式定義頁面文字和背景154
7.3.2在一個網(wǎng)頁中應(yīng)用已建好的外部樣式157
任務(wù)7.4CSS常見應(yīng)用158
7.4.1用CSS控制段落樣式158
7.4.2用CSS控制圖片樣式160
7.4.3用CSS控制背景圖片的樣式162
7.4.4用CSS美化列表163
7.4.5應(yīng)用CSS濾鏡164
項目小結(jié)166
項目實訓(xùn)167
實訓(xùn)7.1為“影迷俱樂部”網(wǎng)站中的網(wǎng)頁設(shè)置格式167
實訓(xùn)7.2設(shè)置“茶文化”網(wǎng)頁167
實訓(xùn)7.3設(shè)置“新聞公告”網(wǎng)頁168
項目8用CSS+DIV布局頁面/169
任務(wù)8.1認(rèn)識DIV與CSS盒模型169
8.1.1標(biāo)簽169
8.1.2CSS盒模型171
任務(wù)8.2應(yīng)用CSS實現(xiàn)定位175
8.2.1CSS的定位方式175
8.2.2相對定位175
8.2.3絕對定位177
8.2.4固定定位178
8.2.5浮動180
8.2.6清除浮動181
任務(wù)8.3CSS+DIV布局實例183
8.3.1案例導(dǎo)入——個人博客頁面183
8.3.2用CSS+DIV布局網(wǎng)頁的步驟183
8.3.3用CSS+DIV布局個人博客網(wǎng)頁184
任務(wù)8.4實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計194
8.4.1案例導(dǎo)入——響應(yīng)式網(wǎng)頁設(shè)計： 佳莓生態(tài)食品194
8.4.2Dreamweaver CS6中的流體網(wǎng)格布局194
8.4.3制作“佳莓生態(tài)食品”網(wǎng)頁196
項目小結(jié)204
項目實訓(xùn)204
實訓(xùn)8.1了解Dreamweaver CS6中的預(yù)設(shè)布局204
實訓(xùn)8.2用CSS+DIV布局“園林設(shè)計”網(wǎng)頁205
實訓(xùn)8.3實現(xiàn)響應(yīng)式頁面設(shè)計205
項目9向網(wǎng)頁添加行為/206
任務(wù)9.1了解行為206
9.1.1認(rèn)識行為206
9.1.2附加行為207
任務(wù)9.2使用Dreamweaver CS6內(nèi)置的行為209
9.2.1用“行為”面板實現(xiàn)交換圖像行為209
9.2.2制作頁面打開時彈出廣告信息210
9.2.3“打開瀏覽器窗口”行為211
9.2.4制作可移動的面板212
9.2.5下拉菜單的制作213
9.2.6為元素添加特殊的動畫效果215
任務(wù)9.3JavaScript行為的應(yīng)用216
9.3.1認(rèn)識JavaScript216
9.3.2調(diào)用JavaScript216
9.3.3單擊按鈕背景顏色變換217
9.3.4添加到收藏夾和設(shè)為首頁219
9.3.5在網(wǎng)頁中嵌入JavaScript腳本220
9.3.6JavaScript腳本在文檔中的位置221
9.3.7實現(xiàn)懸浮廣告特效222
9.3.8實現(xiàn)滾動圖片特效223
9.3.9實現(xiàn)鼠標(biāo)跟隨特效225
項目小結(jié)226
項目實訓(xùn)226
實訓(xùn)9.1制作下拉菜單226
實訓(xùn)9.2實現(xiàn)JavaScript特效226
實訓(xùn)9.3給校園新聞網(wǎng)添加行為226
項目10制作表單/228
任務(wù)10.1認(rèn)識表單228
10.1.1案例導(dǎo)入——制作“注冊會員申請”頁面228
10.1.2插入表單和表單對象228
10.1.3設(shè)置常用表單對象的屬性231
10.1.4用CSS美化表單238
任務(wù)10.2使用Spry構(gòu)件241
10.2.1案例導(dǎo)入——制作“驢友會員申請”頁面241
10.2.2Spry構(gòu)件的基本操作242
10.2.3設(shè)置常用Spry構(gòu)件的屬性243
任務(wù)10.3練習(xí)布局頁面時常用的Spry構(gòu)件249
10.3.1案例導(dǎo)入——制作“QQ好友”頁面249
10.3.2使用Spry選項卡式面板250
10.3.3使用Spry折疊式面板251
10.3.4Spry可折疊面板252
10.3.5使用Spry菜單欄252
項目小結(jié)254
項目實訓(xùn)254
實訓(xùn)10.1利用表單制作個人簡介頁面254
實訓(xùn)10.2利用Spry驗證表單制作個人注冊頁面254
實訓(xùn)10.3利用Spry頁面布局構(gòu)件制作頁面導(dǎo)航255
項目11模板和庫的應(yīng)用及資源管理/256
任務(wù)11.1模板的應(yīng)用256
11.1.1案例導(dǎo)入——制作“畢業(yè)生就業(yè)信息網(wǎng)”就業(yè)指導(dǎo)系列網(wǎng)頁256
11.1.2認(rèn)識模板256
11.1.3創(chuàng)建模板258
11.1.4定義模板區(qū)域259
11.1.5使用模板制作“畢業(yè)生就業(yè)信息網(wǎng)”就業(yè)指導(dǎo)系列網(wǎng)頁262
11.1.6更新模板及模板的其他操作268
任務(wù)11.2定制庫項目270
11.2.1案例導(dǎo)入——定制畢業(yè)生就業(yè)信息網(wǎng)的庫項目270
11.2.2認(rèn)識庫270
11.2.3庫項目的應(yīng)用270
11.2.4定制畢業(yè)生就業(yè)信息網(wǎng)庫項目272
任務(wù)11.3資源管理274
11.3.1資源類型274
11.3.2“資源”面板275
項目小結(jié)275
項目實訓(xùn)275
實訓(xùn)11.1為“中原在線”網(wǎng)站設(shè)計模板，并應(yīng)用模板創(chuàng)建系列網(wǎng)頁275
實訓(xùn)11.2自行設(shè)計創(chuàng)建所在院系網(wǎng)站275
項目12網(wǎng)站制作實例/277
任務(wù)12.1網(wǎng)站布局規(guī)劃分析277
12.1.1案例導(dǎo)入——制作海南旅游網(wǎng)站277
12.1.2網(wǎng)頁布局規(guī)劃277
任務(wù)12.2制作主頁279
12.2.1頁面的全局布局279
12.2.2制作logo部分282
12.2.3制作上部導(dǎo)航欄282
12.2.4制作主體內(nèi)容區(qū)284
12.2.5制作彈出式子菜單287
12.2.6制作圖片循環(huán)播放效果288
12.2.7制作版權(quán)信息部分并使用分隔線289
任務(wù)12.3制作子頁290
12.3.1進(jìn)行頁面的全局布局290
12.3.2布局主體內(nèi)容區(qū)292
12.3.3制作主體內(nèi)容區(qū)左側(cè)圖片鏈接292
12.3.4制作主體內(nèi)容區(qū)右側(cè)鏈接294
參考文獻(xiàn)/296