網頁設計與制作項目化教程（微課版）

模塊 1 啟航項目
項目 1 中國元素頁面...................................................................................................................... 2
任務 1.1 創建頁面（網頁設計與制作技術基礎） ................................................................ 2
任務描述 ............................................................................................................................. 2
教學目標 ............................................................................................................................. 2
技能獲取 ............................................................................................................................. 3
1.1.1 揭開網頁的神秘面紗 ........................................................................................... 3
1.1.2 探索網頁制作三大技術 ........................................................................................ 6
1.1.3 準備工具 ............................................................................................................ 7
1.1.4 創建第一個網頁 .................................................................................................. 9
任務實施 ........................................................................................................................... 10
小結 ................................................................................................................................... 11
習題 ................................................................................................................................... 11
任務 1.2 制作圖文混排頁面（HTML5） ............................................................................ 11
任務描述 ........................................................................................................................... 11
教學目標 ........................................................................................................................... 12
技能獲取 ........................................................................................................................... 12
1.2.1 走近 HTML5 ..................................................................................................... 12
1.2.2 探索網頁的核心元素——標簽 ............................................................................ 13
1.2.3 設定頭標簽 ....................................................................................................... 15
1.2.4 設定文本標簽.................................................................................................... 16
1.2.5 設定圖像標簽.................................................................................................... 22
任務實施 ........................................................................................................................... 28
小結 ................................................................................................................................... 31
習題 ................................................................................................................................... 31
項目 2 中國古代詩詞頁面 ............................................................................................................ 32
任務 2.1 創建頁面（CSS3 初級） ........................................................................................ 32
任務描述 ........................................................................................................................... 32
教學目標 ........................................................................................................................... 33
技能獲取 ........................................................................................................................... 33
2.1.1 走近 CSS 與 CSS3 ............................................................................................. 33
2.1.2 運用基礎選擇器 ................................................................................................ 36
2.1.3 運用組合選擇器 ................................................................................................ 38
任務實施 ........................................................................................................................... 42
小結 ................................................................................................................................... 45
習題 ................................................................................................................................... 46
任務 2.2 修飾頁面（CSS3 進階） ........................................................................................ 46
任務描述 ........................................................................................................................... 46
教學目標 ........................................................................................................................... 46
技能獲取 ........................................................................................................................... 47
2.2.1 運用屬性選擇器 ................................................................................................ 47
2.2.2 運用關系選擇器 ................................................................................................ 53
2.2.3 運用結構化偽類選擇器 ...................................................................................... 56
2.2.4 運用偽元素選擇器 ............................................................................................. 59
任務實施 ........................................................................................................................... 62
小結 ................................................................................................................................... 63
習題 ................................................................................................................................... 64
項目 3 中華美食頁面.................................................................................................................... 65
任務 3.1 應用盒子模型（盒子模型） .................................................................................. 65
任務描述 ........................................................................................................................... 65
教學目標 ........................................................................................................................... 66
技能獲取 ........................................................................................................................... 66
3.1.1 探索盒子模型.................................................................................................... 66
3.1.2 運用盒子模型的相關屬性 .................................................................................. 67
3.1.3 運用 CSS3 新增的典型盒子模型屬性 .................................................................. 83
3.1.4 運用元素的類型特性 ......................................................................................... 87
3.1.5 探究塊級元素的垂直外邊距 ............................................................................... 87
任務實施 ........................................................................................................................... 88
小結 ................................................................................................................................... 94
習題 ................................................................................................................................... 94
任務 3.2 認識布局屬性（DIV+CSS 布局屬性） ................................................................ 94
任務描述 ........................................................................................................................... 94
教學目標 ........................................................................................................................... 95
技能獲取 ........................................................................................................................... 96
3.2.1 走近布局 .......................................................................................................... 96
3.2.2 運用元素的 float 屬性 ........................................................................................ 97
3.2.3 運用元素的 position 屬性 ................................................................................... 99
3.2.4 運用元素的 overflow 屬性 ................................................................................ 101
3.2.5 運用元素的 z_index 屬性 .................................................................................. 102
任務實施 ......................................................................................................................... 104
小結 ................................................................................................................................. 108
習題 ................................................................................................................................. 108
任務 3.3 控制布局（DIV+CSS 常用布局類型） .............................................................. 109
任務描述 ......................................................................................................................... 109
教學目標 ......................................................................................................................... 109
技能獲取 ......................................................................................................................... 110
3.3.1 單列布局 ........................................................................................................ 110
3.3.2 兩列布局 ........................................................................................................ 111
3.3.3 三列布局 ........................................................................................................ 113
3.3.4 運用 HTML5 的結構化語義元素 ....................................................................... 114
任務實施 ......................................................................................................................... 116
小結 ................................................................................................................................. 119
習題 ................................................................................................................................. 119
項目 4 中國傳統民俗頁面 .......................................................................................................... 120
任務 4.1 制作列表頁面（列表） ........................................................................................ 120
任務描述 ......................................................................................................................... 120
教學目標 ......................................................................................................................... 120
技能獲取 ......................................................................................................................... 121
4.1.1 走近列表標簽.................................................................................................. 121
4.1.2 運用常用列表標簽 ........................................................................................... 122
4.1.3 控制列表樣式.................................................................................................. 125
任務實施 ......................................................................................................................... 127
小結 ................................................................................................................................. 133
習題 ................................................................................................................................. 134
任務 4.2 制作超鏈接頁面（超鏈接） ................................................................................ 134
任務描述 ......................................................................................................................... 134
教學目標 ......................................................................................................................... 135
技能獲取 ......................................................................................................................... 135
4.2.1 走近超鏈接標簽 .............................................................................................. 135
4.2.2 運用超鏈接標簽 .............................................................................................. 135
4.2.3 控制超鏈接樣式 .............................................................................................. 139
任務實施 ......................................................................................................................... 140
小結 ................................................................................................................................. 146
習題 ................................................................................................................................. 146
項目 5 中國傳統服飾頁面 .......................................................................................................... 147
任務 5.1 制作表格頁面（表格） ........................................................................................ 147
任務描述 ......................................................................................................................... 147
教學目標 ......................................................................................................................... 148
技能獲取 ......................................................................................................................... 148
5.1.1 走近表格標簽.................................................................................................. 148
5.1.2 CSS 控制表格和單元格樣式 ............................................................................. 155
任務實施 ......................................................................................................................... 159
小結 ................................................................................................................................. 165
習題 ................................................................................................................................. 165
任務 5.2 制作會員註冊頁面（表單） ................................................................................ 166
任務描述 ......................................................................................................................... 166
教學目標 ......................................................................................................................... 166
技能獲取 ......................................................................................................................... 167
5.2.1 表單概述 ........................................................................................................ 167
5.2.2 運用＜label＞標簽 .............................................................................................. 168
5.2.3 運用＜input＞標簽 ............................................................................................. 169
5.2.4 運用＜textarea＞標簽 .......................................................................................... 177
5.2.5 運用＜select＞標簽 ............................................................................................. 178
5.2.6 運用＜datalist＞標簽 ........................................................................................... 179
5.2.7 CSS 控制表單元素與整體布局 .......................................................................... 179
任務實施 ......................................................................................................................... 184
小結 ................................................................................................................................. 188
習題 ................................................................................................................................. 189
項目 6 中國傳統戲曲頁面 .......................................................................................................... 190
任務 6.1 制作視頻欄目 ........................................................................................................ 190
任務描述 ......................................................................................................................... 190
教學目標 ......................................................................................................................... 191
技能獲取 ......................................................................................................................... 192
6.1.1 HTML5 支持的視頻格式 .................................................................................. 192
6.1.2 在 HTML5 中嵌入視頻 .................................................................................... 192
6.1.3 視頻文件兼容性問題 ....................................................................................... 195
任務實施 ......................................................................................................................... 196
小結 ................................................................................................................................. 205
習題 ................................................................................................................................. 205
任務 6.2 制作音頻欄目 ........................................................................................................ 206
任務描述 ......................................................................................................................... 206
教學目標 ......................................................................................................................... 207
技能獲取 ......................................................................................................................... 208
6.2.1 HTML5 支持的音頻格式 .................................................................................. 208
6.2.2 在 HTML5 中嵌入音頻 .................................................................................... 208
6.2.3 音頻文件兼容性問題 ....................................................................................... 209
任務實施 ......................................................................................................................... 210
小結 ................................................................................................................................. 214
習題 ................................................................................................................................. 214
模塊 2 綜合項目
項目 7 “舒適家居”企業網站 .................................................................................................. 216
任務 7.1 需求分析................................................................................................................ 216
7.1.1 項目背景 ........................................................................................................ 216
7.1.2 需求說明 ........................................................................................................ 216
任務 7.2 網站設計................................................................................................................ 217
7.2.1 網站主題設計.................................................................................................. 217
7.2.2 網站風格設計.................................................................................................. 217
任務 7.3 資源準備................................................................................................................ 217
7.3.1 網頁布局 ........................................................................................................ 218
7.3.2 網頁切片 ........................................................................................................ 219
任務 7.4 網頁制作................................................................................................................ 221
7.4.1 環境搭建 ........................................................................................................ 221
7.4.2 制作主頁面 ..................................................................................................... 225
7.4.3 制作子頁面 ..................................................................................................... 233
小結 ................................................................................................................................. 240
項目 8 “中國傳統書畫藝術”網站（用 DeepSeek 實現代碼生成） ................................. 241
任務 8.1 需求分析................................................................................................................ 241
8.1.1 項目背景 ........................................................................................................ 241
8.1.2 需求說明 ........................................................................................................ 243
任務 8.2 網站設計................................................................................................................ 244
8.2.1 網站主題設計.................................................................................................. 244
8.2.2 網站風格設計.................................................................................................. 244
任務 8.3 資源準備................................................................................................................ 244
任務 8.4 網頁制作................................................................................................................ 245
8.4.1 環境搭建 ........................................................................................................ 245
8.4.2 網站基本框架設計 ........................................................................................... 245
8.4.3 網站個性化功能設計 ....................................................................................... 250
小結 ................................................................................................................................. 255
模塊 3 實訓項目
項目 9 “中國建築文化”網站 .................................................................................................. 258
任務 9.1 需求分析................................................................................................................ 258
9.1.1 項目背景 ........................................................................................................ 259
9.1.2 需求說明 ........................................................................................................ 259
任務 9.2 網站設計................................................................................................................ 260
9.2.1 網站主題設計.................................................................................................. 260
9.2.2 網站風格設計.................................................................................................. 260
任務 9.3 資源準備................................................................................................................ 261
9.3.1 網頁布局 ........................................................................................................ 261
9.3.2 網頁切片 ........................................................................................................ 261
任務 9.4 網頁制作................................................................................................................ 261
9.4.1 制作主頁面 ..................................................................................................... 261
9.4.2 制作子頁面 ..................................................................................................... 261