HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ～ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュアルドラフトから Web ページのデモまで、HTML ページを書くことだと感じています。基本的にこの仕事はやらざるを得ません。初期のWAPサイト全体、杭州ホームページ、バグ要件から広州ホームページ、上海ホームページ、店舗ディレクトリなどのページ再設計、口コミカードチャンネルホームページの再設計のための現在のDEMOの作成まで。当初のイライラと退屈なデバッグから、気分はどんどん楽になり、今では楽にデバッグできるようになりました。IE6 と 7 のバグだらけの制約から解放されました。ハックを書かずにページレイアウト全体を完成させようとした時の感覚は今でも鮮明に覚えています。

私は会社の同僚から多くのことを学び、自分の開発手順を次のようにまとめました。

ページレイアウト、統一、分類、切り取りの全体分析（CSSスプライト）
モジュールを分割し、HTML構造を計画し、CSSを計画して記述する
ページに統合（YUI のページレイアウトビルダーコンポーネントによる）
ステップ 1: ページレイアウト全体を分析します。
ビジュアルドラフトを入手したら、HTML と CSS コードの書き方を考え始めるのではなく、まずはページ全体のレイアウトを分析し、ページの各モジュール間の間隔の違い、ヘッダー、本文、フッターの分割、CSS スプライト、画像の切り取り事項、ページの色、背景の設定方法などを観察し、その後、外側から内側に向かって、各モジュールのレイアウトを段階的に改良していきます。このステップは、以下に記述されるコードの全体的なフレームワークレイアウトを提供するため、非常に重要であると言えます。

ステップ 2: 画像を要約、統合、分類、切り取る (CSS スプライト)
全体的な分析が終わったら、モジュールを分類して組み合わせます。このステップでは、ページ全体を調べて、色、スタイル、変更、背景、幅、パディング、マージン、境界線など、どのモジュールが同様のスタイル (最も一般的なものは ul リストと一部のグラフィックレイアウト) を持っているかを分析する必要があります。類似モジュールのスタイルを分類すると、その後の CSS コードの記述に大きなメリットがあり、CSS コードの簡素化を最大限に高めることができます。

ステップ3: モジュールを分割し、HTML構造を計画し、CSSを計画して記述する
すべての準備作業が完了したら、コードを記述します。私は各モジュールまたは列を個別に記述するのが好きです。これの利点は、全体のレイアウトを無視して、HTML セマンティクスの観点から HTML 構造を構築できることです。この時点で、HTML コードが少なくなり、CSS を記述したり HTML コードを表示したりするのに多くの時間を費やす必要がなくなります (HTML コードが多すぎて、スクロールバーを上下に引っ張るのは面倒です)。

ステップ 4: ページに結合します。
各モジュールが記述されたら、ページレイアウトジェネレーター (ありがとうございます、効率が最優先です。欠点は HTML 構造が複雑になることです、-_-) を使用して、分割された各モジュールを統合し、CSS ファイルのコードもクリーンアップします。CSS コードを統合するためのヒントがいくつかあります。CSS スプライトで HTML 要素の背景を設定するときは、すべての要素を 1 か所に記述します。

/* 背景 URL */
.rhs-bd、.business-join h1、.yk-mod-content .business-join pa、.business-open-flow ul、.business-case-list ul li、
.kb-bank-toolbar ul、.kba-consumer h1、.kba-consumer h1、.kba-consumer ul li、.kba-new-join ul li、
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}

このように、対応する要素は背景位置を設定するだけでよく、コードは整然としていて、構造は明確で、再構築とメンテナンスのコストが低くなります。もう一つのポイントは、マージンを慎重に使用することです。マージンはIE6と7で多くの問題を引き起こすため、CSSを記述してHTMLレイアウトを計画するときに、マージンを使用するかパディングを使用するかを検討する必要があります。それぞれに利点があります。マージンはHTML構造を比較的簡潔に保つことができ、パディングの原則は、現在のHTML要素の子要素にパディングを設定してレイアウトを実現することです（もちろん、現在の要素の下に配置することもできますが、幅と高さが変わるため、幅と高さを再調整する必要があります）。私の経験では、モジュールの HTML と CSS を書くときは、できるだけパディングを使用するようにしてください。特に float の場合は、パディングを使用すると多くの問題を回避できます。「これを行うとバグが発生することがわかっている場合は、実行しないようにしてください。」という格言があります。

上記の開発手順は人によって異なりますが、私はこのような考え方や開発プロセスが好きで慣れており、その楽しさを実感しています。

<<: vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

>>: HTML コマンドラインインターフェースの実装