Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

[Dreamweaver] テンプレートの入れ子

公開日: : 最終更新日:2014/08/20 Dreamweaver, Web制作


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

テンプレートは入れ子に出来る!

Dreamweaverのテンプレートは、ベースを作り、さらにそのベースを入れたテンプレートを作成することができます。

ヘッダー・フッターは変わらないけど、その他が変わる場合、例えばトップページと下層ページは、結構レイアウトが違うものですがヘッダー・フッターは大体同じです。
そういう場合に、トップだけベーステンプレートを適用して、下層ページは下層用の入れ子になったテンプレートを使えば、リンクの変更や文言の変更等柔軟に対応出来るでしょう。

入れ子のテンプレートの作り方

まずは、ベースとなるテンプレートを作りましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テンプレート</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<link rel="stylesheet" type="text/css" href="common/css/base.css" media="all" />
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
  <div id="header">
    <div id="logo"><a href="index.html">ロゴエリア</a></div>
    <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a></div>
  </div>
  <!-- //ヘッダー -->
  <!-- フッター -->
  <div id="footer">
    <div id="footlink">| <a href="#">このサイトについて</a> | <a href="#">プライバシーポリシー</a> |</div>
    <div id="copyright">Copyright &copy; hidef,jp. All Rights Reserved.</div>
  </div>
  <!-- //フッター -->
</div>
</body>
</html>

こうして、ヘッダー・フッターの要素があるだけのHTMLファイルを用意します。
見た目は、下記のようになります。

20140803_img01

本当に最低限のものしかありませんが、このヘッダー・フッターは全ページで同じものであり、変わる事がありません。

次にこれをテンプレート化します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>テンプレート</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../common/css/base.css" media="all" />
<!-- TemplateBeginEditable name="head" -->
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<!-- TemplateEndEditable -->
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
  <div id="header">
    <div id="logo"><a href="../index.html">ロゴエリア</a></div>
    <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a></div>
  </div>
  <!-- //ヘッダー -->
  <!-- フッター -->
  <div id="footer">
    <div id="footlink">| <a href="#">このサイトについて</a> | <a href="#">プライバシーポリシー</a> |</div>
    <div id="copyright">Copyright &copy; hidef,jp. All Rights Reserved.</div>
  </div>
  <!-- //フッター -->
</div>
</body>
</html>

テンプレート化しただけですので、特に変化はなくテンプレート用のタグが追加されています。

最後にヘッダーとフッターの間に、編集可能領域を追加します。

<!-- //ヘッダー -->
  <!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable -->
<!-- フッター -->

このようにヘッダーとフッターの間に編集可能領域が追加されていればベースとなるテンプレートは完成です。
Dreamweaverでのプレビュー画面では下記のようになっています。

20140803_img02

青い枠内が編集可能領域になります。

ベーステンプレートを使って入れ子テンプレートを作る

新規にHTMLファイルを作り、そのファイルにベーステンプレートを適用します。
適用すると、プレビュー画面では下記のように右上に適用されているテンプレートの名前が出ます。

20140803_img03

この状態で、このファイルをテンプレートとして保存すると、入れ子になったテンプレートが完成します。

完成と言っても、単に入れ子になっているだけなので、この入れ子テンプレートにも編集可能領域を追加していきます。
ただ、全体を通してレイアウトが変わらない箇所は編集可能領域の外側に、内容が変わる部分のみ編集可能領域としておくことが重要です。
そうすることで、余計なミスを未然に防ぐ事ができます。

仮にいろいろな要素を入れて、編集可能領域を追加したものが下の画像になります。
入れ子になると、編集可能領域の色が変わります。変わるのはベーステンプレートの方の編集可能領域の色で、常に現在のテンプレートの編集可能領域の色は青緑色です。

20140803_img04

今回は、ローカルナビとH1見出しの内容、そしてその下にあるコンテンツが編集可能領域としてあります。
グローバルナビゲーションも変化するのですが、それは別の方法で出来ますので、今回は割愛してあります。

まとめ

簡単な説明ですが、入れ子にする方法を紹介しました。
数ページ程度のサイトでは必要ないかもしれませんが、中規模から大規模のサイトにはとても威力を発揮してくれる機能です。

また、複数人による作業でも、テンプレート化してあることで、編集できる箇所が限られてくるので、ミスを減らしたりもできるでしょう。

まだまだテンプレートの機能を紹介しきれていないほど多機能なので、是非Dreamweaverを使う際にはテンプレートに挑戦してみてください。
慣れればサイトの制作もすごく速くなりますよ!

ad

関連記事

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

[Dreamweaver] コーディングを早くする5つの方法

コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
PAGE TOP ↑

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524