任務(wù)1 創(chuàng)建第一個(gè)HTML5網(wǎng)頁 1
1.1 任務(wù)描述 1
1.2 知識準(zhǔn)備 1
1.2.1 認(rèn)識Web前端開發(fā) 1
1.2.2 Web相關(guān)概念 2
1.2.3 HTML5概述 4
1.2.4 常用的瀏覽器 4
1.2.5 網(wǎng)頁編輯軟件 5
1.3 任務(wù)實(shí)現(xiàn) 5
任務(wù)小結(jié) 8
習(xí)題1 8
實(shí)訓(xùn)1 9
擴(kuò)展閱讀 9
任務(wù)2 搭建簡單學(xué)院網(wǎng)站 11
2.1 任務(wù)描述 11
2.2 知識準(zhǔn)備 12
2.2.1 HTML5文檔的基本結(jié)構(gòu) 12
2.2.2 HTML標(biāo)記及其屬性 13
2.2.3 HTML文本標(biāo)記 14
2.2.4 HTML列表標(biāo)記 19
2.2.5 HTML超鏈接標(biāo)記 24
2.2.6 HTML圖像標(biāo)記 27
2.3 任務(wù)實(shí)現(xiàn) 30
2.3.1 創(chuàng)建項(xiàng)目 30
2.3.2 創(chuàng)建網(wǎng)站首頁 30
2.3.3 創(chuàng)建學(xué)院簡介頁面 31
2.3.4 創(chuàng)建學(xué)院新聞頁面 32
2.3.5 創(chuàng)建新聞詳情頁面 33
任務(wù)小結(jié) 34
習(xí)題2 35
實(shí)訓(xùn)2 37
擴(kuò)展閱讀 38
任務(wù)3 美化簡單學(xué)院網(wǎng)站 39
3.1 任務(wù)描述 39
3.2 知識準(zhǔn)備 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 任務(wù)實(shí)現(xiàn) 58
3.3.1 美化網(wǎng)站首頁 58
3.3.2 美化學(xué)院簡介頁面 59
3.3.3 美化學(xué)院新聞頁面 61
3.3.4 美化新聞詳情頁面 62
任務(wù)小結(jié) 64
習(xí)題3 65
實(shí)訓(xùn)3 66
擴(kuò)展閱讀 67
任務(wù)4 制作學(xué)院介紹頁面 68
4.1 任務(wù)描述 68
4.2 知識準(zhǔn)備 69
4.2.1 盒子模型的概念 69
4.2.2 盒子模型的相關(guān)屬性 70
4.2.3 背景屬性 77
4.3 任務(wù)實(shí)現(xiàn) 86
4.3.1 搭建學(xué)院介紹頁面結(jié)構(gòu) 86
4.3.2 定義學(xué)院介紹頁面CSS樣式 87
任務(wù)小結(jié) 88
習(xí)題4 89
實(shí)訓(xùn)4 90
擴(kuò)展閱讀 91
任務(wù)5 制作學(xué)院網(wǎng)站導(dǎo)航條 92
5.1 任務(wù)描述 92
5.2 知識準(zhǔn)備 93
5.2.1 無序列表樣式設(shè)置 93
5.2.2 超鏈接樣式設(shè)置 94
5.2.3 元素的類型與轉(zhuǎn)換 96
5.3 任務(wù)實(shí)現(xiàn) 99
5.3.1 搭建學(xué)院網(wǎng)站導(dǎo)航條結(jié)構(gòu) 99
5.3.2 定義學(xué)院網(wǎng)站導(dǎo)航條CSS樣式 101
任務(wù)小結(jié) 103
習(xí)題5 103
實(shí)訓(xùn)5 104
擴(kuò)展閱讀 105
任務(wù)6 制作學(xué)院新聞塊 106
6.1 任務(wù)描述 106
6.2 知識準(zhǔn)備 107
6.2.1 元素的浮動 107
6.2.2 元素的定位 110
6.2.3 塊元素間的外邊距 115
6.3 任務(wù)實(shí)現(xiàn) 122
6.3.1 搭建學(xué)院新聞塊頁面結(jié)構(gòu) 122
6.3.2 定義學(xué)院新聞塊CSS樣式 124
任務(wù)小結(jié) 126
習(xí)題6 127
實(shí)訓(xùn)6 128
擴(kuò)展閱讀 129
任務(wù)7 制作學(xué)生信息表 130
7.1 任務(wù)描述 130
7.2 知識準(zhǔn)備 130
7.2.1 表格標(biāo)記 131
7.2.2 合并單元格 132
7.2.3 使用CSS定義表格樣式 134
7.3 任務(wù)實(shí)現(xiàn) 136
7.3.1 搭建學(xué)生信息表結(jié)構(gòu) 136
7.3.2 定義學(xué)生信息表CSS樣式 138
任務(wù)小結(jié) 139
習(xí)題7 140
實(shí)訓(xùn)7 140
擴(kuò)展閱讀 141
任務(wù)8
制作學(xué)生信息注冊表單 142
8.1 任務(wù)描述 142
8.2 知識準(zhǔn)備 143
8.2.1 認(rèn)識表單 143
8.2.2 表單標(biāo)記 143
8.2.3 表單控件 144
8.2.4 使用CSS定義表單樣式 150
8.3 任務(wù)實(shí)現(xiàn) 152
8.3.1 搭建學(xué)生信息注冊表單頁面結(jié)構(gòu) 152
8.3.2 使用CSS定義學(xué)生信息注冊表單頁面樣式 155
任務(wù)小結(jié) 156
習(xí)題8 158
實(shí)訓(xùn)8 159
擴(kuò)展閱讀 160
任務(wù)9 布局學(xué)院網(wǎng)站主頁 161
9.1 任務(wù)描述 161
9.2 知識準(zhǔn)備 161
9.2.1 HTML5新增結(jié)構(gòu)標(biāo)記 162
9.2.2 HTML5 CSS3布局 167
9.3 任務(wù)實(shí)現(xiàn) 174
9.3.1 搭建布局塊結(jié)構(gòu) 174
9.3.2 定義布局塊CSS樣式 176
任務(wù)小結(jié) 179
習(xí)題9 179
實(shí)訓(xùn)9 180
擴(kuò)展閱讀 180
任務(wù)10 使用CSS3實(shí)現(xiàn)動畫效果 182
10.1 任務(wù)描述 182
10.2 知識準(zhǔn)備 183
10.2.1 過渡屬性 183
10.2.2 變形屬性 188
10.2.3 動畫屬性 198
10.3 任務(wù)實(shí)現(xiàn) 203
10.3.1 搭建照片墻頁面結(jié)構(gòu) 203
10.3.2 定義照片墻頁面CSS樣式 204
任務(wù)小結(jié) 206
習(xí)題10 206
實(shí)訓(xùn)10 207
擴(kuò)展閱讀 209
任務(wù)11 完整項(xiàng)目：制作學(xué)院網(wǎng)站 210
11.1 任務(wù)描述 210
11.2 網(wǎng)站規(guī)劃 211
11.3 效果圖設(shè)計(jì) 212
11.3.1 效果圖設(shè)計(jì)原則 212
11.3.2 效果圖設(shè)計(jì)步驟 213
11.3.3 效果圖切片導(dǎo)出網(wǎng)頁 218
11.4 制作網(wǎng)站主頁 218
11.5 制作新聞列表頁 237
11.6 制作新聞詳情頁 243
11.7 制作視頻宣傳頁 245
11.8 添加網(wǎng)頁動態(tài)效果 246
任務(wù)小結(jié) 247
擴(kuò)展閱讀 247
任務(wù)12 完整項(xiàng)目：制作化妝品網(wǎng)站 249
12.1 任務(wù)描述 249
12.2 網(wǎng)站規(guī)劃 250
12.2.1 網(wǎng)站需求分析 250
12.2.2 網(wǎng)站的風(fēng)格定位 251
12.2.3 規(guī)劃草圖 251
12.2.4 素材準(zhǔn)備 251
12.3 制作網(wǎng)站主頁 252
12.4 制作網(wǎng)站登錄頁面 267
12.5 制作網(wǎng)站注冊頁面 270
任務(wù)小結(jié) 273
擴(kuò)展閱讀 273
參考文獻(xiàn) 276