Главная » Adobe Photoshop CS2 » Карты ссылок


Карты ссылок

Карты ссылок
Создадим изображение в Photoshop на основе карты Европы, с которой мы работали в главе 4. На карте цветом выделены несколько стран, куда некая фирма организует туры. Изображение после размещения на сайте этой фирмы будет служить картой ссылок на страницы с подробной информацией о каждом туре. Иными словами, щелчок курсором мыши на территории любой страны в этой карте должен приводить к отдельной Web-странице.
Инструменты определения зон
ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на зоны, выполненной пользователем. Разбить изображение на зоны карты ссылок можно либо специальными инструментами, либо на основе слоев в документе. Для ввода ссылок используется палитра Image Map (Карта ссылок).
1. Откройте документ Relief.psd из рабочей папки на жестком диске и сохраните его под именем Europe_map.psd с помощью команды Save As (Сохранить как) меню File (Файл).
2. На панели инструментов выберите инструмент Rectangle Image Map (Прямоугольная карта ссылок).
3. Создадим этим инструментом прямоугольную зону для карты ссылок и назначим ей гипертекстовую ссылку. Очертите инструментом Rectangle Image Map (Прямоугольная карта ссылок) территорию Великобритании так, как вы сделали бы это инструментом Crop (Обрезка). Появилась прямоугольная рамка вокруг зоны карты ссылок.
Примечание
Изображение внутри рамки выглядит немного светлее, чем должно быть. Таким Образом ImageReady показывает зону карты ссылок. Подчеркнем, что это, как и рамка, только лишь способ отображения зоны: цвета изображения на самом деле не меняются. Отмените отображение карты ссылок кнопкой Toggle Image Maps Visibility (Переключение видимости карты ссылок), и вы убедитесь в этом. Настройки режима отображения карт ссылок сосредоточены в разделе Image Maps (Карты ссылок) диалогового окна Preferences (Установки). В поле Image Map Overlay (Наложение карт ссылок) задается величина освет-ления зон карты ссылок. Чтобы отменить осветление, установите флажок Show Lines Only (Показывать только линии). Цвет рамки вокруг зоны карты ссылок выбирайте в списке Line Color (Цвет линий). Флажок Show Bounding Box / (Показать габаритную рамку) включает показ габаритной рамки у круглых зон.

