Шаблоны для новичков. Урок 10. Методика создания шаблона

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

• «Что вижу, то и пою». Верстка происходит без каких-либо идеологических принципов. Главное добиться правильного отображения элементов. Используются style, html-код произвольный, без учета семантики, все блоки в html-коде связаны друг с другом. В такой вёрстке разберется только создатель шаблона. Данный вариант преобладал несколько лет назад.
• Использование grid-фреймворка. CSS-фреймворк содержит уже готовые классы, поэтому html-код создается уже с учетом рекомендованных правил. И хотя верстка строится уже с учетом модульной сетки (что уже хорошо), но мало приспособлена к особенностям CMS и несемантична по сути.
• Современный подход базируется на том, что каждый блок сайта имеет некое функциональное наполнение, но при этом модульная сетка простая и может быть полностью произвольной. Верстка осуществляется аля-строками, которые могут содержать ячейки (блоки).

Первый вариант совершенно нет смысла рассматривать, он самый трудозатратный и некачественный.

Второй (grid-фреймворк) - имеет право на жизнь, но только если сайт достаточно простой и где нет каких-то сложных функциональных блоков. Главная проблема этого продхода в навязывании несемантичного html-кода и ошибочном предположении, что верстка происходит колонками. Например, известный css-фреймворк 960 Grid System предлагает оформлять HTML вот по такой схеме:

<div class="container_12">
  <div class="grid_7 prefix_1">
      <div class="grid_2 alpha">
          ...
      </div>
      <div class="grid_3">
          ...
      </div>
      <div class="grid_2 omega">
          ...
      </div>
  </div>
  <div class="grid_3 suffix_1">
      ...
  </div>
</div>

То есть совершенно непонятно что это за grid_3? Может быть сайдбар? А может подвал? То есть семантикой здесь и не пахнет.

И почему-то предполагается, что весь макет сайта строится на колонках, которые используются в типографской верстке (при макетировании), но не имеют никаких аналогов в HTML.

960 Grid System я привожу только как пример. Фреймворков много, но почти все они имеют модуль grid, построенный по аналогичному принципу. Ну и отстутствие гибкости при вёрстке. Частая задача - поменять общую ширину сайта, или, скажем, сайдбара. При использовании grid-фреймворка придется менять и HTML-код, хотя очевидно, что это всего одно-два правила в CSS.

Современный подход

С учетом того, что большинство вебмастеров отказались от поддержки старых браузеров, прежде всего IE6 и IE7, то верстка становится проще и быстрей. Если раньше нужно было особо позаботиться о том, чтобы сделать скругление углов, то сегодня мы просто применяем border-radius. Пользователи IE будут в «пролёте», но это уже их проблемы. Никто не будет в здравом уме работать в программе 3-5 летней давности, когда рядом находятся современные, бесплатные и намного более функциональные аналоги.

Современная верстка предполагает использование CSS3 и HTML5. Понятно, что какие-то «экзотические» свойства можно пока не трогать, но наиболее востребованные, вроде скругления углов, градаций и теней можно смело применять в работе.

Модульная сетка

Модульная сетка является обязательным атрибутом в работе верстальщика. Но под этим понятием нужно понимать не типографские колонки (и их глупые html-подражалки), а то что модульная сетка состоит из функциональных ячеек (блоков). Не нужно заботиться о всяких grid_7 - вместо этого каждый блок имеет четкое семантическое именование, например content, sidebar, footer.

В этом подходе есть огромный плюс в том, что практически вся вёрстка сосредоточена в CSS. HTML выстраивается один раз и больше не меняется.

Чужая верстка - зло

Очень часто в качестве макета предоставляется какой-то уже сверстанный шаблон (вроде демо-версий в каталогах шаблонов).

Верстальщик, который первым делом изучает готовый код шаблона, совершает гиганскую ошибку: как показывает опыт, код может быть объёмным и некачественным. Нужно быть реалистом: высококлассных html-кодеров не так и много, большинство из них работает по заказам напрямую и не выкладывает свои работы в виде шаблонов. Остальные же позволяют себе «вольности» - код может быть ошибочным и избыточным. Потом это всё бездумно копируется из одного шаблона в другой...

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

Чеклист для создания шаблона

Верстальщик - не дизайнер и не художник. В его задачу входит только перенос готового визуального макета в HTML/CSS-код. Но, чтобы сделать это быстро и качественно, необходимо следовать определенному алгоритму действий. Если начать верстать хаотично, то ни к чему хорошему это не приведёт.

Вот несколько моих правил.

