環境設定に注意すること。また、DreamWeaver MX2004によるHTML作製も参照のこと。
ああ。さすがだ。ドリームウィーバーはすごいなぁ、と思わせる機能のひとつが、テンプレートです。同じフォーマットのページを多数作製するとき、テンプレートを使って同じスタイル(マークアップの骨組み)を共有することが出来ます。これを使うと、サイトのページは、(当然のことながら)統一性が保たれるようになり、数十秒の間に、300個のファイルのリンクアンカーを「トップ」から、「ホーム」に修正することが可能です。
おやこニュース、道具としてのパソコンでは、もくじのページを除いてほとんどのページにテンプレートを活用しています。私は、我流でテンプレートを使い始めました。ですから、テンプレート機能の中には、未だに一度も使ったことがないコマンドや、理解できない言葉がいくつもあります。便利そうだから使ってみて、徐々に修正を加えて今の状況になりました。このページは、とりあえず、テンプレートを使ってみたい、と云う人の助けになるように用意しました。
というわけで、おやこニュース:道具としてのパソコンの流儀にしたがって、以下の点を前提にテンプレートの解説を進めていきます。
大変有意義な機能です。使わない手はありません。但し、編集にあたり、簡単なHTMLの理解は必須です。まず、先に、そのための知識を取り入れることをおすすめします。
二通りの方向性が考えられます。
つまり、テンプレートを能率的に使い、そのメリットを享受するには、サイトの構成を良く練り、計画的に使うことが大切です。
テンプレートは枠組みですので、ヘッド部分やナビゲーション部分をテンプレートに任せるのがよいでしょう。同じ規格でページを並べるときは全てテンプレートを使うことが出来ます。日記、コラム、情報など、カテゴリごとにテンプレートを用意すると良いでしょう。
また、テンプレートをライブラリと組み合わせて細分化したり、共通のライブラリを複数のテンプレートで共有するなど、ライブラリと柔軟に組み合わせると、より有効に機能します。共有させるファイルの範囲をどう設定するか、が、テンプレートを有効に使うための鍵となります。これはやっているうちに、徐々に固まってゆくことでしょう。(ライブラリの解説は別項に譲ります)
前置きが長くなりました。始めましょう。
まず、テンプレートの元になる、構造を十分に考慮した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>
このファイルを元にテンプレートを作る手順を述べます。
この段階で、サイト内に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という、二つの編集可能領域が設定されています。
更に、幾つかの編集可能領域を設定します。ここでは、
以上、三つとします。本文部分は、より綿密な構造が決まっているのなら、更に細かく分けることが出来るかも知れません。いか、編集可能領域設定の手順。
<h1> <!-- TemplateBeginEditable name="h1部分" -->表題<!-- TemplateEndEditable --> </h1>
<!-- TemplateBeginEditable name="h1部分" --> <h1>表題</h1> <!-- TemplateEndEditable -->
<div id="CONTENTS"> <!-- TemplateBeginEditable name="本文" --> <h2>概要</h2> <p>テンプレートは簡単に作ることが出来ます。</p> <h3>テンプレートとは</h3> <p>鋳型のこと、要するに、ウエブページの外枠のことです。</p> <h3>テンプレートの活用</h3> <p>同じ形のページを沢山作るときに使います。</p> <!-- TemplateEndEditable --> </div><!-- end of "CONTENTS"-->
<div id="CONTENTS"> <h2> <!-- TemplateBeginEditable name="本文h2" -->概要<!-- TemplateEndEditable --> </h2> <!-- TemplateBeginEditable name="本文" --> <p>テンプレートは簡単に作ることが出来ます。</p> <h3>テンプレートとは</h3> <p>鋳型のこと、要するに、ウエブページの外枠のことです。</p> <h3>テンプレートの活用</h3> <p>同じ形のページを沢山作るときに使います。</p> <!-- TemplateEndEditable --> </div> <!-- end of "CONTENTS"-->
<h2><a name="HISTORY" id="HISTORY">このページの更新履歴</a></h2> <ul> <!-- TemplateBeginEditable name="履歴" --> <li>更新日:○月×日</li> <li>修正日:△月□日</li> <!-- TemplateEndEditable --> </ul>
実際には、既にあるテンプレート依存ファイルを開いて、別名で保存、あるいは、複製し、新しいファイルを作る方が簡単と思う。
かなり手間が掛かる。
基本的なやり方は、上記と同じ。「領域名の不一致」ダイアログを解決する。
テンプレートの修正は影響が大きい。慎重に行う。場合によっては、サイト全体のバックアップを取ってから始めること。
個人が私的な趣味のサイトを運営する場合に、能率的な更新作業を行う上のヒントをまとめる。
UPDATE_04