Ролловеры без программирования

Указывающие ролловеры в Dreamweaver
Многособытийные ролловеры в Dreamweaver
Заменяющие ролловеры в Fireworks
Ролловеры в таблице Fireworks

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

Ролловеры, которые можно с легкостью создавать при помощи таких приложений, как Macromedia Dreamweaver и Fireworks, придают страницам Web динамичность.

Тем, кому наскучило складывать системы навигации из стандартных “кубиков” (текстовых ссылок и графических изображений в рамках) стоит попробовать ролловеры — графические “события”, популярные среди разработчиков мультимедийных приложений и дисков CD-ROM. Ролловер изменяет форму графического изображения в тот момент, когда над изображением проходит курсор мыши, показывая таким образом, что данный элемент страницы является ссылкой. Создание ролловеров для Web выходит за пределы возможностей обычного HTML, поскольку исходный текст ролловеров не является компонентом стандартного языка разметки.

Чаще всего ролловеры для графики пишутся на JavaScript, но исходные тексты на этом языке некоторым могут показаться более пугающими, чем HTML-программы (хотя на первый взгляд этот язык тоже довольно сложен). Существуют и другие средства для создания подобной графики Web, такие как Java, Flash, либо Director компании Macromedia, но большинство пользователей предпочитают JavaScript, поскольку такие элементы можно копировать через буфер обмена между страницами Web, а для просмотра с помощью браузера не требуются дополнительные модули или совместимость с Java.

Тем, кому не хотелось бы садиться за изучение языка написания сценариев, но необходима мощь “ролловерной” графики, улыбнулась удача. Многие современные средства разработки для Web могут автоматически генерировать тексты JavaScript. Предлагаемая статья посвящена этим инструментам и описывает технологию создания трех самых типичных видов ролловеров: ролловеров замены, указывающих ролловеров и многособытийных ролловеров.

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

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

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

Photoshop как инструмент для создания ролловеров

Adobe Photoshop является превосходным средством для создания обычных изображений, применяемых с ролловерами, поскольку слои этого пакета обеспечивают точное позиционирование изображений. Слои можно показывать и прятать одним щелчком по значку глаза в палитре Layers (Слои) (вызывается командами Window (Окно), Show Layers (Показать слои)), что очень удобно для предварительного просмотра работы ролловера во включенном и выключенном состояниях.

После того, как изображения подготовлены при помощи Photoshop (или любой другой программы создания изображений), их нужно сохранить в виде файлов GIF или JPEG. Для этой цели можно воспользоваться Adobe ImageReady, поскольку эта программа генерирует несколько меньшие файлы, чем Photoshop. Чтобы подготовленные для ролловера изображения не потерялись, лучше присвоить им названия, включающие такие слова, как on (clickme-on.gif) и off (clickme-off.gif).

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

Dreamweaver спешит на помощь

Хотя Photoshop отлично подходит для создания графики, он не предназначен для решения специфических задач Web, таких как оптимизация графики для ускорения ее загрузки. Программа не может также генерировать исходный текст для JavaScript или таблиц HTML (которые используются для точного позиционирования графики при помощи сетки или создания макетов с заданным взаимным расположением объектов). Для этих целей понадобится редактор HTML, подобный Macromedia Dreamweaver 2.0, на примере которого построены все дальнейшие пояснения. Бесплатную пробную версию программы можно загрузить с узла Macromedia (www.macromedia.com).

Создавать простые ролловеры замены с помощью Dreamweaver довольно просто. Сначала щелчком по значку Insert Rollover Image (Вставить изображение с ролловером) в инструментальной панели Object (Объект) нужно открыть окно диалога Insert Rollover Image. После этого, щелкнув по кнопке Browse (Просмотр), найти изображение для состояния “выключено” и щелкнуть по кнопке OK. Те же действия следует выполнить для изображения “включено”. Dreamweaver автоматически сгенерирует исходный текст JavaScript и на этом работа над ролловером будет завершена.

Указывающие ролловеры в Dreamweaver

Поскольку указывающий ролловер должен делать больше, чем просто заменять одно изображение другим, для его создания необходимо использовать палитру Behavior (Поведение). Для получения этого эффекта понадобится два изображения и одна пустая картинка (см. roll.gif, blankcircle.gif и circle.gif на рисунках А—G).

Шаг 1. Необходимо создать таблицу из одного ряда и двух колонок (можно щелкнуть по значку Table (Таблица) из палитры Object (Объект) или выполнить команды меню Insert (Вставить), Table). Для границ таблицы следует задать толщину 0 — тогда границы показываться не будут (рис. D). Далее, в левую ячейку нужно вставить файл blankcircle.gif (щелкнув по ячейке, а затем по кнопке Insert Image (Вставить изображение)), а в правую ячейку — roll.gif.

Шаг 2. Выбрав рисунок roll.gif, ему нужно присвоить название rollover (имя вводится в самое крайнее поле панели Property (Свойство)). То же самое следует сделать с файлом blankcircle.gif, присвоив ему название blank.

Шаг 3. Чтобы открыть палитру Behavior, нужно щелкнуть по аналогичной кнопке в палитре Launcher (Запуск).

Шаг 4. Далее необходимо поместить изображение roll.gif в таблицу, а в палитре Behavior щелкнуть по кнопке со знаком “плюс”. В появившемся всплывающем меню следует выбрать команду Swap Image (Поменять изображения местами).

Шаг 5. Затем, оставив пустое изображение в окне диалога Swap Image выбранным, необходимо щелкнуть по кнопке Browse и задать в качестве исходного изображение circle.gif (рис. F). Тогда Dreamweaver “поймет”, что всегда, когда указатель мыши будет проходить над изображением roll.gif, следует отображать картинку circle.gif (рис. G).

Многособытийные ролловеры в Dreamweaver

Для программирования многособытийных ролловеров с помощью Dreamweaver (рис. H–K) придется затратить несколько больше усилий, чем требуется для реализации двух рассмотренных выше видов ролловеров, однако все равно задача решается довольно просто. В данном примере слово rollover голубое, и оно отображается с самого начала. Когда над ним появляется мышь, голубой ролловер заменяется на зеленый. Пустое изображение используется в качестве указателя места для замены заполненной картинкой и наоборот. После того, как мышь пройдет над синим словом, зеленый текст заменяется пустым изображением. Ниже приводится описание всей процедуры.

Шаг 1. Как и в предыдущем разделе, сначала нужно создать таблицу из двух горизонтальных ячеек.

Шаг 2. В первую ячейку таблицы следует вставить файл startroll.gif, а во вторую — blank.gif.

Шаг 3. Далее, выделив таблицу, нужно ввести значение 0 в текстовое поле Border — обрамление таблицы будет выключено.

Шаг 4. Выбрав изображение startroll.gif, с помощью инструментальной панели Property присвоить ему название roll (рис. L), а пустому изображению — имя blank.

Шаг 5. Выбрать изображение startroll.gif и щелкнуть по кнопке Behavior — появится панель Bevavior. Во всплывающем меню Events for (События для) следует задать совместимость ролловера с браузерами версии 4.0 и вызвать окно Swap Image, щелкнув по кнопке со знаком “плюс”.

Шаг 6. Далее нужно выбрать изображение с названием roll и, щелкнув по кнопке Browse, найти для него заменяющую картинку endroll.gif (рис. M).

Шаг 7. Аналогично, следует выбрать изображение с названием blank и замену для него — text.gif.

Чтобы просмотреть результаты работы через браузер, можно нажать на клавишу F12.

Заменяющие ролловеры в Fireworks

Macromedia Fireworks (пробную версию которого также можно загрузить с узла Web компании Macromedia) представляет собой графический редактор Web, который не только позволяет создавать изображения для ролловеров, но и автоматически генерировать исходный текст JavaScript и HTML. При помощи Fireworks нельзя сделать указывающий или многособытийный ролловер, но для тех, кому нужен лишь простой эффект замены кнопки, этот инструмент вполне подойдет. Ниже описывается способ создания ролловера замены в пакете Fireworks.

Шаг 1. Прежде всего при помощи инструмента Type (Текст) нужно набрать слово rollover. Затем, открыв палитру Frames (Фреймы), выбрать команду Duplicate Frame (Скопировать фрейм) из всплывающего меню (рис. N). В окне диалога Duplicate Frame выбрать для радиокнопки значение After Current Frame (После текущего) и щелкнуть OK (рис. O).

Шаг 2. Оставив выбранным фрейм 2 со словом rollover, необходимо добавить эффект из окна диалога Effects (Эффекты)(вызывается командами меню Window (Окно), Effect или щелчком по закладке Effect окна диалога Brushes and Fills (Кисти и заливки)). Я выбрала значение Glow (Сияние) и заменила цвет сияния на оттенок голубого (рис. P).

Шаг 3. После этого нужно выбрать команду Export (Экспорт) из меню File и в появившемся окне диалога Export Preview (Предварительный просмотр экспорта) выбрать пункт GIF Rollover из всплывающего меню Format (Формат), после чего щелкнуть по кнопке Export (рис. Q).

Шаг 4. Следует убедиться, что в окне диалога Export File (Файл экспорта) (рис. R) ячейка Generate HTML (Генерация HTML) отмечена — тогда для ролловера будет сгенерирован исходный текст JavaScript.

Ролловеры в таблице Fireworks

Пакет Fireworks обладает некоторыми расширенными возможностями по созданию ролловеров, JavaScript и таблиц HTML: он позволяет сочетать все эти элементы в рамках одного документа.

Шаг 1. При помощи инструмента Slice (Нарезать) из панели URL следует выбрать места для вставки таблицы (рис. S и T).

Шаг 2. Параметры для выбранного типа “ломтика” следует задать в окне диалога Object Properties (Характеристики объекта). В данном случае каждый “ломтик” должен включать ролловер (рис. U).

Шаг 3. Вместо команд File, Export, как это было в последнем примере, здесь следует выбрать File, Export Slices (Экспортировать “ломтики”). Ячейка Create Demo Rollover HTML (Создать код HTML для ролловеров) должна быть отмечена. Fireworks разделит и присвоит имена изображениям, а затем сгенерирует исходные тексты HTML и JavaScript (рис. V). Сейчас это самый быстрый способ создания подобного типа ролловеров.

Прежде чем купить — попробуй

Для среднего Web-дизайнера программировать ролловеры слишком сложно, поэтому появление великолепных инструментов, делающих всю технологическую работу, оставляя дизайнеру свободу для творчества, можно только приветствовать. Кроме того, еще до приобретения программы с узла Web можно бесплатно загрузить демонстрационные версии пакетов Dreamweaver и Fireworks и потренироваться, выполняя описанные в статье примеры. Ролловеры — это отличный способ придать динамичность содержанию вашего узла, особенно если всю работу по кодированию сделает за вас компьютер.

* Ролловер — элемент пользовательского интерфейса, а точнее — событие, изменяющее состояние графического объекта в зависимости от того, расположен ли над ним указатель мыши. Не очень удачный термин, который является “калькой” от английского rollover, буквально — прокатывать над. К сожалению, приемлемый русский эквивалент переводчику не известен. — Прим. перев.

ОБ АВТОРЕ

Указывающие ролловеры в Dreamweaver
Многособытийные ролловеры в Dreamweaver
Заменяющие ролловеры в Fireworks
Ролловеры в таблице Fireworks