Создание карты узла в Fireworks MX
Существует множество решений карт узлов, доступных Web-разработчику. Можно использовать такие программные решения, как Inspiration (www.inspiration.com) или Visio (www.microsoft.com/office/visio). Можно создать карту узла при помощи обычной программы работы с графикой, например FreeHand 10. Можно для этого использовать издательское приложение, такое как PageMaker или QuarkXPress. Другие решения предполагают использование специализированного пакета Web-разработки, такого как Dreamweaver MX, или чистого листа бумаги и карандаша. Выбор метода зависит от сложности проекта. Такие программные решения, как Visio и Inspiration, хороши для узлов, составленных из сотен страниц, в то время как чистого листа бумаги будет достаточно для составления композиции из десятка страниц.
Одним из преимуществ использования Fireworks является тот факт, что это приложение создано для Web-графики. Все файлы, созданные в нем, имеют расширение .png, могут быть легко анимированы на Web-странице и отправлены на узел проекта для согласования с командой или клиентом. Использование других графических приложений для этой цели вносит дополнительные сложности, связанные с вопросами совместимости, версий, преобразований между форматами, а также другие неожиданные проблемы.
Элементы карты узла сами по себе не сложны. Все, что требуется, — это прямоугольник, линия и стрелка. Прямоугольник будет представлять страницу, а линия со стрелкой — переход от одной страницы к другой. Карту узла делает сложной количество элементов блоков, стрелок и линий. Нарисовав один блок, неизбежно задаешься вопросом: "А что дальше?" Приложение Fireworks предлагает удобную функцию библиотеки, в которой можно хранить многократно используемые элементы.
Перед тем как углубиться в эту тему, нужно понять различие между символом и экземпляром. Эти два термина идут рука об руку во всех приложениях от Macromedia, особенно во Flash. Фраза "раз нарисовал — используй много раз" хорошо описывает концепцию.
Символ — это мастер-копия объекта. В нашем случае это — прямоугольник, используемый на карте узла. В отношении к приложению Fireworks, символ может быть чем угодно, от объекта, показываемого на прямоугольнике, до группы объектов, содержащих текст, или фрагмента текста. Основным элементом в Fireworks является символ, состоящий из объектов, уровней и кадров. Во многих отношениях символ можно определить как "все, что угодно, нарисованное в Fireworks".
Когда объект конвертируется в символ, он автоматически помещается в библиотеку Fireworks и прикрепляется к конкретному документу. Но это еще не все. Библиотеки можно сделать доступными для всех документов Fireworks: Просто открыв библиотеку и перетянув элемент на страницу, можно создать экземпляр этого символа. Этот экземпляр имеет обратную ссылку на сам символ, что отличает его от копии объекта.
Создание и использование символов в Fireworks
Самой любимой нашей фразой, относящейся к автоматизированному производственному процессу, является следующая: "Дайте программе сделать работу". В нашем примере немного дополнительного времени, затраченного в начале процесса, экономит массу времени в конце проекта. В приложении Fireworks MX одной из таких экономящих время возможностей является использование символов и их экземпляров для представления объектов на странице.
Для того чтобы создать и использовать символы в Fireworks MX, выполните следующие действия.
Рис. 4.10. Диалоговое окно New Document в Rreworks
1. Откройте новый документ в Fireworks. Для этого выберите в меню пункт File=>New. Нажмите комбинацию клавиш <Ctrl+N>, чтобы открыть диалоговое окно New Document (рис. 4.10), в котором в качестве единиц измерений уже установлены дюймы, а размеры рисунка по умолчанию составляют 14x8,5 дюйма. Это — обычный формат А4 в горизонтальной ориентации. В качестве цвета фона выберите белый и щелкните на кнопке ОК.
2. На панели инструментов выберите инструмент Rectangle и нарисуйте прямоугольник. Выделите нарисованный объект и определите для него в окне свойств заполнение как None, контур — Basic, Hard Line, а цвет контура — Black.
3. Оставив прямоугольник выделенным, выберите в меню пункт Inserts Convert To Symbol или нажмите клавишу <F8>. Откроется диалоговое окно Symbol Properties. Присвойте символу имя Box, выберите значение переключателя Graphic и щелкните на кнопке ОК.
4. Откройте панель библиотеки, выбрав в меню пункт Window=>Library, или нажав клавишу <F11>, или выбрав закладку Library на панели Assets. Ваш прямоугольник отобразится в библиотеке.
Обратите внимание, как изменился объект на странице. На рис. 4.11 видно, что в левом нижнем углу объекта отобразилась стрелка, направленная вовнутрь. Она указывает на то, что этот объект — экземпляр.
Рис. 4.11. Объект на странице был преобразован в символ и автоматически занесен в библиотеку. Обратите внимание, что панель Library была переведена в плавающий режим
5. Если на странице потребуется нарисовать другой блок, откройте панель Library и переместитесь к нужному символу. Перетяните с этой панели символ в нужное место документа и снимите выделение с только что созданного экземпляра.
Замечание
Если вы уже давно пользуетесь приложениями Fireworks, нахождение библиотеки на панели Assets для вас будет новым. Это нововведение было ответом компании Macromedia на жалобы пользователей относительно засилья множества окон на экране. Для того чтобы открепить окно Library от стенок приложения, просто перетяните его на холст. Для того чтобы вернуть его на место на границе окна приложения, удерживая кнопку мыши и ее указатель на треугольнике, направленном в сторону слова Assets, перетяните его до границы и отпустите кнопку мыши.
Вы также можете сделать, чтобы Library была отдельной панелью. Для этого выберите в меню Panel OptionsoQroup Library with=>New Panel Group. Для того чтобы вернуть панель Library назад, выполните те же действия, только выберите имя группы, отличное от New Panel Group.
В качестве альтернативы можно использовать другой метод, который, правда, не так красив. Выберите в меню команду Edit=>Insert=>New Symbol. Воспользуйтесь комбинацией клавиш <Ctrl+F8>, чтобы открыть окно Symbol Editor (Редактор символов). Присвойте символу имя и выберите значение переключателя Graphic. Нарисуйте прямоугольник и закройте редактор символов.
Использование и изменение символов Fireworks MX при создании карты узла
Создавая серию примитивных форм в Fireworks MX и сохраняя их как символы в библиотеке, можно создать модели страниц, перетащив нужные рисунки на страницу.
1. Откройте файл JTCmapex.png, расположенный в папке Chapter 3 Exercise на Web-узле этой книги, и откройте библиотеку. Найдите в библиотеке символ Box и перетащите в документ две его копии. Получившиеся блоки будут намного большими, чем остальные на странице. Различие между локальными и глобальными изменениями символов заключается в следующем. Глобальные изменения вносят коррективы во все экземпляры символа, а локальные влияют только на экземпляр, с которым проводится работа.
2. Дважды щелкните на символе Box в библиотеке, и откроется редактор символов. Выберите инструмент указателя (Pointer) и щелкните на прямоугольнике в редакторе символов. Выберите на панели инструмент Scale и перетаскивайте угловую точку прямоугольника, чтобы изменить размеры фигуры. Закройте Symbol Editor.
3. Все блоки на странице изменят свои размеры, отражая изменения, сделанные с символом. Это — глобальное изменение. Изменения, производимые с символом в библиотеке, отражаются на всех его экземплярах на страницах. Для того чтобы восстановить исходные размеры блока, выберите в меню пункт Edit=>Und=>Edit.
Мы изменили размеры блока. Однако не думайте, что на странице эта операция проводится на глаз.
1. Удалите один-два больших блока на странице и выделите на ней маленький блок. В окне Properties будут показаны высота и ширина выбранного объекта (рис. 4.12). Запомните эти числа.
2. Щелкните на большом блоке и измените его размеры так, чтобы они совпадали с размерами маленького блока. Нажмите клавишу <Enter>. После того как размеры блока изменятся, удалите его.
Если рисунок открыт, вы увидите, что целый раздел карты узла Shoes отсутствует. Его можно создать, перетащив элементы из библиотеки и изменив их размеры. Однако существует и более простой способ.
1. Выделите все элементы в разделе Jeans.
2. Нажмите и удерживайте клавишу <Alt>. Курсор превратится в четырехнаправленную стрелку. Нажмите клавишу <Shift> и, удерживая обе клавиши, перетащите выделенный блок вправо, пока он не встанет под разделом Shoes. Теперь отпустите кнопку мыши, сохраните файл и выйдите из Fireworks MX.
Рис. 4.12. Чтобы изменить местоположение и размеры выбранного объекта, установите точные числовые значения в окне Property
Удерживая нажатой клавишу <Alt>, мы копируем все выбранные элементы. Нажимая клавишу <Shift> и перемещая курсор горизонтально, мы выполняем выделение строго горизонтально. Перемещение курсора мыши переносит копию (а не оригинал) в новое место размещения.
