網(wǎng)頁(yè)設(shè)計(jì)與制作微課教程（第4版）

單元1 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)\t1
任務(wù)1．1　認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站\t1
任務(wù)陳述\t1
相關(guān)知識(shí)與技能\t2
1．1．1　什么是網(wǎng)頁(yè)\t2
1．1．2　網(wǎng)頁(yè)類型\t2
1．1．3　網(wǎng)頁(yè)基本元素\t3
1．1．4　網(wǎng)頁(yè)的構(gòu)成\t5
1．1．5　網(wǎng)頁(yè)設(shè)計(jì)常用基本語言\t6
1．1．6　什么是網(wǎng)站\t7
1．1．7　網(wǎng)址與域名\t7
任務(wù)實(shí)施\t8
1．1．8　網(wǎng)站建設(shè)的一般流程\t8
任務(wù)拓展\t9
1．1．9　實(shí)踐演練――京東官網(wǎng)頁(yè)面體驗(yàn)\t9
任務(wù)1．2　使用HTML制作簡(jiǎn)單的網(wǎng)頁(yè)\t9
任務(wù)陳述\t9
相關(guān)知識(shí)與技能\t9
1．2．1　HTML5簡(jiǎn)介\t9
1．2．2　HTML5基本語法與結(jié)構(gòu)\t11
1．2．3　常用HTML5標(biāo)簽\t12
任務(wù)實(shí)施\t22
1．2．4　使用記事本編輯簡(jiǎn)單網(wǎng)頁(yè)\t22
任務(wù)拓展\t23
1．2．5　制作滾動(dòng)圖片鏈接\t23
單元實(shí)訓(xùn)1．3　制作個(gè)人簡(jiǎn)介網(wǎng)頁(yè)\t24
思政點(diǎn)滴\t24
單元練習(xí)題\t25
單元2 網(wǎng)頁(yè)版式設(shè)計(jì)與色彩搭配\t26
任務(wù)2．1　網(wǎng)頁(yè)版式設(shè)計(jì)\t26
任務(wù)陳述\t26
相關(guān)知識(shí)與技能\t27
2．1．1　版式設(shè)計(jì)概述\t27
2．1．2　網(wǎng)頁(yè)版式的尺寸和構(gòu)成要素\t27
2．1．3　網(wǎng)頁(yè)版式設(shè)計(jì)的風(fēng)格\t28
2．1．4　網(wǎng)頁(yè)版式設(shè)計(jì)原則\t30
2．1．5　網(wǎng)頁(yè)版式設(shè)計(jì)的視覺流程\t30
2．1．6　網(wǎng)頁(yè)版式設(shè)計(jì)的步驟\t31
任務(wù)實(shí)施\t31
2．1．7　欣賞與解析不同風(fēng)格網(wǎng)頁(yè)作品\t31
任務(wù)拓展\t32
2．1．8　總結(jié)不同主題網(wǎng)站頁(yè)面版式設(shè)計(jì)風(fēng)格\t32
任務(wù)2．2　網(wǎng)頁(yè)色彩搭配\t33
任務(wù)陳述\t33
相關(guān)知識(shí)與技能\t33
2．2．1　色彩基礎(chǔ)知識(shí)\t33
2．2．2　色彩的視覺效果\t34
2．2．3　網(wǎng)頁(yè)中色彩的作用\t36
2．2．4　網(wǎng)頁(yè)配色原理\t36
2．2．5　網(wǎng)頁(yè)配色技巧\t37
2．2．6　網(wǎng)頁(yè)中色彩的表示\t37
任務(wù)實(shí)施\t38
2．2．7　總結(jié)不同主題網(wǎng)站的配色風(fēng)格\t38
任務(wù)拓展\t38
2．2．8　網(wǎng)頁(yè)配色練習(xí)\t38
單元實(shí)訓(xùn)2．3　校友網(wǎng)首頁(yè)效果圖設(shè)計(jì)\t39
思政點(diǎn)滴\t39
單元練習(xí)題\t40
單元3 Dreamweaver CC工具的使用\t41
任務(wù)3．1　認(rèn)識(shí)中文版Dreamweaver CC\t41
任務(wù)陳述\t41
相關(guān)知識(shí)與技能\t41
3．1．1　Dreamweaver CC界面介紹\t41
3．1．2　Dreamweaver CC初始化設(shè)置\t45
任務(wù)實(shí)施\t46
3．1．3　在Dreamweaver CC中創(chuàng)建、保存網(wǎng)頁(yè)文件\t46
任務(wù)拓展\t47
3．1．4　在Dreamweaver CC中創(chuàng)建簡(jiǎn)單文本頁(yè)面\t47
3．1．5　預(yù)覽網(wǎng)頁(yè)文檔\t47
任務(wù)3．2　規(guī)劃與創(chuàng)建站點(diǎn)\t48
任務(wù)陳述\t48
相關(guān)知識(shí)與技能\t48
3．2．1　站點(diǎn)概述\t48
3．2．2　規(guī)劃站點(diǎn)\t49
任務(wù)實(shí)施\t49
3．2．3　創(chuàng)建本地站點(diǎn)\t49
3．2．4　管理站點(diǎn)\t51
任務(wù)拓展\t53
3．2．5　創(chuàng)建“歡迎光臨”網(wǎng)頁(yè)\t53
3．2．6　設(shè)置頁(yè)面屬性\t53
單元實(shí)訓(xùn)3．3　制作“我的網(wǎng)上家園”歡迎頁(yè)面\t58
思政點(diǎn)滴\t59
單元練習(xí)題\t59
單元4 CSS3樣式\t60
任務(wù)4．1　定義CSS3基礎(chǔ)樣式\t60
任務(wù)陳述\t60
相關(guān)知識(shí)與技能\t60
4．1．1　CSS3簡(jiǎn)介\t60
4．1．2　CSS3樣式設(shè)置規(guī)則\t62
4．1．3　CSS3基本選擇器\t63
4．1．4　CSS3樣式的調(diào)用\t65
任務(wù)實(shí)施\t66
4．1．5　布局及定義CSS3基礎(chǔ)樣式\t66
4．1．6　鏈接或?qū)胪獠緾SS3樣式\t73
4．1．7　查看CSS3樣式\t74
4．1．8　編輯與刪除CSS3屬性\t74
4．1．9　常用CSS3屬性含義及屬性值\t74
任務(wù)拓展\t76
4．1．10　使用CSS美化網(wǎng)頁(yè)\t76
任務(wù)4．2　CSS3高級(jí)特性及應(yīng)用\t78
任務(wù)陳述\t78
相關(guān)知識(shí)與技能\t78
4．2．1　CSS3的新增選擇器\t78
4．2．2　CSS3的特性\t80
任務(wù)實(shí)施\t81
4．2．3　使用CSS3設(shè)置文字特效\t81
任務(wù)拓展\t83
4．2．4　CSS3瀏覽器兼容性設(shè)置\t83
單元實(shí)訓(xùn)4．3　使用CSS3樣式設(shè)計(jì)新浪新聞網(wǎng)頁(yè)\t84
思政點(diǎn)滴\t86
單元練習(xí)題\t86
單元5 網(wǎng)頁(yè)文本和圖像\t87
任務(wù)5．1　制作文本類網(wǎng)頁(yè)\t87
任務(wù)陳述\t87
相關(guān)知識(shí)與技能\t87
5．1．1　在網(wǎng)頁(yè)中添加文本元素\t87
5．1．2　在網(wǎng)頁(yè)中創(chuàng)建與設(shè)置列表\t88
任務(wù)實(shí)施\t90
5．1．3　制作唐詩(shī)賞析網(wǎng)頁(yè)\t90
5．1．4　設(shè)置文本屬性\t91
5．1．5　使用CSS設(shè)置段落樣式\t93
任務(wù)拓展\t94
5．1．6　插入特殊字符、水平線和日期\t94
任務(wù)5．2　在網(wǎng)頁(yè)中插入圖像\t96
任務(wù)陳述\t96
相關(guān)知識(shí)與技能\t96
5．2．1　網(wǎng)頁(yè)中常用的圖像格式\t96
任務(wù)實(shí)施\t96
5．2．2　在網(wǎng)頁(yè)中添加圖像元素\t96
5．2．3　設(shè)置網(wǎng)頁(yè)圖像屬性\t97
5．2．4　用CSS設(shè)置網(wǎng)頁(yè)圖像樣式\t98
5．2．5　用CSS設(shè)置網(wǎng)頁(yè)的背景圖像\t100
任務(wù)拓展\t101
5．2．6　插入鼠標(biāo)經(jīng)過圖像\t101
5．2．7　圖文混排――設(shè)計(jì)制作電影介紹網(wǎng)站頁(yè)面\t102
單元實(shí)訓(xùn)5．3　設(shè)計(jì)制作圖書推薦網(wǎng)頁(yè)\t104
思政點(diǎn)滴\t105
單元練習(xí)題\t106
單元6 網(wǎng)頁(yè)超鏈接與導(dǎo)航\t107
任務(wù)6．1　為網(wǎng)頁(yè)增加超鏈接元素\t107
任務(wù)陳述\t107
相關(guān)知識(shí)與技能\t107
6．1．1　超鏈接概述\t107
6．1．2　創(chuàng)建各類超鏈接\t109
任務(wù)實(shí)施\t112
6．1．3 為臘八節(jié)網(wǎng)頁(yè)添加超鏈接\t112
任務(wù)拓展\t114
6．1．4　用CSS設(shè)置超鏈接\t114
6．1．5　創(chuàng)建圖像地圖\t115
任務(wù)6．2　設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航\t115
任務(wù)陳述\t115
相關(guān)知識(shí)與技能\t116
6．2．1　網(wǎng)頁(yè)導(dǎo)航概述\t116
6．2．2　網(wǎng)頁(yè)導(dǎo)航分類\t116
6．2．3　網(wǎng)頁(yè)導(dǎo)航方向\t119
任務(wù)實(shí)施\t119
6．2．4　為“中國(guó)地理”網(wǎng)頁(yè)增加垂直方向?qū)Ш絓t119
任務(wù)拓展\t122
6．2．5　為“中國(guó)地理”網(wǎng)頁(yè)增加水平方向?qū)Ш絓t122
單元實(shí)訓(xùn)6．3　設(shè)計(jì)制作“點(diǎn)點(diǎn)星空”網(wǎng)站頁(yè)面\t124
思政點(diǎn)滴\t126
單元練習(xí)題\t126
單元7 表格化網(wǎng)頁(yè)布局\t127
任務(wù)7．1　表格的插入與編輯\t127
任務(wù)陳述\t127
相關(guān)知識(shí)與技能\t127
7．1．1　認(rèn)識(shí)表格\t127
7．1．2　表格標(biāo)簽\t128
7．1．3　表格屬性面板\t128
任務(wù)實(shí)施\t129
7．1．4　插入表格\t129
7．1．5　編輯表格\t130
任務(wù)拓展\t132
7．1．6　美化表格\t132
任務(wù)7．2　使用表格布局“圖書資源網(wǎng)”首頁(yè)\t132
任務(wù)陳述\t132
相關(guān)知識(shí)與技能\t133
7．2．1 “圖書資源網(wǎng)”首頁(yè)效果分析\t133
任務(wù)實(shí)施\t133
7．2．2　插入與編輯表格\t133
7．2．3　在表格中插入網(wǎng)頁(yè)元素\t134
7．2．4　導(dǎo)入表格式數(shù)據(jù)\t135
任務(wù)拓展\t136
7．2．5　進(jìn)一步美化“圖書資源網(wǎng)”首頁(yè)\t136
單元實(shí)訓(xùn)7．3　使用表格布局兩個(gè)不同主題的網(wǎng)頁(yè)\t137
7．3．1　實(shí)訓(xùn)一　設(shè)計(jì)制作“旅游信息網(wǎng)”\t137
7．3．2　實(shí)訓(xùn)二　設(shè)計(jì)制作“時(shí)尚禮品網(wǎng)”\t138
思政點(diǎn)滴\t140
單元練習(xí)題\t141
單元8 使用Div+CSS布局網(wǎng)頁(yè)\t142
任務(wù)8．1　設(shè)計(jì)制作“古詩(shī)欣賞”網(wǎng)頁(yè)\t142
任務(wù)陳述\t142
相關(guān)知識(shí)與技能\t142
8．1．1　盒子模型\t142
8．1．2　元素的定位\t144
任務(wù)實(shí)施\t144
8．1．3 使用盒子模型設(shè)計(jì)“古詩(shī)欣賞”網(wǎng)頁(yè)\t144
任務(wù)拓展\t146
8．1．4　模擬實(shí)現(xiàn)Windows10桌面效果\t146
8．1．5　Div標(biāo)簽與span標(biāo)簽\t148
任務(wù)8．2　設(shè)計(jì)個(gè)人博客頁(yè)面\t149
任務(wù)陳述\t149
相關(guān)知識(shí)與技能\t150
8．2．1　常用Div+CSS布局版式\t150
任務(wù)實(shí)施\t154
8．2．2　使用Div+CSS布局個(gè)人博客頁(yè)面\t154
任務(wù)拓展\t158
8．2．3　定位在網(wǎng)頁(yè)布局中的應(yīng)用\t158
單元實(shí)訓(xùn)8．3　Div+CSS網(wǎng)頁(yè)布局案例\t160
8．3．1　使用Div+CSS實(shí)現(xiàn)婚紗網(wǎng)站最新作品列表設(shè)置\t160
8．3．2　使用Div+CSS布局學(xué)院教學(xué)成果申報(bào)網(wǎng)站首頁(yè)\t161
思政點(diǎn)滴\t162
單元練習(xí)題\t162
單元9 多媒體網(wǎng)頁(yè)和網(wǎng)頁(yè)特效\t164
任務(wù)9．1　制作多媒體網(wǎng)頁(yè)\t164
任務(wù)陳述\t164
相關(guān)知識(shí)與技能\t164
9．1．1 認(rèn)識(shí)多媒體元素\t164
任務(wù)實(shí)施\t167
9．1．2　制作“電子相冊(cè)”網(wǎng)頁(yè)\t167
任務(wù)拓展\t169
9．1．3　制作休閑娛樂多媒體網(wǎng)頁(yè)\t169
任務(wù)9．2　創(chuàng)建網(wǎng)頁(yè)特效\t171
任務(wù)陳述\t171
相關(guān)知識(shí)與技能\t171
9．2．1　行為概述\t171
9．2．2　動(dòng)作與事件\t172
9．2．3　添加行為\t174
任務(wù)實(shí)施\t174
9．2．4　制作網(wǎng)頁(yè)加載時(shí)彈出公告頁(yè)\t174
9．2．5　使用行為設(shè)置交換圖像特效\t175
9．2．6　使用行為設(shè)置文本特效\t177
任務(wù)拓展\t179
9．2．7　使用行為設(shè)置跳轉(zhuǎn)菜單效果\t179
單元實(shí)訓(xùn)9．3　制作多媒體網(wǎng)頁(yè)和創(chuàng)建網(wǎng)頁(yè)特效案例\t181
9．3．1　實(shí)訓(xùn)一　制作動(dòng)態(tài)的“美食展示”網(wǎng)頁(yè)\t181
9．3．2　實(shí)訓(xùn)二　設(shè)置變換圖像的導(dǎo)航欄\t181
思政點(diǎn)滴\t182
單元練習(xí)題\t183
單元10 使用表單對(duì)象\t184
任務(wù)10．1　設(shè)計(jì)會(huì)員注冊(cè)網(wǎng)頁(yè)\t184
任務(wù)陳述\t184
相關(guān)知識(shí)與技能\t185
10．1．1　表單\t185
10．1．2　表單對(duì)象\t186
任務(wù)實(shí)施\t188
10．1．3　布局會(huì)員注冊(cè)網(wǎng)頁(yè)\t188
10．1．4　插入文本域\t189
10．1．5　插入單選按鈕\t190
10．1．6　插入復(fù)選框\t191
10．1．7　插入選擇\t192
10．1．8　插入按鈕\t193
單元實(shí)訓(xùn)10．2　表單的應(yīng)用\t193
10．2．1　實(shí)訓(xùn)一　設(shè)計(jì)網(wǎng)上報(bào)名頁(yè)面\t194
10．2．2　實(shí)訓(xùn)二　設(shè)計(jì)客戶調(diào)查頁(yè)面\t194
思政點(diǎn)滴\t195
單元練習(xí)題\t195
單元11 使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)的交互\t197
任務(wù)11．1　使用JavaScript實(shí)現(xiàn)下拉菜單\t197
任務(wù)陳述\t197
相關(guān)知識(shí)與技能\t198
11．1．1　JavaScript簡(jiǎn)介\t198
11．1．2　JavaScript的使用方法\t198
11．1．3　JavaScript語言基礎(chǔ)\t200
11．1．4　流程控制語句\t205
11．1．5　函數(shù)的定義與調(diào)用\t211
任務(wù)實(shí)施\t214
11．1．6 下拉菜單的設(shè)計(jì)與實(shí)現(xiàn)\t214
任務(wù)拓展\t217
11．1．7 使用JavaScript腳本實(shí)現(xiàn)“省份”下拉菜單\t217
單元實(shí)訓(xùn)11．2　使用JavaScript制作網(wǎng)頁(yè)特效\t218
11．2．1 使用JavaScript制作兩款網(wǎng)頁(yè)特效\t218
11．2．2 使用JavaScript完成下拉列表項(xiàng)左右移動(dòng)\t220
思政點(diǎn)滴\t221
單元練習(xí)題\t221
單元12 使用模板設(shè)計(jì)網(wǎng)頁(yè)\t223
任務(wù)12．1　創(chuàng)建基于模板的時(shí)尚禮品網(wǎng)\t223
任務(wù)陳述\t223
相關(guān)知識(shí)與技能\t224
12．1．1　模板概述\t224
12．1．2　創(chuàng)建模板\t224
12．1．3　定義模板的可編輯區(qū)域\t226
任務(wù)實(shí)施\t227
12．1．4　創(chuàng)建基于模板的網(wǎng)頁(yè)\t227
任務(wù)拓展\t229
12．1．5　管理模板\t229
任務(wù)12．2　應(yīng)用庫(kù)項(xiàng)目\t230
任務(wù)陳述\t230
相關(guān)知識(shí)與技能\t231
12．2．1　庫(kù)概述\t231
任務(wù)實(shí)施\t232
12．2．2　創(chuàng)建庫(kù)項(xiàng)目\t232
12．2．3　在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目\t232
任務(wù)拓展\t234
12．2．4　更新庫(kù)項(xiàng)目\t234
單元實(shí)訓(xùn)12．3　使用模板創(chuàng)建網(wǎng)頁(yè)及在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目\t234
12．3．1　實(shí)訓(xùn)一　使用模板創(chuàng)建網(wǎng)頁(yè)\t234
12．3．2　實(shí)訓(xùn)二　在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目\t236
思政點(diǎn)滴\t237
單元練習(xí)題\t237
單元13 網(wǎng)站的發(fā)布與推廣\t239
任務(wù)13．1　免費(fèi)空間的申請(qǐng)及使用\t239
任務(wù)陳述\t239
相關(guān)知識(shí)與技能\t239
13．1．1　FTP上傳工具\(yùn)t239
任務(wù)實(shí)施\t240
13．2．2　申請(qǐng)免費(fèi)空間\t240
13．2．3　發(fā)布站點(diǎn)\t242
任務(wù)13．2　域名注冊(cè)及收費(fèi)空間的申請(qǐng)\t243
任務(wù)陳述\t243
相關(guān)知識(shí)與技能\t244
13．2．1　域名\t244
13．2．2　網(wǎng)站空間\t245
任務(wù)實(shí)施\t245
13．2．3　注冊(cè)域名\t245
13．2．4　租用服務(wù)器空間\t246
任務(wù)13．3　網(wǎng)站的宣傳與推廣\t249
任務(wù)陳述\t249
相關(guān)知識(shí)與技能\t249
13．3．1　網(wǎng)站推廣的作用\t249
13．3．2　網(wǎng)站推廣的方法\t250
任務(wù)實(shí)施\t252
13．3．3　將網(wǎng)站提交給百度搜索引擎\t252
13．3．4　使用論壇推廣網(wǎng)站\t253
任務(wù)拓展\t254
13．3．5　搜索引擎優(yōu)化\t254
單元實(shí)訓(xùn)13．4　通過論壇推廣網(wǎng)站\t255
思政點(diǎn)滴\t255
單元練習(xí)題\t255
單元14 綜合實(shí)戰(zhàn)項(xiàng)目\t256
任務(wù)14．1　設(shè)計(jì)制作工作室網(wǎng)站\t256
任務(wù)陳述\t256
相關(guān)知識(shí)與技能\t256
14．1．1　網(wǎng)站建設(shè)流程\t256
任務(wù)實(shí)施\t258
14．1．2　網(wǎng)站需求分析\t258
14．1．3　網(wǎng)站原型設(shè)計(jì)\t258
14．1．4　創(chuàng)建站點(diǎn)\t260
14．1．5　網(wǎng)站首頁(yè)設(shè)計(jì)\t261
14．1．6　欄目頁(yè)設(shè)計(jì)\t269
任務(wù)拓展\t269
14．1．7　type．css參考代碼\t269
任務(wù)14．2　設(shè)計(jì)制作企業(yè)類網(wǎng)站\t274
任務(wù)陳述\t274
相關(guān)知識(shí)與技能\t274
14．2．1　企業(yè)類網(wǎng)站首頁(yè)的布局規(guī)劃\t274
任務(wù)實(shí)施\t275
14．2．2　布局網(wǎng)站首頁(yè)\t275
14．2．3　搭建首頁(yè)頁(yè)頭的Div\t277
14．2．4　搭建“公司簡(jiǎn)介”部分的Div\t278
14．2．5　首頁(yè)主體部分的Div\t278
14．2．6　欄目頁(yè)設(shè)計(jì)\t280
14．2．7　Flash動(dòng)畫展示部分的Div\t282
14．2．8　搭建“產(chǎn)品系列”部分的Div\t283