HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Ступенька 19-ая. 

Вот мы, наконец, добрались и до многоугольников. 

 

Бу-бу-бу! :) Страшно? 

На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются между собой линиями, и мы можем таким образом получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды. 

Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:). 

Для начала зададим тип области:



     
<map>
<area shape="poly">
</map>



Координаты пишутся по следующему принципу: 

<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">

Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так: 

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"> 

Теперь подставим реальные значения координат в наш код:



     
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>



Дальше уже прописываем ссылку, имя карты, и привязываем карту к рисунку (это везде по одному и тому же принципу):



     
<img src="/mappoly.gif" usemap="#karta3">

... Куча текста и всякого содержания, или ничего...

<map name="karta3">
<area href="drugoy_document3" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>



Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, нажмите): 

 

Не забудьте прописать самостоятельно первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58. 

Теперь я расскажу еще о нескольких нюансах, и мы завершим наш разговор о картах: 

1 - Мы можем одновременно использовать разные области, например круг и многоугольник:



     
<img src="/mappoly.gif" usemap="#karta3">

... Куча текста и всякого содержания, или ничего...

<map name="karta3">
<area href="/drugoy_document3" shape="circle" coords="46,48,35,">
<area href="/drugoy_document3" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>



2 - Наши области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой (т.е. посетитель пойдет на ту страницу, куда она ссылается). 

3 - Будьте внимательны, если вы пропишите для картинки usemap=#KARTA, а имя (name) вашей карты будет karta - то возможны ошибки, т.к. karta и KARTA - разные имена. Регистр всегда учитывается, не забывайте.

4 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы. 

Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :) 

HTML шаблоны сайтов

Реклама:

Скачать бесплатно HTML шаблоны сайта с нами легко!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

HTML шаблоны