網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+JavaScript）

項目1 網(wǎng)頁制作基礎(chǔ)知識1
【任務(wù)1-1】　了解Web基本概念　2
需求分析　2
知識儲備　2
1．認(rèn)識網(wǎng)頁　2
2．網(wǎng)頁相關(guān)名詞　4
3．Web標(biāo)準(zhǔn)　5
【任務(wù)1-2】　網(wǎng)頁制作入門　6
需求分析　6
知識儲備　6
1．HTML簡介　6
2．CSS簡介　8
3．JavaScript簡介　9
4．常見瀏覽器介紹　9
【任務(wù)1-3】　Dreamweaver工具的
　使用　11
需求分析　11
知識儲備　11
1．Dreamweaver界面介紹　11
2．Dreamweaver初始化設(shè)置　15
3．創(chuàng)建第一個網(wǎng)頁　17
【項目總結(jié)】　19
【課后練習(xí)】　19
項目2　“說旅游”專題頁制作　21
【項目描述】　22
【任務(wù)2-1】　認(rèn)識HTML　23
需求分析　23
知識儲備　23
1．HTML文檔基本格式　23
2．HTML標(biāo)記　24
3．標(biāo)記的屬性　26
4．HTML文檔頭部相關(guān)標(biāo)記　27
【任務(wù)2-2】　HTML文本控制標(biāo)記　29
需求分析　29
知識儲備　29
1．標(biāo)題和段落標(biāo)記　29
2．文本樣式標(biāo)記（font）　32
3．文本格式化標(biāo)記　33
4．特殊字符標(biāo)記　34
知識拓展　35
【任務(wù)2-3】　HTML圖像標(biāo)記　36
需求分析　36
知識儲備　36
1．常用圖像格式　36
2．圖像標(biāo)記　37
3．相對路徑與絕對路徑　40
知識拓展　41
【任務(wù)2-4】　準(zhǔn)備工作與頁面布局　42
準(zhǔn)備工作　42
頁面結(jié)構(gòu)分析　44
頁面布局　45
【任務(wù)2-5】　制作“頭部”模塊　46
效果分析　46
模塊制作　46
【任務(wù)2-6】　制作“伊露島介紹”模塊　47
效果分析　47
模塊制作　47
【任務(wù)2-7】　制作“伊露島推薦”
　模塊　48
效果分析　48
模塊制作　49
【任務(wù)2-8】　制作“驢友評論”模塊　50
效果分析　50
模塊制作　51
【任務(wù)2-9】　制作“頁腳”模塊　52
效果分析　52
模塊制作　53
【項目總結(jié)】　54
【課后練習(xí)】　54
項目3　“網(wǎng)上花店”專題頁制作　56
【項目描述】　57
【任務(wù)3-1】　CSS核心基礎(chǔ)　58
需求分析　58
知識儲備　58
1．CSS樣式規(guī)則　58
2．引入CSS樣式表　59
3．CSS基礎(chǔ)選擇器　63
【任務(wù)3-2】　CSS控制文本樣式　65
需求分析　65
知識儲備　65
1．CSS字體樣式屬性　65
2．CSS文本外觀屬性　68
知識拓展　71
【任務(wù)3-3】　CSS高級特性　71
需求分析　71
知識儲備　72
1．CSS復(fù)合選擇器　72
2．CSS層疊性與繼承性　74
3．CSS優(yōu)先級　75
【任務(wù)3-4】　布局及定義基礎(chǔ)樣式　78
準(zhǔn)備工作　78
效果分析　79
定義基礎(chǔ)樣式　80
【任務(wù)3-5】　制作“標(biāo)題”模塊　81
效果分析　81
模塊制作　81
【任務(wù)3-6】　制作“分類”模塊　82
效果分析　82
模塊制作　83
【任務(wù)3-7】　制作“熱賣”模塊　84
效果分析　84
模塊制作　85
【任務(wù)3-8】　制作“頁腳”模塊　86
效果分析　86
模塊制作　87
【項目總結(jié)】　88
【課后練習(xí)】　88
項目4　“青春樹兒童攝影網(wǎng)”首頁
制作　91
【項目描述】　92
【任務(wù)4-1】　認(rèn)識盒子模型　93
需求分析　93
知識儲備　93
認(rèn)識盒子模型　93
【任務(wù)4-2】　盒子模型相關(guān)屬性　94
需求分析　94
知識儲備　95
1．邊框?qū)傩浴?5
2．內(nèi)邊距屬性　100
3．外邊距屬性　101
4．背景屬性　103
5．盒子的寬與高　107
【任務(wù)4-3】　元素的類型與轉(zhuǎn)換　108
需求分析　108
知識儲備　109
1．元素的類型　109
2．標(biāo)記　111
3．元素的轉(zhuǎn)換　112
知識拓展　114
【任務(wù)4-4】　元素的浮動　116
需求分析　116
知識儲備　117
1．元素的浮動屬性　117
2．清除浮動　119
3．overflow屬性　124
【任務(wù)4-5】　元素的定位　126
需求分析　126
知識儲備　126
1．元素的定位屬性　126
2．靜態(tài)定位　126
3．相對定位　127
4．絕對定位　128
5．固定定位　129
6．z-index層疊等級屬性　129
【任務(wù)4-6】　布局及定義基礎(chǔ)樣式　130
準(zhǔn)備工作　130
效果分析　131
定義基礎(chǔ)樣式　131
【任務(wù)4-7】　制作“導(dǎo)航”及“banner”
　模塊　132
效果分析　132
模塊制作　133
【任務(wù)4-8】　制作“最新動態(tài)”模塊　135
效果分析　135
模塊制作　135
【任務(wù)4-9】　制作“樣片欣賞”模塊　137
效果分析　137
模塊制作　138
【任務(wù)4-10】　制作“頁腳”及“懸浮框”
　模塊　139
效果分析　139
模塊制作　139
【項目總結(jié)】　140
【課后練習(xí)】　140
項目5　“穿搭速遞”首頁制作　142
【項目描述】　143
【任務(wù)5-1】　列表標(biāo)記　143
需求分析　143
知識儲備　144
1．無序列表ul　144
2．有序列表ol　144
3．定義列表dl　145
4．列表的嵌套應(yīng)用　146
【任務(wù)5-2】　CSS控制列表樣式　147
需求分析　147
知識儲備　147
1．list-style復(fù)合屬性　147
2．背景圖像定義列表項目符號　148
【任務(wù)5-3】　超鏈接標(biāo)記　149
需求分析　149
知識儲備　149
1．創(chuàng)建超鏈接　149
2．錨點(diǎn)鏈接　150
3．鏈接偽類控制超鏈接　152
【任務(wù)5-4】　布局及定義基礎(chǔ)樣式　154
準(zhǔn)備工作　154
效果分析　155
定義基礎(chǔ)樣式　155
【任務(wù)5-5】　制作“頭部”導(dǎo)航模塊　156
效果分析　156
模塊制作　156
【任務(wù)5-6】　制作“banner”和
　“精品展示”模塊　158
效果分析　158
模塊制作　159
【任務(wù)5-7】　制作“潮流前沿”模塊　162
效果分析　162
模塊制作　162
【任務(wù)5-8】　制作“版權(quán)信息”模塊　164
效果分析　164
模塊制作　165
【項目總結(jié)】　166
【課后練習(xí)】　166
項目6　“千年之戀”注冊頁面制作　168
【項目描述】　169
【任務(wù)6-1】　認(rèn)識表格相關(guān)標(biāo)記　170
需求分析　170
知識儲備　170
1．表格的創(chuàng)建　170
2．標(biāo)記的屬性　171
3．標(biāo)記的屬性　175
4．標(biāo)記的屬性　176
5．標(biāo)記及其屬性　177
【任務(wù)6-2】　CSS控制表格樣式　178
需求分析　178
知識儲備　178
1．CSS控制表格邊框　178
2．CSS控制單元格邊距　179
3．CSS控制單元格的寬高　181
【任務(wù)6-3】　認(rèn)識表單　182
需求分析　182
知識儲備　182
1．初識表單　182
2．創(chuàng)建表單　183
【任務(wù)6-4】　表單控件　184
需求分析　184
知識儲備　184
1．input控件　184
2．textarea控件　188
3．select控件　189
【任務(wù)6-5】　CSS控制表單樣式　192
需求分析　192
知識儲備　192
CSS控制表單樣式　192
【任務(wù)6-6】　布局及定義基礎(chǔ)樣式　194
準(zhǔn)備工作　194
效果分析　195
定義基礎(chǔ)樣式　196
【任務(wù)6-7】　制作頭部及導(dǎo)航模塊　197
效果分析　197
模塊制作　197
【任務(wù)6-8】　制作“banner”及“內(nèi)容”
　模塊　199
效果分析　199
模塊制作　200
【任務(wù)6-9】　制作“頁腳”模塊　204
效果分析　204
模塊制作　204
【項目總結(jié)】　205
【課后練習(xí)】　205
項目7　“趕快回家網(wǎng)”首頁制作　207
【項目描述】　208
【任務(wù)7-1】　JavaScript概述　209
需求分析　209
知識儲備　209
1．JavaScript簡介　209
2．JavaScript引入方式　210
3．JavaScript基本語法　212
4．一個簡單的JavaScript程序　213
【任務(wù)7-2】　JavaScript語言基礎(chǔ)　214
需求分析　214
知識儲備　214
1．關(guān)鍵字和標(biāo)識符　214
2．變量和數(shù)據(jù)類型　215
3．運(yùn)算符和表達(dá)式　218
【任務(wù)7-3】　流程控制語句　224
需求分析　224
知識儲備　224
1．條件語句　224
2．循環(huán)語句　229
3．跳轉(zhuǎn)語句　232
【任務(wù)7-4】　函數(shù)　234
需求分析　234
知識儲備　234
1．初識函數(shù)　234
2．函數(shù)的調(diào)用　235
3．函數(shù)中變量的作用域　235
【任務(wù)7-5】　布局及定義基礎(chǔ)樣式　236
準(zhǔn)備工作　237
效果分析　237
定義基礎(chǔ)樣式　237
【任務(wù)7-6】　制作“頭部”模塊　239
效果分析　239
模塊制作　240
【任務(wù)7-7】　制作“導(dǎo)航”模塊　243
效果分析　243
模塊制作　243
【任務(wù)7-8】　制作“banner”和“時間”
　模塊　245
效果分析　245
模塊制作　246
【任務(wù)7-9】　制作“客運(yùn)信息”模塊　248
效果分析　248
模塊制作　249
【任務(wù)7-10】　制作“底部”模塊　252
效果分析　252
模塊制作　252
【項目總結(jié)】　253
【課后練習(xí)】　253
項目8　“學(xué)好英語網(wǎng)”首頁制作　255
【項目描述】　256
【任務(wù)8-1】　認(rèn)識對象　257
需求分析　257
知識儲備　257
1．什么是對象　257
2．對象的屬性和方法　257
3．創(chuàng)建和刪除對象　257
4．內(nèi)置對象　259
【任務(wù)8-2】　Array數(shù)組對象　263
需求分析　263
知識儲備　263
1．初識數(shù)組　263
2．?dāng)?shù)組的常見操作　264
3．?dāng)?shù)組的常用屬性和方法　266
4．二維數(shù)組　268
【任務(wù)8-3】　BOM與DOM對象　269
需求分析　269
知識儲備　269
1．BOM對象　269
2．DOM對象　275
【任務(wù)8-4】　事件處理　281
需求分析　281
知識儲備　281
1．什么是事件　281
2．事件處理程序的調(diào)用　281
3．鼠標(biāo)事件　283
4．鍵盤事件　284
5．表單事件　286
6．頁面事件　287
【任務(wù)8-5】　布局及定義基礎(chǔ)樣式　289
準(zhǔn)備工作　289
效果分析　289
定義基礎(chǔ)樣式　290
【任務(wù)8-6】　制作“頭部”及“導(dǎo)航”
　模塊　292
效果分析　292
模塊制作　292
【任務(wù)8-7】　制作“banner”模塊　294
效果分析　294
模塊制作　294
【任務(wù)8-8】　制作“簡介”模塊　297
效果分析　297
模塊制作　298
【任務(wù)8-9】　制作“課程特色”模塊　301
效果分析　301
模塊制作　301
【任務(wù)8-10】　制作“頁腳”模塊　306
效果分析　306
模塊制作　306
【項目總結(jié)】　307
【課后練習(xí)】　307