Webデザイン・レイアウトの基礎_体験交流

ご覧のとおり、Web ページのレイアウト設計はますます重要になってきています。訪問者はコンテンツだけに焦点を当てたサイトを見たいとはもう思っていません。コンテンツは重要ですが、ページやサイトが気に入られるのは、そのレイアウトとコンテンツがうまく統合されている場合のみです。いずれにせよ、あまりにも「うるさい」訪問者を維持することはできません。

1. Web ページのレイアウトの基本概念

最初、Web ページが目の前に表示されると、それは白紙の紙のようなもので、あなたのデザインの才能を思いのままに。最初に、制御できるものはすべて制御できますが、従来の標準やほとんどの訪問者の閲覧習慣が何であるかを知っていれば、これに基づいて独自の何かを追加できることを理解する必要があります。もちろん独自のデザインを作成することもできますが、初心者の場合は、Web レイアウトの基本概念を理解することが最善です。

1. ページ サイズ:

ページ サイズはモニターのサイズと解像度に関係するため、Web ページの制限はモニターの範囲を突破できないことです。ブラウザも多くのスペースを占有し、残されるページ範囲はますます小さくなります。通常、解像度が 800x600 の場合、ページの表示サイズは 780x428 ピクセル、解像度が 640x480 の場合、ページの表示サイズは 620X311 ピクセル、解像度が 1024X768 の場合、ページの表示サイズは次のとおりです。 ：1007×600。上記のデータから、解像度が高くなるほどページ サイズが大きくなることがわかります。

ブラウザのツールバーもページ サイズに影響します。通常、現在のブラウザのツールバーは削除したり追加したりできるため、すべてのツールバーを表示した場合とすべてのツールバーを閉じた場合ではページのサイズが異なります。

Web デザインのプロセスにおいて、Web ページにコンテンツ (サイズ) を追加するには、ページを下にドラッグすることが唯一の方法です。ただし、サイトのコンテンツが人々をドラッグする可能性があると確信できない限り、訪問者にページを 3 画面以上ドラッグさせないでください。同じページに 3 つ以上の画面のコンテンツを表示する必要がある場合は、訪問者の閲覧を容易にするためにページに内部リンクを作成することをお勧めします。

2. 全体の形状:

形状とは? 形状とは、作成されたオブジェクトのイメージです。これはページの全体的なイメージを指し、このイメージは全体である必要があり、グラフィックとテキストの接続が階層的かつ整然としている必要があります。モニターもブラウザも長方形ですが、ページの形状としては、長方形、円、三角形、ひし形など、自然界に存在する他の形状やその組み合わせを最大限に活用できます。

形が異なれば、意味も異なります。たとえば、長方形は形式と規則を表しており、多くの ICP や政府の Web ページでは全体的な形状として長方形が使用されており、円形のバンドは柔らかさ、統一性、暖かさ、安全性などを表しています。多くのファッション サイトは、全体的な形状として円を使用することを好みます。ページの形; 三角形は、強さ、権威、堅実さ、攻撃性などを表します。多くの大規模な商用 Web サイトでは、ページの全体的な形として三角形を使用することが多く、バランス、調整、公平性を表します。一部の出会い系サイトでは、ページ全体の形状としてダイヤモンドが使用されることがよくあります。形が違えば意味も異なりますが、現在のWebページ制作の多くは複数のグラフィックを組み合わせてデザインされており、特定のグラフィックが構成比を占める割合が大きくなる場合があります。

3. ヘッダー:

ヘッダーの機能は、ページのテーマを定義することです。たとえば、サイト名のほとんどはヘッダーに表示されます。こうすることで、訪問者はサイトの内容をすぐに知ることができます。ヘッダーはページ全体のデザインの鍵となります。これには、以下のデザインやページ全体の調整が含まれます。サイト名、会社ロゴ、バナー広告の写真がページのヘッダーに配置されることがよくあります。

4. テキスト:

テキストはページ上の行またはブロック (段落) に表示され、その配置によってページ レイアウト全体の可視性が決まります。以前は、ページ作成テクノロジーの制限により、テキストの配置の自由度は非常に低かったが、DHTML の登場により、独自の要件に応じてテキストをページ上のどこにでも配置できるようになりました。

5. フッター:

フッターはヘッダーをエコーし​​ます。ヘッダーにはサイトのテーマが配置され、フッターにはプロデューサーや企業情報が配置されます。多くの制作情報がフッターに配置されていることがわかります。

6. 写真

写真とテキストは Web ページの 2 つの主要な要素ですが、これらは不可欠です。写真や文字の位置をどうするかがページ全体のレイアウトの鍵となります。そして、レイアウトの考え方もここに反映されます。

7. マルチメディア

テキストや画像に加えて、音声、アニメーション、ビデオなどのメディアもあります。これらはあまり利用されませんが、動的な Web ページの台頭により、Web ページのレイアウトにおいてより重要になるでしょう。

2.Webページのレイアウト方法

Web ページのレイアウトには 2 つの方法があり、1 つ目は紙のレイアウトで、2 つ目はソフトウェア レイアウトです。以下は別途紹介します。

