1 / 13

行動網頁製作簡介

行動網頁製作簡介. 指導老師：廖述盛 教授 報 告 人：幸廣泰 助理. jQuery Mobile 的特性. jQuery mobile 可跨不同的移動裝置： jQuery mobile  可支援許多不同的平台，包括： iOS, Android, Blackberry, Palm WebOS , Nokia/Symbian, Windows Mobile, bada , MeeGo ，以及其他可以看得懂 HTML 的設備。 詳細支援狀況可參考 Mobile Graded Browser Support 支援新舊瀏覽器：

valiant
Download Presentation

行動網頁製作簡介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 行動網頁製作簡介 指導老師：廖述盛 教授 報 告 人：幸廣泰 助理

  2. jQuery Mobile 的特性 • jQuery mobile 可跨不同的移動裝置：jQuery mobile  可支援許多不同的平台，包括：iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo，以及其他可以看得懂 HTML 的設備。 詳細支援狀況可參考Mobile Graded Browser Support • 支援新舊瀏覽器： 可讓較舊的手機一樣可以看到基本的功能(即使不支援 javascipt)，同時又可以讓支援度比較好的瀏覽器享受較先進的功能。 • 透過設定 HTML 標籤來完成 jQuery Mobile 的設定：jQuery 主要是透過 HTML5 data-* tag 來達成種種 UI 的設定，只要認識了大概的語法，不用寫一行 javascript，就可以快速建出 app 的雛型。

  3. jQuery mobile 運作步驟 • 宣告 HTML5 documnt • 載入jQuery mobile CSS, jQuery, jQuery mobile 函式庫 • 使用 jquery mobile 所定義的語法，如 data-role 等來定義 頁面架構 • 官網：http://demos.jquerymobile.com/1.4.2/

  4. 行動網頁語法及基本架構 1.宣告 HTML5 documnt • <!DOCTYPE html> • <html> • <head> • <meta content="text/html; charset=UTF-8" http-equiv="content-type"> • <title>行動網頁</title> • <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> • <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/> • <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> • <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> • </head> • <body> • <div data-role="page" id="page"> • <div data-role="header"> • <h1>頁首</h1> • </div> • <div data-role="content"> • 網頁內容 • </div> • <div data-role="footer"> • <h4>頁尾</h4> • </div> • </div> • </body> • </html> 2.載入JQ函式庫 3. 使用jquery mobile 所定義 的頁面 結構 網頁內容

  5. 加入背景及設定網頁大小 • 語法加入的位置： 請將下列語法加在 <head> …. </head> 之間 • 加入背景顏色： 語法： <style>.ui-page{background:#66FF33;} </style> • 加入背景圖片： 語法：<style>.ui-page{ background-image:url(images/bgs_title.gif);}</style> • 色碼表：http://rhinejo.myweb.hinet.net/home/color/color-cord.html 顏色編碼 (資料夾位置/圖檔)

  6. 設定網頁大小及Viewport設定 • 設定網頁大小： 語法： <script> function changesize(){ window.resizeTo(480,760); //指定預開啟的寬度與高度 } window.onload=changesize; window.onresize=changesize; </script> • Viewport：一般是響應式網頁設計用來設定移動裝置瀏覽網頁的寬度和基本設定 語法： <meta name="viewport" content="width=device-width, initial-scale=1">

  7. 固定頁首/尾位置及設定顏色 • <div data-role="page" id="page"> • <div data-role="header" data-position="fixed" data-theme="a"> • <h1>頁首</h1> • </div> • <div data-role="content"> • 內容 • </div> • <div data-role="footer" data-position="fixed" data-theme="b"> • <h4>頁尾</h4> • </div> • </div> 固定頁首位置 設定顏色(a – e)

  8. Data-theme屬性 銀 灰 參考網頁：http://www.lampweb.org/jquerymobile/8/25.html

  9. 於頁首設定返回鍵及超連結 • <div data-role="header" data-position="fixed" data-theme="a"> • <a href=“index.htm” rel=“external”data-theme=“b”data-icon="home" >回首頁</a> • <h1>頁首</h1> • </div> 1.設定圖示 2.各種圖示語法及連結 不同網站間的網頁無法以Ajax方式建立超連結，必須取消Ajax功能，也就是明確定義為絕對外部連結

  10. 設定ListView介面元件 • 語法 • <div data-role="content"> • <ul data-role="listview"> • <li><a href=“#page2“rel="external">第二頁</a></li> • <li><a href="#page3“ rel="external">第三頁</a></li> • <li><a href="#page4“ rel="external">第四頁</a></li> • </ul> • </div> 超連結或網址 • listview加入圖片 • <div data-role="content"> • <ul data-role="listview"> • <li><a href=“p5.htm” rel=“external”><img border=“0” src=“images/1.jpg”><h3>薄荷</h3></a></li> • <li><a href="#page3">第三頁</a></li> • <li><a href="#page4">第四頁</a></li> • </ul> • </div>

  11. 可折疊內容區塊 • 語法： • <div data-role="collapsible" data-collapsed="true"> • <h3> 標題</h3> • …內容… • </div> True：關閉 false：展開

  12. 操作練習 • 請各組製作有關醫學或醫管等行動教學/學習網站 • 每人至少3頁，請於每頁右上角註明該頁作者(學號/姓名) • 請於5/26前上傳完整網頁架構，並於6/2前完成網頁內容 • 請各組將網站FTP上傳後，將網址填報至 http://www2.cmu.edu.tw/~cmuapp/1022ia/index.php

  13. 參考資料 • http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/ • http://www.lampweb.org/jquerymobile/ • http://lms.tzuchi.com.tw/epaper/artical/index.php?id=file/37/digiinfo_0 • http://www.jqmgallery.com/jquery-mobile-tutorials/ • http://w3schools.com/jquerymobile/default.asp • http://www.jquery4u.com/mobile/50-jquery-mobile-development/ • http://www.jqmapi.com/ • http://www.lynda.com/jQuery-Mobile-tutorials/Essential-Training/86644-2.html

More Related