4.Макет (таблица стилей). Всплывающие блоки. Шапка+подвал+3 колонки (первая колонка фиксированный размер, две – с процентными размерами)

<style type="text/css"> body {

font_size:120%; margin: 0; color: #000; background: #fff;

}

#header { height: 110px;

background: #ccc;

}

#menu {

width: 130px; height: 400px; background: #ffc;

float: left; /* всплытие влево */

}

#sidebar { width: 20%; height: 400px;

background: #ccf;

float: right; /* всплытие вправо */

}

#content { height: 400px;

background: #eee;

margin: 0 20% 0 130px; /* боковые поля */

}

#footer { height: 90px;

background: #ccc;

clear: both; /* прерывание обтекания */

}

</style>

Вывод изображений

Графические форматы

Формат GIF (Graphics Interchange Format) используется наиболее широко.

черно-белые изображения

полутоновые

цветные

Применяется

oдля штриховых рисунков

oлоготипов

oпиктограмм и других изображений с ограниченным набором цветов

oне используется фотографии.

Формат PNG (Portable Network Graphics)

создан с целью замены формата GIF.

улучшенное качество изображений, лучшую степень сжатия

не поддерживает анимированные изображения

Формат JPEG (Joint Photographic Experts Group)

был создан для хранения фотографий

может представлять миллионы цветов

отличные методы сжатия

<img src="url" alt="text"/>

не контейнерный элемент

строчный элемент

должен располагаться внутри блочного элемента

по умолчанию изображение выравнивается по левому краю

Карты ссылок

Карта ссылок является графическим изображением, разделенным на области, каждая из которых является ссылкой на некоторую страницу Клиентский вариант карты ссылок

позволяет разместить всю информацию о конфигурации карты в XHTML-файле, в который встроено изображение.

Для указания того, что встроенное изображение является опорным для карты, используется параметр usemap тега <img>. Значением параметра usemap является

ссылка на описание конфигурации карты.

<img src=logo.gif usemap=#logo/>

тэг <mар>

описание конфигурации областей карты-изображения

параметр name определяет имя, которое должно соответствовать имени в usemap

Тэг <area>

задает одну активную область.

Активные области могут перекрываться Если некоторая точка относится одновременно к нескольким активным областям, то будет

реализована та ссылка, описание которой располагается первым в списке областей.

Параметры тега <area>:

shape - определяет форму активной области. Допустимыми значениями являются:

rect - прямоугольник (по умолчанию);

circle – круг;

poly – многоугольник;

default - все точки области, должно располагаться последним в списке активных

областей.

Параметр coords - задает координаты отдельной активной области.

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

Координаты записываются в виде целых неотрицательных чисел.

Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0.

Первое число определяет координату по горизонтали, второе — по вертикали.

Список координат зависит от типа области:

rect — координаты верхнего левого и правого нижнего углов прямоугольника.

circle — координаты центра круга и радиус.

poly — задаются координаты вершин многоугольника в нужном порядке.

default — не требует задания координат.

Параметры

href — определяет адрес ссылки, который может записываться в абсолютной или

относительной форме

nohref — для данной области не имеется ссылки

Пример

<img src="auto.jpg" width="658" height="600" border="0" align="" usemap="#myAuto">

<map name="myAuto ">

<area shape="circle" coords="170, 370, 100" href="koleso1.html">

<area shape="circle" coords="480, 370, 100" href="koleso2.html">

<area shape="rect" coords="2,460,640,580" href="doroga.html"> <area shape="poly" coords="39,170,135,190,240,110,415,105,590,205,585,340,460,235,3 20,320,160,240,50,300" href="kuzov.html">

<area shape="default" alt="область по умолчанию" coords="1,1,650,600" href="obl.html">

</map>