單元1 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ) 1
任務(wù)1.1　認(rèn)識(shí)網(wǎng)頁與網(wǎng)站 1
任務(wù)陳述 1
相關(guān)知識(shí)與技能 2
1.1.1　什么是網(wǎng)頁 2
1.1.2　網(wǎng)頁類型 2
1.1.3　網(wǎng)頁基本元素 3
1.1.4　網(wǎng)頁的構(gòu)成 5
1.1.5　網(wǎng)頁設(shè)計(jì)常用基本語言 6
1.1.6　什么是網(wǎng)站 7
1.1.7　網(wǎng)址與域名 7
任務(wù)實(shí)施 8
1.1.8　網(wǎng)站建設(shè)的一般流程 8
任務(wù)拓展 9
1.1.9　實(shí)踐演練——京東官網(wǎng)頁面體驗(yàn) 9
任務(wù)1.2　使用HTML制作簡單的網(wǎng)頁 9
任務(wù)陳述 9
相關(guān)知識(shí)與技能 9
1.2.1　HTML5簡介 9
1.2.2　HTML5基本語法與結(jié)構(gòu) 11
1.2.3　常用HTML5標(biāo)簽 12
任務(wù)實(shí)施 22
1.2.4　使用記事本編輯簡單網(wǎng)頁 22
任務(wù)拓展 23
1.2.5　制作滾動(dòng)圖片鏈接 23
單元實(shí)訓(xùn)1.3　制作個(gè)人簡介網(wǎng)頁 24
思政點(diǎn)滴 24
單元練習(xí)題 25
單元2 網(wǎng)頁版式設(shè)計(jì)與色彩搭配 26
任務(wù)2.1　網(wǎng)頁版式設(shè)計(jì) 26
任務(wù)陳述 26
相關(guān)知識(shí)與技能 27
2.1.1　版式設(shè)計(jì)概述 27
2.1.2　網(wǎng)頁版式的尺寸和構(gòu)成要素 27
2.1.3　網(wǎng)頁版式設(shè)計(jì)的風(fēng)格 28
2.1.4　網(wǎng)頁版式設(shè)計(jì)原則 30
2.1.5　網(wǎng)頁版式設(shè)計(jì)的視覺流程 30
2.1.6　網(wǎng)頁版式設(shè)計(jì)的步驟 31
任務(wù)實(shí)施 31
2.1.7　欣賞與解析不同風(fēng)格網(wǎng)頁作品 31
任務(wù)拓展 32
2.1.8　總結(jié)不同主題網(wǎng)站頁面版式設(shè)計(jì)風(fēng)格 32
任務(wù)2.2　網(wǎng)頁色彩搭配 33
任務(wù)陳述 33
相關(guān)知識(shí)與技能 33
2.2.1　色彩基礎(chǔ)知識(shí) 33
2.2.2　色彩的視覺效果 34
2.2.3　網(wǎng)頁中色彩的作用 36
2.2.4　網(wǎng)頁配色原理 36
2.2.5　網(wǎng)頁配色技巧 37
2.2.6　網(wǎng)頁中色彩的表示 37
任務(wù)實(shí)施 38
2.2.7　總結(jié)不同主題網(wǎng)站的配色風(fēng)格 38
任務(wù)拓展 38
2.2.8　網(wǎng)頁配色練習(xí) 38
單元實(shí)訓(xùn)2.3　校友網(wǎng)首頁效果圖設(shè)計(jì) 39
思政點(diǎn)滴 39
單元練習(xí)題 40
單元3 Dreamweaver CC工具的使用 41
任務(wù)3.1　認(rèn)識(shí)中文版Dreamweaver CC 41
任務(wù)陳述 41
相關(guān)知識(shí)與技能 41
3.1.1　Dreamweaver CC界面介紹 41
3.1.2　Dreamweaver CC初始化設(shè)置 45
任務(wù)實(shí)施 46
3.1.3　在Dreamweaver CC中創(chuàng)建、保存網(wǎng)頁文件 46
任務(wù)拓展 47
3.1.4　在Dreamweaver CC中創(chuàng)建簡單文本頁面 47
3.1.5　預(yù)覽網(wǎng)頁文檔 47
任務(wù)3.2　規(guī)劃與創(chuàng)建站點(diǎn) 48
任務(wù)陳述 48
相關(guān)知識(shí)與技能 48
3.2.1　站點(diǎn)概述 48
3.2.2　規(guī)劃站點(diǎn) 49
任務(wù)實(shí)施 49
3.2.3　創(chuàng)建本地站點(diǎn) 49
3.2.4　管理站點(diǎn) 51
任務(wù)拓展 53
3.2.5　創(chuàng)建“歡迎光臨”網(wǎng)頁 53
3.2.6　設(shè)置頁面屬性 53
單元實(shí)訓(xùn)3.3　制作“我的網(wǎng)上家園”歡迎頁面 58
思政點(diǎn)滴 59
單元練習(xí)題 59
單元4 CSS3樣式 60
任務(wù)4.1　定義CSS3基礎(chǔ)樣式 60
任務(wù)陳述 60
相關(guān)知識(shí)與技能 60
4.1.1　CSS3簡介 60
4.1.2　CSS3樣式設(shè)置規(guī)則 62
4.1.3　CSS3基本選擇器 63
4.1.4　CSS3樣式的調(diào)用 65
任務(wù)實(shí)施 66
4.1.5　布局及定義CSS3基礎(chǔ)樣式 66
4.1.6　鏈接或?qū)�入外部CSS3樣式 73
4.1.7　查看CSS3樣式 74
4.1.8　編輯與刪除CSS3屬性 74
4.1.9　常用CSS3屬性含義及屬性值 74
任務(wù)拓展 76
4.1.10　使用CSS美化網(wǎng)頁 76
任務(wù)4.2　CSS3高級(jí)特性及應(yīng)用 78
任務(wù)陳述 78
相關(guān)知識(shí)與技能 78
4.2.1　CSS3的新增選擇器 78
4.2.2　CSS3的特性 80
任務(wù)實(shí)施 81
4.2.3　使用CSS3設(shè)置文字特效 81
任務(wù)拓展 83
4.2.4　CSS3瀏覽器兼容性設(shè)置 83
單元實(shí)訓(xùn)4.3　使用CSS3樣式設(shè)計(jì)新浪新聞網(wǎng)頁 84
思政點(diǎn)滴 86
單元練習(xí)題 86
單元5 網(wǎng)頁文本和圖像 87
任務(wù)5.1　制作文本類網(wǎng)頁 87
任務(wù)陳述 87
相關(guān)知識(shí)與技能 87
5.1.1　在網(wǎng)頁中添加文本元素 87
5.1.2　在網(wǎng)頁中創(chuàng)建與設(shè)置列表 88
任務(wù)實(shí)施 90
5.1.3　制作唐詩賞析網(wǎng)頁 90
5.1.4　設(shè)置文本屬性 91
5.1.5　使用CSS設(shè)置段落樣式 93
任務(wù)拓展 94
5.1.6　插入特殊字符、水平線和日期 94
任務(wù)5.2　在網(wǎng)頁中插入圖像 96
任務(wù)陳述 96
相關(guān)知識(shí)與技能 96
5.2.1　網(wǎng)頁中常用的圖像格式 96
任務(wù)實(shí)施 96
5.2.2　在網(wǎng)頁中添加圖像元素 96
5.2.3　設(shè)置網(wǎng)頁圖像屬性 97
5.2.4　用CSS設(shè)置網(wǎng)頁圖像樣式 98
5.2.5　用CSS設(shè)置網(wǎng)頁的背景圖像 100
任務(wù)拓展 101
5.2.6　插入鼠標(biāo)經(jīng)過圖像 101
5.2.7　圖文混排——設(shè)計(jì)制作電影介紹網(wǎng)站頁面 102
單元實(shí)訓(xùn)5.3　設(shè)計(jì)制作圖書推薦網(wǎng)頁 104
思政點(diǎn)滴 105
單元練習(xí)題 106
單元6 網(wǎng)頁超鏈接與導(dǎo)航 107
任務(wù)6.1　為網(wǎng)頁增加超鏈接元素 107
任務(wù)陳述 107
相關(guān)知識(shí)與技能 107
6.1.1　超鏈接概述 107
6.1.2　創(chuàng)建各類超鏈接 109
任務(wù)實(shí)施 112
6.1.3 為臘八節(jié)網(wǎng)頁添加超鏈接 112
任務(wù)拓展 114
6.1.4　用CSS設(shè)置超鏈接 114
6.1.5　創(chuàng)建圖像地圖 115
任務(wù)6.2　設(shè)計(jì)網(wǎng)頁導(dǎo)航 115
任務(wù)陳述 115
相關(guān)知識(shí)與技能 116
6.2.1　網(wǎng)頁導(dǎo)航概述 116
6.2.2　網(wǎng)頁導(dǎo)航分類 116
6.2.3　網(wǎng)頁導(dǎo)航方向 119
任務(wù)實(shí)施 119
6.2.4　為“中國地理”網(wǎng)頁增加垂直方向?qū)Ш?119
任務(wù)拓展 122
6.2.5　為“中國地理”網(wǎng)頁增加水平方向?qū)Ш?122
單元實(shí)訓(xùn)6.3　設(shè)計(jì)制作“點(diǎn)點(diǎn)星空”網(wǎng)站頁面 124
思政點(diǎn)滴 126
單元練習(xí)題 126
單元7 表格化網(wǎng)頁布局 127
任務(wù)7.1　表格的插入與編輯 127
任務(wù)陳述 127
相關(guān)知識(shí)與技能 127
7.1.1　認(rèn)識(shí)表格 127
7.1.2　表格標(biāo)簽 128
7.1.3　表格屬性面板 128
任務(wù)實(shí)施 129
7.1.4　插入表格 129
7.1.5　編輯表格 130
任務(wù)拓展 132
7.1.6　美化表格 132
任務(wù)7.2　使用表格布局“圖書資源網(wǎng)”首頁 132
任務(wù)陳述 132
相關(guān)知識(shí)與技能 133
7.2.1 “圖書資源網(wǎng)”首頁效果分析 133
任務(wù)實(shí)施 133
7.2.2　插入與編輯表格 133
7.2.3　在表格中插入網(wǎng)頁元素 134
7.2.4　導(dǎo)入表格式數(shù)據(jù) 135
任務(wù)拓展 136
7.2.5　進(jìn)一步美化“圖書資源網(wǎng)”首頁 136
單元實(shí)訓(xùn)7.3　使用表格布局兩個(gè)不同主題的網(wǎng)頁 137
7.3.1　實(shí)訓(xùn)一　設(shè)計(jì)制作“旅游信息網(wǎng)” 137
7.3.2　實(shí)訓(xùn)二　設(shè)計(jì)制作“時(shí)尚禮品網(wǎng)” 138
思政點(diǎn)滴 140
單元練習(xí)題 141
單元8 使用Div+CSS布局網(wǎng)頁 142
任務(wù)8.1　設(shè)計(jì)制作“古詩欣賞”網(wǎng)頁 142
任務(wù)陳述 142
相關(guān)知識(shí)與技能 142
8.1.1　盒子模型 142
8.1.2　元素的定位 144
任務(wù)實(shí)施 144
8.1.3 使用盒子模型設(shè)計(jì)“古詩欣賞”網(wǎng)頁 144
任務(wù)拓展 146
8.1.4　模擬實(shí)現(xiàn)Windows10桌面效果 146
8.1.5　Div標(biāo)簽與span標(biāo)簽 148
任務(wù)8.2　設(shè)計(jì)個(gè)人博客頁面 149
任務(wù)陳述 149
相關(guān)知識(shí)與技能 150
8.2.1　常用Div+CSS布局版式 150
任務(wù)實(shí)施 154
8.2.2　使用Div+CSS布局個(gè)人博客頁面 154
任務(wù)拓展 158
8.2.3　定位在網(wǎng)頁布局中的應(yīng)用 158
單元實(shí)訓(xùn)8.3　Div+CSS網(wǎng)頁布局案例 160
8.3.1　使用Div+CSS實(shí)現(xiàn)婚紗網(wǎng)站最新作品列表設(shè)置 160
8.3.2　使用Div+CSS布局學(xué)院教學(xué)成果申報(bào)網(wǎng)站首頁 161
思政點(diǎn)滴 162
單元練習(xí)題 162
單元9 多媒體網(wǎng)頁和網(wǎng)頁特效 164
任務(wù)9.1　制作多媒體網(wǎng)頁 164
任務(wù)陳述 164
相關(guān)知識(shí)與技能 164
9.1.1 認(rèn)識(shí)多媒體元素 164
任務(wù)實(shí)施 167
9.1.2　制作“電子相冊(cè)”網(wǎng)頁 167
任務(wù)拓展 169
9.1.3　制作休閑娛樂多媒體網(wǎng)頁 169
任務(wù)9.2　創(chuàng)建網(wǎng)頁特效 171
任務(wù)陳述 171
相關(guān)知識(shí)與技能 171
9.2.1　行為概述 171
9.2.2　動(dòng)作與事件 172
9.2.3　添加行為 174
任務(wù)實(shí)施 174
9.2.4　制作網(wǎng)頁加載時(shí)彈出公告頁 174
9.2.5　使用行為設(shè)置交換圖像特效 175
9.2.6　使用行為設(shè)置文本特效 177
任務(wù)拓展 179
9.2.7　使用行為設(shè)置跳轉(zhuǎn)菜單效果 179
單元實(shí)訓(xùn)9.3　制作多媒體網(wǎng)頁和創(chuàng)建網(wǎng)頁特效案例 181
9.3.1　實(shí)訓(xùn)一　制作動(dòng)態(tài)的“美食展示”網(wǎng)頁 181
9.3.2　實(shí)訓(xùn)二　設(shè)置變換圖像的導(dǎo)航欄 181
思政點(diǎn)滴 182
單元練習(xí)題 183
單元10 使用表單對(duì)象 184
任務(wù)10.1　設(shè)計(jì)會(huì)員注冊(cè)網(wǎng)頁 184
任務(wù)陳述 184
相關(guān)知識(shí)與技能 185
10.1.1　表單 185
10.1.2　表單對(duì)象 186
任務(wù)實(shí)施 188
10.1.3　布局會(huì)員注冊(cè)網(wǎng)頁 188
10.1.4　插入文本域 189
10.1.5　插入單選按鈕 190
10.1.6　插入復(fù)選框 191
10.1.7　插入選擇 192
10.1.8　插入按鈕 193
單元實(shí)訓(xùn)10.2　表單的應(yīng)用 193
10.2.1　實(shí)訓(xùn)一　設(shè)計(jì)網(wǎng)上報(bào)名頁面 194
10.2.2　實(shí)訓(xùn)二　設(shè)計(jì)客戶調(diào)查頁面 194
思政點(diǎn)滴 195
單元練習(xí)題 195
單元11 使用JavaScript實(shí)現(xiàn)網(wǎng)頁的交互 197
任務(wù)11.1　使用JavaScript實(shí)現(xiàn)下拉菜單 197
任務(wù)陳述 197
相關(guān)知識(shí)與技能 198
11.1.1　JavaScript簡介 198
11.1.2　JavaScript的使用方法 198
11.1.3　JavaScript語言基礎(chǔ) 200
11.1.4　流程控制語句 205
11.1.5　函數(shù)的定義與調(diào)用 211
任務(wù)實(shí)施 214
11.1.6 下拉菜單的設(shè)計(jì)與實(shí)現(xiàn) 214
任務(wù)拓展 217
11.1.7 使用JavaScript腳本實(shí)現(xiàn)“省份”下拉菜單 217
單元實(shí)訓(xùn)11.2　使用JavaScript制作網(wǎng)頁特效 218
11.2.1 使用JavaScript制作兩款網(wǎng)頁特效 218
11.2.2 使用JavaScript完成下拉列表項(xiàng)左右移動(dòng) 220
思政點(diǎn)滴 221
單元練習(xí)題 221
單元12 使用模板設(shè)計(jì)網(wǎng)頁 223
任務(wù)12.1　創(chuàng)建基于模板的時(shí)尚禮品網(wǎng) 223
任務(wù)陳述 223
相關(guān)知識(shí)與技能 224
12.1.1　模板概述 224
12.1.2　創(chuàng)建模板 224
12.1.3　定義模板的可編輯區(qū)域 226
任務(wù)實(shí)施 227
12.1.4　創(chuàng)建基于模板的網(wǎng)頁 227
任務(wù)拓展 229
12.1.5　管理模板 229
任務(wù)12.2　應(yīng)用庫項(xiàng)目 230
任務(wù)陳述 230
相關(guān)知識(shí)與技能 231
12.2.1　庫概述 231
任務(wù)實(shí)施 232
12.2.2　創(chuàng)建庫項(xiàng)目 232
12.2.3　在網(wǎng)頁中應(yīng)用庫項(xiàng)目 232
任務(wù)拓展 234
12.2.4　更新庫項(xiàng)目 234
單元實(shí)訓(xùn)12.3　使用模板創(chuàng)建網(wǎng)頁及在網(wǎng)頁中應(yīng)用庫項(xiàng)目 234
12.3.1　實(shí)訓(xùn)一　使用模板創(chuàng)建網(wǎng)頁 234
12.3.2　實(shí)訓(xùn)二　在網(wǎng)頁中應(yīng)用庫項(xiàng)目 236
思政點(diǎn)滴 237
單元練習(xí)題 237
單元13 網(wǎng)站的發(fā)布與推廣 239
任務(wù)13.1　免費(fèi)空間的申請(qǐng)及使用 239
任務(wù)陳述 239
相關(guān)知識(shí)與技能 239
13.1.1　FTP上傳工具 239
任務(wù)實(shí)施 240
13.2.2　申請(qǐng)免費(fèi)空間 240
13.2.3　發(fā)布站點(diǎn) 242
任務(wù)13.2　域名注冊(cè)及收費(fèi)空間的申請(qǐng) 243
任務(wù)陳述 243
相關(guān)知識(shí)與技能 244
13.2.1　域名 244
13.2.2　網(wǎng)站空間 245
任務(wù)實(shí)施 245
13.2.3　注冊(cè)域名 245
13.2.4　租用服務(wù)器空間 246
任務(wù)13.3　網(wǎng)站的宣傳與推廣 249
任務(wù)陳述 249
相關(guān)知識(shí)與技能 249
13.3.1　網(wǎng)站推廣的作用 249
13.3.2　網(wǎng)站推廣的方法 250
任務(wù)實(shí)施 252
13.3.3　將網(wǎng)站提交給百度搜索引擎 252
13.3.4　使用論壇推廣網(wǎng)站 253
任務(wù)拓展 254
13.3.5　搜索引擎優(yōu)化 254
單元實(shí)訓(xùn)13.4　通過論壇推廣網(wǎng)站 255
思政點(diǎn)滴 255
單元練習(xí)題 255
單元14 綜合實(shí)戰(zhàn)項(xiàng)目 256
任務(wù)14.1　設(shè)計(jì)制作工作室網(wǎng)站 256
任務(wù)陳述 256
相關(guān)知識(shí)與技能 256
14.1.1　網(wǎng)站建設(shè)流程 256
任務(wù)實(shí)施 258
14.1.2　網(wǎng)站需求分析 258
14.1.3　網(wǎng)站原型設(shè)計(jì) 258
14.1.4　創(chuàng)建站點(diǎn) 260
14.1.5　網(wǎng)站首頁設(shè)計(jì) 261
14.1.6　欄目頁設(shè)計(jì) 269
任務(wù)拓展 269
14.1.7　type.css參考代碼 269
任務(wù)14.2　設(shè)計(jì)制作企業(yè)類網(wǎng)站 274
任務(wù)陳述 274
相關(guān)知識(shí)與技能 274
14.2.1　企業(yè)類網(wǎng)站首頁的布局規(guī)劃 274
任務(wù)實(shí)施 275
14.2.2　布局網(wǎng)站首頁 275
14.2.3　搭建首頁頁頭的Div 277
14.2.4　搭建“公司簡介”部分的Div 278
14.2.5　首頁主體部分的Div 278
14.2.6　欄目頁設(shè)計(jì) 280
14.2.7　Flash動(dòng)畫展示部分的Div 282
14.2.8　搭建“產(chǎn)品系列”部分的Div 283