ダイナミックWebテンプレートの使い方

Expression Web4はとても優れたホーム・ページ作成ソフトですが、初心者には使いにくいのが難点です。ダイナミックWebテンプレートはメニュー等の共通部分をPHPなどでインクルードしなくても別に管理できるのですが、使い方が分かり難いものです。この使い方を簡単に解説しました。

Expression Web3までは有料で販売されていましたが、現在、Expression Web4はマイクロソフトより無料でダウンロードできるようになっています。

Expression Web4のダイナミックWebテンプレート機能とは

パソコンの写真

画面を確認しながらホームページを修正するには、 ホームページビルダー楽天 はとても便利なソフトです。しかし、メニューやサイドバーなどの共通部分(共用部分)は別ページにしてPHPやSSIを使ってサーバーサイドでインクルードして取り込むか、フレームなどを使用しなくてはなりません。

もし、そのようにしない場合は、各ページにいちいちメニューやサイドバーなどの共通部分を書いてやらなければなりません。

その点、マイクロソフトのExpression Web4では、ダイナミックWebテンプレート機能を使えば、PHPやSSIのインクルード機能やフレームを使わなくても、簡単に共通部分(共用部分)をHTMLファイルに取り込んで書き込むことができます。

ダイナミックWebテンプレートファイル(common.dwt)を作る

まず、共通部分(共用部分)のダイナミックWebテンプレート(DWT)ファイルを作りましょう。空のHTMLページを作成してから拡張子を.dwtファイルとしてそのページを保存します。

次に、このダイナミックWebテンプレートが適用されるページのコンテンツを変更できるように、編集可能な領域を追加します。編集可能な領域名のタイトルは「doctitle」とし、コンテンツは「content」とします。

又は、既存のHTMLファイルを開いて、1つ以上の編集可能な領域をページに追加します。編集可能な領域がページに追加されたらファイルの拡張子を.dwtにして保存します。

ダイナミックWebテンプレートファイル(common.dwt)の例

できあがったダイナミックWebテンプレートファイル(common.dwt)は次のようなものです。HTML5で文字コードがUTF-8の例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style><!-- インラインスタイルシート --></style>
<!-- #BeginEditable "doctitle" -->
<title>タイトル</title>
<!-- #EndEditable -->
</head>
<body>
<!-- #BeginEditable "content" -->
<h1>ページタイトル</h1>
<h2>見出し</h2>
<p>本文</p>
<!-- #EndEditable -->
メニューなどの共通部分
</body>
</html>

つまり、編集可能部分のタイトルタグに「doctitle」という名前をつけて、ボディタグ内の編集可能部分に「content」という名前をつけています。

それ以外を共通部分としています。編集可能部分の内容はタグだけでもかまいません。青色部分が追加して変更された箇所です。

HTMLファイルにダイナミックWebテンプレートを適用する

まず、フォルダ一覧の画面で、ダイナミックWebテンプレートを適用するファイルを選択します。書式設定メニューの「ダイナミックWebテンプレート」から、「ダイナミックWebテンプレートの適用」をクリックします。

適用するダイナミックWebテンプレートを特定してクリックしてから、「開く」をクリックします。詳しい操作はウェブページの検索などでやり方を探してください。

ダイナミックWebテンプレートを使ったHTMLファイルの例

ダイナミックWebテンプレートファイル(common.dwt)を使って、できあがったHTMLファイルは次のようなものです。

<!DOCTYPE html>
<html>
<!-- #BeginTemplate "common.dwt" -->
<head>
<meta charset="utf-8" />
<style><!-- インラインスタイルシート --></style>
<!-- #BeginEditable "doctitle" -->
<title>タイトル</title>
<!-- #EndEditable -->
</head>
<body>
<!-- #BeginEditable "content" -->
<h1>ページタイトル</h1>
<h2>見出し</h2>
<p>本文</p>
<!-- #EndEditable -->
メニューなどの共通部分
</body>
<!-- #EndTemplate -->
</html>

つまりこの場合、前記のhtmlタグで囲まれた中の全部にcommon.dwtを適用しています。このような面倒な操作をしなくても、上記の変更部分のみをTEXTSSなどの一括ファイル変更ソフトで直接書き換えても良いと思います。

ダイナミックWebテンプレートを適用したHTMLファイルでは、ソースの共通部分は色が変わっていて編集してはいけないようになっています。

共通部分を変更したらダイナミックWebテンプレートを適用します

メニューなどの共通部分を変更したい時は、common.dwtの共通部分を変更するだけです。変更を反映させるには、選択したHTMLファイルに変更を適用するか、全てのHTMLファイルに変更を適用すると、該当のページの共通部分が書き換わります。