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

http://www.adobe.com/jp/special/creativesuite/portal/pdf/source_files.zip





サイトの設定

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

新規サイトウィザード：手順 1 サイトに「Aquo Microsite」という名前を指定します。

新規サイトウィザード：手順 2 このガイドでは、HTML、CSS、および JavaScriptの作成のみを行います。したがって、ここでサーバテクノロジーを指定する必要はありません。





サイト定義ウィザードの手順を引き続き行います。

新規サイトウィザード：手順 3 デスクトップ上のmyWebsiteフォルダを選択します。

新規サイトウィザード：手順 4 このガイドではWebサーバにログインしません。したがって、接続の種類を「なし」に設定します。





ここまでの手順が完了したら、ファイルパネルに、デスクトップのmyWebsiteフォルダの内容が表示されます。

ファイルパネルには、ルートフォルダ内のすべてのアセットが表示されます。myWebsiteフォルダにファイルを追加すると、追加されたファイルはファイルパネルにも表示されます。

新規サイトウィザード：手順 5 サマリーを確認して、「終了」をクリックします。





Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「HTML」を、レイアウト列から「<なし >」を選択して、「作成」をクリックします。

Dreamweaverの新規ドキュメントダイアログボックス

このガイドでは、空白ページからCSSベースのレイアウトを作成する方法を学習します。ただし、Dreamweaverには作成済みのテンプレートが多数付属しています。

これらのテンプレートには、デザイナーがWebで一般的に使用するレイアウトが多数含まれています。

また、このガイドの学習を終えた後で、これらのテンプレートをさらに変更して将来のプロジェクトで使用することができます。





Dreamweaverで、ファイルメニューから「新規」を選択し、ページタイプ列から「CSS」を選択して、「作成」をクリックします。現在、2つの無題ドキュメントが開いています。これらのファイルを、デスクトップ上のmyWebsiteフォルダに保存します。

HTMLドキュメントにdesign.html、CSSドキュメントに stylesheet.cssという名前を付けます。

無題の HTMLドキュメント

このガイドの後半で、HTMLドキュメントからCSSドキュメントへのリンクを作成（つまり、スタイルを適用）します。これにより、複数のHTMLドキュメントのスタイルを 1つの CSSファイルから制御できるようになります。

無題の CSSドキュメント





ここで、Photoshopから書き出すアセットを保存するためのフォルダを作成します。ルートフォルダを整理するため、Web用の画像を imagesフォルダにコピーします。

サブフォルダを作成するには、ルートフォルダを選択して右クリック *し、「新規フォルダ」を選択します。

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

Dreamweaverのファイルパネル

ファイルパネルで新規フォルダを作成するには、ルートフォルダを選択して右クリックし、「新規フォルダ」を選択します。





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






Photoshopデザインのスライス処理デザインを選択したら、Web製作用ファイルの準備を開始できます。最初に、このレイアウトを HTMLで再作成するために必要なレイアウト構造を決定する必要があります。

composite.psd





Webレイアウトでは、印刷とは若干異なるアプローチが必要です。印刷の場合、デザイナーは通常、グラフィックまたはテキストフレームになるボックスやフレームをクリック＆ドラッグして、サイズの変更、移動、拡大、縮小を行い、目的のレイアウトになるよう調整します。スタイルシートは、主にテキストの書式設定に使用されます。

これに対して CSSベースのWebレイアウトでは、カスケードスタイルシート（CSS）と呼ばれるスタイルシートを使用して、テキストの書式設定とレイアウトを定義および制御します。したがって、テキストおよびグラフィックのエレメントを追加するには、事前にレイアウトの「ボックス」を CSSドキュメント内に定義しておく必要があります。

デザインを決定する場合、 CSSドキュメントを使用して作成する必要がある領域、つまり「ボックス」の定義から始めます。

これがレイアウトプランとしての役割を果たします。





レイアウトプランができたら、CSSファイル内で定義する必要のある領域に名前を付けてサイズを設定します。

このプランを利用して、Photoshopファイルを分割してグラフィックをより効率的に作成することもできます。

760ピクセル

.bannerArea

100ピクセル 550ピクセル

.banner_left .banner_right

760ピクセル


.content_left .content_right

.contentArea

760ピクセル

.footerArea


.footer_left .footer_right

.bannerArea

.contentArea

.footerArea

ブラウザウィンドウ





これらのエレメントは、分離して個別のファイルを作成するグラフィック領域です。

複合デザインファイルは、デザインの特定部分だけを取り出した個別のファイル *に分割することをお勧めします。これにより、製作中はデザインの特定部分だけを処理できます。

* これらの個別のデザインファイルは、アセットとしてダウンロードできます。

Composite.psd





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





左下の図の領域は、ページの基本デザインの構成を示しています。これらの領域は、HTMLで DIVを使用してコード化されます。 DIVは HTMLファイルで区域を示すタグで、これを使用してエレメントをグループ化したり、背景、テキストフォーマット、ボーダー、レイアウト位置などのプロパティをファイルに割り当てることができます。これらのプロパティは CSSファイルで定義され、classまたは id 属性を使用して、HTMLドキュメント内の DIVに関連付けられます。

CSSおよび DIVを作成する前に、その DIVで使用する背景グラフィックを作成します。 page_areas.psdファイルには、ページの基本デザインの作成に必要な分離されたアートワークが含まれています。

.bannerArea

.contentArea

.footerArea

ブラウザウィンドウ

page_areas.psd





