Введение в рисование Друпал-дизайна
Рисование дизайна и html-верстка дизайна для Друпала это разные профессии.
Строгановское училище ведет свою историю с 1825 года и готовит лучшие отечественные кадры художников-прикладников. Наивно ожидать, что технарь-друпальщик нарисует дизайн, хоть близко сравнимый с дизайном выпускника Строгановки.
Впрочем, так же наивно ожидать, что выпускник Строгановки сможет хорошо сверстать свой дизайн для Друпала.
Друпал - великая CMS. И сайты на Drupal заслуживают хорошего дизайна. Сделать его может только пара из профессионального рисовальщика и html-верстальщика.
Для лучшего результата рисовальщик Друпал-дизайна должен иметь представление о примитивах, которыми будет оперировать верстальщик Друпал-дизайна. Иначе рисовальщик может нарисовать дизайн, который будет невозможно сверстать в Друпале. Например, раскиданное по секторам круга меню будет сложно сверстать в дизайне Друпала, который выдает меню или в столбик или в строчку.
Данная электронная книга поможет:
Книга написана не для друпальщиков, а для рисовальщиков и верстальщиков, не знающих Друпала.
Глава "Управление дизайном через админку"
В Drupal через админку можно гибко указывать, какую информацию и в каком месте страницы выводить.
Рисовальщик должен постараться нарисовать такой дизайн, который предусматривает вывод большинства информационных кирпичиков (элементов), управляемых через админку. И при этом дизайн должен красиво выглядеть при любом сокращенном наборе выводимых информационных кирпичиков.
Подробности на странице "Управление дизайном через админку".
Глава "4 файла-шаблона".
Для верстальщика каждый информационный кирпичик не абстракция, а вполне осязаемая переменная PHP. Друпал заполняет эту переменную HTML-кодом или оставляет пустой. Верстальщику нужно вывести содержимое этой переменной в нужном месте страницы.
Рисовальщик может нарисовать фантастической красоты дизайн. Верстальщик сверстает этот дизайн, а в местах вывода информации будет выводить содержимое нужного кирпичика.
Но рисовальщик должен знать, что верстальщик крайне редко вытаскивает содержимое кирпичика и правит его "напильником". Обычно содержимое каждого кирпичика верстальщик выводит "как есть", ровно в том виде, в котором Друпал выдал html-код этого кирпичика. Самое большее, это верстальщик может проанализировать кирпичик и если он пуст, то верстальщик не будет выводить элементы дизайна, окаймляющие кирпичик.
Рисовальщик должен в своем дизайне опираться на информационные кирпичики, которые может использовать в верстке верстальщик.
Полный перечень кирпичиков содержится в "4 файла-шаблона".
Глава "Друпал-верстка без знания Друпала"
Традиционно считается, что дизайн для Друпала должен делать друпальщик. Эта книга помогает рисовальщику понять, как устроен Друпал-дизайн и рисовать дизайн без знания Друпала.
Но верстальщик дизайна для Друпала также не обязан знать Друпал. Верстка Друпал-дизайна лишь на 10% требует знания специфики Друпала, остальное - обычная html-верстка.
Быстрый старт для html-верстальщика описан на странице
"Друпал-верстка без знания Друпала"
..........................
Макс Кириленко, подбор названий и доменов
В Drupal через админку можно гибко указывать, какую информацию и в каком месте страницы выводить.
Рисовальщик должен постараться нарисовать такой дизайн, который предусматривает вывод большинства информационных кирпичиков (элементов). И при этом дизайн должен красиво выглядеть при любом сокращенном наборе выводимых информационных кирпичиков.
Перечислим места в админке, где для каждого информационного кирпичика задаются:
Вывод информации из форума, блога,... в центральную колонку пока не трогаем. Интересует только вывод информации вокруг центральной колонки (шапка, левая-правая колонки, подвал).
В админке Друпала нашлось 5 мест, через которые задается показ информации вокруг центральной колонки.
1. О сайте, admin/settings/site-information :
2. Настройки темы дизайна, /admin/build/themes/settings
Можно выбрать одну тему дизайна из всех загруженных на сайт.
Можно для выбранной темы включить или выключить отображение определенных информационных кирпичиков (элементов) страницы.
Можно настроить показ логотипа:
Можно включить или отключить отображение имени автора сообщения и даты создания в материалах определенного типа.
Настройки логотипа
Настройки иконки "favicon"
4. Блоки, /admin/build/block
В блоки модули Друпала выводят небольшую компактную информацию, обычно 3-7 строк.
В основном это всевозможные выжимки из статей и информации о пользователях. Любое созданное меню тоже может быть выведено в блок. Можно также самому создать блок и заполнить его самостоятельно.
Для каждого блока можно указать 6 регионов, где блок будет показываться:
Вместе с указанием куда выводить блоки можно задать их взаимное положение с соседскими блоками.
Можно указать, на каких страницах сайта блок будет показываться, а на каких скрываться.
Например, на Razgonka.ru используются такие блоки:
Левая колонка
Правая колонка
4. Список меню, задается через /admin/build/menu .
Меню это набор ссылок в древовидной структуре. Обычно выводится в вертикальном виде в отдельном блоке в левой или правой колонке. Надпись блока будет совпадать с именем меню.
На сайте может быть несколько разных меню.
5. Основные и дополнительные ссылки, /admin/build/menu/settings :
Основные и дополнительные ссылки - плоский перечень ссылок (без древовидной структуры). Самостоятельно создать их невозможно. Они делаются как срез верхних уровней каких-то меню.
Часто выводят основные и дополнительные ссылки в горизонтальном виде в верхней части сайта. Например, структуру верхних горизонтальных меню, подобную http://www.amazon.com/ можно было бы настроить в Друпале так.
Задать меню:
- amazon.com
- - Gift Certificates/Cards
- - international
- - Hot New Releases
- - Bestsellers
- - today's deals
- - sell your stuff
- Your amazon.com
- - your browsing history
- - recommended for you
- - rate these items
- - improve your recommendations
- - your profile
- - learn more
- See all 42 product Categories
- Your Account
- Cart
- Your Lists
- Help
Назначить через /admin/build/menu/settings , чтобы первый уровень меню выводился в качестве основных ссылок, а второй уровень меню выводился в зависимости от выбраннной ссылки из первого уровня меню.
Иногда в верхней части сайта выводят основные ссылки. А внизу, в подвале, второстепенные ссылки, сделанные независимыми от основных ссылок.
В некоторых сайтах вообще не используют горизонтальные меню ни вверху сайта, ни внизу.
Вывод информации в центральную колонку (форум, блог,...) пока не трогаем. Пока интересует только вывод инфорации вокруг центральной колонки (шапка, левая-правая колонки, подвал).
..........................
Макс Кириленко, подбор названий и доменов
Видимость кирпичка в дизайне
Показывать админо-неуправляемые кирпичики или нет решают рисовальщик с верстальщиком. Например, хлебные крошки "Вы здесь:" могут быть включены в дизайн сайта, а могут быть и не включены. В случае когда рисовальщик с верстальщиком решат включить хлебные крошки в дизайн, администратор сайта не сможет удалить их через админку.
Видимость админо-управляемых кирпичиков зависит от решения совместного решения всех трех сторон. Например, рисовальщик должен заложить для формы поиска место дизайне, верстальщик сверстать форму поиска в теме дизайна. А администратор должен разрешить через админку отображать форму поиска на сайте.
Но если рисовальщик или верстальщик решат не выводить какой-то админоуправляемый кирпичик, то даже если кирпичик будет включен на показ через админку, на сайте он все равно не появится.
Места, где задается тема дизайна
Дизайн в Друпале задается с помощью четырех .php файлов, которые есть в любой теме дизайна. Каждый файл выдает html-код.
Основной файл шаблона:
Он выдает html-код, который пересылается браузеру при просмотре страницы.
3 дополнительных файла шаблона:
Подробнее о каждом файле.
1. Page.tpl.php задает общее расположение информации на странице. Когда мы смотрим в браузере страницу Друпал-сайта, мы видим html-код, выданный Page.tpl.php.
Page.tpl.php опирается на html-код, выданные тремя другими php-файлами темы дизайна и на html-код, содержащийся в других информационных кирпичиках.
Характерно, что на разных страницах html-код от 3-х дополнительных .tpl.php-файлов может встретится разное количество раз:
2. Node.tpl.php выдает html-код ноды (статьи).
Если статья показывается на своей странице, то она будет дана в полном виде, возможно даже с комментариями. Html-код страницы обычно выдается в центральной колонке.
Если статья показывается на других страницах среди списка похожих статей (например, стать в блоге), то статья выводится в сокращенном виде, только первые 600 символов и без показа комментариев. Друпал с помощью файла Node.tpl.php собирает 10 html-кодов сокращенных страниц и выдает их друг за другом в центральной колонке. Рисовальщик должен предусмотреть, чтобы ноды (статьи) в сокращенном виде хорошо визуально разделялись друг от друга.
3. Comment.tpl.php выдает html-код комментариев и их обрамление дизайном. Дизайн комментариев должен быть прорисован так, чтобы подряд выданные комментарии хорошо смотрелись друг под другом. Друпал поддерживает выдачу комментариев в древообразном виде со сдвигом. Рисовальщик может отобразить такую возможность в дизайне.
4. Block.tpl.php отображает html-код информации, выводимой в блок, включая html-оформление дизайна блока.
В колонке html-код блоков выводится друг за другом. Верстальщик может задать обрамление блок через файл Block.tpl.php. Верстальщик может задать оформление колонки блоков через файл Page.tpl.php. Но верстальщик не может разнообразить переход между блоками. Друпал на основе Block.tpl.php сгенерирует html-коды нескольких блоков и расставит их подряд.
Единственная возможность для верстальщика разнообразить переход между блоками это вставить html-код всей колонки в таблицу, а в таблице фоном пустить какой-нибудь графический элемент с наклонной линией. Тогда переходы между блоками не будут смотреться однообразно.
Если нужно разнообразить переходы между блоками только в левой колонке, то можно использовать для разнообразия прижатую влево фоновую картинку всего сайта.
..........................
Макс Кириленко, подбор названий и доменов
Полный список переменных, употребляемых в файлах шаблонах *.tpl.php:
http://docs.drupal.ru/doc/peremennye_v_s...
Некоторые из них носят технический характер и нужны только верстальщику, но не рисовальщику. Например:
$closure: Содержит код, который должен быть в конце кода страницы; используется JS-скриптами, которые вызываются после полной загрузки страницы
Для удобства освоения материала рисовальщиком разделим переменные на 4 группы.
Переменные, управляемые через админку
Это переменные, задающие "шапку" сайта. Их все надо постараться отразить в дизайне.
$site: Наименование сайта; заполнено всегда
$logo: Путь к файлу логотипа; определяется в настройках темы
$site_name: Наименование сайта; если отображение наименования запрещено в настройках темы, то переменная будет пустой
$site_slogan: Слоган сайта; если отображение слогана запрещено в настройках темы, то переменная будет пустой
$search_box: True(1), если в настройках темы разрешен блок поиска
$primary_links (array): Массив, который содержит список т.н. "первичных ссылок" (обычно - главное меню сайта)
$secondary_links (array): Массив, который содержит список т.н. "вторичных ссылок" (обычно - подменю одного из пунктов главного меню или независимое от главного "вторичное" меню сайта)
$mission: Миссия сайта; если отображение миссии запрещено в настройках темы, то переменная будет пустой
$footer_message: Текст "подвала" сайта (футер); если отображение подвала запрещено в настройках темы, то переменная будет пустой
Переменные, не управляемые через админку
Эти переменные заполняются Друпалом в зависимости от выводимой страницы.
Переменная $content выводится в центральную колонку, обычно это центральная ячейка таблицы. В центральной колонке выше $content обычно выводятся еще 3 переменные:
Переменные без визуального образа
Есть еще 3 переменные, которые не имеют визуального образа. Они помогают верстальщику сориентироваться, как выводить информацию на странице:
Рисовальщик об этих переменных может не беспокоится и знать о них только для общего образования.
$is_front: True(1), если отображается главная страница сайта (корень сайта). Может использоваться, чтобы выдать шапки разного размера на главной и второстепенных страницах сайта.
$layout: в зависимости от блоков, выведенных в левую, правую колонки, эта переменная принимает 4 значения
$title: Заголовок; обычно заголовок ноды; это НЕ заголовок всей страницы
Технические переменные
Их нужно знать верстальщику, но не обязательно знать рисовальщику.
$closure: Содержит код, который должен быть в конце кода страницы; используется JS-скриптами, которые вызываются после полной загрузки страницы
$directory: Каталог (путь к каталогу), в котором расположена данная тема; к примеру: themes/box_grey или themes/box_grey/box_cleanslate
$head: код html, который Друпал генерирует функцией drupal_get_html_head() (используется для динамического добавления JS-скриптов в код страницы)
$head_title - Текст, отображаемый как заголовок страницы.
$help: Текст "конктекстной помощи"; обычно генерируется модулями, через hook_help; к примеру - тексты помощи для элементов формы ввода ноды
$language - Язык сайта.
$onload_attributes: Onload tags to be added to the head tag, to allow for autoexecution of attached scripts.
$search_button_text: Перевод текста на кнопке формы поиска
$search_description: Перевод описания для формы поиска
$search_url: URL страницы, на которой был инициирован поиск
$styles: html для загрузки CSS-файлов
..........................
Макс Кириленко, подбор названий и доменов
Node.tpl.php
Этот файл шаблона используется для отображения ноды (статьи) - как в режиме списка, так и в режиме "одиночного отображения" (конкретной ноды).
Перечислим переменные, о которых надо знать рисовальщику.
Видимые Переменные$title : Заголовок ноды
$picture : Аватар автора (код html); переменная непуста, если аватары пользователей разрешены через админку в настройках темы. Включение аватара управляется через админку.
$terms : Отформатированный список (html) терминов таксономии (классификации)
$name : Автор (отформатированная ссылка)$date : Дата создания (отформатированная)
$content : Содержимое ноды (в режиме "одиночного отображения); Выдержка (teaser), в режиме списка нод$node_url : Путь к ноде (URL). Если нода выводится полностью, то в ее конце можно разместить ссылку на страницу, где располагается нода.
$links : Список "контекстных" ссылок для данной ноды ("Редактировать", "Удалить" и прочее)
Технические переменные,
Нужны только верстальщику.
$taxonomy (array) : Массив отформатированных (html) ссылок для
терминов таксономии; в отличие от содержимого переменной $terms, это
именно массив
$node (object) : Обьект ноды, содержащий все доступные в данном контексте поля
$main : True(1), если Друпал находится в режиме отображения списка нод (отображает не конкретную ноду, а список нод, обычно выдержками)
$sticky : True(1), если нода имеет статус "закреплена" (sticky)
$page : True(1), если Друпал находится в режиме "одиночного отображения" (отображает не список нод, а конкретную ноду)
$submitted : Translated text, if the node info display is enabled for this node type.
..........................
Макс Кириленко, подбор названий и доменов
Comment.tpl.php
Этот файл шаблона используется для отображения конкретного комментария (не списка комментариев). Список комментариев будет подверстан Друпалом к ноде и выведен в переменой $content.
Визуальные переменные
$title : Заголовок комментария$picture : Аватар автора комментария (код html, включая ссылку на профиль автора комментария); переменная непуста, если аватары пользователей разрешены через админку в настройках темы
$new : Флаг "Новый комментарий" (текст), если комментарий новый для посетителя (участника)
$author : Автор (имя и ссылка на профиль)
$date : Дата комментария (отформатированная и локализованная/переведенная)
$content : Содержимое комментария
$links : Список "контекстных" ссылок для данного комментария ("Редактировать", "Удалить" и прочее)
Технические переменные
$comment : объект (формируется в функции theme_comment)
$submitted : ?
..........................
Макс Кириленко, подбор названий и доменов
Block.tpl.php
Этот файл шаблона используется для отображения блоков.
Визуальные переменные
$block->subject : Заголовок блока
$block->content : Отформатированное (html) содержимое блока
Переменные для анализа
Такие переменные не выводятся в виде html-кода. Они помогают верстальщику выводить блоки разным способом, чтобы соседние блоки не были похожи по оформлению дизайна.
$block->region : Регион, в котором расположен блок; значения для Друпал 5.0 и выше - наименование региона (строка). Через анализ этой переменной можно блоки в левой и правой колонке выводить разным способом. Рисовальщик может задать разный дизайн для блоков левой и правой колонок.
$seqid : Порядковый номер блока в пределах текущей страницы; первый по коду блок имеет номер 1, второй - 2 и так далее
$block_seqid : То же самое, что и $seqid, но нумерация отдельная для каждого региона. Можно назначать блокам в колонке последовательно цвета радуги. Или менять плавно менять светлоту блоков при переходе от первого ко второму, третьему, четвертому. Или снижать насыщенность цветов блоков - самый верхний блок имеет насыщенный цвет, а к 7-ому блоку цвет становится серым.
На момент верстания html-кода php-код блока знает только свой порядковый номер в колонке, но не знает сколько всего будет выведено блоков в колонке. Это лишает рисовальщика и верстальщика возможности определить последний блок и закончить переход цветов именно на последнем блоке. Поэтому рисовальщику нужно учитывать, что изменения в дизайне блоков могут быть завершены на любом блоке.
Например, если выводить блоки со сдвигом вправо на 10 пикселей, а через некоторое количество блоков вывести очередной блок без сдвига и после него опять сдвигать блоки вправо, то может оказаться, что будут выведены 5 блоков со сдвигом, 6-ой опять будет прижат влево, а больше блоков не будет.
Если бы знать заранее, что будет именно 6 блоков, то можно было бы сдвигать их через 8 пикселей, тогда они влезли бы все. Или сдвигать их по по 3 штуки. Но общее количество выводимых блоков неизвестно внутри php-кода Block.tpl.php.
Единственные повторные структуры, которые может использовать рисовальщик, это с длиной 2 элемента, см. $block_zebra.
$zebra : Флаг "четный/нечетный" (odd/even); значения - 'odd' (нечетный) или 'even' (четный); глобально в пределах текущей страницы
$block_zebra : То же самое, что и $zebra, но локально в пределах конкретной колонки. Можно чередовать в колонке блоки по цвету. Примерно так же, как это делается для строк таблицы (белые/серые строки). Это уменьшает монотонность блоков в колонках.
Технические переменные
Нужны только верстальщику, рисовальщику их знать не надо.
$block : переменная-объект; далее - поля объекта, доступные для чтения в шаблоне.
Часть полей уже была приведена выше. Перечислим оставшиеся поля.
block->module : Наименование модуля, сгенерировавшего данный блок (к примеру - view)
$block->delta : Порядковый номер блока; этот номер уникален в пределах сайта; генерируется модулем, формирующим данный блок
$block->status : Статус блока (0 - запрещен, 1 - разрешен) - ? так ли это ?.
$block->path : Путь (url "внутри" Друпала), относительно которого разрешен/запрещен данный блок (эти разрешения и запреты устанавливаются на странице настройки конкретного блока)
$block->throttle: Флаг для модуля Throttle (отключать блок или нет при больших нагрузках на сайт).
..........................
Макс Кириленко, подбор названий и доменов
Html-верстальщик Друпал-дизайна не обязан быть друпальщиком. Для дизайна Друпала достаточно знать самую обычную html-верстку. Возможно, чуть-чуть программировать на PHP.
Html-верстальщик может разобраться в особенностях Друпал-верстки за 1 час.
1. Поднимаете сайт на Друпале на Интернет-сервере или на локальном сервере.
Если не можете установить сами, то воспользуйтесь услугами по созданию сайтов от студии Razgonka.ru. Установка бюджетного сайта стоит 200$.
2. Берете любую подходящую тему из 100 тем Друпала . Кладете ее в папку /sites/all/themes
3. Заходите в админку, страница "Оформление", /admin/build/themes отмечаете радиокнопку напротив загруженной вами темы. Нажимаете кнопку "Сохранить настройки". Страница перегрузится и на всем сайте будет стоять выбранная вами тема дизайна.
4. Заходите в папку /sites/all/themes/установленная_тема и обследуете все файлы.
Большинство файлов в папке темы знакомы верстальщику и он знает как с ними обращаться: .css, .jpg, .png,...
Нужно только разобраться, как устроены файлы .tpl.php. Их назначение и устройство описано в этой книге.
5. Для изменения дизайна открываете нужный файл .tpl.php в редакторе, например Dreamweaver. Php-вставки будут показаны как иконками. Зато с остальным html-кодом в файле .tpl.php можно работать как в режиме кода, так и в визуальном режиме.
6. Время от времени сохраняйте файл *.tpl.php, над которым вы работаете. И проверяйте результат работы на сайте вместе с текстом, выданным на месте php-вставок.
НапутствиеВ верстке Друпал-дизайна на html-верстку приходится 90% усилий.
И только 10% трудозатрат связаны со спецификой Друпала. Собственно, вникание в специфику сводится к просмотру списка переменных, через которые Друпал выводит html-контент.
..........................
Макс Кириленко, подбор названий и доменов