內容簡介
面向職業院校和套用型本科院校開展1+X證書制度試點工作是落實《
國家職業教育改革實施方案》的重要內容之一,為了便於X證書標準融入院校學歷教育,
工業和信息化部教育與考試中心組織編寫了《Web前端開發(中級)》教材。本教材以《Web前端開發職業技能等級標準》(中級)為編寫依據,分上、下兩冊,包括深入淺出MySQL資料庫、PHP技術與套用、Web前後端數據互動技術、回響式開發技術、網站項目實戰五篇,分別對應《Web前端開發職業技能等級標準》(中級)涉及的五門核心課程:“MySQL資料庫基礎與套用”“PHP技術與套用”“Web前後端數據互動技術”“回響式開發技術”“網站項目實戰”。本教材以模組化的結構組織各篇及其章節,以任務驅動的方式安排教材內容,選取動態網站開發能力和回響式網站開發的典型套用作為教學案例。本教材可用於1+X證書制度試點工作中的Web前端開發職業技能等級證書的教學和培訓,也可以作為期望從事Web前端開發職業的應屆畢業生和社會在職人員的自學參考用書。
目錄
第三篇 Web前後端數據互動技術
第19章 Web數據互動技術概述 2
19.1 Web的概念 2
19.2 Web數據互動技術 3
19.2.1 AJAX 3
19.2.2 iframe 4
19.2.3 WebSocket 4
19.3 本章小結 4
第20章 HTTP概述 5
20.1 HTTP簡介 5
20.1.1 HTTP的概念 5
20.1.2 HTTP的訊息結構 6
20.1.3 HTTP的主要特點 7
20.2 HTTP的通信過程 7
20.3 HTTP狀態碼匯總 11
20.3.1 狀態碼200 11
20.3.2 狀態碼301 11
20.3.3 狀態碼302 12
20.3.4 狀態碼304 13
20.3.5 狀態碼403 13
20.3.6 狀態碼404 15
20.3.7 狀態碼500 15
20.4 本章小結 16
第21章 AJAX與iframe 17
21.1 AJAX異步通信 17
21.1.1 AJAX簡介 17
21.1.2 AJAX的工作原理 18
21.2 iframe異步通信 18
21.2.1 iframe簡介 18
21.2.2 使用JavaScript操作
iframe 19
21.2.3 使用jQuery操作iframe 20
21.3 套用實例 22
21.3.1 AJAX套用實例 22
21.3.2 iframe套用實例 24
21.4 本章小結 26
第22章 頁面性能最佳化技術 28
22.1 Cookie的創建、使用和銷毀 28
22.1.1 創建Cookie 28
22.1.2 使用Cookie 30
22.1.3 銷毀Cookie 30
22.2 頁面性能最佳化 32
22.2.2 靜態資源與動態資源分離 32
22.3 本章小結 32
第23章 Socket通信 34
23.1 Socket通信簡介 34
23.1.1 Socket通信的概念 34
23.1.2 Socket通信的機制 35
23.1.3 Socket通信的過程 36
23.2 使用Socket實現聊天室功能 36
23.2.1 使用PHP實現Socket
服務端 36
23.2.2 使用jQuery實現Socket
客戶端 39
23.2.3 測試聊天室功能 41
23.3 本章小結 43
第四篇 回響式開發技術
第24章 Bootstrap概述 46
24.1 Bootstrap簡介 46
24.2 Bootstrap的特性 47
24.2.1 Bootstrap的構成 47
24.2.2 Bootstrap的功能 47
24.3 Bootstrap的套用瀏覽 47
24.4 Bootstrap的開發工具 48
24.5 Bootstrap的安裝和配置 49
24.5.1 Bootstrap的下載和配置 49
24.5.2 Bootstrap的檔案結構 50
24.6 本章小結 51
第25章 Bootstrap的基本架構 53
25.1 回響式開發技術 53
25.1.1 回響式開發的概念 53
25.1.2 回響式開發的流程 54
25.1.3 回響式布局結構 54
25.1.4 設計回響式網站 55
25.2 Bootstrap的柵格布局 56
25.2.1 柵格布局簡介 56
25.2.2 Bootstrap的終端設備類型 56
25.2.3 Bootstrap的柵格基本布局 57
25.2.4 Bootstrap的柵格水平布局
和垂直布局 61
25.2.5 Bootstrap的柵格排序和
偏移 65
25.3 本章小結 67
第26章 Bootstrap的樣式 68
26.1 Bootstrap的作用 68
26.2 媒體對象 68
26.3 文本 75
26.4 列表 78
26.5 表格 80
26.6 圖片 84
26.7 表單 85
26.7.1 基礎表單 85
26.7.2 行內表單 87
26.7.3 水平表單 88
26.7.4 表單大小 89
26.8 輔助樣式 90
26.8.1 背景色 91
26.8.2 文本顏色 91
26.9 本章小結 92
第27章 Bootstrap的組件 93
27.1 按鈕 94
27.1.1 按鈕大小 95
27.1.2 按鈕狀態 95
27.2 下拉選單 96
27.2.1 創建下拉選單 97
27.2.2 分裂式下拉選單 99
27.2.3 上拉選單 100
27.2.4 其他下拉選單 101
27.3 按鈕組 102
27.3.1 工具列 103
27.3.2 兩端對齊的按鈕組 104
27.3.3 按鈕組的嵌套 105
27.4 輸入框組 106
27.5 導航 108
27.5.1 定義導航 108
27.5.2 兩端對齊導航 109
27.5.3 嵌套下拉選單 110
27.5.4 導航欄 111
27.5.5 導航欄的文字/圖示 112
27.5.6 導航欄其他組件 113
27.5.7 設定導航欄的位置 114
27.5.8 回響式導航欄 115
27.5.9 分頁導航 117
27.5.10 翻頁導航 118
27.5.11 麵包屑導航 119
27.6 標籤 120
27.7 徽章 120
27.8 縮略圖 122
27.9 警告框 123
27.10 進度條 124
27.11 版式 126
27.11.1 巨幕區塊 126
27.11.2 頁面標題 126
27.11.3 列表組 127
27.11.4 面板 128
27.11.5 Well容器 129
27.12 字型圖示 130
27.13 本章小結 131
第28章 Sass概述 132
28.1 Sass的概念 132
28.2 Sass的安裝 133
28.3 Sass的配置 135
28.4 Sass的基礎語法 136
28.4.1 變數 136
28.4.2 嵌套CSS規則 137
28.4.3 混合指令 138
28.4.4 運算 141
28.4.5 條件判斷和循環 144
28.4.6 數組 147
28.4.7 導入Sass檔案 148
28.4.8 注釋 149
28.4.9 選擇器繼承 149
28.5 本章小結 149
第29章 Bootstrap回響式開發案例 150
29.1 Bootstrap項目的搭建 150
29.2 頁面初始化 152
29.3 後台模板布局 153
29.4 項目首頁 160
29.5 用戶中心和提醒事項 164
29.6 數據查詢和數據面板 169
29.7 動畫效果 174
29.8 本章小結 176
第五篇 網站項目實戰
第30章 CMS開發 178
30.1 CMS概述 178
30.2 CMS的內容 179
30.3 搭建Laravel框架 179
30.4 本章小結 179
第31章 CMS基礎頁面 180
31.1 CMS基礎頁面概述 180
31.2 後台登錄頁 180
31.2.1 創建資料庫表及寫入
記錄 181
31.2.2 配置後台登錄的表單
頁面 182
31.2.3 處理表單數據 182
31.3 後台首頁 184
31.4 訪問許可權控制 186
31.5 本章小結 188
第32章 模型管理實戰 189
32.1 模型管理概述 189
32.2 模型創建 190
32.3 模型列表 196
32.4 模型修改 198
32.5 模型刪除 202
32.6 本章小結 206
第33章 欄目管理實戰 207
33.1 欄目管理概述 207
33.2 欄目添加 208
33.3 欄目列表查看 213
33.4 欄目修改 216
33.5 欄目刪除 217
33.6 本章小結 219
第34章 內容管理實戰 220
34.1 內容管理概述 220
34.2 內容添加 221
34.3 內容保存 225
34.4 內容呈現 228
34.5 內容修改 231
34.6 內容刪除 236
34.7 本章小結 238
第35章 廣告管理實戰 239
35.1 廣告管理概述 239
35.2 廣告位管理 240
35.2.1 廣告位添加 240
35.2.2 廣告位列表查看 245
35.2.3 廣告位修改 246
35.2.4 廣告位刪除 248
35.3 廣告內容管理 249
35.3.1 廣告內容表單添加 249
35.3.2 廣告內容圖片呈現 255
35.3.3 廣告內容列表查看 258
35.3.4 廣告內容修改 260
35.3.5 廣告內容刪除 262
35.4 本章小結 263
第36章 CMS前台頁面呈現實戰 264
36.1 CMS前台頁面概述 265
36.2 註冊服務和門面 265
36.3 前台首頁和導航 267
36.3.1 前台首頁 267
36.3.2 導航 270
36.4 文章頁面 273
36.4.1 新聞列表頁 273
36.4.2 新聞詳情頁 280
36.5 產品頁面 284
36.5.1 產品列表頁 284
36.5.2 產品詳情頁 287
36.6 其他頁面 290
36.6.1 “關於我們”和“聯繫
我們” 291
36.6.2 首頁廣告 294
36.6.3 首頁內容 296
36.7 本章小結 300
第37章 資料庫備份與恢復實戰 301
37.1 資料庫備份與恢復概述 301
37.2 資料庫備份 301
37.4 本章小結 306
第38章 靜態資源管理實戰 307
38.1 靜態資源管理概述 307
38.2 靜態資源列表展示 308
38.3 靜態資源上傳 311
38.4 靜態資源刪除 312
38.5 本章小結 314,第三篇 Web前後端數據互動技術
第19章 Web數據互動技術概述 2
19.1 Web的概念 2
19.2 Web數據互動技術 3
19.2.1 AJAX 3
19.2.2 iframe 4
19.2.3 WebSocket 4
19.3 本章小結 4
第20章 HTTP概述 5
20.1 HTTP簡介 5
20.1.1 HTTP的概念 5
20.1.2 HTTP的訊息結構 6
20.1.3 HTTP的主要特點 7
20.2 HTTP的通信過程 7
20.3 HTTP狀態碼匯總 11
20.3.1 狀態碼200 11
20.3.2 狀態碼301 11
20.3.3 狀態碼302 12
20.3.4 狀態碼304 13
20.3.5 狀態碼403 13
20.3.6 狀態碼404 15
20.3.7 狀態碼500 15
20.4 本章小結 16
第21章 AJAX與iframe 17
21.1 AJAX異步通信 17
21.1.1 AJAX簡介 17
21.1.2 AJAX的工作原理 18
21.2 iframe異步通信 18
21.2.1 iframe簡介 18
21.2.2 使用JavaScript操作
iframe 19
21.2.3 使用jQuery操作iframe 20
21.3 套用實例 22
21.3.1 AJAX套用實例 22
21.3.2 iframe套用實例 24
21.4 本章小結 26
第22章 頁面性能最佳化技術 28
22.1 Cookie的創建、使用和銷毀 28
22.1.1 創建Cookie 28
22.1.2 使用Cookie 30
22.1.3 銷毀Cookie 30
22.2 頁面性能最佳化 32
22.2.2 靜態資源與動態資源分離 32
22.3 本章小結 32
第23章 Socket通信 34
23.1 Socket通信簡介 34
23.1.1 Socket通信的概念 34
23.1.2 Socket通信的機制 35
23.1.3 Socket通信的過程 36
23.2 使用Socket實現聊天室功能 36
23.2.1 使用PHP實現Socket
服務端 36
23.2.2 使用jQuery實現Socket
客戶端 39
23.2.3 測試聊天室功能 41
23.3 本章小結 43
第四篇 回響式開發技術
第24章 Bootstrap概述 46
24.1 Bootstrap簡介 46
24.2 Bootstrap的特性 47
24.2.1 Bootstrap的構成 47
24.2.2 Bootstrap的功能 47
24.3 Bootstrap的套用瀏覽 47
24.4 Bootstrap的開發工具 48
24.5 Bootstrap的安裝和配置 49
24.5.1 Bootstrap的下載和配置 49
24.5.2 Bootstrap的檔案結構 50
24.6 本章小結 51
第25章 Bootstrap的基本架構 53
25.1 回響式開發技術 53
25.1.1 回響式開發的概念 53
25.1.2 回響式開發的流程 54
25.1.3 回響式布局結構 54
25.1.4 設計回響式網站 55
25.2 Bootstrap的柵格布局 56
25.2.1 柵格布局簡介 56
25.2.2 Bootstrap的終端設備類型 56
25.2.3 Bootstrap的柵格基本布局 57
25.2.4 Bootstrap的柵格水平布局
和垂直布局 61
25.2.5 Bootstrap的柵格排序和
偏移 65
25.3 本章小結 67
第26章 Bootstrap的樣式 68
26.1 Bootstrap的作用 68
26.2 媒體對象 68
26.3 文本 75
26.4 列表 78
26.5 表格 80
26.6 圖片 84
26.7 表單 85
26.7.1 基礎表單 85
26.7.2 行內表單 87
26.7.3 水平表單 88
26.7.4 表單大小 89
26.8 輔助樣式 90
26.8.1 背景色 91
26.8.2 文本顏色 91
26.9 本章小結 92
第27章 Bootstrap的組件 93
27.1 按鈕 94
27.1.1 按鈕大小 95
27.1.2 按鈕狀態 95
27.2 下拉選單 96
27.2.1 創建下拉選單 97
27.2.2 分裂式下拉選單 99
27.2.3 上拉選單 100
27.2.4 其他下拉選單 101
27.3 按鈕組 102
27.3.1 工具列 103
27.3.2 兩端對齊的按鈕組 104
27.3.3 按鈕組的嵌套 105
27.4 輸入框組 106
27.5 導航 108
27.5.1 定義導航 108
27.5.2 兩端對齊導航 109
27.5.3 嵌套下拉選單 110
27.5.4 導航欄 111
27.5.5 導航欄的文字/圖示 112
27.5.6 導航欄其他組件 113
27.5.7 設定導航欄的位置 114
27.5.8 回響式導航欄 115
27.5.9 分頁導航 117
27.5.10 翻頁導航 118
27.5.11 麵包屑導航 119
27.6 標籤 120
27.7 徽章 120
27.8 縮略圖 122
27.9 警告框 123
27.10 進度條 124
27.11 版式 126
27.11.1 巨幕區塊 126
27.11.2 頁面標題 126
27.11.3 列表組 127
27.11.4 面板 128
27.11.5 Well容器 129
27.12 字型圖示 130
27.13 本章小結 131
第28章 Sass概述 132
28.1 Sass的概念 132
28.2 Sass的安裝 133
28.3 Sass的配置 135
28.4 Sass的基礎語法 136
28.4.1 變數 136
28.4.2 嵌套CSS規則 137
28.4.3 混合指令 138
28.4.4 運算 141
28.4.5 條件判斷和循環 144
28.4.6 數組 147
28.4.7 導入Sass檔案 148
28.4.8 注釋 149
28.4.9 選擇器繼承 149
28.5 本章小結 149
第29章 Bootstrap回響式開發案例 150
29.1 Bootstrap項目的搭建 150
29.2 頁面初始化 152
29.3 後台模板布局 153
29.4 項目首頁 160
29.5 用戶中心和提醒事項 164
29.6 數據查詢和數據面板 169
29.7 動畫效果 174
29.8 本章小結 176
第五篇 網站項目實戰
第30章 CMS開發 178
30.1 CMS概述 178
30.2 CMS的內容 179
30.3 搭建Laravel框架 179
30.4 本章小結 179
第31章 CMS基礎頁面 180
31.1 CMS基礎頁面概述 180
31.2 後台登錄頁 180
31.2.1 創建資料庫表及寫入
記錄 181
31.2.2 配置後台登錄的表單
頁面 182
31.2.3 處理表單數據 182
31.3 後台首頁 184
31.4 訪問許可權控制 186
31.5 本章小結 188
第32章 模型管理實戰 189
32.1 模型管理概述 189
32.2 模型創建 190
32.3 模型列表 196
32.4 模型修改 198
32.5 模型刪除 202
32.6 本章小結 206
第33章 欄目管理實戰 207
33.1 欄目管理概述 207
33.2 欄目添加 208
33.3 欄目列表查看 213
33.4 欄目修改 216
33.5 欄目刪除 217
33.6 本章小結 219
第34章 內容管理實戰 220
34.1 內容管理概述 220
34.2 內容添加 221
34.3 內容保存 225
34.4 內容呈現 228
34.5 內容修改 231
34.6 內容刪除 236
34.7 本章小結 238
第35章 廣告管理實戰 239
35.1 廣告管理概述 239
35.2 廣告位管理 240
35.2.1 廣告位添加 240
35.2.2 廣告位列表查看 245
35.2.3 廣告位修改 246
35.2.4 廣告位刪除 248
35.3 廣告內容管理 249
35.3.1 廣告內容表單添加 249
35.3.2 廣告內容圖片呈現 255
35.3.3 廣告內容列表查看 258
35.3.4 廣告內容修改 260
35.3.5 廣告內容刪除 262
35.4 本章小結 263
第36章 CMS前台頁面呈現實戰 264
36.1 CMS前台頁面概述 265
36.2 註冊服務和門面 265
36.3 前台首頁和導航 267
36.3.1 前台首頁 267
36.3.2 導航 270
36.4 文章頁面 273
36.4.1 新聞列表頁 273
36.4.2 新聞詳情頁 280
36.5 產品頁面 284
36.5.1 產品列表頁 284
36.5.2 產品詳情頁 287
36.6 其他頁面 290
36.6.1 “關於我們”和“聯繫
我們” 291
36.6.2 首頁廣告 294
36.6.3 首頁內容 296
36.7 本章小結 300
第37章 資料庫備份與恢復實戰 301
37.1 資料庫備份與恢復概述 301
37.2 資料庫備份 301
37.4 本章小結 306
第38章 靜態資源管理實戰 307
38.1 靜態資源管理概述 307
38.2 靜態資源列表展示 308
38.3 靜態資源上傳 311
38.4 靜態資源刪除 312
38.5 本章小結 314