Dreamweaver Templateの使い方

HOME > オプション領域 (4)

オプション領域 (4)

グローバルメニューで、現在のページのカテゴリを色を変えて示すことを考えます。

グローバルメニューは<ul>タグで実装しているので、<li>にclass="self"とクラスを与えて表示を変更することにします。

これを実現する為に、ソースコードを直接編集してオプション領域を作成します。

該当部分のコードは以下のようになっています。

<li>
	<!-- TemplateBeginIf cond="category=='home'" -->home<!-- TemplateEndIf -->
	<!-- TemplateBeginIf cond="category!='home'" -->
		<a href="../index.html">home</a>
	<!-- TemplateEndIf -->
</li>

これを、以下のように書き換えます。

<li<!-- TemplateBeginIf cond="category=='home'" --> class="self"<!-- TemplateEndIf -->>
	<!-- TemplateBeginIf cond="category=='home'" -->home<!-- TemplateEndIf -->
	<!-- TemplateBeginIf cond="category!='home'" -->
		<a href="../index.html">home</a>
	<!-- TemplateEndIf -->
</li>

これで、categoryの値がhomeのとき、<li>にclass="self"が付加されるようになりました。

同様に、「基本」を囲む<li>には

<li<!-- TemplateBeginIf cond="category=='basis'" --> class="self"<!-- TemplateEndIf -->>

「応用」を囲む<li>には

<li<!-- TemplateBeginIf cond="category=='practical'" --> class="self"<!-- TemplateEndIf -->>

これで、ページが属するカテゴリをグローバルメニュー部分で示すことが出来るようになりました。

テンプレート編集時のデザインビューは下のように崩れてしまいますが、適用したページは問題無く表示できます。