Web前端開發案例教程（HTML5+CSS3）（項目式微課版）
李志雲 董文華
商品描述
本書是“十三五”“十四五”職業教育國家規劃教材，是適切線上線下混合式教學而推出的新形態一體化教材。全書以企業開發的學校真實網站為載體，將學校網站項目拆分為10個任務，按照“任務描述→知識準備→任務實現→實訓”序化教材內容，採用項目貫穿、任務驅動的方式組織學習，通過任務實現學習HTML5語言、CSS3層疊樣式表、盒子模型、表格與表單、HTML5+CSS3佈局等網站開發技術。在關鍵知識點、任務實現及實訓中嵌入二維碼，供學生課前或課後觀看。
本書可以作為中職或高職院校電腦相關專業“Web前端開發”或“網頁設計”課程的教材，也可以作為Web前端開發愛好者的學習參考書。
作者簡介
李志云，工学硕士学位，副教授，研究方向为Web应用技术、数据库技术和高职教育研究；主持的“标准对接、项目引领、价值融入：《Web前端开发》教学内容和模式改革实践”获省级教学成果二等奖；山东省职业教育课程思政示范课程《Web前端开发》主持人；主编教材四部，其中两部获批“十四五”“十三五”职业教育国家规划教材，发表论文二十余篇。
目錄大綱
任務1 創建第一個HTML5網頁 1
1.1 任務描述 2
1.2 知識準備 2
1.2.1 認識Web前端開發 2
1.2.2 Web相關概念 2
1.2.3 HTML5概述 5
1.2.4 常用的瀏覽器 5
1.2.5 網頁編輯軟件 6
1.3 任務實現 6
任務小結 8
習題1 9
實訓1 10
擴展閱讀 10
任務2 搭建簡單學院網站 12
2.1 任務描述 13
2.2 知識準備 13
2.2.1 HTML5文檔的基本結構 14
2.2.2 HTML標記及其屬性 15
2.2.3 HTML文本標記 16
2.2.4 HTML列表標記 22
2.2.5 HTML超鏈接標記 26
2.2.6 HTML圖像標記 29
2.3 任務實現 32
2.3.1 創建網站目錄 32
2.3.2 創建網站首頁 32
2.3.3 創建學院簡介頁面 33
2.3.4 創建學院新聞頁面 33
2.3.5 創建新聞詳情頁面 34
任務小結 35
習題2 36
實訓2 37
擴展閱讀 38
任務3 美化簡單學院網站 40
3.1 任務描述 41
3.2 知識準備 41
3.2.1 什麽是CSS 41
3.2.2 引入CSS樣式 42
3.2.3 CSS常用選擇器 46
3.2.4 CSS常用文本屬性 52
3.2.5 CSS的高級特性 55
3.3 任務實現 58
3.3.1 美化網站首頁 58
3.3.2 美化學院簡介頁面 59
3.3.3 美化學院新聞頁面 60
3.3.4 美化新聞詳情頁面 61
任務小結 62
習題3 63
實訓3 64
擴展閱讀 65
任務4 製作學院介紹頁面 66
4.1 任務描述 67
4.2 知識準備 67
4.2.1 盒子模型的概念 67
4.2.2 盒子模型的相關屬性 69
4.2.3 背景屬性 74
4.2.4 不透明度屬性 80
4.3 任務實現 81
4.3.1 搭建學院介紹頁面結構 81
4.3.2 定義學院介紹頁面CSS樣式 82
任務小結 82
習題4 83
實訓4 85
擴展閱讀 85
任務5 製作學院網站導航條 87
5.1 任務描述 88
5.2 知識準備 88
5.2.1 無序列表樣式設置 88
5.2.2 超鏈接樣式設置 89
5.2.3 元素的類型與轉換 91
5.3 任務實現 94
5.3.1 搭建學院網站導航條結構 94
5.3.2 定義學院網站導航條CSS樣式 95
任務小結 96
習題5 96
實訓5 97
擴展閱讀 98
任務6 製作學院新聞塊 99
6.1 任務描述 100
6.2 知識準備 100
6.2.1 元素的浮動 100
6.2.2 塊元素間的外邊距 104
6.3 任務實現 109
6.3.1 搭建學院新聞塊頁面結構 109
6.3.2 定義學院新聞塊CSS樣式 110
任務小結 111
習題6 112
實訓6 112
擴展閱讀 113
任務7 製作學生信息表 115
7.1 任務描述 116
7.2 知識準備 116
7.2.1 表格標記 116
7.2.2 合並單元格 118
7.2.3 使用CSS定義表格樣式 119
7.3 任務實現 121
7.3.1 搭建學生信息表結構 121
7.3.2 定義學生信息表CSS樣式 123
任務小結 124
習題7 125
實訓7 125
擴展閱讀 126
任務8 製作學生問捲調查表單 127
8.1 任務描述 128
8.2 知識準備 128
8.2.1 認識表單 128
8.2.2 表單標記 129
8.2.3 表單控件 129
8.2.4 使用CSS定義表單樣式 133
8.3 任務實現 135
8.3.1 搭建學生問捲調查表單頁面結構 135
8.3.2 使用CSS定義學生問捲調查表單頁面樣式 137
任務小結 138
習題8 138
實訓8 140
擴展閱讀 140
任務9 製作學院風景牆頁面 141
9.1 任務描述 142
9.2 知識準備 142
9.2.1 過渡屬性 142
9.2.2 變形屬性 148
9.3 任務實現 151
9.3.1 搭建學院風景牆頁面結構 151
9.3.2 定義學院風景牆頁面CSS樣式 152
任務小結 153
習題9 154
實訓9 155
擴展閱讀 156
任務10 佈局學院網站主頁 157
10.1 任務描述 158
10.2 知識準備 158
10.2.1 單列佈局 158
10.2.2 二列佈局 160
10.2.3 三列佈局 162
10.2.4 通欄佈局 164
10.3 任務實現 164
10.3.1 搭建佈局塊結構 164
10.3.2 定義佈局塊CSS樣式 165
任務小結 168
習題10 169
實訓10 169
擴展閱讀 170
任務11 完整項目：製作學院網站 171
11.1 任務描述 172
11.2 網站規劃 172
11.3 效果圖設計 173
11.3.1 效果圖設計原則 173
11.3.2 效果圖設計步驟 173
11.3.3 效果圖切片導出素材 178
11.4 製作網站主頁 178
11.5 製作新聞列表頁 194
11.6 製作新聞詳情頁 199
11.7 製作視頻宣傳頁 200
任務小結 202
實訓11 202
擴展閱讀 203
參考文獻 204
