Dreamweaver テンプレートに基づいて Web ページをデザインする方法

Dreamweaver テンプレートを使用して、"固定" ページレイアウトをデザインし、そのページレイアウトを継承したテンプレートに基づいてドキュメントを作成する方法について説明します。

テンプレートは、「固定」ページレイアウトをデザインするために使用するドキュメントの特殊なタイプです。その後、テンプレートに基づいてページレイアウトを継承するドキュメントを作成できます。テンプレートをデザインする際に、そのテンプレートに基づくドキュメントでユーザーが編集できるコンテンツを「編集可能」として指定します。テンプレートにより、テンプレート作成者は、ライター、グラフィックアーティスト、その他のweb開発者などのテンプレートユーザーが編集できるページ要素をコントロールすることができます。テンプレート作成者がドキュメントに含めることができるテンプレート領域には、いくつかのタイプがあります。

メモ

テンプレートにより、大きなデザイン領域をコントロールし、完全なレイアウトを再利用できます。サイトの著作権情報やロゴなどの個別のデザイン要素を再利用したい場合は、ライブラリ項目を作成してください。

テンプレートを使用すると、複数のページを同時に更新することができます。テンプレートから作成されたドキュメントは、そのテンプレートに接続されたままになります（後でドキュメントを切り離さない限り）。テンプレートを変更し、それに基づくすべてのドキュメントのデザインを即座に更新できます。

メモ

Dreamweaver のテンプレートは、Dreamweaver テンプレートのページセクションが初期設定で固定または編集不能になっている、他の Adobe Creative Cloud ソフトウェアのテンプレートと異なります。

テンプレート領域のタイプ

ドキュメントをテンプレートとして保存すると、ドキュメントのほとんどの領域がロックされます。テンプレートの作成者は、テンプレートから作成されたドキュメントのどの領域を編集できるようにするかを、テンプレートに編集可能領域または編集可能パラメーターを挿入することによって指定します。

編集可能領域およびロックされている領域は、テンプレートを作成しながら変更することができます。ただし、テンプレートから作成されたドキュメントでは、テンプレートユーザーが編集できる領域は、編集可能領域に制限されます。つまり、ロックされている領域を変更することはできません。

テンプレート領域には、次の 4 つのタイプがあります。

編集可能領域：テンプレートから作成されたドキュメント内のロックされていない領域、つまりテンプレートユーザーが編集できる部分です。テンプレートの作成者は、テンプレートの任意の領域を編集可能領域として指定できます。テンプレートを有効にするには、最低 1 つの編集可能領域を定義する必要があります。そうでないと、テンプレートから作成されたページを編集することができません。編集可能領域について詳しくは、テンプレート編集可能領域の作成を参照してください。

リピート領域：テンプレートから作成されたドキュメントに設定されたドキュメントレイアウトの 1 つのセクションです。テンプレートユーザーは、必要に応じてこのリピート領域のコピーを追加または削除できます。例えば、テーブルの行を繰り返すように設定できます。リピート領域は編集可能で、テンプレートユーザーは繰り返しエレメント内のコンテンツを編集できます。デザイン自体はテンプレートの作成者によって制御されます。

テンプレートに挿入できるリピート領域には、リピート領域とリピートテーブルの 2 つのタイプがあります。リピート領域の使用方法については、Dreamweaver でのリピート領域およびテーブルの作成を参照してください。

オプション領域：ドキュメントに表示または非表示にするテキストまたはイメージなどのコンテンツが保持された、テンプレートの一部分です。テンプレートから作成されたページにコンテンツを表示するかどうかは、通常、テンプレートユーザーが制御します。詳しくは、オプション領域節を参照してください。

編集可能なタグ属性：テンプレート内のタグ属性のロックを解除して、テンプレートから作成されたページで属性を編集できます。例えば、テンプレートの作成者がドキュメントに表示するイメージを「ロック」して、イメージを左、右、中央のいずれに表示するかは、テンプレートユーザーが設定できるようにすることができます。詳しくは、Dreamweaver での編集可能なタグ属性の定義を参照してください。

テンプレート内のリンク

