上篇 基礎(chǔ)部分
項(xiàng)目1 網(wǎng)頁設(shè)計(jì)與制作概述 1
1.1 任務(wù)目標(biāo) 1
1.2 知識準(zhǔn)備 2
1.2.1 網(wǎng)站和網(wǎng)頁概述 2
1.2.2 網(wǎng)頁設(shè)計(jì)素養(yǎng) 10
1.2.3 Web標(biāo)準(zhǔn) 12
1.2.4 HTML基礎(chǔ) 13
1.2.5 網(wǎng)頁設(shè)計(jì)常用軟件 20
1.3 任務(wù)實(shí)施 20
任務(wù)1：實(shí)現(xiàn)大國工匠年度人物的圖像信息展示 21
任務(wù)2：實(shí)現(xiàn)大國工匠年度人物的文字信息展示 24
1.4 任務(wù)總結(jié) 26
1.5 能力與知識拓展 26
1.6 鞏固練習(xí) 30
項(xiàng)目2 HTML5頁面元素及屬性 32
2.1 任務(wù)目標(biāo) 32
2.2 知識準(zhǔn)備 32
2.2.1 結(jié)構(gòu)元素 32
2.2.2 列表元素 36
2.2.3 分組元素 41
2.2.4 頁面交互元素 42
2.3 任務(wù)實(shí)施 44
任務(wù)1：實(shí)現(xiàn)感動中國年度人物信息展示頁面分區(qū) 45
任務(wù)2：實(shí)現(xiàn)感動中國年度人物的文字信息展示 46
2.4 任務(wù)總結(jié) 49
2.5 能力與知識拓展 50
2.6 鞏固練習(xí) 50
項(xiàng)目3 CSS美化HTML網(wǎng)頁 53
3.1 任務(wù)目標(biāo) 53
3.2 知識準(zhǔn)備 54
3.2.1 CSS概述 54
3.2.2 CSS語法與用法 55
3.2.3 CSS樣式屬性 57
3.2.4 基本選擇器 61
3.2.5 復(fù)合選擇器 64
3.2.6 CSS高級特性 68
3.3 任務(wù)實(shí)施 71
任務(wù)1：實(shí)現(xiàn)熱點(diǎn)新聞網(wǎng)首頁的信息展示 72
任務(wù)2：實(shí)現(xiàn)熱點(diǎn)新聞網(wǎng)首頁的樣式設(shè)置 74
3.4 任務(wù)總結(jié) 76
3.5 能力與知識拓展 78
3.6 鞏固練習(xí) 82
下篇 應(yīng)用實(shí)踐部分
項(xiàng)目4 網(wǎng)頁div+CSS布局設(shè)計(jì)與制作 83
4.1 任務(wù)目標(biāo) 83
4.2 知識準(zhǔn)備 84
4.2.1 CSS盒子模型 84
4.2.2 盒子模型屬性設(shè)置 85
4.2.3 div 90
4.2.4 浮動與定位 92
4.2.5 div+CSS實(shí)現(xiàn)網(wǎng)頁布局 98
4.3 重慶愉快網(wǎng)學(xué)做菜首頁頁面設(shè)計(jì)與制作任務(wù)實(shí)施 103
任務(wù)1：創(chuàng)建重慶愉快網(wǎng)學(xué)做菜首頁header部分 105
任務(wù)2：設(shè)置導(dǎo)航（nav）部分的CSS樣式 110
任務(wù)3：設(shè)置文字部分的CSS樣式 111
任務(wù)4：設(shè)置圖文的CSS樣式 113
4.4 任務(wù)總結(jié) 115
4.5 能力與知識拓展 115
4.6 鞏固練習(xí) 116
項(xiàng)目5 網(wǎng)頁表格布局設(shè)計(jì)與制作 118
5.1 任務(wù)目標(biāo) 118
5.2 知識準(zhǔn)備 119
5.2.1 表格標(biāo)簽 119
5.2.2 使用表格布局的原因 122
5.2.3 設(shè)計(jì)軟件 123
5.3 個人網(wǎng)站相冊頁面設(shè)計(jì)與制作任務(wù)實(shí)施 123
任務(wù)1：創(chuàng)建個人網(wǎng)站相冊頁面站點(diǎn) 125
任務(wù)2：插入表格完成基本布局 131
任務(wù)3：編輯頁面內(nèi)容 134
5.4 任務(wù)總結(jié) 139
5.5 能力與知識拓展 139
5.5.1 網(wǎng)頁常見結(jié)構(gòu)布局 139
5.5.2 網(wǎng)頁常見布局方法與原則 143
5.6 鞏固練習(xí) 143
項(xiàng)目6 網(wǎng)頁框架設(shè)計(jì)與制作 145
6.1 任務(wù)目標(biāo) 145
6.2 知識準(zhǔn)備 146
6.2.1 框架 146
6.2.2 ＜frameset＞標(biāo)簽與＜frame＞標(biāo)簽 146
6.2.3 ＜noframes＞標(biāo)簽 148
6.2.4 ＜iframe＞標(biāo)簽 149
6.3 重慶愉快網(wǎng)個人主頁頁面設(shè)計(jì)與制作任務(wù)實(shí)施 149
任務(wù)1：創(chuàng)建重慶愉快網(wǎng)個人主頁頁面 152
任務(wù)2：設(shè)計(jì)與制作top頁面 156
任務(wù)3：設(shè)計(jì)與制作left頁面 159
任務(wù)4：設(shè)計(jì)制作main頁面 164
6.4 任務(wù)總結(jié) 168
6.5 能力與知識拓展 170
6.5.1 重慶愉快網(wǎng)找優(yōu)惠頁面中浮動框架的設(shè)計(jì)與制作 170
6.5.2 重慶愉快網(wǎng)找優(yōu)惠框架鏈接的設(shè)計(jì)與制作 172
6.6 鞏固練習(xí) 175
項(xiàng)目7 網(wǎng)頁模板設(shè)計(jì)與制作 177
7.1 任務(wù)目標(biāo) 177
7.2 知識準(zhǔn)備 178
7.2.1 資源 179
7.2.2 庫 179
7.2.3 庫項(xiàng)目 180
7.2.4 編輯庫項(xiàng)目 182
7.3 重慶愉快網(wǎng)內(nèi)容頁面設(shè)計(jì)與制作任務(wù)實(shí)施 183
任務(wù)1：分析、設(shè)計(jì)與制作內(nèi)容頁面的布局 184
任務(wù)2：設(shè)計(jì)與制作網(wǎng)頁可編輯區(qū)域 189
任務(wù)3：通過模板頁來設(shè)計(jì)與制作同類型的內(nèi)容頁面 192
7.4 任務(wù)總結(jié) 196
7.5 能力與知識拓展 198
7.6 鞏固練習(xí) 200
項(xiàng)目8 網(wǎng)頁表單設(shè)計(jì)與制作 202
8.1 任務(wù)目標(biāo) 202
8.2 知識準(zhǔn)備 203
8.2.1 表單標(biāo)簽 203
8.2.2 表單域 204
8.2.3 表單按鈕 207
8.3 重慶愉快網(wǎng)注冊表單頁面設(shè)計(jì)與制作任務(wù)實(shí)施 208
任務(wù)1：創(chuàng)建重慶愉快網(wǎng)注冊表單頁面站點(diǎn) 210
任務(wù)2：創(chuàng)建重慶愉快網(wǎng)注冊表單頁面 210
任務(wù)3：注冊表單頁面的設(shè)計(jì)與制作 212
任務(wù)4：美化注冊表單頁面 219
8.4 任務(wù)總結(jié) 220
8.5 能力與知識拓展 223
8.5.1 表單頁面制作原則 223
8.5.2 下拉列表的設(shè)計(jì)與制作 224
8.6 鞏固練習(xí) 225
項(xiàng)目9 網(wǎng)頁簡單特效設(shè)計(jì)與制作 227
9.1 任務(wù)目標(biāo) 227
9.2 知識準(zhǔn)備 228
9.2.1 行為 228
9.2.2 JavaScript 230
9.2.3 JavaScript事件 232
9.2.4 JavaScript對象 232
9.3 重慶市少年宮網(wǎng)站首頁頁面設(shè)計(jì)與制作任務(wù)實(shí)施 233
任務(wù)1：創(chuàng)建重慶市少年宮網(wǎng)站首頁頁面站點(diǎn) 236
任務(wù)2：創(chuàng)建重慶市少年宮網(wǎng)站首頁頁面 236
任務(wù)3：重慶市少年宮網(wǎng)站首頁頁面的設(shè)計(jì)與制作 238
9.4 任務(wù)總結(jié) 243
9.5 能力與知識拓展 245
9.6 鞏固練習(xí) 246
項(xiàng)目10 網(wǎng)頁多媒體設(shè)計(jì)與制作 248
10.1 任務(wù)目標(biāo) 248
10.2 知識準(zhǔn)備 249
10.2.1 HTML5多媒體的特性 249
10.2.2 視頻和音頻編解碼器 249
10.2.3 多媒體的格式 250
10.2.4 支持視頻或音頻的瀏覽器 251
10.2.5 在網(wǎng)頁中嵌入音頻 251
10.2.6 在網(wǎng)頁中嵌入視頻 252
10.3 簡單音樂播放器設(shè)計(jì)與制作任務(wù)實(shí)施 256
任務(wù)1：創(chuàng)建音樂播放器網(wǎng)頁 257
任務(wù)2：實(shí)現(xiàn)音樂播放功能 260
10.4 任務(wù)總結(jié) 263
10.5 能力與知識拓展 263
10.6 鞏固練習(xí) 266