網頁設計與制作項目教程（HTML+CSS+JavaScript 第2版）

定　價：￥59.80

作　者：	黑馬程序員
出版社：	人民郵電出版社
叢編項：
標　簽：	暫缺

購買這本書可以去

ISBN：	9787115565983	出版時間：	2022-02-01	包裝：
開本：	16開	頁數：	294	字數：

內容簡介

　　本書從初學者的角度出發(fā)，以實用的案例、通俗易懂的語言詳細介紹了使用HTML、CSS及JavaScript進行網頁制作的一般技巧。本書分為8個項目，結合HTML、CSS和JavaScript的基礎知識及應用，提供了7種不同類型的網頁設計案例。其中，項目1介紹了HTML、CSS和JavaScript的基礎知識，包括Web基本概念、HTML簡介、CSS簡介、JavaScript簡介、Dreamweaver工具的使用等；項目2～項目8為7個完整的網頁設計項目，涉及“博客”“網店”“家居”“教育”“婚戀”“視頻”“美食”多個方向，有助于讀者掌握不同網站的設計風格和制作技巧。本書以項目為導向，通過項目將相關知識點串聯(lián)起來，學完項目內容就能基本掌握如何制作一個完整的項目頁面，從而極大地激發(fā)讀者的學習興趣。本書附有源代碼、習題、教學課件等資源，并且為了幫助初學者更好地學習，編者還提供了在線答疑，希望可以幫助更多的讀者。本書既可作為高等院校本、專科相關專業(yè)的網頁設計與制作課程的教材，也可作為網頁平面設計的培訓教材，還可作為網頁制作、美工設計、網站開發(fā)、網頁編程等行業(yè)從業(yè)人員的參考讀物。

作者簡介

　　黑馬程序員，傳智播客成立于2006年，它是由中國Java培訓先行者張孝祥老師發(fā)起，聯(lián)合全球**的中文IT社區(qū)CSDN、中關村軟件園共同創(chuàng)辦的一家專業(yè)教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學理念，堅持培養(yǎng)優(yōu)秀軟件應用工程師的宏偉目標，在累計培養(yǎng)的十萬余名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業(yè)，特別是“黑馬程序員”的平均就業(yè)薪資已達到8K以上。為了迎合軟件市場的需求，我們陸續(xù)開設了Java、網頁平面、PHP、.Net、iOS、C/C++、Android等9個專業(yè)方向的課程，并且未來將逐漸開設其他專業(yè)方向的課程。隨著傳智播客的日益壯大，除了北京總部，我們在上海、廣州、武漢、成都、深圳等地也創(chuàng)立了直營分支機構，傳智播客儼然已成為了國內**專業(yè)口碑的IT教育機構。

圖書目錄

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

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

標簽的屬性　155
5．　

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