Designing for Cisco Internetwork Solutions Lab Guide (CCDA DESGN 640-864) v2.1
desgn to web
-
Upload
yu-shitara -
Category
Documents
-
view
222 -
download
0
description
Transcript of desgn to web
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse1
Webデザインをデスクトップからそのままブラウザへ
はじめにこれまでの、デザイナーによるWebサイトのデザインは、多くの場合 Adobe Photoshop®でWebサイトのモデルを作成する作業でした。顧客によるデザインの承認を受けた後で、デザイナーは開発者やプログラマーにモデルを渡して、HTMLや CSSを使用してデザインを再現してもらう必要がありました。
このドキュメントでは、Adobe Dreamweaver® CS3とPhotoshop CS3 Extendedを使用して、作成したWebデザインの仕上がりをより精密に調整する作業をデザイナー自身が行いながら、HTMLおよび CSSにコーディングする方法について手順を追って説明します。
このガイドに必要なソースファイルは、ZIP形式の圧縮ファイルとしてダウンロードしてください。
ファイルのダウンロード
目次
サイトの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Photoshopデザインのスライス処理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9ページ全般のデザイン用 CSSルールの定義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21コンテンツ領域のレイアウト用 CSSルールの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37バナー領域の設定と位置の指定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40ロゴの追加と位置の指定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44最上部のナビゲーショングラフィックの作成と位置の指定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47フッタ領域の設定と位置の指定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55コンテンツのフォーマット . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60広告用アニメーションの作成および配置 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62Webページの背景およびマルチカラーのリンクの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71ブラウザの互換性チェック . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76アドビ システムズ社の「CSS Advisor」Webサイト . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77HTMLコードの検証 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78ページをテンプレートとして保存 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79ナビゲーション用のリンクとロールオーバーの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80編集可能領域の追加 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81テンプレートを使用した新しいページの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83Webサイト内のすべてのリンクのチェック . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86ナビゲーションの「ダウン」状態の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88テンプレートを使用した全般的な変更 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89表データの読み込み . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91イメージマップの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94Dreamweaver内でのフォーマット設定とイメージの調整 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96Webフォームの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100Photoshop Extendedでのアニメーションの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107Webサイトのプレビュー . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110Webサイトのサーバへのアップロード . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse2
Webデザインをデスクトップからそのままブラウザへ
サイトの設定
デスクトップにフォルダを作成し、myWebsiteという名前を付けます。このフォルダが、これから作成するWebサイトの メインフォルダ(ルートフォルダ)になります。次に Dreamweaverを起動し、サイトメニューから「新規サイト」を選択します。 このウィザードは、新規プロジェクト用Webサイトの作成手順を順に実行します。
新規サイトウィザード:手順 1 サイトに「Aquo Microsite」という名前を指定します。
新規サイトウィザード:手順 2 このガイドでは、HTML、CSS、および JavaScriptの作成のみを行います。 したがって、ここでサーバテクノロジーを指定する必要はありません。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse3
Webデザインをデスクトップからそのままブラウザへ
サイト定義ウィザードの手順を引き続き行います。
新規サイトウィザード:手順 3 デスクトップ上のmyWebsiteフォルダを選択します。
新規サイトウィザード:手順 4 このガイドではWebサーバにログインしません。 したがって、接続の種類を「なし」に設定します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse4
Webデザインをデスクトップからそのままブラウザへ
ここまでの手順が完了したら、ファイルパネルに、デスクトップのmyWebsiteフォルダの内容が表示されます。
ファイルパネルには、ルートフォルダ内のすべてのアセットが表示されます。myWebsiteフォルダにファイルを追加すると、追加されたファイルはファイルパネルにも表示されます。
新規サイトウィザード:手順 5 サマリーを確認して、「終了」をクリックします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse5
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「HTML」を、 レイアウト列から「<なし >」を選択して、「作成」をクリックします。
Dreamweaverの新規ドキュメントダイアログボックス
このガイドでは、空白ページからCSSベースのレイアウトを作成する方法を学習します。ただし、Dreamweaverには作成済みのテンプレートが多数付属しています。
これらのテンプレートには、デザイナーがWebで一般的に使用するレイアウトが多数含まれています。
また、このガイドの学習を終えた後で、これらのテンプレートをさらに変更して将来のプロジェクトで使用することができます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse6
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「CSS」を選択して、「作成」をクリックします。 現在、2つの無題ドキュメントが開いています。これらのファイルを、デスクトップ上のmyWebsiteフォルダに保存します。
HTMLドキュメントにdesign.html、CSSドキュメントに stylesheet.cssという名前を付けます。
無題の HTMLドキュメント
このガイドの後半で、HTMLドキュメントからCSSドキュメントへの リンクを作成(つまり、スタイルを適用)します。これにより、複数のHTMLドキュメントのスタイルを 1つの CSSファイルから制御できるようになります。
無題の CSSドキュメント
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse7
Webデザインをデスクトップからそのままブラウザへ
ここで、Photoshopから書き出すアセットを保存するためのフォルダを作成します。 ルートフォルダを整理するため、Web用の画像を imagesフォルダにコピーします。
サブフォルダを作成するには、ルートフォルダを選択して右クリック *し、「新規フォルダ」を選択します。
* Macintoshでシングルボタンマウスを使用している場合は、Controlキーを押しながらクリックします。
Dreamweaverのファイルパネル
ファイルパネルで 新規フォルダを作成するには、ルートフォルダを選択して右クリックし、「新規フォルダ」を 選択します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse8
Webデザインをデスクトップからそのままブラウザへ
imagesフォルダ内に 2つのフォルダを作成し、それぞれnavigation および templateという名前を付けます。 ファイルパネルが下の図のように表示されたら、Photoshopの画像を追加する準備が完了します。
Dreamweaverのファイルパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse9
Webデザインをデスクトップからそのままブラウザへ
Photoshopデザインのスライス処理デザインを選択したら、Web製作用ファイルの準備を開始できます。 最初に、このレイアウトを HTMLで再作成するために必要なレイアウト構造を決定する必要があります。
composite.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse10
Webデザインをデスクトップからそのままブラウザへ
Webレイアウトでは、印刷とは若干異なるアプローチが必要です。印刷の場合、デザイナーは通常、グラフィックまたはテキストフレームになるボックスやフレームを クリック&ドラッグして、サイズの変更、移動、拡大、縮小を行い、目的のレイアウトになるよう調整します。スタイルシートは、主にテキストの書式設定に使用されます。
これに対して CSSベースのWebレイアウトでは、カスケードスタイルシート(CSS)と呼ばれるスタイルシートを使用して、テキストの書式設定とレイアウトを定義および 制御します。したがって、テキストおよびグラフィックのエレメントを追加するには、事前にレイアウトの「ボックス」を CSSドキュメント内に定義しておく必要があります。
デザインを決定する場合、 CSSドキュメントを使用して 作成する必要がある領域、 つまり「ボックス」の 定義から始めます。
これがレイアウトプランとしての 役割を果たします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse11
Webデザインをデスクトップからそのままブラウザへ
レイアウトプランができたら、CSSファイル内で定義する必要のある領域に 名前を付けてサイズを設定します。
このプランを利用して、Photoshopファイルを分割してグラフィックを より効率的に作成することもできます。
760ピクセル
.bannerArea
100ピクセル 550ピクセル
.banner_left .banner_right
760ピクセル
450ピクセル 230ピクセル
.content_left .content_right
.contentArea
760ピクセル
.footerArea
300ピクセル 300ピクセル
.footer_left .footer_right
.bannerArea
.contentArea
.footerArea
ブラウザウィンドウ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse12
Webデザインをデスクトップからそのままブラウザへ
これらのエレメントは、 分離して個別のファイル を作成するグラフィック 領域です。
複合デザインファイルは、デザインの特定部分だけを取り出した個別のファイル *に分割することをお勧めします。 これにより、製作中はデザインの特定部分だけを処理できます。
* これらの個別のデザインファイルは、アセットとしてダウンロードできます。
Composite.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse13
Webデザインをデスクトップからそのままブラウザへ
logo.psd
background.psd
navigation.psdevents_promo.psd
page_areas.psd
page_areas.psdファイルは、ページの基本デザインを作成する際に使用するデザインエレメントが分離されたものです。 events_promo.psdファイルには、サイドバーの広告に使用するアートワークが含まれています。 また、タブはnavigation.psdファイルに、背景の画像はbackground.psdファイルに、ロゴは logo.psdファイルに含まれています。
Composite.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse14
Webデザインをデスクトップからそのままブラウザへ
左下の図の領域は、ページの基本デザインの構成を示しています。これらの領域は、HTMLで DIVを使用してコード化されます。 DIVは HTMLファイルで区域を示すタグで、これを使用してエレメントをグループ化したり、背景、テキストフォーマット、ボーダー、レイアウト位置などのプロパティを ファイルに割り当てることができます。これらのプロパティは CSSファイルで定義され、classまたは id 属性を使用して、HTMLドキュメント内の DIVに関連付けられます。
CSSおよび DIVを作成する前に、その DIVで使用する背景グラフィックを作成します。 page_areas.psdファイルには、ページの基本デザインの作成に必要な分離されたアートワークが含まれています。
.bannerArea
.contentArea
.footerArea
ブラウザウィンドウ
page_areas.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse15
Webデザインをデスクトップからそのままブラウザへ
page_areas.psdファイルを開きます。Photoshopのスライスツールは、デザイン編集に使用する元の Photoshopファイルを損うことなく、 そのファイル内の領域を定義して別のファイルに保存できる画期的なツールです。
スライス *を作成するには、スライスツールを選択して、カンバス上をクリックして領域を描画します。作成した領域は、カンバス上の任意の 場所に移動、サイズ変更、および配置することができます。スライスを作成してもアートワークにはまったく影響がありません。 また、スライスをダブルクリックすると、スライスオプションダイアログボックスが表示されます。
* このファイルでは、既にスライスが作成されています。
このドキュメントでは、 3つのスライスが定義 済みです。各スライスの 幅は760ピクセルです。 レイアウトプランで定義 した 3つの主要 DIVで 使用できるように、書き 出せる状態になってい ます。
page_areas.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse16
Webデザインをデスクトップからそのままブラウザへ
スライスには、スライスに名前を付けたり、サイズを設定するオプションが含まれています。 スライスに慣れてくると、URLの定義、Altやメッセージテキストの設定など、Photoshopのより高度なオプションを利用できます。 Photoshopを使用してHTMLを記述する場合、これらのオプションをすべてHTMLにコーディングできます。
ここでは、Photoshopで画像の保存だけを行い、HTMLの作業は Dreamweaverで行います。
page_areas.psd
Photoshopのスライスオプションダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse17
Webデザインをデスクトップからそのままブラウザへ
スライスを定義して名前を付け、Photoshopのファイルメニューから「Webおよびデバイス用に保存」を選択します。 スライス選択ツールで、Shiftキーを押しながら 3つのスライスを選択し、「保存」をクリックします。
2つのスライスの下に市松模様が表示されていることに注意してください。これらのファイルは GIF形式で保存されるため、透明領域が含まれています。
マットカラーは、ページの背景カラーに一致するように設定されています。したがって、透明領域は背景に「溶け込んで」いるように表示されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse18
Webデザインをデスクトップからそのままブラウザへ
次に、「選択したスライス」を選択して、サイトのルートの imagesフォルダ内の templateフォルダにスライスを保存します。 その際、出力設定をカスタマイズして、保存するスライスファイルの命名方法を指定できます。
「選択したスライス」を選択すると、Webおよびデバイス用に保存ダイアログボックスの、スライス選択ツールで選択したファイルだけが保存されます。それ以外を選択した場合、Photoshopではドキュメント内の各スライスがそれぞれ 1ファイルに保存されます。
「設定」で「その他」を設定すると、Photoshopの出力設定ダイアログボックスが表示されます。このダイアログボックスでは、スライスを書き出す際に各スライスファイルの命名方法をカスタマイズできます。ここでは、スライス名とファイル拡張子を付けてファイルを保存します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse19
Webデザインをデスクトップからそのままブラウザへ
ここまで、templatesフォルダ内に、page_top.gif、page_tile.gif、 およびpage_bottom.gifという名前の 3ファイルを保存しました。
page_areas.psd
page_top.gif
page_tile.gif
page_bottom.gif
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse20
Webデザインをデスクトップからそのままブラウザへ
Photoshopでbackground.psd を開きます。 次に、ファイルメニューから「Webおよびデバイス用に保存」を選択し、 templateフォルダ内に GIF形式で保存します。
background.psd
background.gif
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse21
Webデザインをデスクトップからそのままブラウザへ
ページ全般のデザイン用 CSSルールの定義Webでスタイルシートを使用する利点の 1つは、1つのスタイルシートに必要に応じてHTMLファイルをいくつでもリンクできるという点です。これは、1つのファイルのみを使用して、Webサイト全体のデザインおよびレイアウトを制御できるという点で、非常に有効な方法です。したがって、この方法を利用するには、CSSファイルをHTMLファイルにリンクする必要があります。
HTMLファイルとCSSファイルには既に名前を付けてあるので、ドキュメントウィンドウのタブにはそれらのファイル名が表示されています。HTMLファイルdesign.htmlを選択して、このファイルを最前面に表示します。次に、テキストメニュー/ CSSスタイル/スタイルシートを添付を選択します。
HTMLファイルとCSSファイルを開いていることを示すタブ
デスクトップのmyWebsiteフォルダで、 stylesheet.cssを選択します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse22
Webデザインをデスクトップからそのままブラウザへ
開いた状態の HTMLファイルとCSSファイル Dreamweaverの CSSパネル
CSSドキュメントで、コンテンツのレンダリング方法をブラウザに指定するルールを作成していきます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse23
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverの CSSパネル
Dreamweaverの新規 CSSルールダイアログボックス
新規 CSSルール ボタン
CSSパネルの下部にある、新規 CSSルールボタンをクリックします。CSSルールを作成して名前を付けます。 ここでは、「セレクタタイプ」で「クラス」を選択し、「名前」に「bannerArea」と入力します。「OK」をクリックします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse24
Webデザインをデスクトップからそのままブラウザへ
次の画面では、Dreamweaverでルールによる表示方法を定義するためのインターフェイスが表示されます。 「ボックス」カテゴリで、「幅」を「760ピクセル」、「高さ」を「140」(Photoshopの page_topスライスと同じサイズ)に設定し、「クリア」を「両方」に設定します。 「クリア」設定は、このオブジェクトの隣(左または右)に配置される項目に関する設定です。「クリア」を「両方」に設定すると、1行にはこの項目のみが表示されます。 この設定により、ページの 3つの主領域の DIVは上下に配置されます。
Dreamweaverの CSSルールダイアログボックス
Dreamweaverの CSSパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse25
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverの挿入パネル
HTMLページ
Dreamweaverの DIVタグを挿入ダイアログボックス
DIVタグを 挿入ボタン
Dreamweaverのdesign.htmlファイルに戻り、挿入ツールバーからDIVタグを挿入ボタンを選択します。 新しい DIVに適用する CSSルールとして、「クラス」に「bannerArea」を選択します。 これによってDIVタグが配置され、DIVのプロパティが CSSルールに関連付けられているとおりに視覚的に表示されます。 DIV内にはプレースホルダテキストも含まれており、これを使用してコンテンツを正しい位置に配置することができます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse26
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverの CSSパネル
Dreamweaverの CSSルールダイアログボックス
最初の DIVを配置したら、CSSパネルで CSSルールの bannerAreaをダブルクリックして編集します。 「背景」カテゴリを選択して、「背景イメージ」フィールドの横にある「参照」ボタンをクリックします。 myWebsite/images/templateフォルダから、page_top.gifファイルを選択します。 「繰り返し」を「リピートなし」に、「水平位置」と「垂直位置」をどちらも「0」に設定します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse27
Webデザインをデスクトップからそのままブラウザへ
「OK」(または「適用」)をクリックすると、背景の DIVに適用されるグラフィックが表示されます。 また、初期設定されたテキストも表示されるので、この新しい DIVに情報を配置する際に役立ちます。
現時点では、初期設定テキストをそのまま配置しておき、さらに 2つの DIVを作成します。 1つはコンテンツ領域用、もう1つはフッタ領域用です。
HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse28
Webデザインをデスクトップからそのままブラウザへ
CSSパネルに戻り、さらに 2つのクラスを作成します。1つはコンテンツ領域用、もう1つはフッタ領域用です。 CSSパネル下部の新規 CSSルールボタンをクリックし、以下の設定を入力します。
contentAreaの CSSルールの「ボックス」カテゴリで、「幅」を「760ピクセル」に設定し、「高さ」は空欄のままにしておきます。次に「クリア」を「両方」に設定します。 「背景イメージ」をpage_tile.gif に設定し、「繰り返し」を「Y軸にリピート」(縦方向のみに繰り返し)に設定します。
新規 CSSルール ボタン
Dreamweaverの CSSルールダイアログボックス
Dreamweaverの CSSルール定義ダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse29
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
注意:新しい DIV を挿入する前に、 ページ内 (bannerArea の DIV の外側) を
クリックして、 テキストの挿入箇所が前回作業した DIV の内側にならないように
しておきます。
DIVタグを 挿入ボタン
25ページ以降の、DIVの挿入手順を繰り返します。 bannerAreaの DIVの外側に DIVを挿入し、contentAreaクラスを割り当てます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse30
Webデザインをデスクトップからそのままブラウザへ
HTMLページ
背景イメージのpage_tile.gifを「Y軸にリピート」に 設定すると、Webブラウザでは、DIVの高さいっぱいまで イメージが縦方向に「並べて表示」されます。
新しい DIVでは、page_tile.gif が縦方向(Y軸方向)にのみ繰り返して表示されます。 この DIV内に配置されるコンテンツの量が増えると、領域の拡大に合わせてイメージの繰り返し回数が増加します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse31
Webデザインをデスクトップからそのままブラウザへ
CSSパネルに戻り、さらに 2つのクラスを作成します。1つはコンテンツ領域用、もう1つはフッタ領域用です。 CSSパネル下部の新規 CSSルールボタンをクリックし、以下の設定を入力します。
新規 CSSルール ボタン
Dreamweaverの新規 CSSルールダイアログボックス
Dreamweaverの CSSルール定義ダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse32
Webデザインをデスクトップからそのままブラウザへ
25ページと同じ手順に従い、DIVを挿入して footerAreaクラスを割り当てます。
HTMLページ
DIVタグを 挿入ボタン
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse33
Webデザインをデスクトップからそのままブラウザへ
ここで、Webブラウザでページを見てみましょう。ファイル/ブラウザでプレビューを選択し、使用するWebブラウザを選択します。 ドキュメントをまだ保存していない場合は、このとき、プレビューを行うには各ドキュメントを保存する必要があることを示すメッセージが表示されます。
Dreamweaverでの HTMLページ
Webブラウザでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse34
Webデザインをデスクトップからそのままブラウザへ
次に、作成したすべての DIVをページの中央に揃えます。これを行うには、コードの知識が多少必要です。 Dreamweaverでdesign.htmlファイルを開き、「コード」ボタンをクリックしてソースコードを表示します。
Dreamweaverでの HTMLページのコード表示
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse35
Webデザインをデスクトップからそのままブラウザへ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div align="center">
<div class="bannerArea">Class "bannerArea" の内容がここに入ります</div> <div class="contentArea">Class "contentArea" の内容がここに入ります</div> <div class="footerArea">Class "footerArea" の内容がここに入ります</div>
</div>
</body> </html>
2つの HTMLタグを手動で入力する必要があります。bannerAreaの DIVタグの上に 1番目のタグを入力します。 2番目のタグは、footerAreaの DIVを終了する終了 DIVタグの下に入力します。
これらのタグを入力したら、ブラウザで再度プレビューします。Webページ上のデザインがWebブラウザの中央に表示されます。
1番目のタグは、 align属性を centerに設定した DIVタグです。
2番目のタグで、 1番目の DIVタグを 閉じます。
HTMLの記述について詳しくは、http://www.w3.org/MarkUp/Guide/を参照してください。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse36
Webデザインをデスクトップからそのままブラウザへ
テキストもDIV内で同様に中央配置されていますが、そのままにしてかまいません。 これら 3つの主領域 DIVの内部に、さらに DIVを追加していくためです。
Webブラウザでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse37
Webデザインをデスクトップからそのままブラウザへ
コンテンツ領域のレイアウト用 CSSルールの作成ここで、ページ領域内のエレメントの配置に必要な DIVを作成する必要があります。2つのクラスを作成し、1番目のクラスにはbanner_leftという名前を付けて、「幅」を 「100ピクセル」、「フロート」を「左」に設定します。2番目のクラスにはbanner_rightという名前を付けて、「幅」を「550ピクセル」、「フロート」を「右」に設定します。
新規 CSSルール ボタン
Dreamweaverの CSSルール定義ダイアログボックス
「ボックス」カテゴリでは、「幅」を設定するだけではなく、各クラスの「フロート」も設定する必要があります。
この設定により、このクラスが割り当てられているDIVタグでは、周囲のコンテンツが回り込んで表示されます(Adobe InDesign®のテキストの回り込み設定と同様の効果です)。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse38
Webデザインをデスクトップからそのままブラウザへ
DIVに必要なクラスの作成を完了するため、さらに 4つの CSSクラスルールを作成します。 これらのルールには、それぞれ content_left、content_right、footer_left、および footer_rightという名前を付けます。 新しい各クラスには、下の図の設定を使用します。
Dreamweaverの CSSルール定義ダイアログボックス
新規 CSSルールボタン
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse39
Webデザインをデスクトップからそのままブラウザへ
CSSパネルに、作成したすべてのルールが表示されます。
CSSパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse40
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
バナー領域の設定と位置の指定
ここで、メインページ領域の DIV内に DIVを追加します。最初に、bannerAreaの DIV内に配置されているDreamweaverの初期設定テキストにある、 「入ります」の末尾の「す」の後ろにテキストカーソルを置きます。挿入パネルで、DIVタグを挿入ボタンをクリックし(25ページと同じ手順)、 クラスメニューで banner_leftを選択します。前と同じ場所にテキストカーソルを置き、別の DIVを追加して banner_rightを割り当てます。
このテキストの後ろにテキストカーソルを置いて、新しいバナーのDIVを追加します。 DIVタグを
挿入ボタン
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse41
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
バナーの DIVを 2つ追加したら、ページは Dreamweaverで次の画像のように表示されます。 ここで、挿入した bannerAreaの DIVから、初期設定テキストを削除できます。
banner_leftの DIVは 左へフロートします。
banner_rightの DIVは 右へフロートします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse42
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
ここで、残りの DIVを追加してレイアウトを完了します。 contentAreaの DIV内で、「入ります」の末尾の「す」の後ろにテキストカーソルを置き、2つの DIVを挿入します。 これらの DIVに、それぞれ content_left および content_right を割り当てます。
次に、footerAreaの DIVについて同じ操作を行い、footer_left および footer_right 用の DIVを追加します。 これらの DIVを配置したら、contentAreaと footerAreaの初期設定テキストを削除します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse43
Webデザインをデスクトップからそのままブラウザへ
Photoshopソースファイルが表示されている、 OSのウィンドウ
ソースファイルのフォルダから、logo.psdファイルを Dreamweaverに直接ドラッグします。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse44
Webデザインをデスクトップからそのままブラウザへ
ロゴの追加と位置の指定
Dreamweaverのイメージプレビューには、元のファイルのコピーをWebで使用できる形式で保存するオプションがあります。 「形式」に「GIF」を選択します。次に透過色のスポイトを選択して、イメージ内のピンク色をサンプル抽出し、背景のピンク色を透過色に設定します。 このファイルに logo.gifという名前を付けて、myWebsite/images/templateフォルダに保存します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse45
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
ロゴを DIVに配置したら、初期設定テキストを削除します。この段階で、レイアウトを CSSで制御するメリットが少しずつわかってきます。 ロゴを正しい位置に配置するために、CSSパネルで banner_leftの CSSルールをダブルクリックします。 この DIVには、オブジェクトの「外側」に適用される「マージン」設定を追加する必要があります。
最初に、「すべて同一」チェックボックスをオフにして、「マージン」の「上」を「34ピクセル」に、「左」を「15ピクセル」に設定します。 「適用」をクリックすると、ダイアログボックスを閉じなくても後ろのページに変更内容が表示されます。作業が完了したら、「OK」をクリックします。
Dreamweaverの CSSルール定義ダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse46
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverのイメージプレビューダイアログで 透過色を設定したため、GIFファイルが透過状態で 表示されます。
バナー上の正しい位置にロゴが配置されました。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse47
Webデザインをデスクトップからそのままブラウザへ
page_areas.psd
最上部のナビゲーショングラフィックの作成と位置の指定
navigationファイルを開きます。スライスがあらかじめ設定され、レイヤーカンプが作成されています。 レイヤーカンプの「normal」を選択し、次にファイル/Webおよびデバイス用に保存を選択します。
Photoshopの レイヤーカンプパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse48
Webデザインをデスクトップからそのままブラウザへ
このダイアログボックスでスライスツールを選択し、Shiftキーを押しながら 3つのスライスを選択します。 「マット」をピンクに設定し、GIF形式を選択して、「保存」をクリックします。
* この場合は、レイヤーカンプで「over」を選んだ画像です。
Webおよびデバイス用に保存ダイアログボックス
「マット」では、透過色に溶け込む 領域のブレンドカラーを指定します。 このカラーをピンクに設定することで、 これらのタブが背景カラーにきれいに 溶け込んでいきます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse49
Webデザインをデスクトップからそのままブラウザへ
最適化ファイルを別名で保存ダイアログボックス
最適化ファイルを別名で保存ダイアログボックスで、スライスに「選択したスライス」を選択し、設定に「その他」を選択します。 プルダウンメニューから「ファイルの保存」を選択し、「ファイルの名前」の最初の項目を「スライス名」に設定します。 次に「OK」をクリックし、この画像をmyWebsite/images/navigationフォルダに保存します。
次に、レイヤーカンプの「over」を有効にし、「ファイルの名前」の 2番目の項目を「_over」に設定(このとおりに入力)してファイルを保存します。 最後に、レイヤーカンプの「down」を有効にし、「ファイルの名前」の 2番目の項目を「_down」に設定(このとおりに入力)します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse50
Webデザインをデスクトップからそのままブラウザへ
page_areas.psd(レイヤーカンプ ̶ down)
page_areas.psd(レイヤーカンプ ̶ over)
page_areas.psd(レイヤーカンプ ̶ normal)
tab_events.gif tab_magazine.gif tab_scholarships.gif
tab_events_over.gif tab_magazine_over.gif tab_scholarships_over.gif
tab_events_down.gif tab_magazine_down.gif tab_scholarships_down.gif
3セットのボタンを書き出して、各セットにレイヤーカンプに基づく名前を付けると、 Webサイトのnavigationフォルダ内に 9つのグラフィックが作成されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse51
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverのファイルパネル
Dreamweaverに戻ると、新しいナビゲーショングラフィックがnavigationフォルダに表示されています。 tab_events.gif を banner_rightの DIVにドラッグします。
* 新しいナビゲーショングラフィック ファイルが表示されない場合、Dreamweaverを再起動してください。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse52
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverのファイルパネル
残りの「通常状態」のタブのグラフィックを banner_rightの DIVにドラッグし、初期設定テキストを削除します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse53
Webデザインをデスクトップからそのままブラウザへ
CSSルールの 編集ボタン
タブをバナーのグラフィック上に正確に配置するには CSSパネルから banner_rightの CSSをダブルクリックか、 または編集ボタンアイコンをクリックして「ブロック」カテゴリの「テキストの行揃え」を「右」に、 「余白」の「右」を「15ピクセル」に、「マージン」の「上」を「62ピクセル」に設定します。
Dreamweaverの CSSルール定義ダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse54
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
banner_rightの CSSルールを変更すると、タブが所定の位置に移動します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse55
Webデザインをデスクトップからそのままブラウザへ
フッタ領域の設定と位置の指定フッタの DIVにテキストを追加します。 footer_leftの DIVに「©Aquo Energy Drink, Ltd.」を追加し、footer_rightの DIVに「Privacy Policy • Contact Us」を追加します。
Dreamweaverでの HTMLページ
フッタの DIVに追加したテキスト
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse56
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverのプロパティパネル
新しいフッタテキストのリンクを作成します。「Privacy Policy」を選択し、プロパティパネルの「リンク」フィールドに「#」記号を追加します。これによって文字列自体へのセルフリンクが 作成され、リンクのフォーマットが表示されます。
「Contact Us」のリンクについては、電子メールアドレスの前に「mailto:」と入力して、電子メールのリンクを作成します。これにより、Webブラウザでこのリンクをクリックすると、ユーザの電子メールソフトウェアが起動します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse57
Webデザインをデスクトップからそのままブラウザへ
CSSルールの 編集ボタン
footer_leftと footer_rightの CSSルールを変更して、ページ領域のグラフィックの下にこれらのテキストを配置し、 テキストの整列位置を設定します。
Dreamweaverの CSSルール定義ダイアログボックス
Dreamweaverの CSSルール定義ダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse58
Webデザインをデスクトップからそのままブラウザへ
footer_leftと footer_rightの CSSルールを変更すると、DIVとテキストが所定の位置に移動し、テキストが整列されます。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse59
Webデザインをデスクトップからそのままブラウザへ
ブラウザでプレビューすると、page_tile.gif が、footerAreaの DIVで指定されているpage_bottom.gif のグラフィックのすぐ上までリピートされていません。 一部のWebブラウザでは、背景が内部の DIVの中だけで表示され、DIV(この場合は contentArea)自体の高さいっぱいまで表示されないためです。
ブラウザで、ページ内に並べて表示するグラフィックを contentAreaの DIVの高さいっぱいに表示するには、clear=”all” の属性を付けた brタグを、 contentAreaの DIVの終了 DIVタグ(</div>)の前に追加します。
<div class="contentArea"> <div class="content_left">Class "content_left" の内容がここに入ります</div> <div class="content_right">Class "content_right" の内容がここに入ります</div>
<br clear="all" />
</div>
背景イメージのpage_tile.gifを contentAreaの DIV全体に表示するには、clear=”all”の属性を付けた brタグを、contentAreaの DIVの終了DIVタグの前に追加します。
contentAreaの開始 DIVタグ
contentAreaの終了 DIVタグ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse60
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverのプロパティパネル
コンテンツのフォーマットプレースホルダテキストを content_leftの DIVに追加します。まず、見出しの「Beyond the Drink」を最上部に入力し、プロパティパネルの フォーマットプルダウンの「見出し 1」を割り当てます。次に、テキスト内の単語をいくつか選択し、文字列自体へのセルフリンクを作成します (56ページの「Privacy Policy」リンクと同様の手順)。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse61
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
CSSルールの 編集ボタン
以下の設定を content_leftの CSSクラス定義に 追加します。
ブロック > テキストの行揃え = 左
ボックス > マージン -左 = 30ピクセル
content_leftの CSSルールを編集して、テキストの行揃えを左に設定し、DIVをページ領域に配置します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse62
Webデザインをデスクトップからそのままブラウザへ
広告用アニメーションの作成および配置Photoshop Extendedで events_promo.psdを開き、次にウィンドウメニューからアニメーションパネルを開きます。ドキュメントタイムライン設定を開き、アニメーションの
「デュレーション」を「30秒」に、「フレームレート」を「12」に設定します。
ドキュメントタイムライン設定パネル
アニメーションパネルのパレットメニューから、 ドキュメントタイムライン設定ダイアログボックスを開きます。
promo_events.psd
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse63
Webデザインをデスクトップからそのままブラウザへ
タイムラインパネルで、写真のレイヤーおよび 3つのテキストレイヤーの三角形をクリックして、レイヤーのプロパティを開きます。
Photoshopのタイムラインパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse64
Webデザインをデスクトップからそのままブラウザへ
Photoshopのタイムラインパネル
アニメーションの開始時間に現在の時間インジケータがある状態で、「photo」と「May 26」レイヤーを画面の右外に移動します。 「Whistler」テキストレイヤーを、画面の左外に移動します。レイヤーパネルで、「Learn more」テキストレイヤーの不透明度を「0 %」に設定します。
これが、アニメーションの開始状態です。
現在の時間インジケータ。 これを左右にドラッグすることによって、 アニメーションの経過が表示されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse65
Webデザインをデスクトップからそのままブラウザへ
Photoshopのタイムラインパネル
現在の時間インジケータを「04f」マークに移動し、「photo」レイヤーの下にある 「位置」設定の横のストップウォッチをクリックします。
ストップウォッチをクリックすると、 キーフレームが作成され、 この設定についての変更だけが アニメーションに記録されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse66
Webデザインをデスクトップからそのままブラウザへ
Photoshopのタイムラインパネル
現在の時間インジケータを「01:00f」マークに移動します。 次に移動ツールを選択してレイヤーパネルで「photo」レイヤーを選択し、 このレイヤーを左に移動して最終的な位置に配置します。
新しい位置を表す新しいキーフレームが自動的に作成されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse67
Webデザインをデスクトップからそのままブラウザへ
Photoshopのタイムラインパネル
Photoshopのタイムラインパネル
現在の時間インジケータを「01:04f」マークに移動し、「May 26」および「Whistler」レイヤーの下にある「位置」設定のストップウォッチをクリックします。 次に、現在の時間インジケータを「02:00f」マークに移動し、各レイヤーの文字を所定の位置に移動します。
これらの新しい位置を表す新しいキーフレームが自動的に作成されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse68
Webデザインをデスクトップからそのままブラウザへ
Photoshopのタイムラインパネル
Photoshopのタイムラインパネル
現在の時間インジケータを「02:02f」マークに移動し、「Learn more」レイヤーの下にある「不透明度」設定のストップウォッチをクリックします。 次に、現在の時間インジケータをタイムラインの最終位置(02:11f)に移動して、「Learn more」レイヤーを選択し、レイヤーパネルで不透明度を「100 %」に設定します。
新しいキーフレームが自動的に作成され、新しい不透明度設定が適用されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse69
Webデザインをデスクトップからそのままブラウザへ
ファイル/Webおよびデバイス用に保存を選択し、GIFファイル形式を選択します。 次に、「ループオプション」プルダウンメニューから「一度」を選択します。このファイルをmyWebsite/imagesフォルダに保存します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse70
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
CSSルールの 編集ボタン
以下の設定を content_rightの CSSクラス定義に 追加します。
ブロック > テキストの行揃え = 左
ボックス > 余白 -右 = 15ピクセル
events_promo.gif を content_rightの DIVにドラッグし挿入します。そして、初期設定テキストを削除します。 content_rightの CSSルールを編集し、レイアウト内のアニメーション広告の位置を指定します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse71
Webデザインをデスクトップからそのままブラウザへ
Webページの背景およびマルチカラーのリンクの設定CSSによってレイアウトの DIVを配置したので、次に HTMLタグのスタイルと リンクの動作を決定する CSSルールをいくつか作成します。
新しい CSSルールを作成し、「セレクタタイプ」から「タグ」を選択します。 「タグ」プルダウンメニューから、「body」を選択します。 各カテゴリについて、以下の設定を入力します。
新規 CSSルールボタン
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse72
Webデザインをデスクトップからそのままブラウザへ
新規 CSSルール ボタン
h1タグのルールを作成します。
サイズ > 24ピクセル
ウエイト > 標準
カラー > #0097E7(青)
aタグのルールを作成します。
カラー > #DE037B(ピンク)
2つの新しい CSSルールを作成し、「セレクタタイプ」で「タグ」を選択して、「タグ」プルダウンメニューから「H1」と「a」を選択します。 以下の設定を入力します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse73
Webデザインをデスクトップからそのままブラウザへ
新しい CSSルールを作成し、「セレクタタイプ」で「詳細設定(IDおよび擬似クラス)」を選択して、「セレクタ」プルダウンメニューから「a:hover」を選択します。 このタグは、リンク上にカーソルが重なったときの状態(マウスオーバーの状態)を制御します。
「タイプ」の設定で、背景カラーの最上部にある青色をスポイトで選択します。
a:hoverタグのルールを作成します。
カラー > #0097E7(バナーの青)
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse74
Webデザインをデスクトップからそのままブラウザへ
次に、footer_rightの DIV内のすべてのリンクを、aタグの CSSルールで定義されているピンクではなく、黒で表示するための CSSルールを作成します。 このルールを作成するには、footer_rightの DIV内のすべての aタグを黒で表示する、詳細設定クラスを作成する必要があります。
この詳細設定クラスに「footer_right a」(「a」の前にスペースあり)という名前を付けて、footer_rightクラス(DIV)内の aタグだけを対象にします。 次に、「footer_right a:hover」という名前の詳細設定クラスを作成し、footer_rightのリンクをポイントしたときだけの状態を作成します。
新規 CSSルール ボタン
.footer_right aタグのルールを作成します。
カラー > #000000 (黒)
.footer_right a:hoverタグのルールを作成します。
カラー > #0097E7(青)
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse75
Webデザインをデスクトップからそのままブラウザへ
Webブラウザでの HTMLページ
Webブラウザで、ページの仕上がりをプレビューします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse76
Webデザインをデスクトップからそのままブラウザへ
.footer_rightタグのルールを変更します。
マージン -右 > なし(空白のまま) 余白 -右 > 15ピクセル
Dreamweaverのブラウザ互換性チェックパネル
ブラウザの互換性チェックDreamweaverで「ページのチェック」のプルダウンメニューから 「ブラウザの互換チェック」を実行し、このデザインができるだけ 多くのブラウザで表示されることを確認します。
ファイル/ページのチェック/ブラウザの互換性の順に選択します。
Internet Explorer 6で発生する可能性のある問題が検出されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse77
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverのブラウザ互換性チェックパネル
アドビ システムズ社の「CSS Advisor」Webサイト発生する可能性のある問題について詳しくは、アドビ システムズ社の「CSS Advisor」Webサイトを参照してください。このサイトにアクセスするには、バグの説明の下に表示されているリンクをクリックします。
Internet Explorerでの問題を修正するには、footer_rightの CSSルールを変更し、マージン -右の設定を削除して、代わりに余白 -右を「15ピクセル」に設定します。
アドビ システムズ社の「CSS Advisor」Webサイト
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse78
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverのバリデータパネル
Dreamweaverのリファレンスパネル
HTMLコードの検証次に、ページのコードを検証します。ファイル/バリデート/マークアップの順に選択します。バリデータレポートでは、WebのW3C標準と照らし 合わせてページのコードをチェックします。このレポートはブラウザの互換性レポートとは異なり、一般的なWeb標準に関するテストを行います。 各ブラウザがそれらの標準に準拠しているかどうかをテストするものではありません。このページでは、エラーや警告は見つかりませんでした。
Dreamweaverには、リファレンスパネルも用意されています。 このパネルでは、HTML、CSS、ASP、JavaScript、PHP、SQL、XML、および XSLTに関する、O’Reillyの文献からの情報を直接参照できます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse79
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverのファイルパネル
ページをテンプレートとして保存
ページを検証し、最新ブラウザと互換性があることを確認したら、 このファイルを、新しいページの作成に使用できるテンプレートとして保存します。
ファイル/テンプレートとして保存を選択し、「design」という名前を付けて「保存」をクリックします。 ファイルパネルに Templatesという名前の新しいフォルダが作成され、現在開いているファイルがdesign.dwtという名前で保存されます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse80
Webデザインをデスクトップからそのままブラウザへ
新しいページを作成する前に、ナビゲーションタブを、これから作成するページ名にリンクします。こうしておくと、手順を前に戻してすべてのリンクを手動で追加せずに済みます。
banner_rightの DIV内のグラフィック、tab_events.gifを選択し、プロパティパネルの「リンク」フィールドで次のように入力します。
../events.html
2つのドットとスラッシュは、Templatesフォルダの場所に関係なく、メイン(ルート)フォルダ内のファイルへのリンクであることを示します。残りのタブについて、以下のリンクを作成します。
../magazine.html
../scholarships.html
Dreamweaverでのテンプレートページ
ナビゲーション用のリンクとロールオーバーの作成
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse81
Webデザインをデスクトップからそのままブラウザへ
編集可能領域の追加ここで、テンプレート内に編集可能領域を作成し、各ページのコンテンツをカスタマイズできるようにします。
banner_rightの DIV(またはその中のコンテンツ)を選択し、 挿入/テンプレートオブジェクト/編集可能領域の順に選択します。
Dreamweaverでのテンプレートページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse82
Webデザインをデスクトップからそのままブラウザへ
この新しい編集可能領域に「navigation」という名前を付けます。
編集可能領域をさらに 2つ作成します。まず、content_leftの DIVを選択して、「content」という名前の編集可能領域を挿入します。 次に content_rightの DIVを選択して、「sidebar」という名前の編集可能領域を挿入します。
作業が完了したら、design.dwt テンプレートファイルを閉じます。
Dreamweaverでのテンプレートページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse83
Webデザインをデスクトップからそのままブラウザへ
テンプレートを使用した新しいページの作成
このテンプレートを使用して新しいWebページを作成します。 ファイル/新規を選択し、新規ドキュメントダイアログボックスで「テンプレートから作成」を選択します。 次に、現在作成中のサイトである「Aquo Microsite」を選択し、「design」テンプレートを選択します。「作成」をクリックします。
Dreamweaverの新規ドキュメントダイアログボックス
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse84
Webデザインをデスクトップからそのままブラウザへ
テンプレートから新しいページが作成されます。 編集可能領域と、右上隅の「テンプレート」という表示に注意してください。
ページの基になっているテンプレート
編集可能領域
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse85
Webデザインをデスクトップからそのままブラウザへ
「design」テンプレートを使用して、HTMLファイルをさらに 3つ作成します。 ファイル名を、それぞれ index.html、events.html、magazine.html、および scholarships.htmlと 付けて保存します。
Dreamweaverでの HTMLページ
Dreamweaverのファイルパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse86
Webデザインをデスクトップからそのままブラウザへ
Webサイト内のすべてのリンクのチェック最上部のナビゲーションタブに追加したリンクに対応するファイルが作成されたので、 Dreamweaverのリンクチェックを実行し、すべてのリンクが適切に設定されていることを確認します。
ファイル/ページのチェック/リンクの順に選択します。
Dreamweaverのリンクチェックパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse87
Webデザインをデスクトップからそのままブラウザへ
それぞれのページの見出しを書き換えて保存し、Webブラウザでリンクをプレビューします。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse88
Webデザインをデスクトップからそのままブラウザへ
ナビゲーションの「ダウン」状態の設定各ページについて、そのページが表示されている(「ダウン」)状態を表す、タブのグラフィックを設定します。 events.html ページに切り替え、banner_rightの DIV内の tab_events.gifファイルを選択します。 次に、プロパティパネルの「ソース」フィールドの横にあるファイルの指定アイコンをクリックし、ファイルパネル内の tab_events_down.gif にドラッグします。
この操作を、magazine.html ページとscholarships.html ページについても繰り返し行います。
Dreamweaverでの HTMLページDreamweaverのファイルパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse89
Webデザインをデスクトップからそのままブラウザへ
テンプレートを使用した全般的な変更Templatesフォルダ内のdesign.dwtファイルを開きます。 ロゴを選択し、プロパティパネルの「リンク」フィールドの横にあるファイルの指定アイコンをクリックして、 index.html(トップページ)ファイルにドラッグします。
Dreamweaverの ファイルパネル
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse90
Webデザインをデスクトップからそのままブラウザへ
テンプレートファイルを変更したら、ファイル/保存を選択します。 このテンプレートを使用しているすべてのWebファイルが更新されることを示すメッセージが表示されるので、「更新」をクリックします。
更新が完了したら、ファイル/すべてを保存を選択し、Webブラウザでページをプレビューします。 タブをクリックすると該当するページが表示され、すべてのページでロゴをクリックするとトップページに戻ることを確認してください。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse91
Webデザインをデスクトップからそのままブラウザへ
表データの読み込みevents.html ページに切り替え、見出しに「Events」と入力します。 プレースホルダテキストを数行削除し、ファイル/読み込み/表データの順に選択します。 ソースアセットフォルダ内の aquo_events_data.csvファイルを選択します。
「区切り」を「タブ」に設定し、「データに適合」を選択します。 また、「セル内余白」に「5」、「セル内間隔」に「0」、 「ボーダー」に「1」をそれぞれ入力して、「OK」をクリックします。
Dreamweaverでの HTMLページ
「参照」ボタンを使用して、表データのテキストファイルを指定します。.txt、.csv、および .dat形式のファイルを使用できます。また、区切り文字には、タブ、カンマ、ピリオドを含む任意の文字を指定できます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse92
Webデザインをデスクトップからそのままブラウザへ
データに基づいて、テーブルオブジェクトが作成されます。 テーブルの幅を右にドラッグして、コンテンツ領域いっぱいに表示されるよう調整できます。
最上行のセル内にテキストカーソルを置いてドラッグし、最上行のすべてのセルを選択します。この場合、テーブルの幅を 441ピクセルにしてあります。 次に、プロパティパネルの「ヘッダ」の右隣の「背景」の横にあるカラーチップをクリックして、ライトグレーを選択します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse93
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ
Dreamweaverの プロパティパネル
Dreamweaverの CSSパネル
最初の列の最上行にあるテキスト「DATE」を選択します。 次に、プロパティパネルでボールドを指定し、カラーを青に設定します。 Dreamweaverはこのスタイルの CSSルールを直ちに作成し、作成した CSSルールをこのドキュメントにのみ適用します。
見出し「COUNTRY」および「ACTIVITY」を選択し、 プロパティパネルのスタイルメニューで「style1」CSSクラスを割り当てます。
プロパティパネルで選択した設定に基づき、CSSルールが自動的に作成されます。
この CSSルールが適用されるのはこのドキュメントのみですが、このルールをstylesheet.cssドキュメントにドラッグすると、すべてのページで使用できるようになります。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse94
Webデザインをデスクトップからそのままブラウザへ
イメージマップの作成
次に、世界各地の支社の所在地を示すマップを、このページに追加します。さらに、このイメージに複数のリンクを追加してイメージマップを作成し、 各地域の支社にアクセスできるようにします。最初に、ソースアセットフォルダのworld_map.psdファイルを、events.html ページのサイドバー領域にドラッグします。 このイメージを選択して、プロパティパネルの「マップ」フィールドに「worldmap」という名前を付けます。
Dreamweaverでの HTMLページ
イメージマップとして 機能するグラフィックには、 名前を付ける必要があります。
マップ領域の形状 を指定するための ホットスポットツール
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse95
Webデザインをデスクトップからそのままブラウザへ
Dreamweaverでの HTMLページ Dreamweaverでの HTMLページ
プロパティパネルで矩形ホットスポットツールを選択し、world_map.jpgグラフィック上に、ヨーロッパを囲む四角形を描画します。 描画が完了したら、プロパティパネルの「リンク」フィールドにセルフリンク(「#」記号)を入力します。 同様にアジアとオーストラリアについて、2つの四角形を描画し、それらの「リンク」フィールドにセルフリンクを入力します。 最後に、多角形ホットスポットツールを選択し、頂点ごとにクリックしてアメリカ合衆国の周囲に不規則な図形を作成して、プロパティパネルにセルフリンクを入力します。
* 後に、各イベントのページを作成し、ホットスポットのリンク、日付からのリンクを張りましょう。ここでは、その作業は省略させていただきます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse96
Webデザインをデスクトップからそのままブラウザへ
Dreamweaver内でのフォーマット設定とイメージの調整scholarships.html ページに切り替え、サイドバー内の events_promo.gifグラフィックを削除して、この場所にプレースホルダテキストを追加します。 Photoshopでgroup_photo.psd を開き、すべてを選択してクリップボードにコピーします。 Dreamweaverに切り替え、プレースホルダテキストの開始位置にテキストカーソルを置き、編集/ペーストを選択します。
Dreamweaverのイメージプレビューダイアログボックスが表示され、クリップボードにコピーしたコンテンツが表示されます。切り抜きツールを選択し、青いシャツを着た黒髪の男性を切り抜きます。切り抜きがうまくいったら「OK」をクリックします。このファイルに counselor.jpgという名前を付けて、myWebsitre/Imagesフォルダに保存します。
イメージプレビューダイアログ ボックスには切り抜きツールがあり、 イメージを切り抜いてWeb用の グラフィックとして保存できます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse97
Webデザインをデスクトップからそのままブラウザへ
サイドバーの counselor.jpgグラフィックを選択し、プロパティパネルの明るさおよびコントラストボタンをクリックします。 「明るさ」を「+25」、「コントラスト」を「10」に設定します。「OK」をクリックすると、変更がイメージファイルに反映されます。
コンテンツ領域に、見出しとして「Scholarships」と入力します。
Dreamweaverでの HTMLページ
Dreamweaverでは、ページ上の イメージを選択すると、プロパティ パネルでイメージの画質向上や 修整を行うための各種ツールを 使用できます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse98
Webデザインをデスクトップからそのままブラウザへ
サイドバーの counselor.jpgグラフィックを選択し、プロパティパネルの行揃えメニューで「左」をクリックします。 イメージを選択したまま、修正メニューから「クイックタグ編集」を選択します。 この項目に必要な HTMLコードのみが記述されたウィンドウが表示されます。
「align="left"」の後に、「style="margin-right: 10px;"」と入力します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse99
Webデザインをデスクトップからそのままブラウザへ
サイドバーのテキストを選択し、テキストカラーのチップをクリックしたまま、 counselor.jpgグラフィックの背景から濃い赤茶色を選択します。
Dreamweaverでの HTMLページ
カラーチップからカラーを選択する場合、 モニタ上の任意の場所の任意のカラーをスポイトで抽出することができます。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse100
Webデザインをデスクトップからそのままブラウザへ
Webフォームの作成ここで、顧客が雑誌購読を申し込むためのフォームをWebページに追加します。まずプレースホルダテキストを削除し、見出しとして「Magazine」と入力します。 次の行に「Subscribe Today」と入力し、プロパティパネルのフォーマットメニューで「見出し 2」を割り当てます。次に、CSSパネルで「h1」CSSルールを右クリックして、 「複製」を選択します。このルール名を「h2」に変更し、ルールを編集して、テキストを「ボールド」に、フォントサイズを「18ピクセル」に設定します。
挿入パネルの「フォーム」タブから、見出しの下にフォーム項目を 挿入します。プロパティパネルの「アクション」フィールドに、 セルフリンク(「#」記号)を入力します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse101
Webデザインをデスクトップからそのままブラウザへ
フォーム項目の内側に、挿入パネルからテーブルオブジェクトを挿入します。 「テーブルの幅」に「430ピクセル」、「行」に「7」、「列」に「2」、「ボーダー」に「1」、「セル内余白」に「5」、 「セル内間隔」に「0」をそれぞれ入力します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse102
Webデザインをデスクトップからそのままブラウザへ
左上のセルをクリックし、挿入メニューからフォーム/ラジオボタングループを挿入します。 グループの名前に「issues」と入力し、最初のボタンのラベルを「12 Issues」、値を「12」に設定します。 次に 2番目のボタンのラベルを「24 Issues」、値を「24」に設定します。
「OK」をクリックします。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse103
Webデザインをデスクトップからそのままブラウザへ
ラジオボタングループの下の 4つのセルに、それぞれ挿入の「フォーム」タブからテキストフィールドのアイコンをクリックし「テキストフィールド」を追加します。 1番目のテキストに「fullname」、2番目に「street」、3番目に「city」、4番目に「zip」という名前を付けます。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse104
Webデザインをデスクトップからそのままブラウザへ
次のセルに、リスト /メニュー項目を挿入します。IDに「howhear」と入力します。挿入した項目を選択して、プロパティパネルから「リスト値」ボタンを選択します。 1番目の「項目ラベル」を「Choose one...」に、値を「none」に設定します。追加ボタン(+)をクリックして、新しいリスト項目を追加します。 この項目に「Newspaper」という名前を付けて、値を「newspaper」に設定します。さらに 2つの項目を追加して、1つ目のラベルを「Television」、 値を「tv」に設定し、次の項目のラベルを「Magazine Ad」、値を「magazine」に設定します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse105
Webデザインをデスクトップからそのままブラウザへ
挿入パネルから、左下のセルにボタンを挿入します。 IDに「Submit」と入力します。 ボタンを選択して、「値」フィールドに「Sign me up!」と入力します。
Dreamweaverでの HTMLページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse106
Webデザインをデスクトップからそのままブラウザへ
92ページと同じ方法でセルの左の列を選択し、プロパティパネルの「背景色」カラーチップからライトグレーを選択します。 同様に、「セルのボーダーカラー」カラーチップから同じライトグレーを選択します。横メニューから「右」を選択します。
右側の列の各セルには、隣接するフォーム項目に対応する 説明を入力します。
• Subscription • Full Name • Street Address • City/State • Zip/Postal code • How did you hear about us?
これでフォームが完成しました。
Dreamweaverでの HTMLページ
テーブルのセル内のコンテンツを整列するには、この整列ツールを使用します。
背景とボーダーのカラーを 設定するには、このカラー チップを使用します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse107
Webデザインをデスクトップからそのままブラウザへ
Photoshop Extendedでのアニメーションの作成次に、購読申し込みページ用の簡単なアニメーションを作成します。Photoshopでmagazine_pages.psdファイルを開きます。ウィンドウメニューからアニメーションパネルを開き、ドキュメントタイムライン設定を設定します(62ページを参照)。次に、Shiftキーを押しながら上から4つのレイヤーを選択し、選択ツールを使用している状態でオプションパネルの整列ボタンの「上端揃え」、「左端揃え」をクリックし、それぞれのレイヤーの画像をカンバスの左上に配置します。
Photoshopのアニメーションパネル
Photoshopのレイヤーパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse108
Webデザインをデスクトップからそのままブラウザへ
レイヤーをカンバスの左上に揃えた状態で、レイヤーパネルで、「page a」、「page b」、および「page c」の「不透明度」を「0 %」に設定します。
アニメーションパネルで、各レイヤーの三角形をクリックしてレイヤーのオプションを開き、現在の時間インジケータを「01:00f」に移動します。 「cover」レイヤーの下にある「位置」設定のストップウォッチと、各ページレイヤーの「位置」および「不透明度」設定のストップウォッチをクリックします。
Photoshopのアニメーションパネル
Photoshopのレイヤーパネル
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse109
Webデザインをデスクトップからそのままブラウザへ
Photoshopのアニメーションパネル
Photoshopのレイヤーパネル
最初のキーフレームを設定したら、現在の時間インジケータをタイムラインの最終位置(02:11f)に移動します。「cover」レイヤーをカンバスの右端に移動します。 Photoshopで 2番目の「位置」キーフレームが作成されます。「page a」レイヤーを選択して「不透明度」を「100 %」に設定します。 次にこのレイヤーを右下に移動し、表紙ページの左下にずらして配置します。
「page b」レイヤーを選択して「不透明度」を「100 %」に設定します。 次にこのレイヤーを右下に移動し、「page a」レイヤーの左下にずらして配置します。
「page c」レイヤーを選択して「不透明度」を「100 %」に設定します。 次にこのレイヤーを下に移動し、「page b」レイヤーの左下にずらして配置します。
このキーフレームを設定したら、ファイル/Web用およびデバイス用に保存を選択します。GIFファイル形式を選択し、「ループオプション」を「一度」に設定して、magazine_pages.gifという名前を付けてmyWebsite/imagesフォルダに保存します。
Dreamweaverで、このアニメーションを magazine.htmlページのサイドバー内に配置します。
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse110
Webデザインをデスクトップからそのままブラウザへ
WebサイトのプレビューWebブラウザで、出来上がったWebサイトをプレビューします。
トップページ
Magazineページ
Eventsページ
Scholarshipsページ
アドビ システムズ 株式会社 〒 141-0032東京都品川区大崎 1-11-2 ゲートシティ大崎イーストタワー www.adobe.com/jp Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.comAdobe、Adobeロゴ、Photoshop、Dreamweaver、および InDesignは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。 その他すべての商標は、それぞれの権利帰属者の所有物です。
© 2007 Adobe Systems Incorporated. All rights reserved. Printed in Japan.
著者(本文、Webデザイン共):Chris Converse111
Webデザインをデスクトップからそのままブラウザへ
Webサイトのサーバへのアップロードこれらのファイルは、Webサーバにいつでも送信できる状態になっています。 デスクトップ上のmyWebsiteフォルダ内のすべてのファイルは、Webサーバに送信して世界中に公開することができます。
Webサーバにアクセスできる場合は、サイトウィザード(2 ページ以降参照)の手順 4で、接続設定を入力します。Webサーバの設定に戻るには、サイト/サイトの管理を選択し、現在作業中のサイトを選択して「編集」をクリックします。クリックすると、サイトウィザード(2ページ以降)の先頭に戻ります。その後、ファイルパネルのリモートホストに接続ボタンをクリックして、ファイルをアップロードするボタンをクリックし、ファイルをアップロードします。
Dreamweaverのファイルパネル
リモートホストに 接続
コンピュータから Webサーバにファイルを アップロードする
リモートホストと ローカルファイル間のファイルの同期
ファイルパネルでの、 リモートファイルと ローカルファイルの 分割表示の切り替え
リモートホストに接続された状態でのファイルパネル