WebページのレイアウトにCSSを使用する方法

1 日目: どの DOCTYPE を選択するか

はじめに

みなさん、こんにちは！この一連の記事は、Ajie 自身の w3cn.org サイト作成プロセスに基づいて書かれています。 Ajie は、これまでに Web 標準に完全に準拠した Web サイトを作成したことがありません。今は海外の資料を参考にしながら、その過程で感じたことや考えたことを記録していますので、皆さんのお役に立てれば幸いです。さて、始めましょう。

初日

標準を満たすサイトの作成を開始します。最初に行うことは、ニーズを満たす DOCTYPE を宣言することです。

この Web サイトのホームページの元のコードを見ると、最初の行が次であることがわかります:



有名な Web デザイン ソフトウェア開発者である Macromedia やデザインの巨匠 Zeldman の個人 Web サイトなど、標準を満たすサイトをいくつか開くと、同じコードを見つけます。他の標準準拠サイト (k10k.net など) のコードは次のとおりです:



それでは、これらのコードは何を意味するのでしょうか?置く必要があるのでしょうか？

DOCTYPEとは

上記のコードをDOCTYPEステートメントと呼びます。 DOCTYPE はドキュメント タイプの略語で、使用している XHTML または HTML のバージョンを示すために使用されます。

DTD (上記の例の xhtml1-transitional.dtd など) はドキュメント タイプ定義と呼ばれ、ドキュメントのルールが含まれています。ブラウザは、定義した DTD に基づいてページの ID を解釈し、それを表示します。 。

標準に準拠した Web ページを構築するには、DOCTYPE 宣言が不可欠かつ重要なコンポーネントです。XHTML が正しい DOCTYPE を決定しない限り、ロゴも CSS も有効になりません。

XHTML 1.0 では、次の 3 つの DTD 宣言から選択できます:

Transitional (移行): 要件が非常に緩和された DTD で、HTML4.01 ロゴを引き続き使用できます (ただし、xhtml の記述方法に準拠する必要があります)。完全なコードは次のとおりです:



厳密: 厳密な DTD の場合、
などのプレゼンテーション層の識別子と属性は使用できません。完全なコードは次のとおりです:



フレームセット: フレーム ページ用に特別に設計された DTD。ページにフレームが含まれている場合は、この DTD を使用する必要があります。完全なコードは次のとおりです。
gt ;

どの DOCTYPE を選択すればよいでしょうか

理想的な状況はもちろん厳密な DTD ですが、Web 標準に慣れていないデザイナーのほとんどにとって、現時点では暫定的な DTD (XHTML 1.0 Transitional) が理想的です。 (このサイトも暫定的な DTD を使用しています) を選択してください。この DTD ではプレゼンテーション層の識別子、要素、属性も使用できるため、W3C コード検証に合格することも容易になります。

注: 上記の「プレゼンテーション層の識別と属性」は、タイプセット用のテーブル、背景色の識別など、純粋にパフォーマンスを制御するために使用されるタグを指します。 XHTML では、タグはプレゼンテーションを実現するためではなく、構造を表すために使用されます。この移行の目的は、最終的にデータとプレゼンテーションを分離することです。

例: マネキンが着替えます。モデルはデータ、服は表現のようなもの モデルと服が分かれているので、自由に着せ替えることができます。オリジナルの HTML4 ではデ​​ータとプレゼンテーションが混在しており、プレゼンテーション形式を一度に変更するのは非常に困難でした。あはは、この概念は少し抽象的ですが、アプリケーションのプロセス中に徐々に理解する必要があります。

補足

DOCTYPE宣言は、すべてのXHTMLドキュメントの先頭、すべてのコードとマークアップの上に配置する必要があります。

詳細については、W3C Webサイトをご覧ください

2 日目: 名前空間とは何ですか?

DOCTYPE が宣言された後の次のコードは次のとおりです:

通常、HTML4.0 コードは単なる ですが、ここでの「xmlns」とは何ですか?

この「xmlns」はXHTML名前空間の略称で、「名前空間」宣言と呼ばれます。名前空間の役割は何ですか? Ajie 自身の理解は次のとおりです。

xml では独自のロゴを定義できるため、自分が定義したロゴは他の人が定義したロゴと同じである可能性がありますが、意味は異なります。ファイルを交換または共有するときにエラーが発生しやすくなります。このエラーを回避するために、XML では名前空間宣言を使用します。これにより、ID を指す URL を通じて ID を識別できるようになります。例:

Xiao Wang と Xiao Li の両方が 識別子を定義している場合、Xiao Wang の名前空間は「http://www.xiaowang.com」、Xiao Li の名前空間は「http://www」です。 .com」の場合、2 つのドキュメントがデータを交換するときに、 識別子が異なる名前空間に属しているため、混乱することはありません。

より一般的な説明は次のとおりです: 名前空間は、ドキュメントにマークを付けて、このドキュメントが誰に属しているかを他の人に伝えることです。この「誰」が URL に置き換えられるだけです。

XHTML は HTML から XML に移行するためのマークアップ言語であり、XML ドキュメントのルールに準拠する必要があるため、名前空間も定義する必要があります。また、XHTML1.0 ではロゴをカスタマイズできないため、名前空間は同じ「http://www.w3.org/1999/xhtml」になります。まだ完全に理解していなくても問題ありません。この段階ではコードをコピーするだけです。



の後の lang="gb2312" は、ドキュメントが簡体字中国語であることを指定します。

3 日目: 言語エンコードを定義する

3 番目のステップは、次のように言語エンコードを定義することです:

以上がWebページのレイアウトにCSSを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。