Рейтинг@Mail.ru

Вставка изображений

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

Вставлять изображение помогает тег <img />. Его главный атрибут - src, значение которого - путь к изображению. Поскольку мы не можем вставить изображение непосредственно в текстовый файл, мы будем ссылаться на него из файла. Путь к файлу может быть относительным или абсолютным. Если путь относительный, то изображение всегда должно располагаться в одном и том же месте относительно страницы. Обычно для изображений создают папку images в главной или во всех папках сайта.

<img /> - ссылается на изображение, отображая его в окне браузера. Обязателен атрибут src, указывающий путь к файлу.

К примеру, на этом сайте возьмем изображение main.gif, расположенное в папке images. Тогда тег будет выглядеть так: <img src="images/main.gif" />

Вот, что мы получим в браузере.

Об изображениях

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

Расширение Описание
JPEG Это довольно старое расширение. Оно использует сжатие, при котором цвета в изображении сглаживаются. Хотя изображение может потерять в качестве, его объем уменьшается до нескольких десятков раз. Неплохое расширение, но PNG намного эффективней.
GIF Расширение, разработанное специально для Интернета, также очень давно(на 2010 год). Отличается тем, что поддерживает ограниченный набор цветов(256). Алгоритм сжатия не очень эффективен для фотографий; но для простых рисунков, где есть немного цветов, снижает размер до нескольких(десятков) килобайт. Поддерживает прозрачность и простую анимацию со сменой кадров.
PNG Более современный формат. Отличается оптимальным алгоритмом сжатия, чем вышеперечисленные форматы, хорошо сглаживает как простые рисунки, так и сложные изображения, уменьшая их размер до нескольких килобайт. Поддерживает прозрачность, как и GIF. Оптимален для Интернета.

Если Вы собираетесь работать с Web-страницами, Вам необходимо иметь хороший редактор изображений. Оптимальный вариант - бесплатный русский редактор Paint.NET. В отличие от обычного Paint'а, его функциональность ближе к таким профессиональным программам, как Photoshop и GIMP (GIMP - аналог Photoshop'а, также бесплатен). Он поддерживает прозрачность, работу со слоями, эффекты и т.д., словом идеален для изображений для Интернета. Скачать его можно на сайте http://paintnet.ru/.

Практикуем

Ставим изображение.

Создадим страницу. Вы будете использовать ее для тренировок, а затем поместите любые изображения на ваш сайт.

Для начала создайте в любом графическом редакторе картинку, широкую, но невысокую. Добавьте ее на экспериментальную страницу тегом <img />. Теперь мы будем изучать и добавлять атрибуты к этому тегу.

Если картинка небольшая, то в Интернете она загрузится быстро не только не из-за размера, но и из-за того, что браузеру не нужно решать, как правильно эту картинку поместить. Однако, если картинка большая или находится в тексте, браузер еще должен решить, как правильно поставить картинку. Одним из способов упрощения и ускорения его работы является задание широты и высоты изображения еще в коде. Это делают уже знакомые нам атрибуты width и height. Они могут принимать значения в пикселях или процентах, но проценты практически не используются.

Если изображение находится не в отдельном параграфе, а внутри текста, то пригодится атрибут align (выравнивание). Он может принимать такие значения:

top - текст выравнивается по верхнему краю изображения

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

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

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

 

 

right - изображение появляется с правой стороны браузера, а текст обтекает его cлева

Если текст вплотную подступает к изображению, его можно отделить при помощи атрибутов hspace и vspace. Первый создает поле между изображением и текстом справа и слева, второй - снизу и сверху. Атрибуты принимают значения в процентах.

Еще больше графики

Вы также можете использовать определенный цвет или изображение в качестве фона для любого блока. Блоки мы изучим позднее, пока лишь отметим, что это элементы страницы, создаваемые тегами разметки (С тегами <p> и <pre> лучше здесь не связываться). Например, теги <table>, <span>, <td> и конечно тег <body>(самый главный блок).

