結合當下技術熱點,讓移動互聯網的混合開發更簡單。移動互聯網的發展簡直可以用爆發來形容,傳統的網頁技術從兼容性和美觀性上都無法與移動Web和媲美。當下*好*快速的開發移動互聯網的技術非HTML 5莫屬,微信內嵌HTML 5網頁和游戲的爆發也促進了HTML 5在國內的需求。對于安卓、iOS等跨設備的需求,又促進了jQuery Mobile的跨平臺技術的發展。本書結合這兩大熱點,幫助讀者輕松應對移動互聯網。
布局移動網站和移動應用,切中目前企業*熱的開發需求。本書所有的實例或小示例全部針對移動網頁,這是市場所需,因為所有的企業都在謀求移動方向的突破,而這種突破的第一步就是將網頁改造成兼容的移動網頁。
低成本,快速開發,還能跨平臺,利用*好*流行的技術進行實戰演練。本書所選的HTML 5和jQuery Mobile都是開源技術,不需要購買大量的硬件和軟件,完全低成本,而且這兩種技術都支持快速開發且還能跨平臺,這進一步節約了企業的成本。
*合理的章節安排。不管是PC網頁還是移動網頁,都要明白網頁的構成和基本元素的設計。本書首先從基礎網頁講起,然后講解HTML 5的技術,介紹CSS美化網頁,再介紹CSS 3幫助讀者制作更酷炫的移動網頁,*后通過jQuery和jQuery Mobile的講解,幫助讀者將移動網頁布局到任何需要的平臺上。
第一篇 HTML與HTML 5
第1章 網頁的架構基礎 2
1.1 HTML網頁的基礎構成 2
1.1.1 從一個空白的HTML網頁說起 2
1.1.2 通過網頁中的DOCTYPE標簽識別文檔類型 4
1.1.3 html標簽聲明這是一個網頁 5
1.1.4 head標簽定義網頁的頭部 5
1.1.5 body元素定義網頁的主體 10
1.2 基底網址標記base標簽 12
1.3 定義CSS樣式表為網頁排版 16
1.3.1 CSS樣式表概述 16
1.3.2 定義外鏈式CSS樣式表 17
1.3.3 定義CSS樣式style標簽 20
1.3.4 定義內聯式CSS樣式表 22
1.4 添加網站 logo 23
1.4.1 添加網站圖像 logo 24
1.4.2 添加網站文字 logo 26
1.4.3 添加網站圖形 logo 29
1.5 使用腳本元素script標簽 33
1.5.1 HTML網頁內嵌腳本讓網頁動起來 33
1.5.2 載入外部腳本庫 36
1.5.3 推遲腳本執行 38
1.5.4 異步執行腳本 41
1.6 使用noscript標簽判斷瀏覽器是否支持腳本 44
1.7 為標簽添加id、name或class屬性 45
1.7.1 為標簽添加id屬性 45
1.7.2 為標簽添加name屬性 47
1.7.3 為標簽添加class屬性 50
1.8 為標簽添加title屬性 53
1.9 添加網頁注釋 55
1.10 測試瀏覽器對HTML 5屬性的支持 58
1.11 案例實戰:一個完整的HTML 5網頁應用 61
1.12 小 結 64
第2章 HTML網頁的基本標簽 65
2.1 HTML網頁段落排版 65
2.1.1 設置段落樣式的標記 65
2.1.2 設置對齊與縮進的標記 66
2.1.3 添加分隔線 68
2.1.4 設置段落標題 69
2.2 文字效果 70
2.2.1 設置字形樣式的標記 70
2.2.2 設置上標、下標 72
2.3 項目符號與編號 73
2.3.1 符號列表 73
2.3.2 編號列表 75
2.3.3 自定義列表 76
2.4 使用特殊符號 78
2.5 創建超鏈接 80
2.5.1 什么是超鏈接 80
2.5.2 站外網頁鏈接 80
2.5.3 站內網頁鏈接 81
2.6 小 結 83
第3章 HTML 5表單 84
3.1 各瀏覽器內核一覽 84
3.2 E-mail類型的input標簽 85
3.3 URL類型的input標簽 87
3.4 數值類型的input標簽 89
3.5 使用日期選擇器 91
3.6 用datalist來實現自動提示 93
3.7 各瀏覽器對HTML 5表單新類型的支持 95
3.8 小 結 96
第4章 HTML 5特色 97
4.1 HTML 5之新特性 97
4.1.1 語義化標簽元素 97
4.1.2 CSS 3新特性 99
4.1.3 音頻、視頻與多媒體 99
4.1.4 畫布Canvas 101
4.1.5 本地文件訪問 104
4.1.6 開放字體格式WOFF 108
4.1.7 地理定位 108
4.1.8 微數據 110
4.1.9 Ajax升級版——XMLHttpRequest Level 2 112
4.1.10 HTML 5 Forms 115
4.2 HTML 5之Web儲存 122
4.2.1 Web存儲概述 122
4.2.2 localStorage存儲方式 123
4.2.3 sessionStorage存儲方式 124
4.3 HTML 5之應用緩存 126
4.4 Web索引數據庫:IndexedDB 130
4.4.1 打開一個IndexedDB數據庫 130
4.4.2 向ObjectStore里新增對象 131
4.4.3 從ObjectStore里刪除對象 131
4.4.4 通過key取出對象 131
4.4.5 更新一個對象 132
4.5 小 結 132
第二篇 CSS與CSS 3
第5章 定義CSS網頁樣式 134
5.1 什么是CSS 134
5.2 CSS樣式表構成 135
5.2.1 CSS樣式表構成 135
5.2.2 CSS樣式表高級語法 135
5.2.3 CSS選擇器 136
5.3 標簽語義化 137
5.4 CSS命名規范 138
5.5 CSS樣式重置 139
5.6 CSS Sprites技術 142
5.7 頁面質量評估標準 146
5.8 CSS Hack 148
5.8.1 什么是CSS Hack 148
5.8.2 CSS Hack原理 148
5.8.3 CSS Hack實例 148
5.9 小 結 155
第6章 CSS網頁設計基礎 156
6.1 設計文字樣式 156
6.1.1 字體屬性 156
6.1.2 段落屬性 166
6.1.3 文字效果 175
6.2 設計背景樣式 181
6.2.1 設計背景顏色 181
6.2.2 設計背景圖片 183
6.2.3 設計背景漸變 185
6.3 設計邊界樣式 187
6.3.1 邊框 187
6.3.2 內邊距 191
6.3.3 外邊距 194
6.4 網頁元素的定位 197
6.4.1 相對定位 197
6.4.2 絕對定位 201
6.5 小 結 205
第7章 CSS選擇器 206
7.1 標簽選擇器 206
7.2 后代與子代選擇器 209
7.3 類別選擇器 211
7.4 id選擇器 213
7.5 屬性選擇器 215
7.6 偽類選擇器 219
7.6.1 動態偽類選擇器 219
7.6.2 狀態偽類選擇器 222
7.6.3 偽元素選擇器 224
7.7 結構性偽類選擇器 226
7.8 nth偽類選擇器 228
7.9 取反偽類選擇器 231
7.10 全局選擇器 233
7.11 小 結 235
第8章 媒體查詢 236
8.1 響應式Web設計介紹 236
8.1.1 流動布局 236
8.1.2 自適應圖片 240
8.1.3 媒體查詢 247
8.2 媒體查詢使用方法 249
8.2.1 媒體查詢基本語法 249
8.2.2 使用媒體查詢 251
8.3 實戰:響應式登錄頁面 252
8.4 小 結 258
第9章 案例:HTML 5+CSS 3之輕量級內容管理系統 259
9.1 內容管理系統概述 259
9.2 HTML、CSS和JS等資源的離線緩存 260
9.3 數據儲存結構 262
9.4 登錄驗證模塊 263
9.5 新用戶注冊模塊 272
9.6 游客信息模塊 277
9.7 用戶信息模塊 282
9.8 管理員信息模塊 287
9.9 關于本系統的補充說明 299
9.9.1 如何初始化用戶信息 299
9.9.2 如何清除全部用戶信息 300
9.9.3 關于404頁面 301
9.9.4 關于BootStrap框架 301
9.9.5 關于localStorage與sessionStorage 301
9.10 小 結 302
第三篇 jQuery與 jQuery Mobile
第10章 jQuery入門 304
10.1 什么是jQuery 304
10.1.1 jQuery的功能 304
10.1.2 配置jQuery運行環境 307
10.1.3 使用Dreamweaver編寫第一個包含jQuery庫的網站 309
10.1.4 認識jQuery對象 313
10.1.5 調試jQuery程序 316
10.2 jQuery選擇器 319
10.2.1 基本選擇器 319
10.2.2 層次選擇器 322
10.2.3 過濾選擇器 327
10.2.4 表單選擇器 339
10.3 用jQuery來操作DOM 340
10.3.1 修改元素屬性 341
10.3.2 修改元素內容 342
10.3.3 動態創建內容 344
10.3.4 動態插入節點 345
10.3.5 動態刪除節點 348
10.4 jQuery的事件 349
10.4.1 什么是事件 350
10.4.2 jQuery所支持的事件和事件類型 350
10.4.3 頁面初始化事件 352
10.4.4 綁定事件 354
10.4.5 移除事件綁定 356
10.4.6 切換事件 357
10.5 小 結 358
第11章 jQuery Mobile移動開發入門 359
11.1 跨平臺移動開發框架 359
11.1.1 什么是跨平臺移動開發框架 359
11.1.2 為什么選擇跨平臺移動開發框架 360
11.1.3 常見的跨平臺移動開發框架有哪些 361
11.2 認識jQuery Mobile 366
11.2.1 為什么選擇jQuery Mobile 366
11.2.2 漸進式增強的主題界面 367
11.2.3 簡單但是有調理的標記化語言開發 368
11.2.4 自適應布局 369
11.2.5 jQueryMobile案例 370
11.3 下載并應用jQuery Mobile 373
11.3.1 下載jQuery Mobile 374
11.3.2 使用Dreamweaver編輯jQuery Mobile 375
11.3.3 創建第一個jQuery Mobile文件 375
11.3.4 在PC上測試jQuery Mobile 376
11.3.5 應用jQuery Mobile開發的頁面 379
11.4 小 結 379
第12章 jQuery Mobile快速開發 380
12.1 從選擇元素入手 380
12.1.1 選擇頁面中的元素 380
12.1.2 設置頁面中元素的屬性 381
12.2 應用jQuery Mobile中的控件 381
12.2.1 在界面中固定一個工具欄 381
12.2.2 按鈕形式的菜單 384
12.2.3 表單做成的手版QQ 387
12.2.4 列表形式的貼吧 392
12.2.5 使用對話框實現一個相冊 395
12.3 小 結 398
第13章 APP的布局 399
13.1 QQ登錄界面 399
13.2 簡潔通訊錄 403
13.3 完美九宮格 406
13.4 可以折疊的QQ好友列表 408
13.5 展開圖標 413
13.6 Metro效果 415
13.6.1 利用分欄布局 416
13.6.2 利用純CSS調整色塊尺寸 418
13.7 課程表 420
13.8 小 結 422
第14章 應用的發布和推廣 423
14.1 生成Android應用 423
14.1.1 JDK的配置 423
14.1.2 Eclipse 與ADT的配置 427
14.1.3 SDK的更新 428
14.1.4 第一個程序 430
14.1.5 使用實體機測試第一個程序 432
14.2 如何生成跨平臺的應用 433
14.2.1 生成iOS應用 433
14.2.2 生成WebOS應用 436
14.3 怎樣發布應用 437
14.4 怎樣推廣應用 439
14.5 小 結 440
第四篇 移動網頁與APP實戰
第15章 案例:實現一個實時股票APP 442
15.1 項目需求 443
15.2 技術分析 443
15.3 準備jqChart圖表 443
15.3.1 下載jqChart 444
15.3.2 參數說明 446
15.4 開發一個模擬股票指數實時圖應用 456
15.4.1 添加jqChart圖表插件插件庫文件 456
15.4.2 構建實時圖頁面的布局 457
15.4.3 模擬股票實時圖的初始化操作 458
15.4.4 模擬股票實時走勢圖APP最終效果 461
15.5 小 結 463
第16章 案例:實現一個在線視頻播放器 464
16.1 項目需求 464
16.2 界面設計 465
16.3 界面的實現 467
16.3.1 主題文件的獲取 467
16.3.2 主頁界面的實現 469
16.3.3 二級頁面的實現 471
16.3.4 視頻播放界面的實現 473
16.4 數據庫的設計與連接 475
16.4.1 數據庫設計 476
16.4.2 數據庫連接 478
16.5 功能的實現 479
16.5.1 首頁功能的實現 480
16.5.2 專輯列表功能的實現 483
16.5.3 播放頁面的實現 486
16.6 小 結 489