dw_start_01

連載  /  

Dreamweaver入門 第1回:サイト設定がDreamweaverのカナメです

BY 公開

本連載では、初心者を対象にDreamweaverの基本的な使い方を解説していきます。Dreamweaverを使ってWebサイトを制作する上で、何がなんでも外せないのが「サイト設定」です。第1回目は、「サイト設定」とは何か、そしてサイト設定をする意味やメリットなどについて解説します。

※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるWebサイトの例(完成例)と、本記事の内容を試すための素材データを用意しています。

Dreamweaver CC の体験版をダウンロード   サンプルファイル(完成例)をダウンロード   サンプルファイル(本記事用の素材)をダウンロード

 

Dreamweaverで作業する前に準備しておくこと

「サイト設定」をする前に「サイト設定をするための準備」が必要になります。まずはここから解説します。

1 Webサイトの構成を考える

DreamweaverでWebサイトを作成する前に、どんなページを何ページ作るのか、それぞれのWebページにはどんな内容を掲載するのか、また各Webページから他のページにリンクで辿ることができるのかなどをあらかじめ考えておきます。

2 Webブラウザーに表示させる材料を準備する

1で考えた内容を元に、HTMLファイルやWebブラウザーに表示させるための材料(写真やロゴなどの画像ファイルや、文章などのテキストデータ)を準備します。

準備する材料 文字原稿 Webページに掲載する文字原稿(テキストデータ)をページごとに作成しておきます。 画像ファイル 写真やロゴデータ、ボタンやアイコンなどは、あらかじめFireworksやPhotoshopなどのグラフィックソフトでサイズ調整や色調整などを行い、gif/jpg/pngなどの形式で保存しておきます。

上記に加え、必要に応じて動画やアニメーション、イラストなども用意しておきます。

3 「サイトフォルダー」を準備する

HTMLファイルや画像ファイル、CSSファイルなど、Webサイトを構成するすべての材料(ファイル)を事前に1つのフォルダーにまとめます。

さらにこのフォルダーの中に、先に準備しておいた文字原稿を保存する「sozai」フォルダー、画像ファイルを保存する「img」フォルダーなどを作ってまとめておくとよいでしょう。

このすべてのファイルをまとめたフォルダーのことを、Dreamweaverでは「サイトフォルダー」と呼んでいます。

自分のパソコン内にあるサイトフォルダーを「ローカルサイトフォルダー」、サーバー上にあるサイトフォルダーを「リモートサイトフォルダー」と呼びます。

サイト設定をする

さて、サイトフォルダーの準備ができたら、やっとDreamweaverの登場です。サイトフォルダーをDreamweaverに設定します。このことを「サイト設定」と呼びます。サイト設定は以下の手順で行います。

1 新規サイト設定をする

[サイト]メニュー→[新規サイト]を選択します。

2 サイト設定をする

[サイト設定]ダイアログボックスが開くので、[サイト名]と[ローカルサイトフォルダー]を指定します。

[サイト設定]ダイアログボックスでの設定項目 サイト名 サイトの名前を入力します(例えば、お店の名前や会社名など)。 ローカルサイトフォルダー ローカルサイトフォルダーを指定します。右のフォルダーアイコンから指定します。

3 [ファイル]パネルにローカルサイトフォルダーの内容が表示される

サイト設定をすると、Dreamweaverの右側にある[ファイル]パネルに、指定したローカルサイトフォルダー内に格納されているファイルとフォルダーの一覧が表示されます。Dreamweaverでは、この[ファイル]パネルがとてつもなくすごい仕事をしてくれます。

サイト設定を行うことで、Dreamweaverがローカルサイトフォルダーのファイルをすべて管理している状態になります。そうすることで、リンク指定や画像配置などを簡単に正しく設定することができます。こちらは2回目以降で解説していきます。

新規ドキュメントを作成する

Dreamweaverで新規ドキュメント(ファイル)を作成する方法について解説します。

