Dreamweaver網頁設計立體化教程（微課版）（Dreamweaver 2020）

刘解放，男，中共党员，工学博士，副教授；交通运输部青年科技英才，中国交通教育中青年优秀教师；中国计算机协会会员，江苏省不确定性人工智能协会会员；思科网络工程师，阿里云大数据处理与分析师，中兴通讯云计算技术讲师；多次被评为校优秀教师、先进工作者、三育人先进和优秀中共党员；主编教材3本，其中包括“十三五”职业教育国家规划教材1本，并获首届全国优秀教材二等奖；指导学生参加全国职业院校技能大赛“全国高校移动互联网应用开发创新大赛”获一等奖、“全国职业院校电子产品芯片级检测维修与数据恢复大赛”获二等奖2次，三等奖2次，“湖北省电子商务职业技能大赛”获一等奖等各级别大赛奖项10余项，并被评为优秀指导老师；作为第一作者在《IEEE SMC》、《Applied Soft Computing》、《软件学报》、《计算机研究与发展》等国际国内著名学术期刊发表学术论文20余篇，其中SCI检索2篇，EI检索5篇，北大中文核心5篇，多篇被评为市厅级优秀学术论文奖；主持及参与国家级、省部级教科研题10余项，主持及参与教学质量工程建设项目10余项。主要研究方向：计算机网络、模式识别与人工智能。

項目一 網頁設計基礎 1

任務一　規劃“佳美馨裝飾”網站結構　2

一、任務描述　2

（一）任務背景　2

（二）任務目標　2

二、相關知識　2

（一）網站、網頁、主頁的概念　2

（二）網頁設計常用術語　3

（三）網頁的構成元素　4

（四）常用網頁製作軟件　5

（五）HTML　6

（六）HTML5　8

（七）JavaScript　9

（八）網站開發流程　9

（九）網頁設計內容　11

（十）網頁設計原則　11

三、任務實施　12

任務二　創建“佳美馨裝飾”站點　12

一、任務描述　12

（一）任務背景　12

（二）任務目標　13

二、相關知識　13

（一）認識Dreamweaver　2020 的操作界面　13

（二）創建和管理站點　16

（三）管理站點中的文件和文件夾　18

三、任務實施　19

（一）創建站點　19

（二）編輯站點　19

（三）管理站點文件和文件夾　20

實訓一　規劃“中國皮影”網站的結構　22

實訓二　創建“中國皮影”站點　23

課後練習　23

技巧提升　24

項目二　添加文本與表格　27

任務一　製作“佳美馨裝飾簡介”網頁　28

一、任務描述　28

（一）任務背景　28

（二）任務目標　28

二、相關知識　28

（一）新建、保存與打開網頁文件　28

（二）設置網頁屬性　30

（三）設置網頁關鍵字和描述　33

（四）輸入文本　33

（五）設置文本格式　34

（六）插入列表　35

（七）插入特殊字符　35

（八）插入日期　35

（九）插入水平線　35

三、任務實施　36

（一）新建網頁並設置網頁屬性　36

（二）輸入文本並設置格式　37

（三）插入特殊字符、日期和水平線　39

任務二　製作“佳美馨裝飾——會員列表”網頁　40

一、任務描述　41

（一）任務背景　41

（二）任務目標　41

二、相關知識　41

（一）插入表格　41

（二）選擇表格　42

（三）在單元格中輸入內容　44

（四）設置表格屬性　44

（五）設置單元格屬性　45

（六）合並和拆分單元格　45

（七）添加和刪除行或列　46

三、任務實施　47

（一）插入表格並設置單元格屬性　47

（二）輸入表格內容　48

（三）導入表格數據並設置表格屬性　49

實訓一　製作“中國皮影——皮影戲”網頁　50

實訓二　製作“中國皮影——皮影起源傳說”網頁　51

課後練習　52

技巧提升　53

項目三　插入圖像和多媒體元素　55

任務一　製作“佳美馨裝飾——成功案例”欄目網頁　56

一、任務描述　57

