PSD для преобразования XHTML/CSS

Если у меня есть 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.

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:

Другие вопросы по тегам