Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DW テンプレートをマスターして   楽々サイトメンテナンス     Akira Maruyama        2010.07.31                      1
Profile          2
丸山 章           鳥取在住のフリーランス。           CSS Niteで何度かスピーカー           やりました。   や   の機能拡張とか作ってます。    blog: http://dwlog.net/   ...
本も書きました!       共著ですが…          Dreamweaver          プロフェッショナル          スタイルDWテンプレートのあたりを詳細に書いてます。今のバージョンでも十分使えますよ。        ...
今日のアウトラインDWテンプレートの概要テンプレート機能各論・編集可能領域・オプション領域・編集可能なタグ属性・リピート領域ライブラリまとめ              5
Dreamweaverテンプレートの概要               6
何故DWテンプレートなの?                7
何故DWテンプレートなの?   サイト制作の効率化                8
何故DWテンプレートなの?利点1テンプレートを変更すると、適用しているすべてのページで即座に変更が反映される。      リンク切れをおこしにくい      階層が変わっても追随する       作業的負荷の軽減                ...
何故DWテンプレートなの?利点2デザインを編集させないようにすることで、情報の入力に特化させることができる。 デザイナー                    担当者UI・デザイン                 情報入力 編集者のスキル不足な...
何故DWテンプレートなの?利点3HTMLを直接触らないで、表示のコントロールや項目の追加 が可能。(オプション領域・リピート領域) レイアウト表示の切り替え   レイアウトブロックの制御                             ...
DWテンプレートとは?              12
DWテンプレートとは? 拡張子は.dwt 中身はHTML+テンプレートタグ                    13
DWテンプレートとは?      テンプレートを適用したページに      変更が反映される。                 更新dwt                     dwt                 HTML      ■は...
DWテンプレートとは?        事前にサイト定義が必要        保存先:ローカルサイトの        ルートに作成される        Templatesフォルダ移動・名称変更不可!                        15
<!DOCTYPE html PUBLIC "-//W                        Transitional//EN" "http://www      DWテンプレートとは?       DTD/xhtml1-transit...
DWテンプレートとは?ページ別に表示をコントロールする柔軟な機能も設定できる  → オプション領域  → リピート領域                   17
テンプレート機能各論             18
DWテンプレートの4つの機能 編集可能領域( テキストpp.156-159) オプション領域( テキストpp.160-161) 編集可能なタグ属性( テキストpp.162) リピート領域( テキストpp.163-164)            ...
編集可能領域         20
編集可能領域テンプレートとしての基本機能指定の領域だけ編集可能にして、あとの部分はロックされるテンプレートが更新されても、この領域内のデータは維持される                  21
DEMO       22
編集可能領域テンプレートタグ<!-- TemplateBeginEditable name="任意の名称" -->  この中が編集可能になります。<!-- TemplateEndEditable -->テンプレートを作成するとタイトルとヘッダに...
オプション領域          24
オプション領域ロックされた領域のコンテンツを表示/非表示を制御する。              trueテンプレートプロパティ              false                      25
DEMO       26
オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):<!-- TemplateParam name="名前" type="boolean"value="true / false" -->⃝条件に基づいて表示を制御するタグ:<!-...
編集可能なタグ属性            28
編集可能なタグ属性ロックされたエリアにある指定したタグの属性をHTMLを触ること無く変更できる真偽・テキスト・色・URL・数字値の制御は子ページのテンプレートプロパティで設定                    29
DEMO       30
オプション領域の制御                      真偽:                      数字:                      テキスト:                      URL:         ...
オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):真偽: <!-- TemplateParam name="名前" type="boolean" value="true / false" -->テキスト: <!-- Templ...
オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):色: <!-- TemplateParam name="名前" type="color" value="#000000" -->URL: <!-- TemplateParam ...
オプション領域テンプレートタグ   ⃝表示を制御するタグ:    @@(名前)@@         ex) <body id="@@(body_id)@@" >                          テンプレート式         ...
リピート領域         35
リピート領域特定の領域(表組・ブロックなど)を繰り返し追加したり、順番をいれかえたりできる。編集可能領域と併用       エントリー       エントリー       エントリー                    36
DEMO       37
リピート領域 テンプレートタグ <!-- TemplateBeginRepeat name="名前" --> 繰り返される要素をここにいれる 編集可能領域も含めておく <!-- TemplateEndRepeat -->            ...
ライブラリ        39
ライブラリ詳しくはテキスト pp.152-155を参照テンプレート:ページ全体ライブラリ: パーツ単位                  ここだけテンプレート(.dwt)   ライブラリ(.lbi)                       ...
ライブラリ拡張子は.lbiページ内に複数設置可マスターを変更すると、適用したすべてのページのライブラリが更新される               41
ライブラリ        事前にサイト定義が必要        保存先:ローカルサイトの        ルートに定義されるLibrary        フォルダ移動・名称変更不可!                           42
DEMO       43
まとめ   ページ単位    パーツ単位Dreamweaverの強力なページ管理&編集機能の1つ共通部分(全体デザイン)と情報部分(コンテンツ)の切り分けができる                       44
まとめ使い方次第で、雛形としての機能だけでなく、ページに柔軟な要素を付加するオプション領域はif文、テンプレート式を極めると非常に強力に使える     こちらも参考に→                       45
ご清聴ありがとう ございました           46
Upcoming SlideShare
Loading in …5
×

