全書分為8個項目，結合HTML、CSS和JavaScript的基礎知識及應用，提供了7種不同類型的網頁設計案例。其中，項目1介紹了HTML、CSS以及JavaScript的基礎知識，包括Web基本概念、Dreamweaver工具的使用等；項目2至項目8為7個完整的網頁設計項目，涉及“旅游”“網店”“兒童攝影”“服裝”“網絡交友”“訂購車票”“學習英語”等多個方向，有助于學生掌握不同網站的設計風格和制作技巧。全書以項目為導向，通過項目將章節知識點貫串起來，學完一章內容就能制作一個完整的項目頁面，能大大激發學生的學習興趣。
本書附有源代碼、習題、課件等教學資源，而且為了幫助初學者更好地學習本書講解的內容，還提供了在線答疑，希望可以幫助更多讀者。
本書既可作為高等院校本、專科相關專業的網頁設計與制作課程的教材，也可作為網頁平面設計的培訓教材，是一本適合網頁制作、美工設計、網站開發、網頁編程等行業人員閱讀與參考的教材。
1. 本書更加注重知識性與實踐性的結合，在各個章節中，先以項目標題串講基本知識點，再輔以案例講授，讓讀者對前面所學知識加深印象，在章節末尾設置了“課后練習”讓讀者實際動手，對本章知識活學活用；
2. 除項目一以外，其他章節為一個獨立項目，包括了旅游專題頁、網上花店專題頁、兒童攝影專業頁、穿搭速遞專題頁等，這些項目既活潑又適合學習，并配以情景描述，可以激發讀者的學習興趣。
3. 傳智播客配套有大量教輔資源，本書提供免費教學資源，包括8 個精美教學PPT、7 個補充項目、1000 道測試題、長達25 小時的教學視頻等。
黑馬程序員，傳智播客旗下高端IT教育品牌，成立于2006年，它是由中國Java培訓**人張孝祥老師發起，聯合全球*大的中文IT社區CSDN、中關村軟件園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學理念，堅持培養優秀軟件應用工程師的宏偉目標，在累計培養的十萬余名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業。
項目1 網頁制作基礎知識 1
【任務1-1】 了解Web基本概念 2
需求分析 2
知識儲備 2
1．認識網頁 2
2．網頁相關名詞 4
3．Web標準 5
【任務1-2】 網頁制作入門 6
需求分析 6
知識儲備 6
1．HTML簡介 6
2．CSS簡介 8
3．JavaScript簡介 9
4．常見瀏覽器介紹 9
【任務1-3】 Dreamweaver工具的
使用 11
需求分析 11
知識儲備 11
1．Dreamweaver界面介紹 11
2．Dreamweaver初始化設置 15
3．創建第一個網頁 17
【項目總結】 19
【課后練習】 19
項目2 “說旅游”專題頁制作 21
【項目描述】 22
【任務2-1】 認識HTML 23
需求分析 23
知識儲備 23
1．HTML文檔基本格式 23
2．HTML標記 24
3．標記的屬性 26
4．HTML文檔頭部相關標記 27
【任務2-2】 HTML文本控制標記 29
需求分析 29
知識儲備 29
1．標題和段落標記 29
2．文本樣式標記（font） 32
3．文本格式化標記 33
4．特殊字符標記 34
知識拓展 35
【任務2-3】 HTML圖像標記 36
需求分析 36
知識儲備 36
1．常用圖像格式 36
2．圖像標記 37
3．相對路徑與絕對路徑 40
知識拓展 41
【任務2-4】 準備工作與頁面布局 42
準備工作 42
頁面結構分析 44
頁面布局 45
【任務2-5】 制作“頭部”模塊 46
效果分析 46
模塊制作 46
【任務2-6】 制作“伊露島介紹”模塊 47
效果分析 47
模塊制作 47
【任務2-7】 制作“伊露島推薦”
模塊 48
效果分析 48
模塊制作 49
【任務2-8】 制作“驢友評論”模塊 50
效果分析 50
模塊制作 51
【任務2-9】 制作“頁腳”模塊 52
效果分析 52
模塊制作 53
【項目總結】 54
【課后練習】 54
項目3 “網上花店”專題頁制作 56
【項目描述】 57
【任務3-1】 CSS核心基礎 58
需求分析 58
知識儲備 58
1．CSS樣式規則 58
2．引入CSS樣式表 59
3．CSS基礎選擇器 63
【任務3-2】 CSS控制文本樣式 65
需求分析 65
知識儲備 65
1．CSS字體樣式屬性 65
2．CSS文本外觀屬性 68
知識拓展 71
【任務3-3】 CSS高級特性 71
需求分析 71
知識儲備 72
1．CSS復合選擇器 72
2．CSS層疊性與繼承性 74
3．CSS優先級 75
【任務3-4】 布局及定義基礎樣式 78
準備工作 78
效果分析 79
定義基礎樣式 80
【任務3-5】 制作“標題”模塊 81
效果分析 81
模塊制作 81
【任務3-6】 制作“分類”模塊 82
效果分析 82
模塊制作 83
【任務3-7】 制作“熱賣”模塊 84
效果分析 84
模塊制作 85
【任務3-8】 制作“頁腳”模塊 86
效果分析 86
模塊制作 87
【項目總結】 88
【課后練習】 88
項目4 “青春樹兒童攝影網”首頁
制作 91
【項目描述】 92
【任務4-1】 認識盒子模型 93
需求分析 93
知識儲備 93
認識盒子模型 93
【任務4-2】 盒子模型相關屬性 94
需求分析 94
知識儲備 95
1．邊框屬性 95
2．內邊距屬性 100
3．外邊距屬性 101
4．背景屬性 103
5．盒子的寬與高 107
【任務4-3】 元素的類型與轉換 108
需求分析 108
知識儲備 109
1．元素的類型 109
2．標記 111
3．元素的轉換 112
知識拓展 114
【任務4-4】 元素的浮動 116
需求分析 116
知識儲備 117
1．元素的浮動屬性 117
2．清除浮動 119
3．overflow屬性 124
【任務4-5】 元素的定位 126
需求分析 126
知識儲備 126
1．元素的定位屬性 126
2．靜態定位 126
3．相對定位 127
4．絕對定位 128
5．固定定位 129
6．z-index層疊等級屬性 129
【任務4-6】 布局及定義基礎樣式 130
準備工作 130
效果分析 131
定義基礎樣式 131
【任務4-7】 制作“導航”及“banner”
模塊 132
效果分析 132
模塊制作 133
【任務4-8】 制作“最新動態”模塊 135
效果分析 135
模塊制作 135
【任務4-9】 制作“樣片欣賞”模塊 137
效果分析 137
模塊制作 138
【任務4-10】 制作“頁腳”及“懸浮框”
模塊 139
效果分析 139
模塊制作 139
【項目總結】 140
【課后練習】 140
項目5 “穿搭速遞”首頁制作 142
【項目描述】 143
【任務5-1】 列表標記 143
需求分析 143
知識儲備 144
1．無序列表ul 144
2．有序列表ol 144
3．定義列表dl 145
4．列表的嵌套應用 146
【任務5-2】 CSS控制列表樣式 147
需求分析 147
知識儲備 147
1．list-style復合屬性 147
2．背景圖像定義列表項目符號 148
【任務5-3】 超鏈接標記 149
需求分析 149
知識儲備 149
1．創建超鏈接 149
2．錨點鏈接 150
3．鏈接偽類控制超鏈接 152
【任務5-4】 布局及定義基礎樣式 154
準備工作 154
效果分析 155
定義基礎樣式 155
【任務5-5】 制作“頭部”導航模塊 156
效果分析 156
模塊制作 156
【任務5-6】 制作“banner”和
“精品展示”模塊 158
效果分析 158
模塊制作 159
【任務5-7】 制作“潮流前沿”模塊 162
效果分析 162
模塊制作 162
【任務5-8】 制作“版權信息”模塊 164
效果分析 164
模塊制作 165
【項目總結】 166
【課后練習】 166
項目6 “千年之戀”注冊頁面制作 168
【項目描述】 169
【任務6-1】 認識表格相關標記 170
需求分析 170
知識儲備 170
1．表格的創建 170
2．標記的屬性 171
3．標記的屬性 175
4．
標記的屬性 176
5． 標記及其屬性 177
【任務6-2】 CSS控制表格樣式 178
需求分析 178
知識儲備 178
1．CSS控制表格邊框 178
2．CSS控制單元格邊距 179
3．CSS控制單元格的寬高 181
【任務6-3】 認識表單 182
需求分析 182
知識儲備 182
1．初識表單 182
2．創建表單 183
【任務6-4】 表單控件 184
需求分析 184
知識儲備 184
1．input控件 184
2．textarea控件 188
3．select控件 189
【任務6-5】 CSS控制表單樣式 192
需求分析 192
知識儲備 192
CSS控制表單樣式 192
【任務6-6】 布局及定義基礎樣式 194
準備工作 194
效果分析 195
定義基礎樣式 196
【任務6-7】 制作頭部及導航模塊 197
效果分析 197
模塊制作 197
【任務6-8】 制作“banner”及“內容”
模塊 199
效果分析 199
模塊制作 200
【任務6-9】 制作“頁腳”模塊 204
效果分析 204
模塊制作 204
【項目總結】 205
【課后練習】 205
項目7 “趕快回家網”首頁制作 207
【項目描述】 208
【任務7-1】 JavaScript概述 209
需求分析 209
知識儲備 209
1．JavaScript簡介 209
2．JavaScript引入方式 210
3．JavaScript基本語法 212
4．一個簡單的JavaScript程序 213
【任務7-2】 JavaScript語言基礎 214
需求分析 214
知識儲備 214
1．關鍵字和標識符 214
2．變量和數據類型 215
3．運算符和表達式 218
【任務7-3】 流程控制語句 224
需求分析 224
知識儲備 224
1．條件語句 224
2．循環語句 229
3．跳轉語句 232
【任務7-4】 函數 234
需求分析 234
知識儲備 234
1．初識函數 234
2．函數的調用 235
3．函數中變量的作用域 235
【任務7-5】 布局及定義基礎樣式 236
準備工作 237
效果分析 237
定義基礎樣式 237
【任務7-6】 制作“頭部”模塊 239
效果分析 239
模塊制作 240
【任務7-7】 制作“導航”模塊 243
效果分析 243
模塊制作 243
【任務7-8】 制作“banner”和“時間”
模塊 245
效果分析 245
模塊制作 246
【任務7-9】 制作“客運信息”模塊 248
效果分析 248
模塊制作 249
【任務7-10】 制作“底部”模塊 252
效果分析 252
模塊制作 252
【項目總結】 253
【課后練習】 253
項目8 “學好英語網”首頁制作 255
【項目描述】 256
【任務8-1】 認識對象 257
需求分析 257
知識儲備 257
1．什么是對象 257
2．對象的屬性和方法 257
3．創建和刪除對象 257
4．內置對象 259
【任務8-2】 Array數組對象 263
需求分析 263
知識儲備 263
1．初識數組 263
2．數組的常見操作 264
3．數組的常用屬性和方法 266
4．二維數組 268
【任務8-3】 BOM與DOM對象 269
需求分析 269
知識儲備 269
1．BOM對象 269
2．DOM對象 275
【任務8-4】 事件處理 281
需求分析 281
知識儲備 281
1．什么是事件 281
2．事件處理程序的調用 281
3．鼠標事件 283
4．鍵盤事件 284
5．表單事件 286
6．頁面事件 287
【任務8-5】 布局及定義基礎樣式 289
準備工作 289
效果分析 289
定義基礎樣式 290
【任務8-6】 制作“頭部”及“導航”
模塊 292
效果分析 292
模塊制作 292
【任務8-7】 制作“banner”模塊 294
效果分析 294
模塊制作 294
【任務8-8】 制作“簡介”模塊 297
效果分析 297
模塊制作 298
【任務8-9】 制作“課程特色”模塊 301
效果分析 301
模塊制作 301
【任務8-10】 制作“頁腳”模塊 306
效果分析 306
模塊制作 306
【項目總結】 307
【課后練習】 307
新書資訊