網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（HTML+CSS+JavaScript 第2版）

標(biāo)簽　29
【任務(wù)2-3】HTML圖像應(yīng)用　30
需求分析　30
知識(shí)儲(chǔ)備　30
1．　常用圖像格式　30
2．　圖像標(biāo)簽　31
3．　相對(duì)路徑和絕對(duì)路徑　33
知識(shí)拓展　34
切圖　34
【任務(wù)2-4】頁(yè)面建設(shè)準(zhǔn)備工作　35
網(wǎng)站素材整理　35
1．　建立網(wǎng)站站點(diǎn)　35
2．　“博客”頁(yè)面切圖　36
頁(yè)面結(jié)構(gòu)分析　36
頁(yè)面布局　37
【任務(wù)2-5】制作“頭部”模塊　38
效果分析　38
模塊制作　38
【任務(wù)2-6】制作“博主簡(jiǎn)介”模塊　39
效果分析　39
模塊制作　39
【任務(wù)2-7】制作“旅行隨筆”模塊　40
效果分析　40
模塊制作　41
【任務(wù)2-8】制作“驢友評(píng)論”模塊　42
效果分析　42
模塊制作　43
【任務(wù)2-9】制作“頁(yè)腳”模塊　44
效果分析　44
模塊制作　44
【項(xiàng)目總結(jié)】　45
【課后練習(xí)】　45
項(xiàng)目3　“網(wǎng)上花店”專題頁(yè)制作　47
【項(xiàng)目描述】　47
【任務(wù)3-1】CSS核心基礎(chǔ)　48
需求分析　48
知識(shí)儲(chǔ)備　48
1．　結(jié)構(gòu)與表現(xiàn)分離　48
2．　CSS樣式規(guī)則　49
3．　CSS樣式表的引入　49
4．　CSS基礎(chǔ)選擇器　53
【任務(wù)3-2】CSS文本樣式屬性　55
需求分析　55
知識(shí)儲(chǔ)備　55
1．　CSS字體樣式屬性　55
2．　CSS文本外觀屬性　58
知識(shí)拓展　62
使用CSS定義背景顏色　62
【任務(wù)3-3】CSS高級(jí)特性　63
需求分析　63
知識(shí)儲(chǔ)備　63
1．　CSS復(fù)合選擇器　63
2．　CSS層疊性與繼承性　65
3．　CSS優(yōu)先級(jí)　66
【任務(wù)3-4】頁(yè)面建設(shè)準(zhǔn)備工作　68
網(wǎng)站素材整理　68
1．　建立網(wǎng)站站點(diǎn)　68
2．　“網(wǎng)上花店”專題頁(yè)切圖　68
頁(yè)面結(jié)構(gòu)分析　69
1．　HTML結(jié)構(gòu)分析　69
2．　CSS樣式分析　70
定義基礎(chǔ)樣式　70
1．　頁(yè)面布局　70
2．　公共樣式設(shè)置　70
【任務(wù)3-5】制作“標(biāo)題”模塊　70
效果分析　70
1．　結(jié)構(gòu)分析　70
2．　樣式分析　71
模塊制作　71
1．　搭建結(jié)構(gòu)　71
2．　控制樣式　71
【任務(wù)3-6】制作“分類”模塊　71
效果分析　71
1．　結(jié)構(gòu)分析　71
2．　樣式分析　72
模塊制作　72
1．　搭建結(jié)構(gòu)　72
2．　控制樣式　72
【任務(wù)3-7】制作“熱賣”模塊　73
效果分析　73
1．　結(jié)構(gòu)分析　73
2．　樣式分析　74
模塊制作　74
1．　搭建結(jié)構(gòu)　74
2．　控制樣式　74
【任務(wù)3-8】制作“頁(yè)腳”模塊　75
效果分析　75
1．　結(jié)構(gòu)分析　75
2．　樣式分析　75
模塊制作　75
1．　搭建結(jié)構(gòu)　75
2．　控制樣式　75
【項(xiàng)目總結(jié)】　76
【課后練習(xí)】　76
項(xiàng)目4　“愛家居”企業(yè)網(wǎng)站首頁(yè)制作　78
【項(xiàng)目描述】　78
【任務(wù)4-1】認(rèn)識(shí)盒子模型　79
需求分析　79
知識(shí)儲(chǔ)備　79
【任務(wù)4-2】盒子模型基礎(chǔ)屬性　80
需求分析　80
知識(shí)儲(chǔ)備　80
1．　邊框?qū)傩浴?0
2．　內(nèi)邊距屬性　85
3．　外邊距屬性　86
4．　背景屬性　88
5．　寬度屬性和高度屬性　91
【任務(wù)4-3】盒子模型新增屬性　92
需求分析　92
知識(shí)儲(chǔ)備　92
1．　顏色透明　92
2．　圓角　93
3．　陰影　95
4．　漸變　96
【任務(wù)4-4】元素的類型與轉(zhuǎn)換　100
需求分析　100
知識(shí)儲(chǔ)備　100
1．　元素的類型　100
2．　標(biāo)簽　101
3．　元素類型的轉(zhuǎn)換　102
知識(shí)拓展　104
塊元素垂直外邊距的合并　104
【任務(wù)4-5】元素的浮動(dòng)　106
需求分析　106
知識(shí)儲(chǔ)備　106
1．　元素的浮動(dòng)屬性　106
2．　清除浮動(dòng)　108
3．　overflow屬性　112
【任務(wù)4-6】元素的定位　113
需求分析　113
知識(shí)儲(chǔ)備　113
1．　元素的定位屬性　113
2．　靜態(tài)定位　114
3．　相對(duì)定位　114
4．　絕對(duì)定位　115
5．　固定定位　116
6．　z-index屬性　116
【任務(wù)4-7】頁(yè)面建設(shè)準(zhǔn)備工作　117
網(wǎng)站素材的整理　117
1．　建立網(wǎng)站站點(diǎn)　117
2．　“愛家居”企業(yè)網(wǎng)站首頁(yè)切圖　117
頁(yè)面結(jié)構(gòu)分析　117
1．　HTML結(jié)構(gòu)分析　117
2．　CSS樣式分析　118
定義基礎(chǔ)樣式　118
1．　頁(yè)面布局　118
2．　定義基礎(chǔ)樣式　119
【任務(wù)4-8】制作“導(dǎo)航及banner”
模塊　119
效果分析　119
1．　結(jié)構(gòu)分析　119
2．　樣式分析　119
模塊制作　120
1．　搭建結(jié)構(gòu)　120
2．　控制樣式　120
【任務(wù)4-9】制作“熱門推薦”模塊　121
效果分析　121
1．　結(jié)構(gòu)分析　121
2．　樣式分析　121
模塊制作　122
1．　搭建結(jié)構(gòu)　122
2．　控制樣式　122
【任務(wù)4-10】制作“夏日生活”模塊　123
效果分析　123
1．　結(jié)構(gòu)分析　123
2．　樣式分析　124
模塊制作　124
1．　搭建結(jié)構(gòu)　124
2．　控制樣式　124
【任務(wù)4-11】制作“版權(quán)信息”模塊和
“懸浮框”模塊　125
效果分析　125
1．　結(jié)構(gòu)分析　125
2．　樣式分析　125
模塊制作　125
1．　搭建結(jié)構(gòu)　125
2．　控制樣式　125
【項(xiàng)目總結(jié)】　126
【課后練習(xí)】　126
項(xiàng)目5　“優(yōu)課教育”網(wǎng)站首頁(yè)制作　128
【項(xiàng)目描述】　128
【任務(wù)5-1】列表標(biāo)簽　129
需求分析　129
知識(shí)儲(chǔ)備　129
1．　無(wú)序列表　129
2．　有序列表　130
3．　定義列表　131
4．　列表的嵌套應(yīng)用　132
【任務(wù)5-2】使用CSS控制列表
項(xiàng)目符號(hào)　132
需求分析　132
知識(shí)儲(chǔ)備　132
1．　list-style復(fù)合屬性　132
2．　通過(guò)設(shè)置背景圖像的方式定義列表
項(xiàng)目符號(hào)　133
【任務(wù)5-3】超鏈接標(biāo)簽　133
需求分析　133
知識(shí)儲(chǔ)備　133
1．　創(chuàng)建超鏈接　133
2．　創(chuàng)建錨點(diǎn)鏈接　135
3．　通過(guò)鏈接偽類控制超鏈接　135
【任務(wù)5-4】頁(yè)面建設(shè)準(zhǔn)備工作　137
網(wǎng)站素材整理　137
1．　建立站點(diǎn)　137
2．　切圖　137
頁(yè)面結(jié)構(gòu)分析　138
1．　HTML結(jié)構(gòu)分析　138
2．　CSS樣式分析　138
定義基礎(chǔ)樣式　139
1．　頁(yè)面布局　139
2．　定義基礎(chǔ)樣式　139
【任務(wù)5-5】制作“導(dǎo)航”模塊　139
效果分析　139
1．　結(jié)構(gòu)分析　139
2．　樣式分析　140
模塊制作　140
1．　搭建結(jié)構(gòu)　140
2．　控制樣式　140
【任務(wù)5-6】制作“banner”模塊和
“課程分類”模塊　141
效果分析　141
1．　結(jié)構(gòu)分析　141
2．　樣式分析　141
模塊制作　141
1．　搭建結(jié)構(gòu)　141
2．　控制樣式　142
【任務(wù)5-7】制作“精品展示”模塊　143
效果分析　143
1．　結(jié)構(gòu)分析　143
2．　樣式分析　144
模塊制作　144
1．　搭建結(jié)構(gòu)　144
2．　控制樣式　144
【任務(wù)5-8】制作“版權(quán)信息”模塊　146
效果分析　146
1．　結(jié)構(gòu)分析　146
2．　樣式分析　146
模塊制作　146
1．　搭建結(jié)構(gòu)　146
2．　控制樣式　146
【項(xiàng)目總結(jié)】　147
【課后練習(xí)】　147
項(xiàng)目6　“千年之戀”注冊(cè)頁(yè)面制作　149
【項(xiàng)目描述】　149
【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)簽　150
需求分析　150
知識(shí)儲(chǔ)備　150
1．　創(chuàng)建表格　150
2．　標(biāo)簽的屬性　151
3．　標(biāo)簽的屬性　154
4．　

