Карты ссылок
Создадим изображение в Photoshop на основе карты Европы, с которой мы работали в главе 4. На карте цветом выделены несколько стран, куда некая фирма организует туры. Изображение после размещения на сайте этой фирмы будет служить картой ссылок на страницы с подробной информацией о каждом туре. Иными словами, щелчок курсором мыши на территории любой страны в этой карте должен приводить к отдельной Web-странице.
Инструменты определения зон
ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на зоны, выполненной пользователем. Разбить изображение на зоны карты ссылок можно либо специальными инструментами, либо на основе слоев в документе. Для ввода ссылок используется палитра Image Map (Карта ссылок).
1. Откройте документ Relief.psd из рабочей папки на жестком диске и сохраните его под именем Europe_map.psd с помощью команды Save As (Сохранить как) меню File (Файл).
2. На панели инструментов выберите инструмент Rectangle Image Map (Прямоугольная карта ссылок).
3. Создадим этим инструментом прямоугольную зону для карты ссылок и назначим ей гипертекстовую ссылку. Очертите инструментом Rectangle Image Map (Прямоугольная карта ссылок) территорию Великобритании так, как вы сделали бы это инструментом Crop (Обрезка). Появилась прямоугольная рамка вокруг зоны карты ссылок (рис. 11.19).
Рис. 11.19. Зона карты ссылок
Примечание
Изображение внутри рамки выглядит немного светлее, чем должно быть. Таким Образом ImageReady показывает зону карты ссылок. Подчеркнем, что это, как и рамка, только лишь способ отображения зоны: цвета изображения на самом деле не меняются. Отмените отображение карты ссылок кнопкой Toggle Image Maps Visibility (Переключение видимости карты ссылок), и вы убедитесь в этом. Настройки режима отображения карт ссылок сосредоточены в разделе Image Maps (Карты ссылок) диалогового окна Preferences (Установки) (рис. 11.20). В поле Image Map Overlay (Наложение карт ссылок) задается величина освет-ления зон карты ссылок. Чтобы отменить осветление, установите флажок Show Lines Only (Показывать только линии). Цвет рамки вокруг зоны карты ссылок выбирайте в списке Line Color (Цвет линий). Флажок Show Bounding Box / (Показать габаритную рамку) включает показ габаритной рамки у круглых зон.
4. Выберите на панели инструментов инструмент Image Map Select (Выделение карты ссылок).
5. Скорректируйте созданный контур зоны карты ссылок, перемещая боковые и угловые манипуляторы рамки вокруг области.
6. Теперь определим зону карты ссылок для Голландии. Прямоугольная форма зоны в этом случае не подходит, т. к. прямоугольник "залезет" на территорию Германии. Выберите на панели инструментов инструмент Polygon Image Map (Многоугольная карта ссылок).
Рис.11.20. Раздел Image Maps диалогового окна Preferences
7. Подведите курсор инструмента к границе соседней зоны карты ссылок, над изображением мельницы, и щелкните мышью.Вы определили первый угол многоугольной зоны
.
8. Перемещайте курсор вниз, за ним потянется тонкая линия отмечающая сторону многоугольной зоны. Чтобы линия была строго вертикальной, нажмите клавишу Shift. Эта сторона новой зоны должна совпадать со стороной соседней.
9. Когда курсор окажется ниже изображение мельницы, сделайте еще один щелчок мышью. Вы определили положение второго угла и одной стороны многоугольной зоне.
10. Продолжайте определять углы многоугольной зоны (рис 1121) Когда вы будете создавать последнюю сторону зоны, курсор окажется в точке из которой вы начинали. Рядом с курсором появится маленький кружок Теперь щелчок мыши замкнет контур зоны карты ссылок.
Рис. 11.21. Создание многоугольной зоны карты ссылок
С помощью инструментов, использованных в этом упражнении, вы можете определить произвольные зоны, составляющие карту ссылок. При этом наличие слоев в документе не важно, поскольку карта ссылок строится для документа в целом. Не рассмотренный нами инструмент создания круглой зоны работает так же, как для прямоугольной. Инструмент Image Map Select (Выделение карты ссылок) используется не только для коррекции формы зон, но и для их выделения. Чтобы выделить зону, щелкните инструментом внутри нее. Вокруг выделенной зоны появится рамка с манипуляторами.
Назначение ссылок зонам
Мы определили две области карты ссылок. Поставим им в соответствие гипертекстовые ссылки на Web-страницы, содержащие дополнительную информацию о турах в Великобританию и Голландию.
1. Инструментом Image Map Select (Выделение карты ссылок) выделите зону карты ссылок, соответствующую Великобритании.
2. Откройте палитру Image Map (Карта ссылок) либо командой Show Image Map (Показать Карту ссылок) меню Window (Окно), либо нажав кнопку Image Map Palette (Палитра Карта ссылок) на панели свойств (рис. 11.22).
Рис. 11.22. Палитра Image Map
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 (Карта ссылок) определяет точность, с которой контур зоны описывает содержимое слоя (рис. 11.23). Чем выше точность, тем больше углов имеет контур зоны и, следовательно, требует места в HTML-коде, и времени на загрузку в браузер пользователя. В данном случае 80% — вполне достаточное качество.
5. Назначьте созданной зоне в палитре Image Map (Карта ссылок) ссылку на Web-страницу Italy.html. Обратите внимание, что адрес ссылки появился в палитре Layers (Слои) в строке слоя, с которым ассоциирована зона (рис. 11.24).
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.
а
б
в
г
Рис. 11.23. Форма контура зоны при разных значениях параметра Quality:
25 (а), 60 (б), 80 (в) и 100% (г)
Рис.11.24. Ссылка, ассоциированная со слоем в палитре Layers
Тестирование карты ссылок
Теперь, когда карта ссылок создана, настало время проверить ее в работе. Нажмите кнопку Preview in Default Browser (Просмотр в браузере по умолчанию) на панели инструментов. Image Ready создаст временный HTML-файл, содержащий ссылку на изображение и описание карты ссылок, ассоциированной с ним. Временный файл будет загружен в браузер, установленный в операционной системе по умолчанию. Для проверки программа использует возможность браузера самостоятельно, без помощи сервера, обрабатывать карты ссылок.
Подводите курсор к различным участкам изображения, и наблюдайте в строке состояния браузера адрес ссылки. Если вы вводили в палитре Image Map (Карта ссылок) альтернативный текст, то он должен появиться как всплывающая подсказка. Щелчок на любой из зон карты ссылок приведет к ошибке 404, ведь страниц, которые вы указывали в поле URL, не существует. Тем не менее, по содержимому строки адреса в браузере вы можете оценить, что карта ссылок сработала, и сработала верно!
Выравнивание зон карты ссылок
Точное размещение зон карты ссылок может оказаться довольно трудоемким делом. Команды выравнивания и распределения облегчают эту работу. Они находятся в меню палитры Image Map (Карта ссылок), а их кнопки — на панели свойств инструмента Image Map Select (Выделение карты ссылок) (рис. II.25).
Рис. 11.25. Панель свойств инструмента Image Map Select
Чтобы выровнять или распределить несколько уже созданных зон, предварительно выделите их инструментом Image Map Select (Выделение карты ссылок), пользуясь либо выделительной рамкой, либо щелкнув внутри каждой зоны, удерживая нажатой клавишу Shift. После этого можно выбрать команду или нажать кнопку требуемого типа выравнивания. Выравнивание зон карты ссылок действует совершенно аналогично выравниванию контуров или слоев, с которым вы уже хорошо знакомы.
Порядок наложения зон
Зоны карты ссылок в ImageReady могут перекрывать друг друга. Рис. II.26 иллюстрирует такой случай на знакомом вам примере карт Франции и Германии. Прямоугольные зоны, соответствующие этим странам, пересекаются. Куда же приведет щелчок мышью в браузере на пересечении этих зон:
Рис. 11.26. Перекрывание зон карты ссылок
Зоны карты ссылок в ImageReady перекрываются по тем же правилам, что и слои. Зона, находящаяся "выше", частично или полностью перекрывает нижележащие. Таким образом, если в нашем примере зона Германии находится выше, то именно ей и принадлежит область наложения зон.
Порядком наложения зон можно управлять командами меню палитры Image Map (Карта ссылок) или эквивалентными им кнопками на панели свойств инструмента Image Map Select (Выделение карты ссылок). Эти команды называются и функционируют точно так же, как и команды, управляющие порядком перекрывания слоев.
Разрезание изображений
На Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различные гипертекстовые ссылки, наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя код HTML. Выполнение такой работы вручную — весьма длительный и нетворческий процесс. ImageReady может сделать за вас самую трудную ее часть!
Определение фрагментов
1. Откройте изображение Relief.psd и сохраните его под именем Europe_sliced.psd в вашей рабочей папке.
2. Включите режим отображения фрагментов нажатием кнопки Toggle Slices Visibility (Переключение видимости фрагментов) на панели инструментов. Как видите, даже если изображение не разрезано, ImageReady считает его разрезанным, правда на единственный "кусок". Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой (рис. 11.27).
Рис. 11.27. Рамка фрагмента
3. Выберите инструмент Slice (Фрагмент) на палитре инструментов. Работа с ним похожа на работу с инструментом Crop (Обрезка): сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов.
4. Поместите курсор инструмента Slice (Фрагмент) в левый верхний угол изображения; Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется вся территория Великобритании. Затем отпустите кнопку мыши (рис. II.28, а).
Автоматические фрагменты
Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут быть только прямоугольной
Рис. 11.28. Разрезание изображения
формы, программа автоматически создала еще два фрагмента. Пользовательские (созданные пользователем) и автоматические фрагменты имеют для ImageReady разные свойства. Для первых программа не может изменить расположение и размер, а за размером и размещением автоматических фрагментов она следит сама. Если вы поменяете размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" и перекрываний. Автоматические фрагменты имеют в левом верхнем углу пиктограммы серого цвета, а пользовательские — других цветов. Отображаются автоматические фрагменты более приглушенными цветами, чем пользовательские. Границы между автоматическими фрагментами обозначены пунктирной линией, а между пользовательскими — сплошной (рис. II.28, б).
1. Выберите на палитре инструментов инструмент Slice Select (Выделение фрагмента). Он применяется для уточнения размеров и положения фрагментов.
2. Щелкните курсором мыши в пределах созданного вами фрагмента, чтобы выделить его. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь манипуляторов, которые служат для масштабирования.
3. Перетащите правый боковой манипулятор рамки немного вправо. Фрагмент увеличился по горизонтали. Автоматический фрагмент справа стал более узким, а фрагмент снизу — шире. ImageReady самостоятельно изменил их размеры так, чтобы количество фрагментов оставалось прежним (рис. 11.29). Верните пользовательскому фрагменту исходный размер. Программа снова скорректирует автоматические фрагменты.
Рис. 11.29. Коррекция размеров автоматических фрагментов при изменении пользовательского
Рис. 11.30. Появление дополнительного автоматического фрагмента
4. Щелкните курсором мыши в пределах правого автоматического фрагмента. Изображение внутри фрагмента стало ярким, фрагмент выделен. Обратите внимание, что рамка автоматического фрагмента не имеет манипуляторов, поскольку его размер устанавливается программой.
5. Автоматический фрагмент можно легко преобразовать в пользовательский. Выберите команду Promote to User-slice (Преобразовать фрагмент в пользовательский) из меню Slices (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши в пределах автоматического фрагмента. Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.
6. Переместите левый боковой манипулятор выделенного фрагмента вправо. Поскольку ImageReady теперь не поддерживает его размер автоматически, перемещение границы фрагмента приведет к появлению дополнительного автоматического фрагмента, закрывающего возникшую "дырку" (рис. 11.30).
