本書以一個完整的網上商城網站的前端頁面開發(fā)項目為載體，按照項目開發(fā)流程和學習者的認知規(guī)律，由淺入深、循序漸進地將HTML5、CSS3、JavaScript的理論知識和關鍵技術融入各個工作任務中。通過一個個具體任務的完成及最終整個項目的完整實現，讀者能夠快速掌握網站前端頁面開發(fā)相關的理論知識和職業(yè)技能，能夠獨立設計開發(fā)各種商業(yè)網站。
項目涉及的主要知識點和技能點包括：網站開發(fā)環(huán)境的選取和配置、常見標記和樣式屬性的使用、CSS和各種選擇器的使用、DIV CSS頁面布局的用法、網格布局和彈性盒布局的使用、各類導航菜單的制作、表格及表單用法、HTML5的視頻與音頻插入、JavaScript輪播圖的制作等。
本書既可作為高職高專院校或應用型本科院校相關專業(yè)網站設計與開發(fā)課程的教材或教學參考書，也可作為Web前端1 X職業(yè)技能等級證書考試的輔助用書，還可供廣大計算機從業(yè)者和愛好者學習和參考。

山東省職業(yè)教育精品資源共享課程配套教材
校企合作，以網上商城大項目貫穿全書
按照完整網站前端頁面的開發(fā)過程組織教學內容
課證融通，吸納Web前端開發(fā)工程師職業(yè)標準所要求的知識技能
立德樹人，自然融入思政元素

劉錫冬，教授，山東商業(yè)職業(yè)技術學院云計算技術與應用產業(yè)學院教師。多年來一直從事高職軟件技術專業(yè)課教學和研究工作，講授課程包括HTML5網站設計與開發(fā)、響應式網站開發(fā)、動態(tài)網站開發(fā)、Java程序設計、MySQL數據庫應用等。

