Web前端開發項目教程（HTML5+CSS3+JavaScript）（微課版）

本書以一個完整的網上商城網站的前端頁面開發項目為載體，按照項目開發流程和學習者的認知規律，由淺入深、循序漸進地將HTML5、CSS3、JavaScript的理論知識和關鍵技術融入各個工作任務中。通過一個個具體任務的完成及最終整個項目的完整實現，讀者能夠快速掌握網站前端頁面開發相關的理論知識和職業技能，能夠獨立設計開發各種商業網站。

項目涉及的主要知識點和技能點包括：網站開發環境的選取和配置、常見標記和樣式屬性的使用、CSS和各種選擇器的使用、DIV+CSS頁面佈局的用法、網格佈局和彈性盒佈局的使用、各類導航菜單的製作、表格及表單用法、HTML5的視頻與音頻插入、JavaScript輪播圖的製作等。

本書既可作為高職高專院校或應用型本科院校相關專業網站設計與開發課程的教材或教學參考書，也可作為“Web前端1+X職業技能等級證書”考試的輔助用書，還可供廣大電腦從業者和愛好者學習和參考。

刘锡冬，教授，山东商业职业技术学院云计算技术与应用产业学院教师。多年来一直从事高职软件技术专业课教学和研究工作，讲授课程包括HTML5网站设计与开发、响应式网站开发、动态网站开发、Java程序设计、MySQL数据库应用等。

項目1　認識網站和網頁　1

【情境導入】　1

任務1-1　網站設計與開發起步　1

【任務提出】　1

【學習目標】　1

【相關知識】　1

一、基本概念　2

二、網頁的標準化　3

三、瀏覽器的開發者工具　5

【項目實踐】　5

任務1-2　製作第 一個網頁　6

【任務提出】　6

【學習目標】　6

【相關知識】　6

一、常用HTML編輯器　6

二、創建古詩詞網頁　8

【項目實踐】　14

【小結】　16

【習題】　16

項目2　網頁的藍圖——簡單佈局　18

【情境導入】　18

任務2-1　使用CSS裝飾網頁　18

【任務提出】　18

【學習目標】　18

【相關知識】　19

一、DIV+CSS網頁佈局　19

二、CSS　19

【項目實踐】　25

任務2-2　巧用選擇器調兵遣將　25

【任務提出】　25

【學習目標】　25

【相關知識】　25

一、CSS選擇器　25

二、基本選擇器的用法　26

三、擴展選擇器的用法　29

【項目實踐】　32

任務2-3　使用盒模型劃分頁面　34

【任務提出】　34

【學習目標】　34

【相關知識】　34

一、HTML元素的分類和轉換　34

二、塊級元素的盒模型　36

三、盒子的占位　44

【項目實踐】　46

任務2-4　使用BFC隔離空間　47

【任務提出】　47

【學習目標】　48

【相關知識】　48

一、垂直外邊距的合並　48

二、BFC佈局　49

【項目實踐】　51

【小結】　52

【習題】　52

項目3　網頁的藍圖——復雜佈局　56

【情境導入】　56

任務3-1　浮動佈局兩欄式頁面　56

【任務提出】　56

【學習目標】　56

【相關知識】　57

一、認識浮動　57

二、元素的浮動屬性float　58

三、清除浮動　60

四、盒子的高度塌陷及解決方法　61

【項目實踐】　64

任務3-2　DIV+CSS佈局網上商城

　首頁　66

【任務提出】　66

【學習目標】　66

【相關知識】　67

一、佈局的準備工作　67

二、通欄多列式佈局效果及實現　67

【項目實踐】　70

任務3-3　網格佈局網上商城首頁　71

【任務提出】　71

【學習目標】　71

【相關知識】　72

一、認識CSS　Grid網格佈局　72

二、網格佈局中對父元素的操作　73

三、網格佈局中對子元素的操作　77

【項目實踐】　79