（一）任務背景　57

（二）任務目標　57

二、相關知識　58

（一）網頁圖像基礎知識　58

（二）插入圖像　58

（三）設置圖像屬性　59

（四）創建鼠標經過圖像　61

（五）創建圖像輪播　62

三、任務實施　63

（一）插入案例圖像　63

（二）使用鼠標經過圖像製作按鈕　63

（三）插入案例輪播圖　65

任務二　製作“佳美馨裝飾——中式田園風格”內容網頁　66

一、任務描述　66

（一）任務背景　66

（二）任務目標　66

二、相關知識　67

（一）插入視頻　67

（二）插入音頻　68

（三）插入動畫　68

三、任務實施　69

（一）設置背景音樂　69

（二）插入並設置視頻　69

（三）插入並設置動畫　70

實訓一　製作“中國皮影——皮影鑒賞”網頁　71

實訓二　製作“中國皮影——皮影的表演”網頁　72

課後練習　73

技巧提升　75

項目四　創建超鏈接　77

任務一　創建“佳美馨裝飾——網站地圖”網頁中的超鏈接　78

一、任務描述　78

（一）任務背景　78

（二）任務目標　78

二、相關知識　79

（一）認識超鏈接　79

（二）創建文本、圖像超鏈接　81

三、任務實施　83

（一）創建文本超鏈接　83

（二）創建圖像超鏈接　84

（三）創建圖像熱點超鏈接　84

（四）瀏覽超鏈接效果　85

任務二　創建“佳美馨裝飾——聯系我們”網頁中的超鏈接　85

一、任務描述　86

（一）任務背景　86

（二）任務目標　87

二、相關知識　87

（一）認識錨點超鏈接　87

（二）認識文件下載超鏈接　88

（三）認識電子郵件超鏈接　88

（四）認識空鏈接　89

（五）認識腳本鏈接　89

三、任務實施　89

（一）創建錨點超鏈接　89

（二）創建文件下載超鏈接和電子郵件超鏈接　90

（三）創建腳本鏈接和空鏈接　91

實訓一　製作“中國皮影——網站地圖”網頁　91

實訓二　製作“中國皮影——皮影的製作流程”網頁　93

課後練習　94

技巧提升　96

項目五　佈局網頁　99

任務一　使用div+CSS 盒子模型佈局“佳美馨裝飾——公司榮譽”網頁　100

一、任務描述　100

（一）任務背景　100

（二）任務目標　100

二、相關知識　100

（一）認識CSS　樣式　101

（二）“CSS　設計器”面板　102

（三）CSS　樣式的屬性　103

（四）應用CSS　樣式　107

（五）認識div+CSS　盒子模型　107

（六）利用div+CSS　盒子模型佈局網頁　108

三、任務實施　109

（一）創建並應用標簽CSS　樣式　109

（二）創建並應用ID　CSS 樣式　110

（三）創建並應用類CSS　樣式　111

（四）創建並應用後代CSS　樣式　114

任務二　使用響應式佈局製作“佳美馨裝飾”首頁　115

一、任務描述　115

（一）任務背景　115

（二）任務目標　116

二、相關知識　116

（一）認識響應式佈局　116

（二）設置視口　116

（三）添加媒體查詢　116

三、任務實施　118

（一）設置視口並添加媒體查詢　118

（二）添加CSS　樣式並預覽效果　119

實訓一　製作“中國皮影——皮影的地方特色”網頁　120

實訓二　製作“中國皮影”首頁　122

課後練習　123

技巧提升　125

項目六　使用模板和庫 127三居室裝修案例” 網頁　128

一、任務描述　128

（一）任務背景　128

（二）任務目標　129

二、相關知識　129

（一）認識模板　129

（二）創建模板　129

（三）編輯模板　130

（四）應用模板　131

三、任務實施　132

（一）創建“案例展示”模板　132

（二）從模板創建“原木簡約風三居室裝修案例”網頁　134

任務二　在“裝修方案精選”網頁中使用庫　135