項目1 認識網站和網頁 1
【情境導入】 1
任務1-1 網站設計與開發(fā)起步 1
【任務提出】 1
【學習目標】 1
【相關知識】 1
一、基本概念 2
二、網頁的標準化 3
三、瀏覽器的開發(fā)者工具 5
【項目實踐】 5
任務1-2 制作第 一個網頁 6
【任務提出】 6
【學習目標】 6
【相關知識】 6
一、常用HTML編輯器 6
二、創(chuàng)建古詩詞網頁 8
【項目實踐】 14
【小結】 16
【習題】 16
項目2 網頁的藍圖簡單布局 18
【情境導入】 18
任務2-1 使用CSS裝飾網頁 18
【任務提出】 18
【學習目標】 18
【相關知識】 19
一、DIV CSS網頁布局 19
二、CSS 19
【項目實踐】 25
任務2-2 巧用選擇器調兵遣將 25
【任務提出】 25
【學習目標】 25
【相關知識】 25
一、CSS選擇器 25
二、基本選擇器的用法 26
三、擴展選擇器的用法 29
【項目實踐】 32
任務2-3 使用盒模型劃分頁面 34
【任務提出】 34
【學習目標】 34
【相關知識】 34
一、HTML元素的分類和轉換 34
二、塊級元素的盒模型 36
三、盒子的占位 44
【項目實踐】 46
任務2-4 使用BFC隔離空間 47
【任務提出】 47
【學習目標】 48
【相關知識】 48
一、垂直外邊距的合并 48
二、BFC布局 49
【項目實踐】 51
【小結】 52
【習題】 52
項目3 網頁的藍圖復雜布局 56
【情境導入】 56
任務3-1 浮動布局兩欄式頁面 56
【任務提出】 56
【學習目標】 56
【相關知識】 57
一、認識浮動 57
二、元素的浮動屬性float 58
三、清除浮動 60
四、盒子的高度塌陷及解決方法 61
【項目實踐】 64
任務3-2 DIV CSS布局網上商城
首頁 66
【任務提出】 66
【學習目標】 66
【相關知識】 67
一、布局的準備工作 67
二、通欄多列式布局效果及實現 67
【項目實踐】 70
任務3-3 網格布局網上商城首頁 71
【任務提出】 71
【學習目標】 71
【相關知識】 72
一、認識CSS Grid網格布局 72
二、網格布局中對父元素的操作 73
三、網格布局中對子元素的操作 77
【項目實踐】 79
【小結】 80
【習題】 80
項目4 向網頁中插入圖像和文本 83
【情境導入】 83
任務4-1 網站首頁中圖像的應用 83
【任務提出】 83
【學習目標】 83
【相關知識】 83
一、插入圖像 84
二、CSS圖像樣式 85
【項目實踐】 91
任務4-2 網站首頁中文本的應用 92
【任務提出】 92
【學習目標】 92
【相關知識】 93
一、插入文本 93
二、CSS字體和文本樣式的應用 96
【項目實踐】 101
【小結】 104
【習題】 104
項目5 向網站首頁添加導航 106
【情境導入】 106
任務5-1 頁面中超鏈接的使用 106
【任務提出】 106
【學習目標】 106
【相關知識】 106
一、認識超鏈接 106
二、創(chuàng)建超鏈接 107
三、超鏈接的具體應用 108
【項目實踐】 111
任務5-2 一級導航菜單的設計
開發(fā) 112
【任務提出】 112
【學習目標】 112
【相關知識】 112
一、網站導航的樣式及設計方法 113
二、偽類控制超鏈接外觀 114
三、按鈕式導航菜單的制作 116
【項目實踐】 118
任務5-3 二級彈出式菜單的定位 121
【任務提出】 121
【學習目標】 122
【相關知識】 122
一、元素的定位 122
二、定位屬性 123
三、定位具體用法 123
【項目實踐】 129
【小結】 132
【習題】 132
項目6 網頁中列表的應用 135
【情境導入】 135
任務6-1 認識列表 135
【任務提出】 135
【學習目標】 135
【相關知識】 136
一、列表的分類 136
二、CSS控制列表樣式 139
三、列表的應用 142
【項目實踐】 145
任務6-2 使用列表制作多級導航 147
【任務提出】 147
【學習目標】 147
【相關知識】 148
一、列表的嵌套 148
二、多級導航菜單的制作 149
【項目實踐】 153
【小結】 155
【習題】 155
項目7 使用彈性盒布局二級導航菜單 157
【情境導入】 157
【任務提出】 157
【學習目標】 157
【相關知識】 158
一、認識彈性盒布局 158
二、彈性盒的內容 158
三、彈性盒的CSS樣式屬性 159
四、彈性子元素的屬性 165
五、彈性盒的應用 167
【項目實踐】 170
【小結】 172
【習題】 172
項目8 網頁中表格元素的應用 173
【情境導入】 173
【任務提出】 173
【學習目標】 173
【相關知識】 174
一、創(chuàng)建表格 174
二、CSS控制表格樣式 178
三、表格的應用 181
【項目實踐】 184
【小結】 186
【習題】 186
項目9 網頁中表單元素的應用 187
【情境導入】 187
【任務提出】 187
【學習目標】 187
【相關知識】 188
一、表單的組成 188
二、創(chuàng)建表單 188
三、表單控件 190
四、HTML5自帶表單驗證 197
五、表單樣式的應用 198
【項目實踐】 202
【小結】 203
【習題】 203
項目10 向網頁中插入視頻和音頻 205
【情境導入】 205
【任務提出】 205
【學習目標】 205
【相關知識】 206
一、Web上的視頻 206
二、Web上的音頻 210
【項目實踐】 212
【小結】 213
【習題】 213
項目11 網站首頁中的動態(tài)效果 214
【情境導入】 214
任務11-1 實現網站首頁的
輪播圖 214
【任務提出】 214
【學習目標】 214
【相關知識】 215
一、輪播圖原理分析 215
二、搭建基本界面 215
三、實現輪播效果 216
四、添加定時器自動輪播 220
【項目實踐】 223
任務11-2 實現圖片的滑動
輪播 224
【任務提出】 224
【學習目標】 224
【相關知識】 225
一、滑動輪播圖原理分析 225
二、搭建基本界面 225
三、輪播圖中JS腳本的應用 228
【項目實踐】 231
【小結】 234
【習題】 234