Dreamweaverのサイト設定についてお探しですね。

広告

Dreamweaverを使うなら最初に覚えたい「サイト設定」のやり方

DreamweaverでWebサイトを作り始めるとき、多くの人がつまずくのが「サイトの定義（サイト設定）」です。

HTMLやCSSの編集自体はできても、サイト設定をしないまま進めてしまうと、画像が表示されなくなったり、ファイルがどこにあるか分からなくなったり、サーバーへのアップロードに失敗したりと、後々トラブルが起きやすくなります。

この記事では、Web制作を始める前にやっておきたいDreamweaverのサイト設定について、初心者の方にも分かるように順を追って説明していきます。

1. Dreamweaverの「サイト設定」って何？

Dreamweaverの「サイト設定」とは、これから作るWebサイトの作業場所や管理のやり方をDreamweaverに教えてあげる設定のことです。

昔のバージョンでは「サイトの定義」と呼ばれていたので、今でもその呼び方をする人もいます。

どちらも意味は同じで、簡単に言えば「自分のパソコンの中にある制作用のフォルダーを、Dreamweaverに認識してもらう作業」だと思ってください。

Webサイトは、HTMLファイル、CSSファイル、JavaScriptファイル、画像フォルダーなど、たくさんのファイルが集まってできています。

これらをただパソコンに保存しているだけでは、Dreamweaver側が「どのフォルダーを1つのサイトとして扱えばいいのか」を判断できません。

だからサイト設定をして、作業するフォルダーを指定してあげることで、ファイルパネルからサイト全体をまとめて管理できるようになるんです。

サイト設定をしておくと、ページ同士のリンクや画像のパスの管理がとても楽になります。

たとえば、画像を挿入したときにDreamweaverが相対パス（ファイル同士の位置関係）を自動で適切に設定してくれるので、ファイルを別のフォルダーに移動したときにリンク切れが起きにくくなります。

また、サーバーの設定まで済ませておけば、完成したファイルをDreamweaverから直接アップロードすることもできます。

つまり、サイト設定は単なる最初の準備作業ではなく、制作から公開までをスムーズに進めるための土台になるんです。

特に初心者の方は、HTMLファイルを1つだけ開いて編集を始めてしまいがちです。

でも、Web制作では「1ページだけ」ではなく「サイト全体」を管理する視点が大切になります。

Dreamweaverで作業を始める前にサイト設定を済ませておけば、後からファイル構成を直したり、リンクを修正したりする手間をぐっと減らせます。

2. サイト設定の前に準備しておくこと

Dreamweaverでサイト設定を行う前に、まずは自分のパソコンの中に作業用のフォルダーを用意しましょう。

このフォルダーは「ローカルサイトフォルダー」と呼ばれていて、制作中のWebサイトに関するファイルをまとめて保存する場所になります。

デスクトップに置いてもいいですが、長く使うなら「ドキュメント」の中や、専用の「web」フォルダーを作って、案件ごとに整理すると管理しやすくなります。

たとえば、会社のサイトを作るなら「company-site」、ポートフォリオなら「portfolio」のように、中身が分かる名前をつけておくと後で探しやすいです。

フォルダー名に日本語やスペースを使っても動くことはありますが、サーバーにアップロードしたときや他のツールを使うときに問題が起きることがあるので、半角英数字とハイフン（-）を使うのが無難です。

制作の現場では、ファイル名やフォルダー名を分かりやすく統一することも大事なルールの一つです。

最低限、事前に準備しておきたいのは次の3つです。

– サイト全体を保存するローカルサイトフォルダー
– HTML、CSS、画像などを入れる基本的なフォルダー構成
– 公開予定がある場合はFTP情報やサーバー情報

フォルダー構成は、最初から複雑にする必要はありません。

初心者なら、トップページ用の「index.html」、CSSを入れる「css」フォルダー、画像を入れる「images」フォルダーを用意するだけでも十分です。

大事なのは、制作途中でファイルをあちこちに散らばらせないことです。

サイト設定は、この整理されたフォルダーをDreamweaverに登録して、サイト全体をまとめて管理するために行います。

サーバーにアップロードする予定がある場合は、レンタルサーバーから発行されるFTP情報も確認しておきましょう。

FTPというのは、自分のパソコンの中のファイルをWebサーバーに転送するための仕組みです。

ホスト名、ユーザー名、パスワード、接続先ディレクトリなどが必要になります。

ただ、最初は自分のパソコンの中だけで練習するつもりなら、サーバー設定は後から追加しても大丈夫です。

3. Dreamweaverでサイト設定をする手順

Dreamweaverを起動したら、上のメニューから「サイト」を選んで、「新規サイト」をクリックします。

するとサイト設定の画面が開きます。

ここで最初に入力するのが「サイト名」と「ローカルサイトフォルダー」です。

