お久しぶりです。WEBデザイナーの橋本です。
今回は「今更だけどDreamWeaverの使い方を書いてみた」ということでDreamWeaverとはなんぞや？という皆さんの疑問を記事にしたいと思います。

 

DreamWeaverってなにができるの？

DreamWeaverとは日本語訳で「夢を編む人」ということですが、夢とはここでいうプログラムであったりソースコードであったりします。
つまりはマークアップやプログラミングに使用するソフトと覚えてくれれば大丈夫です。

他にも・・・

• デザインビューで視覚的に操作したり
• FTPでデータのやりとりができたり
• GitやSubversionと連動できたり

と色々な機能がついています。(一部拡張機能)
他にもサイト管理という機能もあるので、業務ごと、案件ごとに切り分けて使えばファイル操作にもたつくことはありません。
ということで今回は初歩からやっていこうと思います。

 

とりあえず新規ファイルから作ってみる

DreamWeaverを開くと下記のような画面になるので(なっていない方はファイル→新規)、ページタイプをHTML。レイアウトをなしに設定します。

これで新たにHTMLドキュメントを作成できました！
更に左上のタブから「コード」「分割」「デザイン」を選んでみましょう。見え方が若干異なりますね。この便利な機能はDreamWeaverがソースコードを解釈し、ソフト上で見た目を表示してくれているからです。ソースコードのみを見たい場合「コード」を、見た目を見たい場合「デザイン」を、両方見たい場合「分割」を選びます。

最後にファイルを保存してください。
保存場所はデスクトップに「test」というフォルダを作り、index.htmlのファイル名で保存します。
その後、ファイルは閉じてください。

 

サイト管理でファイルを扱ってみる

では次にサイト管理を行ってみます。
あらかじめサイト管理をしておけば、FTPへの接続やファイル操作など今後楽になります。

小窓が開かれたら新規作成を選びます。
新規作成をする際に決めるのは2箇所です。
1つはローカルファイルの場所、いわゆるパソコン内の作業場所
2つめはネットワーク内の場所、いわゆるサーバー内のディレクトリです。

ではまずローカルから・・・

次にサーバー側を設定します。(サーバーがない場合は未入力でも大丈夫です)

設定が完了したら、先ほどの小窓から「先ほど作ったサイト名」を選択されていることを確認し、「終了」を選択します。
するとDreamWeaverの画面がこんな感じになりました。

これでサイト管理がひとおおりできました。
この画面内でファイルをダブルクリックすると、そのファイルを開けます。

次にFTPで接続します。
FTPで接続するには「青いコンセント」のボタンをクリックします。アラートがでなければ完了です。
では、ファイルをサーバにアップしましょう。

index.htmlを選択し、青い上矢印のボタンをクリックします。「依存ファイル〜」のアラートが出る場合は「いいえ」を選択してください。
依存ファイル〜とは、アップロードするファイルに画像やスタイルシートなどリンクされていたら、それも同時にアップロードするかどうかです。
今回は何も関連ファイルはないので「いいえ」にしました。

実際にアップロードされたか見るには「青いウィンドウ」のようなアイコンをクリックします。

ちゃんとファイルがアップロードされていますね。
DreamWeaverではファイルのアップロードだけでなくダウンロードも同期も簡単に行ってくれるんです、すごい便利な機能ですね！
今回は初歩編として、ファイルを作って、サイト管理でサーバーに反映というところまでやりました。

みなさんもDreamWeaverという高機能な開発環境でより良いWEBライフを送ってみてはいかがでしょうか？

投稿日：2016.02.23