вторник, 16 августа 2011 г.

Создание сайта. Выпадающее меню.

Задача:
Научиться делать выпадающее меню.

Урок:
Для начала нужно нарисовать кнопку меню и расположить её на странице. Вот что получилось у меня.


Кнопка - это сгруппированный объект. Текст на кнопке так же входит в группу и у него выбрана центральная ориентация. Это сделано для того что бы какой бы текст потом не был на кнопке - он будет всегда расположен по центру.


Теперь скопируйте кнопку в буфер обмена (ctrl+c), перейдите на слой MouseOver и вставьте кнопку на то же самое место (shift+ctrl+v). Поменяйте кнопке цвет, каким он должен быть при наведении курсора мыши. Вы это уже должны уметь, потому как читали первый урок. После этого нужно выделить обе кнопки и нижнюю и верхнюю и создать мягкую группу (Arrange>Apply Soft Group). Такая группа не переносит объекты с других слоёв в один и не изменяет порядок их расположения.


Не снимая выделения с группы кликните правой кнопкой мыши по ней и выберите пункт меню Create Navigation Bar. Перед Вами появится окно настройки выпадающего меню.


Здесь всё просто. Ориентация горизонтальная или вертикальная, дальше идёт выравнивание, ниже расположение кнопок. Больше опций к сожалению нет - для более сложных меню нужно добавлять javascript или flash ролики.
В окне Buttons and Menu составляете древовидную структуру. Когда Вы вписываете свой текст в заголовок, то текст на кнопке изменится. Сделайте двойной клик в пункте (Double-click to add button) и у Вас появится дополнительная кнопка, Xara продублирует её автоматически. Вот какое меню сделал я.


И вот что получилось когда я нажал File>Preview web page.

 
Что бы попасть в окно редактирования меню нужно опять кликнуть на группу правой кнопкой мыши и выбрать пункт меню Edit Navigation Bar.
Справа внизу есть кнопка Menu style, нажав её Вы попадёте в меню настройки стиля выпадающих вкладок.


Здесь к сожалению тоже очень мало настроек.
  • Font - шрифт.
  • Bold - жирный шрифт (италика почему то нет).
  • Font size - размер шрифта.
  • Direction - направление выпадения меню.
  • Horizontal offset - расстояние от края кнопки по горизонтали.
  • Spacing - расстояние между пунктами меню.
  • Border - рамка.
  • Animation - скорость появления.
  • Transparency - прозрачность.
  • Vertical offset - расстояние от края кнопки по вертикали.
  • Menu background - цвет фона.
  • Menu text - цвет шрифта.
  • Menu background (over) - цвет фона при наведении курсора мыши.
  • Menu text (over) - цвет шрифта при наведении курсора мыши.
  • Border - цвет рамки.
После того как Вы введёте все пункты меню, настроите стили - задайте каждому пункту ссылку на нужную страницу в поле URL, а в поле Tooltip можно добавить стандартную HTML всплывающую подсказку.
Меню получается довольно простенькое и аскетичное, но для многих проектов этого достаточно. Продублируйте меню на остальные страницы как это было рассказано в первом уроке (Repeat on all pages) и простенький сайт с интересным меню - готов.

1 комментарий:

  1. Спасибо, очень хороший урок! Как раз сейчас пытаюсь разобраться с меню. Если можно, добавьте уроки по интерфейсу последней (седьмой) версии редактора.

    ОтветитьУдалить