最近制作網(wǎng)站時(shí)不少客戶會(huì)問,網(wǎng)站能不能直接轉(zhuǎn)換成手機(jī)可以瀏覽的版本,最好能直接裝在用戶的手機(jī)上?當(dāng)然可以!只要有HTML5,客戶的上述需求都能輕易滿足。大多數(shù)客戶都會(huì)優(yōu)先考慮如何節(jié)省成本,如果為了移動(dòng)設(shè)備再開發(fā)一個(gè)原生應(yīng)用程序(Native App)的版本,費(fèi)用會(huì)更加昂貴。但是通過HTML5技術(shù),稍微修改一下現(xiàn)有網(wǎng)站就能放到移動(dòng)設(shè)備上,功能界面與普通APP沒有區(qū)別,甚至更加美觀,客戶接受度普遍都很高。對(duì)于程序開發(fā)人員而言,輕輕松松就能增加兩三倍的收入,這也是HTML5這么誘人的原因。
對(duì)于程序開發(fā)人員而言,最大的問題應(yīng)該是界面設(shè)計(jì)部分,jQuery Mobile函數(shù)庫的出現(xiàn),完全解決了這個(gè)問題,它的優(yōu)點(diǎn)之一就是只要稍加設(shè)置屬性,就能將表單組件轉(zhuǎn)換成移動(dòng)設(shè)備界面。HTML5與jQuery Mobile兩者搭配使用,能夠輕易達(dá)到跨平臺(tái)、跨設(shè)備(Write-Once,Run Anywhere)的目的,這無疑是目前開發(fā)跨移動(dòng)設(shè)備網(wǎng)站的技術(shù)首選。
HTML5不僅僅是單純的HTML語法,還包含了JavaScript、CSS等技術(shù),HTML5新增了一些網(wǎng)頁應(yīng)用程序的API,這些都必須搭配JavaScript語言使用。另外,網(wǎng)頁美化的部分,如文字字體、大小與顏色等,以前可以使用標(biāo)記屬性來設(shè)置,現(xiàn)在HTML5已經(jīng)停用這些樣式美化的標(biāo)記屬性,改由CSS語法負(fù)責(zé)。當(dāng)然,學(xué)習(xí)這些技術(shù)之前,必須十分熟悉基本的HTML語法,才能達(dá)到事半功倍的效果。
《HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站(第2版)》以HTML5為主體,搭配jQuery制作網(wǎng)頁,再搭配jQuery Mobile制作Mobile APP,由基礎(chǔ)到高級(jí)循序漸進(jìn),并通過范例,讓讀者進(jìn)行實(shí)戰(zhàn)練習(xí)。第4篇“打包與測(cè)試”教用戶如何將寫好的網(wǎng)頁打包成Android APP。本書最后3章包含了完整的范例實(shí)戰(zhàn)——“百度地圖API和谷歌地圖API”“甜點(diǎn)坊訂購系統(tǒng)實(shí)戰(zhàn)”以及“記事本Note APP實(shí)戰(zhàn)”,后面兩個(gè)范例分別搭配Web Storage和Web SQL數(shù)據(jù)庫。制作完成之后,用戶立即就能將成果打包并且放到移動(dòng)設(shè)備上安裝運(yùn)行。只要按部就班地跟著本書學(xué)習(xí),就能輕松制作網(wǎng)頁及Android APP。
“工欲善其事,必先利其器”,網(wǎng)頁制作前的首要任務(wù)就是準(zhǔn)備好相關(guān)的軟件工具,例如想要設(shè)計(jì)個(gè)人專用圖案或影片就必須由圖像編輯軟件、多媒體剪輯軟件進(jìn)行輔助,這些軟件工具雖然可以在市面上買到,但對(duì)于經(jīng)費(fèi)有限的讀者來說,卻是一大負(fù)擔(dān)。讀者可以參考書中所列舉的免費(fèi)工具或自由軟件,讓有心學(xué)習(xí)的用戶找到合適的工具。相信《HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站(第2版)》是用戶學(xué)習(xí)網(wǎng)頁制作的最佳入門書,同時(shí)也適合老師們作為相關(guān)課程的教材使用。
《HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站(第2版)》內(nèi)容雖經(jīng)再三思考校對(duì),力求謹(jǐn)慎、正確,但疏漏之處恐難避免,還請(qǐng)讀者批評(píng)指正,再次感謝。
《HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站(第2版)》范例的素材和代碼下載地址為:http://pan.baidu.com/s/1qY6Kj04(注意區(qū)分?jǐn)?shù)字和英文字母大小寫)。如果下載有問題,請(qǐng)發(fā)送電子郵件至booksaga@126.com,郵件主題設(shè)置為“求HTML5+CSS3(第2版)代碼”。
編者
2016年8月
第1篇 HTML5網(wǎng)頁開發(fā)
第1章 HTML5基礎(chǔ)入門 2
1.1 認(rèn)識(shí)HTML5 2
1.1.1 HTML5與HTML4的差異 2
1.1.2 HTML5廢除的標(biāo)記 3
1.2 學(xué)習(xí)HTML前的準(zhǔn)備工作 4
1.2.1 創(chuàng)建HTML文件 4
1.2.2 預(yù)覽HTML網(wǎng)頁 6
1.3 HTML語法的概念與架構(gòu) 7
1.3.1 HTML的標(biāo)記類型 7
1.3.2 HTML的組成 7
1.3.3 標(biāo)記屬性的應(yīng)用 8
1.4 HTML5文件結(jié)構(gòu)與語義標(biāo)記 8
1.4.1 結(jié)構(gòu)化的語義標(biāo)記 8
1.4.2 HTML5聲明與編碼設(shè)置 12
第2章 文字變化與排版技巧 14
2.1 段落效果——使用排版標(biāo)記 14
2.1.1 設(shè)置段落樣式的標(biāo)記 14
2.1.2 設(shè)置對(duì)齊與縮進(jìn)的標(biāo)記 16
2.1.3 添加分隔線 18
2.1.4 設(shè)置段落標(biāo)題 19
2.2 文字效果——使用文字標(biāo)記 20
2.2.1 設(shè)置字形樣式的標(biāo)記 20
2.2.2 設(shè)置上標(biāo)、下標(biāo) 22
2.3 項(xiàng)目符號(hào)與編號(hào)——使用列表標(biāo)記 22
2.3.1 符號(hào)列表 22
2.3.2 編號(hào)列表 24
2.3.3 定義列表 26
2.4 注釋與特殊符號(hào) 27
2.4.1 添加注釋 27
2.4.2 使用特殊符號(hào) 29
2.5 創(chuàng)建超鏈接 30
2.5.1 什么是超鏈接 30
2.5.2 超鏈接的用法 30
2.5.3 站外網(wǎng)頁鏈接 32
2.5.4 站內(nèi)網(wǎng)頁鏈接 33
2.5.5 鏈接到E-Mail郵箱 35
2.5.6 鏈接到文件 38
第3章 HTML5表格與表單 40
3.1 制作基本表格 40
3.1.1 表格的基本架構(gòu) 40
3.1.2 設(shè)置表格標(biāo)題 42
3.2 表格的編輯技巧 44
3.2.1 合并單元格 44
3.2.2 利用表格組合圖片 46
3.3 什么是表單 48
表單能做什么 49
3.4 創(chuàng)建表單 50
3.4.1 表單的基本架構(gòu) 51
3.4.2 輸入組件 53
3.4.3 列表組件 58
3.4.4 選擇組件 60
3.4.5 按鈕組件 61
3.4.6 表單分組 63
3.5 操作范例——教學(xué)意見調(diào)查表 63
第4章 HTML5多媒體素材的應(yīng)用 66
4.1 網(wǎng)頁圖片使用須知 66
4.1.1 圖片的尺寸與分辨率 66
4.1.2 圖片的來源 67
4.2 圖片的使用 67
4.2.1 嵌入圖片 67
4.2.2 路徑表示法 68
4.3 添加影音特效 70
4.3.1 在網(wǎng)頁中加入音樂 70
4.3.2 添加影音動(dòng)畫 72
4.3.3 添加Flash動(dòng)畫 73
4.3.4 傳統(tǒng)影音播放器 74
4.3.5 使用iframe嵌入優(yōu)酷視頻 74
第5章 網(wǎng)頁存儲(chǔ)Web Storage 78
5.1 認(rèn)識(shí)Web Storage 78
5.1.1 Web Storage的概念 78
5.1.2 檢測(cè)瀏覽器是否支持Web Storage 78
5.2 localStorage和sessionStorage 79
5.2.1 訪問localStorage 79
5.2.2 刪除localStorage 82
5.2.3 訪問sessionStorage 84
5.3 Web Storage實(shí)例練習(xí) 85
5.3.1 登錄/注銷和計(jì)數(shù)器 85
5.3.2 購物車 90
第2篇 CSS網(wǎng)頁美化
第6章 認(rèn)識(shí)CSS樣式表 102
6.1 什么是CSS樣式表 102
6.1.1 CSS的由來 102
6.1.2 CSS的優(yōu)勢(shì) 103
6.1.3 CSS的應(yīng)用 104
6.2 創(chuàng)建CSS樣式表 105
6.2.1 CSS基本格式 105
6.2.2 應(yīng)用CSS樣式表 107
6.2.3 認(rèn)識(shí)CSS選擇器 112
第7章 CSS基本語法 118
7.1 控制文字樣式 118
7.1.1 字體屬性 118
7.1.2 段落屬性 121
7.1.3 文字效果屬性 125
7.2 控制背景 128
7.2.1 設(shè)置背景顏色 128
7.2.2 設(shè)置背景圖片 130
7.2.3 設(shè)置背景漸變 138
第8章 CSS樣式與排版 142
8.1 控制邊界與邊框 142
8.1.1 邊界 142
8.1.2 邊框 144
8.1.3 邊界間距 151
8.2 網(wǎng)頁組件的定位 153
8.2.1 一般定位 154
8.2.2 圖層定位 160
8.3 超鏈接與鼠標(biāo)光標(biāo)特效 162
8.3.1 超鏈接特效 162
8.3.2 鼠標(biāo)光標(biāo)特效 165
第9章 HTML5+CSS3綜合應(yīng)用 168
9.1 操作網(wǎng)頁內(nèi)容 168
9.2 使用語義標(biāo)記排版 170
9.3 疊字標(biāo)題 175
9.4 網(wǎng)頁背景和鼠標(biāo)光標(biāo) 176
9.5 菜單超鏈接特效 177
9.6 主內(nèi)容區(qū)樣式 178
第3篇 jQuery與jQuery Mobile
第10章 認(rèn)識(shí)jQuery與jQuery Mobile 184
10.1 認(rèn)識(shí)JavaScript 184
10.1.1 JavaScript架構(gòu) 184
10.1.2 JavaScript對(duì)象與函數(shù) 187
10.1.3 JavaScript事件 189
10.2 認(rèn)識(shí)jQuery 191
10.2.1 引用jQuery函數(shù)庫 191
10.2.2 jQuery基本架構(gòu) 193
10.2.3 jQuery選擇器 193
10.3 跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁jQuery Mobile 196
10.3.1 認(rèn)識(shí)jQuery Mobile 196
10.3.2 第一個(gè)jQuery Mobile網(wǎng)頁 200
第11章 jQuery Mobile UI組件 206
11.1 套用UI組件 206
11.1.1 認(rèn)識(shí)UI組件 206
11.1.2 按鈕 208
11.1.3 組按鈕 212
11.1.4 列表 213
11.2 網(wǎng)頁導(dǎo)航與布景主題 216
11.2.1 jQuery Mobile網(wǎng)頁導(dǎo)航 216
11.2.2 ThemeRoller快速應(yīng)用布景主題 219
第12章 jQuery Mobile 事件 226
12.1 頁面事件 226
12.1.1 初始化事件 226
12.1.2 外部頁面加載事件 230
12.1.3 頁面切換事件 231
12.2 觸摸事件 234
12.2.1 點(diǎn)擊事件 234
12.2.2 滑動(dòng)事件 236
12.2.3 滾動(dòng)事件 238
12.2.4 屏幕方向改變事件 240
第13章 數(shù)據(jù)的保存與讀取 243
13.1 認(rèn)識(shí)IndexedDB 243
13.1.1 IndexedDB的概念 243
13.1.2 IndexedDB基本操作 244
13.1.3 讀取數(shù)據(jù) 253
13.1.4 刪除數(shù)據(jù) 254
13.1.5 使用指針對(duì)象 255
13.2 認(rèn)識(shí)Web SQL 260
13.2.1 Web SQL基本操作 260
13.2.2 創(chuàng)建數(shù)據(jù)表 262
13.2.3 新增、修改和刪除數(shù)據(jù) 265
13.3 讀取文本文件 269
13.3.1 選擇文件 269
13.3.2 讀取文件 272
第14章 插件的使用 275
14.1 表格排序插件——tablesorter 275
14.1.1 下載與套用 275
14.1.2 高級(jí)應(yīng)用 277
14.2 日期選擇器——Datepicker 280
14.2.1 下載與套用 280
14.2.2 高級(jí)應(yīng)用 281
14.3 日歷插件——FullCalendar 284
14.3.1 下載與套用 284
14.3.2 高級(jí)應(yīng)用 285
第4篇 打包與測(cè)試
第15章 下載與安裝Apache Cordova 294
15.1 下載與安裝Cordova 294
15.1.1 安裝必要的工具 294
15.1.2 通過npm安裝Cordova 300
15.1.3 設(shè)置Android模擬器 301
15.2 將網(wǎng)頁轉(zhuǎn)換成Android APP 303
第16章 百度地圖API和谷歌地圖API 307
16.1 百度地圖API和谷歌地圖API 307
16.1.1 簡(jiǎn)易的百度地圖和谷歌地圖 307
16.1.2 地圖控件 314
16.2 按地址顯示地圖 317
16.2.1 地址定位 317
16.2.2 圖標(biāo)標(biāo)記 321
第17章 甜點(diǎn)坊訂購系統(tǒng)實(shí)戰(zhàn) 325
17.1 網(wǎng)站架構(gòu) 325
17.2 訂購流程 328
17.3 查訂單 337
17.4 找店家 340
第18章 記事本Note APP實(shí)戰(zhàn) 341
18.1 記事本的結(jié)構(gòu) 341
18.2 新增記事 343
18.3 刪除記事 345
18.4 記事列表 347