網頁設計與製作

Web前端工程師是互聯網時代Web產品研發中不可缺少的專業角色。本書從Web開發實際應用的角度，以任務項目開發為主線，把HTML5、CSS3的Web前端開發理論知識、實戰技能融入8個任務，引導讀者從HTML5設置網頁內容、CSS定義樣式美化網頁佈局等基礎任務開始，逐步掌握圖文網頁、表單交互網頁、音視頻媒體網頁、動畫特效網頁、瀑布流佈局網頁等頁面開發，並在熟練編程的基礎上，理解自適應網頁設計和響應式網頁設計關鍵技術，掌握響應式網頁的設計與開發。本書配以思維導圖幫助讀者梳理知識點，將知識點融入到Web前端開發實際崗位案例中，有效掌握核心技巧，力求提高讀者的Web網頁開發水平。本書既可作為高等職業院校計算機及相關專業Web前端設計與開發課程的教材，也可供從事網頁設計與製作、網頁編程、Web應用開發等行業人員參考閲讀。 ^[1] 

任務1　創建第一個網頁 1

1.1　基本條件和概念 3

1.1.1　學習工具 3

1.1.2　基本概念 3

1.1.3　任務：建站點建網頁 6

1.2　格式排版標籤 9

1.2.1　段落標籤與換行標籤 9

1.2.2　標題標籤 10

1.2.3　水平線標籤 10

1.2.4　無語義標籤 11

1.2.5　文本標籤 11

1.3　列表標籤 13

1.3.1　有序列表 14

1.3.2　無序列表 15

1.3.3　自定義列表 17

1.3.4　嵌套列表 18

1.4　圖像 20

1.5　超鏈接 24

1.5.1　超鏈接的屬性 24

1.5.2　郵箱鏈接 26

1.5.3　錨點鏈接 27

1.6　表格 28

1.7　任務實施 32

任務2　用CSS美化你的網頁 36

2.1　CSS概念 37

2.2　CSS的使用方法 37

2.3　CSS聲明與應用 39

2.3.1　CSS格式 39

2.3.2　CSS註釋 39

2.3.3　CSS單位 39

2.3.4　CSS顏色 39

2.3.5　選擇器 40

2.4　CSS常見屬性 48

2.4.1　CSS字體 48

2.4.2　CSS文本 56

2.4.3　CSS盒子模型 66

2.4.4　CSS邊框 72

2.4.5　CSS鏈接 81

2.4.6　CSS列表 83

2.4.7　CSS背景 92

2.4.8　CSS浮動 112

2.4.9　CSS定位 124

2.5　任務實施 129

任務3　規整網頁佈局 134

3.1　佈局方式 135

3.2　固定佈局 136

3.3　單列布局 136

3.3.1　等寬單列布局 136

3.3.2　非等寬單列布局 139

3.4　兩列布局 141

3.4.1　浮動方式實現兩列布局 141

3.4.2　position實現兩列布局 142

3.5　三列布局 143

3.5.1　聖盃佈局 143

3.5.2　雙飛翼佈局 147

3.6　嵌套混合佈局 149

3.7　任務實施 150

3.7.1　整體佈局 151

3.7.2　第二層佈局 153

3.7.3　第三層佈局 154

3.7.4　各模塊內容設計 155

任務4　通過表單與用户交互 164

4.1　認識表單 165

4.1.1　表單域 166

4.1.2　表單元素 168

4.1.3　HTML5新增表單類型與屬性 172

4.1.4　表單驗證 177

4.2　任務實施 179

任務5　應用媒體標籤製作個性化播放器 189

5.1　HTML5音頻標籤 190

5.2　HTML5視頻標籤 192

5.3　HTML5音視頻標籤使用中的“坑” 193

5.4　音視頻標籤的DOM操作 194

5.5　任務實施 198

任務6　製作活動抽獎大轉盤 206

6.1　CSS座標系統與角度單位 207

6.2　transform屬性 209

6.3　transition屬性 223

6.4　animation屬性 228

6.5　@keyframes屬性 230

6.6　任務實施 233

任務7　純CSS實現瀑布流佈局 240

7.1　多列布局實現瀑布流網頁佈局 241

7.1.1　多列布局知識圖譜 241

7.1.2　多列布局前導知識 241

7.1.3　任務實施 245

7.2　彈性佈局實現瀑布流佈局 249

7.2.1　彈性佈局知識圖譜 249

7.2.2　彈性佈局前導知識 250

7.2.3　容器屬性 251

7.2.4　項目屬性 254

7.2.5　利用彈性佈局設計微信底部導航欄 257

7.2.6　任務實施 264

7.3　網格佈局實現瀑布流佈局 265

7.3.1　網格佈局知識圖譜 265

7.3.2　網格佈局前導知識 266

7.3.3　任務實施 277

任務8　響應式網頁開發 280

8.1　前導知識 281

8.1.1　設備屏幕 281

8.1.2　關於視口 284

8.1.3　媒體查詢技術 287

8.1.4　響應式圖片技術 290

8.1.5　流式佈局 293

8.2　響應式框架製作旅遊網頁 299

8.2.1　安裝Bootstrap 300

8.2.2　組件 302

8.2.3　佈局 308 ^[1]