Делаем навигационную панель в Fireworks MX

Итак начнем! Так как этот сайт рассчитан на начинающих, то здесь я расскажу, как можно просто не мудрствуя лукаво сделать навигaционную панель.
Мы пойдем совсем простым путем и возьмем кнопку из библиотеки, которая всегда приложена к программе. Но сначало откроем новый документ File > New, укажите размер к примеру 300 на 300 пикселей с прозрачным фоном. Далее, открываем библиотеку с кнопками Edit > Libraries > Buttons.

Откроется панель библиотеки, там Вы увидите список с несколькими кнопками.
Как видите там есть кнопки с двумя состояниями 2-State, тремя 3-State и четырьмя 4-State.
Выбирайте, что понравится... Ну, а я как и обещал беру кнопку с четырьмя состояниями!

Щелкаем по Import и выбранная кнопка окажется в центре нового документа. Из библиотеки кнопка идет уже символом (Symbol) с настройками для каждого состояния (Up, Over, Down и тд...). Но при желании можно все эти настройки изменить... Для этого и существует, так называемый кнопочный редактор - Button Editor.

Что бы открыть его нужно двойным щелчком щелкнуть по кнопке, которую мы импортировали в поле нового документа. И вот он появился ! Вы видите его слева. Не забыли теоретическую расладку по кнопке ? Сразу редактор откроет кнопку в ее первоначальном состоянии Up. Но если Вы желаете, что-то изменить, как Вам подсказывает ваш вкус, то используя Properties Inspector можно изменить настройку, действуйте...
Последовательно переходите на другие состояния кнопки - Over, Down, Over While Down (отжатие кнопки).
Active Area - здесь можно увидеть активную площадь кнопки, которая реагирует на наведенный клик, а так же если выделить кнопку, то в инспекторе предпочтений можно добавть URL (ссылку).
Да, еще внизу редактора будет краткая инструкция по каждому состоянию кнопки и что можно тут сделать...
Вот я например в состоянии Over выделил текст и добавил эффект Glow (сияние). Это значить, когда клик попадает в активную зону, то вокруг текста появится сияние. Гость вашего сайта сразу поймет:
- Ага кнопка живая... И щелкнет по ней :)

Здесь Вы видите часть Properties Inspector. Он всегда висит снизу и готов вам помочь настроить кнопку, как надо ! Выделяйте кнопу щелчком и потом заполняйте поля:
Text - нужно вписать текст, который будет на кнопке.
Link - адрес страницы или же по другому URL.
Alt - альтернативный текст, который появится, если клик навести на кнопку.
Target - цель... то есть, как будет открываться страница в отдельном окне или же как-то по другому...

После того, как управились с настройками различных состояний кнопки приступим к созданию навигационной панели. Для этого выделяем нашу единственную кнопку в новом документе и делаем ее копию Edit > Copy. И потом вставляем копию Edit > Paste. В Fireworks копия всегда вставлется точно на то место, где Вы ее скопировали и поэтому новички иногда теряются из-за этого... Вроде бы сделал все правильно, а результата нет !? Где скорпированная кнопка ? А она просто наложилась на оригинал и ее не видно ! Наводим клик на нее прижимаем левую кнопки мыши, захватываем копию и аккуратно перетаскиваем не отпуская левой кнопки мыши свежую кнопочку выше или ниже оригинала...Таким же макаром делаем еще сколько вам нужно копий и располагаем их как задумали - вертикально или же горизонтально...
После этого выделяем поочереди все кнопки в отдельности и для каждой вписываем в Properties Inspector на полях соответствующие значения - Text, Link, Alt, Target.
Ну вот вроде бы и получилась навигационная панель ! Можно предварительно просмотреть ее щелкнув по Preview.

Да, наверно у Вас кое-что будет лишним в новой навигационной панели и поэтому не помешает сначало срезать излишки. А сделать это можно так - Modify > Canvas > Trim Canvas. Теперь нам только осталось сохранить наши труды по изготовлению навигации, исполняем File > Export. Открывается подменю. Выбираем напротив строки Save as type - HTML and Image (сохранить HTML вместе с графическими файлами).
Кроме этого можно вставить нашу навигацию в HTML другим путем. Вот так ! Edit > Export HTML, указываем в экспортных настройках в какой папке будут расположены графические файлы... Там еще нужно будет указать различные настройки по таблице, но я про это подробно не буду сейчас рассказывать. Это, как говориться уже "другая песня" и об этом лучше поговорим как-нибудь в следующий раз...

Источник - fire-mx.narod.ru

Реклама