【小結】　80

【習題】　80

項目4　向網頁中插入圖像和文本　83

【情境導入】　83

任務4-1　網站首頁中圖像的應用　83

【任務提出】　83

【學習目標】　83

【相關知識】　83

一、插入圖像　84

二、CSS圖像樣式　85

【項目實踐】　91

任務4-2　網站首頁中文本的應用　92

【任務提出】　92

【學習目標】　92

【相關知識】　93

一、插入文本　93

二、CSS字體和文本樣式的應用　96

【項目實踐】　101

【小結】　104

【習題】　104

項目5　向網站首頁添加導航　106

【情境導入】　106

任務5-1　頁面中超鏈接的使用　106

【任務提出】　106

【學習目標】　106

【相關知識】　106

一、認識超鏈接　106

二、創建超鏈接　107

三、超鏈接的具體應用　108

【項目實踐】　111

任務5-2　一級導航菜單的設計

開發　112

【任務提出】　112

【學習目標】　112

【相關知識】　112

一、網站導航的樣式及設計方法　113

二、偽類控制超鏈接外觀　114

三、按鈕式導航菜單的製作　116

【項目實踐】　118

任務5-3　二級彈出式菜單的定位　121

【任務提出】　121

【學習目標】　122

【相關知識】　122

一、元素的定位　122

二、定位屬性　123

三、定位具體用法　123

【項目實踐】　129

【小結】　132

【習題】　132

項目6　網頁中列表的應用　135

【情境導入】　135

任務6-1　認識列表　135

【任務提出】　135

【學習目標】　135

【相關知識】　136

一、列表的分類　136

二、CSS控制列表樣式　139

三、列表的應用　142

【項目實踐】　145

任務6-2　使用列表製作多級導航　147

【任務提出】　147

【學習目標】　147

【相關知識】　148

一、列表的嵌套　148

二、多級導航菜單的製作　149

【項目實踐】　153

【小結】　155

【習題】　155

項目7　使用彈性盒佈局二級導航菜單　157

【情境導入】　157

【任務提出】　157

【學習目標】　157

【相關知識】　158

一、認識彈性盒佈局　158

二、彈性盒的內容　158

三、彈性盒的CSS樣式屬性　159

四、彈性子元素的屬性　165

五、彈性盒的應用　167

【項目實踐】　170

【小結】　172

【習題】　172

項目8　網頁中表格元素的應用　173

【情境導入】　173

【任務提出】　173

【學習目標】　173

【相關知識】　174

一、創建表格　174

二、CSS控製表格樣式　178

三、表格的應用　181

【項目實踐】　184

【小結】　186

【習題】　186

項目9　網頁中表單元素的應用　187

【情境導入】　187

【任務提出】　187

【學習目標】　187

【相關知識】　188

一、表單的組成　188

二、創建表單　188

三、表單控件　190

四、HTML5自帶表單驗證　197

五、表單樣式的應用　198

【項目實踐】　202

【小結】　203

【習題】　203

項目10　向網頁中插入視頻和音頻　205

【情境導入】　205

【任務提出】　205

【學習目標】　205

【相關知識】　206

一、Web上的視頻　206

二、Web上的音頻　210

【項目實踐】　212

【小結】　213

【習題】　213

項目11　網站首頁中的動態效果　214

【情境導入】　214

任務11-1　實現網站首頁的

輪播圖　214

【任務提出】　214

【學習目標】　214

【相關知識】　215

一、輪播圖原理分析　215

二、搭建基本界面　215

三、實現輪播效果　216

四、添加定時器自動輪播　220

【項目實踐】　223

任務11-2　實現圖片的滑動

輪播　224

【任務提出】　224

【學習目標】　224

【相關知識】　225

一、滑動輪播圖原理分析　225

二、搭建基本界面　225

三、輪播圖中JS腳本的應用　228

【項目實踐】　231

【小結】　234

【習題】　234