当社のデザイナーのほとんどは、従来のテーブル レイアウト、プレゼンテーション、構造を組み合わせて Web サイトを構築しています。 XHTML+CSS の使用方法を学ぶにはプロセスが必要であり、既存の Web サイトを Web サイト標準に準拠させることは 1 つのステップでは完了できません。最善のアプローチは、Web サイトの標準に完全に準拠するという目標を達成するために、段階的に進めていくことです。初心者またはコードにあまり精通していない場合は、Dreamweaver MX 2004 などの標準準拠の編集ツールを使用することもできます。Dreamweaver MX 2004 は、現在 CSS 標準をサポートする最も完全なツールです。
1.一次改善
正しい DOCTYPE をページに追加します
多くの設計者や開発者は、DOCTYPE が何なのか、また何に使用されるのかを知りません。 DOCTYPEはドキュメントタイプの略称です。主に、使用している XHTML または HTML のバージョンを示すために使用されます。ブラウザは、DOCTYPE で定義された DTD (Document Type Definition) に従ってページ コードを解釈します。したがって、誤って間違った DOCTYPE を設定すると、驚くような結果が生じることになります。 XHTML1.0 には、次の 3 つの DOCTYPE オプションが用意されています。
(1) 移行期
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) 厳格
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)フレームタイプ(フレームセット)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 フレームセット//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
主な改善としては、移行ステートメントを使用するだけです。テーブルのレイアウトやパフォーマンスのロゴなどとの互換性も維持できるため、変更が大きすぎて使いこなすのが難しいと感じることはありません。
ヒント: 上記の移行コードを入力するのが面倒な場合は、http://www.macromedia.com/ Web サイトのホームページにアクセスしてソース コードを表示し、同じコードをコピーしてヘッド領域に貼り付けることができます。 。
ネームスペースを設定する（ネームスペース）
DOCTYPE 宣言の直後に次のコードを追加します。
<html XMLns=http://www.w3.org/1999/xhtml >
ネームスペースは、要素タイプと属性名を収集する詳細な DTD であり、ネームスペース宣言を使用すると、オンライン アドレス ポインターを通じてネームスペースを識別できます。いつものようにコードを入力するだけです。
コーディング言語を宣言する
ブラウザーで正しく解釈され、マークアップ検証に合格するには、すべての XHTML ドキュメントが使用するエンコード言語を宣言する必要があります。コードは次のとおりです。
<meta http-equiv=Content-Type content=text/html;
ここで宣言されているコーディング言語は簡体字中国語 GB2312 です。繁体字中国語のコンテンツを作成する必要がある場合は、それを BIG5 として定義できます。
すべてのラベルを小文字で書きます
XML では大文字と小文字が区別されるため、XHTML でも大文字と小文字が区別されます。すべての XHTML 要素および属性名は小文字である必要があります。そうしないと、文書は W3C 検証によって無効とみなされます。たとえば、次のコードは正しくありません。
<TITLE>会社概要</TITLE>
正しい書き方は次のとおりです。
<title>会社概要</title> 同様に、<P> を <p>、<B> を <b> などに変更します。この変換手順は簡単です。
画像にalt属性を追加する
すべての画像に alt 属性を追加します。 alt 属性は、画像が表示できない場合に代替テキストを表示することを指定します。これは通常のユーザーには必要ありませんが、テキストのみのブラウザーやスクリーン リーダーを使用するユーザーにとっては重要です。 alt 属性が追加された場合にのみ、コードは W3C の正当性チェックに合格します。意味のある alt 属性を追加する必要があることに注意してください。次のように記述しても意味がありません。
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
正しい書き方:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=UNC の会社ロゴ、クリックしてホームページに戻ります>
すべての属性値を引用符で囲む
HTML では属性値を引用符で囲む必要はありませんが、XHTML では属性値を引用符で囲む必要があります。
例: 高さ = 100 ではなく、高さ = 100。
すべてのタブを閉じます
XHTML では、すべての開始タグを閉じる必要があります。このような：
<p>開いているタブはすべて閉じる必要があります。 </p> <b>HTML は閉じられていないタグを受け入れることができますが、XHTML は受け入れることができません。 </b>
このルールにより、HTML の混乱やトラブルを回避できます。例: 画像タグを閉じないと、一部のブラウザで CSS 表示の問題が発生する可能性があります。この方法を使用すると、ページが設計どおりに表示されるようになります。空のタグも閉じる必要があることに注意してください。タグの最後にスラッシュ / を使用してタグ自体を閉じます。例えば：
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
上記の 7 つのルールに従って処理されたページは、基本的に XHTML1.0 の要件を満たします。しかし、それが本当に基準を満たしているかどうかはまだ検証する必要があります。 W3C を使用して、無料の検証サービス (http://validator.w3.org/) を提供できます。エラーを発見したら、一つずつ修正してください。次のリソース リストでは、W3C 検証の補足として使用できる、検証に関するガイダンスを提供する他の検証サービスと URL も提供します。最終的に XHTML 検証に合格すると、おめでとうございます。Web サイトの標準に向けて大きな一歩を踏み出したことになります。思っているほど難しくありません！
2.中間改善
次の改善は、主に構造とパフォーマンスの分離にあります。このステップは、最初のステップほど簡単に達成できるものではなく、CSS2 テクノロジーの学習と応用が必要です。でも、何か新しいことを学ぶには時間がかかりますよね？コツは実践しながら学ぶことです。いつもテーブル レイアウトを使用していて、CSS をまったく使用したことがない場合は、急いでテーブル レイアウトに別れを告げる必要はありません。まず、フォント タグをスタイル シートに置き換えることができます。学ぶほど、より多くのことができるようになります。さて、何をする必要があるかを見てみましょう:
CSSで要素の外観を定義する
私たちはロゴを書くときに、フォントを大きくしたいときは <h1> を使い、前にドット記号を追加したいときは <li> を使います。私たちは常に <h1> を大きく、<li> をドット、<b> を「太字テキスト」と考えます。実際、<h1> は CSS を通じて任意のものにできます。<h1> は小さなフォントになり、<p> テキストは大きく太字になり、<li> は画像などになります。構造要素にプレゼンテーションを強制することはできません。これらの要素の外観を決定するには CSS を使用する必要があります。たとえば、元のデフォルトのレベル 6 見出しを同じサイズに見せることができます。
h1, h2, h3, h4, h5, h6{ フォントファミリー: フォントサイズ: 12px;
無意味なジャンクを構造化された要素に置き換える
多くの人は、HTML 要素と XHTML 要素が構造を表現するために設計されていることを知らなかったかもしれません。私たちの多くは、構造ではなく要素を使用してプレゼンテーションを制御することに慣れています。たとえば、リストは次のようにマークされる場合があります。
文1<br /> 文2<br /> 文3<br />
代わりに順序なしリストを使用した方がよいでしょう。
<ul> <li>文 1</li> <li>文 2</li> <li>文 3</li> </ul>
「でも、<li> はドットを表示するので、ドットは使いたくない」と思うかもしれません。実際、CSS は要素の外観を指定しません。CSS を使用してドットを非表示にすることができます。
各テーブルとフォームに ID を追加します
テーブルを指定するか、独自の構造的なマークアップを作成します。
<テーブルID=メニュー>
次に、スタイル シートを記述するときに、「メニュー」セレクターを作成し、それを表のセル、テキスト ラベル、その他すべての要素に表示方法を指示する CSS ルールに関連付けることができます。この方法では、高さ、幅、配置、背景色など、帯域幅を消費する冗長なプレゼンテーション層属性を各 <td> タグに付加する必要がなくなります。タグ (「メニュー」をタグ付けする ID タグ) を添付するだけで、別のスタイルシート内でクリーンでコンパクトなコード マークアップのアドホック プレゼンテーション処理を実行できます。
中級レベルの改善については、主な 3 つのポイントを先に挙げますが、最終的にテーブルをまったく使用せずに完全に CSS を使用したレイアウトを実現するまで、段階的に学習してマスターする必要がある多くの内容と知識が含まれています。