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: