HTML5+CSS3 網(wǎng)頁(yè)設(shè)計(jì)（實(shí)戰(zhàn)從入門到精通 視頻教學(xué)版）

目錄
第1篇　HTML5網(wǎng)頁(yè)設(shè)計(jì)
第1章　HTML5快速入門
1.1　HTML5概述 4
1.1.1　HTML5簡(jiǎn)介 4
1.1.2　HTML5文件的基本結(jié)構(gòu) 5
1.2　HTML5文件的編寫方法 5
1.2.1　案例1——手工編寫HTML5 5
1.2.2　案例2——使用HTML編輯器編寫HTML 6
1.3　使用瀏覽器查看HTML5文件 10
1.3.1　各大瀏覽器與HTML5的兼容 10
1.3.2　案例3——查看頁(yè)面效果 11
1.3.3　案例4——查看源文件 11
1.4　高手甜點(diǎn) 12
1.5　跟我練練手 12
第2章　HTML5網(wǎng)頁(yè)文檔結(jié)構(gòu)
2.1　Web標(biāo)準(zhǔn) 14
2.1.1　Web標(biāo)準(zhǔn)概述 14
2.1.2　Web標(biāo)準(zhǔn)規(guī)定的內(nèi)容 15
2.2　HTML5文檔的基本結(jié)構(gòu) 16
2.2.1　HTML5結(jié)構(gòu) 16
2.2.2　文檔類型說(shuō)明 17
2.2.3　HTML5標(biāo)記 17
2.2.4　頭標(biāo)記 17
2.2.5　網(wǎng)頁(yè)的主體標(biāo)記 20
2.2.6　頁(yè)面注釋標(biāo)記 21
2.3　綜合案例——符合W3C標(biāo)準(zhǔn)的
HTML5網(wǎng)頁(yè) 22
2.4　高手甜點(diǎn) 23
2.5　跟我練練手 24
第3章　HTML5網(wǎng)頁(yè)中的文本和圖像
3.1　在網(wǎng)頁(yè)中添加文本 26
3.1.1　案例1——普通文本的添加 26
3.1.2　案例2——特殊字符文本的添加 26
3.1.3　案例3——添加特殊文本 28
3.2　文本排版 30
3.2.1　案例4——換行標(biāo)記
30
3.2.2　案例5——段落標(biāo)記 31
3.2.3　案例6——標(biāo)題標(biāo)記～ 32
3.3　文字列表 33
3.3.1　案例7——建立無(wú)序列表 33
3.3.2　案例8——建立有序列表 34
3.3.3　案例9——建立不同類型的無(wú)序列表 35
3.3.4　案例10——建立不同類型的有序列表 36
3.3.5　案例11——建立嵌套列表 37
3.3.6　案例12——自定義列表 38
3.4　網(wǎng)頁(yè)中的圖像 39
3.4.1　案例13——插入圖像 39
3.4.2　案例14——設(shè)置圖像的寬度和高度
width、height 41
3.4.3　案例15——設(shè)置圖片的提示文字alt 42
3.4.4　案例16——將圖片設(shè)置為網(wǎng)頁(yè)背景
background 43
3.4.5　案例17——排列圖像align 44
3.5　綜合案例1——圖文并茂房屋裝飾裝修
網(wǎng)頁(yè) 44
3.6　綜合案例2——在線購(gòu)物網(wǎng)站產(chǎn)品展示
效果 46
3.7　高手甜點(diǎn) 47
3.8　跟我練練手 48
第4章　用HTML5建立超鏈接
4.1　網(wǎng)頁(yè)超鏈接概述 50
4.1.1　超鏈接的概念 50
4.1.2　超鏈接中的URL 50
4.1.3　超鏈接的URL類型 51
4.2　建立網(wǎng)頁(yè)超鏈接href 51
4.2.1　案例1——?jiǎng)?chuàng)建超文本鏈接 51
4.2.2　案例2——?jiǎng)?chuàng)建圖片鏈接 53
4.2.3　案例3——?jiǎng)?chuàng)建下載鏈接 54
4.2.4　案例4——使用相對(duì)路徑和絕對(duì)路徑 55
4.2.5　案例5——設(shè)置以新窗口顯示超鏈接
頁(yè)面 56
4.2.6　案例6——設(shè)置電子郵件鏈接 58
4.3　案例7——浮動(dòng)框架iframe 59
4.4　案例8——精確定位熱點(diǎn)區(qū)域map、
area 61
4.5　綜合案例——使用錨鏈接制作電子書(shū)
閱讀網(wǎng)頁(yè) 64
4.6　高手甜點(diǎn) 67
4.7　跟我練練手 68
第5 章　用HTML5創(chuàng)建表格和表單
5.1　表格的基本結(jié)構(gòu) 70
5.2　使用HTML5創(chuàng)建表格 72
5.2.1　案例1——?jiǎng)?chuàng)建普通表格
72
5.2.2　案例2——?jiǎng)?chuàng)建一個(gè)帶有標(biāo)題的表格
73
5.2.3　案例3——定義表格的邊框類型border 74
5.2.4　案例4——定義表格的表頭 75
5.2.5　案例5——設(shè)置表格背景bgcolor、
background 76
5.2.6　案例6——設(shè)置單元格背景bgcolor 78
5.2.7　案例7——合并單元格colspan、
rowspan 79
5.2.8　案例8——排列單元格中的內(nèi)容align 83
5.2.9　案例9——設(shè)置單元格的行高與列寬
cellpadding 84
5.3　案例10——?jiǎng)?chuàng)建完整的表格 85
5.4　案例11——認(rèn)識(shí)表單 87
5.5　表單基本元素的使用 88
5.5.1　案例12——單行文本輸入框text 88
5.5.2　案例13——多行文本輸入框textarea 89
5.5.3　案例14——密碼域password 89
5.5.4　案例15——單選按鈕radio 90
5.5.5　案例16——復(fù)選框checkbox 91
5.5.6　案例17——下拉列表框select 92
5.5.7　案例18——普通按鈕button 93
5.5.8　案例19——提交按鈕submit 94
5.5.9　案例20——重置按鈕reset 95
5.6　表單高級(jí)元素的使用 96
5.6.1　案例21——url屬性的應(yīng)用 96
5.6.2　案例22——email屬性的應(yīng)用 97
5.6.3　案例23——date和time的應(yīng)用 98
5.6.4　案例24——number屬性的應(yīng)用 99
5.6.5　案例25——range屬性的應(yīng)用 100
5.6.6　案例26——required屬性的應(yīng)用 101
5.7　綜合案例1——?jiǎng)?chuàng)建用戶反饋單 102
5.8　綜合案例2——制作商品報(bào)價(jià)單 103
5.9　高手甜點(diǎn) 105
5.10　跟我練練手 106
第6章　HTML5中的多媒體
6.1　網(wǎng)頁(yè)音頻標(biāo)記audio 108
6.1.1　audio標(biāo)記概述 108
6.1.2　audio標(biāo)記的屬性 108
6.1.3　音頻解碼器 109
6.1.4　audio標(biāo)記瀏覽器的支持情況 109
6.2　網(wǎng)頁(yè)視頻標(biāo)記video 109
6.2.1　video標(biāo)記概述 109
6.2.2　video標(biāo)記的屬性 110
6.2.3　視頻解碼器 110
6.2.4　video標(biāo)記瀏覽器的支持情況 110
6.3　添加網(wǎng)頁(yè)音頻文件 111
6.3.1　案例1——設(shè)置背景音樂(lè) 111
6.3.2　案例2——設(shè)置音樂(lè)循環(huán)播放loop 112
6.4 　添加網(wǎng)頁(yè)視頻文件 112
6.4.1　案例3——為網(wǎng)頁(yè)添加視頻文件video 112
6.4.2　案例4——設(shè)置自動(dòng)運(yùn)行autoplay 113
6.4.3　案例5——設(shè)置視頻文件的循環(huán)
播放loop 114
6.4.4　案例6——設(shè)置視頻窗口的高度與寬度
height、width 115
6.5　添加網(wǎng)頁(yè)滾動(dòng)文字 115
6.5.1　案例7——滾動(dòng)文字標(biāo)記marquee 116
6.5.2　案例8——滾動(dòng)方向?qū)傩詃irection 116
6.5.3　案例9——滾動(dòng)方式屬性behavior 117
6.5.4　案例10——滾動(dòng)速度屬性scrollamount 118
6.5.5　案例11——滾動(dòng)延遲屬性scrolldelay 119
6.5.6　案例12——滾動(dòng)循環(huán)屬性loop 120
6.5.7　案例13——滾動(dòng)范圍屬性height、
width 121
6.5.8　案例14——滾動(dòng)背景顏色屬性bgcolor 122
6.5.9　案例15——滾動(dòng)空間屬性hspace、
vspace 123
6.6　高手甜點(diǎn) 124
6.7　跟我練練手 124
第7章　使用HTML5繪制圖形
7.1　什么是canvas 126
7.2　繪制基本形狀 127
7.2.1　案例1——繪制矩形 127
7.2.2　案例2——繪制圓形 128
7.2.3　案例3——使用moveTo與lineTo
繪制直線 129
7.2.4　案例4——使用bezierCurveTo繪制
貝濟(jì)埃曲線 131
7.3　繪制漸變圖形 133
7.3.1　案例5——繪制線性漸變 133
7.3.2　案例6——繪制徑向漸變 135
7.4　繪制變形圖形 136
7.4.1　案例7——變換原點(diǎn)坐標(biāo) 136
7.4.2　案例8——圖形縮放 137
7.4.3　案例9——旋轉(zhuǎn)圖形 138
7.5　繪制其他樣式的圖形 139
7.5.1　案例10——圖形組合 140
7.5.2　案例11——繪制帶陰影的圖形 142
7.5.3　案例12——繪制文字 143
7.6　使用圖像 145
7.6.1　案例13——繪制圖像 145
7.6.2　案例14——圖像平鋪 146
7.6.3　案例15——圖像裁剪 148
7.6.4　案例16——像素處理 149
7.7　圖形的保存與恢復(fù) 151
7.7.1　案例17——保存與恢復(fù)狀態(tài) 152
7.7.2　案例18——保存文件 153
7.8　綜合案例1——繪制火柴棒人物 154
7.9　綜合案例2——繪制商標(biāo) 157
7.10　高手甜點(diǎn) 159
7.11　跟我練練手 160
第8章　獲取地理位置
8.1　Geolocation API獲取地理位置 162
8.1.1　地理定位的原理 162
8.1.2　獲取定位信息的方法 162
8.1.3　常用地理定位方法 162
8.1.4　案例1——判斷瀏覽器是否支持HTML5
獲取地理位置信息 163
8.1.5　案例2——指定緯度和經(jīng)度坐標(biāo) 164
8.1.6　案例3——獲取當(dāng)前位置的經(jīng)度與緯度 165
8.2　目前瀏覽器對(duì)地理定位的支持情況 167
8.3　綜合案例——在網(wǎng)頁(yè)中調(diào)用
Google地圖 168
8.4　高手甜點(diǎn) 171
8.5　跟我練練手 172
第9章　Web通信新技術(shù)
9.1　跨文檔消息傳輸 174
9.1.1　跨文檔消息傳輸?shù)幕局R(shí) 174
9.1.2　案例1——跨文檔通信應(yīng)用測(cè)試 174
9.2　Web Sockets API 177
9.2.1　WebSocket API的概念 177
9.2.2　Web Sockets通信基礎(chǔ) 177
9.2.3　案例2——服務(wù)器端使用Web
Sockets API 179
9.2.4　案例3——客戶端使用Web
Sockets API 183
9.3　綜合案例——編寫簡(jiǎn)單的Web Socket
服務(wù)器 183
9.4　高手甜點(diǎn) 188
9.5　跟我練練手 188
第10章　構(gòu)建離線的Web
10.1　HTML5離線Web應(yīng)用概述 190
10.2　使用HTML5離線Web應(yīng)用API 190
10.2.1　案例1——檢查瀏覽器的支持情況 190
10.2.2　案例2——搭建簡(jiǎn)單的離線應(yīng)用程序 191
10.2.3　案例3——支持離線行為 191
10.2.4　案例4——manifest文件 192
10.2.5　案例5——Application Cache API 193
10.3　實(shí)例2——使用HTML5離線Web應(yīng)用
構(gòu)建應(yīng)用 195
10.3.1　案例6——?jiǎng)?chuàng)建記錄資源的manifest
文件 195
10.3.2　案例7——?jiǎng)?chuàng)建構(gòu)成界面的HTML和
CSS 195
10.3.3　案例8——?jiǎng)?chuàng)建離線的JavaScript 196
10.3.4　案例9——檢查applicationCache的
支持情況 198
10.3.5　案例10——為Update按鈕添加處理
函數(shù) 198
10.3.6　案例11——添加Storage功能代碼 199
10.3.7　案例12——添加離線事件處理程序 199
10.4　高手甜點(diǎn) 200
10.5　跟我練練手 201
第2篇??CSS3美化網(wǎng)頁(yè)