一般的に、Webデザインで完了した作業は実際には次のとおりです。PSDレンダリングをHTML+CSSテンプレートページに変換します。一般的に、私たちはアーティストのPSDを取得し、さまざまな人々が異なるアプローチを持っています。
1.花火を開いて、画像をHTMLにエクスポートします。
2. DreamWeaverなどのツールを使用して、レイアウトをドラッグアウトしてレイアウトし、関連する写真をインポートし、フラッシュリソースを使用します。
3。PSでカットを完了した後、まずテキストエディターのレンダリングを見て、段階的にします。
上記は最も一般的に使用される方法ですが、どれも良い方法ではありません。
最初の方法は最悪であり、そのようなコードは維持または読み取り可能ではありません。
2番目の方法も良くありません。コードは必然的に冗長であり、あなたが作るものをチェックする必要があります。
3番目の方法も良くありません。レンダリングを少しずつ見る必要があるからです。つまり、HTMLタグを書くときは、この作品を表示する方法を常に想定しています。
それを行うための正しい方法：
1。PSDを取得した後、最初に他に何もしないでください。 Webページのフレームワークをテキストエディターに直接書き込みます。将来このCSSをレンダリングする方法を想定しないでください。 CSSを追加せずに完全に帰化したラベルです。
2。執筆後、各ブラウザを実行した後、全体的なポジショニングに問題がないことを確認してください。
3。CSS全体を書いてください。ここでは、CSSは大きなブロックのポジショニングとスタイルのみを担当します。
4.必要な画像リソースを切り取り、書面によるフレームワークで少しずつ構築し、絶えずデバッグし、最終的に完成品になります。
5.最後に、自分のコードにコメントを追加し、CSSとHTMLの両方で自分のコードにコメントを適切に追加します。
肌を作り、CSSがパフォーマンスを支配するために柔軟なスイッチを作りたい場合、まだ注意を払うべきことがたくさんありますが、一般的なプロセスはこのようなものです。もちろん、最初にHTMLを直接記述することはできませんが、少なくともこの認識を持ち、段階的に進める必要があります。 。 。
PSDファイルは、2つの主要なポイントからWebサイトを切り取ります。
1。独立したページ
1.このページを分析し、最初に頭の一般的な構造またはドラフトペーパーで説明します。
2。デザインドラフトの状況によると、背景画像の分布、ICO画像の分布などを分析します。
3.対応する写真を切り取り、写真をエクスポートしてマージします
4.ページに表示されるすべての要素の構造を含む、エディターに全体的な構造XHTMLコードを書き込む
5。CSSスタイルで全体的なモジュールコードとモジュールコードを書く
6。詳細調整
7。作業後、ブラウザはそれが正しいかどうかを確認します
2。複数のページで構成される小規模または大規模なサイト
1.すべてのデザインドラフトを閲覧し、サイトモジュール、写真、ファイルの分布を統合します
2。操作の最初のポイントを開始しますが、サイトのコンテンツ配布を計画することが重要です。
全体的な考慮事項：
1。リクエストの数を減らすための写真のマージ
2。構造的合理性とセマンティブ化
3.スタイルのシンプルさにより、後で簡単に維持できます
4.主に、後のメンテナンスとプログラム開発、単に効果を実現する方法を検討します。