HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計

第1篇 HTML5基礎(chǔ)入門
第1章 認識網(wǎng)站與網(wǎng)頁 2
1.1 Internet與WWW 2
1.1.1 萬維網(wǎng) 2
1.1.2 什么是網(wǎng)站及網(wǎng)頁 3
1.1.3 網(wǎng)址的組成 5
1.2 構(gòu)建網(wǎng)站的流程 7
1.2.1 擬定網(wǎng)站主題 8
1.2.2 規(guī)劃網(wǎng)站架構(gòu)與內(nèi)容 9
1.2.3 搜集相關(guān)資料 10
1.2.4 開始制作網(wǎng)頁 10
1.2.5 上傳與測試 11
1.2.6 網(wǎng)站的推廣與更新維護 13
1.3 認識網(wǎng)頁文件和命名規(guī)則 13
1.3.1 主文件名與擴展名 13
1.3.2 常見的圖片格式 15
1.3.3 常見的聲音格式 16
1.3.4 網(wǎng)頁文件命名規(guī)則 17
1.4 網(wǎng)頁寬度與屏幕分辨率 17
1.4.1 屏幕分辨率 18
1.4.2 確定網(wǎng)頁寬度 19
本章小結(jié) 20
習(xí)題 22
第2章 HTML5入門 24
2.1 認識HTML5 24
2.1.1 HTML5與HTML4的差異 24
2.1.2 HTML5廢除的標記 25
2.2 學(xué)習(xí)HTML前的準備工作 26
2.2.1 建立HTML文件 26
2.2.2 預(yù)覽HTML網(wǎng)頁 28
2.3 HTML語法的概念與架構(gòu) 29
2.3.1 HTML的標記類型 29
2.3.2 HTML的組成 29
2.3.3 標記屬性的應(yīng)用 30
2.4 HTML5文件結(jié)構(gòu)與語義標記 30
2.4.1 結(jié)構(gòu)化的語義標記 30
2.4.2 HTML5聲明與編碼設(shè)置 34
本章小結(jié) 36
習(xí)題 36
第3章 文字與排版技巧 37
3.1 段落效果——使用排版標記 37
3.1.1 設(shè)置段落樣式的標記 37
3.1.2 設(shè)置對齊與縮進的標記 39
3.1.3 添加分隔線 41
3.1.4 設(shè)置段落標題 42
3.2 文字效果——使用文字標記 43
3.2.1 設(shè)置字形樣式的標記 43
3.3.2 設(shè)置上標、下標 45
3.3 項目符號與編號——使用列表標記 45
3.3.1 符號列表 45
3.3.2 編號列表 46
3.3.3 定義列表 49
3.4 注釋與特殊符號 50
3.4.1 加入注釋 50
3.4.2 使用特殊符號 51
3.5 新增中繼標記—— 52
3.5.1 meta標記語法 52
3.5.2 認識meta標記的http-equiv屬性 53
3.5.3 認識meta標記的name屬性 56
3.6 div標記與span標記 57
3.6.1 認識div標記 58
3.6.2 認識span標記 59
本章小結(jié) 60
習(xí)題 61
第4章 多媒體素材的運用 63
4.1 網(wǎng)頁圖片使用須知 63
4.1.1 圖片的尺寸與分辨率 63
4.1.2 圖片的來源 64
4.2 圖片的使用 64
4.2.1 嵌入圖片 65
4.2.2 路徑表示法 66
4.3 圖像處理軟件 67
4.3.1 初識Photoshop 67
4.3.2 改變圖片格式 68
4.3.3 更改圖片大小和分辨率 70
4.3.4 切割大圖為數(shù)張小圖 72
4.4 多媒體素材的來源 76
4.4.1 利用現(xiàn)有的多媒體元素 76
4.4.2 自己制作多媒體元素 77
4.5 添加影音特效 77
4.5.1 在網(wǎng)頁中加入音樂 77
4.5.2 添加影音動畫 79
4.5.3 添加Flash動畫 81
4.5.4 傳統(tǒng)影音播放器 81
4.5.5 使用iframe嵌入優(yōu)酷視頻 82
本章小結(jié) 84
習(xí)題 85
第5章 表格與表單 87
5.1 制作基本表格 87
5.1.1 表格的基本架構(gòu) 87
5.1.2 設(shè)置表格標題 89
5.2 表格的編輯技巧 91
5.2.1 合并單元格 91
5.2.2 利用表格組合圖片 93
5.3 什么是表單 96
5.4 創(chuàng)建表單 98
5.4.1 表單的基本架構(gòu) 98
5.4.2 輸入組件 101
5.4.3 列表組件 105
5.4.4 選擇組件 107
5.4.5 按鈕組件 109
5.4.6 表單分組 111
5.5 操作范例——教學(xué)意見調(diào)查表 111
本章小結(jié) 113
習(xí)題 114
第6章 創(chuàng)建超鏈接 116
6.1 認識超鏈接 116
6.1.1 什么是超鏈接 116
6.1.2 規(guī)劃超鏈接 117
6.2 加入超鏈接 117
6.2.1 超鏈接的用法 117
6.2.2 站外網(wǎng)頁鏈接 118
6.2.3 站內(nèi)網(wǎng)頁鏈接 119
6.2.4 鏈接到E-Mail郵箱 122
6.2.5 鏈接到文件 125
本章小結(jié) 126
習(xí)題 126
第2篇 CSS美化
第7章 認識CSS樣式表 130
7.1 什么是CSS樣式表 130
7.1.1 CSS的由來 130
7.1.2 CSS的優(yōu)勢 131
7.1.3 CSS的應(yīng)用 132
7.2 建立CSS樣式表 133
7.2.1 CSS基本格式 133
7.2.2 應(yīng)用CSS樣式表 134
7.2.3 認識CSS選擇器 140
本章小結(jié) 145
習(xí)題 145
第8章 CSS基本語法 147
8.1 控制文字樣式 147
8.1.1 字形屬性 147
8.1.2 段落屬性 150
8.1.3 文字效果屬性 154
8.2 控制背景 157
8.2.1 設(shè)置背景顏色 157
8.2.2 設(shè)置背景圖片 158
8.2.3 設(shè)置背景漸變 167
本章小結(jié) 170
習(xí)題 171
第9章 CSS排版技巧 173
9.1 控制邊界與邊框 173
9.1.1 邊界 173
9.1.2 邊框 175
9.1.3 邊界間距 182
9.2 網(wǎng)頁組件的定位 184
9.2.1 一般定位 184
9.2.2 圖層定位 191
9.3 超鏈接與鼠標光標特效 193
9.3.1 超鏈接特效 193
9.3.2 鼠標光標特效 196
本章小結(jié) 198
習(xí)題 199
第10章 HTML5+CSS3綜合應(yīng)用 201
10.1 操作網(wǎng)頁內(nèi)容 201
10.2 使用語義標記排版 202
10.3 疊字標題 208
10.4 網(wǎng)頁背景和鼠標光標 209
10.5 菜單超鏈接特效 210
10.6 主內(nèi)容區(qū)樣式 211
第3篇 HTML5進階
第11章 認識JavaScript 216
11.1 什么是JavaScript 216
11.1.1 JavaScript架構(gòu) 216
11.1.2 JavaScript對象與函數(shù) 218
11.1.3 JavaScript事件 221
11.2 JavaScript流程控制 223
11.2.1 運算符號 223
11.2.2 if…else語句 225
11.2.3 for循環(huán) 225
本章小結(jié) 226
習(xí)題 227
第12章 canvas在線繪圖 229
12.1 認識canvas 229
12.1.1 基本canvas語法 229
12.1.2 繪制各種圖形 232
12.2 設(shè)置圖形樣式 238
12.2.1 指定圖形顏色 238
12.2.2 指定線條粗細 241
12.2.3 漸變填充 244
本章小結(jié) 248
習(xí)題 249
第13章 網(wǎng)頁數(shù)據(jù)存儲Web Storage 250
13.1 認識Web Storage 250
13.1.1 Web Storage基本概念 250
13.1.2 檢測瀏覽器是否支持Web Storage 250
13.2 localStorage和sessionStorage 251
13.2.1 訪問localStorage 251
13.2.2 刪除localStorage 254
13.2.3 訪問sessionStorage 256
13.3 Web Storage實例練習(xí) 257
13.3.1 操作步驟 257
13.3.2 隱藏
及組件 259
13.3.3 登錄 259
13.3.4 注銷 260
本章小結(jié) 261
習(xí)題 262
第14章 Web Storage操作購物車 263
第4篇 HTML5應(yīng)用
第15章 JavaScript的好幫手——jQuery 276
15.1 認識jQuery 276
15.1.1 引用jQuery函數(shù)庫 276
15.1.2 jQuery基本架構(gòu) 277
15.1.3 jQuery選擇器 278
15.2 表格排序軟件——tablesorter 281
15.2.1 下載與應(yīng)用 281
15.2.2 進階應(yīng)用 283
15.3 行事歷軟件——FullCalendar 286
15.3.1 下載與應(yīng)用 286
15.3.2 進階應(yīng)用 287
本章小結(jié) 295
習(xí)題 295
第16章 開發(fā)跨平臺移動設(shè)備網(wǎng)頁jQuery Mobile 297
16.1 jQuery Mobile基礎(chǔ) 297
16.1.1 認識jQuery Mobile 297
16.1.2 第一個jQuery Mobile網(wǎng)頁 301
16.2 jQuery Mobile的UI組件 306
16.2.1 認識UI組件 306
16.2.2 按鈕 308
16.2.3 組按鈕 313
16.2.4 列表 314
16.3 網(wǎng)頁導(dǎo)航與布景主題 316
16.3.1 jQuery Mobile網(wǎng)頁導(dǎo)航 316
16.3.2 ThemeRoller快速應(yīng)用布景主題 319
本章小結(jié) 326
習(xí)題 327
第17章 移動設(shè)備版網(wǎng)頁操作 329
17.1 網(wǎng)站架構(gòu) 329
17.2 訂購流程 332
17.3 查訂單 341
17.4 找店家 344