ページデザインとレイアウトのプランニング

通常の Web デザインプロジェクトでは、初めにストーリーボードまたはフローチャートを作成し、それを基にデザイナーとデベロッパーがサンプルページを作成します。Studio 8 を使用してサンプルページを作成し、最終的なデザインを決定できます。ページの外観の視覚的なガイドラインを用意したら、Dreamweaver でページレイアウトのプランニングを開始できます。

ページの見取り図の作成とサイトの外観の決定

Web ページを実際に構築する前にページデザインとレイアウトのプランニングを実行すると、開発プロセスで大幅に時間を節約できます。ページのデザインとレイアウトの一貫性を維持することは重要です。サイトのページには、よく似た外観、カラースキーム、ナビゲーションなどを適用します。デザインに一貫性を持たせることが、ユーザーを適応させ、使いやすさを向上させるのに役立ちます。

Fireworks または Flash を使用して、Web サイトのメインページの見取り図を作成できます。通常、ページの見取り図には、デザインレイアウトや、技術的なコンポーネント、テーマやカラー、グラフィックイメージやその他のメディア要素などを示します。

たとえば、次のようなスケッチがあるとします。



Fireworks の見取り図は次のようになります。



Fireworks で見取り図の作成が終わったら、見取り図を Flash SWF ファイルとして書き出すことができます。書き出したファイルは、Flash Player が動作する任意のコンピュータ上で表示できます。

関連チュートリアル

Dreamweaver でのページレイアウトの作成

ページレイアウトは、Web デザインの最も重要な側面の 1 つです。ページレイアウトは、ブラウザでページがどのように表示されるか (たとえば、メニュー、イメージ、Flash コンテンツの配置) を決定します。Dreamweaver には、Web ページのレイアウトを作成し、管理するためのいくつかの方法があります。

ページをレイアウトする際、HTML テーブルを使用して要素を配置するという方法が一般的です。テーブルは 1 つまたは複数の行で構成され、各行は 1 つまたは複数のセルで構成されます。テーブルは、表データを表示したり、Web ページ上にテキストやグラフィックを配置するのに非常に便利です。

Dreamweaver でテーブルを使用して作成したページレイアウトは、次のようになります。



Dreamweaver でページをレイアウトするには、カスケーディングスタイルシート (CSS) を使用して要素を配置する方法もあります。CSS による配置では、テーブルよりも正確かつ柔軟に制御できるため、ページレイアウトの一般的な方法になりつつあります。CCS に関する知識をお持ちの場合は、<div> タグを使用して CSS レイアウトブロックを作成し、CSS スタイルを使用してこれらのブロックをページ上に配置できます。

関連チュートリアル


 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/studio/8_jp/exploring/04_work5.htm