ドリーム ウィーバー テンプレート。 【基本的なページの作り方】まずはDreamweaverに慣れてみよう!

Dreamweaver でテンプレートを編集、更新、および削除する方法

ドリーム ウィーバー テンプレート

前回に引き続きDreamweaver関連の記事を。 Dreamweaverはコーディングを快適にするための機能がたくさん用意されています。 その中の一つにテンプレート機能というものがあります。 この機能を使うことで、静的なHTMLファイルでも条件分岐で異なるタグを切り出したり、共通エリアを定義できたりと高度なコーディングができるようになります。 今回は基本的な部分として「編集可能領域」を定義することで大量のページ物のコーディングを行うときに使えるフローを見ていきたいと思います。 Dreamweaverのテンプレートファイル(. dwt)を作成 今回はデフォルトで用意されているHTMLのフォーマットを利用します。 「スターターテンプレート」からいろんなパターンを選択できます。 任意の場所にサイトのドキュメントルートを作成し保存します。 CSSや画像が読み込まれない場合は一度、Dreamweaverを終了し再度. dwtファイルを開くと読み込まれるようになります。 テンプレート機能で編集する領域を設定していきます。 今回はグローバルナビ直下のコンテンツエリアを対象にします。 この部分がページごとに編集する箇所で、それ以外の場所は共通エリアとなります。 編集可能領域にユニークとなるよう名前を設定します。 そうするとHTMLタグ内に下記のようなコメントアウトが追加されます。 先ほど選択した部分を囲むように記述されます。 また、デザインビューの部分では設定した編集可能領域の名前が表示され、対象領域が枠で囲まれて表示されます。 選択するとわかりやすいですね。 テンプレート名は任意のものを入力します。 テンプレートはドキュメントルート直下に「Templates」というフォルダが自動的に作成され、その中に先ほど設定したテンプレート名のファイルが保存されます。 このテンプレート名の拡張子は「. dwt」になり、Dreamweaverのテンプレートファイルとして機能します。 これでパターンページを量産する準備が整いました。 作成したテンプレートファイルからページを量産 Dreamweaverの新規作成から「サイトテンプレート」を選択し、作成したDreamweaverのテンプレートファイルを選択します。 テンプレートファイルを元にした新規のHTMLドキュメントが開かれますが、テンプレートで設定した編集可能領域以外のコードがグレーアウトされ、編集できないようにロックされているのが確認できます。 デザインビューの方でも確認してみると、表示可能領域以外の要素は選択できないようになっています。 こうすることで、共通エリアは変更ができなくなるので、コンテンツの内容が異なる部分だけを安全に編集できるようになります。 テンプレートからの編集が終わると、そのまま保存することもできますが不要なテンプレート用のコメントアウトタグが残ってしまいます。 書き出し先フォルダーを設定すると、Dreamweaverのテンプレート関連のコメントアウトが全て削除された状態でHTMLが書き出されます。 html. xml」という名前でテンプレートの編集可能領域部分のみを抜き出したXMLファイルも合わせて書き出されます。 XMLファイルの中を見ると表示可能領域はCDATAとしてitem要素として書き出されているのが確認できます。 html. xml】 そのほかにも、Dreamweaverのテンプレート内で使える独自タグなども多数存在し、条件分岐やループなども可能となります。 また、PHPなどのコードがhtml要素の外側であったり、DOCTYPE宣言の前に入る場合には下記のコードが必要になります。 次のようにheadタグ内に記述しておきます。 このDreamweaverのテンプレート機能をうまく使いこなすことで、PHPやjavascriptの制限を受けずとも、合理的に大量のパターンページ作成が捗るのではないでしょうか。 複数人で分担する作業の時なども便利そうですね。 ただし、使い慣れるのと操作を覚えるコストはかかりそうですが、、使う機会があれば試してみたいと思います。 (参考にさせて頂いたサイト)• 制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。 フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。 デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。 ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。 コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。 確認でき次第すぐに折り返しご連絡致します。

次の

DREAMWEAVERでゴォ!【「テンプレート」からHTMLファイルを作成する】

ドリーム ウィーバー テンプレート

