Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
Сначала нарисуем изображение, из которого мы будем создавать графическое меню со ссылками на документы сайта.
>• Создайте новый документ размером 160x80 пикселов (см. знакомство «Создание нового
> В окне документа нарисуйте два прямоугольника с общей горизонтальной стороной (Рис. 3.71) (см. знакомство «Рисуем геометрические фигуры»).
.e,Jid firtmjrki Мл ЛШ1 - IJnlillcd 2... HH13
File Ed» View Select Modify Teat Com* rille« Window Help
Рис 3.71. Два прямоугольника
> В верхний прямоугольник введите строку Компьютеры, а в нижний прямоугольник ¦ строку Принтеры (Рис. 3.72) (см. знакомство «Текст для баннера»).
lik* MX ЛШ (UnIlIlCd 2... ЯЭ О
•її
; Рис. 3.72. Рисунок с текстом
Теперь разрежем изображение на части.
\
ГЛАВА 3. Подготовка графики с помощью Macromedia Fireworks MX
103
> Нажмите кнопку |ЦГ| на панели Tools (Инструменты).
> Установите указатель мыши на левой нижней вершине прямоугольника ' с надписью Компьютеры в окне документа. Ш^Ь^-::'^
> .Нажмите и удерживайте левую кнопку мыши. . ;:"
... > Не отпуская левую кнопку мыши, перемещайте мышь. На экране появится синяя прямоугольная рамка, один из углов которой будет передвигаться вместе с указателем мыши.
>¦ .Когда рамка полностью наложится на верхний прямоугольник, отпустите левую кнопку мыши. Прямоугольник с надписью Компьютеры выделится зеленым цветом ¦¦ (Рис. 3.73). Фрагмент рисунка будет вырезан. ¦ •
dMFiiewoikl MX 2(1114 ILInIiII,.-J ^
File Edit View ?elect Modify Text Commanda Fiheis Window Help
Puc. 3.73. Фрагмент вырезан
Обратите внимание на значок © и надпись Slice:, которое*означают, что выделенный ' объект является фрагментом изображения. ' ^15 -; . - • '
'-' >¦ Создайте фрагмент рисунка из нижнего прямоугольника.
\ 'Отметим, что если удерживать нажатой левую кнопку мыши на значке на панели Tools
(Инструменты), то в открывшемся меню для фрагментов можно воспользоваться командой
Polygon Slice Tool (Инструмент «Многоугольный фрагмент»), чтобы_ вырезать непрямо-.
превращается в
угольную часть изображения. При выборе последней команды
Теперь сопоставим фрагментам рисунка ссылки на документы.
Нажмите кнопку на панели Tools (Инструменты).
Щелкните мышью на фрагменте с надписью Компьютеры, чтобы выделить его.
На панели Properties (Свойства) появятся параметры фрагмента (Рис. 3.74).
Ir=*»
Type: [image JJ Ц Link: [ ?»| ©
«Й'^'*.___1=1 «Ч_____J
I WiTTiTj X: TJTj
Target: [~ " [Vj
Д.
Рис. 3.74. Панель свойств фрагмента ;>.',,В-поле ввода Link (Ссылка) дадите имя файла компьютерьі.гпті, на который будет
ссылаться выбранный фрагмент.
lO4 > Быстро и легко создаем, программируем и раскручиваем Web-сайт
Поле alt можно использовать для ввода текста, который будет появляться в окне браузер ра, пока данный фрагмент рисунка будет загружаться или если в браузере отключено.
отображение рисунков.
> Выделите нижний прямоугольник с надписью Принтеры и присвойте ему ссылку на документ
Следует отметить, что можно использовать ссылки на документы с других Web-сайтов. Давайте оптимизируем фрагменты рисунка.
> Если на экране нет панели Optimize (Оптимизировать), то выберите команду меню Window ¦ Optimize (Окно • Оптимизировать). На экране появится панель Optimize
(Оптимизировать) (Рис. 3.40). ¦ ¦ „h-
> Во втором сверху открывающемся списке панели Optimize (Оптимизировать) выбе-.... рите строку GIF, чтобы в дальнейшем сохранить фрагменты в GIF-файлах.
> В открывающемся списке Colors (Цвета) выберите число цветов 8, которые будут использоваться в оптимизируемых частях.
Чтобы сохранить фрагменты рисунка на диске, выполните следующие шаги.
> Выберите команду меню File ¦ Export (Файл ¦ Экспорт). На экране появится диалог ¦ . Export (Экспорт) (Рис. 3.41).
В открывающемся списке Папка (Save in) выберите диск для сохранения фрагментов изображения.
> В списке папок и файлов диалога Export (Экспорт) выберите папку, в которую нужно
записать части рисунка.
Если во введенных ссылках не был указан полный путь или электронный адрес документа, то данный документ и сохраняемые файлы должны находиться в одном каталоге.
Обратите внимание, что в открывающихся списках Тип файла (File type) и HTML выбраны строки HTML and Images (HTML и образы) и Export HTML File (Экспорт HTML-файла). Дело в том, что графическое меню как единое целое будет представлено в HTML-файле, а фрагменты рисунка - ячейками таблицы в данном файле. При этом фактически в HTML-файле будут храниться автоматически сформированные имена GIF-файлов с
фрагментами изображения.
В поле ввода Имя файла (File name) введите имя HTML-файламеню.
* Нажмите кнопку Сохранить (Save), чтобы закрыть
диалог Export (Экспорт). На диске будут созданы
HTML- и GIF-файлы с фрагментами рисунка.
Сейчас просмотрим созданное графическое меню.
