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ピクセルの場合
、あなたアプローチは問題になるかもしれません.... – RedFilter
それは私が作成するために誰かに支払ったデザインでした。私はちょうどより多くの経験を変換しようとしていた。 –
私はあなたをよく理解しているかどうか分かりませんが、通常PSDは特定のグリッドを念頭に置いて作られています。したがって、あらかじめ定義済みのいくつかのディメンションをすでに持っているはずですPSDのサイズが完全にランダムな場合は、すべての寸法を正しく計算するのが難しいかもしれません。 –