page_areas.psdファイルを開きます。Photoshopのスライスツールは、デザイン編集に使用する元の Photoshopファイルを損うことなく、そのファイル内の領域を定義して別のファイルに保存できる画期的なツールです。

スライス *を作成するには、スライスツールを選択して、カンバス上をクリックして領域を描画します。作成した領域は、カンバス上の任意の場所に移動、サイズ変更、および配置することができます。スライスを作成してもアートワークにはまったく影響がありません。また、スライスをダブルクリックすると、スライスオプションダイアログボックスが表示されます。

* このファイルでは、既にスライスが作成されています。

このドキュメントでは、 3つのスライスが定義済みです。各スライスの幅は760ピクセルです。レイアウトプランで定義した 3つの主要 DIVで使用できるように、書き出せる状態になっています。

page_areas.psd





スライスには、スライスに名前を付けたり、サイズを設定するオプションが含まれています。スライスに慣れてくると、URLの定義、Altやメッセージテキストの設定など、Photoshopのより高度なオプションを利用できます。 Photoshopを使用してHTMLを記述する場合、これらのオプションをすべてHTMLにコーディングできます。

ここでは、Photoshopで画像の保存だけを行い、HTMLの作業は Dreamweaverで行います。

page_areas.psd

Photoshopのスライスオプションダイアログボックス





スライスを定義して名前を付け、Photoshopのファイルメニューから「Webおよびデバイス用に保存」を選択します。スライス選択ツールで、Shiftキーを押しながら 3つのスライスを選択し、「保存」をクリックします。

2つのスライスの下に市松模様が表示されていることに注意してください。これらのファイルは GIF形式で保存されるため、透明領域が含まれています。

マットカラーは、ページの背景カラーに一致するように設定されています。したがって、透明領域は背景に「溶け込んで」いるように表示されます。





次に、「選択したスライス」を選択して、サイトのルートの imagesフォルダ内の templateフォルダにスライスを保存します。その際、出力設定をカスタマイズして、保存するスライスファイルの命名方法を指定できます。

「選択したスライス」を選択すると、Webおよびデバイス用に保存ダイアログボックスの、スライス選択ツールで選択したファイルだけが保存されます。それ以外を選択した場合、Photoshopではドキュメント内の各スライスがそれぞれ 1ファイルに保存されます。

「設定」で「その他」を設定すると、Photoshopの出力設定ダイアログボックスが表示されます。このダイアログボックスでは、スライスを書き出す際に各スライスファイルの命名方法をカスタマイズできます。ここでは、スライス名とファイル拡張子を付けてファイルを保存します。





ここまで、templatesフォルダ内に、page_top.gif、page_tile.gif、およびpage_bottom.gifという名前の 3ファイルを保存しました。

page_areas.psd

page_top.gif

page_tile.gif

page_bottom.gif





Photoshopでbackground.psd を開きます。次に、ファイルメニューから「Webおよびデバイス用に保存」を選択し、 templateフォルダ内に GIF形式で保存します。

background.psd

background.gif





ページ全般のデザイン用 CSSルールの定義Webでスタイルシートを使用する利点の 1つは、1つのスタイルシートに必要に応じてHTMLファイルをいくつでもリンクできるという点です。これは、1つのファイルのみを使用して、Webサイト全体のデザインおよびレイアウトを制御できるという点で、非常に有効な方法です。したがって、この方法を利用するには、CSSファイルをHTMLファイルにリンクする必要があります。

HTMLファイルとCSSファイルには既に名前を付けてあるので、ドキュメントウィンドウのタブにはそれらのファイル名が表示されています。HTMLファイルdesign.htmlを選択して、このファイルを最前面に表示します。次に、テキストメニュー／ CSSスタイル／スタイルシートを添付を選択します。

HTMLファイルとCSSファイルを開いていることを示すタブ

デスクトップのmyWebsiteフォルダで、 stylesheet.cssを選択します。





開いた状態の HTMLファイルとCSSファイル Dreamweaverの CSSパネル

CSSドキュメントで、コンテンツのレンダリング方法をブラウザに指定するルールを作成していきます。





Dreamweaverの CSSパネル

Dreamweaverの新規 CSSルールダイアログボックス

新規 CSSルールボタン

CSSパネルの下部にある、新規 CSSルールボタンをクリックします。CSSルールを作成して名前を付けます。ここでは、「セレクタタイプ」で「クラス」を選択し、「名前」に「bannerArea」と入力します。「OK」をクリックします。





次の画面では、Dreamweaverでルールによる表示方法を定義するためのインターフェイスが表示されます。「ボックス」カテゴリで、「幅」を「760ピクセル」、「高さ」を「140」（Photoshopの page_topスライスと同じサイズ）に設定し、「クリア」を「両方」に設定します。「クリア」設定は、このオブジェクトの隣（左または右）に配置される項目に関する設定です。「クリア」を「両方」に設定すると、1行にはこの項目のみが表示されます。この設定により、ページの 3つの主領域の DIVは上下に配置されます。

Dreamweaverの CSSルールダイアログボックス






Dreamweaverの挿入パネル

HTMLページ

Dreamweaverの DIVタグを挿入ダイアログボックス

DIVタグを挿入ボタン

Dreamweaverのdesign.htmlファイルに戻り、挿入ツールバーからDIVタグを挿入ボタンを選択します。新しい DIVに適用する CSSルールとして、「クラス」に「bannerArea」を選択します。これによってDIVタグが配置され、DIVのプロパティが CSSルールに関連付けられているとおりに視覚的に表示されます。 DIV内にはプレースホルダテキストも含まれており、これを使用してコンテンツを正しい位置に配置することができます。







