.

Сплошной фон и фоновый узор для эффектного дизайна

В CSS еще больше возможностей по работе с фоновыми рисунками (но об этом — в следующей главе), чем в старом и понятном HTML. HTML позволяет задать сплошной цвет фона и фоновый узор для всей страницы. Таким образом, существует два способа задания текстуры каждой страницы еще до того, как вы что-либо на ней разместите. Это как покупать бумагу для принтера с уже напечатанными шаблонами фоновых изображений или таблиц.

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

С помощью HTML совсем несложно добавить фоновый узор или сплошной фон на Web-страницу. Для этого нужно просто дописать два атрибута тега <body>.

<html>

<head>

<title>Hcncmb30BaHHe фоновых цветов и Haflnnceii</title> </head>

<body bgcolor="#FF9900" background="tilename.gif">

</body>

</html>

В теге <body> цвет фона задается атрибутом bgcolor, значение которого равно #FF9S00. Это шестнадцатеричное число, соответствующее выбранному цвету фона страницы. За bgcolor следует атрибут background. Этот атрибут определяет имя файла, используемого в качестве узора на странице (в данном случае filename .gif). Не стоит забывать, что возможности задания графических элементов в HTML весьма ограничены по сравнению с CSS. В конечном счете HTML — это лишь контейнер.

ФПри использовании фоновых узоров следует серьезно отнестись именно к мозаичным узорам. Суть такого узора в том, что он повторяется и образует мозаику. Размер узора разработчик выбирает произвольный. На самом деле, многие дизайнеры делают узор гораздо большего размера, чем сама Web-страница. Таким образом, вы получаете полный контроль над дизайном, так как узор не повторится до тех пор, пока не выйдет за границы экрана, и пользователь уже не увидит этого повторения.

Создание ишпе/га*апи£ных Web-anfianuu,

Чтобы сделать страницу интерактивной, HTML реализует несколько видов ссылок, которые описаны ниже в данном разделе.

Обычные ссылки

Можно задать ссылку на любой графический или текстовый элемент. Для этого достаточно просто поместить этот элемент внутрь контейнерной структуры тега <а>.

<а href="page1.hfm">Text link</a>

<a href="page2.hfm"ximg src="image.jpg" width="100" heights"80" border="0"></a>

В первом случае пользователи увидят на странице подчеркнутую ссылку Text link. Щелкнув на ней, они перейдут к странице pagel. hum. Во втором случае, когда пользователь наводит на изображение, указатель мыши примет вид руки. После щелчка на изображении на экране появится страница раде 2 . htm.

Карты-изображения

Обычно с одним изображением связана только одна ссылка. Для того чтобы с изображением связать множество ссылок, применяются карты-изображения. Карта-изображение имеет два обязательных компонента.

Атрибут usemap тега <img>. Значением атрибута usemap является ссылка на описание конфигурации карты (в данном случае #nameofmap).

Контейнерный тег <шар>, внутри которого расположены координаты активных областей изображения.

Ниже приведен пример кода.

<img src="image.jpg" width=n100" height="80" border="0" tbusemap="#nameofmap">

<map name="nameofmap">

<area shape="rect" cords="40,50,130,120" href="page3.htm"> <area shape="rect" cords="20,15,60,35" href="page4.htm"> <area shape="rect" cords="7,50,45,100" href="page5.htm"> </map>

Координаты измеряются в пикселях. Начало координат располагается в левом верхнем углу изображения. Карта-изображение имеет два набора координат X и Y для определения активной области: координаты левого верхнего угла и правого нижнего. В данном примере кода первый набор координат— 40,50, 130,120. Это означает, что первая активная область начинается на расстоянии 40 пикселей от левого и 50 пикселей от верхнего края изображения, а заканчивается на расстоянии 130 пикселей от левого и 120 пикселей от верхнего края (рис. 13.12).



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×