Доброго времени суток 🙂
Для начала нужно определиться с тем какая будет ширина у нашего будущего шаблона. вариантов два. Ширина может быть фиксированная и резиновая. При фиксированной ширине основного контента постоянна, за частую - это 1000 пиксилей. При резиновой верстке, как вы догадались, постоянной ширины нет. Основной контент занимает все пространство страницы в зависимости от расширения экрана устройства, с которого просматривается данная страница.
Есть еще один момент, при резиновой верстке, можно установить минимальную ширину или максимальную. Такой пример использован на моем сайте Дизайн и разработка сайтов, темы WordPress.Я задал минимальную ширину в 1000 пикселей, а максимальную в 1200. Сайдбары справа имеют фиксированную ширину, а вот текстовая часть изменяет свою ширину относительно размеров окна браузера.
Для нашей будущей темы я выбрал вариант попроще с фиксированной шириной.К тому же, такой способ чаще используется вебмастерами и он имеет не малую популярность. Ширина будет составлять 1000 пиксилей.
Как известно основной контент состоит из трех частей.
В шапке располагаются основные теги, благодаря которым браузеры понимают Что делать с сайтом. Что именно это за теги мы рассмотрим позже, в следующих уроках. Также в шапке размещаются блоки и элементы, которые вы видите в самом верху сайта и которые одинаковы на всех страницах.
В основной части, будет выводится все содержимое блога. Тут располагается вывод записей и сайдбар.
Подвал как и шапка, на всех страницах одинаковый и в нем в основном выводится дополнительная информация о сайте, год основания, второе меню и тд. Все тоже зависит от Ваших нужд.
Для начала определимся с высотой шапки. Как и во всем, все зависит от вашего представления и задумки. В нашем будущем макете высота шапки будет примерно 125 пикселей. В ней будет располагаться лого, строка поиска, меню и название сайта.
Основная часть будет иметь левую сторону, в которой будет выводится все - содержание главной, страницы, записи и все остальное. Будет в основной части и правая сторона - Сайдбар.
Далее советую определиться с сайдбарами. Sidebar в дословном переводе с английского языка обозначает «боковая панель». Вы могли замечать на разных сайтах, что бывает левы или правый сайдбар или же оба одновременно. Их ширина зависит от Вашего желания. Чаще всего ширина сайдбаров в пределах 200-300 пиксилей, но опять же повторюсь, все зависит от Ваших нужд. Есть сайты, где таких сайдбаров вообще нет. В нашем шаблоне будет один сайдбар, он будет расположен с правой стороны и будет иметь ширину 250 пикселей. Все остальное пространство, а именно 1000-250=750 пикселей, будет занимать левая сторона основной части.
И последней частью будет подвал. Тут как и с шапкой, определяем примерную высоту и все что там будет находится. В нашей теме будет подвал высотой 100 пикселей и в нем будет просто название сайта и строка о копирайте - Все права защищены. Также будет выделено место под счетчики.
С основной структурой разобрались, теперь нужно нарисовать макет со всеми мелочами и конечным видом нашей темы. Для этого понадобится Photoshop. Как я писал в вступлении, знание данной программы приветствуется и не плохо Вам поможет в будущем. Постарайтесь ее изучить хотя бы на начальном уровне и попробовать пользоваться ней для создания макетов. Не обязательно уметь рисовать как художник и с помощью планшета создавать целые панорамы для сайтов. Просто освойте техническую сторону. Как рисовать прямоугольники и придавать им тот вид, который Вы сможете воплотить в CSS. Научитесь редактировать текст и придавать ему необычные стили. Я не буду в этом курсе углубляться в изучение Photoshop, но возможно когда-то и создам пару уроков о том что надо знать для создания макетов.
Если Вы совсем не знакомы с этой программой и у Вас пока что нет времени, чтобы тратить его на освоение Photoshop, можете для начала нарисовать все на обычном листе бумаги. Хотя бы просто схематично, дабы иметь направление в котором следует двигаться при верстке самой темы.
Я же создал простенький макет в Photoshop и готовый результат можете увидеть ниже.
Нажмите на изображение для увеличения.
Главная страница
Страница записи
После того как макет готов и Вы знаете что у Вас все уже готово, можно приступать к верстке. Но для начала нужно еще выполнить несколько небольших задач.
На этом первый урок закончен. Продолжение в следующем уроке курса.
