《HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐》是清華大學出版社出版的圖書。
出版信息,內容簡介,作者,目錄,
出版信息
HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐
作者:陳婉凌
定價:89元
印次:1-1
ISBN:9787302648765
出版日期:2023.12.01
印刷日期:2023.11.16
內容簡介
《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資料庫套用;
作者
陳婉凌,熱衷研究前端網頁技術的資深軟體工程師,具有多年職業教育教授計算機課程的經驗,專長HTML、CSS、JavaScript、jQuery、PHP,致力推廣前端技術AJAX和RWD(Responsive Web Design,回響式網頁設計),出版書籍融入自身多年教學經驗與職場實戰經驗,內容充實,難易度適中。著有《HTML5+CSS3+jQuery Mobile輕鬆構造APP與移動網站(第2版)》《HTML5+CSS3+JavaScript網頁設計》《JavaScript網頁程式設計與實踐》《jQuery+jQuery Mobile跨設備網頁設計》等
目錄
第一部分 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