最初の DIVを配置したら、CSSパネルで CSSルールの bannerAreaをダブルクリックして編集します。「背景」カテゴリを選択して、「背景イメージ」フィールドの横にある「参照」ボタンをクリックします。 myWebsite/images/templateフォルダから、page_top.gifファイルを選択します。「繰り返し」を「リピートなし」に、「水平位置」と「垂直位置」をどちらも「0」に設定します。





「OK」（または「適用」）をクリックすると、背景の DIVに適用されるグラフィックが表示されます。また、初期設定されたテキストも表示されるので、この新しい DIVに情報を配置する際に役立ちます。

現時点では、初期設定テキストをそのまま配置しておき、さらに 2つの DIVを作成します。 1つはコンテンツ領域用、もう1つはフッタ領域用です。

HTMLページ





CSSパネルに戻り、さらに 2つのクラスを作成します。1つはコンテンツ領域用、もう1つはフッタ領域用です。 CSSパネル下部の新規 CSSルールボタンをクリックし、以下の設定を入力します。

contentAreaの CSSルールの「ボックス」カテゴリで、「幅」を「760ピクセル」に設定し、「高さ」は空欄のままにしておきます。次に「クリア」を「両方」に設定します。「背景イメージ」をpage_tile.gif に設定し、「繰り返し」を「Y軸にリピート」（縦方向のみに繰り返し）に設定します。



Dreamweaverの CSSルール定義ダイアログボックス





Dreamweaverでの HTMLページ

注意：新しい DIV を挿入する前に、ページ内（bannerArea の DIV の外側）を

クリックして、テキストの挿入箇所が前回作業した DIV の内側にならないように

しておきます。


25ページ以降の、DIVの挿入手順を繰り返します。 bannerAreaの DIVの外側に DIVを挿入し、contentAreaクラスを割り当てます。





HTMLページ

背景イメージのpage_tile.gifを「Y軸にリピート」に設定すると、Webブラウザでは、DIVの高さいっぱいまでイメージが縦方向に「並べて表示」されます。

新しい DIVでは、page_tile.gif が縦方向（Y軸方向）にのみ繰り返して表示されます。この DIV内に配置されるコンテンツの量が増えると、領域の拡大に合わせてイメージの繰り返し回数が増加します。





CSSパネルに戻り、さらに 2つのクラスを作成します。1つはコンテンツ領域用、もう1つはフッタ領域用です。 CSSパネル下部の新規 CSSルールボタンをクリックし、以下の設定を入力します。


Dreamweaverの新規 CSSルールダイアログボックス






25ページと同じ手順に従い、DIVを挿入して footerAreaクラスを割り当てます。

HTMLページ






ここで、Webブラウザでページを見てみましょう。ファイル／ブラウザでプレビューを選択し、使用するWebブラウザを選択します。ドキュメントをまだ保存していない場合は、このとき、プレビューを行うには各ドキュメントを保存する必要があることを示すメッセージが表示されます。


Webブラウザでの HTMLページ





次に、作成したすべての DIVをページの中央に揃えます。これを行うには、コードの知識が多少必要です。 Dreamweaverでdesign.htmlファイルを開き、「コード」ボタンをクリックしてソースコードを表示します。

Dreamweaverでの HTMLページのコード表示





<!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/を参照してください。

http://www.w3.org/MarkUp/Guide/





テキストもDIV内で同様に中央配置されていますが、そのままにしてかまいません。これら 3つの主領域 DIVの内部に、さらに DIVを追加していくためです。






コンテンツ領域のレイアウト用 CSSルールの作成ここで、ページ領域内のエレメントの配置に必要な DIVを作成する必要があります。2つのクラスを作成し、1番目のクラスにはbanner_leftという名前を付けて、「幅」を「100ピクセル」、「フロート」を「左」に設定します。2番目のクラスにはbanner_rightという名前を付けて、「幅」を「550ピクセル」、「フロート」を「右」に設定します。



「ボックス」カテゴリでは、「幅」を設定するだけではなく、各クラスの「フロート」も設定する必要があります。

この設定により、このクラスが割り当てられているDIVタグでは、周囲のコンテンツが回り込んで表示されます（Adobe InDesign®のテキストの回り込み設定と同様の効果です）。





DIVに必要なクラスの作成を完了するため、さらに 4つの CSSクラスルールを作成します。これらのルールには、それぞれ content_left、content_right、footer_left、および footer_rightという名前を付けます。新しい各クラスには、下の図の設定を使用します。







CSSパネルに、作成したすべてのルールが表示されます。

CSSパネル






バナー領域の設定と位置の指定

ここで、メインページ領域の DIV内に DIVを追加します。最初に、bannerAreaの DIV内に配置されているDreamweaverの初期設定テキストにある、「入ります」の末尾の「す」の後ろにテキストカーソルを置きます。挿入パネルで、DIVタグを挿入ボタンをクリックし（25ページと同じ手順）、クラスメニューで banner_leftを選択します。前と同じ場所にテキストカーソルを置き、別の DIVを追加して banner_rightを割り当てます。

このテキストの後ろにテキストカーソルを置いて、新しいバナーのDIVを追加します。 DIVタグを

挿入ボタン






バナーの DIVを 2つ追加したら、ページは Dreamweaverで次の画像のように表示されます。ここで、挿入した bannerAreaの DIVから、初期設定テキストを削除できます。

banner_leftの DIVは左へフロートします。

banner_rightの DIVは右へフロートします。






ここで、残りの DIVを追加してレイアウトを完了します。 contentAreaの DIV内で、「入ります」の末尾の「す」の後ろにテキストカーソルを置き、2つの DIVを挿入します。これらの DIVに、それぞれ content_left および content_right を割り当てます。

次に、footerAreaの DIVについて同じ操作を行い、footer_left および footer_right 用の DIVを追加します。これらの DIVを配置したら、contentAreaと footerAreaの初期設定テキストを削除します。





Photoshopソースファイルが表示されている、 OSのウィンドウ

ソースファイルのフォルダから、logo.psdファイルを Dreamweaverに直接ドラッグします。






ロゴの追加と位置の指定

Dreamweaverのイメージプレビューには、元のファイルのコピーをWebで使用できる形式で保存するオプションがあります。「形式」に「GIF」を選択します。次に透過色のスポイトを選択して、イメージ内のピンク色をサンプル抽出し、背景のピンク色を透過色に設定します。このファイルに logo.gifという名前を付けて、myWebsite/images/templateフォルダに保存します。






ロゴを DIVに配置したら、初期設定テキストを削除します。この段階で、レイアウトを CSSで制御するメリットが少しずつわかってきます。ロゴを正しい位置に配置するために、CSSパネルで banner_leftの CSSルールをダブルクリックします。この DIVには、オブジェクトの「外側」に適用される「マージン」設定を追加する必要があります。

最初に、「すべて同一」チェックボックスをオフにして、「マージン」の「上」を「34ピクセル」に、「左」を「15ピクセル」に設定します。「適用」をクリックすると、ダイアログボックスを閉じなくても後ろのページに変更内容が表示されます。作業が完了したら、「OK」をクリックします。







Dreamweaverのイメージプレビューダイアログで透過色を設定したため、GIFファイルが透過状態で表示されます。

バナー上の正しい位置にロゴが配置されました。





page_areas.psd

最上部のナビゲーショングラフィックの作成と位置の指定

navigationファイルを開きます。スライスがあらかじめ設定され、レイヤーカンプが作成されています。レイヤーカンプの「normal」を選択し、次にファイル／Webおよびデバイス用に保存を選択します。

Photoshopのレイヤーカンプパネル





このダイアログボックスでスライスツールを選択し、Shiftキーを押しながら 3つのスライスを選択します。「マット」をピンクに設定し、GIF形式を選択して、「保存」をクリックします。

* この場合は、レイヤーカンプで「over」を選んだ画像です。

Webおよびデバイス用に保存ダイアログボックス

「マット」では、透過色に溶け込む領域のブレンドカラーを指定します。このカラーをピンクに設定することで、これらのタブが背景カラーにきれいに溶け込んでいきます。





最適化ファイルを別名で保存ダイアログボックス

最適化ファイルを別名で保存ダイアログボックスで、スライスに「選択したスライス」を選択し、設定に「その他」を選択します。プルダウンメニューから「ファイルの保存」を選択し、「ファイルの名前」の最初の項目を「スライス名」に設定します。次に「OK」をクリックし、この画像をmyWebsite/images/navigationフォルダに保存します。

次に、レイヤーカンプの「over」を有効にし、「ファイルの名前」の 2番目の項目を「_over」に設定（このとおりに入力）してファイルを保存します。最後に、レイヤーカンプの「down」を有効にし、「ファイルの名前」の 2番目の項目を「_down」に設定（このとおりに入力）します。





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つのグラフィックが作成されます。







Dreamweaverに戻ると、新しいナビゲーショングラフィックがnavigationフォルダに表示されています。 tab_events.gif を banner_rightの DIVにドラッグします。

* 新しいナビゲーショングラフィックファイルが表示されない場合、Dreamweaverを再起動してください。







残りの「通常状態」のタブのグラフィックを banner_rightの DIVにドラッグし、初期設定テキストを削除します。





CSSルールの編集ボタン

タブをバナーのグラフィック上に正確に配置するには CSSパネルから banner_rightの CSSをダブルクリックか、または編集ボタンアイコンをクリックして「ブロック」カテゴリの「テキストの行揃え」を「右」に、「余白」の「右」を「15ピクセル」に、「マージン」の「上」を「62ピクセル」に設定します。







banner_rightの CSSルールを変更すると、タブが所定の位置に移動します。





フッタ領域の設定と位置の指定フッタの DIVにテキストを追加します。 footer_leftの DIVに「©Aquo Energy Drink, Ltd.」を追加し、footer_rightの DIVに「Privacy Policy • Contact Us」を追加します。


フッタの DIVに追加したテキスト






Dreamweaverのプロパティパネル

新しいフッタテキストのリンクを作成します。「Privacy Policy」を選択し、プロパティパネルの「リンク」フィールドに「#」記号を追加します。これによって文字列自体へのセルフリンクが作成され、リンクのフォーマットが表示されます。

「Contact Us」のリンクについては、電子メールアドレスの前に「mailto:」と入力して、電子メールのリンクを作成します。これにより、Webブラウザでこのリンクをクリックすると、ユーザの電子メールソフトウェアが起動します。






footer_leftと footer_rightの CSSルールを変更して、ページ領域のグラフィックの下にこれらのテキストを配置し、テキストの整列位置を設定します。







footer_leftと footer_rightの CSSルールを変更すると、DIVとテキストが所定の位置に移動し、テキストが整列されます。






ブラウザでプレビューすると、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タグ







