Photoshopでの作成に関するこのチュートリアルを読んweb layoutでいたところ、次のようになりました。
（出典：adobetutorialz.com）
これは単一の画像ファイルを生成するようですが、これをに変換する方法の説明はありませんweb application implementation。
つまり、誰かが「」、「」などをクリックしたときのための機能が必要になるということです。About UsServices
staticでは、この画像からよりdynamic機能的なWebアプリに移行するために、次のステップを実行する必要がありますか？
画像をセクションに分割して、ページの背景画像として配置することになっていますか？
CSS レイアウトの学習に多くの時間を費やすことに興味がない限り、成功への最も簡単な方法は、Photoshop ファイルをpsd2htmlのような人に送ることです。これにより、開発作業をアプリケーションの機能に集中させることができます。
Photoshop で Web テンプレートをデザインすることは素晴らしいことです。なぜなら、CSS の使い方を知っているという既存の概念に制約されないからです。しかし、これと同じ理由で危険です。特定のレイアウト パターンは非常に確立されており、CSS で簡単に実行できますが、非常に簡単であるべきと思われる他のものはそうではありません。
前のコメントを拡張するには:
必要なものは次のとおりです: CSS/HTML レイアウトの段階的なプロセス?
これは、上記のリンクを強化するための追加のガイダンスです 。
必要がない場合は、他の人が推奨しているように、画像をスライスしないでください。それは非常に非効率的です。画像スライスは時代遅れの手法であり、多くの異なる画像がユーザーに送信され、各画像には独自の HTTP ヘッダーが含まれます。これは帯域幅を消費し、人々の時間を無駄にします。ユーザーに提供する画像ファイルはできるだけ少なくし、CSS を使用してレイアウトで機能するようにします。CSS スプライトと呼ばれる手法を調べて、レイアウトのさまざまなコンポーネントを表すために 1 つのファイルで提供できるさまざまな画像の数を確認してください。
はい。画像を領域に分割するには、スライスツールを使用する必要があります。そこから、「Web用に保存」できると思います。これにより、テーブルに乗ったHTMLと画像が生成され、自分でページに変換できます。Photoshopはパズルのほんの一部です。
画像編集ツールを使用して、画像を必要な画像にスライスしてページを作成します。どこで何をスライスするかを知ることは経験に伴いますが、ここにいくつかの指針があります-
すべての画像は長方形であるため、スライスを行うときに「列」と「行」について考えると役立つ場合があります。ただし、テーブルはテーブルデータにのみ使用し、レイアウトには使用しないでください:)
画像に繰り返しパターンがある場合は、パターンをテッセレーションできる最小サイズの画像をスライスし、cssを使用して繰り返します。
適切なジョブには適切な画像タイプを使用してください。たとえば、小さなアニメーションには.gif、オーバーレイには.png、写真には.jpgなどです。wikiページはここで役立つ場合があります
ジョブに適した画像ファイルのサイズとサイズを使用してください。私は通常、画像の全体的な効果を失わずに、画像のファイルサイズをできるだけ小さくするようにしています。画像が大きい=帯域幅が広い=ダウンロードに時間がかかることを忘れないでください
画像を取得したら、FirefoxとピクセルパーフェクトプラグインおよびFirebugを使用してページをまとめることを検討することをお勧めします。ピクセルパーフェクトプラグインを使用すると、画像をWebページにオーバーレイして、元のモックアップに一致するようにすべてを揃えることができます。
HTMLとCSSを使用した基本的な機能ページができたら、JavaScript/JavaScriptフレームワークを介してクライアント側の機能を紹介するこの時点を見ていきます。レイアウトを完了する前にそれを行うと混乱し始める可能性があるので、私はあなたが持っているものに満足するところまで到達し、次に機能を紹介します。このようにすることで、プログレッシブエンハンスメントを支援し、控えめなJavaScriptを促進します。
画像をスライスするのが一般的な方法ですが、チュートリアルが書かれているので、すでに隅に追いやられていることに注意してください。
画像全体 (これは Web サイトとしてブラウザーを埋めるためのものだと思います) はわずか 766 x 700 ピクセルであることに注意してください。これは最新のモニターのサイズの半分強なので、コンテンツの右側 (または中央のコンテンツの両側) に膨大な量の余白ができます。
平均的なモニター サイズは地域によって異なるため、視聴者の一般的なサイズを把握し、背景レイヤーをそのサイズ以上にします。5 年前、私のサイトはすべて 800 x 600 モニター用にサイズ設定されていましたが、現在は 1024 x 768 用に作成されています。しかし、訪問者のほぼ半数がより大きなモニターを使用しているため、サイトのトラフィック データを監視しています。
画像とテキストを表示する HTML の作成に使用する方法は、これを行う理由によって異なります。趣味や副業の場合は、WYSIWYG サイト作成ソフトウェア パッケージまたはオンライン ツールを使用します。キャリアとしてこれを行う方法を学ぶつもりなら、Web 標準 (セマンティック HTML/CSS) を使用してサイトを作成する方法を学んでください。誰もが他の人のコードを見て学習しますが、誰のコードから学ぶかに注意してください。
CSS に関するEric Meyerの本と Web 標準に関するJeffrey Zeldmanの本を参照して、現在のブラウザーだけでなく、最新のモバイル デバイスや来年のブラウザーでも機能するサイトを作成する方法を学んでください。彼らのサイトにアクセスしている間、彼らの記事や投稿をチェックし、HTML ソースをのぞいて、彼らがどのようにそれを行っているかを確認してください。
また、7 つの異なる PSD から HTML へのチュートリアルのこの記事をチェックして、他のデザイナーがどのように問題に取り組むかを確認してください。
私が使用する一般的なアプローチは、最初にフォトショップ、イラストレーターなどを使用してページ レイアウトをデザインすることです。
レイアウトができたら、画像がページ上で対称的な形状をどのように占めているかを大まかに見て、デザインを調べます。
次に、タイル化、スプライト化 (前述のとおり)、または CSS 内で再作成できる画像を決定します。たとえば、上の画像では、主に CSS を使用してタイル ボックスを作成できます。
もちろん、それを 1 つの画像としてスライスすることもできますが、その場合、多くの無駄なピクセルが作成され、ページのパフォーマンスが低下し、読み込み時間が長くなります。
デザインでテーブルを使用するのを避け、適切にフォーマットされた CSS と組み合わせた div タグを使用する div タグ /layers の使用に目を向けると、上から見た正確なレイアウトを反映した軽量のページが得られます。
あなたの設計では、いくつかの項目も検討します (そのうちのいくつかは上記で説明しました)。流動的なプレゼンテーション用のページを設計します。画像を特定のサイズ (700 ピクセルなど) に固定する必要がある場合は、ページの中央に配置され、より大きな画面解像度でもきれいに表示されるようにページを設計します。
可能な限り CSS を使用し、複数のブラウザー (サファリ、Firefox など) でクロステストを行います。 Internet Explorer は CSS を他のブラウザーとは異なる方法でレンダリングするため、開発中にこれを認識してテストする必要があります。
並べて表示できる背景画像、または高解像度で読み込み時間が短い背景画像を作成してみてください。たとえば、サイトが 1024x768 で最適に表示されるようにレイアウトされている場合、サイズが匹敵する小さなカラー パレットを使用して背景を作成し、複数の側面で共通の背景色にグラデーションをブレンドします。これにより、背景をサイト デザインの一部にすることができますが、より大きな解像度もサポートされます。配置は、背景の css で指定できます。
ページのコーディングに慣れていない場合は、フォトショップ、イラストレーターなどのアプリを使用して画像を html に変換すると役立つと思います。これを行うと、ページを肥大化させる余分なコードが大量に取得され、背景などを構成するページに多くの不要な画像がタイリングされることに注意してください.
要するに、自分でドキュメントを読み、解釈し、ハンドコーディングできるようになることに代わるものはありません。デザインの柔軟性が向上するだけでなく、一部の WYSIWYG アプリではアクセスできない多くのスタイル、属性、およびプロパティにアクセスできるようになります。
CSS をインターネットで検索し、DIV タグを使用すると、大量の例とスターター ガイドが返ってきます。頑張ってください！
Microsoft Expression Web SuperPreviewでは、HTML の上にオーバーレイとして画像を配置できます。サポートする予定のすべてのブラウザーで同じように見えるようになるまで、html を更新します。
