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

Лана : другие произведения.

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

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]

Ссылки:

Комментарии: 15, последний от 07/01/2016. © Copyright Лана (for-dsv@inbox.ru) Размещен: 24/10/2009, изменен: 24/10/2009. 16k. Статистика. Статья: Изобретательство Оформление текстов на СИ Иллюстрации/приложения: 4 шт.

Вставка картинки .

Для того, что бы украсить текст иллюстрацией, используют тег <img>. Внутрь этого тега в кавычках помещают адрес понравившейся картинки, например, этот: http://www.shodka.net/files/narisovannye_koshki_8_119.jpg (посмотреть),

<img src=" http://www.shodka.net/files/narisovannye_koshki_8_119.jpg">

Если не удалось найти в сети картинку подходящего размера, его можно задать принудительно параметрами width и height. Предположим, что нам требовалась картинка шириной width="300" и высотой height="200". Помещаем эти размеры внутрь тега <img>:

<img src=" http://www.shodka.net/files/narisovannye_koshki_8_119.jpg" width="300" height="200">

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

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

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

Разместим теперь эту картинку в тексте так, как нам требуется. Её можно прижать к левому или правому краю, или поставить по центру с помощью параметра algin. Например для того, чтобы выровнять картинку по центру, вставим тег <img> внутрь конструкции <p align="center"> текст </p>:

<p align="center"><img src="kartinka.jpg"> </p>

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

<img src="kartinka.jpg" align="left">

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

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

<img src="kartinka.jpg" align="right">

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

<img src="kartinka.jpg" align="left" vspace="20" hspace="15">

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

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

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

<table border="5">
<tr>
<td><img src="kartinka.jpg"></td>
</tr>
</table>

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

<table border="8" bordercolor="#663300">
<tr>
<td><img src="kartinka.jpg"></td>
</tr>
</table>

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

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

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

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

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

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

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

<hr align="center" width="250" size="10" color="#FF0000">

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

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

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

<div align="center"><img src="/img/s/sorrelx_a/oformlenie4/poloska-1.gif" width="300" height="10"></div>

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

<div align="center"><img src="/img/s/sorrelx_a/oformlenie4/poloska-1.gif" width="30%" height="10"></div>

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

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

<div align="center"><img src="/img/s/sorrelx_a/oformlenie4/poloska-2.gif" width="400" height="10"></div>

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

<table width="400" border="0" align="center">
<tr>
<td height="10" background="http://samlib.ru/img/s/sorrelx_a/oformlenie4/poloska-2.gif">
</td>
</tr>
</table>

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

Ещё:

Комментарии: 15, последний от 07/01/2016.
Размещен: 24/10/2009, изменен: 24/10/2009. 16k. Статистика.
Статья: Изобретательство

Связаться с программистом сайта.
Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"
Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"