Урок по созданию красивой рамочки от MissKcu
 

Перейдя по ссылке, 

Вы увидите пост-пример 

http://www.liveinternet.ru/users/misskcu/post207689028/

 

читать дальше...

Материал, который понадобится Вам для работы:

 

Урок "Кнопка Источник в расширенном редакторе."   http://www.liveinternet.ru/users/misskcu/post197213277

Код 8-слойной рамочки 

<div align="center"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 5px;"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 10px;"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 5px;"><table cellspacing="0" cellpadding="3" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 50px;"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 5px;"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 10px;"><table cellspacing="2" cellpadding="5" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 5px;"><table cellspacing="0" cellpadding="0" border="1" background="ФФФФФ"><tbody><tr><td style="padding: 1px;"><div align="center"><p>Линеечка или картинка</p><center><b><font face="Monotype Corsiva"><b><text size="5"><b><i><text color="330000">Ваш текст  <br /></text></i></b></text></b></font></b><br /></center> <center><b><font face="Monotype Corsiva"><b><text size="5"><b><i><text color="330000">   Линеечка </text></i></b></text></b></font></b></center></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>логотип</td></tr></tbody></table></td></tr></tbody></table></div><p> </p>

 

Адрес сайта "Радикал.ру"      http://www.radikal.ru/

Адрес сайта "Писец"          http://4maf.ru/pisec/

Урок по работе на сайте "Писец"            http://www.liveinternet.ru/users/misskcu/post194404383

Сайт "Привет.ру "        http://privet.ru/

Урок "Как создать плейлист на Привет.ру"          http://www.liveinternet.ru/users/misskcu/post200961476

Серия сообщений "Уроки по Ли.ру от MissKcu":
Часть 1 - Урок создания прозрачного фона от MissKcu
Часть 2 - Как вставить разделители в пост. Урок от MissKcu
...
Часть 11 - Урок по написанию поста на Ли.ру от MissKcu
Часть 12 - Урок по созданию рамочек с разрывом от MissKcu
Часть 13 - Урок по созданию красивой рамочки от MissKcu
Часть 14 - Как изменить фон сообщений в понравившемся дизайне для днева.
Часть 15 - Урок об написании постов на Ли.ру от MissKcu
...
Часть 19 - Как вставить Плейкаст в свой Дневник (блог на Привете). Урок от MissKcu
Часть 20 - Убираем стандартную схему
Часть 21 - Картинки с подписью и без. Урок от MissKcu

Учимся сами делать свои рамочки.
 

Простые рамочки.Делаем сами.
 

Простые Рамки с Заголовком.
 

Рамка с картинкой в виде ЗАГОЛОВКА. В рамке Заголовок может быть в виде ТЕКСТА или можно использовать КАРТИНКУ. Пример такой рамочки,как она будет выглядеть.Картинку лучше брать не большую. Чуть ниже я даю код,чтобы вы могли сделать рамку какая вам нужна-САМИ. Копируете его и вставляете к себе в дневник а потом... В коде где написано УРЛ АДРЕС КАРТИНКИ.— Вставляете свою картинку. Через РАДИКАЛ-ФОТО Код берёте под № 1..Вам только нужно будет изменить размеры картинки на свои. width="300"—Ширина картинки. height="100"—Высота картинки. Если с других сайтов или с Лиру,тогда берёте УРЛ АДРЕС КАРТИНКИ,ССЫЛКИ ведущий на оригинал. Вставлять внутрь кавычек,кавычки не трогаете. Находите в коде вот такой тег ...border:3px #FF00FF solid... Здесь можно менять #FF00FF—ЦВЕТ БОРДЮРА 3px—РАЗМЕР БОРДЮРА на свой. Где написано ВАШ ТЕКСТ—Пишите свой текст. Вот и всё ВАША рамочка готова. Пробуйте,экспериментируйте на здоровье. ЗДЕСЬ ЕЩЁ РАМКИ... SvetlanaT

Рамки для выделения текста.
 

 

