Техническая поддержка

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка » Дизайн форума » FAQ по созданию MAP-карт


FAQ по созданию MAP-карт

Сообщений 1 страница 2 из 2

1

FAQ по созданию MAP-карт (Adobe Dreamweaver)
(c) [M.@.t.r.i.x]
В этой статье будет рассмотрено создание map-карт на примере программы (exMacromedia) Adobe Dreamweaver.

Сперва начнем на примере создания карты в программе Adobe Dreamweaver CS3.
Открываем программу, нажав кнопкой мышки по ярлычку, после чего мы попадем на главную страницу программы.

Выбираем из списка - HTML (обведено красным на скриншоте 1.)

Скришот 1
[реклама вместо картинки]

После чего мы попадаем в редактор HTML и видим перед собой рабочую область.
Чтобы вставить изображение нужно в области для ввода кода ввести следующий код:

Код:
<img src=”адресс картинки”/>

После чего наведите курсор мышки на область дизайна и кликните по ней.  Если вы прописали все верное в области ввода кода, то у вас появится ваша картинка и мы можем приступить к нанесению областей.

Скриншот 3
[реклама вместо картинки]

Сперва  давайте ознакомимся с некоторыми инструментами программы Dreamweaver.
Под номером 1 (скриншот 3) расположен инструмент для создания прямоугольных выделений, под номером 2 расположен инструмент для создания областей виде окружности, под номером 3 расположен инструмент для создания многоугольных областей, под номером 4 расположен инструмент для создания всплывающего текста который будет показываться при наведении курсора на картинку.

Скриншот 4
[реклама вместо картинки]

На скришоте 4 показаны примеры нанесения разного вида  областей, а также выделены нужные инструменты. Красным обведена область куда вводится прямая ссылка на нужную вам страницу.
Синим выделено меню для выбора способа перехода. Если вас устраивает открытие новой  страницы в том же окне ничего там не меняйте, а если вам надо чтобы новая страница открывалась в новом окне, выберете вариант  “_blank”, в области выделенной зеленым расположена область для ввода текста который будет показываться при наведении на выделенную нами область.

Удачи вам в создании карт.

0

2

Создание МАР-карты в Paint
(с) Айрин
Данный FAQ предназначен для тех, у кого по каким-то причинам нет специальных программ для создания MAP-карт, а создавать карты очень хочется 
Для создания карты нам нужен всем знакомый и простой Paint и самый обыкновенный текстовый документ, с которым мы будем работать в блокноте.
В Paint'e нам пригодятся всего 2 инструмента:
Карандаш и строка состояния (см. скриншот №1)


Создание квадратной кликабельной области
1. Основной код: Посмотрев скриншот номер №1 Вы заметили там три фигуры, различной формы, из этих фигур мы будем делать кликабельные области.
И первая, и одновременно самая простая область - квадратная.
Итак, создаем текстовый документ. Открываем его и копируем туда следующее:

<img src="Адрес картинки, из которой будем делать карту" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="" href=""></map>

<img src="Адрес картинки, из которой будем делать карту" - вместо моих слов вставляете ссылку на нужную картинку, все просто.
border="0" - рамка вокруг картики. В данном коде стоит 0, поэтому рамка отсутствует. Вы же при желании можете поставить, например, 1, и тогда рамка появится. Чем больше число, тем толще рамка.
<area shape="rect" - данный параметр показывает, что мы создаем именно квадратную область, а не круглую или многоугольную.
В других примерах мы рассмотрим параметры для вышеназванных фигур.
coords="" - сюда мы будем вписывать координаты. Что это такое и для чего они нужны будет рассмотрено позже.
href="" - сюда мы будем вставлять ссылку, по которой Вы будете переходить, кликнув по размеченной области.

2. Получение координат: Открываем картинку, из которой будем делать карту, в Paint'e. Возьмите карандаш, и поводите им по рисунку (просто поводите мышкой, не рисуя), обратите внимание на строку состояния, в которой будут изменяться цифры в зависимости от положения карандаша на картинке.
Эти цифры - и есть координаты той точки, на которой Вы остановите карандаш. В случае с квадратной областью - нам нужно определить координаты 2-х точек, а именно левого верхнего и правого нижнего углов квадрата. (см. скриншот №2)
Наводим карандаш на левый верхний угол, и смотрим на панель состояния, в ней будут отображаться две цифры, для удобства запишите их куда-нибудь.
Затем повторяем ту же операцию и с правым нижним углом. В итоге у нас вышло 4 цифры-координаты (от 2-х углов по две цифры).
Теперь возвращаемся к коду, который был дан выше и ищем параметр coords="" и в кавычках и через запятую пишем получившиеся цифры.
Например:

