完成例

Step

Des ign Schoo l

4242 4343Dreamweaver 8 デザインスクール

Lesson 1Lesson 2

Lesson 3Lesson 4

Lesson 5Lesson 6

作業用フォルダの作成と画像の準備

はじめてのWebページ制作2

Webページを作成できるようになるためには、Dreamweaverの使い方や機能を学ぶと同時に、Webページのしくみやサイト構築の際の決まりごとを学ぶことが重要になります。ここではまず、シンプルなフォトギャラリーのサイトの制作を通して、サイト制作の全体の流れを体験し、基本的なWebページの決まりごとも確認していきましょう。

CD-ROM sLesson 01 s02_Star t ／ 02_Fin WebサイトはHTMLファイルやそこに配置される画像ファイルなど、数多くのファイルによって構成されています。これらのファイルをまとめて管理するために、はじめに作業用のフォルダを作成します。

作業用フォルダの準備A

Dreamweaverで作業するときは、まずパソコンのなかのどこにファイルを保存するかを決め、

あらかじめフォルダを作成しておくと作業がスムーズに進みます。なるべくわかりやすい場所がよいので、Cドライブの一番上のディレクトリにフォルダを作ります。

作業用フォルダの作成と画像の準備

1

MEMO

Macintoshの場合は、ハードディスクを開いた場所に作成するとよいでしょう。

フォルダ名は自由につけることができますが、ここでは「DW Lesson」としました。このな

かに、この本で作成するWebサイトを保存していくことにします。このなかに、さらにフォルダを作成し、「flowers」という名前でフォルダ名をつけます a。さらに、その中に「images」というフォルダを作成します b。「images」フォルダの中に、Webサイトで使用する画像を保存します c。

2

a 「flowers」という名のフォルダを作成する

b 「images」フォルダを作成してその中に画像を保存する

画像ファイルは、「images」というように専用のフォルダを作って管理するのが一般的です。この本では、レッスンに必要な素材をCD-ROMに収録しています。付属CD-ROMの「Dreamweaver 8 デザインスクール」を開き、「Lesson01」→「02_Start」→「images」フォルダの中のすべての画像ファイルをさきほどパソコン上に作成した「images」フォルダのなかにコピーします。このように、DreamweaverでWebページをレイアウトするには、そこで必要な画像ファイルを、別途用意する必要があります。

c サイトで使用する画像

フォルダを作成する

Web サイト制作の流れ

サイト定義 HTMLファイルの作成と保存

トップページのレイアウト ファイルの複製とCSSの共有化 その他のページのレイアウト

DATA

01.indd 42-43 06.7.21 8:51:00 PM