サイト名はDreamweaverの中で見分けるための名前なので、公開するURLと完全に同じでなくても構いません。

自分が見て分かる名前をつけることが大切です。

次に「ローカルサイトフォルダー」を指定します。

ここで、さっき作っておいた制作用のフォルダーを選びます。

この設定によって、Dreamweaverはそのフォルダーを1つのWebサイトとして扱うようになります。

設定が終わると、ファイルパネルにフォルダーの中のHTMLやCSS、画像ファイルが表示されます。

ここまでできれば、基本的なサイト設定は完了です。

手順をまとめると、基本の流れはこんな感じです。

– Dreamweaverのメニューから「サイト」→「新規サイト」を開く
– サイト名を入力して、ローカルサイトフォルダーを指定する
– 必要に応じてサーバー設定を追加して、保存する

公開までDreamweaverで行いたい場合は、左側の項目から「サーバー」を選んで、FTP設定を追加します。

サーバー名は自分で決めていいので分かりやすい名前でOKです。

接続方法には一般的にFTPまたはSFTPを選びます。

SFTPは通信が暗号化されるので、使えるサーバーならSFTPを選ぶと安全性が高まります。

ホスト名、ユーザー名、パスワード、ルートディレクトリなどを入力して、テスト接続を行って問題がなければ保存します。

サーバー設定で注意したいのは、アップロード先のディレクトリです。

レンタルサーバーによって「public_html」「www」「htdocs」など、公開フォルダーの名前が違います。

ここを間違えると、アップロードしてもブラウザで表示されなかったり、変な場所にファイルが置かれたりします。

分からない場合は、サーバー会社の管理画面やマニュアルで「公開ディレクトリ」を確認してから設定しましょう。

また、Dreamweaverでは「詳細設定」から画像フォルダーなどを設定できる場合があります。

画像をいつも「images」フォルダーに保存するルールにしているなら、画像用フォルダーを指定しておくと管理が楽になります。

必須ではないですが、制作ファイルが増えるほど便利さを実感できる設定です。

最初は基本設定だけで始めて、慣れてきたらサーバー設定や詳細設定を追加していく進め方でも全然問題ありません。

4. サイト設定後に確認しておきたいこと

サイト設定が終わったら、すぐに制作を始めるのではなく、ファイルパネルの表示をチェックしましょう。

指定したローカルサイトフォルダーの中身が正しく表示されているか、HTMLファイルや画像フォルダーが思ったとおりに並んでいるかを確認することが大切です。

ここで違うフォルダーを指定してしまっていると、後から画像が見つからない、CSSが反映されないといったトラブルにつながります。

特によくある失敗が、HTMLファイルだけを直接開いて編集して、サイト設定をしないまま作業を進めてしまうパターンです。

この場合、ファイル単体では編集できても、サイト全体のリンク管理がうまくいかなくなります。

画像を別のフォルダーから読み込んだり、CSSファイルを移動したりしたときに、パスが崩れて表示がおかしくなることがあります。

Dreamweaverを使う良さを活かすためにも、最初にサイトとして登録してから作業する流れを習慣にしましょう。

確認しておきたい主なポイントは次のとおりです。

– ファイルパネルに正しいローカルフォルダーが表示されているか
– 画像やCSSへのリンクが相対パスで正しく指定されているか
– サーバー設定をした場合、テスト接続とアップロード先が正しいか

相対パスというのは、今開いているHTMLファイルから見た他のファイルへの位置関係を示す書き方です。

たとえば、同じサイトの中の「images」フォルダーにある画像を読み込む場合、「images/sample.jpg」のように指定します。

サイト設定がちゃんとできていれば、Dreamweaver上でファイルを選んで挿入したときにも、このようなパス管理がスムーズにできます。

サーバーにアップロードする場合は、最初から全部のファイルを一気に転送するのではなく、テスト用の小さなファイルで試してみると安心です。

アップロードした後にブラウザでURLを開いて、ページが表示されるか、画像やCSSが反映されているかを確認します。

表示されない場合は、サーバー情報、公開ディレクトリ、ファイル名の大文字小文字、トップページ名が「index.html」になっているかを見直してみましょう。

Dreamweaverのサイト設定は、一度設定したら終わりではなく、制作環境に合わせて見直すこともあります。

たとえば、作業フォルダーを別の場所に移動した場合や、サーバーを変更した場合は、サイト設定を更新する必要があります。

設定内容を正しく保っておくことで、ファイル管理、リンク確認、アップロード作業がスムーズになります。

Web制作の第一歩としてサイト設定を丁寧に行うことは、後の作業ミスを減らして、安定した制作環境を作るための大事な準備です。

最初は少し面倒に感じるかもしれませんが、一度やり方を覚えてしまえば、次からはすぐにできるようになります。

ぜひこの記事を参考に、Dreamweaverのサイト設定をマスターしてください。

広告