コンテンツのフォーマットプレースホルダテキストを content_leftの DIVに追加します。まず、見出しの「Beyond the Drink」を最上部に入力し、プロパティパネルのフォーマットプルダウンの「見出し 1」を割り当てます。次に、テキスト内の単語をいくつか選択し、文字列自体へのセルフリンクを作成します（56ページの「Privacy Policy」リンクと同様の手順）。







以下の設定を content_leftの CSSクラス定義に追加します。

ブロック > テキストの行揃え = 左

ボックス > マージン -左 = 30ピクセル

content_leftの CSSルールを編集して、テキストの行揃えを左に設定し、DIVをページ領域に配置します。





広告用アニメーションの作成および配置Photoshop Extendedで events_promo.psdを開き、次にウィンドウメニューからアニメーションパネルを開きます。ドキュメントタイムライン設定を開き、アニメーションの

「デュレーション」を「30秒」に、「フレームレート」を「12」に設定します。

ドキュメントタイムライン設定パネル

アニメーションパネルのパレットメニューから、ドキュメントタイムライン設定ダイアログボックスを開きます。

promo_events.psd





タイムラインパネルで、写真のレイヤーおよび 3つのテキストレイヤーの三角形をクリックして、レイヤーのプロパティを開きます。

Photoshopのタイムラインパネル






アニメーションの開始時間に現在の時間インジケータがある状態で、「photo」と「May 26」レイヤーを画面の右外に移動します。「Whistler」テキストレイヤーを、画面の左外に移動します。レイヤーパネルで、「Learn more」テキストレイヤーの不透明度を「0 ％」に設定します。

これが、アニメーションの開始状態です。

現在の時間インジケータ。これを左右にドラッグすることによって、アニメーションの経過が表示されます。






現在の時間インジケータを「04f」マークに移動し、「photo」レイヤーの下にある「位置」設定の横のストップウォッチをクリックします。

ストップウォッチをクリックすると、キーフレームが作成され、この設定についての変更だけがアニメーションに記録されます。






現在の時間インジケータを「01:00f」マークに移動します。次に移動ツールを選択してレイヤーパネルで「photo」レイヤーを選択し、このレイヤーを左に移動して最終的な位置に配置します。

新しい位置を表す新しいキーフレームが自動的に作成されます。







現在の時間インジケータを「01:04f」マークに移動し、「May 26」および「Whistler」レイヤーの下にある「位置」設定のストップウォッチをクリックします。次に、現在の時間インジケータを「02:00f」マークに移動し、各レイヤーの文字を所定の位置に移動します。

これらの新しい位置を表す新しいキーフレームが自動的に作成されます。







現在の時間インジケータを「02:02f」マークに移動し、「Learn more」レイヤーの下にある「不透明度」設定のストップウォッチをクリックします。次に、現在の時間インジケータをタイムラインの最終位置（02:11f）に移動して、「Learn more」レイヤーを選択し、レイヤーパネルで不透明度を「100 ％」に設定します。

新しいキーフレームが自動的に作成され、新しい不透明度設定が適用されます。





ファイル／Webおよびデバイス用に保存を選択し、GIFファイル形式を選択します。次に、「ループオプション」プルダウンメニューから「一度」を選択します。このファイルをmyWebsite/imagesフォルダに保存します。







以下の設定を content_rightの CSSクラス定義に追加します。

ブロック > テキストの行揃え = 左

ボックス > 余白 -右 = 15ピクセル

events_promo.gif を content_rightの DIVにドラッグし挿入します。そして、初期設定テキストを削除します。 content_rightの CSSルールを編集し、レイアウト内のアニメーション広告の位置を指定します。





Webページの背景およびマルチカラーのリンクの設定CSSによってレイアウトの DIVを配置したので、次に HTMLタグのスタイルとリンクの動作を決定する CSSルールをいくつか作成します。

新しい CSSルールを作成し、「セレクタタイプ」から「タグ」を選択します。「タグ」プルダウンメニューから、「body」を選択します。各カテゴリについて、以下の設定を入力します。







h1タグのルールを作成します。

サイズ > 24ピクセル

ウエイト > 標準

カラー > #0097E7（青）

aタグのルールを作成します。

カラー > #DE037B（ピンク）

2つの新しい CSSルールを作成し、「セレクタタイプ」で「タグ」を選択して、「タグ」プルダウンメニューから「H1」と「a」を選択します。以下の設定を入力します。






新しい CSSルールを作成し、「セレクタタイプ」で「詳細設定（IDおよび擬似クラス）」を選択して、「セレクタ」プルダウンメニューから「a:hover」を選択します。このタグは、リンク上にカーソルが重なったときの状態（マウスオーバーの状態）を制御します。

「タイプ」の設定で、背景カラーの最上部にある青色をスポイトで選択します。

a:hoverタグのルールを作成します。

カラー > #0097E7（バナーの青）





次に、footer_rightの DIV内のすべてのリンクを、aタグの CSSルールで定義されているピンクではなく、黒で表示するための CSSルールを作成します。このルールを作成するには、footer_rightの DIV内のすべての aタグを黒で表示する、詳細設定クラスを作成する必要があります。

この詳細設定クラスに「footer_right a」（「a」の前にスペースあり）という名前を付けて、footer_rightクラス（DIV）内の aタグだけを対象にします。次に、「footer_right a:hover」という名前の詳細設定クラスを作成し、footer_rightのリンクをポイントしたときだけの状態を作成します。


.footer_right aタグのルールを作成します。

カラー > #000000 （黒）

.footer_right a:hoverタグのルールを作成します。

カラー > #0097E7（青）







Webブラウザで、ページの仕上がりをプレビューします。





