DW テンプレートをマスターして 楽々サイトメンテナンス
•
2 likes•2,277 views
CSS Nite Beginners Theme2 Dreamweaver in 高松の講演資料です。
Recommended
More Related Content
Similar to DW テンプレートをマスターして 楽々サイトメンテナンス
Similar to DW テンプレートをマスターして 楽々サイトメンテナンス (20)
More from Akira Maruyama
More from Akira Maruyama (10)
DW テンプレートをマスターして 楽々サイトメンテナンス
- 1. DW テンプレートをマスターして 楽々サイトメンテナンス Akira Maruyama 2010.07.31 1
- 2. Profile 2
- 3. 丸山 章 鳥取在住のフリーランス。 CSS Niteで何度かスピーカー やりました。 や の機能拡張とか作ってます。 blog: http://dwlog.net/ @akira_maru 3
- 4. 本も書きました！ 共著ですが… Dreamweaver プロフェッショナル スタイル DWテンプレートのあたりを詳細に書いてます。 今のバージョンでも十分使えますよ。 4
- 7. 何故DWテンプレートなの？ 7
- 8. 何故DWテンプレートなの？ サイト制作の効率化 8
- 9. 何故DWテンプレートなの？ 利点1 テンプレートを変更すると、適用している すべてのページで即座に変更が反映される。 リンク切れをおこしにくい 階層が変わっても追随する 作業的負荷の軽減 9
- 10. 何故DWテンプレートなの？ 利点2 デザインを編集させないようにすることで、 情報の入力に特化させることができる。 デザイナー 担当者 UI・デザイン 情報入力 編集者のスキル不足などによる、レイアウト崩れを最小限に留める 10
- 11. 何故DWテンプレートなの？ 利点3 HTMLを直接触らないで、表示のコントロール や項目の追加 が可能。 （オプション領域・リピート領域） レイアウト表示の切り替え レイアウトブロックの制御 11
- 12. DWテンプレートとは？ 12
- 14. DWテンプレートとは？ テンプレートを適用したページに 変更が反映される。 更新 dwt dwt HTML ■は編集可能領域 14
- 15. DWテンプレートとは？ 事前にサイト定義が必要 保存先：ローカルサイトの ルートに作成される Templatesフォルダ 移動・名称変更不可！ 15
- 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. DWテンプレートとは？ ページ別に表示をコントロールする 柔軟な機能も設定できる → オプション領域 → リピート領域 17
- 18. テンプレート機能各論 18
- 19. DWテンプレートの4つの機能 編集可能領域（ テキストpp.156-159） オプション領域（ テキストpp.160-161） 編集可能なタグ属性（ テキストpp.162） リピート領域（ テキストpp.163-164） 19
- 20. 編集可能領域 20
- 22. DEMO 22
- 23. 編集可能領域テンプレートタグ <!-- TemplateBeginEditable name="任意の名称" --> この中が編集可能になります。 <!-- TemplateEndEditable --> テンプレートを作成するとタイトルとヘッダにも 自動で編集可能領域が挿入される。 ※適用したページでは、Template（親ページ） →Instance（子ページ）に変わります 23
- 24. オプション領域 24
- 25. オプション領域 ロックされた領域のコンテンツを表示/ 非表示を制御する。 true テンプレートプロパティ false 25
- 26. DEMO 26
- 27. オプション領域テンプレートタグ ⃝ 条件を定義するタグ（head内）： <!-- TemplateParam name="名前" type="boolean" value="true / false" --> ⃝条件に基づいて表示を制御するタグ： <!-- TemplateBeginIf cond="名前" --> 条件がTrueの時にこの情報が表示される。 <!-- TemplateEndIf --> ※名前が日本語の時は cond="_document['名前']" 27
- 28. 編集可能なタグ属性 28
- 29. 編集可能なタグ属性 ロックされたエリアにある指定した タグの属性をHTMLを触ること無く 変更できる 真偽・テキスト・色・URL・数字 値の制御は子ページのテンプレート プロパティで設定 29
- 30. DEMO 30
- 31. オプション領域の制御 真偽： 数字： テキスト： URL： 色： オプションのタイプによって表示が変わる 31
- 32. オプション領域テンプレートタグ ⃝ 条件を定義するタグ（head内）： 真偽： <!-- TemplateParam name="名前" type="boolean" value="true / false" --> テキスト： <!-- TemplateParam name="名前" type="text" value="text" --> 32
- 33. オプション領域テンプレートタグ ⃝ 条件を定義するタグ（head内）： 色： <!-- TemplateParam name="名前" type="color" value="#000000" --> URL： <!-- TemplateParam name="名前" type="URL" value="URL" --> 数字： <!-- TemplateParam name="名前" type="number" value="半角数字" --> 33
- 34. オプション領域テンプレートタグ ⃝表示を制御するタグ： @@(名前)@@ ex) <body id="@@(body_id)@@" > テンプレート式 @@( 条件または条件式 )@@ ex) <font color="@@((name1)? "#FF0000": "#0000FF" )@@" > name1の値がtrueのときに文字色を赤、falseの時に青 34
- 35. リピート領域 35
- 36. リピート領域 特定の領域（表組・ブロックなど） を繰り返し追加したり、順番をいれ かえたりできる。編集可能領域と併用 エントリー エントリー エントリー 36
- 37. DEMO 37
- 38. リピート領域 テンプレートタグ <!-- TemplateBeginRepeat name="名前" --> 繰り返される要素をここにいれる 編集可能領域も含めておく <!-- TemplateEndRepeat --> 38
- 39. ライブラリ 39
- 40. ライブラリ 詳しくはテキスト pp.152-155を参照 テンプレート：ページ全体 ライブラリ： パーツ単位 ここだけ テンプレート（.dwt） ライブラリ（.lbi） 40
- 42. ライブラリ 事前にサイト定義が必要 保存先：ローカルサイトの ルートに定義されるLibrary フォルダ 移動・名称変更不可！ 42
- 43. DEMO 43
- 46. ご清聴ありがとう ございました 46