Suche senden
Hochladen
DW テンプレートをマスターして 楽々サイトメンテナンス
•
2 gefällt mir
•
2,277 views
Akira Maruyama
Folgen
CSS Nite Beginners Theme2 Dreamweaver in 高松の講演資料です。
Weniger lesen
Mehr lesen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 46
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
Hirokazu Nishi
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
Hirokazu Nishi
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
Hirokazu Nishi
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築する
Akira Maruyama
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
Garyuten
Empfohlen
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
第2回 Magento cafe plus 〜新・Magentoカスタマイズ入門
Hirokazu Nishi
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
Hirokazu Nishi
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
Hirokazu Nishi
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築する
Akira Maruyama
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
Garyuten
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
20130225 pronet study
20130225 pronet study
Six Apart
HTML5
HTML5
smallworkshop
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
Hiroshi Okunushi
20141206 handson
20141206 handson
Six Apart
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
フロントエンド実装者から見た PowerCMS X
フロントエンド実装者から見た PowerCMS X
Hideki Abe
AITC 女子部 第一回 Web HTML5 補足資料v0.1
AITC 女子部 第一回 Web HTML5 補足資料v0.1
Natsumi Irimura
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
Six Apart
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Kazumi IWANAGA
Drupal のコア要素を知る ~構築を支える道具立て~
Drupal のコア要素を知る ~構築を支える道具立て~
Kenji Shirane
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
ericsagnes
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
Akira Maruyama
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
Weitere ähnliche Inhalte
Ähnlich wie DW テンプレートをマスターして 楽々サイトメンテナンス
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
20130225 pronet study
20130225 pronet study
Six Apart
HTML5
HTML5
smallworkshop
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
Hiroshi Okunushi
20141206 handson
20141206 handson
Six Apart
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
フロントエンド実装者から見た PowerCMS X
フロントエンド実装者から見た PowerCMS X
Hideki Abe
AITC 女子部 第一回 Web HTML5 補足資料v0.1
AITC 女子部 第一回 Web HTML5 補足資料v0.1
Natsumi Irimura
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
Six Apart
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Kazumi IWANAGA
Drupal のコア要素を知る ~構築を支える道具立て~
Drupal のコア要素を知る ~構築を支える道具立て~
Kenji Shirane
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
ericsagnes
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Ähnlich wie DW テンプレートをマスターして 楽々サイトメンテナンス
(20)
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
20130225 pronet study
20130225 pronet study
HTML5
HTML5
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
20141206 handson
20141206 handson
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
フロントエンド実装者から見た PowerCMS X
フロントエンド実装者から見た PowerCMS X
AITC 女子部 第一回 Web HTML5 補足資料v0.1
AITC 女子部 第一回 Web HTML5 補足資料v0.1
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Drupal のコア要素を知る ~構築を支える道具立て~
Drupal のコア要素を知る ~構築を支える道具立て~
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Mehr von Akira Maruyama
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
Akira Maruyama
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Akira Maruyama
Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察
Akira Maruyama
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみた
Akira Maruyama
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
Akira Maruyama
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+α
Akira Maruyama
Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.
Akira Maruyama
Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!
Akira Maruyama
実はこんなこともできる Fireworksの裏技
実はこんなこともできる Fireworksの裏技
Akira Maruyama
Mehr von Akira Maruyama
(10)
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみた
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+α
Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.
Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!
実はこんなこともできる Fireworksの裏技
実はこんなこともできる Fireworksの裏技
Kürzlich hochgeladen
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
Kürzlich hochgeladen
(8)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
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
5.
今日のアウトライン DWテンプレートの概要 テンプレート機能各論 ・編集可能領域 ・オプション領域 ・編集可能なタグ属性 ・リピート領域 ライブラリ まとめ
5
6.
Dreamweaver テンプレートの概要
6
7.
何故DWテンプレートなの?
7
8.
何故DWテンプレートなの?
サイト制作の効率化 8
9.
何故DWテンプレートなの? 利点1 テンプレートを変更すると、適用している すべてのページで即座に変更が反映される。
リンク切れをおこしにくい 階層が変わっても追随する 作業的負荷の軽減 9
10.
何故DWテンプレートなの? 利点2 デザインを編集させないようにすることで、 情報の入力に特化させることができる。 デザイナー
担当者 UI・デザイン 情報入力 編集者のスキル不足などによる、レイアウト崩れを最小限に留める 10
11.
何故DWテンプレートなの? 利点3 HTMLを直接触らないで、表示のコントロール や項目の追加 が可能。 (オプション領域・リピート領域) レイアウト表示の切り替え
レイアウトブロックの制御 11
12.
DWテンプレートとは?
12
13.
DWテンプレートとは? 拡張子は.dwt 中身はHTML+テンプレートタグ
13
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
21.
編集可能領域 テンプレートとしての基本機能 指定の領域だけ編集可能にして、 あとの部分はロックされる テンプレートが更新されても、 この領域内のデータは維持される
21
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
41.
ライブラリ 拡張子は.lbi ページ内に複数設置可 マスターを変更すると、 適用したすべてのページの ライブラリが更新される
41
42.
ライブラリ
事前にサイト定義が必要 保存先:ローカルサイトの ルートに定義されるLibrary フォルダ 移動・名称変更不可! 42
43.
DEMO
43
44.
まとめ ページ単位 パーツ単位 Dreamweaverの強力なページ管理 &編集機能の1つ 共通部分(全体デザイン)と情報部分 (コンテンツ)の切り分けができる
44
45.
まとめ 使い方次第で、雛形としての機能だけで なく、ページに柔軟な要素を付加する オプション領域はif文、テンプレート式を 極めると非常に強力に使える
こちらも参考に→ 45
46.
ご清聴ありがとう ございました
46
Jetzt herunterladen