2011-10-27 12 views
-2

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

私のサイトと私の画像は以下のようになります。

ウェブサイト:http://kansasoutlawwrestling.com

モックアップJPG:http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

私が支払った3ドルをpsd2htmlconverter.comに行って何かを得たが、HTMLとCSSを正しく示していますが、それがあるべきようにその分離されていません。

http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

しかし、私は本当にメインのウェブサイトのCSSのオフ動作するようにしようとしています。

+1

、あなたアプローチは問題になるかもしれません.... – RedFilter

+0

それは私が作成するために誰かに支払ったデザインでした。私はちょうどより多くの経験を変換しようとしていた。 –

+0

私はあなたをよく理解しているかどうか分かりませんが、通常PSDは特定のグリッドを念頭に置いて作られています。したがって、あらかじめ定義済みのいくつかのディメンションをすでに持っているはずですPSDのサイズが完全にランダムな場合は、すべての寸法を正しく計算するのが難しいかもしれません。 –

答えて

2

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

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

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

ここに私がまとめたものがあります。実際にはの画像をスライスする方法を簡単に説明します。正確な例は使用しませんが、正しい方向を指すようにしてください:

これはおそらく、提供された情報で私が与えることができる最良のアドバイスです。あなたが詳細を述べるなら、私の答えを広げよう。あなただけのように右のサイドバーは、その下に落ちないdiv#middleをフロートする必要があるようなあなたのページのソースを見てみると

EDIT

は、それが見えます。

CSSテーブルのレイアウトは、この種のものには本当に適しています。このような何かを与えるショット:ここ

<style type="text/css"> 
#container { 
    display:table; 
    border-collapse:collapse; 
}   
#layout { 
    display:table-row; 
}   
#left-sidebar, #right-sidebar, #content { 
    text-align:left; 
    display:table-cell; 
}   
</style> 

<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にテーブルベースのレイアウトを検討し、いくつかの記事です:あなたのPSDは、1×1ピクセルの場合

+0

私はpsdを持っています。私は良いスライサーではない。レイアウトに正直言って私はそれが大好きですが、何がベストなのかを理解するのは少し難しいです。 –

+0

http://kansasoutlawwrestling.com/assets/images/wrestling.jpgここにpsd jpg –

+0

の種類があります。私が上に投稿した私のイメージを見た後のアイデア。 –

関連する問題