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