PSDからXHTML/CSSへの変換

私がPSDを持っていて、html変換のために何が最適なのかを理解しようとしているのですが。ちょうどpsdイメージのサイズを行うのですか?

私は自分のサイトと私のイメージが以下のようになるはずのページを持っています。

Website: http://kansasoutlawwrestling.com

Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

私はpsd2htmlconverter.comに3ドルを払って何かを得ましたが、htmlとcssは正しく表示されますが、そのように分けられていません。

rel = next>

しかし、私は本当にメインのウェブサイトのCSSから作業をしようとしています。

2
まあ、それは私が作成するために誰かに支払ったデザインでした。私はちょうどより多くの経験を変換しようとしていた。
追加された 著者 Jeff Davidson,
それは安いデザインではありません。私は良い会社をデザインしてくれたと思います。ちょうどxhtml/cssをコーディングするための最良の方法がわからないデザインで。
追加された 著者 Jeff Davidson,
PSDが1x1ピクセルの場合、あなたのアプローチは問題になるかもしれません....
追加された 著者 RedFilter,
あなたのターゲットユーザーのために何が最善であるかを知るためにはどうすればよいですか?
追加された 著者 Sparky,
私はあなたをよく理解しているかどうかはわかりませんが、通常PSDは特定のグリッドを念頭に置いて作られています。したがって、あらかじめ定義済みのいくつかのディメンションをすでに持っているはずですPSDのサイズが完全にランダムな場合は、すべての寸法を正しく計算するのが難しいかもしれません。
追加された 著者 Ivan Ivanić,
これはあまりにも広い質問です。あなたの目標は何ですか?どのタイプのユーザーをサポートしますか? 1024x768はサポートする必要がある最低解像度になりそうですか?モバイルユーザーですか?このPSDの大きさは?私はあなたが本当にビルドする必要があるかも知りません。あなたはxhtmlサービスに安いPSDを雇っているので、これを求めていますか?その場合、私たちに尋ねないでください - あなたが雇っている人に尋ねてください。
追加された 著者 Steve Adams,

1 答え

PSDをスライスする方法について話しているなら、私は設定された次元ですべてをスライスしません。レイアウトでスライスする場所を指定し、セクションごとに論理的にスライスして、HTML/CSSで再アセンブリするのは簡単です。

レイアウトを精神的にダイビングすることから始めましょう。上部のバナー、左の列、右の列、コンテンツ領域、フッターなどレイアウトを分割した後、論理的に小または中規模のイメージにスライスし始めます。

HTML/CSSにスケルトンを作成すると、テンプレートをどのようにスライスする必要があるか分かります。これは無作為にスライスするのではなく、作成したスケルトンに合わせてスライスしているので、うまくいく傾向があります。明らかに、上部のバナーのような大きな画像をいくつかの部分にスライスする必要があるかもしれませんが、それは実際に何も変えません。テンプレートのセクションをスケルトンのセクションに合わせています。

ここでは、イメージをスライスする方法を説明するために、私は素早く本当にまとめるものがあります。私は正確な例を使用しませんが、正しい方向にあなたを指す必要があります:

それはおそらく私が提供された情報を与えることができる最高のアドバイスです。あなたが詳細を述べるなら、私の答えを広げよう。

編集

あなたのページのソースを見ると、 div#middle を浮動させて、右サイドバーがその下に落ちないように見えます。

CSSテーブルのレイアウトは、この種のものには本当に良いです。このようなものを与える:

  

<div id="container">   
    <div id="layout">   
        <div id="left-sidebar">   
            <!-- left sidebar-->
        </div>   
        <div id="content">
            <!-- content -->
        </div>
        <div id="right-sidebar">   
            <!-- right sidebar -->   
        </div>   
    </div>  
</div>

以下は、CSS2のテーブルベースのレイアウトについて論じている記事です:

2
追加された
たとえば、右側のサイドバーはプッシュダウンしてはいけません。たぶん、我々は2つの異なる画面サイズを見ているでしょう。
追加された 著者 Jeff Davidson,
うーん、今私を悩ますつもりの部分。私のdivを正しく整列させる。
追加された 著者 Jeff Davidson,
マイナスは、CSSは私のHTMLはこれまで良い見ていますか?
追加された 著者 Jeff Davidson,
私はすべてこれについて混乱している。
追加された 著者 Jeff Davidson,
実際のデータを表示するのでなければ、関連するテーブルはそれほど大きくありません。
追加された 著者 Jeff Davidson,
ここに何かがないのです。私には見えません。
追加された 著者 Jeff Davidson,
追加された 著者 Jeff Davidson,
私はフロートを残して、それは問題を解決するように見えませんでした。
追加された 著者 Jeff Davidson,
私はこれまでの様子に苦しんでいます。私の画面から見栄えが悪い。
追加された 著者 Jeff Davidson,
私はすでに画像をスライスして、私の投稿に記載されているようにxhtml/cssコードを思いついています。私はそれが始まったが、私は自分の幅を広げる必要があるかどうかわからない。 kansasoutlawwrestling.com
追加された 著者 Jeff Davidson,
ここにこだわっています。私が上に投稿した私のイメージを見た後のアイデア。
追加された 著者 Jeff Davidson,
追加された 著者 Jeff Davidson,
私はpsdを持っています。私は良いスライサーではない。レイアウトに正直言って私はそれが大好きですが、何が最善であるかを理解するのは少し難しいです。
追加された 著者 Jeff Davidson,
上記の私の提案を使うべきだと本当に思います。それはとてもうまくいく。
追加された 著者 James Johnson,
そうです、あなたが良いスタートを切ったように見えます。良い習慣を続けて、ページ間の一貫性のためにスタイルシートを更新しておきます。
追加された 著者 James Johnson,
何が混乱するのですか?あなたはそれを使用する必要はありません...それはフローティングと新しいレイアウト技術の良い代替手段です。一日の終わりには、それはまだ100%CSSなので、あなたは良い形になっています。伝統的なテーブルの最大の欠点は、レンダリングが遅いということですが、ここではそれは疑問です。
追加された 著者 James Johnson,
テーブル!= CSSテーブル。あなたはそれを覚えておくとよいでしょう。
追加された 著者 James Johnson,
それはテーブルを使用していません。これはCSS2の表示プロパティを使用しており、フローティングdivの必要性を置き換えることを意図しています。
追加された 著者 James Johnson,
私はあなたに行くための例を掲載しました。それが役に立てば幸い。
追加された 著者 James Johnson,
申し訳ありませんが、右側のサイドバーも左に浮かべてください。
追加された 著者 James Johnson,
これまでのところ何が間違っていますか?
追加された 著者 James Johnson,