Создаем шаблон для WordPress. Шаг 1: анализ psd-макета

Итак, сегодня я открываю серию публикаций, посвященных созданию собственного шаблона для вашего блога на платформе WordPress. В ходе изучения данной темы мы пройдем путь от рисунка до функционирующего дизайна вашего блога. Интересно? Тогда не забудьте подписаться на обновления моего блога по RSS, дабы не пропустить ничего нового.

Вы в свою очередь можете задавать свои вопросы в комментариях или присылать их на e-mail. На все вопросы я постараюсь ответить. Кроме того, на ваши вопросы ответит, а также окажет практическую помощь в верстке, приглашенный мною мой друг – Игорь Чайка, работающий в данном направлении в сети уже более 6 лет.

Создание обычного HTML шаблона или шаблона под CMS начинается с анализа PSD-макета.

PSD-макет, это отображение сайта построенное в графическом редакторе AdobePhotoshop.

Макет вы можете нарисовать в любом другом графическом редакторе, никто вас не обязывает пользоваться Photoshop’ом. В своих статьях я буду работать именно с ним.

Рисунок 1:

На рисунке 1 представлен макет для создания шаблона Wordpress. Его можно условно разбить на четыре части: шапка (1), навигационный блок (2), информационный блок (3), футер (4). (Смотрите рис. 2)

Рисунок 2:

Предварительный анализ макета показал, что вёрстка будет по ширине статической, а по высоте резиновой. Макет будет находиться по ширине – в центре с белыми (FFFFFF) краями, по высоте – прикреплен к верхней части окна браузера. Минимальная ширина окна 1030 пикселей (все эти данные выясняются на начальном этапе у заказчика или дизайнера, при этом какие-то недочеты должны быть сразу обозначены и по ним разрешен вопрос).

Шапка (верхняя часть сайта) макета состоит с большой картинки, представленной на рисунке 3 и горизонтального навигационного меню.

Рисунок 3:

На картинке изображен баннер с названием нашей организации. Здесь необходимо уточнить у заказчика, будет ли данный элемент активным и вести, например, на главную страницу нашего будущего сайта.

Навигационное меню состоит из фонового градиента (градиент – вид заливки с заданной прозрачностью и цветом определенных ключевых точек), а также активных кнопок навигационного меню, которые при наведении на них меняют фоновую заливку. Большую сложность в реализации представляют активные кнопки, которые имеют цельную градиентную заливку вместо дублированного градиента. Реализация таких кнопок всегда требует тщательного планирования и нагромождения HTML кода с CSS стилями.

Навигационный блок (блоки сайта) состоит из трёх вертикальных навигационных меню, а также новостного блока. Реализация этой части не представляет никакой сложности. Все вертикальные меню однотипные, что дает возможность просто копировать код несколько раз созданный однажды. При этом какое-то редактирование будет минимальным. Заголовок каждого блока это скорее всего будет не изображение полностью, а фон и надпись на нем выполненная в ходе верстки.

Информационный блок (блок сайта несущий информацию пользователю) состоит из нескольких подразделов, но так как в этом блоке текст будет меняться в зависимости от страницы, то для нас самое главное прописать все стили, которые мы здесь видим: заголовок подраздела (Tahoma, 12px, #7e2b00, жирный), горизонтальная линия (1px, #8b4118), основной текст (Tahoma, 12px, #484848, нежирный), обрамление картинки шириной в 3px (#7e2b00). Основной проблемой при создании информационного блока будут смещения информационного блока на шапку и футер шаблона. Также нужно сделать левый край блока округлым. Но все это реально и дальше вы убедитесь в этом.

Футер (footer– нижняя сноска, низ шаблона) на макете имеет только фоновую заливку, созданную с градиента с лева на право, но правилом хорошего тона будет предусмотреть последующею модернизацию сайта и создать пустые блоки, которые можно будет заполнить баннером статистики или любым другим элементом.

Итак, в конце данной статьи хотелось бы обратить внимание на следующее:
- Если вы заказчик верстки, то вы должны максимально подробно изобразить и подготовить к верстке psd-макет. Данный макет может быть представлен и в 2-х вариантах:

А) Когда он в спокойном состоянии (вы не предпринимаете на сайте никаких действий);

Б) Активное состояние (вы наводите курсор мыши на разные элементы дизайна и при этом они меняют свой внешний вид).

Чем четче верстальщик поймет, что вы хотите увидеть, тем в итоге четче будет выполнено ваше задание.

- Если вы верстальщик, то максимально сконцентрируйтесь. Обращайте внимание на каждый элемент, на каждый пиксель дизайна. Если что-то вам непонятно, то уточняйте у заказчика.

Это был первый шаг к созданию своего шаблона для блога. На что еще стоило бы обратить внимание? Задавайте свои вопросы.

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

ОФФпост:

Вовочка, ты кого больше слушаешь, папу или маму?
- Маму!
- А почему?
- Она говорит больше... 🙂