Изображение и гиперссылки

Конечно же обработка изображений, создание красочных иллюстраций, анимация и баннеротворчество являются неотъемлемой частью Web-строительства. Меня часто в письмах обвиняют, что дизайн мой не очень-то хороший. Вероятно это так. Поскольку дизайн как таковой требует серьезной проработки. А у меня постоянно не хватает времени и терпения. Поэтому тему дизайна я пока освещать не буду. Это уже творческая сторона, а сейчас мы пока рассматриваем азы. Они позволят Вам заниматься дизайном самостоятельно. Поэтому сейчас рассмотрим один прием, позволяющий, использовать части одного и того же цельного изображения для ссылок на различные странички. На этом в принципе мы завершим рассмотрение изображений.

Для этого в языке HTML имеется тэг <map>. Он включает в себя тэг <area>.

Рассмотрим простейший рисунок:

Его размер 170x50 пикселей. Сейчас станет понятно к чему я веду. Пусть квадрат, круг и теругольник ссылаются на различные страницы: link1.html, link2.html и link3.html.

Теперь, оставляя рисунок как есть, применим к нему тэг <map>. Этот тэг имеет один атрибут - это name и используется (как уже отмечалось) в неразравности с тэгом <area>. У <area> несколько атрибутов:

1. href - это и есть наша гиперссылка;

2. shape - это форма (она бывает трех видов - прямоугольной (rect), круглой (circle) и полигон (poly));

3. coords - координаты для задание положения формы на изображении.

4. alt - всплывающая подсказка.

Таким образом, наше изображение получается как карта (<map>), с нанесенными на нее с помощью координат (задаваемых атрибутами тэга <area>) различных плоских фигур, как простых, так и служных. И именно область, которая ограничена этой фигурой и будет ссылкой на желаемую страницу. А связать картинку с картой можно с помощью атрибута тэга <img> usemap, о котором я в предыдущих разделах пока не упоминал. Предположим, что файл картинки называется segment.gif, тогда полный код сегментации (картирования) изображения будет:

<img src= segment.gif usemap="#segm" border=0> <map name="segm"> <area shape="rect" coords="4,2,50,50

" href="#" alt="Ссылка 1"> <area shape="circle" coords="78,26,24

" href="#" alt="Ссылка 2"> <area shape="poly" coords="132,5,101,

47,164,46" href="#" alt="Ссылка 3"> </map>

Обратите внимание на запись usemap="#segm". Без значка # ничего работать не будет. А что такое segm? Так мы назвали нашу карту <map name="segm">. Мы видим на картинки три фигуры. К ним-то и привяжем наши ссылки. Первая фигура - это прямоугольник (rect). Координаты прямоугольника задаются двумя точками: координатами X и Y верхнего левого угла и правого нижнего. Я не случайно в начале сделал акцент на размеры изображения. Левый верхний угол изображения имеет координаты (0, 0), правого нижнего (169, 49). Почему не 170 и 50? Потому, что отсчет начинается с нуля. А наш квадратик несколько смещен от левого и верхнего угла рисунка, поэтому по координате верхнего левого угла мы видим смещение - 4 (по X и 2 по Y). Координаты окружности (circle) задаются с помощью координат X и Y центра окружности и радиусом. Разумеется в нашем случае радиус не должен превышать высоты изображения. Полигон (poly) в принципе может иметь сколь угодно много точек. В нашем случае их три, но записываем мы шесть значений - X и Y через запятую. Программы редакторы типа Dreamweaver помогут Вам расставить координаты без труда. Однако понимать суть происходящего все-таки нужно. У атрибута href стоит значек #. Вместо него можно подставить link1.html, link2.html и link3.html. А сам этот значек означает, что ссылка приводит на саму себя. Я так записал, чтобы Вы не нервничали, если Вас начнет уводить на страницы, которых нет или которые Вам придется дополнительно создать, чтобы не получать сообщение об ошибках. К тому же так удобнее видеть, как реагирует картинка на щелчок мыши.

Наведите курсор мыши на картинку, помещенную выше и Вы сможете увидеть как все работает.

Источник: web-brodilka.ru

Таблицы

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

Таблица создается с помощью тэга <table> имеющего ряд атрибутов, расширяющих Вашу потенциальную возможность создания наглядных сайтов.

Атрибуты тэга <table> следующие:

1. border - толщина бордюра таблицы в пикселях;

2. bordercolor - цвет бордюра таблицы;

3. bordercolorlight - цвет верхнего и левого внешних бордюров таблицы;

4. bordercolordark - цвет нижнего и правого внешних бордюров таблицы;

5. cellpadding - заполняемость ячеек;

6. cellspacing - промежуток между ячейками;

7. background - дизайн фона ячеек таблицы, который может быть задан с помощью файла JPG или GIF.

8. bgcolor - цвет фона ячеек таблицы;

9. width - ширина таблицы, которая может быть задана строго в пикселях, так и в процентах от ширины экрана (разрешения по горизонтали);

10. align - размещение таблицы по ширине экрана (слева - left, справа - right, посередине - center);

А как же задать число строк и столбцов. К сожалению в численном виде этого сделать нельзя. Число строк и столбцов задается с помощью отдельных тэгов <tr> - строка и <td> - столбец. Все необходимые атрибуты задаются в заголовке таблицы, однако в тэге <td> можно задать:

1. width - ширина столбца, которая может быть задана строго в пикселях, так и в процентах от ширины таблицы.

2. height - высота столбца в пикселях;

3. align - размещение элемента ячейки (текста, картинки) по ширине ячейки (слева - left, справа - right, посередине - center).

4. valign - размещение элемента ячейки (текста, картинки) по высоте ячейки (сверху - top, в нижней части - bottom, посередине - center).

 

<table border="2" cellpadding="2" cellspacing="3" width="100%" bgcolor="#00FFFF" bordercolor="#0000FF" bordercolordark="#800000" bordercolorlight="#008080">

<tr>

<td width="50%">Строка 1, Столбец 1 </td>

<td width="50%">Строка 1, Столбец 2 </td>

</tr>

<tr>

<td width="50%">Строка 2, Столбец 1 </td>

<td width="50%">Строка 2, Столбец 2 </td>

</tr>

</table>

Что будет выглядеть в броузере так:

Строка 1, Столбец 1	Строка 1, Столбец 2
Строка 2, Столбец 1	Строка 2, Столбец 2

Обратите внимание: новая строка таблицы начинается с тэга <tr> и заканчивается </tr> Все столбцы слева направо задаются последовательностью <td> и </td>. Источник: web-brodilka.ru