Web 再構築テクニックと一般的な問題の解決策
1.xhtml+CSSスキル
●リファクタリングの前に行うべき準備作業:
1. PSD レンダリングを取得します。PSD である必要があるため、自分でより自由にスライスできます。
2. まず、PSD をスライスせずに Web ページを生成し、index_psd.html という名前を付けます (このページは参考用です)。
3. いくつかの必要なフォルダー、image (画像用)、css (CSS スタイル ファイル用)、および js (js ファイル用) を準備します。
●準備が完了したら、まずページ全体の構造を分析します。ページの構造を分析するには、まず全体を見てから、ページの最大のセクションが上下に並べられているか、左右に並べられているかに関係なく、どのように関連しているかを調べます。ページの大きなセクション構造を明確に確認したら、ページの最も基本的なブロックを構築できます。たとえば、ページに上部、中間、下部の構造がある場合、次のように記述できます。
<div id=”header”></div>//ヘッダーやナビゲーションなどを配置します。
<div id="content"></div>//ページのテーマコンテンツ
<div id=”footer”></div>//ページフッターの著作権表示など。
●CSSを記述する場合は、このファイルをDWで開き、表示モードを選択することで、各ブロックの長さと幅を計測し、CSS設定の参考にすることができます。この利点は、再構築されたページが 1 ピクセルまで正確になることです。
●ブロックを書き込むたびに、IE と ff を使用して効果をテストする必要があります。これにより、各ブロックにコンテンツがない場合は、背景色を追加するのが最善です。
●大きなセクションを書いた後、大きなセクションの内容を分析するのと同じ原理です。たとえば、この時点では、コンテンツ ページは左側と右側に 2 つのセクションがあるように見えます。コードは次のように記述できます。
<div id=”header”></div>//ヘッダーやナビゲーションなどを配置します。
<div id="content">//ページのテーマコンテンツ
<div class="content-2-1"></div>//左
<div class="content-2-2"></div>//right
</div>
<div id=”footer”></div>//ページフッターの著作権表示など。
content-2-1 の表 2 は 2 つの列に分割されており、2-1 は左の列を表し、2-2 は右の列を表します。この列分割方法により、ページ コードを複数に分割して表示することができます。利点はより明白です。
●ニュース一覧、記事一覧などに最適です。
<ul>
<li>ニュース タイトル 1< >
<li>ニュース タイトル 2< >
…………
<li>ニュースのタイトル< >
</ul>
●列リストと説明は次の場合に最適です。
<dl>
<dt>列 1</dt>
<dl>列 1 の説明</dl>
<dt>列 2</dt>
<dl>列 2 の説明</dl>
</dl>
●CSSファイル定義の先頭に以下の記述を追加すると良いでしょう。
本文,html{ 高さ:100% }
*{ マージン:0px;
●コンテナが引き伸ばされてページ全体のレイアウトが崩れてしまわないように、大きなブロックには overflow::hidden を設定するのが最善です。
2. DIV+CSS の問題
1. IE6 の予期しない空白の問題:
大きなブロック内に複数の小さなブロックを並べた場合、小さなブロックの幅の合計が大きなブロックの幅と等しくなります。FFなど他のブラウザでは問題ありませんが、IE6ではこれしかありません。 1ブロック表示できない場合は下に押し込まれます。このとき、表示する小ブロックのCSSをinlineに設定することができます。これでうまくいかない場合は、各ブロックの幅を 1 ピクセルまたは 2 ピクセル減らします。
2. IE6 のゴースティングの問題:
IE6 では、div コンテンツの末尾のいくつかの文字が大きな DIV の下部に繰り返し表示されることがありますが、これは FF などの他のブラウザーでは表示されません。この問題を解決するには 2 つの方法があります: 1) コメントを削除します。 2) この DIV の後に <div class="clear"></div> を追加します。
。クリア {
フォントサイズ: 1px;
クリア：両方。
可視性: 非表示;
幅: 1px;
}
コメントを削除すると、コードの読みやすさに影響しますので、2 番目の方法を使用することをお勧めします。
3． IE6 で中央揃えができない問題:
一般的に、div の CSS スタイルを設定している限り (その ID を 1 に設定)、 margin:0px auto; であれば、それを保持するコンテナ内で div を中央に配置できます (その ID を 0 に設定)。次のように：
<div id="0">
<div id="1"> … </div>
</div>
ただし、IE6は動作しません。このとき、div0:text-align:center;のCSSを設定できます。
4. IE6 でリンクされた画像に予期しない境界線が表示される
IE6 では、リンクされた画像に醜い境界線が表示されることがありますが、これは <a> が原因であり、CSS で { border:0px;} を設定することで解消できます。
5. FFのDIV内の内容が脱線している
IE では正常に見えるコンテンツが FF では表示されることがありますが、DIV 内のコンテンツが外側に表示されている場合、この状況は特に div に境界線がある場合に顕著です。これは、IE で div の高さを設定した後、div 内のコンテンツが div よりも高い場合、div の高さが自動的に増加するためです。しかし、FFは高さが制限されている限り、それほど自由ではありません。現時点では、高さをリセットするか、高さを自動に設定することでこの問題を解決できます。
6． FFでエリアが突然消えてしまう
IE の通常のレイアウトが FF で消えてしまう この問題は、ページの下隅にある著作権ブロックでよく発生します。これは、この領域に clear:both; を追加することで解決できます。
現時点では他に問題が思いつきません。再構築の過程では、常に説明できない問題が発生します。思考力があり、手間をかけてテストするか、オンラインで検索すれば、必ず解決策が見つかります。あらゆる問題の解決は大きな利益となります。