HTML5+CSS3 Web前端設計基礎教程（第3版）（微課版）

吳豐，黃河水利職業技術學院副教授，市級優秀教師。從教17年以來，主要從事Web前端開發、數字媒體技術和智慧校園建設等方面的研究。主持和參與多項省級科研和教學改革項目；在中文核心、EI期刊發表專業論文十余篇；累計主編數字化新型教材20余本，受到業界與學生好評。

第 1章

Web前端職業前景與重要理念　1

【本章導讀】　1

【學習目標】　1

【素質目標】　1

【思維導圖】　1

1.1　了解Web前端工程師　2

1.1.1　Web前端開發的必要知識與

發展前景　3

1.1.2　認識網頁的構成元素　5

1.1.3　了解專業術語　7

1.2　重要理念——表現和結構相分離　8

1.2.1　體驗“表現和結構相分離”　8

1.2.2　認識Web標準　9

1.3　Web前端開發基本流程　10

1.3.1　開發流程　10

1.3.2　常用開發軟件介紹　12

1.4　職業道德與行為規範　13

1.5　使用記事本創建HTML5頁面　14

1.6　課堂動手實踐　15

 

第　2章

HTML5頁面的構建與簡單控制　16

【本章導讀】　16

【學習目標】　16

【素質目標】　16

【思維導圖】　16

2.1　Dreamweaver的工作環境概述　17

2.1.1　界面介紹　17

2.1.2　常用工具欄和面板　17

2.2　創建和管理站點　20

2.2.1　創建站點　20

2.2.2　“文件”面板的使用方法　21

2.2.3　管理站點　22

2.3　HBuilderX工作環境概述　23

2.3.1　HBuilderX的安裝與啟動　23

2.3.2　使用HBuilderX創建項目　24

2.3.3　安裝擴展插件　25

2.4　HTML5入門　26

2.4.1　使用Dreamweaver構建

“H5標準頁面”　26

2.4.2　DOCTYPE文檔類型與基本

結構元素　27

2.4.3　HTML5常見元素　30

2.4.4　HTML5新增結構元素　38

2.5　課堂動手實踐　39

 

第3章

CSS3基礎入門　40

【本章導讀】　40

【學習目標】　40

【素質目標】　40

【思維導圖】　40

3.1　CSS3的基礎知識　41

3.1.1　CSS介紹　41

3.1.2　CSS的語法與註釋　42

3.1.3　CSS的引入方式　43

3.2　盒模型　47

3.2.1　盒模型的基本概念　47

3.2.2　計算盒模型中的寬與高　49

3.3　CSS3初級選擇器　50

3.3.1　通配符選擇器　50

3.3.2　類型選擇器　51

3.3.3　類選擇器　52

3.3.4　ID選擇器　53

3.3.5　後代選擇器　54

3.3.6　群組選擇器　56

3.4　CSS3高級選擇器　57

3.4.1　子元素選擇器和相鄰兄弟

選擇器　57

3.4.2　屬性選擇器　58

3.4.3　關於優先級　59

3.5　使用CSS3基礎知識完成頁面簡易

美化——404頁面的制作　60

3.6　課堂動手實踐　63

 

第4章

實現Web前端排版的基本美化　65

【本章導讀】　65

【學習目標】　65

【素質目標】　65

【思維導圖】　65

4.1　控制文本　66

4.1.1　CSS中字體屬性與文本屬性

介紹　66

4.1.2　Web Font與@font-face　71

4.1.3　文本的首行縮進、行高和

陰影　73

4.1.4　文本溢出處理　75

4.2　控制超鏈接　76

4.2.1　文本鏈接、郵件鏈接與錨

鏈接　76

4.2.2　CSS偽類與超鏈接　78

4.3　控制圖像和顏色　80

4.3.1　CSS中控制圖像和顏色的

基本屬性　80

4.3.2　圖文混排　84

4.4　課堂動手實踐　90

 

第5章

浮動、定位與列表　91

【本章導讀】　91

【學習目標】　91

【素質目標】　91

【思維導圖】　91

5.1　浮動與清除浮動　92

5.1.1　浮動　92

5.1.2　清除浮動的3種方法　94

5.2　CSS定位　96

5.2.1　靜態定位和固定定位　97

5.2.2　相對定位和絕對定位　99

5.2.3　相對於某一容器的絕對

定位　101

5.3　列表　102

5.3.1　有關列表的CSS樣式　102

5.3.2　縱向導航　104

5.3.3　簡易橫向導航　108

5.3.4　復雜橫向導航（含Logo與

二級菜單）　110

5.4　圖文信息列表　114

5.5　課堂動手實踐　119

 

第6章

HTML5增強型表單與簡易

表格　121

【本章導讀】　121

【學習目標】　121

【素質目標】　121

【思維導圖】　121

6.1　表單的創建與編輯　122

6.1.1　表單的基本知識　122

6.1.2　常見的表單對象　123

6.2　CSS控制表單　129

6.2.1　搜索欄　129

6.2.2　用戶登錄頁面　131

6.2.3　傳統按鈕、CSS3按鈕與

開源樣式庫按鈕　135

6.3　表格　138

6.3.1　表格的基本概念及其簡易

操作　138

6.3.2　細線表格　141

6.3.3　隔行換色表格　142

6.4　課堂動手實踐　144

 

第7章

CSS3與HTML5的高級

應用　146

【本章導讀】　146

【學習目標】　146

【素質目標】　146

【思維導圖】　146

7.1　CSS Sprite技術　147

7.1.1　CSS Sprite技術分解　147

7.1.2　CSS Sprite技術的應用　148

7.2　CSS3漸變　151

7.3　CSS3動畫　152

7.3.1　變形——transform屬性　153

7.3.2　過渡——transition屬性　154

7.3.3　CSS3動畫的應用——

“幽靈按鈕”　155

7.4　CSS3選項卡　159

7.5　HTML5 Canvas　163

7.5.1　創建畫布並繪制簡單圖形　163

7.5.2　Canvas坐標系統、線條與

圓形　164

7.6　課堂動手實踐　166

 

第8章

PC端典型頁面的設計與實現　167

【本章導讀】　167

【學習目標】　167

【素質目標】　167

【思維導圖】　167

8.1　Photoshop在Web前端的常見

操作　168

8.1.1　基礎操作　168

8.1.2　切片並輸出　170

8.2　頁面布局規劃與實現　171

8.2.1　首頁的實現　171

8.2.2　列表頁的實現　179

8.2.3　內容頁的實現　183

8.3　課堂動手實踐　185

 

第9章

多設備響應式頁面的實現　186

【本章導讀】　186

【學習目標】　186

【素質目標】　186

【思維導圖】　186

9.1　響應式頁面開發　187

9.1.1　了解響應式Web設計　187

9.1.2　viewport網頁可視區域　187

9.1.3　媒體查詢詳解　190

9.2　響應式頁面的設計與實現　193

9.2.1　頁面分析　193

9.2.2　詳細實施過程　195

9.3　響應式框架介紹　200

9.4　課堂動手實踐　201

 

第　10章

使用Bootstrap框架創建

頁面　202

【本章導讀】　202

【學習目標】　202

【素質目標】　202

【思維導圖】　202

10.1　Bootstrap框架　203

10.1.1　Bootstrap框架的環境

　配置　203

10.1.2　Bootstrap柵格系統　204

10.1.3　Bootstrap表格　207

10.1.4　Bootstrap表單　208

10.1.5　Bootstrap圖片　209

10.1.6　Bootstrap導航欄　211

10.2　使用Bootstrap框架搭建簡單

　頁面　213

10.2.1　頁面結構分析　213

10.2.2　頁面搭建過程　214

10.3　課堂動手實踐　216

 

第　11章

Web　App類頁面的設計與

實現　217

【本章導讀】　217

【學習目標】　217

【素質目標】　217

【思維導圖】　217

11.1　Web App開發基礎知識　218

11.1.1　開發模式概述　218

11.1.2　手機屏幕基本知識　219

11.2　Swiper插件　220

11.3　Web App頁面分析與環境準備　222

11.3.1　頁面分析　222

11.3.2　環境準備　223

11.4　頁面實現的詳細過程　224

11.4.1　首頁的實現　224

11.4.2　列表頁的實現　231

11.4.3　詳細內容頁的實現　234

11.5　課堂動手實踐　236