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


Тестирование карты ссылок

Тестирование карты ссылок
Теперь, когда карта ссылок создана, настало время проверить ее в работе. Нажмите кнопку Preview in Default Browser (Просмотр в браузере по умолчанию) на панели инструментов. Image Ready создаст временный HTML-файл, содержащий ссылку на изображение и описание карты ссылок, ассоциированной с ним. Временный файл будет загружен в браузер, установленный в операционной системе по умолчанию. Для проверки программа использует возможность браузера самостоятельно, без помощи сервера, обрабатывать карты ссылок.
Подводите курсор к различным участкам изображения, и наблюдайте в строке состояния браузера адрес ссылки. Если вы вводили в палитре Image Map (Карта ссылок) альтернативный текст, то он должен появиться как всплывающая подсказка. Щелчок на любой из зон карты ссылок приведет к ошибке 404, ведь страниц, которые вы указывали в поле URL, не существует. Тем не менее, по содержимому строки адреса в браузере вы можете оценить, что карта ссылок сработала, и сработала верно!
Выравнивание зон карты ссылок
Точное размещение зон карты ссылок может оказаться довольно трудоемким делом. Команды выравнивания и распределения облегчают эту работу. Они находятся в меню палитры Image Map (Карта ссылок), а их кнопки — на панели свойств инструмента Image Map Select (Выделение карты ссылок).
Чтобы выровнять или распределить несколько уже созданных зон, предварительно выделите их инструментом Image Map Select (Выделение карты ссылок), пользуясь либо выделительной рамкой, либо щелкнув внутри каждой зоны, удерживая нажатой клавишу Shift. После этого можно выбрать команду или нажать кнопку требуемого типа выравнивания. Выравнивание зон карты ссылок действует совершенно аналогично выравниванию контуров или слоев, с которым вы уже хорошо знакомы.
Порядок наложения зон
Зоны карты ссылок в ImageReady могут перекрывать друг друга. Рис. II.26 иллюстрирует такой случай на знакомом вам примере карт Франции и Германии. Прямоугольные зоны, соответствующие этим странам, пересекаются. Куда же приведет щелчок мышью в браузере на пересечении этих зон:
Зоны карты ссылок в ImageReady перекрываются по тем же правилам, что и слои. Зона, находящаяся "выше", частично или полностью перекрывает нижележащие. Таким образом, если в нашем примере зона Германии находится выше, то именно ей и принадлежит область наложения зон.
Порядком наложения зон можно управлять командами меню палитры Image Map (Карта ссылок) или эквивалентными им кнопками на панели свойств инструмента Image Map Select (Выделение карты ссылок). Эти команды называются и функционируют точно так же, как и команды, управляющие порядком перекрывания слоев.
Разрезание изображений
На Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различные гипертекстовые ссылки, наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя код HTML. Выполнение такой работы вручную — весьма длительный и нетворческий процесс. ImageReady может сделать за вас самую трудную ее часть!
Определение фрагментов
1. Откройте изображение Relief.psd и сохраните его под именем Europe_sliced.psd в вашей рабочей папке.
2. Включите режим отображения фрагментов нажатием кнопки Toggle Slices Visibility (Переключение видимости фрагментов) на панели инструментов. Как видите, даже если изображение не разрезано, ImageReady считает его разрезанным, правда на единственный "кусок". Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой.
3. Выберите инструмент Slice (Фрагмент) на палитре инструментов. Работа с ним похожа на работу с инструментом Crop (Обрезка): сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов.
4. Поместите курсор инструмента Slice (Фрагмент) в левый верхний угол изображения; Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется вся территория Великобритании. Затем отпустите кнопку мыши.
Автоматические фрагменты
Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут быть только прямоугольной
формы, программа автоматически создала еще два фрагмента. Пользовательские (созданные пользователем) и автоматические фрагменты имеют для ImageReady разные свойства. Для первых программа не может изменить расположение и размер, а за размером и размещением автоматических фрагментов она следит сама. Если вы поменяете размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" и перекрываний. Автоматические фрагменты имеют в левом верхнем углу пиктограммы серого цвета, а пользовательские — других цветов. Отображаются автоматические фрагменты более приглушенными цветами, чем пользовательские. Границы между автоматическими фрагментами обозначены пунктирной линией, а между пользовательскими — сплошной.
1. Выберите на палитре инструментов инструмент Slice Select (Выделение фрагмента). Он применяется для уточнения размеров и положения фрагментов.
2. Щелкните курсором мыши в пределах созданного вами фрагмента, чтобы выделить его. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь манипуляторов, которые служат для масштабирования.
3. Перетащите правый боковой манипулятор рамки немного вправо. Фрагмент увеличился по горизонтали. Автоматический фрагмент справа стал более узким, а фрагмент снизу — шире. ImageReady самостоятельно изменил их размеры так, чтобы количество фрагментов оставалось прежним. Верните пользовательскому фрагменту исходный размер. Программа снова скорректирует автоматические фрагменты.
4. Щелкните курсором мыши в пределах правого автоматического фрагмента. Изображение внутри фрагмента стало ярким, фрагмент выделен. Обратите внимание, что рамка автоматического фрагмента не имеет манипуляторов, поскольку его размер устанавливается программой.
5. Автоматический фрагмент можно легко преобразовать в пользовательский. Выберите команду Promote to User-slice (Преобразовать фрагмент в пользовательский) из меню Slices (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши в пределах автоматического фрагмента. Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.
6. Переместите левый боковой манипулятор выделенного фрагмента вправо. Поскольку ImageReady теперь не поддерживает его размер автоматически, перемещение границы фрагмента приведет к появлению дополнительного автоматического фрагмента, закрывающего возникшую "дырку".
Разбивка фрагментов
Теперь разрежем изображение на фрагменты, соответствующие территории стран.
1. Выделите правый фрагмент (№ 3) с помощью инструмента Slice Select (Выделение фрагмента).
2. Выберите команду Divide Slice (Разделить фрагмент) из меню Slices (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши на выделенном фрагменте. Появится одноименное диалоговое окно, представленное. Команда разбивает уже созданный фрагмент на несколько пользовательских фрагментов, а в диалоговом окне задаются параметры разбиения.
Окно состоит из двух областей Divide Horizontally Into (Деление по горизонтали) и Divide Vertically Into (Деление по вертикали), в которых одинаковым способом устанавливаются параметры горизонтального и вертикального разбиения, соответственно. Разбивка по заданному направлению включается флажком в верхней части области. Разбивку можно производить исходя из количества фрагментов одинаковой высоты (ширины), умещающихся в исходном фрагменте, или размера получающихся фрагментов. В первом случае используются поля ввода slices down/across, evenly spaced (фрагментов в высоту/ширину, с равными интервалами). В верхней области задается количество фрагментов по горизонтали, а в нижней — по вертикали. Во втором случае используются поля ввода pixels per slice (пикселов на фрагмент), где задаются размеры фрагментов по горизонтали (верхняя область) и вертикали (нижняя область). Если размер исходного фрагмента не делится точно на введенный, то последний фрагмент будет иметь меньший размер.
3. Разобьем фрагмент по горизонтали на три. Установите флажок Divide Horizontally Into (Деление по горизонтали) и сбросьте флажок Divide Vertically Into (Деление по вертикали). В поле slices down, evenly spaced (фрагментов в высоту, с равными интервалами) введите значение 3. Установите флажок Preview (Просмотр), чтобы оценить правильность установок. Результат разбивки фрагмента будет показан в окне документа. Нажмите кнопку ОК.
4. Выберите инструмент Slice Select (Выделение фрагмента) на палитре инструментов и, выделите щелчком мыши правый верхний фрагмент № 3.
5. Перетащите левый боковой, манипулятор к границе соседнего пользовательского фрагмента № 1, чтобы между ними не оставалось места. Рамки фрагментов при касании "прилипают" друг к другу как к направляющим линиям. Это обеспечивает точность размещения фрагментов встык. Обратите внимание, что при изменении разбивки на фрагменты ImageReady может перенумеровать их в соответствии с правилом "слева направо и сверху вниз". Так, в нашем случае фрагменты № 2 и № 3 поменялись номерами.
Примечание
Пользовательские фрагменты могут располагаться не только встык, но и накладываться друг на друга. Какой из фрагментов окажется выше, задается командами, находящимися в списке Arrange (Монтаж) меню Slices (Фрагменты). Команды Bring to Front (Самый верхний) и Send to Back (Самый нижний) помещают фрагмент поверх остальных или ниже всех соответственно. Команды Bring Forward (Сдвинуть вперед) и Send Backward (Сдвинуть назад) имеют смысл, только если перекрываются более двух фрагментов. В этом случае они располагают выделенный фрагмент выше или ниже текущего положения. Эти команды доступны также из меню палитры Slice (Фрагмент) и на панели свойств инструмента Slice Select (Выделение фрагмента).

6. Выберите на палитре инструментов инструмент Slice (Фрагмент) и создайте им новый фрагмент, охватывающий на карте территорию Франции. Верхней стороной он должен касаться фрагмента № 1, а правой — фрагментов № 4 и № 6. Как только будет создан новый фрагмент, программа их автоматически перенумерует.
Если у вас не получились сразу такие же линии разреза, как на рисунке, скорректируйте их положение инструментом Slice Select (Выделение фрагмента). Если же вы случайно создали лишний пользовательский фрагмент, просто удалите его. Выберите в меню Slices (Фрагменты) или контекстном меню (открывается по щелчку правой кнопки мыши) команду Delete Slice (Удалить фрагмент), или просто нажмите клавишу Delete.
Кстати, удаление пользовательских фрагментов не всегда приводит к изменению их количества.
1. Выделите фрагмент № 2, соответствующий территории Швеции, инструментом Slice Select (Выделение фрагмента).
2. Удалите выделенный фрагмент, нажав клавишу Del. Фрагмент остался на месте, но из пользовательского превратился в автоматический. Причина этого вполне очевидна: фрагмент все равно необходим для заполнения "дыр" между другими пользовательскими фрагментами.
3. Удалите фрагмент № 7. Количество фрагментов опять осталось прежним, но фрагмент, соответствующий территории Италии стал автоматическим.
При разбивке изображений на фрагменты старайтесь оставлять автоматическими максимально возможное их количество. Тогда вы сможете управлять разбивкой, перемещая меньшее количеств? манипуляторов.

Comments are closed.