HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐

《HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐》從設計網站開始，以淺顯易懂的方式講解網站構建過程、設計網站原型的工具和資源的獲取，循序漸進地介紹Web前端三大核心技術—HTML、CSS和JavaScript，並加入前端框架Bootstrap技術。 《HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐》介紹配色工具，以及如何使用Bootstrap模塊和配色表快速構建專業美觀的響應式網頁設計（RWD）網站。本書包含漸進式應用技術，手把手教讀者優化網站為Web應用，實現類似原生應用的體驗。 《HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐》共分三部分：前端開發概念，HTML+CSS基礎到進階教學；JavaScript基礎語法和Web數據庫應用；前端框架工具，包括Bootstrap和PWA。各部分均有實用範例和整合練習。《HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐》適合自學與教學使用：對前端技術感興趣卻不知從何入門的初學者；前端開發技術相關從業人員；大專院校用於網站設計相關課程教材。

目    錄

第一部分   HTML 5+CSS

第1章  網站開發的概念與技術 2

1.1  網站開發的基礎概念 2

1.1.1  網站和網頁 2

1.1.2  網頁開發的前端與後端 4

1.1.3  網址的組成 5

1.2  構建網站的流程與技術 8

1.2.1  擬定網站主題 8

1.2.2  規劃網站架構與內容 10

1.2.3  製作網頁工具 11

1.2.4  上傳雲端 12

1.3  網站界面的原型構建工具 14

1.3.1  網站原型架構 14

1.3.2  界面線框與原型工具 15

1.3.3  實現網站的界面原型 19

第2章  HTML與CSS基礎 31

2.1  學習HTML前的準備工作 31

2.1.1  建立HTML文件 31

2.1.2  自動生成HTML 5結構的程序代碼 32

2.2  HTML語法概念與結構 35

2.2.1  HTML的標簽類型 35

2.2.2  HTML的組成 36

2.2.3  標簽屬性的應用 36

2.3  HTML 5文件結構與語義標簽 37

2.3.1  語義化的HTML標簽 37

2.3.2  HTML 5聲明與編碼設置 40

2.4  認識CSS基本結構 42

2.4.1  應用CSS樣式表 42

2.4.2  CSS基本格式 45

2.4.3  認識CSS選擇器 46

2.4.4  CSS的度量單位 53

2.4.5  CSS的顏色表示法 54

第3章  HTML常用標簽 56

3.1  排版相關的標簽 56

3.1.1  瀏覽器呈現網頁的過程 56

3.1.2  標題標簽 58

3.1.3  段落和換行標簽 59

3.2  項目列表 63

3.2.1  有序列表 63

3.2.2  無序列表 66

3.2.3  定義列表 67

3.3  表格與表單 69

3.3.1  表格 69

3.3.2  表單 71

3.3.3  表單組件 73

3.4  插入圖片與超鏈接 77

3.4.1  插入圖片 77

3.4.2  超鏈接 79

3.4.3  內置框架 81

3.5  <div>標簽與<span>標簽 84

3.5.1  認識<div>標簽 84

3.5.2  認識<span>標簽 87

3.5.3  給程序代碼加上註釋 88

3.5.4  使用特殊符號及Emoji字符集 89

第4章  CSS常用語法 92

4.1  文字與段落樣式 92

4.1.1  文字樣式 92

4.1.2  文字段落樣式 94

4.1.3  邊框 97

4.1.4  圖片和文字環繞 98

4.2  掌握CSS定位 100

4.2.1  網頁組件的定位 100

4.2.2  立體網頁的定位 104

4.2.3  好用的calc()函數 106

第5章  CSS flexbox響應式排版 108

5.1  flexbox模型概念 108

5.1.1  認識CSS盒模型 108

5.1.2  認識flexbox 112

5.2  flexbox屬性 114

5.2.1  flex container屬性 114

5.2.2  flex items屬性 122

第6章  善用網絡資源 133

6.1  圖庫素材分享平臺 133

6.1.1  認識CC授權 133

6.1.2  搜索CC授權素材 135

6.1.3  Iconfinder-icon圖庫 137

6.1.4  替網站加入Logo圖標 139

6.2  實用的網頁應用生成器 141

6.2.1  CSS Layout生成器 141

6.2.2  按鈕生成器 146

6.2.3  網站配色 153

第7章  整合練習——詩詞展示網頁的設計與實現 159

7.1  網頁結構說明 159

7.1.1  網頁結構圖 159

7.1.2  選擇合適的HTML標簽 161

7.2  編寫HTML與CSS程序代碼 162

7.2.1  編寫網頁結構的HTML語句 162

7.2.2  加入超鏈接 164

7.2.3  加入CSS語法 165

7.2.4  添加偽元素 172

