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

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

まずはベースとなるHTMLを作成しましょう。

Dreamweaverのテンプレートを作るには、ベースのHTMLが必要です。
そのベースのHTMLをテンプレート化します。

では、ベースのHTMLを作っていきましょう!
今回は、とりあえずXHTMLでいきます。

<!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/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/print.css" media="print" />
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
 <div id="header">
 <p id="logo"><a href="index.html"><img src="common/images/logo.gif" alt="Hidef.jp" width="105" height="30" /></a></p>
 <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a> |</div>
 <div id="globalnavi">
 <ul>
 <li>メニュー1</li>
 <li><a href="#">メニュー1</a></li>
 <li><a href="#">メニュー2</a></li>
 <li><a href="#">メニュー3</a></li>
 <li><a href="#">メニュー4</a></li>
 <li><a href="#">メニュー5</a></li>
 </ul>
 </div>
 </div>
 <!-- //ヘッダー -->
 <!-- メインエリア -->
 <div id="contents">
 <div id="historylink">
 <ul>
 <li><a href="#">HOME</a></li>
 <li>現在位置</li>
 </ul>
 </div>
 <div id="main">
 <h1>見出し1</h1>
 <h2>見出し2</h2>
 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
 <div id="subnavi">
 <ul>
 <li><a href="#" class="on">サブメニュー1</a></li>
 <li><a href="#">サブメニュー2</a>
 <ul>
 <li><a href="#">コンテンツ1</a></li>
 <li><a href="#">コンテンツ2</a></li>
 </ul>
 </li>
 <li><a href="#">サブメニュー3</a></li>
 <li><a href="#">サブメニュー4</a></li>
 </ul>
 </div>
 </div>
 <div id="gotop"><a href="#header">このページのトップへ</a></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ファイルをDreamweaverで開いた状態で、上部メニューの「ファイル > テンプレートとして保存」を選択します。
すると、下記のような小窓が出てきます。

sample

サイト:そのテンプレートを使うプロジェクト
既存のテンプレート:ここは未選択でもいい?(選択したことがないです)
説明:テンプレートの説明なので、わかりやすいように
保存名:テンプレートファイルの名前になります

これらを入力して保存をクリックすると、「リンクを更新しますか?」と出来てますので必ず更新しましょう。
更新しないと、CSSなどがリンク切れを起こしてしまいます。

これで、テンプレート化が出来ました!

まずは<head>内から見ていこう。

テンプレート化されたファイルの<head>辺りは、下記の様に変更されています。

<!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" />
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<link rel="stylesheet" type="text/css" href="../common/css/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="../common/css/print.css" media="print" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

この状態だと、descriptionとkeywordsが、テンプレートとして各ページに適用しても編集出来ない状態になっています。
それを編集できるようにするには、

<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

これの間に入れる必要があります。
変更したソースが下記です。

<!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/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="../common/css/print.css" media="print" />
<!-- TemplateBeginEditable name="head" -->
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<!-- TemplateEndEditable -->
</head>

これでdescriptionとkeywordsは、各ページで個別に設定出来る様になりました。

編集可能領域を設定しよう!

さて、この状態で各ページにテンプレートを適用しても、コンテンツエリアなどは全く編集出来ない状態です。
(テンプレートの適用は、上部メニュー「修正 > テンプレート > テンプレートをページに適用」)

それを、ここは編集出来る場所ですよ〜と指定するのが編集可能領域です。

編集出来る様にしたい場所にカーソルを合わせて、上部メニュー「挿入 > テンプレートオブジェクト > 編集可能領域」と選択します。
下記のようなメニューからも挿入できます。

sample2

これで、プレビュー画面には、下記の様に編集可能領域の枠が出来たはずです。

sample3

EditRegion3という青緑の枠が編集可能領域になります。

編集可能領域は、何個でも増やす事ができるので、EditRegion4と数字が大きくなっていきます。

まとめ

今回は、ざっと基本中の基本の部分のみ紹介しました。
最近はDreamweaverよりも、Codaとか他のエディターソフトを使う方も増えていますが、Dreamweaverのテンプレート機能は、まだまだ使える優秀な機能です。

これから勉強する人や機能を使えてない人は、是非Dreamweaverを使ってみてください。

ad

関連記事

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

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

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

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

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

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

記事を読む

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

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[CSS] CSS3のtransitionを使ってみよう!

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

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

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

記事を読む

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アプリの開発もしております。
PAGE TOP ↑