アフィリエイトは儲かんないってば

何に関してもなかなか上級者になれない私ですが、Dreamweaver（ドリームウィーバー）に関しても、もちろん初心者です。
「プロ仕様」という言葉にあこがれて買ってみたものの、ほとんど使えず放置しておりました。
必要に迫られ、出来は悪いものの一応ホームページを作れるようになりました。
どのようにしてホームページを作成するのか、初心者によるDreamweaverの使い方の解説・最終回です。

最初の２回はこちら。

Dreamweaverの使い方入門・その１
（カルチャー・ブレーソのサイトを作ってみる・２ ）

Dreamweaverの使い方入門・その２
（カルチャー・ブレーソのサイトを作ってみる・３ ）


＜Dreamweaverは何をしてくれるのか？＞

「そもそもDreamweaverは何をしてくれるのか？」についてご説明させていただきたいと思いますが、この説明は完全に私の思い込みです。あまり気にしないで下さい。

Dreamweaverは箱詰め作業を簡単にしてくれるソフトです。

引越しなどの作業でダンボールに物を詰めますが、それをやってくれる感じに似ています。
ダンボールにclassとかidとかいう名前をつけて、物を詰め込みます。
大きさも自由に変えられますし、色や包装も簡単に変えることが出来ます。
そして、どういう大きさの箱にどういう包装をしたかとか、そういう情報も含めて詳細に箱詰め内容を整然とリスト化してくれます。

今までDreamweaverが無い状態でしょぼいホームページを作ったことがあるのですが、
HTMLにテキストを書き、
divタグを手打ち入力し（divの閉じ忘れなど頻発）、
CSSを一から手打ちして、書き換えたり、項目の順番を移動するためにコピペしたり、
全角スペースが入ってFirefoxで正しく表示されなくなったりしていたのでした。

これが、Dreamweaverを使えば、
・Divタグが簡単一発入力（終了タグもつけてくれる）。
・CSSは項目を選んだり数値を入力するだけで自動で書いてくれる。
・CSSの項目の順番を入れ替えたい時はCSSパネルで項目を入れ替えるだけ。
・CSSの修正は項目や数値を変更するだけでオッケー。
・自動で書いてくれるからCSSの中に全角スペースが入り込んだりしない。

そういうわけで、どんどんHTMLのテキストをdivタグで箱詰めし、CSSで箱の大きさなどをさくさく設定して、（出来がイマイチな）ホームページを量産できるようになってしまったのでした。


＜まずはホームページの構造を考える＞

ホームページの構造を考えます。
どのダンボール箱にどういう名前をつけて大きさをどれくらいにするかを決めます。
後から名前も大きさも変えることが出来ますので、そこまで悩まなくていいかもしれません。



↑試作サイトの１個目は最初に下図のような構造を決めました。



構造を決めたら、まずは心を無にしてDivタグで囲っていきます。

コードビューで、囲いたい部分を選択状態にします。




選択状態にしたら、Divタグを挿入するボタンを押します。
上の方にあるんですが、ちっこくてわかりにくっ！




ボタンを押すと、どういう名前のDivタグにするか？と聞かれます。
ホームページの中で特有の要素であればid、何度でも出現するような普遍的なものであればclassにします。
ここでは、headerというid属性にしました。




すると、見事にdivタグが挿入されました！
もちろん閉じ忘れもありません。
お見事です。




作業領域の下のほうを見ると、「今の場所はどんな場所なのか？」ということを示す部分があります。
下図では、containerというid属性がアクティブになっています。
（別のdiv要素をクリックするとアクティブな部分が変わります。）




では、id:containerに新規のCSSを設定します。
containerをアクティブな状態にしたまま、右にあるCSSパネルのボタンを押します。
これがまたまたわかりにくっ！




すると、CSSを新規設定する画面が開きます。
id:containerの場合、body直下の要素なので、「セレクタ」には「#container」と表示されますが、これがもっと下層の要素だと「#container #header」という風にどんどん長くなっていきます。
「#header」などに適宜変更してください。
また、「#header a」とか、「#header a:hover」と付け加えて設定していくことも出来ます。




CSSの内容を設定します。
大きさなどざっくりした部分を入力します。



この設定が終わると、CSSパネルに「container」が出現しますので、ダブルクリックすれば、いつでも内容を自由に変更することが出来ます。
また、CSSパネルで要素をドラッグアンドドロップすれば、順番を入れ替えることが出来ます。
順番を入れ替えると、CSSも自動で書きかえられます。

それから、似たようなCSSは右クリック　→　編集　→　複製　でコピーして使いまわすことも出来ます。

すばらしい、Dreamweaver。


そういうわけで、CSSが設定でき、無事にサイトが完成したら、アップロードです。
上の方にある「サイト」から「サイトの管理」を選びます。




「ファイルの共有」で、使用しているレンタルサーバーの情報を入力します。
接続する方法は「FTP」です。

今回　http://net.verse.jp　というアドレスを使用していますが、このアドレスに「test」というフォルダを作っており、その中に「breaso」というフォルダを作っています。
そこにファイルをアップロードして欲しいので、「ファイルはサーバー上のどのフォルダに保存しますか？」というところには、

/test/breaso/

と入力しました。




設定が終わったら、右の方にあるファイルパネルで、アップロードしたいファイルやフォルダを選んで、上向き矢印（ファイルをプットする）を押します。

Dreamweaverでは、
アップロード　→　プット
ダウンロード　→　ゲット
という風に呼んでいるようです。


そういうわけで、ここまでの解説で、すでに私レベルくらいはすぐにドリームウィーバーが使えるようになっちゃえます。

しかし、実際に作るホームページに関しては、HTML、CSSの知識とデザインセンスが要求されます。
その辺りの解説は、恐れ多くてとても出来ません（笑）。
各自CSSやHTMLのしっかりとした専門書を参考にがんばられて下さい。


このレベルで使えるようになっても、しょぼいページしか作れない・・・

そういう状態を身をもって体現している私ですが、もう少し精進して、Dreamweaverの名を汚すことの無いようなホームページを作れるようになりたいものです。









この記事へのコメント

ひとしょん。 2007年12月05日 19:09

こんばんは。以前FRASHを作っていただきありがとうございました。 活用させていただいています。 Dreamweverとても素敵なソフトですね。ホームページを作っている 私にとってはとても羨ましいソフトです。今は無料ソフトを使っていますが、いつかは欲しいなぁと思います。その時はぜひ参考にさせてください。

afiliate 2007年12月05日 22:38

どおも〜ひとしょんさま。 いえいえ〜どういたしまして〜。活用していただいて嬉しいです。 Dreamweaverはブログから入った方は特に理解しやすいと思いますよ。ホームページビルダーも持っていますが、私にはホームページビルダーの方が難解で、結局使い切れませんでした。 無料ソフトであのサイトを作っていらっしゃるとはすごいですよ。上級者でなれた方の中には、Dreamweaverは起動が遅いから無料ソフトを使ってやってる、という方もいました。 そんなに起動は遅く無いような気がしますが（＾＾； Dreamweaverを使うと、作業が簡単、楽チンになるかもしれません。何かホームページ関連ソフトをお考えの際にはぜひぜひ候補に入れてくださいませ〜。 参考になるか不明ですが（笑）、いわゆる説明書が付いてない（全てDVDビデオによる説明とヘルプ）ので、最初どのボタン押したらいいのか？という時には参考になるかもです。

トラックバックURL