CSS Web ページのレイアウトは、複数の人が協力してチームで完了する体系的な作業とも言えます。これには、たとえ 1 人で開発したとしても、ある程度の規範的な運用上の問題が伴います。これは、Blue から転載された記事であり、著者が多くの実践経験をまとめたものであり、誰もが参照して学ぶことができます。 まとめ この仕様は開発仕様であり、スクリプト言語のリファレンスでもあり、厳密に遵守しなければならない不変の規定ではなく、特別な状況下では柔軟に使用し、特定の変更を加える必要があります。ただし、勝手に仕様を変更しないでください。ご質問がございましたら、時間内にご連絡ください。この仕様の関連コード サンプルとドキュメントを直ちに変更します。 基本的な要件 1. Web サイトのルート ディレクトリにある image common temp の 3 つのサブディレクトリを開き、必要に応じて media サブディレクトリを開きます。images ディレクトリには、会社のロゴ、バナー、メニューなど、さまざまな列のページで使用されるパブリック イメージが含まれています。およびボタンなど; common サブディレクトリには、css、js、php、include などの公開ファイルが含まれます。temp サブディレクトリには、顧客から提供されたさまざまなテキスト、画像、およびその他のオリジナル素材が含まれます。フラッシュ、avi、クイックタイムなど。 2. 原則として、ホームページのカラム構造に従って、ルートディレクトリにカラムごとにディレクトリを開き、必要に応じて、各カラムのディレクトリに画像とメディアのサブディレクトリを開き、画像とメディアを配置します。マルチメディア ファイルの場合、この列に多くのコンテンツがあり、多くの下位列に分割されている場合は、それに応じて他のディレクトリを開くことができます。 3. 一時ディレクトリには多くのファイルが存在することが多く、顧客から提供された情報を次々に分類して整理するには、時間で名前を付けたディレクトリを開くことをお勧めします。 4. 特別な事情がない限り、ディレクトリおよびファイルの名前には、英小文字、数字、アンダースコアを組み合わせて使用してください。名前付けの際には、英語をガイドとして使用してください。絶対に必要な場合を除いて、ディレクトリ名にはピンインを使用しないでください。ピンインを使用して名前を付けたディレクトリは、1 か月後でも理解するのが難しい場合が多いことが経験的に証明されています。 スクリプト作成 脚本の全体的なスタイルについて一貫したコンセプトを持つ必要があります。つまり、1 か月後に書いた脚本のスタイルは、1 か月前に書いた脚本のスタイルと一致しており、脚本のスタイルは、人が書いたものと一致しています。同じワークグループ内の異なる開発者は一貫性を保っています。永久に単独で開発することはできないため、いつでも 3 か月前の自分と共同作業している可能性があります (クライアントは改訂を必要としています)。多くの場合、同じワークグループ内の異なる同僚とプロジェクトを開発する必要があります。開発したスクリプトを辞めた人に修正を依頼されることもあります。もちろん、後続の同僚にプロジェクトを任せることもできます。 1. HTML ファイルのユニバーサル テンプレート: div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] その他のメタタグ div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] スタイルシートは、クライアント側の Javascript 関数の定義と初期化操作を定義します。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 補充: 2. 全文検索が可能なページでは、インターネット上の検索エンジンによる効果的な検索を可能にするために、チャンネルのホームページ上の HTML の <head></head> の間に Keywords および description メタ タグを追加する必要があります。 、 例えば： div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 3. CSS ファイル形式のサンプルコード: div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] ここで特に注意が必要なのは、a:link a:visited a:hover a:actived の順序が上記のサンプル コードに厳密に従っている必要があり、そうしないと多かれ少なかれ問題が発生します。さらに、再定義が最初に、疑似クラスが 2 番目に、カスタマイズが最後に来ると規定しているため、自分自身や他の人が読みやすくなります。 異なるブラウザでフォント サイズの一貫性を確保するには、フォント サイズをポイント pt とピクセル px で定義することをお勧めします。中国の宋時代では pt は通常 9pt と 11pt を使用し、中国語では px は通常 12px と 14.7px を使用します。 Songti。これは最適化されたフォント サイズです。太字です。Song フォントを太字にする場合、通常は 11pt および 14.7px のフォント サイズがより適切です。 <table> をネストして記述する場合は、単一の <table> の場合、<table><tr> は整列し、<td> は半角スペース 2 つでインデントする必要があります。その他 ネストテーブルの場合、<td> 内にネストテーブルがない場合、<table> も半角スペース 2 つでインデントされます。</td> の終了タグは <td> と同じ行に行なしで記述します。休憩します。 前述のとおり、ソース コードにはそのようなコードがあってはなりません。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 代わりに、次のようになります。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] これは、ブラウザが改行を半角スペースとみなしているためです。上記の変則的な書き方は、どうしても半角スペースを追加する必要がある場合には、半角スペースを追加することと同じです。このように書かれています: div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com] 同じレベルに属する <table> は左揃えにする必要があります。また、<td> と </td> の間には、高さ 12px 以上の空のセルを含めることはできません。高さが 12 ピクセル未満の場合は、1*1 の透明な gif 画像を <td> と </td> の間に挿入する必要があります。これは、一部のブラウザでは空のセルが不正であると見なされ、解釈されないためです。コードの順序が混乱している場合は、コマンド -> DW3 でソース フォーマットを適用することでコードを並べ替えることができます。 5. 幅と高さの書き方についても統一規格があり、通常、1 列のみの表の場合は幅を <table> タグに書き込み、1 行のみの表の場合は <table> タグに高さを書き込みます。 ; 複数行複数列のテーブルの場合 テーブル、幅、高さは最初の行または列の <td> タグに記述されます。つまり、同じセルのサイズを制御する高さと幅は 1 つだけである必要があります。つまり、任意の幅と高さの値を変更する場合です。コードは、ブラウザーに変更が表示されます。これを行うのは簡単ではなく、長い時間の練習と思考が必要です。 一般原則 1. テーブルを配置する前に、テーブルのネストを 3 レベル以内で制御し、2 つのタグ <colspan> <rowspan> を避けるようにしてください。経験上、これら 2 つの A マークは問題を引き起こす可能性があります。たくさんのトラブル。 2. Web ページが埋め込まれている場合、ブラウザはページの要素を解釈するときに、要素を 1 つずつ表示するため、すべてのコンテンツがこの大きなテーブル内にネストされるようにする必要があります。これが大きなテーブルに配置されている場合、訪問者が URL を入力すると、最初は長い間空白のスペースが表示され、その後、すべての Web コンテンツが同時に表示されるという結果が考えられます。これを行う必要がある場合は、<tbody> タグを使用して、大きなテーブルを分割して表示できるようにします。 3. 植字では、効果を得るために最初の行をインデントする必要があることがよくあります。標準的な方法は、スタイル シートで p { text-indent: 2em; を定義することです。各段落の <p> タグを追加します。通常の状況では、</p> 終了タグを省略しないでください。 4. 画像の表示サイズを人為的に妨害する <img width=? height=?> の使用は原則として禁止しており、<img> タグには width と height を含めないことを推奨します。これは、制作プロセス中に画像を繰り返し変更する必要があることが多いためです。これにより、画像の表示サイズに対する人間の介入が回避され、ブラウザー自体の機能が最大限に活用されます。ページに画像が読み込まれていません。画像が追加されると、画像のサイト サイズが除外されないため、Web ページが表示されなくなる可能性があります。ロード中のジッター (画像が固定サイズのテーブルに挿入されている場合、この現象は発生しません)、特に画像のサイズが大きい場合、この現象は顕著になるため、これが明らかになることが予想される場合Webページがカクカクする事態が発生する場合は、必ず最後の<img>にwidthを付けてください。そして高さ属性。 5. ブラウザの自動組版機能を最大限に活用するために、<br> を使用して完全なテキストの分割に手動で介入しないようにしてください。 6. 異なる言語の単語の間には、ヘッダー記号の前と末尾記号の後を除き、半角スペースを入れる必要があります。中国語の文字間の句読点は全角である必要があり、英語の文字と数字を囲む括弧は半角である必要があります。 -幅括弧。 7. すべてのフォント サイズはスタイル シートを使用して実装する必要があり、<font size=?> タグをページに表示することは禁止されています。 8. Web ページ内で複数の連続したスペースを使用せず、全角スペースをできるだけ少なくしてください (英語の文字セットでは全角スペースは文字化けします)。テキストインデント、パディング、マージンを使用してください。 、hspace、vspace、および gif 画像の透明度を実現します。 9. 中国語と英語を混合する場合、英語と数字を verdana フォントと Arial フォントとして定義するよう最善を尽くします。 10. 行間隔をパーセンテージで定義することをお勧めします。一般的に使用される 2 つの行間隔の値は、line-height:120%/150% です。 11. Web サイト内のすべてのパスは相対パスを使用します。たとえば、特定のディレクトリ内のデフォルト ファイルへのリンク パスは、次のように記述する必要はありません。 ”aboutus/index.htm”> ですが、次のようにする必要があります:<a href=”aboutus/”> 12. グラフィックにテキストを埋め込む場合は、より大きなフォントを使用します。グラフィックにはテキストを含めないことをお勧めします。 13. 「Web ページのサイズ」は、HTML ファイルおよびすべての埋め込みオブジェクトを含む、すべての Web ページのファイル サイズの合計として定義されます。ユーザーは斬新なサイトよりも高速なサイトを好みます。モデム ユーザーの場合、ページ サイズを 34K 未満に保つことが適切です。 ファイルの命名規則 1. 各ディレクトリにはデフォルトの HTML ファイルが含まれている必要があり、ファイル名はindex.htmである必要があります。 2. ファイル名には、英小文字、数字、アンダースコアを組み合わせて使用する必要があります。 3. 名前付けの原則の基本的な考え方は、自分自身と作業グループのすべてのメンバーが各ファイルの意味を簡単に理解できるようにすることです。2 つ目は、フォルダー内で「名前で並べ替え」コマンドを使用するときに、同じ大規模なファイルが作成されることです。ファイルのカテゴリをまとめて整理できるため、検索、変更、置換、負荷の計算などを行うことができます。 4. 以下では、「ニュース」列（「国内ニュース」および「海外ニュース」を含む）を使用して、HTML ファイルの命名規則を説明します。 5. 画像の命名原則は次の基準に従います。 ☆尻尾の部分は絵の具体的な意味を表現するために使用されます。 ☆ 絵の意味がひと目でわかると思います。 div css xhtml xml ソース コードの例 ソース コードの例 [www.52css.com]
<html>
<!–
ジェネレーター: Sub Design Studio ( www.eastline.net.cn )
作成データ：2000-8-1
原作者：イーストライン
–>
<頭>
<title>ドキュメントのタイトル</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="著者" content="eastline">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
Web サイトが次世代の Web 言語 XML 標準と互換性があることを確認するには、すべての HTML タグ属性を一重引用符または二重引用符で囲む必要があります。つまり、< ではなく <a href="url"> と記述する必要があります。 href=url >。
<meta name=”keywords” content=”東洋の新幹線、車、車の購入”/>
<meta name=”description” content=”世界初の中国自動車情報発信地、東方新勧進線”/>
<style type="text/css">
<!—
p { テキストインデント: 2em }
body { font-family: "フォントサイズ: 9pt; マージン-上: 0px; マージン-左: 0px}
table { font-family: "宋体"; 行の高さ: 20px;
a:link { フォントサイズ: 9pt; テキスト装飾: なし}
a:visited { フォントサイズ: 9pt; テキスト装飾: なし}
a:hover { フォントサイズ: 9pt; テキスト装飾: なし}
a:active { フォントサイズ: 9pt; テキスト装飾: なし}
a.1:リンク { フォントサイズ: 9pt; テキスト装飾: なし}
a.1:visited { フォントサイズ: 9pt; テキスト装飾: なし}
a.1:hover { フォントサイズ: 9pt; テキスト装飾: なし}
a.1:active { フォントサイズ: 9pt; テキスト装飾: なし}
.blue { font-family: "宋体"; 行の高さ: 20px; 文字間隔: 5em}
–>
</スタイル>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ ルート ディレクトリにニュース ディレクトリを作成します ☆ 最初のデフォルトのニュース項目の名前は、index.htm です
☆「国内ニュース」に属するニュースは、china_1.htm、china_2.htm、…の順に名前が付けられています。
☆「国際ニュース」に属するすべてのニュースの名前は、internation_1.htm、internation _2.htm、…の順に付けられています。
☆ ファイル数が 2 桁の場合、すべてのファイルがフォルダー内で正しく分類されるように、最初の 9 つのファイルに china_01.htm、china_02.htm という名前を付けてください。
☆名前はアンダーバーで区切って最初と最後の2つの部分に分かれています。
☆ヘッダー部分は、広告、ロゴ、メニュー、ボタンなど、画像の一般的な性質を示します。
☆一般的に言えば、
ページ上部に配置される広告や装飾模様などの長方形の絵をバナーと呼びます。
私たちはこの象徴的な絵を「ロゴ」と名付けました。
ページボタンに固定されていないリンクを含む小さな画像に名前を付けます
ページ上の特定の位置に連続して表示され、同じ性質を持つリンク列の画像に、メニューという名前を付けます。
装飾用に写真に「pic」という名前を付けました。
タイトルを示すリンクを付けずに画像に名前を付けます: title
この原則に従ってください。
バナー_sohu.gif
バナー_sina.gif
menu_aboutus.gif
メニュー_ジョブ.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg