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



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

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

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

ЗДЕСЬ БУДЕТ ВАШ ЗАГОЛОВОК
<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="http://s019.radikal.ru/i630/1404/2c/420f84a15d97.jpg" 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="http://s019.radikal.ru/i630/1404/2c/420f84a15d97.jpg" 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="http://s019.radikal.ru/i630/1404/2c/420f84a15d97.jpg" 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, можно изменить размер и цвет заголовка. Обведите, как при копировании левой кнопкой мыши заголовок, затем слева выбирайте шрифт, размер: маленький, большой или очень большой. Можно настроить курсив и жирный текст заголовка. 

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


Автор статьи ✎ Olga Protasova Выпуск ✹ 4/15/2014 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Ольга, очень симпатично смотрится. Иногда просто необходимо оформить.более индивидуально отдельную страницу в блоге.

    ОтветитьУдалить
    Ответы
    1. Вика, согласна с Вами, мне тоже нравится. Тем более, что использовав формы рамки и различные цвета, а так же другие настройки, можно оформить рамку в своем, индивидуальном стиле. Таким образом оформить страницу блога, чтобы запомнилась посетителям.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *