Главная | Обратная связь | Поможем написать вашу работу!

Использование таблиц при обтекании изображения текстом

Лабораторная работа №3.

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ HTML.

Вставка иллюстраций

Цель работы: изучить назначение и правила записи основных тегов языка и их атрибуты.

Теоретические данные.

Вставка иллюстраций (тег <IMG>)

Одиночный тег <IMG> позволяет добавлять на web-страницу различные иллюстрации. Картинка (рисунок или фотография) при этом содержится в отдельном файле формата JPEG, GIF или PNG (табл. 1) и вставляется в текст в том месте, где помещен данный тег. Благодаря этому тегу можно использовать изображения в гиперссылках, вставлять картинки в таблицы, создавать нестандартные маркеры и решать другие задачи дизайна.

Таблица Форматы графических файлов

Формат	Описание	Применение
GIF	Использует палитру из 256 цветов и эффективно сжимает сплошные цветные области, сохраняя детали изображения без потерь. Широко применяется для создания анимированных рисунков. Может содержать прозрачные области.	Иллюстрации, содержащие текст, логотипы, анимированные рисунки, изображения с прозрачными участками.
JPEG	Поддерживает 16 млн цветов и реализует сжатие изображения с частичной потерей информации. Это может приводить к искажениям, особенно по краям текста или тонких линий.	Фотографии; не применяется для рисунков, содержащих прозрачные участки, мелкие детали или текст.
PNG-8	Аналог GIF, но поддерживается не всеми браузерами. Использует улучшенный формат сжатия данных	Иллюстрации, содержащие текст, логотипы, анимированные рисунки, изображения с прозрачными участками.
PNG-24	Поддерживает 16 млн. цветов. Подобен GIF и PNG-8, но, в отличие от JPEG, сохраняет детали изображения.	Фотографии и рисунки с прозрачными участками, с большим количестве цветов и четкими деталями изображения.

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

Пример: < IMG SRC="risunok.gif">

Задание размеров иллюстрации

По умолчанию вставленная иллюстрация отображается в масштабе 1:1. Однако можно изменить ее размеры при помощи атрибутов HEIGH и WIDTH. Кроме того, указание реальных размеров картинки желательно для того, чтобы браузер еще до ее загрузки «знал», сколько места надо отвести под рисунок, и при загрузке последнего исключались неприятные «прыжки» обтекающего картинку текста. Особенно это важно для изображений, размещенных внутри таблицы, иначе такая таблица будет показана до тех пор, пока все рисунки в ней не загрузятся полностью.

Пример:

Задание рамки вокруг рисунка

Изображение на web-странице можно поместить в рамку различной толщины. Для этого служит параметр BORDER. По умолчанию рамка вокруг изображения не отображается, за исключением случая, когда данный рисунок является гиперссылкой. Цвет рамки совпадает с цветом текста (для гиперссылки — с цветом гиперссылок). При необходимости можно отключить показ рамки для рисунка-гиперссылки, указав для него в теге <IMG> нулевую толщину рамки.

Пример:

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

Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений либо пока рисунок еще не успел загрузиться. Браузеры также отображают альтернативный текст в виде всплывающей подсказки при наведении курсора мыши на картинку. Для задания альтернативного текста используется параметр ALT. Текст в нем обязательно должен быть заключен в кавычки; использование кавычек в самом альтернативном тексте не допускается, их нужно заменять сдвоенными символами апострофа.

Пример:

Совместная верстка рисунка и текста с помощью таблицы

Таблица из двух ячеек позволяет разместить рядом текст и рисунок. (Разумеется, рамку таблицы в этом случае необходимо задать нулевой толщины.)

Пример:

<TR>

<TD>

<НЗ>Яблоко</НЗ>

</TD>

<TD>

</TD>

</TR>

</TABLE>

Обтекание изображения текстом.

