PSD到XHTML / CSS转换

时间:2011-10-27 17:52:56

标签: html css xhtml photoshop psd

如果我有一个psd并试图找出用于html转换的最佳diminsions什么是最好的。只是做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上工作。

1 个答案:

答案 0 :(得分: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中基于表格的布局的文章: