Блог Кировского строителя Интернет

Сегодня поговорим о следующем шаге создания сайта после дизайна, который подразумевает преобразование графического макета в код разметки Интернет страницы, порезка или верстка.

Итак, чтобы порезать страницу, нужно изучить её и проработать пошагово инструкцию, в какой последовательности будем преобразовывать PSD в HTML. Опытному верстальщику стоит только посмотреть пару минут на исходные макеты, чтобы план работ уже был в его голове. Начинающим советую взять листочек бумаги и прочертить сетку порезки блоков, если она отсутствует в PSD макете.

Я рекомендую верстать дивами и использовать таблицы только для вывода табличных данных.

Разумеется, если мы верстаем меню, градусник, различные полосы ссылок, то используем для этого списки.

Имея конструкцию типа ФИО и контактный номер телефона для этого было бы логичнее использовать теги микроформатов.

Использование конкретных тегов в верстке необходимо для правильного анализа данных поисковым роботом и логики человека.

Все используемые стили нужно выносить из HTML в отдельные таблицы стилей CSS.
Не нужно забывать про стандартные стили в поле вывода контента, в них включены стилизация параграфов, списков, таблиц для вывода данных и т.д. Кстати, использование тега переноса на новую строку целесообразно для области вывода контента, а в остальном желательно избегать его, кроме некоторых исключений.

Немаловажную роль при верстке страницы занимает оптимизация графики страницы и правильное с точки зрения SEO задание заголовков в нужные теги.

Из всего этого ясно, что хорошая верстка PSD макета — это верстка, сделанная с грамотным употреблением тегов, оптимизируемой графикой, легким и понятным кодом.

Спонсор поста: Магазин инженерной сантехники Сушилка.net. На сайте вы можете приобрести полотенцесушители водяные из нержавеющей стали. С легким паром!