標(biāo)簽的屬性　155 5．

標(biāo)簽的屬性　157 【任務(wù)6-2】使用CSS控制表格樣式　157 需求分析　157 知識(shí)儲(chǔ)備　158 1．　使用CSS控制表格邊框　158 2．　使用CSS控制單元格邊距　159 3．　使用CSS控制單元格的寬度 和高度　160 【任務(wù)6-3】表單概述　161 需求分析　161 知識(shí)儲(chǔ)備　161 1．　初識(shí)表單　161 2．　創(chuàng)建表單　161 【任務(wù)6-4】基礎(chǔ)表單控件　162 需求分析　162 知識(shí)儲(chǔ)備　162 1．　input控件　162 2．　textarea控件　165 3．　select控件　166 【任務(wù)6-5】新增表單控件類型和屬性　169 需求分析　169 知識(shí)儲(chǔ)備　169 1．　新增input控件類型　169 2．　新增input控件屬性　173 【任務(wù)6-6】使用CSS控制表單樣式　179 需求分析　179 知識(shí)儲(chǔ)備　179 【任務(wù)6-7】頁(yè)面建設(shè)準(zhǔn)備工作　181 網(wǎng)站素材整理　181 1．　建立站點(diǎn)　181 2．　切圖　181 頁(yè)面結(jié)構(gòu)分析　182 1．　HTML結(jié)構(gòu)分析　182 2．　CSS樣式分析　183 定義基礎(chǔ)樣式　183 1．　頁(yè)面布局　183 2．　定義基礎(chǔ)樣式　183 【任務(wù)6-8】制作“頭部”和“導(dǎo)航” 模塊　183 效果分析　183 1．　結(jié)構(gòu)分析　183 2．　樣式分析　184 模塊制作　184 1．　搭建結(jié)構(gòu)　184 2．　控制樣式　184 【任務(wù)6-9】制作“banner”和“內(nèi)容” 模塊　185 效果分析　185 1．　結(jié)構(gòu)分析　185 2．　樣式分析　186 模塊制作　186 1．　搭建結(jié)構(gòu)　186 2．　控制樣式　187 【任務(wù)6-10】制作“頁(yè)腳”模塊　189 效果分析　189 1．　結(jié)構(gòu)分析　189 2．　樣式分析　189 模塊制作　190 1．　搭建結(jié)構(gòu)　190 2．　控制樣式　190 【項(xiàng)目總結(jié)】　190 【課后練習(xí)】　190 項(xiàng)目7　“視頻8”首頁(yè)制作　192 【項(xiàng)目描述】　192 【任務(wù)7-1】在網(wǎng)頁(yè)中嵌入視頻和音頻　193 需求分析　193 知識(shí)儲(chǔ)備　194 1．　視頻、音頻嵌入技術(shù)概述　194 2．　嵌入視頻　195 3．　嵌入音頻　197 4．　瀏覽器對(duì)視頻和音頻格式的 兼容性　197 5．　控制視頻的寬度和高度　198 【任務(wù)7-2】在網(wǎng)頁(yè)中添加過(guò)渡效果　200 需求分析　200 知識(shí)儲(chǔ)備　200 1．　transition-property屬性　200 2．　transition-duration屬性　202 3．　transition-timing-function屬性　202 4．　transition-delay屬性　203 5．　transition屬性　204 【任務(wù)7-3】在網(wǎng)頁(yè)中添加變形效果　204 需求分析　204 知識(shí)儲(chǔ)備　204 1．　2D變形　204 2．　3D變形　209 【任務(wù)7-4】在網(wǎng)頁(yè)中添加動(dòng)畫效果　212 需求分析　212 知識(shí)儲(chǔ)備　213 1．　@keyframes規(guī)則　213 2．　animation-name屬性　213 3．　animation-duration屬性　213 4．　animation-timing-function屬性　214 5．　animation-delay屬性　215 6．　animation-iteration-count屬性　215 7．　animation-direction屬性　215 8．　animation屬性　216 【任務(wù)7-5】頁(yè)面建設(shè)準(zhǔn)備工作　216 網(wǎng)站素材整理　216 1．　建立站點(diǎn)　216 2．　切圖　217 頁(yè)面結(jié)構(gòu)分析　217 1．　HTML結(jié)構(gòu)分析　217 2．　CSS樣式分析　218 定義基礎(chǔ)樣式　218 1．　頁(yè)面布局　218 2．　定義基礎(chǔ)樣式　219 【任務(wù)7-6】制作“引導(dǎo)欄”模塊　219 效果分析　219 1．　結(jié)構(gòu)分析　219 2．　樣式分析　220 模塊制作　220 1．　搭建結(jié)構(gòu)　220 2．　控制樣式　220 【任務(wù)7-7】制作“導(dǎo)航”模塊　221 效果分析　221 1．　結(jié)構(gòu)分析　221 2．　樣式分析　221 模塊制作　221 1．　搭建結(jié)構(gòu)　221 2．　控制樣式　222 【任務(wù)7-8】制作“banner”模塊　223 效果分析　223 1．　結(jié)構(gòu)分析　223 2．　樣式分析　223 模塊制作　223 1．　搭建結(jié)構(gòu)　223 2．　控制樣式　223 【任務(wù)7-9】制作“內(nèi)容”模塊　225 效果分析　225 1．　結(jié)構(gòu)分析　225 2．　樣式分析　226 模塊制作　226 1．　搭建結(jié)構(gòu)　226 2．　控制樣式　227 【任務(wù)7-10】制作“頁(yè)腳”模塊　229 效果分析　229 1．　結(jié)構(gòu)分析　229 2．　樣式分析　229 模塊制作　230 1．　搭建結(jié)構(gòu)　230 2．　控制樣式　230 【項(xiàng)目總結(jié)】　231 【課后練習(xí)】　231 項(xiàng)目8　“甜蜜約會(huì)”首頁(yè)制作　233 【項(xiàng)目描述】　233 【任務(wù)8-1】JavaScript基礎(chǔ)知識(shí)　234 需求分析　234 知識(shí)儲(chǔ)備　234 1．　JavaScript簡(jiǎn)介　234 2．　JavaScript引入方式　236 3．　JavaScript基本語(yǔ)法　237 4．　簡(jiǎn)單的JavaScript程序　238 【任務(wù)8-2】變量　239 需求分析　239 知識(shí)儲(chǔ)備　239 1．　變量的聲明　239 2．　變量的賦值　239 【任務(wù)8-3】數(shù)據(jù)類型和運(yùn)算符　240 需求分析　240 知識(shí)儲(chǔ)備　240 1．　數(shù)據(jù)類型　240 2．　運(yùn)算符　241 【任務(wù)8-4】流程控制語(yǔ)句　245 需求分析　245 知識(shí)儲(chǔ)備　245 1．　條件語(yǔ)句　245 2．　循環(huán)語(yǔ)句　250 3．　跳轉(zhuǎn)語(yǔ)句　252 【任務(wù)8-5】函數(shù)　254 需求分析　254 知識(shí)儲(chǔ)備　254 1．　函數(shù)的定義　254 2．　函數(shù)的調(diào)用　255 3．　函數(shù)中變量的作用域　255 【任務(wù)8-6】對(duì)象　256 需求分析　256 知識(shí)儲(chǔ)備　256 1．　認(rèn)識(shí)對(duì)象　256 2．　創(chuàng)建對(duì)象和刪除對(duì)象屬性　257 3．　內(nèi)置對(duì)象　258 【任務(wù)8-7】數(shù)組　262 需求分析　262 知識(shí)儲(chǔ)備　262 1．　初識(shí)數(shù)組　262 2．　創(chuàng)建數(shù)組　262 3．　數(shù)組的常用屬性和方法　263 4．　二維數(shù)組　264 【任務(wù)8-8】BOM對(duì)象與DOM對(duì)象　265 需求分析　265 知識(shí)儲(chǔ)備　265 1．　BOM對(duì)象　265 2．　DOM對(duì)象　271 【任務(wù)8-9】事件處理　276 需求分析　276 知識(shí)儲(chǔ)備　276 1．　事件和事件調(diào)用　276 2．　常用的JavaScript事件　277 【任務(wù)8-10】頁(yè)面建設(shè)準(zhǔn)備工作　278 網(wǎng)站素材整理　278 1．　建立站點(diǎn)　278 2．　切圖　278 頁(yè)面結(jié)構(gòu)分析　279 1．　HTML結(jié)構(gòu)分析　279 2．　CSS樣式分析　279 3．　JavaScript效果分析　279 定義基礎(chǔ)樣式　279 1．　頁(yè)面布局　279 2．　定義基礎(chǔ)樣式　280 3．　引入JavaScript文件　280 【任務(wù)8-11】制作“頭部及導(dǎo)航”模塊　280 效果分析　280 1．　結(jié)構(gòu)分析　280 2．　樣式分析　281 模塊制作　281 1．　搭建結(jié)構(gòu)　281 2．　控制樣式　281 【任務(wù)8-12】制作“banner”模塊　282 效果分析　282 1．　結(jié)構(gòu)分析　282 2．　樣式分析　282 3．　JavaScript特效分析　282 模塊制作　283 1．　搭建結(jié)構(gòu)　283 2．　控制樣式　283 3．　添加JavaScript效果　284 【任務(wù)8-13】制作“簡(jiǎn)介”模塊　285 效果分析　285 1．　結(jié)構(gòu)分析　285 2．　樣式分析　286 3．　JavaScript特效分析　286 模塊制作　286 1．　搭建結(jié)構(gòu)　286 2．　控制樣式　286 3．　添加JavaScript效果　288 【任務(wù)8-14】制作“推薦”模塊　288 效果分析　288 1．　結(jié)構(gòu)分析　288 2．　樣式分析　289 3．　JavaScript特效分析　289 模塊制作　289 1．　搭建結(jié)構(gòu)　289 2．　控制樣式　290 3．　添加JavaScript效果　291 【任務(wù)8-15】制作“頁(yè)腳”模塊　292 效果分析　292 1．　結(jié)構(gòu)分析　292 2．　樣式分析　292 模塊制作　293 1．　搭建結(jié)構(gòu)　293 2．　控制樣式　293 【項(xiàng)目總結(jié)】　293 【課后練習(xí)】　293