Делаем карту ссылок
На рисунке 12.30 вы видите окно программы ImageReady из комплекта Photoshop CS, в которое загружен некий рисунок для изготовления карты. ную надпись, а в строке Target выбираем, в каком окне будет открываться ссылка: если оставить строку пустой, то - в том же; на нашем рисунке ссылка будет открываться в новом окне (или на новой странице) браузера. В списке, который раскрывается на строке Target, есть строки _blank, _parent, _self или _top, которые пригодятся нам при размещении карты на странице с фреймовой структурой. Так, параметр Target="_blank" задает, что ссылка должна открываться в новом пустом окне; Target="_parent" - в «родительском» фрейме и т. д. А что будет, если выделенные области пересекутся? Какая из ссылок будет работать в месте пересечения? Та, которая окажется выше в создаваемом программой html-коде: те области, которые были нами нарисованы раньше, оказываются ниже, более поздние — выше. Впрочем, порядок расположения областей задан не жестко, можно его изменить. Например, указать, что выбранная область должна быть выше всех остальных или, наоборот, ниже всех. Поглядите на горизонтальную настроечную панельку, которая расположена прямо под строкой меню. Слева там есть группа из четырех кнопочек в виде стопки листков. Они как раз и управляют расположением выделенной области относительно остальных. Первая ставит область выше всех, четвертая - ниже всех. Вторая повышает на одно место (ставит ее выше предыдущей), а третья, наоборот, понижает (ставит под следующую). Я не думаю, что вам очень часто придется менять порядок областей, но знать об этом все-таки полезно. Остальные кнопки настроечной панели позволяют подровнять и выстроить выделенные области: например, выровнять по осевой линии, выровнять по верху или по низу, по левому или правому краю, поставить на равных расстояниях друг от друга и т. п. Все эти вещи достаточно подробно рассмотрены в «графике и звуке», здесь я все это повторять не буду. ... Как теперь просмотреть результаты нашей работы? Обратите внимание на третий снизу ряд кнопок на главной панели инструментов ImageReady, в котором стоит значок Оперы с буквой О. Если щелкнуть по нему мышкой и подержать секундочку, то вы увидите, в какие еще браузеры можно немедленно отправить нашу карту, чтобы протестировать ее. Команды предварительного просмотра доступны также через подменю Рге Галочка в строке Include Source on Page (показать источник на странице) означает, что просмотре под картинкой будут показаны сведения о графическом файле, а еще ниже - полный код веб-странички, который создала программа. При просмотре карты в браузере вы увидите, что активные области никак не обозначены, не подчеркнуты, не помечены. О наличии ссылки можно узнать только по превращению стерлочки курсора в лапку и, возможно, по всплывающей подсказке. Так что кто-то из посетителей вашей странички может и не понять, что тут у вас какие-то ссылки спрятаны - поглядит, пожмет плечами, да и уйдет. А кто-то не заметит каких-то мелких областей-ссылок. Чтобы исключить подобные недоразумения, активные области на рисунке должны быть непременно как-то обозначены. А уж как обозначены - это уже вопрос дизайнерский, авторский. Цветом, обводкой, надписями какими-нибудь, стрелочками - мало ли. Можно сделать, чтобы они при подведении мышки как-то видоизменялись (об этом ниже). Ну и последнее, что нужно сделать, - это сохранить результат нашей работы в виде веб-страницы. Делается это по команде Save Optimized as в меню File (действует также клавиатурная комбинация Ctrl-Shift-Alt-S). В строке Тип файпа выберете HTML and Images (HTML + рисунки), после этого в указанной вами папке появится файл веб-страницы с таким же именем, что и у исходной картинки, а сама картинка окажется рядом - в поддиректории images. Можете теперь взять файл в веб-редактор и заняться необходимой доработкой - ввести какой-то текст, оформить его и все прочее. Впрочем, отправить получающуюся страничку на доработку в редактор можно прямо из ImageReadyцщщщдщ File > Jump to t Other HTML Editor (прыгнуть в другой html-редактор). ImageReady попросит вас указать редактор, откроет его и загрузит в него html-файл. Если вы ни разу не сохранили файл, надо будет это сделать сейчас. Сравнив размеры исходного графического файла и того, который окажется в папке images после сохранения, вы заметите, что файл, созданный программой, значительно меньше исходного, иногда даже в несколько раз. Вполне может оказаться также, что у файла окажется другое расширение: вместо вашего TIP, BMP или PSD-файла будет там лежать GIF или JPG. Дело, как вы догадываетесь, в том, что в интернете используются файлы только трех форматов (обычно всего двух): JPG, GIF и изредка - PNG. Так что ImageReady при создании карты автоматически переводит ваш файл в формат, понятный всем браузерам. Ну и кроме того, мы имеем дело с программой, которая уменьшает размеры графических файлов, оптимизирует их так, чтобы вес был поменьше, а качество изображения осталось высоким. Но сжатие графики в автоматическом режиме не всегда дает наилучшие результаты, стоит в этом деле поучаствовать самому.