разработка

графика

продвижение и PR

будни разработки

обзоры

Собственно об Adobe Image Ready. Часть II

Ok, Привет всем! Здесь продолжение к статье "Собственно об Adobe Image Ready" -

2. RollOvers

В прошлый раз вы могли убедиться, что IR действительно способен упростить за вас работу по форматированию страниц с большим количеством графики. И все же в большей мере на странице не только важно найти место для меню и логотипа, но и сделать управляющие элементы (кнопки, ссылки) активными. Для подобных целей веберы наиболее часто используют язык сценариев JavaScript, поскольку этот язык поддерживается подавляющим большинством новых браузеров на всех платформах. Проще всего опять-таки для этих целей взять готовый скрипт (ну не обязательно веб-дизайнер являет из себя еще и программера!) и подогнать его под свою графику… только не всегда срабатывает так, как видится… опять же, подгонять по размерам все эелементы… опять же – не понравилось – перерисовывать все кнопки…

И другой вариант – когда страница монтируется по объектом в, например, PhotoShop`e, все объекты расположены на отдельных слоях – и уже переброшена страничка в IR – и порезана на слайсы, отчего же не позволить любезному IR сгенерить тот самый JavaScript код для всех интерактивных элементов странички?

Будущие наши кнопки изменяют свое состояние (внешний вид) в броузере в зависимости от событий:

отсутствие событий – нормальное состояние (Normal или Out);
курсор мыши находится на элементе (Over – Сверху);
Курсор мыши находится на элементе и нажата левая кнопка мыши (Down – Вниз);
Курсор мыши находится на элементе и левая кнопка мыши отпущена (Сlick – Щелчек);

Элементы, соответствующие этим состояниям, и называются RollOver. Обработкой событий – смены состояний кнопок занимается сценарий JavaScript.

Итак, откройте в IR вашу страницу —> создайте слайсы —> определите отдельный слайс для каждого элемента меню —> выберите инструмент Slice на панели инструментов (курсор мыши выглядит как стрелочка с квадратиком) —> запустите из меню Window > Show Rollover – вы видите свой первый ролловер с одним только состоянием Normal. Внизу на панельке ролловеров пиктограмма – такая же как на панели Layers для создания нового слоя. Нажмите – и вот у вас уже есть второе состояние – Over – т.е. кнопка активизировалась, когда вы провели над ней мышой. Теперь измените вид этого слайса – например, сделайте ярче цвет надписи на будущей кнопке, или добавьте – включите слой с небольшой картинкой на менюшке – вы архитектор, творите… Таким образом вы можете менять изображения ваших слайсов – кнопок в зависимости от состояний. Когда все готово – оптимизируйте и запоминайте полученный шедевр, и не забудьте дать имя вашему .html файлу и папке, где будут лежать ваши картинки. Имейте ввиду, что картинок будет тем больше, чем больше событий назначаете вы кнопкам.

Откройте полученный .html в редакторе – вы увидите, IR сгенерировал работающий код с обработкой событий, регистрацией и загрузкой картинок, и вы получили красиво отформатированный html-код со всеми интерактивными элементами навигации!

Удачи!

Cтатьи по теме:

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

наверх

Вукс Татьяна