DW テンプレートをマスターして 楽々サイトメンテナンス

2,893 views

Published on

CSS Nite Beginners Theme2 Dreamweaver in 高松の講演資料です。

Published in: Technology, Design
  • Be the first to comment

DW テンプレートをマスターして 楽々サイトメンテナンス

  1. 1. DW テンプレートをマスターして 楽々サイトメンテナンス Akira Maruyama 2010.07.31 1
  2. 2. Profile 2
  3. 3. 丸山 章 鳥取在住のフリーランス。 CSS Niteで何度かスピーカー やりました。   や   の機能拡張とか作ってます。 blog: http://dwlog.net/ @akira_maru 3
  4. 4. 本も書きました! 共著ですが… Dreamweaver プロフェッショナル スタイルDWテンプレートのあたりを詳細に書いてます。今のバージョンでも十分使えますよ。 4
  5. 5. 今日のアウトラインDWテンプレートの概要テンプレート機能各論・編集可能領域・オプション領域・編集可能なタグ属性・リピート領域ライブラリまとめ 5
  6. 6. Dreamweaverテンプレートの概要 6
  7. 7. 何故DWテンプレートなの? 7
  8. 8. 何故DWテンプレートなの? サイト制作の効率化 8
  9. 9. 何故DWテンプレートなの?利点1テンプレートを変更すると、適用しているすべてのページで即座に変更が反映される。 リンク切れをおこしにくい 階層が変わっても追随する 作業的負荷の軽減 9
  10. 10. 何故DWテンプレートなの?利点2デザインを編集させないようにすることで、情報の入力に特化させることができる。 デザイナー 担当者UI・デザイン 情報入力 編集者のスキル不足などによる、レイアウト崩れを最小限に留める 10
  11. 11. 何故DWテンプレートなの?利点3HTMLを直接触らないで、表示のコントロールや項目の追加 が可能。(オプション領域・リピート領域) レイアウト表示の切り替え レイアウトブロックの制御 11
  12. 12. DWテンプレートとは? 12
  13. 13. DWテンプレートとは? 拡張子は.dwt 中身はHTML+テンプレートタグ 13
  14. 14. DWテンプレートとは? テンプレートを適用したページに 変更が反映される。 更新dwt dwt HTML ■は編集可能領域 14
  15. 15. DWテンプレートとは? 事前にサイト定義が必要 保存先:ローカルサイトの ルートに作成される Templatesフォルダ移動・名称変更不可! 15
  16. 16. <!DOCTYPE html PUBLIC "-//W Transitional//EN" "http://www DWテンプレートとは? DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o <head> <meta http-equiv="Content-Ty html; charset=UTF-8" /> <!-- TemplateBeginEditable naテンプレートタグは <title>無題ドキュメント</title>HTMLコメント形式 <!-- TemplateEndEditable --><!-- Templatexxxx --> <link type="text/css" rel="styles demo.css" media="screen" /> <!-- TemplateBeginEditable na <!-- TemplateEndEditable --> 16
  17. 17. DWテンプレートとは?ページ別に表示をコントロールする柔軟な機能も設定できる → オプション領域 → リピート領域 17
  18. 18. テンプレート機能各論 18
  19. 19. DWテンプレートの4つの機能 編集可能領域( テキストpp.156-159) オプション領域( テキストpp.160-161) 編集可能なタグ属性( テキストpp.162) リピート領域( テキストpp.163-164) 19
  20. 20. 編集可能領域 20
  21. 21. 編集可能領域テンプレートとしての基本機能指定の領域だけ編集可能にして、あとの部分はロックされるテンプレートが更新されても、この領域内のデータは維持される 21
  22. 22. DEMO 22
  23. 23. 編集可能領域テンプレートタグ<!-- TemplateBeginEditable name="任意の名称" -->  この中が編集可能になります。<!-- TemplateEndEditable -->テンプレートを作成するとタイトルとヘッダにも自動で編集可能領域が挿入される。※適用したページでは、Template(親ページ)→Instance(子ページ)に変わります 23
  24. 24. オプション領域 24
  25. 25. オプション領域ロックされた領域のコンテンツを表示/非表示を制御する。 trueテンプレートプロパティ false 25
  26. 26. DEMO 26
  27. 27. オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):<!-- TemplateParam name="名前" type="boolean"value="true / false" -->⃝条件に基づいて表示を制御するタグ:<!-- TemplateBeginIf cond="名前" -->条件がTrueの時にこの情報が表示される。<!-- TemplateEndIf -->※名前が日本語の時は cond="_document[名前]" 27
  28. 28. 編集可能なタグ属性 28
  29. 29. 編集可能なタグ属性ロックされたエリアにある指定したタグの属性をHTMLを触ること無く変更できる真偽・テキスト・色・URL・数字値の制御は子ページのテンプレートプロパティで設定 29
  30. 30. DEMO 30
  31. 31. オプション領域の制御 真偽: 数字: テキスト: URL: 色:オプションのタイプによって表示が変わる 31
  32. 32. オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):真偽: <!-- TemplateParam name="名前" type="boolean" value="true / false" -->テキスト: <!-- TemplateParam name="名前" type="text" value="text" --> 32
  33. 33. オプション領域テンプレートタグ⃝ 条件を定義するタグ(head内):色: <!-- TemplateParam name="名前" type="color" value="#000000" -->URL: <!-- TemplateParam name="名前" type="URL" value="URL" -->数字: <!-- TemplateParam name="名前" type="number" value="半角数字" --> 33
  34. 34. オプション領域テンプレートタグ ⃝表示を制御するタグ:  @@(名前)@@ ex) <body id="@@(body_id)@@" > テンプレート式 @@( 条件または条件式 )@@ex) <font color="@@((name1)? "#FF0000": "#0000FF" )@@" > name1の値がtrueのときに文字色を赤、falseの時に青 34
  35. 35. リピート領域 35
  36. 36. リピート領域特定の領域(表組・ブロックなど)を繰り返し追加したり、順番をいれかえたりできる。編集可能領域と併用 エントリー エントリー エントリー 36
  37. 37. DEMO 37
  38. 38. リピート領域 テンプレートタグ <!-- TemplateBeginRepeat name="名前" --> 繰り返される要素をここにいれる 編集可能領域も含めておく <!-- TemplateEndRepeat --> 38
  39. 39. ライブラリ 39
  40. 40. ライブラリ詳しくはテキスト pp.152-155を参照テンプレート:ページ全体ライブラリ: パーツ単位 ここだけテンプレート(.dwt) ライブラリ(.lbi) 40
  41. 41. ライブラリ拡張子は.lbiページ内に複数設置可マスターを変更すると、適用したすべてのページのライブラリが更新される 41
  42. 42. ライブラリ 事前にサイト定義が必要 保存先:ローカルサイトの ルートに定義されるLibrary フォルダ移動・名称変更不可! 42
  43. 43. DEMO 43
  44. 44. まとめ   ページ単位    パーツ単位Dreamweaverの強力なページ管理&編集機能の1つ共通部分(全体デザイン)と情報部分(コンテンツ)の切り分けができる 44
  45. 45. まとめ使い方次第で、雛形としての機能だけでなく、ページに柔軟な要素を付加するオプション領域はif文、テンプレート式を極めると非常に強力に使える こちらも参考に→ 45
  46. 46. ご清聴ありがとう ございました 46

×