Обтекание (оборка) рисунка текстом — один из популярных приемов верстки web-страниц. При этом изображение располагается у края окна браузера, а текст заполняет место сбоку от него. Для создания обтекания изображения текстом существует несколько способов — с использованием как тегов HTML, так и стилей.

Выравнивание изображения определяется параметром ALIGN. Он указывает, возле какого края окна будет располагаться рисунок, одновременно определяя способ его обтекания текстом. Чтобы выровнять изображение по правому краю и задать обтекание слева, используется значение RIGHT, а для выравнивания изображения по левому краю с обтеканием справа — значение LEFT.

Задание отступов по краям рисунка

Параметр ALIGN часто используют вместе с другими параметрами тега<IMG > — HSPACE и VSPACE, которые определяют отступы между рисунком и обтекающим его текстом.

Пример:

<НТМL>

<BODY>

<IMG SRC="risunok.gif" HEIGHT=137 WIDTH=180 HSPACE=10 VSPACE=10 ALIGN=LEFT> Обтекание картинки текстом — один из популярных приемов верстки web-страниц, когда изображение располагается у края окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных с использованием как тегов HTML, так и стилей.

</BODY>

</HTML>

Параметр hspace управляет горизонтальными отступами и слева, и справа. Поэтому рисунок будет отстоять также от края окна браузера на значение, указанное в этом атрибуте. Чтобы избавиться от данной особенности, можно использовать таблицы.

Использование таблиц при обтекании изображения текстом

Таблицы с невидимой границей могут пригодиться и при создании обтекания изображения текстом. Для достижения нужного результата можно воспользоваться параметром ALIGN тега <TABLE>, имеющим такое же назначение, как и в теге < IMG>. Но у таблиц имеется гораздо больше параметров для управления содержимым.

Пример:

<HTML>

<BODY>

<TR>

<TD>

</TD>

</TR>

</TABLE>

Обтекание картинки текстом — один из популярных приемов верстки web-страниц, когда изображение располагается у края окна брауэера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных с использованием как тегов HTML, так и стилей. Таблица создает невидимую границу, которая отстоит от самого изображения и не позволяет тексту приблизиться к нему. Размер отступа регулируется шириной и высотой таблицы. Так, в данном примере рисунок выравнивается по левому краю, поскольку этот способ выравнивания установлен для таблицы.

</BODY>

</HTML>

Таблица создает невидимую границу, которая отстоит на некоторое расстояние от самого изображения и не позволяет тексту приблизиться к нему. Размер этого отступа регулируется шириной и высотой таблицы. В показанном выше примере рисунок выравнивается по левому краю (поскольку именно этот способ выравнивания установлен для таблицы). Горизонтальный отступ от текста до рисунка при этом будет равен разности между шириной таблицы и шириной изображения. С вертикальным отступом дело обстоит иначе. По умолчанию выравнивание содержимого ячейки таблицы производится посередине. Так что, если в теге <TD> не задан параметр VALIGN=TOP, отступы по вертикали будут в два раза меньше, чем по горизонтали.

Атрибут	Описание	Пример
ALT	Вывод альтернативного текста, пока идет загрузка рисунка или если загрузка графики отключена	<IMG SRC="risunok.gif" ALT="Дeльфин в море">
HEIGH	Высота рисунка	<IMG SRC="risunok.gif" HEIGHT=137 WIDTH=180>
WIDTH	Ширина рисунка
ALIGN	Выравнивание изображения относительно текста: LEFT — слева, RIGHT — справа, TOP — по верху, MIDDLE — посередине	<IMG SRC="risunok.gif" HEIGHT=137 WIDTH=180 ALIGN=RIGHT>
BORDER	Толщина рамки вокруг изображения	<IMG SRC="risunok.gif" BORDER=2>
HSPACE	Отступ по горизонтали
VSPACE	Отступ по вертикали	<IMG SRC="risunok.gif" HSPACE=15 VSPACE=20>

Воспользуйтесь поиском по сайту: