「ドリームウィーバーの使い方」もくじ

Dreamweaverを使ってウエブサイトに外部スタイルシート導入を目指す人を手助けします。

  1. 「ドリームウィーバーの使い方」について(このページ)
  2. DreamweaverMXによる外部スタイルシート導入法
  3. DreamweaverMX2004によるHTML作製
  4. 作業効率を上げる工夫
  5. テンプレートの活用法
  6. ライブラリの使い方

このページの構成

  1. はじめに:私がドリームウィーバーを使うわけ
  2. プロ向けソフトを初心者が使う
  3. デザインビューで作るほーむぺーじ
  4. 正しいHTMLを作るために
  5. 「ドリームウィーバーの使い方」もくじ
  6. 参考ページ

はじめに:私がドリームウィーバーを使うわけ

ほーむぺーじを作りたいが、やり方が良くわからない。「とりあえず、ソフトの力を借りて」、と云うときに、ドリームウィーバーはその選択肢の中に入るソフトウエアです。私の使っているマッキントッシュコンピュータは、今やパソコン全体に占めるシェアが1−2パーセント程度とか。かつてマック用として開発された多くのソフトウエアがマックに対応しないと云う厳しい状況となり、ウエブページ作製に関わるソフトでマック用は、このDreamweaver以外に、Adobe社のGoLiveくらいかもしれません。

私がDreamweaverを使うようになったのは偶然というか、こういった状況を考えるとむしろ必然であったのかもしれません。他に適当な選択肢がなかったというのが本当のところ。他と比較は出来ませんし、そういったソフトウエア批評の専門家でもありませんので、特にDWを奨めたりはしません。たまたま使って、そこそこ満足し、そのまま使い続けている訳です。

プロ向けソフトを初心者が使う

プロ向け、と云われています。実際に、多くのプロフェッショナルウエブ作成者が使っているらしい。値段もプロ向け。画像を扱うFireworks、アニメーションを作るFlash、ベクターデータ用のFreehandと一式で、StudioMXというあらゆるウエブページのデザイン、作製が出来る組み合わせが提供されています。プロ向けと云われるソフトを、趣味レベルのアマチュアや初心者が使うことに関して、他に選択肢が乏しいことも合わせて、予算が赦せば良いことだと思う。手の込んだ様々なテクニックを駆使できるらしいけれども、おやこニュースを見ていただければ分かるとおり、私は豊富な機能のほんの一部を使っているに過ぎません。

ウエブページを作るのに、こういった専用ソフトは必ずしも必要ないと云うのは真実で、もっと簡単なソフトをいくつか組み合わせれば、問題なくウエブサイトは構築できます。私の理解の範囲で、如何に手の込んだウエブページをプロ用のソフトで作ったところで、表に出てくるのは、HTMLという書式で書かれたテキストファイルであり、凝ったページ構成を実現するのは、むしろ、高機能なウエブブラウザソフトです。DreamweaverはHTMLを手軽に、正確に作製するために、十分な機能を持っています。HTMLファイルを作る機能に加えて、サイト全体を管理する上で、様々な省力化を図るための仕組みがあります。こういった専用ソフトのメリットも後々に紹介するつもりですが、それらは、ウエブページを見せるための上等なテクニックを駆使することと別の次元で、初心者を含むアマチュアウエブページ作成者にも大変魅力的なものと思います。

デザインビューで作るほーむぺーじ

3年前、ほーむぺーじを作ろうと思ったとき、私はパソコンをある程度使いこなしている自信がありましたし、コンピュータというものを信頼していましたので、ほーむぺーじ作成ソフトを使えば、ほーむぺーじは作れるものだと思っていました。そこで、手近なところで、iMacなどにおまけで付属していたPageMillと云うソフトを手に入れました。その後、PageMillに満足できなくなったか、あるいは試用版の期限が切れたか、そういった理由で、ソフマップのマック用ソフトの棚に並んでいたDreamweaverを手に取ったわけです。当時はバージョン3だったはずです。(PageMillはいささか古いソフトですし、ほんの一時期使っただけで、余り記憶にないので、これ以上言及しません。)

Dreamweaverのデザインビューは、「ワープロを使うように」ほーむぺーじを作ることが出来るようになっていて、作製者の意図をHTMLに反映させる入力インターフェイスとして、なかなか優れたものです。但し、デザインビューはあくまで入力を支援するためのもので、レイアウトのためではありませんが、ワープロのようなものと誤解した初心者は、しばしばデザインビューを使って、ウエブページを作製ソフトのウインドウ内に明示的にレイアウトしようとします。デザインビューは、ブラウザデフォルトのスタイルシートの一例をそこそこの正確さで模して、テキストの入力を助けているだけで、レイアウトの目的にははなはだ不向きです(*1)。デザインビューを使ったレイアウト法はごくごく限られ、blockquoteタグを使った模擬インデント、フォントタグを使ったフォントの色とサイズの設定、そして行間を確保するためのBR連打、p空タグ挿入程度のものです(*2)。段組や、画像の配置はテーブルレイアウトに頼ることになります。これらのいずれの手法も、正しくないHTMLの文法に初心者を誘導するものです。本来、作製者の作業は、興味深いテキストを作成した上で、見出し、段落、引用など、むしろ「暗示的に」レイアウトを指定することであり、デザインビューにもそれらの機能は備わっていますが、正しいHTMLを意識しない人には全く使いこなせない代物です。こういったデザインビューに対する誤解の結果、あたかも、「ほーむぺーじ」をDreamweaverで作っているような錯覚を与えてしまうことは、大きなデメリットです。いかなるソフトを使おうとも、できあがるのはHTMLファイルで、閲覧者はブラウザソフトを出力インターフェイスとしてウエブサイトを閲覧するからです。

*1:それによってブラウザは自動的にある程度適切で普遍的なレイアウトを作ってくれます。もちろん、それに独自のスタイルシートを被せることで、レイアウトのバリエーションが増すわけですが、Dreamweaverのデザインビューは、スタイルシートを利用した場合、「デザインタイムスタイルシート表示」という機能があります。

*2:DreamweaverMX2004では、フォントのスタイル指定に、内部スタイルシートによる指定が出来るようになっています。初期設定でフォントタグも使うことが出来ますが、どちらがデフォルトの設定か、私には分かりません。

正しいHTMLを作るために

私自身のことを思い出すと、HTMLについて勉強し始めるまで、Dreamweaverを使えば、HTMLを全く理解していなくてもほーむぺーじは作れる、と、親戚のおじちゃんに勧めたりしました。実際、一年あまりに渡り、私は常にデザインビューのみでほーむぺーじを「編集」していました。何冊か、Dreamweaverの解説本を買い、眺めました。自分のほーむぺーじをもう少し立派に、かっこうよくしたいと思うからです。実際にはマニュアル本はごく初期にいくらかの基本的操作を覚えるには役に立ちましたが、結局ほとんど目を通すことさえないままでした。いわゆる裏技の紹介ばかりで、そういった裏技は、覚えたところできわめて応用範囲が狭いのです。DWを使えば、ほーむぺーじがこんなに格好良くなります、と云うような解説文のインチキさは、ほーむぺーじ作成ソフトがほーむぺーじに機能を付加するわけではなく、やるのはあくまでブラウザのHTML解釈だ、ということが分かっていない私にも、何となく感じられたのだと思います。

デザインビューを使ったHTMLレスのほーむぺーじ作りは、ブランクページからワープロ感覚で構成していくにはいいのですが、既にできあがっているページを修正する場合、どうにもならないケースが出てきます。また、サイト管理を考えたときに、コードを全く見ないと云うわけにはいかないのです。とにかく、こういったやり方の拙さは、後にサイトの模様替えで、HTMLを標準に準拠させようとしたときに、きわめて困難な作業を強いられたことで身に滲みました。。悶々としていた時期に、何かと出会いました。Chaichan-ワールドでしょうか?その前に、HTML定義のための覚え書きだったかもしれません。ゴタクの中に、その頃に書いたものがいくつも残っています。ゴタクインデックスのWeb作製400番目以降は、初心者がHTMLに目覚めるドキュメントとなっている。なかなか得難い資料かもしれません。

 というわけで、私は、自分の書きたいことをストレートに文章に書き、邪魔な装飾を外して、出来るだけ正しいHTMLでウエブページを作製しようと思い立ち、同時にスタイルシートによるレイアウトを導入しようとしたわけです。幸いなことに、Dreamweaverはこの目的にそこそこ応えてくれるものでした。この先、ご覧のページのようなサイトを作るのに、Dreamweaverをどのように活用したらよいのか、あくまで、私の普段やっている更新作業を中心にに紹介していきます。


参考ページ

スタイルなCSSの基礎講座
Chaichan-World(ちゃいちゃんパパさん)のコンテンツ。リファレンスもあり。
HTML版「スタイルシートWebデザイン」
すみけんたろう氏の名著をまきかずひこ氏がウエブページに
カナかな団の憂鬱「CSSとかHTML」
しょこでぃ氏による様々なCSS表示に関する資料
革命的CSS
Personnel(そふぃあ氏)のコンテンツ
かなりいい加減なCSS解説
おやこニュース内のコンテンツ。

更新履歴


DW_index