もくじ

【はじめてのAdobe Dreamweaver⑦】ページをテンプレート化し効率よく制作しよう!

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
今回はDreamweaverのテンプレートの使い方について解説します!
テンプレートとか言われてもピンと来ない人も多いと思いますので、どのようにして使えば便利かなども合わせてご紹介しようと思います。

テンプレートとは

雛形のことで、1つのサイトでレイアウトを共有することができます。
サイトによっては、同じレイアウトでテキストだけだ異なるというデザインも数多く見かけます。headerやfooterは同じであるなら、共有してしまえば非常に管理がしやすくなります。
同じレイアウトなのに、間違えて一部消してしまったり崩れてしまったなどといった面倒な修正もなくなりますので、とても便利です。

1:テンプレートファイルを作成をする

テンプレートファイルを新規で作成する

アセットのテンプレートパネルのプラスマークのついたファイルアイコンをクリックします。
アセットの新規作成
すると新規でテンプレートファイルが作成されます。
今回は「base」という名前にしました。
テンプレートファイルの作成完了
ではこのファイルを編集し、ベースとなるレイアウトを作成していきます。

作成されたテンプレートファイルの中身を確認する

先ほど作ったテンプレートファイルをクリックすると、作業画面に.dwtファイルが開きます。
テンプレートファイルの中身の確認
何も記述されていないので空っぽなのですが、エディターにはデフォルトで下記のようなタグが入っています。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
</body>
</html>
コメントで挟まれた箇所が編集可能領域です。
このコメント枠に挟まれた場所は、テンプレートから作成したファイルでも記述が可能になります。
name=""の中には何が記述されているかがわかりやすい名称を付けます。
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
💡
コメントアウトの外に記述されたものは、テンプレートから作成されたファイル上での編集はできません。
ではここから、自分の作りたいサイトのレイアウトを作成していきましょう!

2:レイアウトを作成する

編集可能領域の追加方法

編集可能領域の追加は上部メニューの「挿入」→「テンプレート」→「編集可能領域」で追加が可能です。
編集可能領域の追加
もしくは下記コメントアウトのname=""部分を変更してやれば、コピペでも問題ありません。
<!-- TemplateBeginEditable name="名前" -->

<!-- TemplateEndEditable -->

ファイルの編集作業

■今回作ったレイアウト
今回は下記のようなレイアウトを作って見ました。
今回はスタイルも整える予定としてスタイルシートのlinkタグも設置しています。
ファイルの編集作業
base.dwtの中身
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TemplateBeginEditable name="doctitle" -->
  <title>Dreamweaver</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
  <link href="css/main.css" rel="stylesheet" type="text/css">
<!-- TemplateEndEditable -->
</head>

<body>
<!-- TemplateBeginEditable name="header" -->
  <header>
    <h1>Dreamweaverを使ってみよう</h1>
    <ul>
      <li><a href="page1.html">ページ1</a></li>
      <li><a href="page2.html">ページ2</a></li>
      <li><a href="page3.html">ページ3</a></li>
    </ul>
  </header>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="section1" -->
  <section>
  <h2>サイトをテンプレート化してみよう</h2>
  <p>ここにテキストが入ります</p>
  </section>
<!-- TemplateEndEditable -->
</body>
</html>
上記がベースのテンプレートから、今度はページを作って行こうと思います。

3:テンプレートからページを作成

テンプレートアセットパネルにある今回使いたいテンプレートファイルを選択し、を右クリックして『テンプレートから新規作成』をクリックします。
テンプレートからファイルを新規作成する
するとHTMLファイルが新規作成され、エディターに表示されます。
テンプレートから作成されたファイルの中身
上記の画像を見ていただければ分かるかと思いますが、コメントアウトの外に記述されたmetaタグなどはグレーアウトされています!
このグレーアウトされた箇所は、元になっているテンプレートファイル(.dwtファイル)上でしか編集することはできません。
編集できないということは、気がついたらこのページだけheaderが消えていた!なんてことがなくなりますね!

ページを保存する

ファイルを保存します。作りたいページの名前で保存します。今回はpage1.htmlというページを作成します。
ページを保存する
下記の通りnew-siteフォルダの直下にファイルが保存されました!
ファイルの保存完了

テンプレートを使うメリット・デメリット

Dreamweaverのテンプレートはこのように、ページのレイアウトを共有するために便利な機能です。
しかしこの機能にも良し悪しがあります。

メリット

サイトをテンプレート化することで、サイト全体の管理がしやすく、一括で共通部分の修正ができてしまう点です。あのページは修正してあるのにこちらは前のままだったということもなくなります。

デメリット

Dreamweaverの独自機能であるため、他のエディターに移行しにくいとう点がやはり大きいです。
慣れてしまうとDreamweaverが使いやすいため、他のエディターに移行することはあまりないのかもしれませんが、もし移行するとなればこのテンプレート部分は使えなくなりますので、全てのページに記述し直すか、PHPのインクルードファイルなどに置き換える必要があります。

まとめ

テンプレートはサイト全体を共通化でき、管理がラクになります。
うまく使えば非常に便利です。是非使いこなして行きましょう!
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。