テンプレートの作成
Dreamwaverには、テンプレートを作成する機能があります。
とても便利な機能ですので、活用しましょう。
テンプレートって？
テンプレートは、ミスを軽減し、手間を減らすことの出来るとても便利な機能です。
例えば、数十ページのファイルを作った後で、メニュー項目を増やしたくなったらどうでしょう？今までなら、涙をのんでひとつひとつコピペしていくしかありませんでした。
また、ちょっとしたミスでヘッダの表示がおかしくなったり、修正したはずなのに直っていない、なんてことも良くある話です。
こういったウェブデザイナーの悩みをスッキリ解決してくれるのが、テンプレートの存在です。
テンプレートからページを作成しよう！
「ヘッダ」や「フッタ」「サイドナビ」などは、どのページにも存在する、いわば「固定フィールド」です。
サイト全体で統一のものは固定しましょう。
また、テンプレートから各ページを作成すれば、「テンプレートを修正すれば全部のページに反映される」というメリットもあります。
つまり、テンプレート上でメニューを編集すれば、全ページに同じ編集がされる、ということです。便利ですね。
テンプレートを作成する
それでは、テンプレートを作成していきます。
元にしたいページ（index.html）を表示した状態から、「ファイル」→「テンプレートとして保存」をクリックします。
テンプレートに保存ダイアログボックスが表示されますので、サイトは「AdobeCafe」、保存名に「mytemplate（任意）」と入力し、「保存」ボタンをクリックします。
リンクを更新しますか？と表示されますので、「はい」をクリックしましょう。
テンプレートが作成されると、ファイル名に<<テンプレート>>が入り、拡張子が「.dwt」になります。
テンプレートの編集可能領域
テンプレートには、「編集可能領域」があります。
これは、テンプレートの中で、個々のページに合わせて編集出来る領域のことです。
テンプレートを作成しただけの状態では、全ての項目が「編集不可」の状態になります。
今回は、ヘッダとフッタ部分を編集不可領域にし、メイン部分を編集可能領域に設定したいと思います。
編集可能領域の設定
編集可能領域は、コードビューでしか設定出来ませんので、コードビューを選択します。
また、編集可能領域に指定したい部分を選択しておく必要がありますので、DOMパネルで<main>を選択しておきましょう。
「挿入メニュー」→「テンプレート」→「編集可能領域」をクリックすると、新規編集可能領域ダイアログボックスが表示されますので、「main」と入力し、「OK」ボタンをクリックします。
これで、編集可能領域が設定できました。
テンプレートを保存しておきましょう。
テンプレートからファイルを作成する
今後、ページを増やす時にはテンプレートを利用します。
「ファイル」→「新規作成」をクリックすると、新規ドキュメントダイアログボックスが表示されます。
「サイトテンプレート」→「AdobeCafe」→「mytemplate」をクリックし、「□テンプレートの修正時にページを更新」にチェックを入れて、「作成」ボタンをクリックします。
テンプレートからファイルを作成すると、「main」以外の部分はコメントと同様グレーの文字に変わり、編集出来なくなります。
これで、不用意にメニューを変更してしまったり、レイアウト崩れを起こす心配が無くなりました。
プロフィールページを作成する
DOMパネルでカルーセルスライダーを選択・削除し、<h1>で作成したタイトルを「プロフィール」に変更し、「profile.html」という名前で保存します。
テンプレートの編集
テンプレートファイルを表示し、メニューを編集します。
ロゴとHOMEを「index.html」にリンクします。
HOMEの横に「Profile」を作成し、「profile.html」にリンクします。
テンプレートファイルを保存しようとすると、テンプレートファイルの更新ダイアログが表示され、「このテンプレートに基づいてすべてのファイルを更新しますか？」と聞かれます。
その下にはテンプレートから作成されたページの一覧が表示されます。
更新しますので、「更新ボタン」をクリックします。
これで安心してはダメ！
実は、トップページはテンプレートから作成していないので、メニューの変更が反映されません。
ですが、コンテンツは「トップページ＝テンプレート」なので、index.htmlもテンプレートから作り直せば何の問題もありません。
先ほどプロフィールページを作成した時と同様、「ファイル」→「新規」でテンプレートからファイルを作成し、index.htmlを上書きすれば完成です。