これまでの、デザイナーによるWebサイトのデザインは、多くの場合Adobe® Photoshop®でWebサイトのモデルを作成する作業でした。顧客によるデザインの承認を受けた後で、デザイナーは開発者やプログラマーにモデルを渡して、HTMLやCSSを使用してデザインを再現してもらう必要がありました。 このドキュメントでは、Adobe® Dreamweaver® CS3とAdobe Photoshop CS3 Extendedを使用して、作成したWebデザインの仕上がりをより精密に調整する作業をデザイナー自身が行いながら、HTMLおよびCSSにコーディングする方法について手順を追って説明します。
まずは作業を始める前の下準備。サイト構築に必要な環境を整えます。
Photoshopのスライスツールを使って、必要な画像の用意をしましょう。
CSSのルールを定義して、Webサイト全体のレイアウトを決定します。
全体のレイアウトに合わせコンテンツとフッタのCSSを定義します。
メインページ領域にDIV設定を追加して、レイアウトを完了します。
ロゴの画像に透明色を設定してGIF形式として保存します。
タブの画像をスライスツールでカットし、複数のファイルに保存します。
フッタ領域のDIVへテキストを配置し、リンク情報を設定します。
コンテンツ内のテキストを用意し、文章を左揃えに設定します。
複数の画像を組み合わせてアニメーションGIFを作成します。
CSSでテキストをマウスオーバー時のリンクカラーを設定します。
