DIV+CSS に関するいくつかの提案layout_html/css_WEB-ITnose

http://www.cnblogs.com/bindsang/archive/2008/07/28/1254385.html

DIV+CSS レイアウトに関するいくつかの提案

私はしばらく Web リファクタリングを試してきたので、非常に多くの洞察が得られました。ネチズンは、Caizi にレイアウトに関するいくつかの質問をすることがよくあります。SvnHost グループの友人の中には、初心者を助けるためにレイアウトに関するチュートリアルをもっと書くよう依頼した人もいます。Caizi は、Caizi 自身の経験やレイアウトに関する経験についても詳しく書くことを約束しました。

Web の再構築は単純な DIV+CSS レイアウトであると多くの人が考えていますが、これは明らかに間違った概念です。これについては詳しく説明しません。 DIV+CSS レイアウトは確かに再構築において非常に重要な部分です。今日は Caizi がレイアウトに関するいくつかの提案について話します。

1. 独自のスタイルに合わせてレイアウトをデザインしてください (XHTML と CSS を含む)。

実際には、Web サイトのデザイナーはそれぞれ独自のスタイルを持っているのが一般的ですので、XHTML や CSS を含む一連のレイアウト方法を個別に設計してください。さまざまなレイアウトモジュール間の依存関係を上手に覚えてください。この記事の最後に概略図を添付します。

2. レイアウトに参加している各モジュールに必ず一意の ID 識別子を追加してください。 #header、#content、#footer など。

おそらく現時点では CSS でモジュールごとに個別のスタイルを定義する必要はありませんが、将来的には必要ないとあえて言いますか？不明な場合はIDを追加してください。また、ID 識別子は CSS でスタイルを定義するためだけでなく、DOM ノードでもあり、将来の拡張にも非常に必要であることを理解してください。

3. レイアウトに参加するために div 以外の他の要素タグを使用しないでください。

これについては、span、ul、li、p、h1、h2... などのタグを使用する必要はないのではないかと疑問を持つ人も多いでしょう。もちろんそうではありません。はっきりと見てください。Caizi はレイアウトを指しており、これらのタグは、一部の効果をレンダリングするために使用する必要があるコンテンツの単なるコンテナであり、レイアウトとは何の関係もありません。

4. コンテンツ内の一部の場所では、特別なレンダリングが必要です。レンダリングには要素タグ スタイルを使用できます。複雑にせず、他のクラス セレクターを使用してください。

この点は少しわかりにくいため、明確に説明することができません。この記事を読んでください: XHTML における一般的ではないタグ要素の賢明な使用については以上です。

5. コメント、インデント、空白行をうまく活用してください。

XHTML、CSS、JS、バックグラウンドプログラムコードなど、どのようなコードであっても、すべて当てはまります。たとえば、XHTML コードでは、各モジュールの先頭にコメントが追加され、それがどのモジュールであるかを説明します。次のレベルのインデントが前のレベルよりも 1 つ多いことに注意してください。構造が一目で明確にわかる必要があります。各モジュールの間に 1 行や 2 行の空白行を入れることは避けてください。これらのことを行うと、自分でソース コードを見ても、他の人がソース コードを見ても、簡単に始めることができるでしょう。変更する必要がある場合は、 を実行すると効率が大幅に向上します。

6. プロジェクトに取り組むときは、必ず開発ドキュメントを作成してください。

開発ドキュメントは、ディレクトリ構造（必要に応じて、各ディレクトリとファイルの機能を記録するのが最善です）、ページレイアウトなど、記録する必要がある開発プロセスのいくつかの重要なポイントです。将来、このプロジェクトを担当する人を変更する必要がある場合、いつでも参照してください。簡単に引き継ぐことができます。

今のところはここまでです。他にも注目すべき点がたくさんあるかもしれません。思いつき次第追加します。ありがとうございます!


ポイント 1 に関して、これは Caizi が以前に人々の作成を手伝った企業 Web サイトのレイアウト図です。

これは 3 行 2 列の典型的なレイアウトで、ヘッダーが上部、コンテンツが中央にあり、左右に 2 つの部分 (サイドバーとメイン) があり、下部にフッターがあります。大きな構造は非常に明確なので、これ以上の説明は必要ありません。具体的なレイアウトを見てみましょう:
Web サイトの最外層は大きなコンテナ #wrap で、その幅が定義されている限り、すべてのコンテンツがグローバルに有効になります。このようにして外側のコンテナを作ります。
一番上はヘッダーコンテナで、上下のレイヤーに分かれた3つのモジュールがあります。上のレイヤーはロゴとバナーの左右の2つのモジュールに分かれており、下のレイヤーはメニューのナビゲーションモジュールです。
中央にはコンテンツコンテナがあり、サイドバーとメインという左右の 2 つの大きなモジュールに分かれています。サイドバーにはログインモジュールと推奨モジュールの 2 つの上下モジュールがあり、右側のメインにも 2 つの上部モジュールがあります。そして下位モジュール、広告と製品。
一番下はフッターコンテナです。
最後に、上記のレイアウトの簡単なソース コードを参考のために添付します。

再投稿する際は元のアドレスのリンクを維持してください。
Caizi の巣: http://www.54caizi.org/