Dreamweaver（ドリームウィーバー）を使って、
サンプルサイト「リュウム・トラベラーズ」を作りましょう！

リュウム・トラベラーズ様から、次のようなホームページ作成の依頼がありました。取材メモを元にホームページを作成してください。

ホームページは、デスクトップに、「r_travel」と言う名前のフォルダを作成し、そこに作成してください。
演習で使用するデータと、完成例のサンプルがありますから、参考にしてください。
同じものでも構いませんが、出来る限りオリジナルなページをデザインするよう努力してください。
指定以外の素材は自由に使用して構いません。

今回作成するサンプルサイトは上図のものです。
クリックするとサンプルサイトを見ることができます。
Dreamweaverを使ってhtmlコーディング、そしてcssで見栄えを装飾していきましょう。

→画像データはこのページから取り込んでください。

ホームページを制作する際、ファイルの保存方法に約束事があります。
１．ホームページに使用するファイルは、そのホームページ専用フォルダを作り、その中に保存すること。
２．トップページのファイル名は、必ずindex.htmlにすること。
３．ホームページに使用するファイルのファイル名は、英数字半角小文字８文字以内でつけること。ハイフンやアンダーバーといった記号も避けるのがベターです。

ホームページ制作の仕組みを充分理解されるまでは、上記の3点を必ず守ってホームページ制作に取り組んでください。

ホームページのデータを保存するために、デスクトップに『travel』フォルダを作成します。

この中に、まず二つのフォルダを作成します。
『img』…ホームページ上で使用する画像を全てこの中に保存します。
『css』…ホームページ上で使用するcssファイルを全てこの中に保存します。

ホームページ制作を学び始めた当初は、画像データもcssファイルも少ないと思いますが、画像は画像フォルダに、cssファイルはcssフォルダに保存する癖をつけましょう。
データの整理はホームページの制作・運営には欠かせません。

保存先のフォルダを作ったら、ドリームウィーバーを起動します。

ＡＢＣＤに区分けしてみました。ＡＢＣがツール部分、Ｄが作業部分です。ツール部分ではそれぞれ非常に多くのことができます。
使わない機能が多い、メインスペースが狭くなってしまうから、といって、ツール部分を非表示にすることはおすすめできません。ＡＢＣどれもよく使用するので、「表示してある状態」に慣れましょう。

• Ａ…「メニューバー」全ての操作を行えます。
• Ｂ…「ツールパレット」cssの値を簡単に参照できるツールなどが入ります。常に開いておきましょう。
• Ｃ…「プロパティインスペクタ」様々なことができますが、「プロパティウインドウ」を常に前面にしておきましょう。一番よく使います。
• Ｄ…メインスペース。ここにhtmlファイルやcssファイルが開かれます。

まずひとつ、htmlファイルを新規作成します。画面最上部のツールバー内『ファイル』をクリックすると、下図のようなメニューが出てきますので『新規』を選んで作成しましょう。

新規作成画面は下図のようなものです。これを『index.htmlという名前で新規保存』します。『新規保存』も、新規作成した時と同じく、画面最上部のツールバー内『ファイル』にあります。

○ページにタイトルをつけます。画面の中で右クリックをし、ページのプロパティを見てください。最初の状態では『無題ドキュメント』となっています。

テキストや画像の間隔、フォントサイズ、背景色など、ウェブサイトの見た目は◎◎◎.cssというような、cssファイルで設定します。これはスタイルシートともいいます。そのcssファイルをhtmlファイルにリンクさせて、cssの設定をhtmlファイルで利用するのです。

『ページの中のテキストや画像は、端から少し間隔を空けて表示させる』というような設定が、htmlに元々されています（Dreamweaverを使わなくても）。
色々なデザインをする上では、このような初期設定は邪魔になりがちです。

なので、まずページの余白を無くします。これにより、画面いっぱいを使ったホームページを作ることが出来ます。

htmlファイルを新規作成した時と同じ手順で、cssファイルを新規作成→名前をつけて保存します。

cssファイルを作っただけの状態だと、単純に「htmlファイルとcssファイルができた」というだけなので、この二つを関連付けます。「このhtmlファイルでは、◎◎.cssというcssファイル内で指定されたidやclassを使います」と結び付けるんですね。

今回は「index.htmlと同じ階層にあるcssという名前のフォルダの中の、style.cssというファイル」が関連付けます。 この使い方は「外部css」といいます。効率のいい方法なので、ここでしっかり覚えましょう。

ツールパレット内の「cssスタイル」パネルの最下部に、無限大マークのようなアイコンがあります。これをクリックすると、ファイルを選択するウインドウが開いて簡単にcssをリンクさせることができます。

完成形は下図のようになります。

これで、style.cssに書き込んだ指定をindex.htmlで使用することができます。

1. ページ全体のマージン、パディングをゼロにします。この指定で、上下左右の空白がなくなり、フラットな状態になりました。
   またtext-align: center;　と指定することで、ページ全体を簡単に中央寄せすることができます。
2. テーブルの中のテキストは、body＝全体にかけた指定の影響を受けません。そのためテーブル内のテキストだけ大きい！　ということが起こります。
   これを「table、tr、tdの中のテキストは、全てbodyで指定したフォントサイズと等しい」という指定をして防ぎます。
3. 何も設定しない状況で画像にリンクをつけると、青い太線が表示されてしまいます。これを防ぐため、全てのimgにはボーダーがつかない、という指定をしています。