Web前端開發案例教程（HTML5+CSS3）（微課版）（第2版）
李誌雲 董文華
商品描述
本書主要以未來信息學院網站為載體，介紹如何利用最新Web前端開發技術HTML5和CSS3等制作靜態網站。全書共劃分為12個任務，將未來信息學院網站項目拆分為前10個任務，每個任務實現一個相對獨立的功能；任務11在學習前面任務的基礎上，按照真實網站開發流程，完成未來信息學院網站整體的設計與實現；任務12完成化妝品公司網站的設計與實現，該網站充分利用CSS3的過渡、變形等屬性實現圖片的變換和旋轉等效果，拓寬網站開發的思路。
本書可以作為高職高專院校計算機相關專業“Web前端開發”課程的教材，也可以作為Web前端開發愛好者的學習參考書。
作者簡介
李誌雲，副教授，山東信息職業技術學院教師，主編《數據庫開發實用教程—基於Visual Basic》《Visual c#2005數據庫開發案例教程》《網頁設計與制作案例教程（HTML+CSS+DIV+JavaScript）》等教材，發表論文20余篇。
目錄大綱
任務1 創建第一個HTML5網頁 1
1.1 任務描述 1
1.2 知識準備 1
1.2.1 認識Web前端開發 1
1.2.2 Web相關概念 2
1.2.3 HTML5概述 4
1.2.4 常用的瀏覽器 4
1.2.5 網頁編輯軟件 5
1.3 任務實現 5
任務小結 8
習題1 8
實訓1 9
擴展閱讀 9
任務2 搭建簡單學院網站 11
2.1 任務描述 11
2.2 知識準備 12
2.2.1 HTML5文檔的基本結構 12
2.2.2 HTML標記及其屬性 13
2.2.3 HTML文本標記 14
2.2.4 HTML列表標記 19
2.2.5 HTML超鏈接標記 24
2.2.6 HTML圖像標記 27
2.3 任務實現 30
2.3.1 創建項目 30
2.3.2 創建網站首頁 30
2.3.3 創建學院簡介頁面 31
2.3.4 創建學院新聞頁面 32
2.3.5 創建新聞詳情頁面 33
任務小結 34
習題2 35
實訓2 37
擴展閱讀 38
任務3 美化簡單學院網站 39
3.1 任務描述 39
3.2 知識準備 40
3.2.1 什麼是CSS 40
3.2.2 引入CSS樣式 40
3.2.3 CSS常用選擇器 44
3.2.4 CSS常用文本屬性 50
3.2.5 CSS的高級特性 55
3.3 任務實現 58
3.3.1 美化網站首頁 58
3.3.2 美化學院簡介頁面 59
3.3.3 美化學院新聞頁面 61
3.3.4 美化新聞詳情頁面 62
任務小結 64
習題3 65
實訓3 66
擴展閱讀 67
任務4 制作學院介紹頁面 68
4.1 任務描述 68
4.2 知識準備 69
4.2.1 盒子模型的概念 69
4.2.2 盒子模型的相關屬性 70
4.2.3 背景屬性 77
4.3 任務實現 86
4.3.1 搭建學院介紹頁面結構 86
4.3.2 定義學院介紹頁面CSS樣式 87
任務小結 88
習題4 89
實訓4 90
擴展閱讀 91
任務5 制作學院網站導航條 92
5.1 任務描述 92
5.2 知識準備 93
5.2.1 無序列表樣式設置 93
5.2.2 超鏈接樣式設置 94
5.2.3 元素的類型與轉換 96
5.3 任務實現 99
5.3.1 搭建學院網站導航條結構 99
5.3.2 定義學院網站導航條CSS樣式 101
任務小結 103
習題5 103
實訓5 104
擴展閱讀 105
任務6 制作學院新聞塊 106
6.1 任務描述 106
6.2 知識準備 107
6.2.1 元素的浮動 107
6.2.2 元素的定位 110
6.2.3 塊元素間的外邊距 115
6.3 任務實現 122
6.3.1 搭建學院新聞塊頁面結構 122
6.3.2 定義學院新聞塊CSS樣式 124
任務小結 126
習題6 127
實訓6 128
擴展閱讀 129
任務7 制作學生信息表 130
7.1 任務描述 130
7.2 知識準備 130
7.2.1 表格標記 131
7.2.2 合並單元格 132
7.2.3 使用CSS定義表格樣式 134
7.3 任務實現 136
7.3.1 搭建學生信息表結構 136
7.3.2 定義學生信息表CSS樣式 138
任務小結 139
習題7 140
實訓7 140
擴展閱讀 141
任務8
制作學生信息註冊表單 142
8.1 任務描述 142
8.2 知識準備 143
8.2.1 認識表單 143
8.2.2 表單標記 143
8.2.3 表單控件 144
8.2.4 使用CSS定義表單樣式 150
8.3 任務實現 152
8.3.1 搭建學生信息註冊表單頁面結構 152
8.3.2 使用CSS定義學生信息註冊表單頁面樣式 155
任務小結 156
習題8 158
實訓8 159
擴展閱讀 160
任務9 布局學院網站主頁 161
9.1 任務描述 161
9.2 知識準備 161
9.2.1 HTML5新增結構標記 162
9.2.2 HTML5+CSS3布局 167
9.3 任務實現 174
9.3.1 搭建布局塊結構 174
9.3.2 定義布局塊CSS樣式 176
任務小結 179
習題9 179
實訓9 180
擴展閱讀 180
任務10 使用CSS3實現動畫效果 182
10.1 任務描述 182
10.2 知識準備 183
10.2.1 過渡屬性 183
10.2.2 變形屬性 188
10.2.3 動畫屬性 198
10.3 任務實現 203
10.3.1 搭建照片墻頁面結構 203
10.3.2 定義照片墻頁面CSS樣式 204
任務小結 206
習題10 206
實訓10 207
擴展閱讀 209
任務11 完整項目：制作學院網站 210
11.1 任務描述 210
11.2 網站規劃 211
11.3 效果圖設計 212
11.3.1 效果圖設計原則 212
11.3.2 效果圖設計步驟 213
11.3.3 效果圖切片導出網頁 218
11.4 制作網站主頁 218
11.5 制作新聞列表頁 237
11.6 制作新聞詳情頁 243
11.7 制作視頻宣傳頁 245
11.8 添加網頁動態效果 246
任務小結 247
擴展閱讀 247
任務12 完整項目：制作化妝品網站 249
12.1 任務描述 249
12.2 網站規劃 250
12.2.1 網站需求分析 250
12.2.2 網站的風格定位 251
12.2.3 規劃草圖 251
12.2.4 素材準備 251
12.3 制作網站主頁 252
12.4 制作網站登錄頁面 267
12.5 制作網站註冊頁面 270
任務小結 273
擴展閱讀 273
參考文獻 276
