本書首先介紹網頁設計基礎，然后對添加文本與表格、插入圖像和多媒體元素、創建超鏈接、布局網頁、使用模板和庫、使用表單和行為、制作移動端網頁、測試與發布網站等相關知識進行講解，最后還安排一個綜合案例，進一步提高讀者對知識的應用能力。
本書以“佳美馨裝飾”網站的設計與制作為例，采用項目式教學法，將每個項目分解成若干任務，每個任務主要由任務描述、相關知識和任務實施3個部分組成，然后進行項目實訓。每個項目最后還提供課后練習和技巧提升。本書著重培養學生的軟件實際操作能力，將職業場景引入課堂教學，讓學生提前進入工作角色。
“十四五”職業教育國家規劃教材
1.成熟教材改版；
2.配套教學大綱、教案、PPT、教學視頻、拓展案例等豐富的教學資源；
3.案例豐富、突出培養學生的動手能力；
4.職場情境、軟件知識、行業知識進行整合。
劉解放，男，中共黨員，工學博士，副教授；交通運輸部青年科技英才，中國交通教育中青年優秀教師；中國計算機協會會員，江蘇省不確定性人工智能協會會員；思科網絡工程師，阿里云大數據處理與分析師，中興通訊云計算技術講師；多次被評為校優秀教師、先進工作者、三育人先進和優秀中共黨員；主編教材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
新書資訊