Чтобы сделать фон одного цвета, используйте атрибут bgcolor. Он принимает любой цвет в качестве значения. Рекомендуем либо оставлять страницу с белым фоном, либо делать его светло-серым.

Вот пример с таблицей. Все таблица будет закрашена в один цвет, а отдельные ячейки в другой.
<table width="80%" align="center" bgcolor="#dddddd">
<tr>
<td width="25%" bgcolor="#ff000"> </td>
<td width="25%"> </td>
<td width="25%" bgcolor="#ff000"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%" bgcolor="#000ff"> </td>
<td width="25%"> </td>
<td width="25%" bgcolor="#000ff"> </td>
</tr>
<tr>
<td width="25%" bgcolor="#ff000"> </td>
<td width="25%"> </td>
<td width="25%" bgcolor="#ff000"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%" bgcolor="#000ff"> </td>
<td width="25%"> </td>
<td width="25%" bgcolor="#000ff"> </td>
</tr>
</table>

       
       
       
       

Вы также можете использовать изображения в качестве фона. Для этого используйте атрибут background. Его значением является путь к файлу. Обращаем внимание, что оба атрибута не могут быть вместе.

Пример:
<table width="80%" align="center" background="images/tag.jpg">
<tr>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
</tr>
<tr>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
</tr>
<tr>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
</tr>
<tr>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
<td width="25%">текст</td>
</tr>
</table>

текст текст текст текст
текст текст текст текст
текст текст текст текст
текст текст текст текст

Как видим этот метод не так предпочтителен: из-за плохой видимости текста на темных изображениях он практически не используется web-дизайнерами.

Еще один полезный атрибут alt. Если изображение не загрузилось, он даст вместо него введенный Вами альтернативный текст. Если изображение загрузилось, то альтернативный текст будет появляться при наведении на изображение мышкой, как при атрибуте title тегов <a> и <acronym>. Кроме того, этот текст прочитывается специальными браузерами, которыми пользуются люди с ограниченным зрением. Наведите мышь на изображение ниже.

Вот и альтернативный текст

Но погодите, это еще не все!

Кажется, все что мы уже изучили об изображениях - все что нужно. Это практически так, но мы можем добавить функциональности нашим изображениям - сделать из них ссылки.

Есть две вещи, которыми можно превратить изображения в ссылки:

1. Вставить тег <img /> в тег <a>. Изображение станет ссылкой, но вокруг него появится синяя рамка. Чтобы ее убрать, используйте атрибут border со значением 0 тега <img />.

2. Создать графическую карту.

Графическая карта - изображение с несколькими т.н. горячими точками (областями), каждая из которых ссылается на определенную страницу или объект.

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

Для начала приведем пример такой графической карты. Центр изображения будет отсылать Вас к главной странице сайта, открывая ее в новом окне.

Открой меня! Щелкни по центру и познай мощь графической карты!

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

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

От слов к делу. Первое, что нужно сделать - сообщить браузеру, что одно из изображений станет графической картой. Сделать это позволяет атрибут usemap тега <img />. Значение атрибута "#имякарты", имя карты Вы придумываете сами. Имя карты понадобится нам при инициализации активных областей карты.

Теперь создадим теги <map> и </map>. Обязательный атрибут тега <map> - name, значение которого - имя Вашей карты. Между тегами <map> и </map> располагаются теги <area />, определяющие активные точки. Количество тегов <area /> неограниченно, но перебарщивать с количеством горячих точек не нужно.

У тега <area /> много атрибутов, все они сейчас будут разобраны.

Координаты многоугольника

Тема была большая, но следующая будет еще больше! В ней мы узнаем, как добавлять современный контент - музыку, видео, движущийся текст и т.п. Вперед!

 

 

uroki.webservis.ru        Рейтинг@Mail.ru