Если вас устраивает тот фон который есть у вас на страничке.
А пост просто хочется как-то выделить.
Можно выделить рамкой ,а уж какой край будет у рамки выбирайте сами по НАЗВАНИЮ.
Копируем код и вставляем к себе в блог в Простом редакторе.
Там где написано ВАШ ТЕКСТ- Вставляете свой текст.
Ещё в коде можно поменять цвет рамки.
Находим вот такой значёк,он обозначает цвет#FFFACD и меняем цвет на тот,
который подходит вам. Выбираем цвет здесь.

solid - край рамки имеет сплошную линию.
КОД solid<div style="border:3px solid #FFFACD;padding:10px;">ВАШ ТЕКСТ.</div>

ЗДЕСЬ далее...
SvetlanaT

Рамка с прокруткой.
 

Код к этой рамке.<table border="0" cellspacing="0" cellpadding="1" width="700" bgcolor="#ffd700"><tbody><tr><td><table border="0" cellspacing="0" cellpadding="1" width="700" bgcolor="#000000"><tbody><tr><td><table border="0" cellspacing="0" cellpadding="1" width="700" bgcolor="#ffd700"><tbody><tr><td><table border="0" cellspacing="9" cellpadding="1" width="700" height="500" background="//img0.liveinternet.ru/images/attach/c/1//56/883/56883109_0_16370_1535c78b_XL.jpg"><tbody><tr><td><br /><br /><br /><br /><div align="center"> <div style="left: 0px; overflow: auto; width: 540px; text-indent: 5pt; scrollbar-arrow-color: #ffffff; scrollbar-base-color: #000000; top: 2px; height: 300px; text-align: left"><font size="5"><font face="mistral"><font color="#FFFAFA"><br />ВАШ ТЕКСТ. <br /></font></font></font></div></div><div><font size="+0"></font></div></td></tr></tbody></table></td></tr></tbody></table> <center><a target="_blank" data-cke-saved-href="http://www.liveinternet.ru/users/svetlanat/profile" href="http://www.liveinternet.ru/users/svetlanat/profile"><font size="1"><b><font color="#cdbe70">SvetlanaT</font><br /> </b></font></a></center></td></tr></tbody></table></td></tr></tbody></table>

Делаем оригинальные рамочки без фонов. Урок!
 

Вот такие рамочки с оригинальным дополнением без фонов можно использовать под ваши изображения, фото, текст. Очень просты в использовании, не надо подбирать фон. Потратите несколько минуток, что бы поставить код цвета, поменять ширину обводки, ширину рамки и оля_ля..рамочка готова. Мне лично нравятся. Кто захочет тоже делать такие, объясню, что в коде рамочек вы будете менять по-своему желанию. А кого устраивает и такой цвет, для тех я выставлю коды. И пожалуйста меняйте значения именно там, где я указала и нигде больше! Итак: под каждой рамочкой идет скрин, где я указала, где и что менять.
Начнем с этой, с разрывом. Многие из вас такими пользуются, немного другого дизайна и она уже смотрится более оригинальной. Подчеркну: все что я указала на скрине, можно менять - и цвет и px.

...Здесь будет ваша запись...картинки...

СКРИН

Рамки, украшенные картинкой
 

С помощью CSS можно сделать вот такие лёгкие симпатичные рамки с картинкой слева, либо справа от текста.
Не буду вдаваться в подробности, как их собрать с нуля, а поясню самое необходимое. Под каждой рамкой стоит готовый код шаблона.

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

Ваша подпись

<div style="background-color: #F4FC03; border:3px #00B344 ridge; width: 640px; padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px;"><img data-cke-saved-src="ВАША КАРТИНКА" src="ВАША КАРТИНКА" style="float: left; margin: 0px 15px 10px 0px" /><span style="font-family: Georgia; color:#000000; font-size: 18px;">Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.<br /><br /> <center><a data-cke-saved-href="ССЫЛКА НА ВАШ БЛОГ" href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></span></div>

Смотрим дальше

Рамка вокруг изображения
 

С помощью CSS можно вокруг любого изображения сделать симпатичную
рамку-обводку. Поскольку у стилевого свойства border есть несколько значений,
то и рамочки могут быть разными по стилю, цвету и толщине.

