構(gòu)建移動(dòng)網(wǎng)站與APP：HTML 5+CSS 3+jQuery Mobile入門與實(shí)戰(zhàn)

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

第四篇  移動(dòng)網(wǎng)頁(yè)與APP實(shí)戰(zhàn) 第15章  案例：實(shí)現(xiàn)一個(gè)實(shí)時(shí)股票APP 442 15.1  項(xiàng)目需求 443 15.2  技術(shù)分析 443 15.3  準(zhǔn)備jqChart圖表 443 15.3.1  下載jqChart 444 15.3.2  參數(shù)說(shuō)明 446 15.4  開發(fā)一個(gè)模擬股票指數(shù)實(shí)時(shí)圖應(yīng)用 456 15.4.1  添加jqChart圖表插件插件庫(kù)文件 456 15.4.2  構(gòu)建實(shí)時(shí)圖頁(yè)面的布局 457 15.4.3  模擬股票實(shí)時(shí)圖的初始化操作 458 15.4.4  模擬股票實(shí)時(shí)走勢(shì)圖APP最終效果 461 15.5  小  結(jié) 463 第16章  案例：實(shí)現(xiàn)一個(gè)在線視頻播放器 464 16.1  項(xiàng)目需求 464 16.2  界面設(shè)計(jì) 465 16.3  界面的實(shí)現(xiàn) 467 16.3.1  主題文件的獲取 467 16.3.2  主頁(yè)界面的實(shí)現(xiàn) 469 16.3.3  二級(jí)頁(yè)面的實(shí)現(xiàn) 471 16.3.4  視頻播放界面的實(shí)現(xiàn) 473 16.4  數(shù)據(jù)庫(kù)的設(shè)計(jì)與連接 475 16.4.1  數(shù)據(jù)庫(kù)設(shè)計(jì) 476 16.4.2  數(shù)據(jù)庫(kù)連接 478 16.5  功能的實(shí)現(xiàn) 479 16.5.1  首頁(yè)功能的實(shí)現(xiàn) 480 16.5.2  專輯列表功能的實(shí)現(xiàn) 483 16.5.3  播放頁(yè)面的實(shí)現(xiàn) 486 16.6  小  結(jié) 489