Подробный пример настройки дизайна сайта, настройка шаблона, верстка шаблона, позиция фона в области, стиль меню, стиль области

Страничные шаблоны можно создавать в WebDirector двумя основными способами:
1. Традиционным HTML кодированием, с вставлением в код шаблона специальных макросов на место, где должны появиться автоматически генерируемые элементы (например, вместо макроса %mеnu1% будет вставлено автоматически генерируемое горизонтальное меню, внешний вид которого надо будет настроить через визуальный Редактор шаблонов ). При таком подходе, практически нет ограничений к дизайну, но слабо используются возможности WebDirector по форматированию.
2. Только используя визуальный Редактор шаблонов - данный способ предпочтительнее, поскольку позволяет полностью обходиться без ручного кодирования (или с мимнимальным кодированием - зависит от конкретного дизайна).

Данный текст описывает подробный пример создания сайта на основе дизайн-макета (автор дизайна: Станислав Батальцев) в Фотошоп (кликните на картинку для просмотра макета в натуральную величину) с помощью визуального Редактора шаблонов .

Шаг 1. Разметка макета по функциональным зонам.

Постараемся разметить макет экрана так, чтобы в каждой зоне оказалась одна картинка, которую мы могли бы вставлять как "фон зоны". Фон зоны располагается под текстом и под другими картинками, являющимися наполнением зоны. Каждую картинку - фон можно расположить, позиционируя к каким сторонам зоны она должна прилегать и должна повторяться или нет.

Для разметки зон используем инструмент "слайс" (slice) в Фотошопе.

Номера зон на картинке выше соответствуют автоматической нумерации зон в Фотошопе при использовании инструмента "слайс".

Для эти же визуальных зон стандартная нумерация WebDirector будет другая. Чтобы отличать одно от другого, в нарезке Фотошопа будем называть "Зоны" с номером, а для обозначения в WebDirector будем использовать понятие "Область" с номером.

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

Итак, что мы имеем по произведенной разметке:

Зона 1
- картинка логотипа;
- горизонтальное меню.

Зона 2
- картинка фона - градиент от черного к серому.

Зона 3
- картинка с шнуром в правом углу;

Зона 4
- картинка "приемника" прилегающая к нижнему краю;
- заголовок "Новости";
- новостная лента из двух пунктов;
- картинка - фон со светло-серой растяжкой кверху.

Зона 5
- заголовок "Коротко об услугах";
- список (каталог) услуг;
- заголовок "Часы работы";
- текст под ним, картинка телефона; номер телефона.
- картинка с микрофоном справа.

Зона 6
- картинка "хвоста" под "приемником";
- картинка логотипа в правом нижнем углу;
- текст копирайт;
- текст "наш адрес".

Разметив в Фотошопе Зоны (слайсы), вычищаем из макета все текстовую, табличную и автоматически генерируемую информацию (например, меню). Затем сохраняем из Фотошопа файл "Save for Web" - при этом Фотошоп аккуратно нарезает по слайсам макет страницы на зоны и сохраняет полученные изображения в папке images.

В принципе, в WebDirector можно сразу использовать изображения нарезанные из Фотошопа инструментом слайс. Однако мы их подготовим и уберем лишнее. Что именно является лишним и в чем подготовка - будет объясняться дальше, в описании настройки каждой зоны шаблона.

К примеру, после нарезки слайсов картинка Зоны 1 выглядит так:

Однако, в шаблон WebDirector мы будем ее вставлять, как фоновую картинку верхней области, без повторов и с выравниванием по левому нижнему краю. Поэтому, у картинки слайса лишним является серый фон сверху и справа от логотипа. Обрезаем его в Фотошопе и сохраняем на локальный диск - получилось:

Все подготовленные для использования в шаблоне изображения необходимо загрузить в WebDirector, в Объекты сайта , где хранятся картинки и программные скрипты, используемые в шаблонах. Для этого переходим в административную систему управления, выбираем Настройка шаблонов и вверху видим раздел Объекты сайта . Выбираем в нем пункт Изображения сайта и с помощью появившегося окна загружаем на сайт подготовленные картинки для шаблонов.

Для продвинутых: изображения для шаблонов попадают в специальную папку /img/ в корне сайта. В принципе, их можно добавить туда и вручную по FTP.