1. 紙のレイアウト方法

多くの Web デザイナーは、最初にページ レイアウトのスケッチを描くことを好みませんが、レイアウトを直接デザインして Web にコンテンツを追加します。デザイナー。この下書きなしのアプローチでは、優れた Web ページをデザインすることはできません。したがって、Web ページの作成を開始するときは、まず紙にページのレイアウトのスケッチを描く必要があります。

白い紙を数枚と鉛筆を用意してください。 おしゃれなウェブサイトをデザインしたいと考えています。

* サイズ選択:

現在、従来の閲覧モードでは 800X600 の解像度が一般的です。したがって、ほとんどの訪問者に対応するには、ページのサイズは 800X600 の解像度に基づく必要があります。

*形状の選択:

まず、白い紙上にブラウザウィンドウを象徴する四角形を描きます。この四角形がレイアウトの範囲になります。ページ全体のテーマとして円を選択します。それは柔らかさを表現し、よりファッションに沿ったものとなるためです。次に、長方形のフレーム内に円や他の形状を追加してみてください。こうやって描いてみると、とても汚いことがわかります。実際、最初から完璧なレイアウトをデザインしたい場合は、さらに難しくなり、この一見乱雑なグラフィックの中に隠された特別な形状を見つけなければなりません。また、設計したレイアウトが実装できるかどうかを心配する必要がないことにも注意してください。実際、考えられるあらゆるレイアウトは、今日の HTML テクノロジーで実現できます。

左側の凹型の円弧を考慮して、バランスをとるためにページの右側に長方形（線分でも可）を追加しました。

*ページヘッダーを追加します:

jpg は .jpg と 2.jpg から取得したレイアウト形状なので、ページヘッダーを追加する必要があります。通常、ページ ヘッダーはページの上部に配置されるため、.jpg のページ ヘッダーを追加して、左側の円弧と右側の長方形のバランスを考慮して、長方形のページ ヘッダーを追加してページを配置しました。ヘッダーは左側の円弧と交差します。

*テキストの追加:

ページの空白部分にテキストやグラフィックを追加します。ページの右側に箔として長方形があるため、空白領域に配置されたテキストが左側の円弧によって違和感を感じることはありません。

*画像の追加:

写真はページを美しくし、内容を説明するために必要なメディアです。必要に応じてここに画像を追加します。

上記の手順を完了すると、ファッション ページの一般的なレイアウトが表示されます。もちろん、これは最終的な結果ではありませんが、今後の制作の重要な参考になります。

2. ソフトウェアによるレイアウト方法

レイアウトの意図を描くために紙を使用したくない場合は、ソフトウェアを使用してこれらの作業を完了することもできます。このソフトはフォトショップです。 Photoshop の画像編集機能は、Web ページのレイアウトのデザインに使用するとさらに便利になります。紙を使ってレイアウトを設計するのとは異なり、Photoshop では色やグラフィックを使用したり、レイヤー機能を使用したりして、紙では実現できないレイアウトのアイデアを簡単に設計できます。

3. Web ページのレイアウト技術

1. カスケード スタイル シートの適用

新しい HTML4.0 規格では、CSS (Cascading Style Sheet) が提案されました。完全な精度のテキストと画像。 CSS は初心者にとっては少し複雑に思えるかもしれませんが、確かに優れたレイアウト方法です。今まで実現できなかったアイデアもCSSで実現できます。現在、多くのサイトでカスケード スタイル シートが使用されており、サイトをよく反映しています。 CSS の紹介や使い方はネット上でたくさん見つかります。もちろん、ますます人気が高まっている WEB 標準 (XHTML+CSS) は、コンテンツとプレゼンテーションの分離を強く主張しており、次世代のデータ交換 XML (つまり、XHTML) への移行として機能します。

2. テーブル レイアウト

テーブル レイアウトは、どのサイトを閲覧する場合でもテーブルにレイアウトすることが標準になっているようです。テーブル レイアウトの利点は、異なるオブジェクト間の影響を気にせずに、異なるオブジェクトを処理できることです。さらに、画像やテキストを配置するには、CSS を使用するよりもテーブルの方が便利です。テーブル レイアウトの唯一の欠点は、テーブルを使用しすぎるとページのダウンロード速度が低下することです。テーブル レイアウトの場合は、サイトのホームページを見つけて HTML ファイルとして保存し、Web ページ編集ツール (WYSIWYG ソフトウェアが必要です) で開くだけで、このページでテーブルがどのように使用されているかがわかります。

3. フレームレイアウト

理由はわかりませんが、フレーム構造のページは互換性のためか多くの人に嫌われ始めています。しかし、レイアウトの観点から見ると、フレーム構造は優れたレイアウト方法です。テーブル レイアウトと同様に、処理のために異なるページに異なるオブジェクトを配置します。フレームは境界線をキャンセルできるため、通常、全体の外観には影響しません。

今回紹介するレイアウトガイドは、ある意味、Webページのレイアウトテクニックのすべてではありません。Webページを作成する際に、写真や文字を適切に配置する方法や、ジャンプするようなデザインの考え方を指南したいと思っています。