Dreamweaverの初期設定

2014年5月22日：Dreamweaver

DreamweaverはHTML/CSSなどのサイト用のファイルを編集するためのソフトウェアです。

Dreamweaverを利用することで効率よくサイト運営ができるようになります。

ここでは、Dreamweaverの初期設定の方法を紹介します。

はじめにDreamweaverを起動すると

という画面がでてきます。Dreamweaverでは、サーバーを設定することで、ファイルのアップロードを容易にできるようにしてくれます。

サーバーの設定をする場合は、「サイトの管理…」を選択します。すると以下の様な画面になります。

まだサイト登録していないので、ここでは「新規サイト」を選択してサイトを追加します。

すると以下の様な画面がでてきます。

サイト設定_FC2

まず、サイトを選択して、サイト名とローカルサイトフォルダを選びます。

ここでは、自分のパソコンのどのフォルダとサーバーを連動するかを設定しています。

続いて、サーバーの設定をします。左の項目にある「サーバー」を選択します。

そして、サーバーを追加するので「＋」をクリックします。

すると以下の様な画面になるので、サーバーの情報を入力しましょう。サーバー情報をサーバー管理者から教えてもらいましょう。今回のFC2サイトの場合は管理画面へログインしてFTP情報をチェックすればわかります。

これで、「テスト」をクリックすれば、サーバーに繋がるかチェックできます。

サーバーに接続できたら、WebURLにサイトのURLが記入されます。

終わったら「保存」をクリックします。

サイト設定へ戻るので再び「保存」をクリックします。さらに、完了をクリックしておわります。

では、HTMLファイルをつくってサーバーへアップロードしてみましょう。

メニューにある

「ファイル->新規…」

を選択します。すると以下のような画面が表示されます。

いろいろなテンプレートがありますが、ここでは最も単純なHTMLでレイアウト<なし>にします。そして、ドキュメントタイプは「XHTML 1.0 Transitional」にします。もしも、HTML5で作りたいなら、HTML5を選択しましょう。

選択したら作成をおします。

これでHTMLファイルが作成されます。

「コード」を押すとHTMLファイルのタグが表示されます。そして、「デザイン」をクリックするとブラウザ表示されます。そして、分割を押すと、左半分にコード、右半分にデザインが表示されます。

ここでは、<body>と</body>の間に

<h1>タイトル</h1>
<p>文章です。</p>

を追加しています。でないと、デザインになにも表示されないので。

あとデザインにコードを反映させるには右上の時計回りに回っている矢印をクリックします。

ファイルをサーバーへアップロードするために、HTMLファイルをローカルへ保存します。

「ファイル->保存」

でローカルの保存場所で「index.html」と保存してください。

あとは、上下の矢印ボタンをおして、PUTを選択すればファイルがサーバーへアップロードされます。

もしも、サーバーからダウンロードしたい場合は、「GET」を選択します。

以上の操作でアップロードされたので、サイトをウェブで確認して下さい。

となっていればOKです。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー