DreamweaverとFireworksを連携し、jQuery Mobile使用したサイトを作る方法
2013/01Yuki Yokoyama
13年1月27日日曜日
目次
jQuery Mobileの必要ファイルとテーマ構造
Fireworksでのテーマ作成
Dreamweaverのjquery mobile機能
まとめ
13年1月27日日曜日
jQuery Mobileの必要ファイルとテーマ構造
13年1月27日日曜日
必要なファイル
jQuery本体jQuery Mobile本体jQuery MobileのCSSjQuery Mobileの画像(images)
13年1月27日日曜日
あれ?たくさんファイルがあるやないかい!?
13年1月27日日曜日
あれ?たくさんファイルがあるやないかい!?
尼崎のゆるキャラちっさいおっさん
13年1月27日日曜日
必要なファイル
min → 改行を省いた縮小版structure → 構造のみCSStheme → カスタマイズテーマのみのCSS
13年1月27日日曜日
必要なファイル
min → 改行を省いた縮小版structure → 構造のみCSStheme → カスタマイズテーマのみのCSS
テーマをカスタマイズするときは、structure.cssを使用する!!
13年1月27日日曜日
CDN(*コンテンツデリバリーネットワーク)
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery本家で配布されているで、サイト高速化のためにCDNを推奨
*ライブラリや画像リソースなど、 コンテンツ配信専門に最適されたネットワークのこと。
13年1月27日日曜日
jQuery Mobileのテーマ構造デフォルトで 5種類のテーマが存在
テーマ属性をつけなければ、データaが適用
全体を同じテーマで統一することも、部品ごとに組み替えることも可能
13年1月27日日曜日
Fireworksを使用してテーマを作成する
13年1月27日日曜日
新規テーマを作成
13年1月27日日曜日
無駄なCSSを省くため、aとbを残し、cdeは削除。aをメインテーマにし、bをサブテーマにする。
ページ機能の中にアイコンや各テーマが入っている
13年1月27日日曜日
アイコンとUIの変更
13年1月27日日曜日
テーマの色を変更する
13年1月27日日曜日
ブラウザでプレビュー
13年1月27日日曜日
テーマの書き出し
• imagesフォルダ • icon用CSS • theme CSS
13年1月27日日曜日
Dreamweaverを使用してjQuery Mobileのサイト作る
13年1月27日日曜日
サイトを定義し、index.htmlを作成する
13年1月27日日曜日
pageを挿入する
13年1月27日日曜日
読み込みファイルを設定する
リンクの種類 → ひとまずローカルに。CSSのタイプ → 分割テーマ → Fireworksで作成したテーマを選択
13年1月27日日曜日
テンプレートが生成される
13年1月27日日曜日
metaタグを変更・追加する
13年1月27日日曜日
<meta name="viewport" content="width=device-width,user-scalable=no" /><meta name="format-detection" content="telephone=no" /><link href="./css/g-theme.css" rel="stylesheet" type="text/css" /><link href="./css/jquery.mobile.structure-1.2.0.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head>
13年1月27日日曜日
画像を挿入してみよう
画像は表示したい倍のサイズで作成し、必ず100%で指定もしくは、cssファイルに以下を追加img{ max-width: 100%;height: auto;width /***/:auto; }
13年1月27日日曜日
リストビューを追加してみよう
<ul data-role="listview" data-inset="true"> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> </a></li> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> </a></li> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> </a></li> </ul>
13年1月27日日曜日
その他のデフォルト挿入機能レイアウトグリッド設定縮小可能ブロックテキスト入力パスワード入力テキスト領域メニューを選択チェックボックスラジオボタンボタンスライダーフリップトグルスイッチ
13年1月27日日曜日
さらに、便利なコード補完機能
コレがめっちゃ便利!!!
13年1月27日日曜日
さらに、便利なコード補完機能
コレがめっちゃ便利!!!
jQuery Mobileは独自のタグで構成され、覚えるのが大変
13年1月27日日曜日
例えば、ページ遷移にアニメーションをつけたいとき
アイコンをつけたいとき
13年1月27日日曜日
まとめ
13年1月27日日曜日
jQuery Mobileのファイル、テーマ、基本タグを理解する
Fireworksでカスタムテーマ作成を作成することができる
Dreamweaverでライブデザインビューを見ながら、簡単に作成することができる
13年1月27日日曜日
補足jQuery Mobileには「themeroller」という、テーマ作成用サイトがある
※fireworksとの違いはアイコンは作成できないこと。
http://jquerymobile.com/themeroller/
13年1月27日日曜日
ご清澄ありがとうございました。
13年1月27日日曜日