HTML+CSS+JavaScript+Bootstrap漸進式Web開發入門與實踐
陳婉凌
買這商品的人也買了...
-
$360$284 -
$352邁向 Angular 2:基於 TypeScript 的高性能 SPA 框架
-
$580$458 -
$505揭秘 Angular 2
-
$534$507 -
$352Angular 從零到一
-
$250移動 Web 應用開發教程 — HTML5 + JavaScript 框架全棧 App 開發
-
$301Angular 開發實戰
-
$564Visual Studio Code 權威指南
-
$714$678 -
$551$518 -
$296Web 編程基礎 (HTML+CSS) 項目實戰教程
-
$620$489 -
$650$514 -
$594$564 -
$458大模型應用開發 動手做AI Agent(簽名版)
-
$1,015大話軟件工程案例篇——項目與產品開發實戰
-
$390$371
商品描述
《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