.footer_rightタグのルールを変更します。

マージン -右 > なし（空白のまま）余白 -右 > 15ピクセル

Dreamweaverのブラウザ互換性チェックパネル

ブラウザの互換性チェックDreamweaverで「ページのチェック」のプルダウンメニューから「ブラウザの互換チェック」を実行し、このデザインができるだけ多くのブラウザで表示されることを確認します。

ファイル／ページのチェック／ブラウザの互換性の順に選択します。

Internet Explorer 6で発生する可能性のある問題が検出されます。





Dreamweaverのブラウザ互換性チェックパネル

アドビシステムズ社の「CSS Advisor」Webサイト発生する可能性のある問題について詳しくは、アドビシステムズ社の「CSS Advisor」Webサイトを参照してください。このサイトにアクセスするには、バグの説明の下に表示されているリンクをクリックします。

Internet Explorerでの問題を修正するには、footer_rightの CSSルールを変更し、マージン -右の設定を削除して、代わりに余白 -右を「15ピクセル」に設定します。

アドビシステムズ社の「CSS Advisor」Webサイト





Dreamweaverのバリデータパネル

Dreamweaverのリファレンスパネル

HTMLコードの検証次に、ページのコードを検証します。ファイル／バリデート／マークアップの順に選択します。バリデータレポートでは、WebのW3C標準と照らし合わせてページのコードをチェックします。このレポートはブラウザの互換性レポートとは異なり、一般的なWeb標準に関するテストを行います。各ブラウザがそれらの標準に準拠しているかどうかをテストするものではありません。このページでは、エラーや警告は見つかりませんでした。

Dreamweaverには、リファレンスパネルも用意されています。このパネルでは、HTML、CSS、ASP、JavaScript、PHP、SQL、XML、および XSLTに関する、O’Reillyの文献からの情報を直接参照できます。






ページをテンプレートとして保存

ページを検証し、最新ブラウザと互換性があることを確認したら、このファイルを、新しいページの作成に使用できるテンプレートとして保存します。

ファイル／テンプレートとして保存を選択し、「design」という名前を付けて「保存」をクリックします。ファイルパネルに Templatesという名前の新しいフォルダが作成され、現在開いているファイルがdesign.dwtという名前で保存されます。





新しいページを作成する前に、ナビゲーションタブを、これから作成するページ名にリンクします。こうしておくと、手順を前に戻してすべてのリンクを手動で追加せずに済みます。

banner_rightの DIV内のグラフィック、tab_events.gifを選択し、プロパティパネルの「リンク」フィールドで次のように入力します。

../events.html

2つのドットとスラッシュは、Templatesフォルダの場所に関係なく、メイン（ルート）フォルダ内のファイルへのリンクであることを示します。残りのタブについて、以下のリンクを作成します。

../magazine.html

../scholarships.html

Dreamweaverでのテンプレートページ

ナビゲーション用のリンクとロールオーバーの作成





編集可能領域の追加ここで、テンプレート内に編集可能領域を作成し、各ページのコンテンツをカスタマイズできるようにします。

banner_rightの DIV（またはその中のコンテンツ）を選択し、挿入／テンプレートオブジェクト／編集可能領域の順に選択します。






この新しい編集可能領域に「navigation」という名前を付けます。

編集可能領域をさらに 2つ作成します。まず、content_leftの DIVを選択して、「content」という名前の編集可能領域を挿入します。次に content_rightの DIVを選択して、「sidebar」という名前の編集可能領域を挿入します。

作業が完了したら、design.dwt テンプレートファイルを閉じます。






テンプレートを使用した新しいページの作成

このテンプレートを使用して新しいWebページを作成します。ファイル／新規を選択し、新規ドキュメントダイアログボックスで「テンプレートから作成」を選択します。次に、現在作成中のサイトである「Aquo Microsite」を選択し、「design」テンプレートを選択します。「作成」をクリックします。

Dreamweaverの新規ドキュメントダイアログボックス





テンプレートから新しいページが作成されます。編集可能領域と、右上隅の「テンプレート」という表示に注意してください。

ページの基になっているテンプレート

編集可能領域






「design」テンプレートを使用して、HTMLファイルをさらに 3つ作成します。ファイル名を、それぞれ index.html、events.html、magazine.html、および scholarships.htmlと付けて保存します。







Webサイト内のすべてのリンクのチェック最上部のナビゲーションタブに追加したリンクに対応するファイルが作成されたので、 Dreamweaverのリンクチェックを実行し、すべてのリンクが適切に設定されていることを確認します。

ファイル／ページのチェック／リンクの順に選択します。

Dreamweaverのリンクチェックパネル





それぞれのページの見出しを書き換えて保存し、Webブラウザでリンクをプレビューします。





ナビゲーションの「ダウン」状態の設定各ページについて、そのページが表示されている（「ダウン」）状態を表す、タブのグラフィックを設定します。 events.html ページに切り替え、banner_rightの DIV内の tab_events.gifファイルを選択します。次に、プロパティパネルの「ソース」フィールドの横にあるファイルの指定アイコンをクリックし、ファイルパネル内の tab_events_down.gif にドラッグします。

この操作を、magazine.html ページとscholarships.html ページについても繰り返し行います。

Dreamweaverでの HTMLページDreamweaverのファイルパネル





テンプレートを使用した全般的な変更Templatesフォルダ内のdesign.dwtファイルを開きます。ロゴを選択し、プロパティパネルの「リンク」フィールドの横にあるファイルの指定アイコンをクリックして、 index.html（トップページ）ファイルにドラッグします。







