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

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