Иллюстрированный самоучитель по Web-разработке на Macromedia Studio MX

Эскиз содержания. Утилиты Macromedia.

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

По мнению руководителя проекта, создавая эскиз, клиенту можно показать документ, в котором демонстрируется, как концепции представлены конкретными точками порядка работ. Во многих случаях на этом этапе становится понятно, насколько точно переданы идеи. Об этом говорит и старая аксиома: "Клиент никогда не поймет, что на самом деле хочет, пока это не увидит". Эскиз – это первый его взгляд на фактическую конструкцию узла.

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

Утилиты Macromedia

Пакет программ MX Studio и приложение FreeHand созданы так, чтобы концепцию можно было довести до конечной формы. Чтобы помочь разработчику, инженеры Macromedia наполнили пакет массой полезных функций, а также несколькими мастерами. Работа этих утилит заключается в оказании помощи новичку в создании интересных эффектов малыми усилиями. Среди других достоинств пакета – относительно невысокая стоимость.

Например, можно создать основные кадры анимации, чтобы клиент видел, как они будут работать. Если клиенту понравится идея, вам будет открыт зеленый свет для переноса этих кадров из Fireworks и FreeHand во Flash MX для дальнейшей работы. Если у клиента появятся замечания, вы сможете довольно просто внести рекомендованные изменения. Вы также можете создать контекстные и главные меню в Fireworks MX и показать, как будут работать элементы навигации. Вы можете создать простые Flash-кнопки в Dreamweaver MX, а затем поместить их в эскизы страниц, которые будут отправлены клиенту на утверждение.

Эти страницы могут иметь любой вид: от набора различных форм меню до эскиза узла, отрабатывающего основные функции, и их сложность может зависеть только от важности работы.

В этом разделе будет продемонстрировано, как создать эскиз меню в Fireworks MX, как создать эскиз анимации во Flash MX, используя элементы, созданные во FreeHand, и как собрать все это воедино на странице Dreamweaver MX, которая будет отправлена на подпись клиенту.

Создание эскиза иерархического меню

Редактор меню (Pop-Up Menu Editor) впервые появился в Dreamweaver 4. Его изначальной целью было предоставление пользователю необходимого инструментария для создания меню любой сложности. Эти меню привязаны к событиям, например к щелчку мыши или прокрутке страницы. Преимуществом созданного мастера является то, что он генерирует программы на JavaScript и HTML, когда меню экспортируется из Fireworks. Для того чтобы создать меню в Fireworks MX, выполните следующие действия.

1. Откройте документ Fireworks размером 200x25 пикселей. Установите прозрачность фона и разрешение 100 dpi (точек на дюйм).
2. Нарисуйте блок, используя инструмент Rectangle (Прямоугольник) в разделе Vector Tools (Инструменты для работы с векторной графикой) панели инструментов. Размеры этого блока определите как 50x25 пикселей. Если блок должен быть меньше или больше, установите ширину и высоту в единицах измерения, указанных в окне свойств. В том же окне установите для фона серый цвет и черную рамку вокруг блока толщиной 1 пиксель.
3. Выберите инструмент Text, щелкните один раз на блоке и введите слово Shoes. Уставите шрифт Helvetica размером 12 точек и начертание Bold.
4. Выделите слово и блок. Удерживая нажатой клавишу ALT, нажмите клавишу SHIFT и перетаскивайте копию выделения вправо до тех пор, пока она не коснется левой границей правой границы исходного объекта. Повторите это действие еще два раза.
5. Выберите инструмент Text, выделите текст второго блока и введите слово T-shirts. Повторите это действие для двух оставшихся блоков, заменяя их текст на Pants и Hats соответственно. В заключение выделите каждую пару "текст-блок" и сгруппируйте эти объекты.

Итак, меню уже готово стать иерархическим. Для этого все объекты меню должны быть преобразованы в совокупность (slice) для создания текста HTML и JavaScript, который будет обеспечивать функции меню.

1. Выделите панель Shoes. Выберите в меню пункт Edit › Insert › Slice или воспользуйтесь горячими клавишами ALT + SHIFT + U. Панель обретет зеленый цвет, обозначая, что она стала совокупностью (slice).. На панели WIN появится новый слой Slice. Переименуйте этот уровень в Shoes. Объединение также можно выполнить с помощью инструмента Slice, вставляя совокупность над сгруппированными объектами, вместо того чтобы выбирать инструмент Slice и перемещать его, выделяя все кнопки, избегая каких-либо перекрытий. Однако это достаточно трудно, так как границы объектов обычно немного выступают за рамки соседнего объекта.
2. Щелкните на белой точке на панели Shoes, после чего выберите в открывшемся меню пункт Add Pop-Up Menu. Именно в этом месте открывается редактор меню. На первый взгляд, окно Content может обескуражить. Кнопки со знаками "плюс" и "минус" в заголовке окна соответственно добавляют и удаляют подменю. Кнопки, расположенные рядом с ними, показывают, имеет ли данное подменю отступ. Первый элемент списка является заголовком и не может иметь отступ.
3. Дважды щелкните на первой ячейке и введите слово Men's. Щелкните на следующей ячейке (ниже первой), введите слово Hangin и щелкните на кнопке увеличения отступа.
4. Щелкните на кнопке со знаком "плюс", введите текст Rad Red и щелкните на кнопке увеличения отступа. Повторите эти действия еще три раза, вводя в ячейки соответственно слова Cool White, Gnarly Green и Chillin' Blue. Отступ этих элементов должен совпадать с отступом строки Red Red. В результате вы должны увидеть такое же окно, как на рис. 7.21.

   Замечание
   Если вы будете использовать редактор меню в своей повседневной работе, имейте в виду, что в колонке Link нужно задавать адрес URL, абсолютный или относительный. Если ссылка уже существует в рисунке, она появится в меню, которое открывается после щелчка на ячейке в колонке Link. Если введенная ссылка должна отображаться в конкретном кадре (frame), нужно ввести имя кадра в колонке Target.