数年前から、DIV+CSS が Web デザインの標準的な手法になり始め、現在、多くの国内 Web サイトが TABLE から DIV+CSS への再構築を完了しています。年。著者もこの方法を好む Web デザイナーで、3 年間 div+css を使用して顧客にデザインを提供してきました。では、TABLE と比較してどのような利点があるのでしょうか?同僚や関係者の役に立つことを願って、個人的な経験と理解を話しましょう。
Web デザインで DIV+CSS を使用する最大の利点は、Web コードを標準化し、時代遅れのテーブル レイアウト方法を廃止し、コンテンツ、パフォーマンス、動作の分離を実現することです。HTML コードの構造が改善され、読みやすく、保守しやすくなります。また、Web ページのファイル サイズも小さくなります。たとえば、クライアントの Web サイトを最近再構築した後、Web ページのファイル サイズが元のサイズの半分以下になったため、Web サイトの占有スペースが減り、Web サイトがより速く開くようになりました。
DIV+CSS メソッドと TABLE メソッドはデザインにおいて大きく異なります。CSS でのスタイル定義を容易にするために、Web ページを構成する要素に名前を付けるなど、Web ページのデザインを開始する前に慎重な計画が必要です。 。 Web サイト全体の共通スタイルは、別の CSS ファイルに配置できます。共通のパブリック属性には、Web ページの幅、背景色、背景画像、フォントのデフォルト サイズ、色、リンク スタイルなどが含まれます。Web ページごとに異なるスタイルが含まれます。 css ファイルでは、1 つのブロックに焦点を当て、そのブロックの前にそれがどの Web ページまたは Web ページの部分であるかを示すことが最善です。これにより、CSS ファイルのサイズが小さくなるだけでなく、混乱が避けられ、メンテナンスが容易になります。コンテンツとスタイルを完全に分離するためにスタイルを Web ページのコードに埋め込むべきではないことに注意してください。
DIV+CSS Web デザインをうまくやるには、理解する必要がある 3 つのポイントがあります。
1. Float 属性: DIV (レイヤー) はデフォルトで行全体を占めます。一般的な 2 列または複数列のレイアウト デザインの場合、効果を実現するには、float 属性と width 属性を正しく設定できる必要があります。マルチカラムレイアウトが完了した後、バナーを占めるレイヤーが続く場合は、フローティングレイヤーをクリアするためにクリア属性を設定する必要があります。
2. ボックス モード: レイヤーには、幅、高さ、境界線、内側の間隔、外側の間隔などの属性があり、これらの属性値を適切に使用すると、レイヤーが占有する実際のスペースがコンパクトになります。エレガントなウェブレイアウト。
3. レイヤーのネスト: 経験豊富な Web デザイナーは、レイヤーの数が多すぎることはお勧めできないことを知っています。通常、ネストが多すぎると、コードが複雑で冗長になり、メンテナンスが困難になり、動作が遅くなります。さらに、マルチカラムレイアウトではレイヤーフローティングを使用できるため、埋め込み用にIEレイヤー全体を設定する必要はありません。
ブラウザの互換性については別途言及してください。 TABLE レイアウトと比較して、DIV+CSS は複数のブラウザーとの非互換性の問題が発生しやすいです。主な理由は、ブラウザーごとに Web 標準のデフォルト値が異なるためです。中国では IE が主流ですが、Firefox と Chrome はあまり使用されていません。互換性テストに関しては、まず IE の複数のバージョンで問題が発生しないことを確認する必要があります。ここでは、特定のバージョンの IE を解決するために設計されたいくつかの方法とテクニックを紹介します。ウェブサイト上の問題。
要約: DIV+CSS には TABLE に比べて多くの利点があります。Web デザイナーはできるだけ早く TABLE 方式を放棄する必要があります。その方が、DIV+CSS の知識を深く学ぶのに役立ちます。 DIV+CSS の Web デザイン手法を学び、使用することは難しくありません。基本的な知識を理解し、さらにいくつかのケースを実行すれば、徐々に理解してマスターできるようになります。
この記事はhttp://www.swjns.comのウェブマスターである [Hippie] によって公開されました。転載用に URL を保存しておいてください。
hbjsp の貢献に感謝します