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

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