テンプレートファイルを変更したら、ファイル／保存を選択します。このテンプレートを使用しているすべてのWebファイルが更新されることを示すメッセージが表示されるので、「更新」をクリックします。

更新が完了したら、ファイル／すべてを保存を選択し、Webブラウザでページをプレビューします。タブをクリックすると該当するページが表示され、すべてのページでロゴをクリックするとトップページに戻ることを確認してください。





表データの読み込みevents.html ページに切り替え、見出しに「Events」と入力します。プレースホルダテキストを数行削除し、ファイル／読み込み／表データの順に選択します。ソースアセットフォルダ内の aquo_events_data.csvファイルを選択します。

「区切り」を「タブ」に設定し、「データに適合」を選択します。また、「セル内余白」に「5」、「セル内間隔」に「0」、「ボーダー」に「1」をそれぞれ入力して、「OK」をクリックします。


「参照」ボタンを使用して、表データのテキストファイルを指定します。.txt、.csv、および .dat形式のファイルを使用できます。また、区切り文字には、タブ、カンマ、ピリオドを含む任意の文字を指定できます。





データに基づいて、テーブルオブジェクトが作成されます。テーブルの幅を右にドラッグして、コンテンツ領域いっぱいに表示されるよう調整できます。

最上行のセル内にテキストカーソルを置いてドラッグし、最上行のすべてのセルを選択します。この場合、テーブルの幅を 441ピクセルにしてあります。次に、プロパティパネルの「ヘッダ」の右隣の「背景」の横にあるカラーチップをクリックして、ライトグレーを選択します。









最初の列の最上行にあるテキスト「DATE」を選択します。次に、プロパティパネルでボールドを指定し、カラーを青に設定します。 Dreamweaverはこのスタイルの CSSルールを直ちに作成し、作成した CSSルールをこのドキュメントにのみ適用します。

見出し「COUNTRY」および「ACTIVITY」を選択し、プロパティパネルのスタイルメニューで「style1」CSSクラスを割り当てます。

プロパティパネルで選択した設定に基づき、CSSルールが自動的に作成されます。

この CSSルールが適用されるのはこのドキュメントのみですが、このルールをstylesheet.cssドキュメントにドラッグすると、すべてのページで使用できるようになります。





イメージマップの作成

次に、世界各地の支社の所在地を示すマップを、このページに追加します。さらに、このイメージに複数のリンクを追加してイメージマップを作成し、各地域の支社にアクセスできるようにします。最初に、ソースアセットフォルダのworld_map.psdファイルを、events.html ページのサイドバー領域にドラッグします。このイメージを選択して、プロパティパネルの「マップ」フィールドに「worldmap」という名前を付けます。


イメージマップとして機能するグラフィックには、名前を付ける必要があります。

マップ領域の形状を指定するためのホットスポットツール





Dreamweaverでの HTMLページ Dreamweaverでの HTMLページ

プロパティパネルで矩形ホットスポットツールを選択し、world_map.jpgグラフィック上に、ヨーロッパを囲む四角形を描画します。描画が完了したら、プロパティパネルの「リンク」フィールドにセルフリンク（「#」記号）を入力します。同様にアジアとオーストラリアについて、2つの四角形を描画し、それらの「リンク」フィールドにセルフリンクを入力します。最後に、多角形ホットスポットツールを選択し、頂点ごとにクリックしてアメリカ合衆国の周囲に不規則な図形を作成して、プロパティパネルにセルフリンクを入力します。

* 後に、各イベントのページを作成し、ホットスポットのリンク、日付からのリンクを張りましょう。ここでは、その作業は省略させていただきます。





Dreamweaver内でのフォーマット設定とイメージの調整scholarships.html ページに切り替え、サイドバー内の events_promo.gifグラフィックを削除して、この場所にプレースホルダテキストを追加します。 Photoshopでgroup_photo.psd を開き、すべてを選択してクリップボードにコピーします。 Dreamweaverに切り替え、プレースホルダテキストの開始位置にテキストカーソルを置き、編集／ペーストを選択します。

Dreamweaverのイメージプレビューダイアログボックスが表示され、クリップボードにコピーしたコンテンツが表示されます。切り抜きツールを選択し、青いシャツを着た黒髪の男性を切り抜きます。切り抜きがうまくいったら「OK」をクリックします。このファイルに counselor.jpgという名前を付けて、myWebsitre/Imagesフォルダに保存します。

イメージプレビューダイアログボックスには切り抜きツールがあり、イメージを切り抜いてWeb用のグラフィックとして保存できます。





サイドバーの counselor.jpgグラフィックを選択し、プロパティパネルの明るさおよびコントラストボタンをクリックします。「明るさ」を「+25」、「コントラスト」を「10」に設定します。「OK」をクリックすると、変更がイメージファイルに反映されます。

コンテンツ領域に、見出しとして「Scholarships」と入力します。


Dreamweaverでは、ページ上のイメージを選択すると、プロパティパネルでイメージの画質向上や修整を行うための各種ツールを使用できます。





サイドバーの counselor.jpgグラフィックを選択し、プロパティパネルの行揃えメニューで「左」をクリックします。イメージを選択したまま、修正メニューから「クイックタグ編集」を選択します。この項目に必要な HTMLコードのみが記述されたウィンドウが表示されます。

「align="left"」の後に、「style="margin-right: 10px;"」と入力します。






サイドバーのテキストを選択し、テキストカラーのチップをクリックしたまま、 counselor.jpgグラフィックの背景から濃い赤茶色を選択します。


