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

Dreamweaver(ドリームウィーバー)
スポンサーリンク


ウェブ制作者にとってコーディングを行う際に必ずと言っていいほど現場で使用されている

Adobeのオーサリングソフト「Dreamweaver(ドリームウィーバー)」。

Dreamweaver(ドリームウィーバー)で良く使う機能としてテンプレート機能というものがあります。

逆にこれがなければハンドコーディング(手打ちでのコーディング)でも書ける人は

必要性がほとんどないに等しいでしょう。

テンプレート機能とはとても便利な機能で、

サイトを構築する際にしっかりと計画して製作すると

ページごとに変わるコンテンツの部分以外を固定した形にしておき、

その部分は全ページ共通、またはカテゴリーごとに共通などの下位のテンプレートにわけ

1つのテンプレートを修正するだけで数百ページでも数百ページでも一気に直すことができます。

まずはベースになるデザインとコーディングを行いそれができたら

Dreamweaver(ドリームウィーバー)の「挿入」タブより「テンプレートオブジェクト」から

Dreamweaver(ドリームウィーバー)

Dreamweaver(ドリームウィーバー)

「テンプレートの作成」を選びます。

Dreamweaver(ドリームウィーバー)2

保存名に任意の名前を付けて「保存」をクリック。

保存をすると自動的に「Template」フォルダが作成され、

index.dwtファイルがその中に入っています。

Dreamweaver(ドリームウィーバー)3

 

「ファイル」の「新規 」を選択し、「テンプレートから作成」。

先程作ったテンプレート(このチュートリアルでは新しいindexを作成していません)を選択し、作成をクリック。

以上でテンプレートからhtmlファイルをつくることが出来るはずです。

この状態で作成されたhtmlファイルはすべてのコードが修正できないようになっています。

サイトやカテゴリーごとで固定の部分以外、つまり自由に編集できる場所を定義してあげる必要があります。

その自由に編集でき場所を「編集可能領域」といいます。

index.dwtを選択し自由に編集できるようにするエリアをコードから選択します。

「挿入」の「テンプレートオブジェクト」から「編集可能領域」を選択。

Dreamweaver(ドリームウィーバー)4

 

名前の欄にわかりやすい名前をつけてOKをクリック。

これで先程のhtmlファイルに編集可能領域が現れ、

書き込めるようになっているはずです。

次回は「オプション領域」の利用の仕方と設定方法についてです。

スポンサーリンク


Pocket