《HTML5+CSS3網頁設計與製作》是2020年4月人民郵電出版社出版的圖書,作者是黑馬程式設計師。
基本介紹
- 書名:HTML5+CSS3網頁設計與製作
- 作者:黑馬程式設計師
- 出版社:人民郵電出版社
- 出版時間:2020年4月
- 頁數:308 頁
- 定價:59.8 元
- 開本:16 開
- 裝幀:平裝
- ISBN:9787115523242
內容簡介,圖書目錄,
內容簡介
本書從初學者的角度,以形象的比喻、實用的案例、通俗易懂的語言詳細介紹了使用HTML5與CSS3進行網頁設計與製作的各方面內容和技巧。
全書共12章:第1~4章主要講解了HTML5與CSS3的基礎知識,包括Web的基本概念、HTML與CSS簡介、Dreamweaver工具的使用、HTML圖文標籤、CSS基礎選擇器等內容;第5~8章分別講解了盒子模型、列表和超連結、表格和表單、DIV+CSS布局,這些內容是網頁製作的核心;第9~11章分別講解了HTML5和CSS3的新特性,包括多媒體嵌入、過渡、變形、動畫、繪圖、數據存儲原理,這些內容可以幫助讀者掌握HTML5和CSS3的新特性;第12章為實戰項目,帶領初學者開發一個包含首頁和多個子頁面的中型網站,以進一步鞏固所學知識。
本書附帶豐富的配套資源,並提供了答疑服務,希望全方位幫助讀者掌握所學知識。
本書既可作為高等院校本、專科相關專業的網頁設計與製作課程的教材,也可作為前端與移動開發的培訓教材,還可供網站開發人員參考。
圖書目錄
第 1章 HTML5+CSS3網頁設計概述 001
1.1 網頁概述 001
1.1.1 認識網頁 001
1.1.2 網頁名詞解釋 002
1.1.3 Web標準 003
1.2 網頁製作技術入門 005
1.2.1 HTML 005
1.2.2 CSS 006
1.2.3 JavaScript 006
1.2.4 網頁的展示平台——瀏覽器 007
1.3 Dreamweaver工具的使用 010
1.3.1 認識Dreamweaver界面 010
1.3.2 Dreamweaver初始化設定 014
1.3.3 Dreamweaver的基本操作 016
1.4 階段案例——創建第 一個網頁 018
1.5 本章小結 020
1.6 課後練習題 020
第 2章 初識HTML5 021
2.1 HTML5的優勢 021
2.2 HTML5全新的結構 022
2.3 標籤概述 023
2.3.1 標籤的分類 023
2.3.2 標籤的關係 024
2.3.3 標籤屬性 025
2.3.4 HTML5文檔頭部相關標籤 025
2.4 文本控制標籤 027
2.4.1 頁面格式化標籤 027
2.4.2 文本樣式標籤 031
2.4.3 文本格式化標籤 032
2.4.4 文本語義標籤 033
2.4.5 特殊字元標籤 034
2.5 圖像標籤 035
2.5.1 常見的圖像格式 035
2.5.2 圖像標籤 036
2.5.3 相對路徑和絕對路徑 039
2.6 階段案例——製作圖文混排新聞 040
2.6.1 分析新聞模組效果圖 040
2.6.2 搭建新聞模組結構 040
2.6.3 控制新聞模組圖像 041
2.6.4 控制新聞模組文本 041
2.7 本章小結 042
2.8 課後練習題 042
第3章 初識CSS3 043
3.1 結構與表現分離 043
3.2 CSS3的優勢 044
3.3 CSS核心基礎 044
3.3.1 CSS樣式規則 044
3.3.2 引入CSS樣式表 045
3.3.3 CSS基礎選擇器 049
3.4 設定文本樣式 052
3.4.1 CSS字型樣式屬性 052
3.4.2 CSS文本外觀屬性 055
3.5 高級特性 064
3.5.1 CSS複合選擇器 064
3.5.2 CSS的層疊性和繼承性 066
3.5.3 CSS的優先權 068
3.6 階段案例——製作活動通知頁面 070
3.6.1 分析活動通知頁面效果圖 071
3.6.2 搭建活動通知頁面結構 071
3.6.3 定義活動通知頁面樣式 072
3.7 本章小結 073
3.8 課後練習題 073
第4章 CSS3選擇器 074
4.1 屬性選擇器 074
4.1.1 E[att^=value]屬性選擇器 074
4.1.2 E[att$=value]屬性選擇器 075
4.1.3 E[att*=value]屬性選擇器 076
4.2 關係選擇器 077
4.2.1 子元素選擇器 077
4.2.2 兄弟選擇器(+、~) 078
4.3 結構化偽類選擇器 080
4.3.1 :root選擇器 080
4.3.2 :not選擇器 081
4.3.3 :only-child選擇器 081
4.3.4 :first-child和:last-child選擇器 082
4.3.5 :nth-child(n)和:nth-last-child(n)選擇器 083
4.3.6 :nth-of-type(n)和:nth-last-of-
type(n)選擇器 084
4.3.7 :empty選擇器 085
4.4 偽元素選擇器 086
4.4.1 :before偽元素選擇器 086
4.4.2 :after偽元素選擇器 087
4.5 階段案例——製作招聘頁面 088
4.5.1 分析招聘頁面效果圖 089
4.5.2 搭建招聘頁面結構 089
4.5.3 定義招聘頁面樣式 090
4.6 本章小結 090
4.7 課後練習題 090
第5章 盒子模型 091
5.1 認識盒子模型 091
5.2 盒子模型的相關屬性 092
5.2.1 框線屬性 092
5.2.2 內邊距屬性 098
5.2.3 外邊距屬性 099
5.2.4 背景屬性 101
5.2.5 盒子的寬與高 105
5.3 CSS3新增盒子模型屬性 106
5.3.1 顏色透明度 106
5.3.2 圓角 107
5.3.3 圖片框線 109
5.3.4 陰影 111
5.3.5 漸變 112
5.3.6 多背景圖像 116
5.3.7 修剪背景圖像 117
5.4 元素的類型和轉換 118
5.4.1 元素的類型 118
5.4.2
和標籤 120
5.4.3 元素類型的轉換 122
5.5 塊元素垂直外邊距的合併 124
5.5.1 相鄰塊元素垂直外邊距的合併 124
5.5.2 嵌套塊元素垂直外邊距的合併 125
5.6 階段案例——製作音樂排行榜 126
5.6.1 分析音樂排行榜效果圖 126
5.6.2 製作音樂排行榜頁面結構 127
5.6.3 定義音樂排行榜CSS樣式 127
5.7 本章小結 129
5.8 課後練習題 129
第6章 列表和超連結 130
6.1 列表標籤 130
6.1.1 無序列表
130
6.1.2 有序列表
131
6.1.3 定義列表
133
6.1.4 列表的嵌套套用 134
6.2 CSS控制列表樣式 135
6.2.1 list-style-type屬性 135
6.2.2 list-style-image屬性 136
6.2.3 list-style-position屬性 137
6.2.4 list-style屬性 138
6.3 超連結 139
6.3.1 創建超連結 139
6.3.2 錨點連結 141
6.4 連結偽類控制超連結 142
6.5 階段案例——製作新聞列表 144
6.5.1 分析新聞列表效果圖 144
6.5.2 製作新聞列表頁面結構 145
6.5.3 定義新聞列表CSS樣式 145
6.6 本章小結 146
6.7 課後練習題 146
第7章 表格和表單 147
7.1 表格 147
7.1.1 創建表格 147
7.1.2
標籤的屬性 149
7.1.3
標籤的屬性 153
7.1.4
標籤的屬性 154
7.1.5
標籤及其屬性 156
7.1.6 表格的結構 156
7.2 CSS控制表格樣式 158
7.2.1 CSS控制表格框線 158
7.2.2 CSS控制單元格邊距 160
7.2.3 CSS控制單元格的寬和高 161
7.3 表單 162
7.3.1 表單的構成 162
7.3.2 創建表單 163
7.4 表單控制項 164
7.4.1 input控制項 164
7.4.2 textarea控制項 167
7.4.3 select控制項 169
7.5 HTML5表單新屬性 172
7.5.1 全新的form屬性 172
7.5.2 全新的表單控制項 172
7.5.3 全新的input控制項類型 173
7.5.4 全新的input屬性 177
7.6 CSS控制表單樣式 183
7.7 階段案例——製作表單註冊頁面 185
7.7.1 分析表單註冊頁面效果圖 186
7.7.2 搭建表單註冊頁面結構 187
7.7.3 定義表單註冊頁面CSS樣式 188
7.8 本章小結 190
7.9 課後練習題 190
第8章 DIV+CSS布局 191
8.1 布局概述 191
8.2 布局常用屬性 193
8.2.1 標籤的浮動屬性 193
8.2.2 標籤的定位屬性 199
8.3 布局的其他屬性 203
8.3.1 overflow屬性 204
8.3.2 z-index屬性 206
8.4 布局類型 206
8.4.1 單列布局 206
8.4.2 兩列布局 207
8.4.3 三列布局 209
8.4.4 全新的HTML5結構元素 212
8.4.5 網頁模組命名規範 215
8.5 階段案例——製作通欄banner 216
8.5.1 分析通欄banner效果圖 216
8.5.2 製作通欄banner頁面結構 217
8.5.3 定義通欄banner CSS樣式 218
8.6 本章小結 220
8.7 課後練習題 220
第9章 多媒體嵌入 221
9.1 視頻/音頻嵌入技術概述 221
9.2 視頻檔案和音頻檔案的格式 223
9.3 嵌入視頻和音頻 223
9.3.1 在HTML5中嵌入視頻 223
9.3.2 在HTML5中嵌入音頻 225
9.3.3 視頻和音頻檔案的兼容性問題 226
9.3.4 調用網路音頻視頻檔案 227
9.4 CSS控制視頻的寬和高 229
9.5 階段案例——製作音樂播放界面 231
9.5.1 分析音樂播放界面效果圖 231
9.5.2 製作音樂播放界面結構 232
9.5.3 定義音樂播放界面CSS樣式 232
9.6 本章小結 234
9.7 課後練習題 234
第 10章 過渡、變形和動畫 235
10.1 過渡 235
10.1.1 transition-property屬性 235
10.1.2 transition-duration屬性 237
10.1.3 transition-timing-function
屬性 237
10.1.4 transition-delay屬性 238
10.1.5 transition屬性 239
10.2 變形 239
10.2.1 認識transform屬性 239
10.2.2 2D變形 240
10.2.3 3D變形 244
10.3 動畫 248
10.3.1 @keyframes規則 249
10.3.2 animation-name屬性 249
10.3.3 animation-duration屬性 250
10.3.4 animation-timing-function屬性 250
10.3.5 animation-delay屬性 251
10.3.6 animation-iteration-count屬性 251
10.3.7 animation-direction屬性 251
10.3.8 animation屬性 252
10.4 階段案例——製作表情圖片 253
10.4.1 分析表情圖片效果圖 253
10.4.2 製作表情圖片頁面結構 254
10.4.3 定義表情圖片CSS樣式 254
10.5 本章小結 256
10.6 課後練習題 256
第 11章 繪圖和數據存儲原理 257
11.1 簡單的JavaScript 257
11.1.1 JavaScript的引入 258
11.1.2 變數 259
11.1.3 document對象 260
11.2 HTML5畫布 261
11.2.1 認識畫布 261
11.2.2 使用畫布 262
11.2.3 繪製線 262
11.2.4 線的樣式 264
11.2.5 線的路徑 264
11.2.6 填充路徑 266
11.2.7 繪製圓 266
11.3 HTML5數據存儲基礎 267
11.3.1 原始存儲方式——Cookie 267
11.3.2 HTML5全新的存儲技術——Web Storage 268
11.4 階段案例——繪製火柴人 269
11.4.1 分析火柴人效果圖 269
11.4.2 搭建火柴人結構 270
11.4.3 繪製火柴人圖形 270
11.5 本章小結 271
11.6 課後練習題 271
第 12章 實戰開發——製作企業網站頁面 272
12.1 網站設計規劃 272
12.1.1 確定網站主題 272
12.1.2 規劃網站結構 273
12.1.3 收集素材 273
12.1.4 設計網頁效果圖 274
12.2 使用Dreamweaver工具建立站點 275
12.3 切圖 276
12.4 搭建首頁 277
12.4.1 效果圖分析 277
12.4.2 首頁製作 278
12.5 製作模板 286
12.5.1 建立模板的步驟 286
12.5.2 引用模板 289
12.6 使用模板搭建網頁 289
12.6.1 搭建註冊頁 289
12.6.2 搭建個人中心頁面 292
12.6.3 搭建視頻播放頁 294
12.7 本章小結 298
12.8 課後練習題 298