4. Выберите на панели инструментов инструмент Image Map Select (Выделение карты ссылок).
5. Скорректируйте созданный контур зоны карты ссылок, перемещая боковые и угловые манипуляторы рамки вокруг области.
6. Теперь определим зону карты ссылок для Голландии. Прямоугольная форма зоны в этом случае не подходит, т. к. прямоугольник "залезет" на территорию Германии. Выберите на панели инструментов инструмент Polygon Image Map (Многоугольная карта ссылок).
7. Подведите курсор инструмента к границе соседней зоны карты ссылок, над изображением мельницы, и щелкните мышью.Вы определили первый угол многоугольной зоны
.
8. Перемещайте курсор вниз, за ним потянется тонкая линия отмечающая сторону многоугольной зоны. Чтобы линия была строго вертикальной, нажмите клавишу Shift. Эта сторона новой зоны должна совпадать со стороной соседней.
9. Когда курсор окажется ниже изображение мельницы, сделайте еще один щелчок мышью. Вы определили положение второго угла и одной стороны многоугольной зоне.
10. Продолжайте определять углы многоугольной зоны (рис 1121) Когда вы будете создавать последнюю сторону зоны, курсор окажется в точке из которой вы начинали. Рядом с курсором появится маленький кружок Теперь щелчок мыши замкнет контур зоны карты ссылок.
С помощью инструментов, использованных в этом упражнении, вы можете определить произвольные зоны, составляющие карту ссылок. При этом наличие слоев в документе не важно, поскольку карта ссылок строится для документа в целом. Не рассмотренный нами инструмент создания круглой зоны работает так же, как для прямоугольной. Инструмент Image Map Select (Выделение карты ссылок) используется не только для коррекции формы зон, но и для их выделения. Чтобы выделить зону, щелкните инструментом внутри нее. Вокруг выделенной зоны появится рамка с манипуляторами.
Назначение ссылок зонам
Мы определили две области карты ссылок. Поставим им в соответствие гипертекстовые ссылки на Web-страницы, содержащие дополнительную информацию о турах в Великобританию и Голландию.
1. Инструментом Image Map Select (Выделение карты ссылок) выделите зону карты ссылок, соответствующую Великобритании.
2. Откройте палитру Image Map (Карта ссылок) либо командой Show Image Map (Показать Карту ссылок) меню Window (Окно), либо нажав кнопку Image Map Palette (Палитра Карта ссылок) на панели свойств.
3. В области Dimensions (Размеры) указаны абсолютные размеры и координаты зоны карты ссылок. Они даны не только для информации. При необходимости вы можете ввести их численно. В поле Name (Имя) находится имя зоны. По умолчанию ImageReady сама дает зонам имена, образованные из префикса ImageMap_ и номера зоны в порядке создания. Если вы не собираетесь редактировать HTML-код карты ссылок вручную, то не тратьте время на переименование зоны. Имя фигурирует только в коде страницы и не видно в браузере пользователя.
4. В раскрывающийся список URL введите URL ссылки, соответствующей выделенной зоне (в нашем случае — имя Britain.html).
5. В списке Target (Целевой фрейм) выберите один из стандартных фреймов, в который будет загружен ресурс, указанный в списке URL. Если ресурс необходимо вывести в каком-то заданном фрейме, наберите его имя в строке ввода списка. Пустая строка эквивалентна выбору в списке варианта _self, т. е. того же фрейма, в котором находится карта ссылок.
6. В строку ввода Alt (Альтернативный текст) введите текстовое описание зоны. Оно будет видно в графическом браузере как всплывающая подсказка, а в текстовом — вместо изображения.
7. Инструментом Image Map Select (Выделение карты ссылок) выделите зону карты ссылок, соответствующую Голландии.
8. Заполните поля палитры Image Map (Карта ссылок). В качестве адреса ссылки введите имя файла Holland, html. Обратите внимание на то, что поля размеров для многоугольной области недоступны.
Двум зонам карты ссылок назначены адреса.
Зона на основе слоя
Часто фрагменты изображения, для которых надо организовать отдельные ссылки, распределены по слоям документа. ImageReady может автоматически создать зоны, исходя из содержимого слоя. Это особенно удобно в нашем случае, когда форма зон достаточно сложна.
1. В палитре Layers (Слои) активизируйте слой Italy.
2. В меню Layer (Слой) выберите команду New Layer Based Image Map Area (Новая зона карты ссылок на основе слоя). ImageReady создаст новую прямоугольную зону, описывающую все содержимое слоя.
3. Прямоугольная область недостаточно близко описывает контур Италии. Большую точность обеспечит многоугольная зона. В палитре Image Map (Карта ссылок) в списке Shape (Форма) выберите вариант Polygon (Многоугольник). Форма зоны изменится на многоугольную. Обратите внимание, что область охватывает все содержимое слоя, включая контуры островов.
4. Поле Quality (Качество) в палитре Image Map (Карта ссылок) определяет точность, с которой контур зоны описывает содержимое слоя. Чем выше точность, тем больше углов имеет контур зоны и, следовательно, требует места в HTML-коде, и времени на загрузку в браузер пользователя. В данном случае 80% — вполне достаточное качество.
5. Назначьте созданной зоне в палитре Image Map (Карта ссылок) ссылку на Web-страницу Italy.html. Обратите внимание, что адрес ссылки появился в палитре Layers (Слои) в строке слоя, с которым ассоциирована зона.
6. ImageReady следит за содержимым слоя, на основе которого определена зона карты ссылок. Редактирование слоя приводит к автоматическому обновлению контура зоны. Выберите на панели инструментов инструмент Rectangle (Прямоугольник), а на панели свойств установите режим Create Filled Region (Заполнить область). Нарисуйте на слое Italy прямоугольник. Вокруг него тотчас же появится контур зоны карты ссылок. Удалите прямоугольник инструментом Eraser (Ластик). По мере удаления контур зоны будет автоматически корректироваться.
7. Чтобы отменить связь зоны карты ссылок со слоем, выберите в меню палитры Image Map (Карта ссылок) команду Promote Layer Based Image Map Area (Преобразовать зону, основанную на слое).
8. Связь зоны со слоем разорвана, и при редактировании слоя контур зоны останется без изменения. Создайте зоны на основе слоев France, Sweden и Germany. Назначьте каждой зоне ссылку на тестовые Web-страницы France, html, Sweden.html и Germany.html.

Comments are closed.