7.2.5  使用圖標字體生成社交媒體的圖標 173

第二部分   JavaScript語言

第8章  JavaScript基礎 182

8.1  認識JavaScript 182

8.1.1  JavaScript基本概念 182

8.1.2  JavaScript運行環境 184

8.1.3  瀏覽器控制台 184

8.1.4  JavaScript程序結構 189

8.2  JavaScript基礎語法 192

8.2.1  JavaScript語法架構 192

8.2.2  JavaScript註釋符號 195

8.2.3  數據類型 196

8.3  變量聲明與作用域 201

8.3.1  全局變量與局部變量 201

8.3.2  使用var關鍵字聲明變量 202

8.3.3  使用var聲明的變量的作用域 203

8.3.4  使用let關鍵字聲明變量 205

8.3.5  使用const關鍵字聲明常數 206

8.3.6  變量名稱的限制 206

第9章  函數與作用域 210

9.1  自定義函數 210

9.1.1  函數的定義與調用 210

9.1.2  函數參數 211

9.1.3  函數返回值 213

9.2  函數的多種用法 214

9.2.1  函數聲明 215

9.2.2  函數表達式 216

9.2.3  對象與this關鍵字 218

9.2.4  即調函數 222

 

第10章  JavaScript操控DOM元素 225

10.1  DOM對象的方法與屬性 225

10.1.1  獲取對象信息 225

10.1.2  處理對象節點 227

10.1.3  屬性的讀取與設置 229

10.2  DOM對象的操作 230

10.2.1  window對象 230

10.2.2  DOM集合 231

10.3  DOM風格樣式 233

10.3.1  查詢元素樣式 233

10.3.2  設置組件樣式 235

第11章  前端數據存儲 237

11.1  認識Web Storage 237

11.1.1  Web Storage的概念 237

11.1.2  檢測瀏覽器是否支持Web storage 238

11.2  localStorage和SessionStorage 238

11.2.1  存取localStorage 238

11.2.2  刪除localStorage 242

11.2.3  存取sessionStorage 244

11.3  IndexedDB數據庫 245

11.3.1  IndexedDB的重要概念 245

11.3.2  IndexedDB的基本操作 246

11.3.3  讀取數據 254

11.3.4  刪除數據 256

11.3.5  清空數據 256

第12章  整合練習——個人通訊錄的實現 257

12.1  網頁架構說明 257

12.1.1  網頁功能架構圖及線框圖 257

12.1.2  CSS Sprites 258

12.2  IndexedDB的CURD 263

12.2.1  創建數據庫、存儲對象以及啟動事務處理 263

12.2.2  設置事件的處理函數 265

12.2.3  添加聯絡人與添加完成 265

12.2.4  動態產生數據列表 268

12.2.5  修改與刪除聯絡人 270

12.2.6  清空數據與刪除數據庫 273

12.2.7  阻止事件傳遞與默認行為 275

第三部分   善用前端框架

第13章  響應式網頁框架——Bootstrap 280

13.1  認識Bootstrap 280

13.1.1  為什麽要使用Bootstrap 280

13.1.2  下載Bootstrap 281

13.1.3  RWD的設計理念 283

13.2  Bootstrap排版 284

13.2.1  斷點與容器 284

13.2.2  瞭解網格系統 287

13.2.3  視口與媒體查詢 291

13.3  Bootstrap的樣式 293

13.3.1  Bootstrap通用顏色 293

13.3.2  Bootstrap間距 294

13.3.3  Bootstrap寬度與高度 298

13.3.4  Bootstrap文字 299

13.4  圖片與表格 302

13.4.1  響應式圖片 302

13.4.2  邊框圓角 304

13.4.3  建立Bootstrap表格 306

第14章  Bootstrap擴展組件庫 310

14.1  導航與菜單 310

14.1.1  導航欄 310

14.1.2  折疊組件 311

14.1.3  項目列表 314

14.2  表單與按鈕 317

14.2.1  表單控制組件 317

14.2.2  表單佈局 318

14.3  輪播組件Carousel 320

14.3.1  基本的輪播效果 321

14.3.2  利用JavaScript控制輪播 326

第15章  PWA實現——“我的記賬本”Web APP 329

15.1  實現“我的記賬本”網頁 329

15.1.1  “我的記賬本”網頁功能與界面 329

15.1.2  下拉菜單 331

15.1.3  按鈕組 334

15.1.4  互動窗口 334

15.1.5  indexedDB關鍵字查詢 336

15.1.6  善用Bootstrap Icons製作小圖標 337

15.2  將網頁轉換成PWA 341

15.2.1  什麽是PWA 342

15.2.2  製作各種尺寸的APP圖標 343

15.2.3  將網頁變成PWA 344