DWテンプレートについて

授業
◆DW　テンプレートについて

【DWでテンプレートを作成】

  • 新規ドキュメント→『ページレイアウト』・『レイアウトを選択』を選択し、作成。
    ※これ自体もテンプレートものようなもの
  • 編集する部分を選択し（反転させる）、挿入→テンプレートオブジェクト→編集可能領域を選択し、名前をつけ、「テンプレートとして保存」する。拡張子は「.dwt」。

   ※テンプレート化した後は、「編集可能領域」として設定した部分のみ編集可能。
　    → どこをテンプレートするかをきちんと考える（いっきに何ページも変更してしまうため）

  • ローカルファイルにTemplatesフォルダと、その中に②で作成したファイル（拡張子.dwt）を確認。
  • ソース内は、設定した編集可能領域が<!-- TemplateBeginEditable name="template1" -->と<!-- TemplateEndEditable -->で囲われていることを確認。
  • 自動更新する日付を文章内に入れることもできる。
    • 設置場所をクリック→挿入→日付→日付の挿入（「保存時に自動更新」をチェック）。
    • ソース内に<!-- #BeginDate format:Ja3 -->2012年●月●日 <!-- #EndDate -->を確認。
    • 《ライブラリーを使用する方法》
      アセット→ライブラリー→「＋」で新規ライブラリー項目を作成→作成したファイルを開く→挿入→日付→日付の挿入（「保存時に自動更新」をチェック）→上書きで保存。拡張子「.lbi」　→ライブラリーからソースの設置したい場所にドラッグする。
      ※「ライブラリー」は『住所・連絡先』、『Copyright』、『サイトタイトル』、『バナー広告（変更が少ない）』などのコンテンツに向く。

【作成したテンプレートで新規ページを作成】

  • 新規→新規ドキュメント→作成したテンプレートを選択→作成
  • 編集可能の部分は黒字、不可部分はグレー字になっている。
  • 編集後、名前をつけて保存。

【テンプレートを変更】

  • テンプレートで変更した箇所は全ページに反映されるので注意。
  • 保存→テンプレートファイルの更新→更新場所→選択したファイル（全てにチェック入れる）→開始

【その他】

  • 横並び階層部分はテンプレートにしない。
    → ナビゲーションは同じで、縦階層（おくまっていくもの）をテンプレートすると良い（ECサイトの商品など）。
  • テンプレートは大量ページを作成する時等に使う。
  • テンプレートはブラウザに表示できない。
  • テンプレートで作成したソースをアップする際は、ライブラリーやテンプレートフォルダもアップする。
◆ｊQuery Mobile　Theme Roller（http://jquerymobile.com/themeroller/）で作成したテーマを使う方法
  • default import Theme（A〜E）をimportしてから新たにFをつくり編集する。
  • Download Themeで作成したTheme nameを入力し、ダウンロード。
  • 「themes」フォルダをサイトのフォルダに移動。下記をhead内に挿入する。
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

★「my-custom-theme」 の部分は作成したtheme名を入力する。
※はリモートのcss。
※ダウンロードした「themes」フォルダ内のスタイルシート「●●.min.css」は改行がないcss。「●●.css」は改行がある、編集可能のcss。
　基本的にダウンロードしたcssの編集はしない。変更をしたい場合は、エンベッドのスタイルシートで変更する。

  • htmlの「data-theme="a"」の"a"を作成したｔheme名に書き換える。
  • 「list-divider」の部分は変わらないため、Theme Rollerの「List Header」のhtmlをコピーペーストする。

★DW css5.5にjQuery Mobileのテンプレートのようなものあり。　※下記Adobe TV参照。
[DW CS5.5:jQuery mobile」
http://tv.adobe.com/jp/watch/learn-dreamweaver-cs5/10565/