PSD 到 XHTML/CSS 的转换 [关闭]

Question

如果我有一个 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。

Answer 1

不完全确定你在问什么，但如果你在谈论如何对 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 中基于表格的布局：

• http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
• http://thinkvitamin.com/design/tables-the-next-evolution-in-css-layout/