Перетворення PSD на XHTML/CSS

Якщо у мене є PSD і намагається з'ясувати, що краще diminsions використовувати для перетворення HTML, що було б краще. Просто зробіть PSD розмір зображення?

Я маю свій сайт і сторінку, яка має виглядати нижче.

Website: http://kansasoutlawwrestling.com

Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

Я пішов в psd2htmlconverter.com заплатив 3 баксів і отримав щось, але html і CSS показує правильно, але його не розділені, як це має бути.

http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

Але я дійсно намагаюся відпрацювати головний веб-сайт css.

2
Ну, це був дизайн, який я заплатив комусь створити. Я просто намагався отримати більше досвіду.
додано Автор Jeff Davidson, джерело
Його не дешевий дизайн. У мене була хороша компанія, дизайн мені щось дуже хороше, я думаю. Просто з дизайном не впевнений, що найкращий спосіб йти про кодування xhtml/css.
додано Автор Jeff Davidson, джерело
Якщо ваш PSD становить 1х1 піксель, ваш підхід може виявитися проблемою.
додано Автор RedFilter, джерело
Як ми повинні знати, що краще для вашої цільової аудиторії?
додано Автор Sparky, джерело
Я не знаю, чи розумію я вас добре, але зазвичай PSD робиться з певною сіткою. Отже, ви вже маєте певні розміри. Якщо ви маєте повністю випадковий розмір у PSD, це може бути важко розрахувати всі розміри правильно.
додано Автор Ivan Ivanić, джерело
Це питання занадто широке. Яка ваша мета? Який тип користувачів ви хочете підтримувати? Можливо, 1024x768 буде найнижчою роздільною здатністю, яку потрібно підтримувати? Користувачі мобільних пристроїв? Наскільки велика це psd? Я не маю уявлення, що вам може знадобитися для побудови. Ви запитуєте це, тому що ви наймаєте дешеву службу psd до xhtml? Якщо це так, не питайте нас - запитайте людей, яких ви наймаєте.
додано Автор Steve Adams, джерело

1 Відповіді

Не зовсім впевнений, що ви просите, але якщо ви говорите про те, як нарізати PSD, я б не нарізав все на встановлені розміри. Нехай макет диктуватиме, куди потрібно нарізати, і спробувати зрізати його логічно за розділом, таким чином, щоб повторне збирання з HTML/CSS було легким.

Почніть з розумового занурення в розкладку, наприклад, верхній банер, ліва колонка, правий стовпець, область вмісту, колонтитул тощо.

Це може допомогти створити скелет у HTML/CSS, тому ви маєте уявлення про те, як потрібно прорізати шаблон. Це добре працює, тому що ви не просто нарізаєте його випадковим чином, а скоріше розрізаєте його так, щоб він містився у створеному вами скелеті. Очевидно, вам може знадобитися нарізати велике зображення, як верхній банер, на кілька частин, але це насправді нічого не змінює - ви все ще підбираєте розділи шаблону до розділів вашого скелета.

Ось щось, що я зібрав разом дійсно швидко, лише щоб проілюструвати, як розрізати зображення. Я б не використав свій точний приклад, але він повинен направити вас у правильному напрямку:

Це, мабуть, найкраща порада, яку я можу дати з наданою інформацією. Я роздам свою відповідь, якщо ви надасте більше деталей.

EDIT

Дивлячись на джерело на вашій сторінці, схоже, вам потрібно просто плавати div # middle , щоб права бічна панель не опускалася нижче.

Розкладки таблиць CSS дійсно хороші для такого роду речей. Дайте щось на зразок цього знімка:

  

<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:

2
додано
Наприклад, правий бічний панель - це pushdown, який він не повинен бути. Можливо, ми розглядаємо два різних розміру екрану.
додано Автор Jeff Davidson, джерело
hmm ok зараз частина що збирається турбувати мені. отримувати мої divs вирівняні правильно.
додано Автор Jeff Davidson, джерело
Мінус CSS робить мій HTML добре виглядати до цих пір?
додано Автор Jeff Davidson, джерело
Я все це збентежено.
додано Автор Jeff Davidson, джерело
Не велика, ніщо не пов'язане з таблицею, окрім як для фактичного відображення даних.
додано Автор Jeff Davidson, джерело
Тут щось не так. Не дивлячись прямо на мене.
додано Автор Jeff Davidson, джерело
додано Автор Jeff Davidson, джерело
Я зробив поплавок ліворуч, і це, здавалося, не вирішило проблему.
додано Автор Jeff Davidson, джерело
Я борюся з тим, як вона виглядає так далеко. З мого екрану його не виглядає добре.
додано Автор Jeff Davidson, джерело
У мене вже є нарізаний образ і намагається придумати код xhtml/css, як описано в моєму пості. У мене це почалося, але не впевнений, якщо мені потрібно розширити свою ширину або що. kansasoutlawwrestling.com
додано Автор Jeff Davidson, джерело
Різновид застряг тут. Ідеї ​​після перегляду мого зображення, розміщеного вище.
додано Автор Jeff Davidson, джерело
додано Автор Jeff Davidson, джерело
У мене є PSD. Я не хороший слайсер. Щоб бути чесним з макетом я люблю це але його трохи тяжкий рахувати що що краще зробити.
додано Автор Jeff Davidson, джерело
Я дійсно думаю, що ви повинні використовувати мою пропозицію вище. Вона працює дуже добре.
додано Автор James Johnson, джерело
Так, схоже, що ви почати добре. Просто продовжуйте користуватися передовим досвідом і зберігайте оновлення стилів для узгодженості між сторінками.
додано Автор James Johnson, джерело
Про що тут можна плутати? Ви не повинні використовувати його ... це просто гарна альтернатива плаваючій і новій техніці макета. Наприкінці дня, це все ще 100% css, так що ви перебуваєте в хорошій формі. Найбільшим недоліком традиційних таблиць є те, що вони повільні до рендеринга, але це непросто тут.
додано Автор James Johnson, джерело
Таблиці! = Таблиці CSS. Ви б добре пам'ятали це.
додано Автор James Johnson, джерело
Не використовуються таблиці. Він використовує властивість відображення CSS2, і він призначений для заміни необхідності плаваючих div.
додано Автор James Johnson, джерело
Я опублікував приклад, щоб ви йшли. Сподіваюся, що це допоможе.
додано Автор James Johnson, джерело
На жаль, забув згадати, що праву бічну панель слід також плавати ліворуч.
додано Автор James Johnson, джерело
Що трапилося з тим, що ви досі маєте?
додано Автор James Johnson, джерело