PSD轉換爲XHTML/CSS轉換

-2

如果我有一個psd，並試圖找出什麼是最好的diminsions用於html轉換什麼是最好的。只需做psd圖片大小？PSD轉換爲XHTML/CSS轉換

我有我的網站和我的圖片應該看起來像下面的頁面。

網站：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的工作。

來源

2011-10-27 Jeff Davidson

如果你的PSD是1x1像素的，你的的方法可能會證明是一個問題...... – RedFilter

那麼這是一個我付錢給別人創作的設計。我只是想獲得更多經驗轉換。 –

我不知道我是否理解你，但通常PSD是用特定的網格記住。所以你應該已經預先定義了一些尺寸。如果在PSD中完全具有隨機大小，則可能難以正確計算所有尺寸。 –

不完全確定你在問什麼，但如果你正在談論如何切片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-27 18:06:41

我有psd。我不是一個好的切片機。說實話，我喜歡它的佈局，但要弄清楚什麼是最好的做法有點困難。 –

http://kansasoutlawwrestling.com/assets/images/wrestling.jpg下面是psd jpg –

這種卡在這裏。看過我上面張貼的圖片後的想法。 –

PSD轉換爲XHTML/CSS轉換

回答

相關問題