單元1 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ) 1
任務(wù)1.1　認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站 1
任務(wù)陳述 1
相關(guān)知識(shí)與技能 2
1.1.1　什么是網(wǎng)頁(yè) 2
1.1.2　網(wǎng)頁(yè)類(lèi)型 2
1.1.3　網(wǎng)頁(yè)基本元素 3
1.1.4　網(wǎng)頁(yè)的構(gòu)成 5
1.1.5　網(wǎng)頁(yè)設(shè)計(jì)常用基本語(yǔ)言 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è)面體驗(yàn) 9
任務(wù)1.2　使用HTML制作簡(jiǎn)單的網(wǎng)頁(yè) 9
任務(wù)陳述 9
相關(guān)知識(shí)與技能 9
1.2.1　HTML5簡(jiǎn)介 9
1.2.2　HTML5基本語(yǔ)法與結(jié)構(gòu) 11
1.2.3　常用HTML5標(biāo)簽 12
任務(wù)實(shí)施 22
1.2.4　使用記事本編輯簡(jiǎn)單網(wǎng)頁(yè) 22
任務(wù)拓展 23
1.2.5　制作滾動(dòng)圖片鏈接 23
單元實(shí)訓(xùn)1.3　制作個(gè)人簡(jiǎn)介網(wǎng)頁(yè) 24
思政點(diǎn)滴 24
單元練習(xí)題 25
單元2 網(wǎng)頁(yè)版式設(shè)計(jì)與色彩搭配 26
任務(wù)2.1　網(wǎng)頁(yè)版式設(shè)計(jì) 26
任務(wù)陳述 26
相關(guān)知識(shí)與技能 27
2.1.1　版式設(shè)計(jì)概述 27
2.1.2　網(wǎng)頁(yè)版式的尺寸和構(gòu)成要素 27
2.1.3　網(wǎng)頁(yè)版式設(shè)計(jì)的風(fēng)格 28
2.1.4　網(wǎng)頁(yè)版式設(shè)計(jì)原則 30
2.1.5　網(wǎng)頁(yè)版式設(shè)計(jì)的視覺(jué)流程 30
2.1.6　網(wǎng)頁(yè)版式設(shè)計(jì)的步驟 31
任務(wù)實(shí)施 31
2.1.7　欣賞與解析不同風(fēng)格網(wǎng)頁(yè)作品 31
任務(wù)拓展 32
2.1.8　總結(jié)不同主題網(wǎng)站頁(yè)面版式設(shè)計(jì)風(fēng)格 32
任務(wù)2.2　網(wǎng)頁(yè)色彩搭配 33
任務(wù)陳述 33
相關(guān)知識(shí)與技能 33
2.2.1　色彩基礎(chǔ)知識(shí) 33
2.2.2　色彩的視覺(jué)效果 34
2.2.3　網(wǎng)頁(yè)中色彩的作用 36
2.2.4　網(wǎng)頁(yè)配色原理 36
2.2.5　網(wǎng)頁(yè)配色技巧 37
2.2.6　網(wǎng)頁(yè)中色彩的表示 37
任務(wù)實(shí)施 38
2.2.7　總結(jié)不同主題網(wǎng)站的配色風(fēng)格 38
任務(wù)拓展 38
2.2.8　網(wǎng)頁(yè)配色練習(xí) 38
單元實(shí)訓(xùn)2.3　校友網(wǎng)首頁(yè)效果圖設(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)頁(yè)文件 46
任務(wù)拓展 47
3.1.4　在Dreamweaver CC中創(chuàng)建簡(jiǎn)單文本頁(yè)面 47
3.1.5　預(yù)覽網(wǎng)頁(yè)文檔 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)頁(yè) 53
3.2.6　設(shè)置頁(yè)面屬性 53
單元實(shí)訓(xùn)3.3　制作“我的網(wǎng)上家園”歡迎頁(yè)面 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簡(jiǎn)介 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)頁(yè) 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)頁(yè) 84
思政點(diǎn)滴 86
單元練習(xí)題 86
單元5 網(wǎng)頁(yè)文本和圖像 87
任務(wù)5.1　制作文本類(lèi)網(wǎng)頁(yè) 87
任務(wù)陳述 87
相關(guān)知識(shí)與技能 87
5.1.1　在網(wǎng)頁(yè)中添加文本元素 87
5.1.2　在網(wǎng)頁(yè)中創(chuàng)建與設(shè)置列表 88
任務(wù)實(shí)施 90
5.1.3　制作唐詩(shī)賞析網(wǎng)頁(yè) 90
5.1.4　設(shè)置文本屬性 91
5.1.5　使用CSS設(shè)置段落樣式 93
任務(wù)拓展 94
5.1.6　插入特殊字符、水平線和日期 94
任務(wù)5.2　在網(wǎng)頁(yè)中插入圖像 96
任務(wù)陳述 96
相關(guān)知識(shí)與技能 96
5.2.1　網(wǎng)頁(yè)中常用的圖像格式 96
任務(wù)實(shí)施 96
5.2.2　在網(wǎng)頁(yè)中添加圖像元素 96
5.2.3　設(shè)置網(wǎng)頁(yè)圖像屬性 97
5.2.4　用CSS設(shè)置網(wǎng)頁(yè)圖像樣式 98
5.2.5　用CSS設(shè)置網(wǎng)頁(yè)的背景圖像 100
任務(wù)拓展 101
5.2.6　插入鼠標(biāo)經(jīng)過(guò)圖像 101
5.2.7　圖文混排——設(shè)計(jì)制作電影介紹網(wǎng)站頁(yè)面 102
單元實(shí)訓(xùn)5.3　設(shè)計(jì)制作圖書(shū)推薦網(wǎng)頁(yè) 104
思政點(diǎn)滴 105
單元練習(xí)題 106
單元6 網(wǎng)頁(yè)超鏈接與導(dǎo)航 107
任務(wù)6.1　為網(wǎng)頁(yè)增加超鏈接元素 107
任務(wù)陳述 107
相關(guān)知識(shí)與技能 107
6.1.1　超鏈接概述 107
6.1.2　創(chuàng)建各類(lèi)超鏈接 109
任務(wù)實(shí)施 112
6.1.3 為臘八節(jié)網(wǎng)頁(yè)添加超鏈接 112
任務(wù)拓展 114
6.1.4　用CSS設(shè)置超鏈接 114
6.1.5　創(chuàng)建圖像地圖 115
任務(wù)6.2　設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航 115
任務(wù)陳述 115
相關(guān)知識(shí)與技能 116
6.2.1　網(wǎng)頁(yè)導(dǎo)航概述 116
6.2.2　網(wǎng)頁(yè)導(dǎo)航分類(lèi) 116
6.2.3　網(wǎng)頁(yè)導(dǎo)航方向 119
任務(wù)實(shí)施 119
6.2.4　為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш?119
任務(wù)拓展 122
6.2.5　為“中國(guó)地理”網(wǎng)頁(yè)增加水平方向?qū)Ш?122
單元實(shí)訓(xùn)6.3　設(shè)計(jì)制作“點(diǎn)點(diǎn)星空”網(wǎng)站頁(yè)面 124
思政點(diǎn)滴 126
單元練習(xí)題 126
單元7 表格化網(wǎng)頁(yè)布局 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　使用表格布局“圖書(shū)資源網(wǎng)”首頁(yè) 132
任務(wù)陳述 132
相關(guān)知識(shí)與技能 133
7.2.1 “圖書(shū)資源網(wǎng)”首頁(yè)效果分析 133
任務(wù)實(shí)施 133
7.2.2　插入與編輯表格 133
7.2.3　在表格中插入網(wǎng)頁(yè)元素 134
7.2.4　導(dǎo)入表格式數(shù)據(jù) 135
任務(wù)拓展 136
7.2.5　進(jìn)一步美化“圖書(shū)資源網(wǎng)”首頁(yè) 136
單元實(shí)訓(xùn)7.3　使用表格布局兩個(gè)不同主題的網(wǎng)頁(yè) 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)頁(yè) 142
任務(wù)8.1　設(shè)計(jì)制作“古詩(shī)欣賞”網(wǎng)頁(yè) 142
任務(wù)陳述 142
相關(guān)知識(shí)與技能 142
8.1.1　盒子模型 142
8.1.2　元素的定位 144
任務(wù)實(shí)施 144
8.1.3 使用盒子模型設(shè)計(jì)“古詩(shī)欣賞”網(wǎng)頁(yè) 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è)人博客頁(yè)面 149
任務(wù)陳述 149
相關(guān)知識(shí)與技能 150
8.2.1　常用Div+CSS布局版式 150
任務(wù)實(shí)施 154
8.2.2　使用Div+CSS布局個(gè)人博客頁(yè)面 154
任務(wù)拓展 158
8.2.3　定位在網(wǎng)頁(yè)布局中的應(yīng)用 158
單元實(shí)訓(xùn)8.3　Div+CSS網(wǎng)頁(yè)布局案例 160
8.3.1　使用Div+CSS實(shí)現(xiàn)婚紗網(wǎng)站最新作品列表設(shè)置 160
8.3.2　使用Div+CSS布局學(xué)院教學(xué)成果申報(bào)網(wǎng)站首頁(yè) 161
思政點(diǎn)滴 162
單元練習(xí)題 162
單元9 多媒體網(wǎng)頁(yè)和網(wǎng)頁(yè)特效 164
任務(wù)9.1　制作多媒體網(wǎng)頁(yè) 164
任務(wù)陳述 164
相關(guān)知識(shí)與技能 164
9.1.1 認(rèn)識(shí)多媒體元素 164
任務(wù)實(shí)施 167
9.1.2　制作“電子相冊(cè)”網(wǎng)頁(yè) 167
任務(wù)拓展 169
9.1.3　制作休閑娛樂(lè)多媒體網(wǎng)頁(yè) 169
任務(wù)9.2　創(chuàng)建網(wǎng)頁(yè)特效 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)頁(yè)加載時(shí)彈出公告頁(yè) 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)頁(yè)和創(chuàng)建網(wǎng)頁(yè)特效案例 181
9.3.1　實(shí)訓(xùn)一　制作動(dòng)態(tài)的“美食展示”網(wǎng)頁(yè) 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)頁(yè) 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)頁(yè) 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)名頁(yè)面 194
10.2.2　實(shí)訓(xùn)二　設(shè)計(jì)客戶調(diào)查頁(yè)面 194
思政點(diǎn)滴 195
單元練習(xí)題 195
單元11 使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)的交互 197
任務(wù)11.1　使用JavaScript實(shí)現(xiàn)下拉菜單 197
任務(wù)陳述 197
相關(guān)知識(shí)與技能 198
11.1.1　JavaScript簡(jiǎn)介 198
11.1.2　JavaScript的使用方法 198
11.1.3　JavaScript語(yǔ)言基礎(chǔ) 200
11.1.4　流程控制語(yǔ)句 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)頁(yè)特效 218
11.2.1 使用JavaScript制作兩款網(wǎng)頁(yè)特效 218
11.2.2 使用JavaScript完成下拉列表項(xiàng)左右移動(dòng) 220
思政點(diǎn)滴 221
單元練習(xí)題 221
單元12 使用模板設(shè)計(jì)網(wǎng)頁(yè) 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)頁(yè) 227
任務(wù)拓展 229
12.1.5　管理模板 229
任務(wù)12.2　應(yīng)用庫(kù)項(xiàng)目 230
任務(wù)陳述 230
相關(guān)知識(shí)與技能 231
12.2.1　庫(kù)概述 231
任務(wù)實(shí)施 232
12.2.2　創(chuàng)建庫(kù)項(xiàng)目 232
12.2.3　在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目 232
任務(wù)拓展 234
12.2.4　更新庫(kù)項(xiàng)目 234
單元實(shí)訓(xùn)12.3　使用模板創(chuàng)建網(wǎng)頁(yè)及在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目 234
12.3.1　實(shí)訓(xùn)一　使用模板創(chuàng)建網(wǎng)頁(yè) 234
12.3.2　實(shí)訓(xùn)二　在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(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　通過(guò)論壇推廣網(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)站首頁(yè)設(shè)計(jì) 261
14.1.6　欄目頁(yè)設(shè)計(jì) 269
任務(wù)拓展 269
14.1.7　type.css參考代碼 269
任務(wù)14.2　設(shè)計(jì)制作企業(yè)類(lèi)網(wǎng)站 274
任務(wù)陳述 274
相關(guān)知識(shí)與技能 274
14.2.1　企業(yè)類(lèi)網(wǎng)站首頁(yè)的布局規(guī)劃 274
任務(wù)實(shí)施 275
14.2.2　布局網(wǎng)站首頁(yè) 275
14.2.3　搭建首頁(yè)頁(yè)頭的Div 277
14.2.4　搭建“公司簡(jiǎn)介”部分的Div 278
14.2.5　首頁(yè)主體部分的Div 278
14.2.6　欄目頁(yè)設(shè)計(jì) 280
14.2.7　Flash動(dòng)畫(huà)展示部分的Div 282
14.2.8　搭建“產(chǎn)品系列”部分的Div 283