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