[ファイル]メニュー→[新規]をクリックすると、「新規ドキュメント」ダイアログボックスが開きます。Dreamweaverでは、Webページに関連するファイルを作成することができます。今回はHTMLファイルを作成したいので、[空白ページ]を選択し、[ページタイプ]は[HTML]、[レイアウト]は[なし]を選択し、[作成]ボタンをクリックします。

まずドキュメントを保存しよう

新規のHTMLドキュメントが表示されました。ここでいきなり作業はしません。まずこのドキュメントを「サイトフォルダー」に保存します。保存すると、[ファイル]パネルに保存した新しいHTMLファイルが表示されます。

この作業をすることで、リンク設定や画像の挿入をスムーズにすることができます。

【サイト管理編】 サイト設定をしているとイイこと

Dreamweaverを使うと、Webサイトを作ること以外にも便利なことがあります。作った後のファイル管理にもとても力を発揮するのです。

1 ファイル名の変更やファイルの移動が便利

例えば、ローカルサイトフォルダー内(OSのフォルダーウィンドウなど)でファイル名を変更したりファイルを移動すると、そのせいでリンク切れや画像が表示されないなどのトラブルが発生してしまいます。

もう一度言いますが、サイト設定をするとDreamweaverがローカルサイトフォルダーのファイルすべてを管理してくれています。そのため、Dreamweaver上でファイル名の変更やファイルの移動を行うと、サイトフォルダー内の関連するファイルを検知し、関連するファイル内に記述されているファイル名やパスなどを適切なものに書き換えてくれます。

【ファイル名を変更してみよう】
[ファイル]パネル上で、ファイル名を変更したいアイコンの上で右クリック→[編集]→[名前の変更]を選びます(F2キーでもできます)。ファイル名を書き換え[Enter]キーを押します。

すると、[ファイルの更新]ダイアログボックスが表示され、名前を変更したファイルに関連するファイルの一覧が表示されます。

[更新]ボタンをクリックすると、関連するファイル内に記述されているファイル名がすべて書き換えられます。

もちろん、他の関連するファイルでも同様にすべて変更されます。本来はこんな変更はできるだけない方がいいですが、Dreamweaverでサイト設定をしていると、急なファイル名変更が発生しても大丈夫ですね!

2 削除してもいいファイルかそうでないかを教えてくれる

ローカルサイトフォルダー内のファイルを削除するのはとてもキケンです。ファイル名の変更と同じく、削除したファイルが別のファイルに関連付けられていたら、リンク切れを起こす原因になるからです(いわゆる「Not Found」ってやつです)。

Dreamweaverは、削除したいファイルが他のファイルと関連しているかどうかを調べてくれるので、リンク切れを防ぐことができます。

[ファイル]パネル上で、削除したいファイルを選択し[Delete]キーを押します。関連しているファイルがある場合は、以下のようなダイアログボックスが表示されます。

関連しているファイルがない場合は、以下のダイアログボックスが表示されます。

3 Webサイト内のリンクチェックができる

どこからもリンクされていない単独ファイルがないかのチェックもできます。[ファイル]パネル内のファイル名の上で右クリック→[リンクのチェック]→[ローカルサイト全体]を選択します。

[プロパティインスペクター]の下にパネルが表示されます。[単独ファイル]を選択すると、どのファイルとも関連していないファイルの一覧が表示されます。

これを参考にすると、ローカルサイトフォルダー内のファイルをとても整理しやすくなるでしょう。

ということで、Dreamweaverを操作する前に「サイト設定」をしっかりしておくと、のちのちのファイル管理までいい感じにDreamweaverが助けてくれます。Dreamweaverは「サイト設定」がカナメです!

Dreamweaver CC の体験版をダウンロード   サンプルファイル(本記事用の素材)をダウンロード

  TAGS

  AUTHOR

山本 和泉

プランナー/デザイナー/トレーナー / クライアントのニーズに合わせたコンサルティングから企画・制作、運用保守の業務などを行う。執筆やWeb制作に関する講師も担当し、特に初心者に向けた解説を得意とする。またアクセシビリティに関する活動も行う。著書に「デザインの学校 これからはじめるDreamweaverの本 〔CS6/CS5.5対応版〕」(技術評論社)など。