-2

私がpsdを持っていて、html変換に使用するのに最適なサイズを見つけようとしている場合、何が最適でしょうか。psd 画像サイズを指定するだけですか?

私は自分のサイトと、私の画像が以下のように見えるページを持っています。

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

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

私は psd2htmlconverter.com に行き、3 ドルを支払って何かを手に入れましたが、html と css は正しく表示されますが、本来あるべきように分離されていません。

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

しかし、私は本当にメインのウェブサイトのcssから離れようとしています。

4

1 に答える 1

2

何を求めているのか完全にはわかりませんが、PSD をスライスする方法について話しているのであれば、設定された寸法ですべてをスライスするわけではありません。レイアウトにスライスする場所を指定させ、セクションごとに論理的にスライスして、HTML/CSS で簡単に再構築できるようにします。

トップバナー、左カラム、右カラム、コンテンツエリア、フッターなど、レイアウトを頭の中でセクションに分割することから始めます。

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

これは、画像をスライスする方法を説明するために、私が非常に簡単にまとめたものです。正確な例は使用しませんが、正しい方向に向ける必要があります。

それはおそらく、提供された情報で私ができる最善のアドバイスです。詳細を提供していただければ、回答を拡大します。

編集

ページのソースを見るとdiv#middle、右のサイドバーが下に落ちないようにフロートする必要があるようです。

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 でのテーブルベースのレイアウトについて説明している記事がいくつかあります。

于 2011-10-27T18:06:41.900 に答える