Dreamweaver(ドリームウィーバー)でネストテンプレートの作成と活用方法

DreamWeaver
スポンサーリンク


Dreamweaver(ドリームウィーバー)を使用してテンプレートを作成し、

編集可能領域を設定する方法は以前の投稿をご覧ください。

Dreamweaver(ドリームウィーバー)のテンプレート1|編集可能領域

今回はテンプレートをネストした使い方と作成方法を解説します。

これはDreamweaver(ドリームウィーバー)の機能でも使えるようになると

かなり便利なので覚えておくと良いと思います。

一度1通りの手順をやってしまえばできると思いますが、

忘れてしまった時のために本ページをブックマークしておくとよいでしょう。

ネストテンプレートはどのような場面で使用するのか?

では、まずどのように使うかというところから解説します。

私が実際に製作したホームページをご覧頂きながら解説するのが一番わかりやすいと思いますので

下記サイトの2つのページをまずは見比べてください。

横浜のエクステリア(外構工事)&お庭のデザイン(設計)から施工までヒールザガーデン(トップページ)

最新施工例/エクステリア(外構工事)&お庭の施工例/横浜のヒールザガーデン(下層ページ)

〇この2つのページで同じ部分

・ヘッダー

・ナビゲーション

・フッター

〇違う部分

・キービジュアル(下層には無い)

・パンくずリスト(トップページには無い)

・左カラムのメインコンテンツ(編集可能領域)

・右サイドのナビゲーション(編集可能領域)

まずベースとなるテンプレート「A」を作成し、

テンプレート「A」のネストとして

トップページ用の「B」と下層ページ用の「C」を作成します。

そのようにするとAのテンプレートでナビゲーションを修正した場合、

ネストされているテンプレートB、Cは自動で変更されるので

BやCを使用したページは何もせずにAの修正1つで済むことになります。

またBを変更してもCには影響しない、逆も然りとなります。

テンプレートB

ネストテンプレート1

テンプレートC

ネストテンプレート2

このように活用すればページ数が多いサイトでも簡単に更新ができるようになります。

ネストテンプレートの作成方法

それでは本題のネストテンプレートの作成に入ります。

ベースとなるテンプレートの作成は仕様に合わせて製作してください。

HEAL THE GARDEN cafe&dog gardenのサイトのテンプレートを見本に解説します。

まずベースとなるテンプレートがこちらです。

テンプレート見本

テンプレート見本

編集可能領域は

・h1

・keyvisual

・pankuzu

・contents

・footer_munu

です。

1.まずはこのbase.dwtファイルを元に新規htmlを作成します。

テンプレート見本2

テンプレート見本2

ファイル⇒新規⇒テンプレートから作成⇒元になるテンプレートファイルを選択。

Untitled-1.htmlが生成されます。

2.次にUntitled-1.htmlからネストテンプレートを作成します。

「挿入」⇒「テンプレートオブジェクト」⇒「ネストされたテンプレートを作成」を選択します。

ネストテンプレート

ネストテンプレート

これでネストテンプレートの作成はできました。

このテンプレートをトップページ用や下層ページ用に修正し、

新規のhtmlをテンプレートから作成で活用します。

元のテンプレートの編集可能領域内にネストした編集可能領域を作成することができます。

これをしないと大元の編集可能領域がすべて継承されてしまいます。

また大元のテンプレートの編集可能領域で継承したくない(編集したくない)部分があった場合、

編集可能領域に@@(” “)@@ を追記します。

例:<div id=”h1″><h1><!– InstanceBeginEditable name=”h1″ –>@@(” “)@@テンプレート<!– InstanceEndEditable –></h1></div>

h1を編集可能にしていたが下層ページすべて同じで編集不可にするといった場合に

上記のように設定することでhtml上で編集にロックがかかります。

ネストテンプレート4

ネストテンプレート4

使い方を試してテンプレート機能を有効に活用してみてください。

スポンサーリンク


 
Pocket