こんにちは。 通常は、【テンプレートから切り離す】や【マークアップ省略】で可能なはずですので、 マークアップ省略を行ってもテンプレートタグが消えていないということは、テンプレート内のテンプレートタグの使用方法が間違っているのが原因だと思います。 編集可能領域内にテンプレートタグがある、など。 テンプレートファイルをお調べになることをオススメします。 Q ページミルで作ったファイルをDreamweaver8で編集していますが中に といったタグが埋め込まれ、どうやらこれが原因でロックがかかり編集できません。 全て切り取ると編集できるようになりますが全てのページに埋め込まれていてなんとかならないものかと・・・ このタグの意味とDreamweaver8にて編集可能かどうか教えて下さい。 A ベストアンサー そのHTMLファイルはあなたが作成したものですか? Dreamweaverでテンプレートファイルを作成し、そのテンプレートファイルからHTMLファイルを作成した場合、 や などが挿入されます。 この場合、「Templates」というフォルダ内にあるindex. dwtを編集すると、index. dwtというテンプレートを元に作成された全てのHTMLファイルが更新できます。 私のOSはWindowsなので、ページミルを使用した事がありませんが、以下のコンテンツを閲覧した限りでは、ページミルにはテンプレート機能はなさそうなので、おそらくDreamweaverでテンプレートを作成して挿入されたコメントだと思います(Dreamweaverで生成・挿入されるものと同じなため)。 sugiyama-u. html ですから、各HTMLファイルから や は削除せず、テンプレートを修正した方が作業も楽だと思います。 なお、このテンプレートという機能は、一つのテンプレートファイルを編集することによって、それを元に作成したHTMLファイルを全て更新するための機能です。 それぞれのHTMLで編集する場合にロックがかからないと、せっかくのテンプレートの意味がありません。 参考URLはMacromediaのDreamweaver MXでテンプレートを作成する場合のTIPSを解説したページです。 Dreamweaver8でも同様の手順で作業できると思います。 また、テンプレートを作成する方法は下記が参考になります。 macromedia. macromedia. html そのHTMLファイルはあなたが作成したものですか? Dreamweaverでテンプレートファイルを作成し、そのテンプレートファイルからHTMLファイルを作成した場合、 や などが挿入されます。 この場合、「Templates」というフォルダ内にあるindex. dwtを編集すると、index. dwtというテンプレートを元に作成された全てのHTMLファイルが更新できます。 私のOSはWindo... Q ドリームウィーバーのテンプレートで作っていたページの編集不可能領域を 編集可能領域へ変更したいと思っています。 その際、現状のページの状態を維持したまま 一括で変更することはできますか? もし可能でしたら教えていただきたく思います。 *** 変更前 *** abcabcabcabc aaaaa bbbbb ccccc abcabcabcabc *** 変更後 *** abcabcabcabc aaaaa bbbbb ccccc abcabcabcabc A ベストアンサー borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。 HTMLの方も修正する方法でもよけ... A ベストアンサー No. 1です。 サーバー上にテンプレートがあって、ローカル(あなたのPC)にテンプレートがないということでしょうか。 通常テンプレートファイルはサーバーにUPする必要はなく、ローカルで使用され適用されるものだと思います。 通常、テンプレート機能で作成されたHTMLファイルには、の隣に「」などというコメントが挿入されます。 バージョンによって、テンプレートファイルが保存される場所が異なることがありますが、その場合もここを見れば、HTMLファイルが作成された時にテンプレートファイルがどこに保存されていたかがわかります。 なので、その通りの場所に保存すれば、適用されるのかもしれないのですが、それを実際に確認したわけではないので、念のためテンプレートをドキュメントから切り離してから、テンプレートを適用した方が確実だと思います。 テンプレートファイルはローカルで機能するので、HTMLファイルが全て同じPC内にある状態で、テンプレートを修正してください。 テンプレートの修正によってHTMLファイルなどを書き換えるのは、Dreamweaverが行う作業なので、テンプレートをサーバーにUPしても、サーバー上にあるファイルを書き換えるわけではありません。 例えば判りやすくいうと、参考にする料理本を変えたとしても、その料理を作ろうとしなければ、いつまでたっても料理ができあがらないようなものです。 テンプレートファイル自体に、HTMLを書き換える機能はありません。 今後の修正のために、テンプレートファイルやその他のファイルは、ローカル(PCのハードディスクまたはMOやフラッシュメモリなどの書き換え可能なメディア)で保存しておいた方が良いのではないかと思います。 1です。 サーバー上にテンプレートがあって、ローカル(あなたのPC)にテンプレートがないということでしょうか。 通常テンプレートファイルはサーバーにUPする必要はなく、ローカルで使用され適用されるものだと思います。 Q こんにちは。 タイトルの通りサイト作成で、 画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。 参考までに、DreamWeaver(ドリームウィーバー)2004MXです。 画像とテキストの兼ね合いで、画像の右側や左側に、 ところどころで間隔が欲しいと思っています。 間隔をいじれるところといえば縦間隔、横間隔になりますが、 縦間隔なら「上」と「下」、横間隔なら「右」と「左」、 これらが一度に動いてしまうのです。 片方には確かに欲しい間隔が得られるのですが、 ほう片方に要らない間隔ができてしまい困っています。 例えば右だけに間隔が欲しい。 左だけに間隔が欲しい。 こういう場合って、何かやり方があるのでしょうか。 もともと余白込みの画像を用意するという手も講じましたが、 その場合はその場合で、その画像が他のレイアウトに流用しづらい という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので 対症療法としてはうまくいきませんでした。 また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、 セルがあまりにも絡まりあってしまい、 かなりぐちゃぐちゃなものになるためうまくいきませんでした。 やはりもうちょっと詳しい方にお訊きしようと思いまして 質問を立てさせていただきました。 素人質問で大変申し訳ありません。 どうぞ宜しくお願いいたします。 こんにちは。 タイトルの通りサイト作成で、 画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。 参考までに、DreamWeaver(ドリームウィーバー)2004MXです。 画像とテキストの兼ね合いで、画像の右側や左側に、 ところどころで間隔が欲しいと思っています。 間隔をいじれるところといえば縦間隔、横間隔になりますが、 縦間隔なら「上」と「下」、横間隔なら「右」と「左」、 これらが一度に動いてしまうのです。 片方には確かに欲しい間隔が得られるのですが、 ほう片方... A ベストアンサー HTMLの初歩です。 具体的には、 ------------------------------------------- 上10px 右20px 下0 左30px の四方の隙間が開く。 数値は例なので適当に変更を。 ------------------------------------------- 上下5px 右右20px の2方の隙間が開く。 pタグで2行の段落を続けて配置してみました。 pタグで2行の段落を続けて配置してみました。 A ベストアンサー まず、line-height:20pxのように、line-heightをpxで指定してみてください。 ブラウザの違いによる縦の誤差はなくなるはずです。 誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。 なお、文字列の横をそろえるのほぼ無理と考えてください。 こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。 リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。 最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。 しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

次の

【基本的なページの作り方】まずはDreamweaverに慣れてみよう!

ドリーム ウィーバー テンプレート

こんにちは。 通常は、【テンプレートから切り離す】や【マークアップ省略】で可能なはずですので、 マークアップ省略を行ってもテンプレートタグが消えていないということは、テンプレート内のテンプレートタグの使用方法が間違っているのが原因だと思います。 編集可能領域内にテンプレートタグがある、など。 テンプレートファイルをお調べになることをオススメします。 Q ページミルで作ったファイルをDreamweaver8で編集していますが中に といったタグが埋め込まれ、どうやらこれが原因でロックがかかり編集できません。 全て切り取ると編集できるようになりますが全てのページに埋め込まれていてなんとかならないものかと・・・ このタグの意味とDreamweaver8にて編集可能かどうか教えて下さい。 A ベストアンサー そのHTMLファイルはあなたが作成したものですか? Dreamweaverでテンプレートファイルを作成し、そのテンプレートファイルからHTMLファイルを作成した場合、 や などが挿入されます。 この場合、「Templates」というフォルダ内にあるindex. dwtを編集すると、index. dwtというテンプレートを元に作成された全てのHTMLファイルが更新できます。 私のOSはWindowsなので、ページミルを使用した事がありませんが、以下のコンテンツを閲覧した限りでは、ページミルにはテンプレート機能はなさそうなので、おそらくDreamweaverでテンプレートを作成して挿入されたコメントだと思います(Dreamweaverで生成・挿入されるものと同じなため)。 sugiyama-u. html ですから、各HTMLファイルから や は削除せず、テンプレートを修正した方が作業も楽だと思います。 なお、このテンプレートという機能は、一つのテンプレートファイルを編集することによって、それを元に作成したHTMLファイルを全て更新するための機能です。 それぞれのHTMLで編集する場合にロックがかからないと、せっかくのテンプレートの意味がありません。 参考URLはMacromediaのDreamweaver MXでテンプレートを作成する場合のTIPSを解説したページです。 Dreamweaver8でも同様の手順で作業できると思います。 また、テンプレートを作成する方法は下記が参考になります。 macromedia. macromedia. html そのHTMLファイルはあなたが作成したものですか? Dreamweaverでテンプレートファイルを作成し、そのテンプレートファイルからHTMLファイルを作成した場合、 や などが挿入されます。 この場合、「Templates」というフォルダ内にあるindex. dwtを編集すると、index. dwtというテンプレートを元に作成された全てのHTMLファイルが更新できます。 私のOSはWindo... Q ドリームウィーバーのテンプレートで作っていたページの編集不可能領域を 編集可能領域へ変更したいと思っています。 その際、現状のページの状態を維持したまま 一括で変更することはできますか? もし可能でしたら教えていただきたく思います。 *** 変更前 *** abcabcabcabc aaaaa bbbbb ccccc abcabcabcabc *** 変更後 *** abcabcabcabc aaaaa bbbbb ccccc abcabcabcabc A ベストアンサー borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。 HTMLの方も修正する方法でもよけ... A ベストアンサー No. 1です。 サーバー上にテンプレートがあって、ローカル(あなたのPC)にテンプレートがないということでしょうか。 通常テンプレートファイルはサーバーにUPする必要はなく、ローカルで使用され適用されるものだと思います。 通常、テンプレート機能で作成されたHTMLファイルには、の隣に「」などというコメントが挿入されます。 バージョンによって、テンプレートファイルが保存される場所が異なることがありますが、その場合もここを見れば、HTMLファイルが作成された時にテンプレートファイルがどこに保存されていたかがわかります。 なので、その通りの場所に保存すれば、適用されるのかもしれないのですが、それを実際に確認したわけではないので、念のためテンプレートをドキュメントから切り離してから、テンプレートを適用した方が確実だと思います。 テンプレートファイルはローカルで機能するので、HTMLファイルが全て同じPC内にある状態で、テンプレートを修正してください。 テンプレートの修正によってHTMLファイルなどを書き換えるのは、Dreamweaverが行う作業なので、テンプレートをサーバーにUPしても、サーバー上にあるファイルを書き換えるわけではありません。 例えば判りやすくいうと、参考にする料理本を変えたとしても、その料理を作ろうとしなければ、いつまでたっても料理ができあがらないようなものです。 テンプレートファイル自体に、HTMLを書き換える機能はありません。 今後の修正のために、テンプレートファイルやその他のファイルは、ローカル(PCのハードディスクまたはMOやフラッシュメモリなどの書き換え可能なメディア)で保存しておいた方が良いのではないかと思います。 1です。 サーバー上にテンプレートがあって、ローカル(あなたのPC)にテンプレートがないということでしょうか。 通常テンプレートファイルはサーバーにUPする必要はなく、ローカルで使用され適用されるものだと思います。 Q こんにちは。 タイトルの通りサイト作成で、 画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。 参考までに、DreamWeaver(ドリームウィーバー)2004MXです。 画像とテキストの兼ね合いで、画像の右側や左側に、 ところどころで間隔が欲しいと思っています。 間隔をいじれるところといえば縦間隔、横間隔になりますが、 縦間隔なら「上」と「下」、横間隔なら「右」と「左」、 これらが一度に動いてしまうのです。 片方には確かに欲しい間隔が得られるのですが、 ほう片方に要らない間隔ができてしまい困っています。 例えば右だけに間隔が欲しい。 左だけに間隔が欲しい。 こういう場合って、何かやり方があるのでしょうか。 もともと余白込みの画像を用意するという手も講じましたが、 その場合はその場合で、その画像が他のレイアウトに流用しづらい という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので 対症療法としてはうまくいきませんでした。 また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、 セルがあまりにも絡まりあってしまい、 かなりぐちゃぐちゃなものになるためうまくいきませんでした。 やはりもうちょっと詳しい方にお訊きしようと思いまして 質問を立てさせていただきました。 素人質問で大変申し訳ありません。 どうぞ宜しくお願いいたします。 こんにちは。 タイトルの通りサイト作成で、 画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。 参考までに、DreamWeaver(ドリームウィーバー)2004MXです。 画像とテキストの兼ね合いで、画像の右側や左側に、 ところどころで間隔が欲しいと思っています。 間隔をいじれるところといえば縦間隔、横間隔になりますが、 縦間隔なら「上」と「下」、横間隔なら「右」と「左」、 これらが一度に動いてしまうのです。 片方には確かに欲しい間隔が得られるのですが、 ほう片方... A ベストアンサー HTMLの初歩です。 具体的には、 ------------------------------------------- 上10px 右20px 下0 左30px の四方の隙間が開く。 数値は例なので適当に変更を。 ------------------------------------------- 上下5px 右右20px の2方の隙間が開く。 pタグで2行の段落を続けて配置してみました。 pタグで2行の段落を続けて配置してみました。 A ベストアンサー まず、line-height:20pxのように、line-heightをpxで指定してみてください。 ブラウザの違いによる縦の誤差はなくなるはずです。 誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。 なお、文字列の横をそろえるのほぼ無理と考えてください。 こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。 リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。 最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。 しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

次の