Web ページ slicing_html/css_WEB-ITnose

スライシングは、フロントエンドが習得する必要があるスキルです。難しいことではありませんが、その内容は標準化されていませんでしたが、確かに非常に簡単でした。 、しかし全体的な理解はまだ良好でした。仕様などによってはチームの要求に従った方が良い場合もあり、絶対的なものではありません。

10 日間で DIV+CSS を学ぶ http://www.aa25.cn (記事を書いているときにログインできなかったので、Baidu で chm のダウンロード アドレスを見つけました http://vdisk.weibo.com /s/uiL0Ty-gTwfb)

当時、スライスに関する記事も探していました。今でもご覧いただけます。

ソースが見つからなかったので、直接投稿しました
実際、標準的なWeb制作で完成した作品は、通常はPSDを取得します。現時点では、人によってアプローチが異なります。

1. 花火を開いて画像を切り取り、HTML にエクスポートします。

2. Dreamweaver などのツールにレイアウトを直接ドラッグ アンド ドロップし、関連する画像と Flash リソースをインポートします。

3. PS でのカットが完了したら、テキスト エディターでレンダリングを段階的に確認します。

上記は主に使用される方法ですが、良くありません:

最初の方法は最悪であり、そのようなコードは保守性も可読性もまったくありません。

2 番目の方法も、コードが冗長になるのは避けられず、基本的に完成品を確認する必要があります。

3 番目の方法も良くありません。レンダリングを確認して少しずつ組み立てる必要があるため、HTML タグを記述するときに、この部分をどのように表示するかについて常に想定を行う必要があります。

正しいアプローチは次のとおりです:

1. PSD を取得した後、最初にテキスト エディターで Web ページのフレームを直接書きます。この CSS が将来どのようにレンダリングされるかを想定しないでください。 . CSSを追加することなく、完全に自然なタグです。

2. 書き込んだ後、各ブラウザで実行して、大まかな位置に問題がないことを確認します。

3. 全体的な CSS を記述します。ここでの CSS は、大きなブロックの位置とスタイルのみを担当します。

4. 必要な画像リソースを切り出し、書かれたフレームワークで少しずつ構築し、デバッグを続けて、最終的に完成品となります。

5. 最後に、CSS と HTML のコードに適切なコメントを追加します。

スキンを柔軟に切り替えて CSS にパフォーマンスを支配させるためには、まだ注意すべき点がたくさんありますが、一般的なプロセスは次のとおりです。 もちろん、最初に HTML を直接書くことはできませんが、少なくとも私たちはそうします。この認識を段階的に持たなければなりません。 。 。

もう一つ、実際には、上記の著者はそれが必要ではないとは言えませんし、必ずしも不必要ではありません（アクティビティページを作成するのに30分しかない場合、誰もが最初の方法を使用することを躊躇しないでしょう） ...テーブルを直接カットするだけです

以下は主に上記の chm の例に焦点を当てています。

chm チュートリアルでは開発に dw を使用します。面接で軽蔑された後、もうそれはできません。理由は聞かないでください。面接官と人生について話し合う必要があります。実際には、サイトを作成することです。フォルダーとディレクトリを作成します (通常、私はこの方法で作成し、自分のローカル サーバー環境で開発することに慣れています)。ローカルの静的ページとオンライン ページ間の不整合や、一部のオンライン JS が実行されないなどの問題を回避します。

----/html ファイル

----css/css ファイル

--- -js/js ファイル

---画像/画像ファイル

---画像/一時/一時画像ファイル(基本的に、オンライン上に必要のない商品やニュース写真などはあまりありません)

さて、本格的に始めましょう

通常、ページのメインフレームが最初に設定されます。これは chm と同じです

主な利点は、内部モジュールを記述するときに全体の構造に影響を与えず、異なるブラウザーがメインフレームに影響を与えないことです。基本的に、各ブラウザーが内部モジュールをレンダリングするとき、表示は多少異なる場合があります。メインのレイアウトは変更されません。外部には影響しないので、後で内部を変更するのも簡単です (

もちろん、これはより合理的だと思います。

HTML コードについては、 、 PS カットや FW カットと同様に、投稿しません。 これらの基本的なソフトウェア操作

メイン構造が記述された後、内部モジュールが記述されます (セマンティクスと構造については詳しく説明しませんので)。

追加の注意事項:

一般に、チュートリアルでの ID コントロールの使用は、ヘッダー ナビゲーション サイド フッター記事タグのみが禁止されており、ID は基本的に JS 操作と呼び出し用に予約されています。

cssの書き方については以前のエッセイを読んでください 【再版】CSS作成ガイド（ベータ版）（css仕様編）

js関連はフォローしないでください チュートリアルはインラインで書かれており、外部に導入する必要があります。ブラウザのレンダリングに関連しますが、ここでは詳しく説明しません

chmのチュートリアルの最後にサーバーのようなものが出てきますが、実は開発は本来サーバー環境で行うものなので、フロントエンドはバックエンドを理解する必要があるというのが私の個人的な意見です。フロントエンドとバックエンドを分離するための機能およびパフォーマンスの方法のオプションもいくつかあり、それらはすべてこれらのものと接触する必要があります。

最近開発されたいくつかのデバッグツール、ietest (ie 互換) firebug (js デバッグ)

ietest に関しては、ie6 と互換にすることは基本的にまれで、ie 7 については、ie に付属しているデバッグがテストできます。仮想マシンの結果は ie6 に対して正確なので、ietest を自分で検討してください。

请 転載しましたので、アドレスを保存してください ありがとうございます