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

---

Рамки с заголовком текста и изображений, с настройкой фона и размеров

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

Самая простая рамка с заголовком слева

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

<fieldset style=" border:1px #000000 solid; padding: 10px; margin:0px 0px 0px 0px;"><legend><font size="3"><font color="#009933">ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК</font></font></legend><center><p>ВАШ ТЕКСТ</p></center></fieldset>

Если добавить перед заголовком строку: <font face="Monotype Corsiva" size="+2" color="#0e5198">Ваш заголовок</font>, изменить размер (border:) и цвет (#000000) окантовки рамки, то получится рамочка с красивым заголовком такого вида 

ТЕКСТ ЗАГОЛОВКА БУДЕТ ТАКОЙ

 <fieldset style=" border:5px #00868b solid; padding: 10px; margin:0px 0px 0px 0px;"><legend><font size="3"><font face="Monotype Corsiva" size="+3" color="#0e5198">ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК</font></font></legend><center><p>ВАШ ТЕКСТ</p></center></fieldset>

Давайте приукрасим нашу рамочку: добавим фон ("background: #FFFC8B;) и изменим форму рамки (ridge). Получим такой вид рамки.

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

 <fieldset style="background: #FFFC8B; border: 7px ridge #0a9e08; padding: 10px;"><legend><font size="3"><font  color="#00868b">ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК</font></font></legend><center><p>ВАШ ТЕКСТ</p></center></fieldset>

Чтобы изменить высоту и ширину рамки, добавим в код height-высоту и width-ширину. Высоту настраивайте по объему текста.

ЗДЕСЬ ВАШ ЗАГОЛОВОК

<fieldset style="background: #00CDCD; border: 7px inset #029D74;height: 150px; width:400px;  padding: 10px;"><legend><font size="3"><font color="#009933">ЗДЕСЬ ВАШ ЗАГОЛОВОК</font></font></legend><center><p>ВАШ ТЕКСТ</p></center></fieldset>

 Вместо текста в заголовок можно вставить картинку, получим рамочку такого вида:

<fieldset style="border: 5px solid #FF00FF; padding: 10px;">
<legend><img src="адрес картинки" height="50" width="70" /></legend><br />
<center>
ВАШ ТЕКСТ</center>
</fieldset>

Адрес картинки на сайте Radikal, первая ссылка. Кто еще не читал мой пост Как узнать URL адрес изображения, перейдите сюда. Можно настраивать высоту и ширину изображения, выделено жирным.

В этой рамке так же можно изменить фон и размер рамки. Только в отличие от верхних ( которые растягиваются), когда будете писать текст, регулируйте высоту рамки по объему текста. Смотрите на код внимательно, там два размера высоты и ширины: рамки и картинки

<fieldset style="background: #D1D1D1; border: 7px inset #F2F2F2;height: 220px; padding: 10px;width: 400px;"> <legend><img height="50" src="адрес картинки" width="70" /></legend><br /> <center> ВАШ ТЕКСТ</center></fieldset>

✔Ниже заголовки в рамках  в разных браузерах будут отображаться по разному. Вернее сказать, они могут не располагаться по центру и справа, а только слева. Но я на всякий случай напишу как выполнить выравнивание. 

Если код выровнять по центру: <center>код</center>, то заголовок будет в центре рамки

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

  ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ

Эта рамка с картинкой на всю ширину страницы

<center> <fieldset style="background: #EEE7BA; border: 3px dotted #855e42; margin: 0px 0px 0px 0px; padding: 10px;"> <legend><img src="адрес картинки" height="50" width="70" /></legend><br /> <center> ВАШ ТЕКСТ</center> </fieldset> </center>

Чтобы заголовок расположить справа, код надо выровнять такой строкой: <div align="right">код</div> Получим рамку с заголовком справа. 

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

ВАШ ТЕКСТ

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК

<div align="right"><fieldset style="background: #DCDCDC; border: 10px double #F2F2F2; padding: 10px;"><legend><font size="3"><font color="#0e5198">ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК</font></font></legend><center><p>ВАШ ТЕКСТ</p></center></fieldset></div>

В редакторе сообщений blogger, можно изменить размер и цвет заголовка. Обведите, как при копировании левой кнопкой мыши заголовок, затем слева выбирайте шрифт, размер: маленький, большой или очень большой. Можно настроить курсив и жирный текст заголовка. 

Какие бывают формы рамки читайте в моем посте: Как выделить часть текста в рамку. Вот собственно на сегодня все. Комментируйте, делитесь с друзьями, а я говорю Вам До свидания. 

Рекомендуемый контент: