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转换

回答

相关问题