任務1 創(chuàng)建第一個HTML5網頁 1
1.1 任務描述 1
1.2 知識準備 1
1.2.1 認識Web前端開發(fā) 1
1.2.2 Web相關概念 2
1.2.3 HTML5概述 4
1.2.4 常用的瀏覽器 4
1.2.5 網頁編輯軟件 5
1.3 任務實現(xiàn) 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 任務實現(xiàn) 30
2.3.1 創(chuàng)建項目 30
2.3.2 創(chuàng)建網站首頁 30
2.3.3 創(chuàng)建學院簡介頁面 31
2.3.4 創(chuàng)建學院新聞頁面 32
2.3.5 創(chuàng)建新聞詳情頁面 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 任務實現(xiàn) 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 任務實現(xiàn) 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 任務實現(xiàn) 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 任務實現(xiàn) 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 任務實現(xiàn) 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 任務實現(xiàn) 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 任務實現(xiàn) 174
9.3.1 搭建布局塊結構 174
9.3.2 定義布局塊CSS樣式 176
任務小結 179
習題9 179
實訓9 180
擴展閱讀 180
任務10 使用CSS3實現(xiàn)動畫效果 182
10.1 任務描述 182
10.2 知識準備 183
10.2.1 過渡屬性 183
10.2.2 變形屬性 188
10.2.3 動畫屬性 198
10.3 任務實現(xiàn) 203
10.3.1 搭建照片墻頁面結構 203
10.3.2 定義照片墻頁面CSS樣式 204
任務小結 206
習題10 206
實訓10 207
擴展閱讀 209
任務11 完整項目：制作學院網站 210
11.1 任務描述 210
11.2 網站規(guī)劃 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 添加網頁動態(tài)效果 246
任務小結 247
擴展閱讀 247
任務12 完整項目：制作化妝品網站 249
12.1 任務描述 249
12.2 網站規(guī)劃 250
12.2.1 網站需求分析 250
12.2.2 網站的風格定位 251
12.2.3 規(guī)劃草圖 251
12.2.4 素材準備 251
12.3 制作網站主頁 252
12.4 制作網站登錄頁面 267
12.5 制作網站注冊頁面 270
任務小結 273
擴展閱讀 273
參考文獻 276