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