MEMO - MdN InteractiveDreamweaver 8 デザインスクール 43 43 Lesson 1 Lesson 2 Lesson 3 Lesson...

1
Step Design School 42 43 Dreamweaver 8 デザインスクール Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 作業用フォルダの作成と画像の準備 はじめてのWebページ制作 2 Webページを作成できるようにな るためには、Dreamweaverの使い方 や機能を学ぶと同時に、Webページ のしくみやサイト構築の際の決まり ごとを学ぶことが重要になります。こ こではまず、シンプルなフォトギャラ リーのサイトの制作を通して、サイト 制作の全体の流れを体験し、基本的 なWebページの決まりごとも確認し ていきましょう。 CD-ROM s Lesson 01 s 02_Start 02_Fin Web サイトは HTML ファイルやそこに配置される画像ファイルなど、数多くのファイルによって構成されてい ます。これらのファイルをまとめて管理するために、はじめに作業用のフォルダを作成します。 作業用フォルダの準備 A Dreamweaverで作業するときは、まずパソコン のなかのどこにファイルを保存するかを決め、 あらかじめフォルダを作成しておくと作業がスムーズ に進みます。なるべくわかりやすい場所がよいので、C ドライブの一番上のディレクトリにフォルダを作ります。 作業用フォルダの作成と画像の準備 1 MEMO Macintoshの場合は、ハードディスクを開いた場所に作成すると よいでしょう。 フォルダ名は自由につけることができますが、 ここでは「DW Lesson」としました。このな かに、この本で作成するWebサイトを保存していく ことにします。このなかに、さらにフォルダを作成し、 flowers」という名前でフォルダ名をつけますaさらに、その中に「images」というフォルダを作成しま b。「images」フォルダの中に、Webサイトで使用す る画像を保存しますc2 a 「flowers」という名のフォルダを作成する b 「images」フォルダを作成してその中に画像を保存する 画像ファイルは、「images」というように専用のフォルダを作っ て管理するのが一般的です。この本では、レッスンに必要な素材 をCD-ROMに収録しています。付属CD-ROMの「Dreamweaver 8 デザインスクール」を開き、「Lesson01」→「02_Start」→ images」フォルダの中のすべての画像ファイルをさきほどパソ コン上に作成した「images」フォルダのなかにコピーします。 このように、DreamweaverでWebページをレイアウトするには、 そこで必要な画像ファイルを、別途用意する必要があります。 c サイトで使用する画像 フォルダを作成する Web サイト制作の流れ サイト定義 HTML ファイルの作成と保存 トップページのレイアウト ファイルの複製と CSS の共有化 その他のページのレイアウト DATA

Transcript of MEMO - MdN InteractiveDreamweaver 8 デザインスクール 43 43 Lesson 1 Lesson 2 Lesson 3 Lesson...

Page 1: MEMO - MdN InteractiveDreamweaver 8 デザインスクール 43 43 Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 作業用フォルダの作成と画像の準備 2はじめてのWebページ制作

完成例

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