ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

DreamWeaverCS4テンプレートとは


HTMLエディターアプリケーションであるDreamweaverにはテンプレート機能があります。


テンプレートとは、その名のとおり雛形ファイルを意味し、拡張子はdwtというファイルが作成されます。


まずはテンプレートファイルの作り方です。
テンプレートファイルの作成方法は二種類あり、DreamweaverCS4環境での作成手順を紹介します。


■新規にテンプレートファイルを作成する場合

方法1:メニューのファイル(F)から、新規(N)を選択して、新規ドキュメントのダイアログから空白のテンプレート⇒HTMLテンプレートと選択して好みのレイアウトを選択。

HTMLマークアップが終了したら、新規保存を選択するとTemplatesフォルダが自動的に作成されるので名前をつけて保存します。


■HTMLページからテンプレートファイルにする場合

方法2:メニューのファイル(F)から、新規(N)を選択して、新規ドキュメントのダイアログから空白のページ⇒ページタイプのHTMLを選択して好みのレイアウトを選択。

新規HTMLファイルでHTMLコーディングが終了したら、ファイル(F)メニューからテンプレートとして保存を選択し、テンプレート名を入力して保存。

あとはデフォルトでは右側にあるウィンドウのアセットタブからテンプレートを選択して、右クリックをして表示されたメニューからテンプレートから新規作成を選択するか、HTMLページを一枚用意してドラッグドロップするだけでテンプレートのソースコードが反映されたページが作成可能です。


■テンプレートは編集領域の指定の仕方

テンプレートファイルには編集可能領域とそうでない領域があり、編集不可能な部分は共通領域になるので、テンプレートファイルを更新したあとに、全HTMLファイルに対して更新を実行できます。

勿論、コンテンツ部分はページごとに異なる訳ですから、ヘッダやフッタ、メニュー部分などが主に共通項目になるのでしょうか。



編集可能領域の指定は、可能領域の親となるタグを選択して、メニューから挿入(I)⇒テンプレートオブジェクト⇒編集可能領域と選択すると、新規編集可能領域というダイアログボックスがでますので、名前を指定してOKを押すことで、指定したタグ以下の入れ子になっている領域が編集可能になります。