本書從初學者的角度出發，以實用的案例、通俗易懂的語言詳細介紹了使用HTML、CSS及JavaScript進行網頁制作的一般技巧。
本書分為8個項目，結合HTML、CSS和JavaScript的基礎知識及應用，提供了7種不同類型的網頁設計案例。其中，項目1介紹了HTML、CSS和JavaScript的基礎知識，包括Web基本概念、HTML簡介、CSS簡介、JavaScript簡介、Dreamweaver工具的使用等；項目2～項目8為7個完整的網頁設計項目，涉及“博客”“網店”“家居”“教育”“婚戀”“視頻”“美食”多個方向，有助于讀者掌握不同網站的設計風格和制作技巧。本書以項目為導向，通過項目將相關知識點串聯起來，學完項目內容就能基本掌握如何制作一個完整的項目頁面，從而極大地激發讀者的學習興趣。
本書附有源代碼、習題、教學課件等資源，并且為了幫助初學者更好地學習，編者還提供了在線答疑，希望可以幫助更多的讀者。
本書既可作為高等院校本、專科相關專業的網頁設計與制作課程的教材，也可作為網頁平面設計的培訓教材，還可作為網頁制作、美工設計、網站開發、網頁編程等行業從業人員的參考讀物。
1.國家“十三五”規劃教材；
2.黑馬程序員系列教材改版；
3.本書配套豐富的教學資源，包括PPT、教學視頻、教學設計、教學大綱、源代碼等。
此次改版，在原書的基礎上更新了部分案例，增加了HTML5和CSS3新屬性的講解和應用，增加了網頁視聽技術的應用，主要包括音頻、視頻的嵌入和動畫效果。
黑馬程序員，傳智播客成立于2006年，它是由中國Java培訓先行者張孝祥老師發起，聯合全球最大的中文IT社區CSDN、中關村軟件園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學理念，堅持培養優秀軟件應用工程師的宏偉目標，在累計培養的十萬余名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業，特別是“黑馬程序員”的平均就業薪資已達到8K以上。為了迎合軟件市場的需求，我們陸續開設了Java、網頁平面、PHP、.Net、iOS、C/C++、Android等9個專業方向的課程，并且未來將逐漸開設其他專業方向的課程。隨著傳智播客的日益壯大，除了北京總部，我們在上海、廣州、武漢、成都、深圳等地也創立了直營分支機構，傳智播客儼然已成為了國內最具專業口碑的IT教育機構。
項目1 網頁制作基礎知識 1
【任務1-1】認識網頁 1
需求分析 1
知識儲備 1
1. 網頁的構成 1
2. 網頁的相關名詞 2
3. Web標準 3
【任務1-2】網頁制作入門技術 5
需求分析 5
知識儲備 5
1. HTML簡介 5
2. CSS簡介 6
3. JavaScript簡介 6
4. 常見瀏覽器介紹 7
【任務1-3】Dreamweaver的使用 9
需求分析 9
知識儲備 9
1. Dreamweaver界面介紹 9
2. Dreamweaver的初始化設置 13
3. Dreamweaver文檔的基本操作 14
4. 創建網頁 16
【項目總結】 17
【課后練習】 17
項目2 “博客”頁面制作 19
【項目描述】 19
【任務2-1】認識HTML 20
需求分析 20
知識儲備 20
1. HTML文檔基本格式 20
2. HTML標簽 21
3. HTML標簽的屬性 22
4. HTML標簽的關系 22
5. HTML文檔頭部相關標簽 23
【任務2-2】HTML文本控制標簽 24
需求分析 24
知識儲備 24
1. 頁面格式化標簽 24
2. 文本樣式標簽 26
3. 文本格式化標簽 27
4. 特殊字符 28
知識拓展 29
標簽 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. 結構與表現分離 48
2. CSS樣式規則 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優先級 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 “愛家居”企業網站首頁制作 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. 靜態定位 114
3. 相對定位 114
4. 絕對定位 115
5. 固定定位 116
6. z-index屬性 116
【任務4-7】頁面建設準備工作 117
網站素材的整理 117
1. 建立網站站點 117
2. “愛家居”企業網站首頁切圖 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 “優課教育”網站首頁制作 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. 創建超鏈接 133
2. 創建錨點鏈接 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. 創建表格 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. 創建表單 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規則 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. 循環語句 250
3. 跳轉語句 252
【任務8-5】函數 254
需求分析 254
知識儲備 254
1. 函數的定義 254
2. 函數的調用 255
3. 函數中變量的作用域 255
【任務8-6】對象 256
需求分析 256
知識儲備 256
1. 認識對象 256
2. 創建對象和刪除對象屬性 257
3. 內置對象 258
【任務8-7】數組 262
需求分析 262
知識儲備 262
1. 初識數組 262
2. 創建數組 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
|
新書資訊