4. Графические элементы в html-документе
4.1 Вставка изображений
Популярность Интернета, по-видимому, не была бы столь широкой, если бы документы содержали только текстовый материал. Привлекательность и наглядность Web-документов во многом обеспечивается благодаря использованию цвета, фотографий, анимации, видео- и аудиоклипов. Однако, при включении в документ подобного рода элементов нужно иметь в виду следующее:
- графические файлы могут иметь значительные размеры, что требует времени для их загрузки,
- для увеличения скорости передачи данных многие пользователи работают в режиме отключения графических изображений,
- для поисковых систем, как правило, возникают проблемы с индексированием графики,
- страницы, которые хорошо смотрятся при одном разрешении, могут выглядеть по-другому при ином разрешении.
Поэтому перегруженная графикой страница не только может вызывать раздражение посетителей сайта своим видом, но и временем загрузки страницы.
Изображение на Web-страницах может использоваться в качестве фона, на котором располагаются основные элементы документа или встраиваться в документ.
Форматы графических файлов
В компьютерном мире графика делится на две основные категории: векторную и растровую. В файлах векторной графики описываются математические зависимости, позволяющие создать на экране графический элемент с помощью отрезков прямых (векторов). Процесс вывода требует дополнительной обработки, зато при изменении масштаба качество изображения не ухудшается. Такой тип графики удобно применять, когда для создания художественного эффекта используются геометрические формы и текст (например, логотип компании, содержащий геометрический рисунок и название). Примером файлов векторной графики являются файлы с расширением .wmf (Windows metafile).
Однако при разработке страниц дизайнеры предпочитают иметь дело с растровыми изображениями. Растровая графика предполагает хранение данных о каждой точке изображения. При масштабировании растровой графики обычно происходит потеря разрешения, вследствие чего качество изображения ухудшается. На Web-страницах используется растровая графика форматов: gif, jpeg (jpg), png.
Формат gif (graphic interchange format - формат для обмена графикой).
Данный формат создан специально для работы в Интернете. Формат поддерживает 8-ми битовую глубину цвета, что позволяет реализовать до 256 цветовых оттенков. Допускает достаточно высокую степень сжатия без большой потери качества для изображений, содержащих ограниченное количество цветов. Файл может содержать несколько изображений (кадров) для воспроизведения анимации.
Формат jpeg, jpg (Joint Photographic Expert Group -объединенная группа экспертов по фотографии).
Данный формат используется представления высококачественных полноцветных изображений, например фотографий. формат поддерживает 24-битовую глубину, реализуя более 16 млн. цветов. Формат допускает высокую степень сжатия файлов, хотя при этом наблюдается потери качества. Степень сжатия может выбираться пользователем при сохранении файла в большинстве графических редакторов.
Формат png (portable network graphic - переносимая сетевая графика).
Данный формат сочетает в себе многие черты предыдущих двух форматов, но при этом имеет ряд уникальных характеристик: обеспечивает сжатие без потерь, создание прозрачных областей и возможность создания анимации.
Фоновое изображение
При разработке Web-страниц можно управлять цветом фона документа (задание фонового цвета рассмотрено в п. 2.2), а также указывать изображения, которые должны использоваться в качестве фона. Фоновое изображение включается в документ при помощи параметра background тега <body>:
<body background = "значение">
В общем случае значение параметра - URL-адрес изображения, которое используется в качестве фона, но, чаще всего, - имя файла изображения, расположенного в одной из папок сайта. Фоновое изображение HTML-документа всегда заполняет все окно просмотра.
Если размер изображения меньше размеров окна, то оно будет размножено по принципу мозаики. Обычно в качестве фона берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. На рис. 4-1, 4-2 представлены: код вставки фонового изображения и вид страницы на экране.
<body bgcolor=silver background="Фон-Снежинка.jpg"><br><br><br> <h3 align="center"> Использование изображения в качестве фона</h3> <p> <font color="#800080">При создании Web-страниц можно управлять цветом фона документа, указывать изображения, используемые в качестве фона. Фоновое изображение включается в документ при помощи параметра <b>background</b>. В качестве фонового изображения должен использоваться графический файл.</font> </p> <hr size="10" align="center" width="50%" color="#1111dd"> </body> |
Рис. 4-1. HTML-код включения фонового изображения страницы |
|
Рис. 4-2. Вид страницы с включенным фоновым изображением |
В теге <body> можно одновременно использовать оба параметра - фоновый цвет и фоновое изображение. Если задается фоновое изображение, то рекомендуется указывать цвет фона документа. При загрузке документа сначала загружается текстовая часть, затем изображение, в том числе и то, которое указано в качестве фонового. До момента загрузки фонового изображения цвет фона документа будет определяться значением параметра bgcolor или устанавливаться по умолчанию.
Вставка изображений в html-документ
Для вставки изображений в HTML-документ используется тег <img>, имеющий один обязательный параметр src и набор необязательных параметров:
<img src = " URL-адрес файла с изображением " [параметры] >.
Задание необязательных параметров тега позволяет, если необходимо, изменить их значения по умолчанию, например размеры, выравнивание способ обтекания текстом и т.д.
Задание размеров изображения
width, height - параметры, с помощью которых можно указать ширину и высоту изображения при отображении его в окне обозревателя. Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае при загрузке изображения браузеры автоматически выполняют перемасштабирование. Следует иметь в виду, что при задании двух параметров, значения которых отличаются от реальных размеров, может привести к тому, что изображение будет искажено. Любой из двух параметров может быть опущен. Если задан только один параметр, то второй параметр будет вычисляться автоматически при условии сохранения пропорций.
В примере на рис. 4-3, 4-4 на страницу помещается изображение размером 81 х 63 пикселя из файла Поле.jpg. Первый тег вставки не содержит явного задания параметров width, height, поэтому изображение на экране имеет исходные размеры.
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <center> <h2 align=center>Задание размеров выводимого изображения</H2> <img src="..\Рисунки\Поле.jpg" border=0> <img src="..\Рисунки\Поле.jpg" border=0 width=180> <IMG SRC="..\Рисунки\Поле.jpg" BORDER=0 height=90> </center><br><br> </body> |
Рис. 4-3. HTML-код вставки изображения |
Второй и третий теги содержат явное задание одного из размеров поля для вставки изображения. Размер по второй координате вычисляется автоматически, учитывая, что обозреватель стремится сохранить пропорции.
|
Рис. 4-4. Вид страницы с изображениями различных размеров |
Выравнивание изображений
Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. Если в теге вставки изображения явно не указывается значение параметра align, т.е. принимается значение по умолчанию, то изображение выравнивается по левому краю, разрывая текст. В примере на рис. 4-5, 4-6 приведен HTML-код и вид страницы на экране.
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <h3 align=center>Выравнивание изображения влево по умолчанию</H3> <p align=justify> Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. <img src="..\Рисунки\Картина1.png" border=0 width=250> Если требуется, чтобы текст, размещаемый рядом с изображением, занимал несколько строк, то следует задать значение параметра выравнивания left или right. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны.</p> </body> |
Рис. 4-5. HTML-код выравнивания изображения по умолчанию |
|
Рис. 4-6. Изображение выравнивается влево (по умолчанию), текст разрывается. |
Если в теге вставки изображения явно указывается значение параметра align (left или right), то изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны.
В примере на рис. 4-7, 4-8 изображение прижато к левому краю окна обозревателя, а последующий текст обтекает изображение справа.
Чтобы принудительно прекратить обтекания в заданном месте текста следует применить тег <br> с параметром clear, значениями которого могут быть: left right, например
<br clear = left >.
Весь последующий текст будет размещаться с новой строки после нижней границы изображения.
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <h3 align=center>Выравнивание изображения влево</H3> <img src="..\Рисунки\Картина1.png" align=left border=0 width=250> <p align=justify> Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. Если требуется, чтобы текст, размещаемый рядом с изображением, занимал несколько строк, то следует задать значение параметра выравнивания left или right. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны.</p> </body> |
Рис. 4-7. HTML-код выравнивания изображения |
|
Рис. 4-8. Изображение выравнивается влево, текст обтекает изображение |
На рис. 4-9, 4-10 часть текста, расположенная до тега <br clear=left>, обтекает изображение, остальной текст продолжается с новой строки после нижнего края изображения.
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <h3 align=center>Разрыв текста, обтекающего рисунок</h3> <img src="..\Рисунки\Картина1.png" align=left border=0 width=250> <p align=justify> Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. <br clear=left> Если требуется, чтобы текст, размещаемый рядом с изображением, занимал несколько строк, то следует задать значение параметра выравнивания left или right. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны .</p> </body> |
Рис. 4-9. HTML-код разрыва обтекающего текста |
|
Рис. 4-10. Разрыв обтекающего текста |
top - по верхнему краю рисунка,
middle - по средней линии,
bottom - по нижнему краю рисунка.
В примере на рис. 4-11, 4-12 изображение выравнивается влево (по умолчанию), а следующая за ним подпись - по средней линии (align = middle).
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <h3 align=center>Размещение подписи к рисунку</h3> <img src="..\Рисунки\Картина1.png" align=middle border=0 width=250> <font size=4 face="Tahoma">         Рисунок 1.</font> <p align=justify> Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. Если требуется, чтобы текст, размещаемый рядом с изображением, занимал несколько строк, то следует задать значение параметра выравнивания left или right. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны.</p> </body> |
Рис. 4-11. HTML-код вставки и выравнивания подписи |
|
Рис. 4-12. Выравнивание подписи по средней линии рисунка |
Несмотря на наличие приведенных способов выравнивания подписи, более привычным является расположение подписи под рисунком. Такое позиционирование подписи нельзя реализовать, используя параметр align. В этом случае для реализации такого расположения подписи можно использовать вспомогательную таблицу. Во-первых, можно управлять расположением самой таблицы, во-вторых, для каждой ячейки таблицы можно применить соответствующее выравнивание данных.
В примере на рис. 4-13, 4-14 организуется таблица, содержащая одну строку и один столбец, Таблица выравнивается влево и явно указывается горизонтальный размер. В ячейку таблицы помещен рисунок, за тегом вставки которого добавлены теги перевода строки. Это позволяет расположить подпись под рисунком и выровнять ее по центру, т.к. ячейка формируется тегом <th>, для которого по умолчанию принимается выравнивание по центру.
<body bgcolor=yellow background="Фон-Снежинка.jpg"> <h3 align=center>Размещение подписи под рисунком с помощью таблицы</h3> <table align=left width=270> <tr><th> <img src="..\Рисунки\Картина1.png" border=3 width=250><br><br> <font size=3 face="courier"> Рисунок 1.</font> <th><tr> </table> <p align=justify> Для того, чтобы указать расположение изображения относительно текста или других элементов страницы, следует воспользоваться параметром align тега <img>. Если требуется, чтобы текст, размещаемый рядом с изображением, занимал несколько строк, то следует задать значение параметра выравнивания left или right. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст "обтекает" изображение с противоположной стороны.</p> </body> |
Рис. 4-13. Позиционирование рисунка с помощью таблицы |
|
Рис. 4-14. Размещение подписи под рисунком с помощью таблицы |
Отступы изображения от текста
Для лучшего восприятия страницы, содержащей текст и графику, необходимо предусмотреть отступы текста от краев изображения. Такие отступы реализуются параметрами тега <img>:
hspace - отступ по горизонтали,
vspace - отступ по вертикали,
которые задаются пикселях.
Рамки вокруг изображений
Для изображения, вставляемого на страницу, можно задать рамку различной ширины. Для этого следует использовать параметр border тега <img>. В качестве значения параметра задается число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется. На рис. 4-14 задана рамка толщиной 3 пикселя.
Альтернативный текст
Одним из параметров тега <img> является параметр alt, определяющий альтернативный текст. Так как загрузка изображений выполняется после отображения текстовой информации, то сначала на экране на месте изображения появится альтернативный текст, который по мере загрузки будет замещаться изображением. Альтернативный текст предоставляет пользователям, работающим в режиме отключения загрузки изображений, получить текстовую информацию о встроенных изображениях. При отключении отображения вместо него появится на экране альтернативный текст. Значение этого параметра имеет смысл и в случае, когда загрузка изображений будет выполняться. В этом случае альтернативный текст используется в качестве подсказки при помещении курсора в область изображения. Параметр задается в виде:
alt = "Поясняющий текст"
Использование изображения в качестве ссылки
Графические изображения могут использоваться не только в качестве иллюстраций, но и исполнять роль указателей гипертекстовых связей. Для этого достаточно включить тег вставки изображения внутрь тега-контейнера <A>. Например,
<a href=ch1.htm><img src=picture.gif></a>.
Любая точка изображения будет исполнять роль указателя на документ ch1.htm. Подробнее вопрос о создании гиперссылок рассмотрен в следующем разделе (см. п. 5).
4.2. Бегущая строка
Удобным способом привлечения внимания посетителя сайта к какому-либо элементу страницы является "бегущая" строка, представляющая собой анимационный эффект, который состоит в том, что элемент, помещённый в него, двигается в том или ином направлении. Тег, реализующий "бегущую" строку имеет вид:
< marquee [параметры] > фрагмент страницы < /marquee >.
Параметры тега marquee.
height - высота строки (а пикселях или процентах), width - ширина строки(а пикселях или процентах),
bgcolor - цвет фона бегущей строки,
behavior - определяет тип скроллинга, может принимать значения:
alternate - колебательные движения от края к краю,
scroll - прокручивание текста. Текст будет выходить за рамки экрана и снова появляться с противоположной его стороны ,
slide - прокручивание текста c остановкой,
scrollamount - величина шага перемещения элемента в пикселях, loop - количество прокруток бегущей строки, может принимать значения:
целое число или
infinite (повтор, пока страница не будет закрыта)
direction - направление движения текста, может принимать значения:
up - вверх,
down - вниз,
left - влево,
right - вправо,
В примере на рис. 4-15 приведен код создания "бегущей" строки с различными сочетаниями параметров. Первый и пятый варианты демонстрируют поведение строки, определяемое параметром behavior. Во втором и третьем вариантах задается различная скорость перемещения параметром scrollamount. В четвертом варианте ограничено число повторов параметром loop.
В пятом варианте в качестве элемента используется список с заголовком. Для выравнивания "бегущей" строки и списка внутри нее по центру дважды применяется тег <center>. Последний вариант демонстрирует в качестве элемента "бегущей" строки рисунок.
Остается добавить, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой, прописывая нужные теги внутри тега <marquee>.
<html> <head> <title>Бегущая строка</title> </head> <body> <h2 align="center">Бегающие строки</h2> <marquee bgcolor="yellow" behavior="alternate"> 1. Бегущая строка бегает от края к краю</marquee> <marquee scrollamount="10">2. Бегущая строка со скоростью 10</marquee> <marquee scrollamount="1">3. Бегущая строка со скоростью 1</marquee> <marquee direction="right" loop="2"> 4. Эта строка будет прокручиваться только два раза</marquee> <marquee behavior="slide">5. Бегущая строка с остановкой</marquee> <center> <marquee bgcolor="#f1f1f1" width=75% height=200 direction="up"> <h3 align=center>6. Бегущая строка-список снизу-вверх</h3> <center> <ul> <li> Пункт 1 <li> Пункт 2 <li> Пункт 2 </ul> </center> </marquee> <br><br> <marquee bgcolor="#f1f1f1" width=75% height=150 behavior="slide" direction="down"> <center><img src="Цветок2.jpg" ></center> </center> </body> </html> |
Рис. 4-15. HTML-код создания "бегущей" строки |