このページの構成

  1. テンプレートについて
  2. テンプレートの作り方
  3. テンプレートの活用法
  4. 「能率的なウエブサイト更新のヒント」について
  5. 更新履歴
  6. ご案内・関連ページ

環境設定に注意すること。また、DreamWeaver MX2004によるHTML作製も参照のこと。

テンプレートについて

ああ。さすがだ。ドリームウィーバーはすごいなぁ、と思わせる機能のひとつが、テンプレートです。同じフォーマットのページを多数作製するとき、テンプレートを使って同じスタイル(マークアップの骨組み)を共有することが出来ます。これを使うと、サイトのページは、(当然のことながら)統一性が保たれるようになり、数十秒の間に、300個のファイルのリンクアンカーを「トップ」から、「ホーム」に修正することが可能です。

おやこニュース、道具としてのパソコンでは、もくじのページを除いてほとんどのページにテンプレートを活用しています。私は、我流でテンプレートを使い始めました。ですから、テンプレート機能の中には、未だに一度も使ったことがないコマンドや、理解できない言葉がいくつもあります。便利そうだから使ってみて、徐々に修正を加えて今の状況になりました。このページは、とりあえず、テンプレートを使ってみたい、と云う人の助けになるように用意しました。

というわけで、おやこニュース:道具としてのパソコンの流儀にしたがって、以下の点を前提にテンプレートの解説を進めていきます。

大変有意義な機能です。使わない手はありません。但し、編集にあたり、簡単なHTMLの理解は必須です。まず、先に、そのための知識を取り入れることをおすすめします。

テンプレートのメリット

ページ作製の手軽さ
テンプレートをページの「外枠」として、テキストや日付、タイトルなどの、「編集可能領域」を複数指定し、掲示板などの入力フォームに入力するのと同様の手順で、ファイルを作製することが出来ます。つまり、新しいページを作る操作が楽になります。
サイトの統一性
外枠を共有し外部スタイルシートを利用することで、無理なくサイトデザインの共通化を図れます。これは閲覧する側にも大きなメリットがあります。
修正の効率化
また、テンプレートファイルを編集すると、枠組み部分を共有する全てのページに変更が反映されるので、ファイルの修正が楽になります。
構造さえ切り離す
見栄のみならず、ページの文書構造さえテンプレートに任せることで、文書の内容を考えることに集中できます。

二通りの方向性が考えられます。

少数のテンプレートを多くのファイルで共有する
融通が利きすぎると入力が面倒になり、テンプレートのメリットが生きてこない
多数のテンプレートに細分化する
テンプレートの管理が面倒になる。

つまり、テンプレートを能率的に使い、そのメリットを享受するには、サイトの構成を良く練り、計画的に使うことが大切です。

どういうときに使うか

テンプレートは枠組みですので、ヘッド部分やナビゲーション部分をテンプレートに任せるのがよいでしょう。同じ規格でページを並べるときは全てテンプレートを使うことが出来ます。日記、コラム、情報など、カテゴリごとにテンプレートを用意すると良いでしょう。

また、テンプレートをライブラリと組み合わせて細分化したり、共通のライブラリを複数のテンプレートで共有するなど、ライブラリと柔軟に組み合わせると、より有効に機能します。共有させるファイルの範囲をどう設定するか、が、テンプレートを有効に使うための鍵となります。これはやっているうちに、徐々に固まってゆくことでしょう。(ライブラリの解説は別項に譲ります)

テンプレートの作り方

前置きが長くなりました。始めましょう。

テンプレートファイル(.dwt)を作る

まず、テンプレートの元になる、構造を十分に考慮したhtmlファイルを作ります。これを元に、テンプレートを作ります。出来の善し悪しはべつとして、例を示します

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <title>テンプレートの作り方</title>
   <link href="../CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="HEADER">
<h1>テンプレートの作り方</h1>
   <p>ドリームウィーバー限定の記事です。</p>
   <p class="menu">
   <a href="../index.html">ホーム</a>|
   <a href="../cgi-bin/bbs.cgi">掲示板</a>|
   <a href="dary_index.html">もくじ</a>|
   <a href="#HISTORY">更新履歴</a>|
   <a href="mailto:email@oyakonews.com">メール</a>
   </p>
</div> <!-- end of "HEADER"-->
<div id="CONTENTS">
   <h2>概要</h2>
   <p>テンプレートは簡単に作ることが出来ます。</p>
   <h3>テンプレートとは</h3>
   <p>鋳型のこと、要するに、ウエブページの外枠のことです。</p>
   <h3>テンプレートの活用</h3>
   <p>同じ形のページを沢山作るときに使います。</p>
</div> <!-- end of "CONTENTS"-->
<div id="FOOTER">
<h2><a title="HISTORY" id="HISTORY">このページの更新履歴</a></h2>
   <ul>
   <li>更新日:○月×日</li>
   <li>修正日:△月□日</li>
   </ul>
   <address>ナミンチチ@おやこニュース<br>
   All right reserved, 2004</address>
</div> <!-- end of "FOOTER"-->
</body>
</html>

このファイルを元にテンプレートを作る手順を述べます。

  1. HTMLファイルを適当な名前(sample.html)で保存します。
  2. ファイルメニュー>テンプレートとして保存...
  3. ダイアログが出るので、適切な名称(sample-1)を付けて保存する
  4. リンクを更新しますか?ーー「はい」

