Dreamweaver テンプレートのスニペット
Dreamweaverテンプレートで個人的に良く使うテンプレートコードをスニペットにしてみました。
Dreamweaverテンプレートはソースコードがコメントだらけになるので嫌う人が多いかもしれませんが、小規模サイトでCMSを入れるほどでも無いサイトを制作する場合にかなり有効だと思いますので、是非利用してみてください。
編集可能領域
編集可能領域を追加。[挿入]→[テンプレートオブジェクト]→[編集可能領域]と同じ。
<!-- TemplateBeginEditable name="EditRegion1" -->編集可能領域<!-- TemplateEndEditable -->
bodyのClass名、ID名の入力
[修正]→[テンプレートプロパティ]からbodyに付加するclassとIDを入力出来るようにする。
head内
<!-- TemplateParam name="Class名" type="text" value="two-column" -->
<!-- TemplateParam name="bodyのID名" type="text" value="home" -->
body内
<body class="@@(_document['Class名'])@@" id="@@(_document['bodyのID名'])@@">
クラス名をテンプレートプロパティから入力
</body>
title、h1の入力
[修正]→[テンプレートプロパティ]からページ名、h1画像のURLを入力出来るようにする。（ページ名とh1画像のaltの値が同じ場合に利用）
head内
<title>@@(_document['ページ名'])@@ | サイト名</title>
<!-- TemplateParam name="h1画像のパス" type="URL" value="/img/hoge.gif" -->
<!-- TemplateParam name="ページ名" type="text" value="page-name" -->
body内
<h1><img src="@@(_document['h1画像のパス'])@@" alt="@@(_document['ページ名'])@@" /></h1>
※ head内のtitleタグを囲む<!-- TemplateBeginEditable name="doctitle" --><!-- TemplateEndEditable -->を削除して利用。
パンくずリストの切り替え
[修正]→[テンプレートプロパティ]のパンくずリスト切り替えで0を選ぶとパンくず非表示。1を選ぶと2階層目のパンくずを表示。2を選ぶと3階層目のパンくずが表示されます。
head内
<!-- TemplateParam name="パンくずリスト切り替え" type="number" value="0" -->
<!-- TemplateParam name="親ページURL" type="text" value="ページURL" -->
<!-- TemplateParam name="ページ名" type="text" value="page-name" -->
body内
<!-- TemplateBeginMultipleIf -->
<!-- TemplateBeginIfClause cond="_document['パンくずリスト切り替え'] == 1" -->
<ul id="topic-path">
<li><a href="/">ホーム</a></li>
<li>@@(_document['ページ名'])@@</li>
</ul>
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="_document['パンくずリスト切り替え'] == 2" -->
<ul id="topic-path">
<li><a href="/">ホーム</a></li>
<li><a href="@@(_document['親ページURL'])@@"><!-- TemplateBeginEditable name="親ページ名" -->親ページ名<!-- TemplateEndEditable --></a></li>
<li>@@(_document['ページ名'])@@</li>
</ul>
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="_document['パンくずリスト切り替え'] !=2" --><!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
ページトップボタンの表示・非表示
[修正]→[テンプレートプロパティ]のページトップボタン表示切り替えを"真"にするとページトップに戻るリンクを表示し、"偽"にすると非表示にします。
head内
<!-- TemplateParam name="ページトップボタン表示切り替え" type="boolean" value="true" -->
body内
<!-- TemplateBeginIf cond="_document['ページトップボタン表示切り替え']" --><p class="return"><a href="#page-top">ページトップへ戻る</a></p><!-- TemplateEndIf -->
バナー画像の表示・非表示
[修正]→[テンプレートプロパティ]のバナー画像表示切り替えを"真"にするとページトップに戻るリンクを表示し、"偽"にすると非表示にします。
head内
<!-- TemplateParam name="バナー画像1表示切り替え" type="boolean" value="true" -->
<!-- TemplateParam name="バナー画像2表示切り替え" type="boolean" value="true" -->
body内
<div class="banner">
<ul>
<!-- TemplateBeginIf cond="_document['バナー画像1表示切り替え']" --><li><a href="url1.html"><img src="" alt="" width="" height="" /></a></li><!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="_document['バナー画像2表示切り替え']" --><li><a href="url2.html"><img src="" alt="" width="" height="" /></a></li><!-- TemplateEndIf -->
</ul>
</div>
更新情報
＋−矢印ボタンで更新情報の追加・削除・並び替えが出来るようになります。
<div class="whats-new">
<h2>更新情報</h2>
<dl>
<!-- TemplateBeginRepeat name="更新情報" -->
<dt><!-- TemplateBeginEditable name="日付" -->日付<!-- TemplateEndEditable --></dt>
<dd><!-- TemplateBeginEditable name="更新内容" -->更新内容<!-- TemplateEndEditable --></dd>
<!-- TemplateEndRepeat -->
</dl>
</div>
bodyのIDをトリガーにして現在表示しているページの場合にclass="current"を付加する（三項演算子を利用）
ページの階層をbodyのIDでグループ化している場合、その階層（グループ）を表示している時にナビゲーションリストにclass="current"を付加、または画像の場合_crの接尾辞が入った画像を表示します。
body内（class="current")
<ul class="nav">
<li @@((_document['bodyのID名'])=='ID名(例：homeなど)'?'class="current"':'')@@><a href="/">Home</a></li>
<li @@((_document['bodyのID名'])=='ID名(例：companyなど)'?'class="current"':'')@@><a href="/company/">Company</a></li>
</ul>
body内（画像の場合、接尾辞_crの画像を表示）
<ul class="nav">
<li><a href="/"><img src="/url/btn_home@@((_document['bodyのID名'])=='ID名(例：homeなど)'?'_cr':'')@@.gif" alt="home" /></a></li>
<li><a href="/company/"><img src="/url/btn_company@@((_document['bodyのID名'])=='ID名(例：companyなど)'?'_cr':'')@@.gif" alt="company" /></a></li>
</ul>
編集可能領域のロック
ネスト化したテンプレートを作る場合で編集可能領域をロックする時に利用します。
@@("")@@