coords="78,85,157,242"

Теперь в том же коде ищем параметр href="" и между кавычками вставляем ссылку, по который Вы будете переходить, щелкнув по размеченной области.
Например:

href="http://spybb.ru"

В итоге должен получится код типа:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>

Итак, карта готова (а если на карте нужно выделить несколько областей, то готова лишь часть карты  )
Чтобы добавить еще областей,просто копируйте выделенную строку, и пишите их друг за другом между тегов <map name="Map"></map>:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru"></map>


Создание круглой кликабельной области
Теперь мы будем делать кликабельной фигуру №2, которая имеет форму круга.
Для нее нам потребуется определить координаты центра окружности и ее радиус.
Далее будет рассмотрено только получение координат, куда их прописывать, куда ставить ссылку и прочее было подробно рассмотрено в предыдущем примере, больше возвращаться к этому не будем.

Получение координат:
● Отрываем картинку в Paint, берем карандаш (а еще лучше кисть, чтобы можно было отметить действительно видимую точку) и на глаз определите середину круга, и оставьте там точку, она нам пригодиться (См. скриншот №3)
Координаты этой точки (наводим карандашом на точку, получаем две цифры) - координаты центра окружности.
● Теперь нам нужно определить радиус. Берем инструмент "Линия" и проводим линию от центра окружности к границе круга, при этом не отпуская кнопку мыши смотрим на цифры, получившиеся в строке состояния (см. скриншот №4)
Нам нужна вторая цифра, т.е. та, которая правее. Но прежде чем вписать ее в координаты, ее мысленно нужно умножить на два и затем уже получившееся число вписывать как радиус.
Итого в координаты круглой области мы должны записать три цифры: две - от точки в середине круга, и одну, представляющую из себя радиус.
Добавим в основной код нашей мар-карты строку, показывающую круглую область, и теперь он будет выглядеть так:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru">
<area shape="circle" coords="28,37,20" href="http://mybb.ru"></map>

Важно: то, что выделено красным - форма области, нужно обязательно писать circle, чтобы было ясно, что это именно круглая область, а не квадратная или многоугольная.


Создание многоугольной кликабельной области
Теперь осталась последняя область - фигура №3, которая является многоугольником, т.е. имеет множество углов.

Получение координат: Для того, чтобы сделать многоугольную область кликабельной нужно определить координаты точек всех ее углов.
Т.е. наводим карандаш на каждый угол, и получаем с каждого угла по две цифры, чем больше углов, тем больше цифр получится соответственно.
В нашем случае шесть углов, с каждого угла по две цифры, итого - 12 цифр. (см. скриншот №5)
Важно: В форме области нам теперь нужно указать, что это именно многоугольная область, поэтому параметр area shape будет выглядеть так:

<area shape="poly" coords="32,38,26,15,44,14,49,28,47,45,86,35" href="http://help.spybb.ru">

В параметре coords как и раньше прописываем получившиеся координаты через запятую, и в параметре href указываем ссылку.
Добавим многоугольную область в наш общий код:

<img src="http://адрес картинки" border="0" usemap="#Map" />
<map name="Map"><area shape="rect" coords="78,85,157,242" href="http://spybb.ru">
<area shape="circle"coords="28,37,20" href="http://mybb.ru">
<area shape="poly" coords="32,38,26,15,44,14,49,28,47,45,86,35" href="http://help.spybb.ru"></map>


Все, мар-карта готова. Мы сделали кликабельными все три фигуры на рисунке. Чаще всего приходится работать с прямоугольными областями, но здесь были рассмотрены все варианты, на всякий случай 
Код мар-карты ставится в таком виде, в каком он представлен здесь, .т.е ничего из кода ничего не выкидываем.
Ставить можно абсолютно везде, начиная от HTML-верха, заканчивая формой ответа.

0


Вы здесь » Техническая поддержка » Дизайн форума » FAQ по созданию MAP-карт