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