一、任務描述　136

（一）任務背景　136

（二）任務目標　136

二、相關知識　136

（一）認識“資源”面板　137

（二）創建庫項目　137

（三）編輯庫項目　138

（四）插入庫項目　138

三、任務實施　138

（一）創建“裝修方案”庫項目　138

（二）在網頁中添加庫項目　139西皮影”網頁　140

實訓二　使用庫項目製作“中國皮影——皮影文創產品”網頁　141

課後練習　143

技巧提升　144

項目七　使用表單和行為　145

任務一　在“佳美馨裝飾——會員登錄”網頁中使用表單　146

一、任務描述　146

（一）任務背景　146

（二）任務目標　146

二、相關知識　147

（一）認識表單和表單元素　147

（二）插入表單並設置表單屬性　147

（三）插入表單元素　148

三、任務實施　153

（一）創建表單並設置屬性　153

（二）插入表單元素並設置屬性　154

任務二　在“佳美馨裝飾——會員登錄”網頁中使用行為　156

一、任務描述　157

（一）任務背景　157

（二）任務目標　157

二、相關知識　157

（一）認識行為　157

（二）認識“行為”面板　158

（三）添加行為　158

（四）修改行為　158

（五）刪除行為　159

三、任務實施　159

（一）添加“檢查表單”行為　159

（二）添加“彈出信息”行為　159

實訓一　在“中國皮影——問捲調查”網頁中使用表單　160

實訓二　在“中國皮影——皮影圖集”網頁中使用行為　162

課後練習　164

技巧提升　166

項目八　製作移動端網頁　167

任務一　製作移動端“裝修案例”網頁　168

一、任務描述　168

（一）任務背景　168

（二）任務目標　168

二、相關知識　168

（一）認識jQuery　Mobile　169

（二）創建jQuery　Mobile 網頁效果　169

（三）使用jQuery　Mobile 組件　170

三、任務實施　174

（一）添加jQuery　Mobile 頁面　174

（二）為頁面添加內容　175

任務二　創建PHP頁面　176

一、任務描述　177

（一）任務背景　177

（二）任務目標　177

二、相關知識　177

（一）安裝PHP服務器　177

（二）編輯PHP頁面　177

（三）瀏覽PHP頁面　178

三、任務實施　178

（一）啟動PHP服務器　178

（二）製作並瀏覽PHP頁面　179

實訓一　製作移動端“中國皮影”網頁　179

實訓二　製作移動端“問捲調查”和“調查結果”網頁　181

課後練習　183

技巧提升　184

項目九　測試與發布網站　185

任務一　測試“佳美馨裝飾”網站　186

一、任務描述　186

（一）任務背景　186

（二）任務目標　186

二、相關知識　186

（一）實時預覽網頁　187

（二）使用設備模擬功能預覽網頁在移動設備中的顯示效果　187

三、任務實施　188

（一）實時預覽“裝修方案精選”網頁　188

（二）預覽“裝修案例”網頁在移動設備中的顯示效果　189

任務二　發布“佳美馨裝飾”網站　190

一、任務描述　190

（一）任務背景　190

（二）任務目標　190

二、相關知識　190

（一）認識域名　190

（二）認識網站空間　191

（三）發布網站　191

三、任務實施　192

（一）註冊域名　192

（二）購買網站空間　194

（三）發布站點　196

實訓　測試與發布“中國皮影”網站　198

課後練習　199

技巧提升　200

項目十　綜合案例——“非遺文化”網站建設　201

任務一　前期規劃　202

（一）分析網站的用戶需求　202

（二）定位網站風格　202

（三）規劃網站草圖　202

（四）收集網站素材　202

（五）設計網頁效果圖　202

任務二　創建網站站點　202

任務三　製作網頁模板　203

任務四　製作網站頁面　208

（一）製作主頁　208

（二）製作訂購頁面　211

實訓一　製作珠寶公司“產品中心”網頁　212

實訓二　製作“微觀多肉世界”網站　214

課後練習　215

技巧提升　217