Dreamweaver網(wǎng)頁設計立體化教程（微課版 Dreamweaver 2020）

項目一 網(wǎng)頁設計基礎 1
任務一　規(guī)劃“佳美馨裝飾”網(wǎng)站結(jié)構(gòu)　2
一、任務描述　2
（一）任務背景　2
（二）任務目標　2
二、相關知識　2
（一）網(wǎng)站、網(wǎng)頁、主頁的概念　2
（二）網(wǎng)頁設計常用術(shù)語　3
（三）網(wǎng)頁的構(gòu)成元素　4
（四）常用網(wǎng)頁制作軟件　5
（五）HTML　6
（六）HTML5　8
（七）JavaScript　9
（八）網(wǎng)站開發(fā)流程　9
（九）網(wǎng)頁設計內(nèi)容　11
（十）網(wǎng)頁設計原則　11
三、任務實施　12
任務二　創(chuàng)建“佳美馨裝飾”站點　12
一、任務描述　12
（一）任務背景　12
（二）任務目標　13
二、相關知識　13
（一）認識Dreamweaver　2020 的操作界面　13
（二）創(chuàng)建和管理站點　16
（三）管理站點中的文件和文件夾　18
三、任務實施　19
（一）創(chuàng)建站點　19
（二）編輯站點　19
（三）管理站點文件和文件夾　20
實訓一　規(guī)劃“中國皮影”網(wǎng)站的結(jié)構(gòu)　22
實訓二　創(chuàng)建“中國皮影”站點　23
課后練習　23
技巧提升　24
項目二　添加文本與表格　27
任務一　制作“佳美馨裝飾簡介”網(wǎng)頁　28
一、任務描述　28
（一）任務背景　28
（二）任務目標　28
二、相關知識　28
（一）新建、保存與打開網(wǎng)頁文件　28
（二）設置網(wǎng)頁屬性　30
（三）設置網(wǎng)頁關鍵字和描述　33
（四）輸入文本　33
（五）設置文本格式　34
（六）插入列表　35
（七）插入特殊字符　35
（八）插入日期　35
（九）插入水平線　35
三、任務實施　36
（一）新建網(wǎng)頁并設置網(wǎng)頁屬性　36
（二）輸入文本并設置格式　37
（三）插入特殊字符、日期和水平線　39
任務二　制作“佳美馨裝飾——會員列表”網(wǎng)頁　40
一、任務描述　41
（一）任務背景　41
（二）任務目標　41
二、相關知識　41
（一）插入表格　41
（二）選擇表格　42
（三）在單元格中輸入內(nèi)容　44
（四）設置表格屬性　44
（五）設置單元格屬性　45
（六）合并和拆分單元格　45
（七）添加和刪除行或列　46
三、任務實施　47
（一）插入表格并設置單元格屬性　47
（二）輸入表格內(nèi)容　48
（三）導入表格數(shù)據(jù)并設置表格屬性　49
實訓一　制作“中國皮影——皮影戲”網(wǎng)頁　50
實訓二　制作“中國皮影——皮影起源傳說”網(wǎng)頁　51
課后練習　52
技巧提升　53
項目三　插入圖像和多媒體元素　55
任務一　制作“佳美馨裝飾——成功案例”欄目網(wǎng)頁　56
一、任務描述　57
（一）任務背景　57
（二）任務目標　57
二、相關知識　58
（一）網(wǎng)頁圖像基礎知識　58
（二）插入圖像　58
（三）設置圖像屬性　59
（四）創(chuàng)建鼠標經(jīng)過圖像　61
（五）創(chuàng)建圖像輪播　62
三、任務實施　63
（一）插入案例圖像　63
（二）使用鼠標經(jīng)過圖像制作按鈕　63
（三）插入案例輪播圖　65
任務二　制作“佳美馨裝飾——中式田園風格”內(nèi)容網(wǎng)頁　66
一、任務描述　66
（一）任務背景　66
（二）任務目標　66
二、相關知識　67
（一）插入視頻　67
（二）插入音頻　68
（三）插入動畫　68
三、任務實施　69
（一）設置背景音樂　69
（二）插入并設置視頻　69
（三）插入并設置動畫　70
實訓一　制作“中國皮影——皮影鑒賞”網(wǎng)頁　71
實訓二　制作“中國皮影——皮影的表演”網(wǎng)頁　72
課后練習　73
技巧提升　75
項目四　創(chuàng)建超鏈接　77
任務一　創(chuàng)建“佳美馨裝飾——網(wǎng)站地圖”網(wǎng)頁中的超鏈接　78
一、任務描述　78
（一）任務背景　78
（二）任務目標　78
二、相關知識　79
（一）認識超鏈接　79
（二）創(chuàng)建文本、圖像超鏈接　81
三、任務實施　83
（一）創(chuàng)建文本超鏈接　83
（二）創(chuàng)建圖像超鏈接　84
（三）創(chuàng)建圖像熱點超鏈接　84
（四）瀏覽超鏈接效果　85
任務二　創(chuàng)建“佳美馨裝飾——聯(lián)系我們”網(wǎng)頁中的超鏈接　85
一、任務描述　86
（一）任務背景　86
（二）任務目標　87
二、相關知識　87
（一）認識錨點超鏈接　87
（二）認識文件下載超鏈接　88
（三）認識電子郵件超鏈接　88
（四）認識空鏈接　89
（五）認識腳本鏈接　89
三、任務實施　89
（一）創(chuàng)建錨點超鏈接　89
（二）創(chuàng)建文件下載超鏈接和電子郵件超鏈接　90
（三）創(chuàng)建腳本鏈接和空鏈接　91
實訓一　制作“中國皮影——網(wǎng)站地圖”網(wǎng)頁　91
實訓二　制作“中國皮影——皮影的制作流程”網(wǎng)頁　93
課后練習　94
技巧提升　96
項目五　布局網(wǎng)頁　99
任務一　使用div+CSS 盒子模型布局“佳美馨裝飾——公司榮譽”網(wǎng)頁　100
一、任務描述　100
（一）任務背景　100
（二）任務目標　100
二、相關知識　100
（一）認識CSS　樣式　101
（二）“CSS　設計器”面板　102
（三）CSS　樣式的屬性　103
（四）應用CSS　樣式　107
（五）認識div+CSS　盒子模型　107
（六）利用div+CSS　盒子模型布局網(wǎng)頁　108
三、任務實施　109
（一）創(chuàng)建并應用標簽CSS　樣式　109
（二）創(chuàng)建并應用ID　CSS 樣式　110
（三）創(chuàng)建并應用類CSS　樣式　111
（四）創(chuàng)建并應用后代CSS　樣式　114
任務二　使用響應式布局制作“佳美馨裝飾”首頁　115
一、任務描述　115
（一）任務背景　115
（二）任務目標　116
二、相關知識　116
（一）認識響應式布局　116
（二）設置視口　116
（三）添加媒體查詢　116
三、任務實施　118
（一）設置視口并添加媒體查詢　118
（二）添加CSS　樣式并預覽效果　119
實訓一　制作“中國皮影——皮影的地方特色”網(wǎng)頁　120
實訓二　制作“中國皮影”首頁　122
課后練習　123
技巧提升　125
項目六　使用模板和庫 127三居室裝修案例” 網(wǎng)頁　128
一、任務描述　128
（一）任務背景　128
（二）任務目標　129
二、相關知識　129
（一）認識模板　129
（二）創(chuàng)建模板　129
（三）編輯模板　130
（四）應用模板　131
三、任務實施　132
（一）創(chuàng)建“案例展示”模板　132
（二）從模板創(chuàng)建“原木簡約風三居室裝修案例”網(wǎng)頁　134
任務二　在“裝修方案精選”網(wǎng)頁中使用庫　135
一、任務描述　136
（一）任務背景　136
（二）任務目標　136
二、相關知識　136
（一）認識“資源”面板　137
（二）創(chuàng)建庫項目　137
（三）編輯庫項目　138
（四）插入庫項目　138
三、任務實施　138
（一）創(chuàng)建“裝修方案”庫項目　138
（二）在網(wǎng)頁中添加庫項目　139西皮影”網(wǎng)頁　140
實訓二　使用庫項目制作“中國皮影——皮影文創(chuàng)產(chǎn)品”網(wǎng)頁　141
課后練習　143
技巧提升　144
項目七　使用表單和行為　145
任務一　在“佳美馨裝飾——會員登錄”網(wǎng)頁中使用表單　146
一、任務描述　146
（一）任務背景　146
（二）任務目標　146
二、相關知識　147
（一）認識表單和表單元素　147
（二）插入表單并設置表單屬性　147
（三）插入表單元素　148
三、任務實施　153
（一）創(chuàng)建表單并設置屬性　153
（二）插入表單元素并設置屬性　154
任務二　在“佳美馨裝飾——會員登錄”網(wǎng)頁中使用行為　156
一、任務描述　157
（一）任務背景　157
（二）任務目標　157
二、相關知識　157
（一）認識行為　157
（二）認識“行為”面板　158
（三）添加行為　158
（四）修改行為　158
（五）刪除行為　159
三、任務實施　159
（一）添加“檢查表單”行為　159
（二）添加“彈出信息”行為　159
實訓一　在“中國皮影——問卷調(diào)查”網(wǎng)頁中使用表單　160
實訓二　在“中國皮影——皮影圖集”網(wǎng)頁中使用行為　162
課后練習　164
技巧提升　166
項目八　制作移動端網(wǎng)頁　167
任務一　制作移動端“裝修案例”網(wǎng)頁　168
一、任務描述　168
（一）任務背景　168
（二）任務目標　168
二、相關知識　168
（一）認識jQuery　Mobile　169
（二）創(chuàng)建jQuery　Mobile 網(wǎng)頁效果　169
（三）使用jQuery　Mobile 組件　170
三、任務實施　174
（一）添加jQuery　Mobile 頁面　174
（二）為頁面添加內(nèi)容　175
任務二　創(chuàng)建PHP頁面　176
一、任務描述　177
（一）任務背景　177
（二）任務目標　177
二、相關知識　177
（一）安裝PHP服務器　177
（二）編輯PHP頁面　177
（三）瀏覽PHP頁面　178
三、任務實施　178
（一）啟動PHP服務器　178
（二）制作并瀏覽PHP頁面　179
實訓一　制作移動端“中國皮影”網(wǎng)頁　179
實訓二　制作移動端“問卷調(diào)查”和“調(diào)查結(jié)果”網(wǎng)頁　181
課后練習　183
技巧提升　184
項目九　測試與發(fā)布網(wǎng)站　185
任務一　測試“佳美馨裝飾”網(wǎng)站　186
一、任務描述　186
（一）任務背景　186
（二）任務目標　186
二、相關知識　186
（一）實時預覽網(wǎng)頁　187
（二）使用設備仿真功能預覽網(wǎng)頁在移動設備中的顯示效果　187
三、任務實施　188
（一）實時預覽“裝修方案精選”網(wǎng)頁　188
（二）預覽“裝修案例”網(wǎng)頁在移動設備中的顯示效果　189
任務二　發(fā)布“佳美馨裝飾”網(wǎng)站　190
一、任務描述　190
（一）任務背景　190
（二）任務目標　190
二、相關知識　190
（一）認識域名　190
（二）認識網(wǎng)站空間　191
（三）發(fā)布網(wǎng)站　191
三、任務實施　192
（一）注冊域名　192
（二）購買網(wǎng)站空間　194
（三）發(fā)布站點　196
實訓　測試與發(fā)布“中國皮影”網(wǎng)站　198
課后練習　199
技巧提升　200
項目十　綜合案例——“非遺文化”網(wǎng)站建設　201
任務一　前期規(guī)劃　202
（一）分析網(wǎng)站的用戶需求　202
（二）定位網(wǎng)站風格　202
（三）規(guī)劃網(wǎng)站草圖　202
（四）收集網(wǎng)站素材　202
（五）設計網(wǎng)頁效果圖　202
任務二　創(chuàng)建網(wǎng)站站點　202
任務三　制作網(wǎng)頁模板　203
任務四　制作網(wǎng)站頁面　208
（一）制作主頁　208
（二）制作訂購頁面　211
實訓一　制作珠寶公司“產(chǎn)品中心”網(wǎng)頁　212
實訓二　制作“微觀多肉世界”網(wǎng)站　214
課后練習　215
技巧提升　217