Dreamweaverの初期設定
2014年5月22日:Dreamweaver
DreamweaverはHTML/CSSなどのサイト用のファイルを編集するためのソフトウェアです。
Dreamweaverを利用することで効率よくサイト運営ができるようになります。
ここでは、Dreamweaverの初期設定の方法を紹介します。
サーバーやローカルの初期設定
はじめにDreamweaverを起動すると
という画面がでてきます。Dreamweaverでは、サーバーを設定することで、ファイルのアップロードを容易にできるようにしてくれます。
サーバーの設定をする場合は、「サイトの管理…」を選択します。すると以下の様な画面になります。
まだサイト登録していないので、ここでは「新規サイト」を選択してサイトを追加します。
すると以下の様な画面がでてきます。
まず、サイトを選択して、サイト名とローカルサイトフォルダを選びます。
ここでは、自分のパソコンのどのフォルダとサーバーを連動するかを設定しています。
続いて、サーバーの設定をします。左の項目にある「サーバー」を選択します。
そして、サーバーを追加するので「+」をクリックします。
すると以下の様な画面になるので、サーバーの情報を入力しましょう。サーバー情報をサーバー管理者から教えてもらいましょう。今回のFC2サイトの場合は管理画面へログインしてFTP情報をチェックすればわかります。
- サーバー名:好きな名前をつけてください
- 使用する接続:FTPを選択します
- FTPアドレス:ホスト名(ホストアドレス)を入れてください。
- ユーザー名:サーバーのユーザー名を記入します。
- パスワード:サーバーのパスワードを記入します。
これで、「テスト」をクリックすれば、サーバーに繋がるかチェックできます。
サーバーに接続できたら、WebURLにサイトのURLが記入されます。
終わったら「保存」をクリックします。
サイト設定へ戻るので再び「保存」をクリックします。さらに、完了をクリックしておわります。
HTMLファイルをつくってサーバーへアップロードする
では、HTMLファイルをつくってサーバーへアップロードしてみましょう。
メニューにある
「ファイル->新規…」
を選択します。すると以下のような画面が表示されます。
いろいろなテンプレートがありますが、ここでは最も単純なHTMLでレイアウト<なし>にします。そして、ドキュメントタイプは「XHTML 1.0 Transitional」にします。もしも、HTML5で作りたいなら、HTML5を選択しましょう。
選択したら作成をおします。
これでHTMLファイルが作成されます。
「コード」を押すとHTMLファイルのタグが表示されます。そして、「デザイン」をクリックするとブラウザ表示されます。そして、分割を押すと、左半分にコード、右半分にデザインが表示されます。
ここでは、<body>と</body>の間に
<h1>タイトル</h1> <p>文章です。</p>
を追加しています。でないと、デザインになにも表示されないので。
あとデザインにコードを反映させるには右上の時計回りに回っている矢印をクリックします。
ファイルをサーバーへアップロードするために、HTMLファイルをローカルへ保存します。
「ファイル->保存」
でローカルの保存場所で「index.html」と保存してください。
あとは、上下の矢印ボタンをおして、PUTを選択すればファイルがサーバーへアップロードされます。
もしも、サーバーからダウンロードしたい場合は、「GET」を選択します。
以上の操作でアップロードされたので、サイトをウェブで確認して下さい。
となっていればOKです。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー