# Вставка рисунков и разделительных линий

Лана

ЛанаВставка рисунков и разделительных линийOrigin: http://samlib.ru/s/sorrelx_a/oformlenie4.shtmlСоздан: 24/10/2009, изменен: 24/10/2009, 16kСтатья: ИзобретательствоSeries: Оформление текстов на СИ============================================================

Вставка картинки .    Для того, что бы украсить текст иллюстрацией, используют тег . Внутрь этого тега в кавычках помещают адрес понравившейся картинки, например, этот: http://www.shodka.net/files/narisovannye_koshki_8_119.jpg   (посмотреть), Если не удалось найти в сети картинку подходящего размера, его можно задать принудительно параметрами width и height. Предположим, что нам требовалась картинка шириной   width="300" и высотой height="200". Помещаем эти размеры внутрь тега : Такой способ вставки картинок имеет тот недостаток, что картинка с "материнского" сайта может быть удалена, на сайте может проводиться профилактика, или он вообще будет закрыт. Тогда в вашем тексте вместо картинки будет табличка: "изображение недоступно". Или что-то вроде. Чтобы избежать этой неприятности, все нужные рисунки и фоны следует сохранять на своём компьютере и заливать на свою страничку, как здесь: иллюстрации. Дополнительным плюсом такого способа хранения картинок и фонов является возможность их предварительного уменьшения до нужных размеров. Чем меньше картинка, тем меньше её "вес", тем быстрее открывается страничка с картинкой.

После того, как картинка загружена к вам на СИ, её адрес берут уже из вашего раздела. При загрузки с СИ можно использовать не полный адрес картинки: http://samlib.ru/img/s/sorrelx_a/oformlenie4/kartinka.jpg, а только самую последнюю его часть: kartinka.jpg.

Для дальнейшей работы с картинкой будем использовать ту, что загружена на СИ. Она уже оптимизирована по высоте и ширине, и эти параметры уже не нужны. То есть от всей конструкции остаётся только:

Разместим теперь эту картинку в тексте так, как нам требуется. Её можно прижать к левому или правому краю, или поставить по центру с помощью параметра algin. Например для того, чтобы выровнять картинку по центру, вставим тег внутрь конструкции текст
:

В этом случае текст будет расположен снизу и сверху от картинки. Можно сделать так, чтобы текст обтекал эту картинку слева или справа. Для этого параметр align помещают внутрь тега и распологают этот тег в нужном месте текста. Например, для того, чтобы текст обтекал картинку справа, саму картинку надо прижать к левому краю:

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

Для того, чтобы текст обтекал картинку слева, используют параметр align="right":

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

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

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

И заключительный штрих: украсим картинку рамой. Для этого вставим её в таблицу с единственной ячейкой, задав толщину и цвет границы таблицы. За толщину границы отвечает параметр border, за цвет - bordercolor. Если не задавать ширину и высоту таблицы, то она "обтянет" картинку, как рамка:

Рамка без цвета, толщиной 5 пк.

Рамка бордовая, толщиной 8 пк.

В этих примерах не показано положение картинки. Её выравнивание может быть слева, справа, по центру, для этого в тег <table> вводят дополнительный параметр align:

<table border="5" align="left">

<table border="5" align="right">

<table border="5" align="center">

Разделительная линия, полоски.

Одним из элементов оформления текстов является разделительная линия. Для её вставки используют тег , который также не требует закрытия. Основными параметрами линии являются ширина width, толщина size, цвет color.

Зададим для примера линию красного цвета шириной 250 пикселей, и толщиной 10 пикселей. Для выравнивания её по центру используем параметр    align="center":


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

Для получения такой линии выбираем понравившийся фон, например:

сжимаем картинку-фон по высоте и растягиваем на требуемую ширину. Пусть высота линии у нас будет 10 пикселей, а ширина - 300 пикселей. Получаем полоску:

Если задать ширину полоски в процентах от окна браузера, то она станет "резиновой", то есть будет изменяться по ширине вслед за изменением ширины экрана. Например, если полоску с выбранным фоном задать не 300 пикселей, а 30%, то изменяя размеры окна, можно увидеть, как будет растягиваться эта полоска:

Посмотрим теперь, как при создании полоски поведёт себя анимированный фон. Возьмём картинку-фон:

растянем её по ширине и сожмём по высоте:

А теперь ту же самую полоску зададим с пощью таблицы, выбирая нужный размер ячейки и заполняя его выбранным фоном:

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

Ещё:

• Работа с таблицами.

• Оформление стихов.

• Оформление текста.