Название цвета указываем по-английски. Значения меняем в строке:
style="border: 10px double Blue", где 10 — толщина, double — стиль, Blue — цвет.
Сначала покажу примеры рамок, а ниже представлю их коды.

Вариант 1

Изображение заключено в двойную рамку: стиль double;

Смотрим дальше

Рамочка.Бродилочка+ урок
 

КАК ПОДПИСАТЬ КНОПКУ.....



КОД БРОДИЛОЧКИ


<center><left><table border="0" background="https://img-fotki.yandex.ru/get/64326/260101046.c5/0_14f5c3_83a4c179_orig" cellpadding="0" cellspacing="0" width="750" height="538"><tr><td></td></tr></table><table border="0" background="https://img-fotki.yandex.ru/get/43443/260101046.c4/0_14f5c1_181dcde6_orig" cellpadding="0" cellspacing="0" width="750" height=""><tr><td><center><br /> <a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a><a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a><a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a><br /> <a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a><a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a><a data-cke-saved-href="АДРЕС КУДА ПОСЛАТЬ НАС" href="АДРЕС КУДА ПОСЛАТЬ НАС" target="_blank"><img data-cke-saved-src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" src="https://img-fotki.yandex.ru/get/43546/260101046.c5/0_14f5c4_5b920725_orig" /></a></center><br /> </td></tr></table><table border="0" background="https://img-fotki.yandex.ru/get/26292/260101046.c5/0_14f5c2_bbf32c96_orig" cellpadding="0" cellspacing="0" height="193" width="750"><tr><td></td></tr></table></left></center>



СМОТРИМ...




 

 

Серия сообщений "МОИ УРОКИ":

Часть 1 - Еще раз о рамочках в 4 слоя-урок от VETA
Часть 2 - Урок от VETA-рамочка сложная
...
Часть 11 - Две ошибки при смене дизайна на ЖЖ
Часть 12 - Бродилочка- и урок (как сделать кнопки)
Часть 13 - Рамочка.Бродилочка+ урок
Часть 14 - бродилочка + урок
 

Боитесь фотошопа?
ничего страшного,будем делать рамочку не выходя из фоторедактора.

И ПОЛУЧИМ ВОТ ТАКУЮ.....

Ваш текст

для начала смотрим и знакомимся с редактором

Серия сообщений "ДЕЛАЕМ РАМОЧКИ":

Серия сообщений "***ФОРМУЛЫ РАМОК":

Часть 1 - Красивый текст для блога
Часть 2 - Рамки оригинальные
...
Часть 15 - Еще вариант рамочки...
Часть 16 - формула
Часть 17 - Формула объемной рамочки
Часть 18 - Меняем цвет основы рамочки...и получаем новую..красива и без фонов
Часть 19 - Обводка...
...
Часть 41 - Код рамочки с прокруткой и картинкой внизу...+код
Часть 42 - ПРОСТАЯ рамочка с обводкой +формула
Часть 43 - РАМОЧКА с картинкой слева+КОД

ПАМЯТКА НАЧИНАЮЩИМ ФОТОШОППЕРАМ

ДЕЛАЕМ РАЗРЕЗНУЮ РАМКУ В ФШ

Урок написан по просьбе постоянных читателей.
Будем учиться делать вот такую фотошопную рамку

Здесь будет ваш текст Надеюсь, рамка вам нравится

Похожих уроков достаточно много, я просто хочу показать на примере одной рамки, какие приемы в ФШ можно здесь использовать.

Читать далее

Серия сообщений "Делаем рамки":

Часть 1 - Золотая рамочка с фильтром Factory C в ФОТОШОПЕ
Часть 2 - Рамочка с радужным градиентом
...
Часть 45 - Как сделать разрезную рамку в ФШ
Часть 46 - Коды для Мейла и ЛиРу
Часть 47 - Делаем разрезную рамку в ФШ

Серия сообщений "* Делаем разные рамки":

Часть 1 - Как делать рамочки с тоненькими полосками.
Часть 2 - Делаем оригинальную рамку для фото
...
Часть 6 - Делаем ФШ рамку с помощью бордюрных масок
Часть 7 - Создание рельефной рамки в фотошопе
Часть 8 - Делаем разрезную рамку в ФШ