HTML5+CSS3網頁設計與製作（簡體書）

本書從初學者的角度，以形象的比喻、實用的案例、通俗易懂的語言詳細介紹了使用HTML5與CSS3進行網頁設計與製作的各方面內容和技巧。
全書共12章：第1～4章主要講解了HTML5與CSS3的基礎知識，包括Web的基本概念、HTML與CSS簡介、Dreamweaver工具的使用、HTML圖文標簽、CSS基礎選擇器等內容；第5～8章分別講解了盒子模型、列表和超鏈接、表格和表單、DIV+CSS佈局，這些內容是網頁製作的核心；第9～11章分別講解了HTML5和CSS3的新特性，包括多媒體嵌入、過渡、變形、動畫、繪圖、數據存儲原理，這些內容可以幫助讀者掌握HTML5和CSS3的新特性；第12章為實戰項目，帶領初學者開發一個包含首頁和多個子頁面的中型網站，以進一步鞏固所學知識。
本書附帶豐富的配套資源，並提供了答疑服務，希望全方位幫助讀者掌握所學知識。
本書既可作為高等院校本、專科相關專業的網頁設計與製作課程的教材，也可作為前端與移動開發的培訓教材，還可供網站開發人員參考。

黑馬程序員，傳智播客成立於2006年，它是由中國Java培訓第一人張孝祥老師發起，聯合***大的中文IT社區CSDN、中關村軟件園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學理念，堅持培養優秀軟件應用工程師的宏偉目標，在累計培養的十萬余名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業。

1.1+X Web前端開發系列規劃教材；

2.黑馬程序員系列產品，配套豐富的教學資源；

3.新版教材做了升級、優化，更加符合**的教學需求。

第 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