Дизайн и верстка. Часть вторая

чт, 19.06.2008 20:54 :: olk

Перевод HTML макета, в тему Drupal.
(при этом желательно в макете вывести все предполагаемые к использованию регионы и поместить в эти регионы какую-либо информацию, для того, что бы визуально контролировать процесс).
В принципе ничего сложного в этом нет, есть маленькие хитрости :)
Далее идут "фишки" которые использую я, при этом не претендую на то, что это единственно верный путь :)

Первое, еще при верстке HTML макета, для того что бы в стилях не быть избыточным, я собрал все "дефолтные" стили Drupal-а в один файл и "подцепил" его к своему макету (Делается это просто, поиск по каталогу Друпала файлов с расширением .css и копи-паст в один файл).
Зачем я это делаю, да просто что бы использовать максимум предопределенных классов в своем макете
(например зачем прописывать свой класс с display:inline; или display:block;, когда есть container-inline и clear-block соответственно).

Еще при верстке макета я обычно разделяю все определение стилей на несколько файлов.
layout.css - Общее определение взаимного расположения элементов дизайна и регионов.
metrics.css - Опеделяет размеры элементов, отступы и т.п.
color.css - Определяет цветовую схему дизайна.
predef.css -файл "дефолтных" стилей Drupal-а.

Второе, при создании темы важно взять готовую тему для примера, это может быть например zen или тот-же garland, и помещаем (копи-пасте) свой макет прямо после тега <body>.
Далее процесс итерационный, переносим вывод контекста из нижней части в места где по идее он должен выводиться и контролируем полученный результат.
При этом не забываем, в настройках переключать блоки , отменять вывод тех или иных регионов, и смотреть, что из этого получается.

Ну и скриншот того что у меня получилось после конвертации макета в тему Drupal-а.
Опять же, пока это чисто css-ный дизайн, и графику "натягивать" мы на него начнем чуть позже.

Тут можно глянуть на скриншот

site_19_06_2008.jpg
Добавить комментарий
« Добавить комментарий
» Добавить комментарий