既存のページをテンプレートとして保存してテンプレートファイルを作成すると、Templatesフォルダー内の新しいテンプレート、およびファイル内のすべてのリンクが更新され、ドキュメント相対パスが正しくなります。その後、そのテンプレートに基づいてドキュメントを作成して保存すると、すべてのドキュメント相対リンクが再び更新され、正しいファイルを指し続けます。

テンプレートファイルに新しいドキュメント相対リンクを追加する際、プロパティインスペクターのリンクテキストボックスにパスを入力すると、間違ったパス名を入力しやすくなります。テンプレートファイルの正しいパスは、Templatesフォルダーからリンクされたドキュメントへのパスであり、テンプレートベースのドキュメントのフォルダーからリンクされたドキュメントへのパスではありません。テンプレートでリンクを作成する際に、プロパティインスペクターのフォルダーアイコンまたはPoint-to-fileアイコンを使用して、リンクの正しいパスが存在することを確認してください。

テンプレートおよびテンプレートベースのドキュメント内のサーバースクリプト

一部のサーバースクリプトは、ドキュメントの最初または最後（<html>タグの前または</html>タグの後）に挿入されます。このようなスクリプトは、テンプレートおよびテンプレートベースのドキュメントで特別な処理が必要です。通常、テンプレート内の<html>タグの前または</html>タグの後のスクリプトコードを変更した場合、その変更はそのテンプレートに基づくドキュメントにコピーされません。テンプレートのメイン本文内の他のサーバースクリプトが、コピーされないスクリプトに依存している場合、これによりサーバーエラーが発生する可能性があります。テンプレート内の<html>タグの前または</html>タグの後のスクリプトを変更すると、アラートで警告されます。

この問題を回避するには、テンプレートのheadセクションに次のコードを挿入します：

このコードがテンプレートにある場合、<html>タグの前または</html>タグの後のスクリプトへの変更が、そのテンプレートに基づくドキュメントにコピーされます。ただし、テンプレートに基づくドキュメントでこれらのスクリプトを編集することはできなくなります。したがって、これらのスクリプトをテンプレートで編集するか、テンプレートに基づくドキュメントで編集するかのどちらか一方を選択できますが、両方では編集できません。

テンプレートパラメーター

テンプレートパラメーターは、テンプレートに基づくドキュメント内のコンテンツをコントロールするための値を示します。オプション領域や編集可能なタグ属性、または添付ドキュメントに渡す値を設定するために、テンプレートパラメータを使用します。各パラメータについて、名前、データタイプ、およびデフォルト値を選択します。各パラメータには、大文字と小文字を区別する一意の名前が必要です。パラメータは、テキスト、ブーリアン、カラー、URL、または数値の5つの許可されたデータタイプのいずれかである必要があります。

テンプレートパラメーターは、インスタンスパラメーターとしてドキュメントに渡されます。ほとんどの場合、テンプレートユーザーはパラメータのデフォルト値を編集して、テンプレートベースのドキュメントに表示される内容をカスタマイズできます。その他の場合では、テンプレートオーサーがテンプレート式の値に基づいて、ドキュメントに表示される内容を決定する場合があります。

テンプレート式

テンプレート式は、値を計算または評価するステートメントです。

式を使用して値を保存し、ドキュメントに表示させることができます。たとえば、式は@@(Param)@@のようなパラメータの値と同じくらい簡単な場合もあれば、@@((_index & 1) ? のようにテーブルの行でバックグラウンドカラーを交互に表示する値を計算するのに十分複雑な場合もあります。red : blue)@@ などのように、テーブル行の背景色を変換するための値を計算する複雑な式を作成することができます。

単独の if 条件または複数の if 条件を表す式を定義することもできます。条件ステートメントで使用される式は、Dreamweaver では true（真）または false（偽）として評価されます。条件がtrueの場合、オプション領域はテンプレートベースのドキュメントに表示されます。falseの場合は表示されません。

オプション領域を挿入する際に、コードビューまたはオプション領域ダイアログボックスで式を定義できます。