この段階で、サイト内にTempletesフォルダが作られ、その中に、sample-1.dwtと云う名称で、テンプレートファイルが保存されているはずです。「リンクの更新」は、元になったsample.htmlとsample-1.dwtが収められるフォルダが違うことに伴う、href="URL" の相対位置関係を修正することです。

この操作によって、既に二つの「編集可能領域」が、テンプレートファイルの<head></head>部分に自動的に作られています。編集可能領域は、以下の書式でコメントアウトされています。

<!-- TemplateBeginEditable name="領域名" -->
<!-- TemplateEndEditable --> 

コードビューを見ると、

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- TemplateBeginEditable name="doctitle" -->
<title>テンプレートの作り方</title>
   <!-- TemplateEndEditable -->
   <link href="../oyanews/homep/CSS/style.css" rel="stylesheet" type="text/css">
   <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

doctitleと、headという、二つの編集可能領域が設定されています。

doctitle領域
<title></title>(必須)を含む。多分、これ以外を含めることは出来ない。
head領域
現在の所、空欄。<meta><link>の記載に利用する。

更に、幾つかの編集可能領域を設定します。ここでは、

以上、三つとします。本文部分は、より綿密な構造が決まっているのなら、更に細かく分けることが出来るかも知れません。いか、編集可能領域設定の手順。

  1. カーソルでドラグし、編集可能領域に指定する部分を選択します。(必ずコードビューを参照しながら)
  2. メニューから、挿入>テンプレートオブジェクト>編集可能領域(を選択する)
  3. ダイアログが出るので、編集可能領域名(分かりやすいもの)を入力し、「OK」
  4. この操作を必要なだけ繰り返す。
  5. 保存する。

編集可能領域設定上の注意

テンプレートの活用法

テンプレートから新規ファイルの作り方

  1. アセットパネルのテンプレートタブを選ぶ。
  2. 名前のリストから、テンプレート名をクリックし、選択する。
  3. 右上のメニューボタンから、テンプレートから新規作成を選ぶ
  4. 新しいウインドウが開くので、ファイル名を付けて保存する。
  5. 編集可能領域にカーソルを入れて、編集する。
  6. 保存する。

実際には、既にあるテンプレート依存ファイルを開いて、別名で保存、あるいは、複製し、新しいファイルを作る方が簡単と思う。

既存ファイルにテンプレートを適用する

テンプレートに入っていないファイルの場合

かなり手間が掛かる。

  1. まず、テンプレートを適用するファイルを開く。
  2. アセットのテンプレートパネルから、適用するテンプレートを選択する。
  3. 左下の「適用」ボタンをクリックする。
  4. テンプレートが適用されていないファイルは、bodyとhead、二つの領域があると見なされる。これらの二つの領域を、どのようにテンプレートに当て嵌めるか、と云うダイアログ「領域名の不一致」が表示される。
    • このドキュメントの領域の一部は、対応する領域が新しいテンプレートにありません。
    • 編集可能領域
      document body
      未解決
      Document head
      未解決
    • コンテンツを新しい領域に移動。(リストメニュー)
      • なし(要らないので捨てる)
      • docutitle
      • head
      • 以下、設定してある編集可能領域名のリストが並ぶ
    • Document headは「head」を選択(若しくは、「なし」)
    • Document bodyは、設定してある編集可能領域の、もっとも柔軟な領域(この場合は、「本文」領域)を選択
    • 「OK」
  5. コードビューを参照しながら、修正する。
    • head部分はかなりダブりがあるはず。重複部分は削除。
    • 本文領域に纏めて放り込まれた元ファイルのbody部分も、他の領域(ここでは、表題と履歴)に振り分ける。
  6. もっと良い方法があったら教えて欲しい。

別のテンプレートに入れ直す場合

基本的なやり方は、上記と同じ。「領域名の不一致」ダイアログを解決する。

テンプレートを修正する

テンプレートの修正は影響が大きい。慎重に行う。場合によっては、サイト全体のバックアップを取ってから始めること。

  1. テンプレートパネルからダブルクリックし、dwtファイルを開く。
  2. 編集、修正する。
  3. 保存すると、「テンプレートファイルの更新」ダイアログが開く。
    • テンプレートに依存したファイルの一覧が表示され、同時に修正するかどうか訊いてくる。
    • 更新・更新しない(デフォルトは「更新」)
    • しかし、この選択は実に慎重であるべき
  4. 「更新」をクリックすると、直ちに依存ファイルの書き換えが行われる。
  5. 「更新しない」をクリックした場合、、、
    1. 試しに、依存ファイルを一つ開く。
    2. 修正(メニュー)>テンプレート>現在のページの更新。
    3. そのファイルに修正されたテンプレートが適用される。
    4. これで良いか、チェック。駄目ならアンドゥが効く(はず)。
    5. 大丈夫と思ったら、修正(メニュー)>テンプレート>サイト全体の更新…
    6. 更新場所:次を含むファイル>テンプレート名選択し、「開始」をクリック
    7. やはり、バックアップは取っておいた方が良いだろう。
    8. 心配なら、依存ファイルを一つずつ開いて、「現在のファイルを更新」をチマチマとやっていく

テンプレートに関する注意事項


「能率的なウエブサイト更新のヒント」について

個人が私的な趣味のサイトを運営する場合に、能率的な更新作業を行う上のヒントをまとめる。

更新履歴


UPDATE_04