任務(wù)1 創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè) 1
1.1 任務(wù)描述 1
1.2 知識(shí)準(zhǔn)備 1
1.2.1 認(rèn)識(shí)Web前端開(kāi)發(fā) 1
1.2.2 Web相關(guān)概念 2
1.2.3 HTML5概述 4
1.2.4 常用的瀏覽器 4
1.2.5 網(wǎng)頁(yè)編輯軟件 5
1.3 任務(wù)實(shí)現(xiàn) 5
任務(wù)小結(jié) 8
習(xí)題1 8
實(shí)訓(xùn)1 9
擴(kuò)展閱讀 9
任務(wù)2 搭建簡(jiǎn)單學(xué)院網(wǎng)站 11
2.1 任務(wù)描述 11
2.2 知識(shí)準(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)站首頁(yè) 30
2.3.3 創(chuàng)建學(xué)院簡(jiǎn)介頁(yè)面 31
2.3.4 創(chuàng)建學(xué)院新聞頁(yè)面 32
2.3.5 創(chuàng)建新聞詳情頁(yè)面 33
任務(wù)小結(jié) 34
習(xí)題2 35
實(shí)訓(xùn)2 37
擴(kuò)展閱讀 38
任務(wù)3 美化簡(jiǎn)單學(xué)院網(wǎng)站 39
3.1 任務(wù)描述 39
3.2 知識(shí)準(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的高級(jí)特性 55
3.3 任務(wù)實(shí)現(xiàn) 58
3.3.1 美化網(wǎng)站首頁(yè) 58
3.3.2 美化學(xué)院簡(jiǎn)介頁(yè)面 59
3.3.3 美化學(xué)院新聞頁(yè)面 61
3.3.4 美化新聞詳情頁(yè)面 62
任務(wù)小結(jié) 64
習(xí)題3 65
實(shí)訓(xùn)3 66
擴(kuò)展閱讀 67
任務(wù)4 制作學(xué)院介紹頁(yè)面 68
4.1 任務(wù)描述 68
4.2 知識(shí)準(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é)院介紹頁(yè)面結(jié)構(gòu) 86
4.3.2 定義學(xué)院介紹頁(yè)面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 知識(shí)準(zhǔn)備 93
5.2.1 無(wú)序列表樣式設(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 知識(shí)準(zhǔn)備 107
6.2.1 元素的浮動(dòng) 107
6.2.2 元素的定位 110
6.2.3 塊元素間的外邊距 115
6.3 任務(wù)實(shí)現(xiàn) 122
6.3.1 搭建學(xué)院新聞塊頁(yè)面結(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 知識(shí)準(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é)生信息注冊(cè)表單 142
8.1 任務(wù)描述 142
8.2 知識(shí)準(zhǔn)備 143
8.2.1 認(rèn)識(shí)表單 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é)生信息注冊(cè)表單頁(yè)面結(jié)構(gòu) 152
8.3.2 使用CSS定義學(xué)生信息注冊(cè)表單頁(yè)面樣式 155
任務(wù)小結(jié) 156
習(xí)題8 158
實(shí)訓(xùn)8 159
擴(kuò)展閱讀 160
任務(wù)9 布局學(xué)院網(wǎng)站主頁(yè) 161
9.1 任務(wù)描述 161
9.2 知識(shí)準(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)動(dòng)畫效果 182
10.1 任務(wù)描述 182
10.2 知識(shí)準(zhǔn)備 183
10.2.1 過(guò)渡屬性 183
10.2.2 變形屬性 188
10.2.3 動(dòng)畫屬性 198
10.3 任務(wù)實(shí)現(xiàn) 203
10.3.1 搭建照片墻頁(yè)面結(jié)構(gòu) 203
10.3.2 定義照片墻頁(yè)面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)頁(yè) 218
11.4 制作網(wǎng)站主頁(yè) 218
11.5 制作新聞列表頁(yè) 237
11.6 制作新聞詳情頁(yè) 243
11.7 制作視頻宣傳頁(yè) 245
11.8 添加網(wǎng)頁(yè)動(dò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)站主頁(yè) 252
12.4 制作網(wǎng)站登錄頁(yè)面 267
12.5 制作網(wǎng)站注冊(cè)頁(yè)面 270
任務(wù)小結(jié) 273
擴(kuò)展閱讀 273
參考文獻(xiàn) 276