• Верстка начинается с построения модульной сетки. Любой дизайн разбивается на строки. Строки на ячейки (блоки).
• Каждый блок сопровождается wrap-блоком. Это не только метод «сглаживания» особенностей блочной модели HTML, но и чисто практическое значение: дополнительный блок может быть использован для отступов, фонов и выравниваний в любое время без переверстки.
• Верстка происходит от общего к частному. Вначале выставляются стили браузера, после контейнера, далее контейнер шапки, main, подвала. Только после этого двигаемся «вглубь»: контент, сайдбар и т.д. Категорически нельзя вначале делать стили внутренного блока, а потом заниматься его контейнером.
• Первым делом выставляются размеры, после - оформление текста, фон. Иногда бывают ситуации, когда блок зависит от фона, например при иммитации колонок. Такие задачи решаются одновременно: делаем размер блока, под него фон и - конечная корректировка.
• Вначале верстаются готовые html-блоки. Например content и sidebar выводит MaxSite CMS сама, а какой-то свой вариант шапки нужно ещё сделать.
• Лучше всего задать стили простых блоков, после заниматься сложными. Скажем задать цвет ссылок в подвале - это пара css-свойств. А вот расположение счетчиков - более сложая задача - ставим её приоритет ниже.
• Придумайте свой чеклист (todo). Свой вариант я разместил в Вики: Чеклист на создание шаблона.
• Используйте инструменты, облегчающие вёрстку. Это могут быть коллекция предопределенных css-свойств или какой-то оформительский css-фреймворк. С появлением опыта переходите на верстку LESS - он здорово упрощает написание CSS.

Используем HTML-код из main.php

Поскольку шаблон мы делаем для MaxSite CMS, то HTML-код модульной сетки уже находится в main.php. Этот вопрос мы уже рассмотрели раньше, поэтому далее по тексту я буду приводить тэги, классы и стили ориентируясь на него.

Моделирование модульной сетки

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

На картинке я отметил основные блоки, кроме общего контейнера. Общий контейнер - это div.all-wrap. А вот div.all, если его не трогать, будет совпадать с BODY. Фон браузера задается в BODY.

Здесь, в общем-то, BODY и div.all по сути будут одним блоком, поскольку их ширина одинакова (100%). «Двойной» блок браузера позволяет реализовывать «фишки» с прозрачным фоном: для div.all можно использовать PNG24 с прозрачностью, который накладывается на фон BODY.

Фиксированая ширина сайта задаётся у div.all-wrap, который центрируется с помощью margin: 0 auto.

Второй вариант имеет одно принципиальное отличие - шапка и подвал должны быть 100%-ширины (из-за фона). Здесь div.header и div.footer будут растянуты по всей ширине браузера, а для позиционирования содержимого используются их wrap-блоки (margin: 0 auto).

При этом есть один нюанс, который сразу следует учитывать. Фон блока может быть задан как для всех компонентов одновременно, так и для выборочных. На этой картинке фон шапки и подвала задан в div.header и div.footer (для всех компонентов). Мы видим, что в качестве фона используется изображение. Но в шапке возможна ситуация, когда высота первого компонента может меняться динамически. Из-за этого содержимое может сместится ниже или выше фона, что разрушит дизайн.

Если предполагается такой вариант, то ширина div.header и его wrap-блока должна быть 100% ширины. Соответственно, позиционирование компонента полностью ложится на его собственные плечи с помощью «margin: 0 auto»

Что касается div.main, то с ним достаточно просто. Поскольку по его краям нет фона, то этот блок можно спозиционировать сразу по центру браузера. Внутренние div.content и div.sidebar располагаются уже внутри него обычным способом (через float).

Компоненты в модульной сетке

В общей модульной сетке не нужно задавать блоки компонентов! Я постоянно встречаюсь с ситуацией, когда верстальщики лезут в main.php и лепят там что-ни-поподя. Это ошибка: возможностей main.php хватит под 99% задач.

Вторая ошибка - зацикленость на компонентах default-шаблона. Эти компоненты - лишь элементы одного конкретного шаблона. Совершенно нормально, когда другой шаблон не будет их поддерживать. Правило одно: в шаблоне присутствуют только те компоненты, которые будет корректно отображаться.

Если для шаблона можно использовать default-компонент, то делается его копия и дальше файл редактируется в своем шаблоне произвольным образом!

На начальном этапе создания шаблона, как правило, компоненты шапки и подвала не существуют. В нашем первом примере в шапке должны быть компоненты:

• логотип, сбоку возможен баннер,
• меню и справа поиск,
• слайдер,
• блок выбраных записей.

Пока их нет, делаются файлы-заглушки для компонентов (пустые php-файлы). После отладки основных стилей, можно приступать реализации каждого компонета.

Где располагать CSS-стили

Тут очень просто. Все стили лучше всего располагать в var_style.css. При том автоматом будут доступны стили default-шаблона с массой css-хелперов, которые смело можно использовать в компонентах, в админ-панели и т.п. Лишать этой возможности клиента как минимум, глупо.

Файл var_style.css копируется из default-шаблона или, со временем, будет уже своя заготовка.

Итого

Кратко схема:

1. Взяли визуальный макет сайта.
2. Наложили на него модульную сетку (в программе, тетрадке - всё равно).
3. Начальные действия: файлы, каталоги.
4. Сверстали модульную сетку.
5. Для компонентов используем файлы либо из default-шаблона, либо заглушки.
6. Верстаем content и сайдбары.
7. Выставляем основные стили текста.
8. Делаем компоненты. От более простого к сложному.
9. Программирование, например особый вывод на главной.
10. Конечная отладка.

««« Урок 11 | Урок 9 »»»