アクセシビリティ

よくわかる!ADOBE CREATIVE SUITE 3 DESIGN PREMIUM

Photoshopで始めるWebデザインstep01


01 サイトの設定

Webサイトのメインフォルダを作成する

Webサイトのメインフォルダを作成する01

デスクトップにフォルダを作成し、myWebsiteという名前を付けます。このフォルダが、これから作成するWebサイトのメインフォルダ(ルートフォルダ)になります。次にDreamweaverを起動し、サイトメニューから「新規サイト」を選択します。このウィザードは、新規プロジェクト用Webサイトの作成手順を順に実行します。


Webサイトのメインフォルダを作成する02

spacerWebサイトのメインフォルダを作成する03


Webサイトのメインフォルダを作成する04

ここまでの手順が完了したら、ファイルパネルに、デスクトップのmyWebsiteフォルダの内容が表示されます。ファイルパネルには、ルートフォルダ内のすべてのアセットが表示されます。myWebsiteフォルダにファイルを追加すると、追加されたファイルはファイルパネルにも表示されます。


 

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

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

Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「HTML」を、レイアウト列から「<なし>」を選択して、「作成」をクリックします。Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「CSS」を選択して、「作成」をクリックします。現在、2つの無題ドキュメントが開いています。これらのファイルを、デスクトップ上のmyWebsiteフォルダに保存します。HTMLドキュメントに design.html、CSSドキュメントにstylesheet.cssという名前を付けます。


 

reamweaverで新規ドキュメントを作成する02
reamweaverで新規ドキュメントを作成する03

キャプション

 

Photoshopのアセットを保存するためのフォルダを作成する

Photoshopのアセットを保存するためのフォルダを作成する01

Photoshopから書き出すアセットを保存するためのフォルダを作成します。ルートフォルダを整理するため、Web用の画像をimagesフォルダにコピーします。ファイルパネルで新規フォルダを作成するには、ルートフォルダを選択して右クリック*し、プルダウンメニューから「新規フォルダ」を選択します。

*Macintosh でシングルボタンマウスを使用している場合は、Controlキーを押しながらクリックします。


Photoshopのアセットを保存するためのフォルダを作成する02

imagesフォルダ内に2つのフォルダを作成し、それぞれnavigationおよびtemplateという名前を付けます。ファイルパネルが下の図のように表示されたら、Photoshopの画像を追加する準備が完了します。


 



活用ガイドTOPに戻る