Html-код создания карты изображения

Чтобы изображение стало активным, с горячими областями, к тегу вставки рисунка <img src="image.gif"> нужно добавить атрибут usemap и тег < map >. Т.е. атрибут usemap задаётся для активных областей рисунка; причем в атрибуте после равно указывают символ "#" и имя карты:

< img src ="mymap.gif" usemap= " #sitemap ">

Границы активных областей задаются координатами углов прямоугольника и многоугольника, или центра и радиуса круга. Например:

< img src ="image.gif" usemap ="#imap">

< map name ="imap">

<area shape="rect" coords="0,0,100,100" href ="https://www.int.ru/help/index.html">

<area shape="rect" coords="100,0,200,100" href ="https://www.int.ru/shop/index.html">

<area shape="default" nohref>

</ map >

Но такое указание координат – работа трудоёмкая, лучше это делать в режиме дизайна – см. выше.

3. Работа с фоновыми рисунками (рисунками, выступающий как фон для web-страницы). С помощью них можно создавать интересные эффекты, но смотрите, чтобы не возникло конфликтов цвета, когда текст и др. объекты переднего плана нечитаемы на фоновом рисунке.

Большой рисунок, позволяющий заполнить всю web-страницу, даже при просмотре на большом мониторе будет велик по размерам, и время для его загрузки недопустимо велико. Поэтому фоновые рисунки создаются в виде небольших, быстро загружаемых файлов, которые многократно размножаются и укладываются на странице (как плитка), заполняя окно браузера.

В качестве фона старайтесь выбирать неконтрастные изображения, которые будут укладываться на странице без заметных швов. Легкая текстура смотрится гораздо лучше, нежели яркие, `кричащие` рисунки.

Для добавления фонового рисунка:

1. Нажмите в меню Изменить /Свойства страницы (Modify/ Page Properties), чтобы открыть диалоговое окно Page Properties.

2. Чтоб в поле Background Image (Фоновое изображение) ввести имя графического файла, щелкните по кнопке Browse (Обзор), выделить нужный файл. ОК.

4. Рисунки-кальки. Смысл рисунков-калек. Можно создать макет дизайна страницы в графическом редакторе, а затем в Dreamweaver накладывать на нее реальные элементы. Рисунок-калька заменяет фон и фоновое изображение, но, в отличие от них, в браузере никогда не отображается.

Для добавления рисунка-кальки на страницу:

1. Нажмите в меню Изменить / Свойства страницы (Modify/ Page Properties), чтобы открыть диалоговое окно Page Properties.

2. Во вкладке Tracing Image (Изображение-калька) щелкните по кнопке Обзор (Browse). Откроется окно, где выберите файл с рисунком-калькой. Перетащите бегунок Прозрачность (Transparency) в нужную сторону для установки подходящей степени прозрачности рисунка-кальки. Нажмите ОК.

Кроме изменения прозрачности кальки, её можно включать и выключить, менять положение на странице. Для выбора положения кальки на странице: View /Tracing Image /Adjust Position (Вид /Рисунок-калька /Выбор положения), откроется окно Настройки кальки (Adjust Tracing Position). Введите координаты рисунка в полях X и Y (калька станет в желаемое место)

Глава 6. ПРОЕКТИРОВАНИЕ WEB-САЙТА

Чтобы в результате разработки сайта получить информационный продукт, имеющий реальную практическую ценность, создавать сайт нужно не спонтанно, а путёмпроектирования. Если сайт создаётся коллективом специалистов, то этапы проектирования сайта отражают в документе – пояснительной записке к проекту сайта.

Мы будем разрабатывать учебный проект сайта и этапы проекта также отражать в пояснительной записке. Итак, работа над проектом по разработке сайта будет состоит из следующих этапов.