макеты для того, чтобы видеть как и что нужно сверстать

определяетесь в каком редакторе верстать
берёте свои знания по HTML & CSS
смотрите на макет (если не умеете, то научитесь хоть "открывать фотошоп")
начинаете верстать (всё что не знаете как, или не понимаете почему - сначала гуглите, это тоже не просто так все пишут/советуют)

несколько способов которые могут помочь/сам и когда начинал, и сейчас так делаю:
в случаях когда нужна точность верстки вплоть до 1px, заливайте background (блоков, столбцов, ...) разными цветами, потом делаете скрин, и в фотошопе увеличиваете и линейкой проверяете что, где и сколько (лучше сразу учиться верстать точно, а не винить дизайнеров из-за своей беспомощности)

если код большой и непонятно в чём ошибка, то лучше искать её вырезая и проверяя отдельные части кода копируя их в другой/чистый файл/страницу (например если много таблиц в таблицах, вырезать по таблице и проверять этот код отдельно, заливать background делать скрины, и смотреть на них в фотошопе) то есть поиск ошибки методом исключения


в большинстве случаев так и есть

пс:совет, старайтесь не выкладывать свои файлы тут во вложении или где-нибудь ещё
не всем нравиться скачивать непонятно что
вы же написали что PSD макет, что тяжело сделать из него jpg и прикрепить как картинку..

сначала создайте базовую структуру страницы, то есть ее макет. http://htmlbook.ru/layout . в архиве приложена уже какая-то верстка, я так понимаю она не ваша? кстати, насчет шрифтов. если в макете попадается нестандартный шрифт, не пугайтесь, чаще всего его подключить не займет и пяти минут (при условии что шрифт у вас уже имеется). вот хорошие сервисы для этого http://www.fontsquirrel.com/fontface/generator и http://fontface.codeandmore.com/

Adobe Photoshop - Как разрезать макет сайта
Вот полезная ссылочка для новичков. Сам по ней учусь. Там еще много интересных уроков

Спасибо, но фотошоп открывать я умею.



Я не думал, что на таких форумах люди могут выкладывать файлы с вирусами, мне кажется, большинство людей тут за помощью. Буду теперь это учитывать. Сейчас приложу JPG.

Да, эта верстка не моя. Но я должен сверстать такой же сайт, как и на той верстке.

Спасибо большое, думаю они мне пригодятся.

Спасибо большое,что ответили. Думаю найдется там полезное и для меня.

как это делаю я. :)
0. Проверяем поступление предоплаты на счет. :) (опционально)
1. Открываю фотошоп, загружаю макет, в целом оцениваю сложность.
2. Иду на кухню, делаю чашку кофе, возвращаюсь.
3. Более тщательно изучаю макет. Мысленно разбиваю на логические блоки.
4. Блин, булочки забыл - на кухню, за булочками.
5. Ну вот, можно работать. Отключаем все слои, кроме фоновых.
6. Нарезаем фоновые картинки (общий фон для сайта), часто это однопиксельные градиенты, либо крупные, неоднородые изображения.
7. Включаем слои с изображением шапки. нарезаем. В голове при этом уже складывается приблизительная структура HTML
... Повторяем для остальных элементов.
8. Булочки кончились - опять к холодильнику. )
9. Берем заготовку с html страницей, наиболее подходящую под данный макет, открываем текстовый редактор на втором монике, чтобы было видно картинк и код одновременно.
10. описываем весь html (приблизительно, отдельные элементы потом допишем)
11. Запускаем программку или вручную переписываем все классы, присутствующие в html, в файл CSS /
12. по порядку описываем стили для классов.
13. на этом этапе страница уже практически готова, и правильно отображается в современных браузерах.
14. кофе кончился, идем на кухню за очередной порцией.
15. открываем страницу в FF и с помощью расширений pixelperfect и firebug подгоняем верстку, чтобы она максимально соответствовала макету.
16. остается только пофиксить баги в отсталых браузерах, если клиент не против - используем изящную деградацию. (квадратные углы вместо круглых, непрозрачность вместо полупрозрачности, png8 вместо png24 и прочее). Если против - пробуем убедить (правда делаем это перед началом работы). Не получается убедить - используем костыли.
17. ждем поступления денег на счет.

а что за программка?

Ну да, на словах вроде все просто. Но когда берешься выполнять верстку, возникает куча вопросов. Спасибо что ответили и поделились своим опытом :rolleyes:
Да и еще, если кто может дать ссылочки на простенькие PSD макеты, которые можно сверстать новичку, то оставьте пожалуйста их тут. Спасибо.