網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目案例教程（第2版）

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