В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 20. Размещение картинки на странице с текстом



Разместить картинку на странице можно с помощью таблицы: создать табличку на две (или три) колонки и поместить в одну колонку картинку, а в другую текст. Если текста у вас мало, а картинки большие сделать табличку гораздо лучше и практичнее. Текст будет находится строго в отведённом для него месте, т.е. в ячейке.
улица

Улица старого города изображена на этой старой открытке.

Очень романтично!


Ознакомиться с созданием табличек можно здесь - урок 2 и здесь - Урок 5 и здесь - Урок 14 .

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


<img src=АДРЕС КАРТИНКИ alt="ТО, ЧТО НАПИСАНО, ЕСЛИ КАРТИНКА НЕ ОТКРЫЛАСЬ " title="ТЕКСТ, НА ВСПЛЫВАЮЩЕЙ ПОДСКАЗКЕ, ПРИ НАВЕДЕНИИ НА КАРТИНКУ КУРСОРА" border="3" width="105" height="140" align=right hspace=20 vspace=20>


Учтите, что текст в атрибут "alt" не следует писать длинным, иначе, если картинка не откроется - текст будет растягивать квадратик картинки и искажать всю страницу. Лучше, чтобы длина надписи не превышала ширины вашей картинки.
Атрибут "align" - выравнивание. Может быть "right" - когда картинка смещены вправо, а текст её обтекает слева; " left" - картинка слева, а текст её обтекает справа. У атрибута "align" может быть и множество других значений:

top - вершина картинки выравнивается по верхней границе строки;
texttop - вершина картинка выравнивается по вершине самого высокого символа строки;
middle - картинка центрируется в строке;
absmiddle - центр картинки выравнивается точно по центру строки;
baseline - низ картинки выравнивается по базовой линии строки;
bottom - низ картинки выравнивается по низу строки;
absbottom - низ картинка выравнивается по низу самого низко сидящего символа строки.

атрибут "hspace" задаёт отступ текста от картинки по горизонтали;
атрибут "vspace" - по вертикали;
атрибут "border" позволяет создать рамку вокруг картинки.
"width" - ширина нашей картинки;
"height" - высота;

Я не буду здесь приводить весь код нашей учебной странички - из-за текста он очень большой, но вы можете щёлкнув по странице правой кнопкой мыши и посмотреть весь html-код.
Самая верхняя картинка (портрет Бестужева):


<img src=http://lezione.dugward.ru/bestujev.jpg width="119" height="140" alt=" Бестужев " title=" Бестужев-Марлинский" border="0" align=right hspace=10 vspace=10>


Выровнена картинка по правой стороне, отступы текста - по 10 px, border="0"

Фотография редакции журнала "Современник":


<img src=http://lezione.dugward.ru/sovremennik.jpg width="140" height="115" alt=" Кружок журнала Современник " title=" Кружок журнала Современник " border="1" align=left hspace=20 vspace=20>


Выровнена по левой стороне, отступы текста - по 20 px, рамочка в 1 px.

Портрет Грибоедова отличается только увеличенной рамочкой (3 px) и увеличенным отступом: 30 px.


<img src=http://lezione.dugward.ru/griboedov.jpg width="112" height="140" alt=" Грибоедов " title=" А.С. Грибоедов " border="3" align= right hspace=30 vspace=30>


А вот тэг картинки с портретом Аполлона Григорьева уже отличается от всех предыдущих:


<img src=http://lezione.dugward.ru/ap_grigoryev.jpg width="105" height="140" alt=" Григорьев " title=" Ап. Григорьев " align= right style="border: 1px solid red; margin-left: 20px;" >


Здесь рамочка прописана стилем - border: 1px solid red;
Так же, стилем прописан и отступ - margin-left: 20px;

Если вы сравните портреты Грибоедова и Аполлона Григорьева, то увидите, что портрет Григорьева примыкает вплотную к правой границе нашего сайта, отступ в 20 px у него только с левой стороны, в то время как вокруг портрета А.С. Грибоедова отступ в 20 px и справа и слева.
Так происходит потому, что в стилях картинки с Ап. Григорьева у нас прописан только отступ слева: margin-left: 20px;.
Цвет рамочки можно задать любой.

И наконец, надпись на картинке.
В самом низу страницы проходит синяя полосочка. Эта полосочка сделана картинкой, поверх которой написано имя автора и название произведения.
Можно сделать надпись на изображении так, как мы уже делали в уроке 15 (масштабирующийся логотип)

То есть, сделав табличку и поместив в ней нашу картинку фоном.
Но можно обойтись и без таблички. Например, так:


<div style="background: url('http://lezione.dugward.ru/fon-ipb.jpg') repeat-x;" >
<p> <i> <b> Александр Александрович Бестужев (Бестужев-Марлинский) <br>Взгляд на старую и новую словесность в России. </b> </i> <br>
<br>
</div>


Если Вы ставите картинку фоном под текст - нужно, чтобы Ваше изображение ни в коем случае не было пёстрым - иначе текст будет нечитабельным.



Перейти к Уроку 21
© А.М. Возлядовская. 2009 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru

Навигация по урокам

Регистрация на хостинге

Регистрация на Narod.ru

Регистрация на платном хостинге

Загрузка изображений на Radikal.ru


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS


Ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Следующий урок


Картинки (логотипы, баннеры)

Как сделать работающую кнопку (баннер)

Как установить логотип. А так же как задать цвет фона (таблицы, страницы сайта) и как установить фоновое изображение (bgcolor и background)

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы


Несколько советов по установке форумного движка SMF на платный хостинг