コードビューでは、テンプレート式を定義する方法が2つあります：コメントを使用するか、@@(your expression)@@を使用します。テンプレートコードに式を挿入すると、デザインビューに式マーカーが表示されます。テンプレートを適用すると、Dreamweaverが式を評価し、テンプレートベースのドキュメントに値を表示します。

テンプレート式の言語

テンプレート式言語はJavaScriptの小さなサブセットで、JavaScriptの構文と優先順位ルールを使用します。次のようなJavaScript演算子を使用して式を記述します：

@@(firstName+lastName)@@

サポートされている機能および演算子は以下のとおりです。

数値リテラル、文字列リテラル（ダブルクォート構文のみ）、ブーリアンリテラル（trueまたはfalse）
変数参照（このセクションの後半で定義されている変数のリストを参照）
フィールドリファレンス（"dot" 演算子）
単項演算子： +, -, ~, !
二項演算子：+、-、*、/、%、&、|、^、&&、||、<、<=、>、>=、==、!=、<<、>>
条件演算子： ?:
カッコ：()
次のデータタイプが使用されます：ブーリアン、IEEE 64ビット浮動小数点、文字列、およびオブジェクト。Dreamweaverテンプレートは、JavaScriptの「null」または「undefined」タイプの使用をサポートしていません。また、スカラータイプをオブジェクトに暗黙的に変換することも許可されていません。したがって、式"abc".lengthは値3を生成する代わりにエラーをトリガーします。
利用可能なオブジェクトは、式オブジェクトモデルによって定義されたもののみです。次の変数が定義されています：
_document
テンプレート内の各パラメーターに対応するフィールドを持つドキュメントレベルのテンプレートデータが含まれます。
_repeat
繰り返し領域内に表示される式に対してのみ定義されます。領域に関する組み込み情報を指定します。
_index
現在のエントリの数字インデックス（0 から）。
_numRows
このリピート領域に含まれるエントリの合計数。
_isFirst
現在のエントリが繰り返し地域の最初のエントリである場合はtrue
_isLast
現在のエントリが繰り返し地域の最後のエントリである場合はtrue
_prevRecord
_repeat オブジェクト。地域の最初のエントリに対してこのプロパティにアクセスするとエラーになります。
_nextRecord
_repeat オブジェクト。地域の最後のエントリに対してこのプロパティにアクセスするとエラーになります。
_parent
ネストした繰り返し地域では、これは囲んでいる（外側の）繰り返し地域の_repeatオブジェクトを提供します。ネストした繰り返し地域の外部でこのプロパティにアクセスするとエラーになります。
式評価中、_documentオブジェクトと_repeatオブジェクトのすべてのフィールドは暗黙的に利用できます。例えば、文書のタイトルパラメータにアクセスするために_document.titleの代わりにtitleを入力できます。
フィールドの競合がある場合、_repeatオブジェクトのフィールドが_documentオブジェクトのフィールドよりも優先されます。したがって、繰り返し領域パラメーターによって非表示にされたドキュメントパラメーターを参照するために繰り返し領域内で _document が必要になる場合を除いて、_document や _repeat を明示的に参照する必要はありません。
ネストした繰り返し領域が使用される場合、最も内側の繰り返し領域のフィールドのみが暗黙的に利用可能です。外側の領域は、_parent を使用して明示的に参照する必要があります。

テンプレートコードでの複数のIf条件

ifおよび複数if条件のテンプレート式を定義できます。この例では、「Dept」という名前のパラメータを定義し、初期値を設定し、どのロゴを表示するかを決定する複数if条件を定義する方法を示します。

以下は、テンプレートのheadセクションに入力するコードの一例です。

以下の条件文は、Deptパラメーターに割り当てられた値をチェックします。条件がtrueまたは一致する場合、適切な画像が表示されます。

<img src=".../sales.gif">

<img src=".../support.gif">

<img src=".../hr.gif">

<img src=".../spacer.gif">

テンプレートベースのドキュメントを作成すると、テンプレートパラメーターが自動的にそのドキュメントに渡されます。テンプレートユーザーが表示する画像を決定します。

Dreamweaver テンプレートについて