Возвращаемся в Фотошоп. Для каждой Зоны макета измеряем в Фотошопе, в пикселах, критичные размеры:
- для горизонтальных Зон это их высота;
- для вертикальных Зон - их ширина.
А так же, общую ширину страницы по макету.

Вариант: размеры зон можно измерить по нарезанным картинкам слайсов.

Далее, пипеткой определяем в Фотошопе цвета фонов Зон. В нашем примере:
Зона 1, высота: 184 пикселей, цвет фона: #585757
Зона 2, высота: 85 пикселей, цвет фона: #585757
Зона 3, ширина: 78 пикселей, цвет фона: #585757
Зона 4, ширина: 465 пикселей, цвет фона: #3F3F3F
Зона 5, ширина: 559 пикселей, цвет фона: #3F3F3F
Зона 6, высота: 96 пикселей, цвет фона: #3F3F3F

Шаг 4. Задание структуры страницы в шаблоне.

Перходим в WebDirector и выбираем (или создаем новый) шаблон в карточке 1.СПИСОК ШАБЛОНОВ ... . Затем в карточке 2.СТРУКТУРА СТРАНИЦ... создаем структуру областей, подобную той, что мы разметили в Фотошопе. Области задаем включая флаг видимости (иконгка глаз) области в шаблоне.

Перечисляю сверху вниз получившиеся Области:
- горизонтальная от края до края Область 1 (аналог Зоны 1 в разметке макета);
- ниже еще одна горизонтальная Область 3 (аналог Зоны 2);
- и небольшая Область 4 справа (аналог Зоны 3);
- затем вертикальная колонка - Область 6 (аналог Зоны 4);
- вторая вертикальная колонка - Область 7 (аналог Зоны 5);
- и последняя - горизонтальная Область 9 внизу (аналог Зоны 6).

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

Переходим на карточку 3.ЦВЕТОВАЯ ПАЛИТРА... , жмем кнопку Очистить палитру и начинаем создавать базовые цвета нашего сайта. Это нам нужно, поскольку WebDirector ограничивает пользователей при использовании цветов только цветами заданными в палитре.

Дизайнеры понимают всю выгоду этого подхода - неопытные в дизайне конечные пользователи не смогут испортить хороший дизайн негармоничными цветами.

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

Затем выбираем вторую ячейку второй строки и присваиваем ей темно-серый цвет, который был так же выявлен в макете пипеткой: 3F3F3F. Нажимаем кнопку Применить и цвет попадает в палитру.

Теперь добавляем в третью ячейку второй строки палитры основной акцентный цвет макета - красный. Так же берем его пипеткой в Фотошопе из макета и сохраняем в третью ячейку. Нажимаем Применить .

Задав основные цвета нашей палитры нажимаем кнопку Сохранить палитру .

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

Теперь приступаем непосредственно к верстке шаблона в 4.РЕДАКТОР ШАБЛОНА... . По клику на вкладку
4.РЕДАКТОР ШАБЛОНА... или на кнопку Редактор шаблона вверху, в новом окне - окне редактора -открывается типовой шаблон "по-умолчанию":

Мы будем его менять под необходимые нам параметры.

По аналогии с понятием "рабочего стола Windows", любой шаблон WebDirector - некоторе подобие "листа" лежащего на рабочем столе. Для знающих HTML, это большая таблица, расположенная в BODY.

Прежде всего зададим цвет фона "рабочего стола" и ширину основной "страницы", лежащей на "рабочем столе". Для этого кликаем двойным кликом на красную полоску фона слева или справа от основной "страницы".

В появившемся окне настройки мы можем задать цвет фона "рабочего стола" - выбираемый из предсозданной палитры - и ширину расположенного на нем "листа".

"Лист" может иметь фиксированную ширину, заданную в пикселах - тогда он похож на настоящий лист лежащий на рабочем столе (такой подход к веб-дизайну распространен на многих европейских сайтах) или можно задать "листу" ширину 100% - в этом случае он полностью закрывает "рабочий стол", создавая, так называемый "резиновый" сайт.

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

Шаг 7. Настройка верхней Области 1, которая должна соответствовать Зоне 1 на эскизе.

Двойной клик по верхней области левой кнопкой мыши или одинарный клик правой кнопкой мыши вызывают окно настройки данной области.

Ее параметры, которые мы "вычислили" по макету в Фотошопе: высота: 184 пиксела, цвет фона: #585757 Вводим эти параметры.