カラーチップからカラーを選択する場合、モニタ上の任意の場所の任意のカラーをスポイトで抽出することができます。





Webフォームの作成ここで、顧客が雑誌購読を申し込むためのフォームをWebページに追加します。まずプレースホルダテキストを削除し、見出しとして「Magazine」と入力します。次の行に「Subscribe Today」と入力し、プロパティパネルのフォーマットメニューで「見出し 2」を割り当てます。次に、CSSパネルで「h1」CSSルールを右クリックして、「複製」を選択します。このルール名を「h2」に変更し、ルールを編集して、テキストを「ボールド」に、フォントサイズを「18ピクセル」に設定します。

挿入パネルの「フォーム」タブから、見出しの下にフォーム項目を挿入します。プロパティパネルの「アクション」フィールドに、セルフリンク（「#」記号）を入力します。






フォーム項目の内側に、挿入パネルからテーブルオブジェクトを挿入します。「テーブルの幅」に「430ピクセル」、「行」に「7」、「列」に「2」、「ボーダー」に「1」、「セル内余白」に「5」、「セル内間隔」に「0」をそれぞれ入力します。






左上のセルをクリックし、挿入メニューからフォーム／ラジオボタングループを挿入します。グループの名前に「issues」と入力し、最初のボタンのラベルを「12 Issues」、値を「12」に設定します。次に 2番目のボタンのラベルを「24 Issues」、値を「24」に設定します。

「OK」をクリックします。






ラジオボタングループの下の 4つのセルに、それぞれ挿入の「フォーム」タブからテキストフィールドのアイコンをクリックし「テキストフィールド」を追加します。 1番目のテキストに「fullname」、2番目に「street」、3番目に「city」、4番目に「zip」という名前を付けます。






次のセルに、リスト /メニュー項目を挿入します。IDに「howhear」と入力します。挿入した項目を選択して、プロパティパネルから「リスト値」ボタンを選択します。 1番目の「項目ラベル」を「Choose one...」に、値を「none」に設定します。追加ボタン（+）をクリックして、新しいリスト項目を追加します。この項目に「Newspaper」という名前を付けて、値を「newspaper」に設定します。さらに 2つの項目を追加して、1つ目のラベルを「Television」、値を「tv」に設定し、次の項目のラベルを「Magazine Ad」、値を「magazine」に設定します。






挿入パネルから、左下のセルにボタンを挿入します。 IDに「Submit」と入力します。ボタンを選択して、「値」フィールドに「Sign me up!」と入力します。






92ページと同じ方法でセルの左の列を選択し、プロパティパネルの「背景色」カラーチップからライトグレーを選択します。同様に、「セルのボーダーカラー」カラーチップから同じライトグレーを選択します。横メニューから「右」を選択します。

右側の列の各セルには、隣接するフォーム項目に対応する説明を入力します。

• Subscription • Full Name • Street Address • City/State • Zip/Postal code • How did you hear about us?

これでフォームが完成しました。


テーブルのセル内のコンテンツを整列するには、この整列ツールを使用します。

背景とボーダーのカラーを設定するには、このカラーチップを使用します。





Photoshop Extendedでのアニメーションの作成次に、購読申し込みページ用の簡単なアニメーションを作成します。Photoshopでmagazine_pages.psdファイルを開きます。ウィンドウメニューからアニメーションパネルを開き、ドキュメントタイムライン設定を設定します（62ページを参照）。次に、Shiftキーを押しながら上から4つのレイヤーを選択し、選択ツールを使用している状態でオプションパネルの整列ボタンの「上端揃え」、「左端揃え」をクリックし、それぞれのレイヤーの画像をカンバスの左上に配置します。

Photoshopのアニメーションパネル

Photoshopのレイヤーパネル





レイヤーをカンバスの左上に揃えた状態で、レイヤーパネルで、「page a」、「page b」、および「page c」の「不透明度」を「0 ％」に設定します。

アニメーションパネルで、各レイヤーの三角形をクリックしてレイヤーのオプションを開き、現在の時間インジケータを「01:00f」に移動します。「cover」レイヤーの下にある「位置」設定のストップウォッチと、各ページレイヤーの「位置」および「不透明度」設定のストップウォッチをクリックします。









最初のキーフレームを設定したら、現在の時間インジケータをタイムラインの最終位置（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ページのサイドバー内に配置します。





WebサイトのプレビューWebブラウザで、出来上がったWebサイトをプレビューします。

トップページ

Magazineページ

Eventsページ

Scholarshipsページ





Webサイトのサーバへのアップロードこれらのファイルは、Webサーバにいつでも送信できる状態になっています。デスクトップ上のmyWebsiteフォルダ内のすべてのファイルは、Webサーバに送信して世界中に公開することができます。

Webサーバにアクセスできる場合は、サイトウィザード（2 ページ以降参照）の手順 4で、接続設定を入力します。Webサーバの設定に戻るには、サイト／サイトの管理を選択し、現在作業中のサイトを選択して「編集」をクリックします。クリックすると、サイトウィザード（2ページ以降）の先頭に戻ります。その後、ファイルパネルのリモートホストに接続ボタンをクリックして、ファイルをアップロードするボタンをクリックし、ファイルをアップロードします。


リモートホストに接続

コンピュータから Webサーバにファイルをアップロードする

リモートホストとローカルファイル間のファイルの同期

ファイルパネルでの、リモートファイルとローカルファイルの分割表示の切り替え

リモートホストに接続された状態でのファイルパネル

desgn to web

Documents