1  2  3  4  5  6  7

Карты - изображения
Изображение-гиперссылка — это простейший случай графических гиперссылок, применяемых сейчас в Web -дизайне. Более сложным случаем являются активное изображение и карта-изображение, сложная графическая гиперссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой отдельные гиперссылки, называются "горячими областями".
Для создания карты-изображения используются обычные графические изображения, созданные в любом графическом редакторе. Информация о местонахождении, форме, размерах "горячих областей" и интернет-адресах, на которые они указывают, хранится в HTML -коде страницы.
Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать.
В данный момент давайте не будем использовать на своих Web -страницах карты-изображения. Однако пример создания привести необходимо, поэто­му мы создадим специальную Web -страничку и специальное изображение для учебных нужд. Файл изображения называется
Map.gif , а файл странички - 4.2.htm . Эта страничка не будет содержать ничего, кроме изображения.
Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств к пока еще нами не рассмотренные. Теперь пришла пора разобраться с ними.
Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет разместить его на изображении соответственно прямоугольную, круглую и многоугольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями". Как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, защелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.
После этого, как вы заметили, Dreamweaver подставит в поле ввода Map строку" Map ". Что она значит? Это уникальное имя изображения-гиперссылки, которое будет использоваться Web -обозревателем. Если вы планируете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя “Мар1”. Заметьте, что в таких именах допускаются только латинские вы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.
Но Dreamweaver не только сгенерировал уникальное имя для карты-изображения. Он еще и в очередной раз изменил вид редактора свойств. Теперь вы можете задать параметры только что созданной "горячей области".
Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src , используемое для ввода интернет-адреса, раскрывающийся список Target , задающий цель гиперссылки, и поле ввода Alt , где вводится "альтернативный" текст. Здесь все понятно.
Разобравшись с тем, как вводятся параметры "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры : изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Но пора двигаться дальше. Введите в поле Src имя файла Web -странице сведений об авторе (4.1.htm ) и нажмите клавишу < Enter >.
Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись
"E - mail ". Dreamweaver поместит круглую область там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.
Вы можете изменять размеры и местоположение круглой "горячей области' так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид. Поэтому мы не будем здесь останавливаться. Введем в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу < Enter >.
Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придется удалить созданную "горячую" область и создать новую.
Выделите многоугольную "горячую область", если она еще не выделена, введите в поле ввода Src имя файла 3.1.htm — нашей главной страницы и нажмите клавишу < Enter >. Наша карта-изображение закончена. После этого можно вызвать Web -обозреватель для просмотра нашей страницы и испытать нашу карту-изображение в действии. Сделайте так — она действительно работает!
Осталось описать совсем немного дополнительных функций, предлагаемых Dreamweaver для работы с картами-изображениями.
С помощью пункта Image Map Name контекстного меню вы можете изменить имя "горячей области", если редактор свойств недоступен. При выборе этого пункта на экране появится диалоговое окно Change Attribute . Введите новое значение атрибута (в нашем случае-имени "горячей области") и нажмите кнопку ОК.
Пункт Link контекстного меню выводит на экран диалоговое окно Select File , где вы можете выбрать файл, на который будет ссылаться "горячая область".
Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задает "альтернативный" текст.
А о пунктах Bring To Front и Send To Back все того же неисчерпаемого контекстного меню поговорим подробнее.
Иногда случается так, что две "горячие области" перекрывают друг друга, т. е. имеют общий фрагмент. При этом при щелчке на такой "спорной территории" активизируется "горячая область", расположенная сверху, а сверху всегда появляется та область, что была создана последней. Но не всегда получается разместить "горячие области", как было предусмотрено по плану. Так вот, чтобы управлять их перекрытием, используются пункты Bring To Front и Send To Back контекстного меню. Первый переносит выделенную "горячую область" наверх, а второй — "загоняет" ее вниз.
В последнем случае вы также можете воспользоваться пунктами Bring To Front и Send To Back подменю Arrange меню Modify .
И еще. Иногда бывает нужно избавиться от показываемых Dreamweaver "горячих областей", например, чтобы оценить, как будет выглядеть карта-изображение в окне Web -обозревателя. Конечно, можно загрузить его в самом Web -обозревателе для предварительного просмотра. Но можно сделать иначе. Отключите пункт-выключатель Image Maps в подменю Visual Aids меню View . При этом "горячие области" пропадут. Чтобы вернуть их назад, просто включите этот пункт.

1  2  3  4  5  6  7

Вверх