既存のウェブサイトを改善する方法_CSS/HTML

当社のデザイナーのほとんどは、従来のテーブル レイアウト、プレゼンテーション、構造を組み合わせて 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) 移行

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) 厳密な

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) フレームセット

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
主な改善としては、移行ステートメントを使用するだけです。テーブルのレイアウトやパフォーマンスのロゴなどと互換性があるため、変更が大きすぎて使いこなすのが難しいと感じることはありません。

ヒント: 上記の移行コードを入力するのが面倒な場合は、http://www.macromedia.com/ Web サイトのホームページにアクセスし、ソース コードを表示して、ヘッド領域にも同じコードがあります。

ネームスペースを設定します (Namespace)
DOCTYPE ステートメントの直後に次のコードを追加します。


ネームスペースは、要素タイプと属性名の詳細なコレクションです DTD , ネームスペース宣言を使用すると、オンライン アドレスを指定してネームスペースを識別できます。いつものようにコードを入力するだけです。

エンコード言語を宣言します
ブラウザで正しく解釈され、マークアップ検証に合格するには、すべての XHTML ドキュメントで使用するエンコード言語を宣言する必要があります。コードは次のとおりです。


ここで宣言されているコーディング言語は簡体字中国語 GB2312 です。繁体字中国語のコンテンツを作成する必要がある場合は、それを BIG5 として定義できます。

すべてのタグを小文字で記述します。
XML では大文字と小文字が区別されるため、XHTML も大文字と小文字が区別されます。すべての XHTML 要素および属性名は小文字である必要があります。そうしないと、文書は W3C 検証によって無効とみなされます。たとえば、次のコードは正しくありません:

正しい書き方は次のとおりです:

同様に、

は

に変更され、 は に変更されます。この変換手順は簡単です。
画像に alt 属性を追加
すべての画像に alt 属性を追加します。 alt 属性は、画像が表示できない場合に代替テキストを表示することを指定します。これは通常のユーザーには必要ありませんが、テキストのみのブラウザーやスクリーン リーダーを使用するユーザーにとっては重要です。 alt 属性が追加された場合にのみ、コードは W3C の正当性チェックに合格します。意味のある alt 属性を追加する必要があることに注意してください:


正しい書き方:


Give Quote all 属性値
HTML では属性値を引用符で囲む必要はありませんが、XHTML では属性値を引用符で囲む必要があります。

例: height=100 ではなく、 style="max-width:90%"。

すべてのタグを閉じる
XHTML では、開いているすべてのタグを閉じる必要があります。次のように:

開いているタブはすべて閉じる必要があります。

HTML は閉じられていないタグを受け入れることができますが、XHTML は受け入れることができません。
このルールにより、HTML の混乱やトラブルを回避できます。例: 画像タグを閉じないと、一部のブラウザで CSS 表示の問題が発生する可能性があります。この方法を使用すると、ページが設計どおりに表示されるようになります。空のタグもタグの最後にスラッシュ「/」を使用して閉じる必要があることに注意してください。例:



上記の 7 つのルールによって処理された後、ページは基本的に XHTML1.0 の要件に準拠します。ただし、本当に基準を満たしているかどうかを検証する必要があります。 W3C を使用して、無料の検証サービス (http://validator.w3.org/) を提供できます。エラーを発見したら、一つずつ修正してください。次のリソース リストでは、W3C 検証の補足として使用できる、検証に関するガイダンスを提供する他の検証サービスと URL も提供します。最終的に XHTML 検証に合格すると、おめでとうございます。Web サイトの標準に向けて大きな一歩を踏み出したことになります。思っているほど難しくありません！

2．中間の改善
次に行う改善は、主に構造とパフォーマンスの分離です。このステップは、最初のステップほど簡単に達成できるものではなく、CSS2 の学習と適用が必要です。テクノロジー。でも、何か新しいことを学ぶには時間がかかりますよね？コツは実践しながら学ぶことです。いつもテーブル レイアウトを使用していて、CSS をまったく使用したことがない場合は、急いでテーブル レイアウトに別れを告げる必要はありません。まず、フォント タグをスタイル シートに置き換えることができます。学ぶほど、より多くのことができるようになります。さて、何をする必要があるかを見てみましょう:

CSS を使用して要素の外観を定義する
私たちはロゴを書くときにフォントを大きくしたいときに、

、それが前にあることを願っています ドット記号を追加するには、

を使用します。私たちは常に、 は大きいこと、

はドット、そして は「太字」を意味すると考えています。実際、

は CSS を通じて任意のものにできます。

は小さなフォントになり、

テキストは大きく太字になり、

は画像などになります。構造要素にプレゼンテーションを強制することはできません。これらの要素の外観を決定するには CSS を使用する必要があります。たとえば、元のデフォルトの 6 レベルの見出しを同じサイズにすることができます。

h1, h2, h3, h4, h5, h6{ font-family: 宋体, font-size: 12px;
意味のないゴミを構造化要素に置き換える
多くの人は、HTML 要素と XHTML 要素が構造を表現するように設計されていることを知らないかもしれません。私たちの多くは、構造ではなく要素を使用してプレゼンテーションを制御することに慣れています。たとえば、リストのコンテンツでは次のタグを使用できます:

文 1
文 2
文 3

代わりに、順序なしリストを使用した方がよいでしょう:

• 文 1
• 文 2
• 文 3

「でも、

は A 点を示しています、私はドットは使いたくないのです。」実際、CSS は要素の外観を指定するものではありません。CSS を使用してドットを非表示にすることができます。

各テーブルとフォームに ID を追加します
テーブルまたはフォームに、


などの固有の構造タグを付けます。次に、作成時の書き方で表の場合は、「メニュー」セレクターを作成し、それを表のセル、テキスト ラベル、その他すべての要素に表示方法を指示する CSS ルールに関連付けることができます。この方法では、高さ、幅、配置、背景色など、帯域幅を消費する冗長なプレゼンテーション レイヤー属性を各 %lt;td> タグに付加する必要がなくなります。タグ (「menu」タグの id タグ) を添付するだけで、別のスタイルシート内でクリーンでコンパクトなコード マークアップのアドホック プレゼンテーション処理を実行できます。

中間改善 まずは主な3つのポイントを記載しますが、CSSを完全に使わずに最終的にレイアウトを完成させるまで、段階的に学習しマスターする必要がある多くの内容と知識が含まれています。任意のテーブル。