В верхней области у нас еще расположен логотип и меню.

По клику на "картинку фона" у нас открывается окно выбора изображения. Открывшееся окно показывает нам список картинок, расположенных в специальной папке, в которой содержатся картинки для ипользования в шаблонах сайта. Картинки загружены в эту папку через инструмент Объекты сайта в разделе Настройка шаблонов. Кликом по названию картинки выбираем картинку логотипа (клик по уменьшенному изображению картинки позволит нам просмотреть картинку в полный размер).

И нажимаем кнопку Выбрать изображение.

Далее кликаем на отдельные параметры и устанавливаем параметры показа фонового изображения:

Нажимаем кнопку Применить, потом Закрыть. В результате мы видим, что верхняя область стала похожа на макет, за исключением меню.

Элементы навигации (меню) в WebDirector являются автоматически генерируемыми элементами, которые можно вставить (наравне с текстом или HTML кодом) в любую Область шаблона. При этом, с помощью встроенных инструментов или вручную вставляется специальный код, ограниченный символами процента и содержащий название вставляемого меню. При публикации сайта этот код автоматически заменяется на меню, сгенерированное системой на основе структуры сайта.

Это дает пользователю, изменяющему информацию на сайте, возможность добавить в рубрику "партнеры" страничку "партнер Вася" и включить для этой странички флаг "показывать в меню 1" - в результате при публикации сайта система сама добавит новый пункт "партнер Вася" в выпадающее "меню 1", в рубрику "партнеры".

Всего в WebDirector заложена возможность использовать в шаблоне (и, следовательно, в дизайне) ограниченное количество автоматически генерируемых многоуровневых выпадающих или раскрывающихся меню, без ограничения на количество уровней:
- горизонтальное меню 1 (с выпадающими подрубриками);
- горизонтальное меню 2 (с выпадающими подрубриками);
- вертикальное меню (с выпадающими подрубриками);
- раскрывающееся вертикальное меню, в котором раскрываются все рубрики;
- раскрывающееся вертикальное меню, в котором всегда раскрыта текущая рубрика.

И неограниченное количество нераскрывающихся меню, отражающих список страниц какой-либо рубрики.

С точки зрения HTML, меню является JS + HTML кодом, который вставлен в Область, где Область является ячейкой таблицы, а верхний уровень меню - еще одной таблицей, вставленной в эту ячейку (это определяет возможности настройки меню). Выпадающие "подменю" реализованы на слоях.

Переходим на карточку 2.СТРУКТУРА СТРАНИЦ... и выбираем для Области 1 в выпадающем меню наполнение "горизонтальное меню 1". Нажимаем кнопку Сохранить на карточке 2.СТРУКТУРА СТРАНИЦ...

Есть еще один альтернативный способ вставить меню: для этого надо выбрать для Оласти 1 в наполнении пункт "произвольно". При этом откроется расширенный редактор Области 1. Поставьте курсор на первую строку и нажмите в нижней панели зоны иконку, изображающую выпадающее меню с цифрой 1 - в окне редактора Области 3 появится запись: %hmenu1% - при генерации сайта вместо этого кода будет подставлен элемент навигации "горизонтальное меню 1". Нажмите кнопки Сохранить и Закрыть в окне редактора Области. Затем кнопку "Сохранить" на карточке 2.СТРУКТУРА СТРАНИЦ... . Для пользователя сайта результат будет аналогичен первому варианту вставки меню.

Для настройки внешнего вида меню переходим в визуальный Редактор шаблонов или, как он назывался в предыдущей версии - Настройка дизайна и стилей.

В окне "Редакотра шаблонов" мы видим в верхней Области 1 вставленное меню, но его внешний вид абсолютно не соответствуемт макету.

Открываем макет в Фотошопе и смотрим, из чего состоит меню и какие у него параметры.

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

Для использования в шаблоне эту картинку теперь необходимо загрузить в Изображения сайта в Объектах сайта, подобно тому, как мы ранее загрузили туда логотип. Загрузите.

Кликаем по верхнему меню двойным кликом по левой клавише мыши или одинарным кликом по правой клавише - открвается окошко выбора:

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

Выбираем Верхнее меню (в данном случае, Верхнее меню - это верхний уровень текущего меню, название которого мы видим в тайтле окна, а не "меню вверху сайта") - перед нами открывается окошко настройки меню:

Нажимаем кнопку Применить и переходим к настройке внешнего вида элементов меню верхнего уровня - вкладка Эл-ты меню.

Картинка фона и ее параметры - пусто (с помощью этого мы могли бы подложить одинаковую картинку под каждый пункт меню - какую нибудь стрелочку, например).

Справа - еще одна колоночка "под курсором". С помощью этих параметров можно задать, как будет выглядеть пункт меню при наведении на него курсора. Но поскольку в дизайн-макете это не определено, мы не будем трогать эти пункты (вывод - в дизайн макете для WebDirector должен быть определен внешний вид пунтков меню при наведении курсора, а так же внешний вид выпадающих пунктов меню).

Задав параметры нажимаем кнопки Применить и Закрыть.

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

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

Кликаем в Область 1 (но не в само меню - иначе мы вызовем настройки меню, а не области) и задаем настройки:

Нажимаем кнопки Применить и Закрыть - видим, что меню теперь выглядит так же, как на макете. Нажимаем кнопку Сохранить для промежуточного сохранения результатов работы над шаблоном и опять открываем окно редактирования.

Шаг 10. Создаем Области 3 и 4 - горизонтальный градиентный фон и шнурки справа.

Подробно объяснив детали работы с Областью 1, мы будем менее подробно объяснять аналогичные действия с другими Областями, акцентируясь только на новых моментах в работе.

Кликаем на Область 3 и в открывшемся окне вводим три параметра этой области:

Сохраняем изменения и закрываем карточку настройки Области.

Кликаем на Область 4 и в открывшемся окне вводим три параметра этой области:

Итак, мы завершили настройку "шапки" сайта. Текстовый сайт теперь выглядит вот так:

Шаг 11. Задаем фон и размеры для Областей 6 и 7 (они же Зоны 4 и 5).

Особенностью фона данной области в макете является локальный темно-серый цвет с градиентом к светло-серому в верхней части.

Для верстки такого фона, на этапе работы по созданию графических элементов в Фотошоп, мы вырезали из Зоны 4 в макете заготовку для фона - вертикальную полоску шириной 1 пиксел и высотой от начала градиента до верхней границы Зоны 4 и загрузили ее на сайт через Объекты сайта. Горизонтально продублировав ее в верхней части Областей 6 и 7 мы получим градиентный фон, аналогичный заданному дизайнером в макете.

Кликаем по Области 6 и задаем в ее настройках:

Получаем следующее изображение:

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

Кликаем на Область 7 и задаем ей абсолютно те же параметры фона, как и для Области 6.

Шаг 12. Задание стилей для форматирования текстов на сайте.

В Области 7 - основной области контента страницы - визуальный Редактор шаблонов показывает типовое наполнение страниц сайта, для элементов которого необходимо настроить стили форматирования текста, а так же, типовое форматирование таблиц и форм, которые будут создавать конечные пользователи при заполнении сайта.

Дизайнер должен настроить стили для следующих элементов:

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

Кликом по Области 7 мы вызываем окно редактирования, в котором есть важные нам сейчас настройки:

Измеряем эти параметры в Фотошопе на макете, поочередно кликаем по элементам на экране и вводим в поля настроек полученные в Фотошопе значения. Затем сохраняем изменения.

Итак, мы настроили стиль "Заголовок страницы" (теперь все названия страниц сайта, введенные в поле "Заголовок" каждой страницы) будут выводится в этом стиле: шрифт: Arial, размер: 18 пикселей, цвет: белый, выравнивание: влево.

Чтобы задать красную вертикальную полоску слева от любого заголовка, мы сохранили из макета картинку этой красной полоски и загрузили ее в форме настройки стиля "Заголовок страницы" как "картинку фона" с выравниванием влево-вверх, без повторов. Кроме того, мы задали стилю "Заголовок страницы" внутренний отступ слева в 14 пикселов, который отодвигает начало заголовка от красной полоски.

Кроме того, мы задали настройки трех пользовательских стилей, чтобы пользователи могли делать однотипные выделения текста просто задавая некоторым абзацам один из трех стилей: светло-серый с рамочкой, красный без рамочки, черный на красном фоне с белой рамочкой.

Подробный пример верстки шаблона - настройки дизайна сайта