HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作

第 1章 HTML5+CSS3網(wǎng)頁設(shè)計(jì)概述001
1．1 網(wǎng)頁概述 001
1．1．1 認(rèn)識網(wǎng)頁 001
1．1．2 網(wǎng)頁名詞解釋 002
1．1．3 Web標(biāo)準(zhǔn) 003
1．2 網(wǎng)頁制作技術(shù)入門 005
1．2．1 HTML 005
1．2．2 CSS 006
1．2．3 JavaScript 006
1．2．4 網(wǎng)頁的展示平臺(tái)——瀏覽器 007
1．3 Dreamweaver工具的使用 010
1．3．1 認(rèn)識Dreamweaver界面 010
1．3．2 Dreamweaver初始化設(shè)置 014
1．3．3 Dreamweaver的基本操作 016
1．4 階段案例——?jiǎng)?chuàng)建第 一個(gè)網(wǎng)頁 018
1．5 本章小結(jié) 020
1．6 課后練習(xí)題 020
第 2章 初識HTML5 021
2．1 HTML5的優(yōu)勢 021
2．2 HTML5全新的結(jié)構(gòu) 022
2．3 標(biāo)簽概述 023
2．3．1 標(biāo)簽的分類 023
2．3．2 標(biāo)簽的關(guān)系 024
2．3．3 標(biāo)簽屬性 025
2．3．4 HTML5文檔頭部相關(guān)標(biāo)簽 025
2．4 文本控制標(biāo)簽 027
2．4．1 頁面格式化標(biāo)簽 027
2．4．2 文本樣式標(biāo)簽 031
2．4．3 文本格式化標(biāo)簽 032
2．4．4 文本語義標(biāo)簽 033
2．4．5 特殊字符標(biāo)簽 034
2．5 圖像標(biāo)簽 035
2．5．1 常見的圖像格式 035
2．5．2 圖像標(biāo)簽 036
2．5．3 相對路徑和絕對路徑 039
2．6 階段案例——制作圖文混排新聞 040
2．6．1 分析新聞模塊效果圖 040
2．6．2 搭建新聞模塊結(jié)構(gòu) 040
2．6．3 控制新聞模塊圖像 041
2．6．4 控制新聞模塊文本 041
2．7 本章小結(jié) 042
2．8 課后練習(xí)題 042
第3章 初識CSS3 043
3．1 結(jié)構(gòu)與表現(xiàn)分離 043
3．2 CSS3的優(yōu)勢 044
3．3 CSS核心基礎(chǔ) 044
3．3．1 CSS樣式規(guī)則 044
3．3．2 引入CSS樣式表 045
3．3．3 CSS基礎(chǔ)選擇器 049
3．4 設(shè)置文本樣式 052
3．4．1 CSS字體樣式屬性 052
3．4．2 CSS文本外觀屬性 055
3．5 高級特性 064
3．5．1 CSS復(fù)合選擇器 064
3．5．2 CSS的層疊性和繼承性 066
3．5．3 CSS的優(yōu)先級 068
3．6 階段案例——制作活動(dòng)通知頁面 070
3．6．1 分析活動(dòng)通知頁面效果圖 071
3．6．2 搭建活動(dòng)通知頁面結(jié)構(gòu) 071
3．6．3 定義活動(dòng)通知頁面樣式 072
3．7 本章小結(jié) 073
3．8 課后練習(xí)題 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 關(guān)系選擇器 077
4．2．1 子元素選擇器 077
4．2．2 兄弟選擇器（+、～） 078
4．3 結(jié)構(gòu)化偽類選擇器 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 搭建招聘頁面結(jié)構(gòu) 089
4．5．3 定義招聘頁面樣式 090
4．6 本章小結(jié) 090
4．7 課后練習(xí)題 090
第5章 盒子模型 091
5．1 認(rèn)識盒子模型 091
5．2 盒子模型的相關(guān)屬性 092
5．2．1 邊框?qū)傩?092
5．2．2 內(nèi)邊距屬性 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 元素的類型和轉(zhuǎn)換 118
5．4．1 元素的類型 118
5．4．2 和標(biāo)簽 120
5．4．3 元素類型的轉(zhuǎn)換 122
5．5 塊元素垂直外邊距的合并 124
5．5．1 相鄰塊元素垂直外邊距的合并 124
5．5．2 嵌套塊元素垂直外邊距的合并 125
5．6 階段案例——制作音樂排行榜 126
5．6．1 分析音樂排行榜效果圖 126
5．6．2 制作音樂排行榜頁面結(jié)構(gòu) 127
5．6．3 定義音樂排行榜CSS樣式 127
5．7 本章小結(jié) 129
5．8 課后練習(xí)題 129
第6章 列表和超鏈接 130
6．1 列表標(biāo)簽 130
6．1．1 無序列表 130
6．1．2 有序列表 131
6．1．3 定義列表 133
6．1．4 列表的嵌套應(yīng)用 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 創(chuàng)建超鏈接 139
6．3．2 錨點(diǎn)鏈接 141
6．4 鏈接偽類控制超鏈接 142
6．5 階段案例——制作新聞列表 144
6．5．1 分析新聞列表效果圖 144
6．5．2 制作新聞列表頁面結(jié)構(gòu) 145
6．5．3 定義新聞列表CSS樣式 145
6．6 本章小結(jié) 146
6．7 課后練習(xí)題 146
第7章 表格和表單 147
7．1 表格 147
7．1．1 創(chuàng)建表格 147
7．1．2 標(biāo)簽的屬性 149
7．1．3 標(biāo)簽的屬性 153
7．1．4 標(biāo)簽的屬性 154
7．1．5 標(biāo)簽及其屬性 156
7．1．6 表格的結(jié)構(gòu) 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 表單的構(gòu)成 162
7．3．2 創(chuàng)建表單 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 搭建表單注冊頁面結(jié)構(gòu) 187
7．7．3 定義表單注冊頁面CSS樣式 188
7．8 本章小結(jié) 190
7．9 課后練習(xí)題 190
第8章 DIV+CSS布局 191
8．1 布局概述 191
8．2 布局常用屬性 193
8．2．1 標(biāo)簽的浮動(dòng)屬性 193
8．2．2 標(biāo)簽的定位屬性 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結(jié)構(gòu)元素 212
8．4．5 網(wǎng)頁模塊命名規(guī)范 215
8．5 階段案例——制作通欄banner 216
8．5．1 分析通欄banner效果圖 216
8．5．2 制作通欄banner頁面結(jié)構(gòu) 217
8．5．3 定義通欄banner CSS樣式 218
8．6 本章小結(jié) 220
8．7 課后練習(xí)題 220
第9章 多媒體嵌入 221
9．1 視頻 音頻嵌入技術(shù)概述 221
9．2 視頻文件和音頻文件的格式 223
9．3 嵌入視頻和音頻 223
9．3．1 在HTML5中嵌入視頻 223
9．3．2 在HTML5中嵌入音頻 225
9．3．3 視頻和音頻文件的兼容性問題 226
9．3．4 調(diào)用網(wǎng)絡(luò)音頻視頻文件 227
9．4 CSS控制視頻的寬和高 229
9．5 階段案例——制作音樂播放界面 231
9．5．1 分析音樂播放界面效果圖 231
9．5．2 制作音樂播放界面結(jié)構(gòu) 232
9．5．3 定義音樂播放界面CSS樣式 232
9．6 本章小結(jié) 234
9．7 課后練習(xí)題 234
第 10章 過渡、變形和動(dòng)畫 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 認(rèn)識transform屬性 239
10．2．2 2D變形 240
10．2．3 3D變形 244
10．3 動(dòng)畫 248
10．3．1 @keyframes規(guī)則 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 制作表情圖片頁面結(jié)構(gòu) 254
10．4．3 定義表情圖片CSS樣式 254
10．5 本章小結(jié) 256
10．6 課后練習(xí)題 256
第 11章 繪圖和數(shù)據(jù)存儲(chǔ)原理 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 認(rèn)識畫布 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數(shù)據(jù)存儲(chǔ)基礎(chǔ) 267
11．3．1 原始存儲(chǔ)方式——Cookie 267
11．3．2 HTML5全新的存儲(chǔ)技術(shù)——Web Storage 268
11．4 階段案例——繪制火柴人 269
11．4．1 分析火柴人效果圖 269
11．4．2 搭建火柴人結(jié)構(gòu) 270
11．4．3 繪制火柴人圖形 270
11．5 本章小結(jié) 271
11．6 課后練習(xí)題 271
第 12章 實(shí)戰(zhàn)開發(fā)——制作企業(yè)網(wǎng)站頁面 272
12．1 網(wǎng)站設(shè)計(jì)規(guī)劃 272
12．1．1 確定網(wǎng)站主題 272
12．1．2 規(guī)劃網(wǎng)站結(jié)構(gòu) 273
12．1．3 收集素材 273
12．1．4 設(shè)計(jì)網(wǎng)頁效果圖 274
12．2 使用Dreamweaver工具建立站點(diǎn) 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 使用模板搭建網(wǎng)頁 289
12．6．1 搭建注冊頁 289
12．6．2 搭建個(gè)人中心頁面 292
12．6．3 搭建視頻播放頁 294
12．7 本章小結(jié) 298
12．8 課后練習(xí)題 298