HTML5+CSS3網頁設計與製作

黑馬程序員

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

目錄：  
第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 圖像標籤<img /> 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 <div>和<span>標籤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 無序列表<ul> 130
6.1.2 有序列表<ol> 131
6.1.3 定義列表<dl> 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 <table>標籤的屬性149
7.1.3 <tr>標籤的屬性153
7.1.4 <td>標籤的屬性154
7.1.5 <th>標籤及其屬性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