Поговорим немного о рамочках

Читать далее...

От простого к более сложному.

Приблизительно год назад я восстановила пост блогера bloginja, в котором она достаточно подробно и понятно изложила, как сделать рамочку с закругленными углами. Желающие могут заглянуть в этот пост (https://www.liveinternet.ru/users/tomishka/post497862983/), я же взяла из поста нужный код, заменив радиус и ширину рамочки. Вот что я имею в итоге от взятого кода:

Далее...

Формула разрезной рамочки (чужая, но мне понравилась)

Здесь будет ваш текст

<center><table border="0" background="АДРЕС ВЕРХНЕЙ ЧАСТИ" cellpadding="0" cellspacing="0" width="700" height="ВЫСОТА ВЕРХНЕЙ ЧАСТИ"><tr><td></td></tr></table><table border="0" background="АДРЕС СРЕДНЕЙ ЧАСТИ" cellpadding="0" cellspacing="0" height="ВЫСОТА СРЕДНЕЙ ЧАСТИ" width="700"><tr><td><div align="center"><table align="center" border="0" cellspacing="0" cellpadding="0"><tr><td style="padding:0px 10px;" align="center"><span style="font-family:Georgia;color:#КОД ЦВЕТА ТЕКСТА;font-size:22px;text-shadow: 1px 1px 2px #000000;"><div align="center"><center>Здесь будет ваш текст</center></div></span></td></tr></table></div></td></tr></table><div><table border="0" background="АДРЕС НИЖНЕЙ ЧАСТИ" cellpadding="0" cellspacing="0" width="700" height="ВЫСОТА НИЖНЕЙ ЧАСТИ"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></div></center>

Вопрос к знатокам. Помогите, пожалуйста, разобраться.

На первой картинке мы видим рамочку с сиреневым фоном. Ширина рамочки 700px. На второй картинке добавлены две полоски шириной 700px: одна над текстом, вторая под текстом. На третьей картинке верхняя полоска заменена картинкой, ширина которой 700px. Однако, здесь виден отступ от края, который виден и около нижней полоски. Кто знает, каков этот стандартный отступ от края рамочки?

*****Здесь будет ваш текст*****

<center><table style="width: 700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000;" background="https://www.yapfiles.ru/files/2900698/0_bd198_3581e57d_XL12besshovn.jpg6.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><center><br /><center><font size="5" color="#954dfe" face="Monotype Corsiva">*****Здесь будет ваш текст*****<br /><br /></font></center></center></td></tr></table></center>

*****Здесь будет ваш текст*****

<center><table style="width: 700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000;" background="https://www.yapfiles.ru/files/2900698/0_bd198_3581e57d_XL12besshovn.jpg6.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><center><hr align="center" color="954dfe" size="4" width="700" /><br /><center><font size="5" color="#954dfe" face="Monotype Corsiva">*****Здесь будет ваш текст*****<br /><hr align="center" color="954dfe" size="4" width="700" /></font></center></center></td></tr></table></center>

*****Здесь будет ваш текст*****

<center><table style="width: 700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000;" background="https://www.yapfiles.ru/files/2900698/0_bd198_3581e57d_XL12besshovn.jpg6.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><center><img src="//img1.liveinternet.ru/images/attach/d/3/159/617/159617603_kb1.jpg" width="700" height="652" alt="kb1 (700x652, 466Kb)" /><br /><center><font size="5" color="#954dfe" face="Monotype Corsiva">*****Здесь будет ваш текст*****<br /><hr align="center" color="954dfe" size="4" width="700" /></font></center></center></td></tr></table></center>

Скелетик рамочки от Schamada


<center><table style="width: ШИРИНА РАМОЧКИ px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="АДРЕС ОБЩЕГО ФОНА" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);" background="АДРЕС КАРТИНКИ" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="ШИРИНА ГИФКИ " height="ВЫСОТА ГИФКИ" style="" background="АДРЕС ГИФКИ НА ПРОЗР,ФОНЕ" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><br /> <center><fieldset style=" width: ШИРИНА ОБВОДКИ ДЛЯ ТЕКСТА px; border:3px #КОД ЦВЕТА ОБВОДКИ double; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#ЦВЕТ ТЕКСТА;font-size:18px;text-shadow: -1px -1px 1px #ЦВЕТ ТЕНИ ШРИФТА;"><br />***ВАШ ТЕКСТ***<br /><br /> </span></center></fieldset></center></td></tr></table></center>

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

*****Здесь будет ваш текст***** * <center><table style="width: 700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000;" background="АДРЕС ОБЩЕГО ФОНА" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><img src="АДРЕС КАРТИНКИ" width="700" /><center><fieldset style=" width: 684px; border:3px #КОД ЦВЕТА ОКАНТОВКИ ТЕКСТА double; padding: 5px;background-image:url; box-shadow: 0px 0px 3px #000000;"><br /><center><font size="5" color="#КОД ЦВЕТА ТЕКСТА" face="Monotype Corsiva">*****Здесь будет ваш текст*****<br /><br /></font></center></fieldset><a target="_blank" href="ССЫЛКА НА ВАШ ДНЕВНИК"><font size="1" color="#6d1e1d" face="Monotype Corsiva">*</font> </a></center></td></tr></table></center> Перед вами скелетик простой рамочки, по нему сделана рамочка представленная ниже. По моим понятиям скелетик должен быть максимально прост, поэтому я исключила разделители. Чтобы самому сделать рамочку, надо найти картинку и подходящий для этой картинки фон. Вот те два главных элемента, на которые надо обратить внимание. Дважды встречается число 700, это ширина картинки. Если ваша картинка меньшего размера, например, 600px, то придется 700 в двух местах заменить на 600. Есть еще одно число ( 684 ), которое также придется уменьшить на 100. Аналогично надо поступить, если вы хотите сделать рамочку большего размера в допустимом диапазоне, но в этом случае надо указанные значения увеличить. Код цвета для текста и окантовки надо выбрать так, чтобы текст можно было легко читать и чтобы обрамление текста было заметным. У меня вместо НИКА стоит *, ее можно заменить на ваш НИК. Желаю всем удачи! *****Здесь будет ваш текст***** * <center><table style="width: 700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000000;" background="//img1.liveinternet.ru/images/attach/d/4/159/742/159742857_fvv1.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><img src="//img0.liveinternet.ru/images/attach/d/4/159/742/159742808_vv4.gif" width="700" /><center><fieldset style=" width: 684px; border:3px #ab7e01 double; padding: 5px;background-image:url; box-shadow: 0px 0px 3px #000000;"><br /><center><font size="5" color="#ab7e01" face="Monotype Corsiva">*****Здесь будет ваш текст*****<br /><br /></font></center></fieldset><a target="_blank" href="//www.liveinternet.ru/users/tomishka/"><font size="1" color="#6d1e1d" face="Monotype Corsiva">*</font> </a></center></td></tr></table></center>

Поговорим о бордюрах.

Пост для желающих научиться делать свои рамочки.

Далее...

Пост для желающих научиться делать свои рамочки.

Пост для желающих научиться делать свои рамочки.

Далее...

Пост для желающих научиться делать свои рамочки.

Далее...

Пост для желающих научиться делать свои рамочки.

Как использовать формулу разрезной рамочки))) Урок для новичков...


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

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

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

Учимся делать рамки. Урок 1 Чтобы научиться делать рамочки, нужно вникнуть в суть их создания. Html-код рамки состоит из тегов. Используя многообразие тегов, можно составлять разные рамки. Что такое ТЕГ Чтобы лучше усвоить урок, советую нажать на эту ссылку http://delaisait.ucoz.ru/html/html-redactor.html и открыть редактор, в котором можно легко повторять мои действия. Как работать в редакторе Итак, начинаем. Тег TABLE создает таблицу. Можно составлять таблицы с разным количеством ячеек. Сейчас нам понадобится таблица с одной ячейкой, которую мы и назовём впоследствии рамочкой. <TABLE> СОДЕРЖИМОЕ РАМКИ </TABLE> Вставим этот элемент кода в редактор и будем его наполнять, дописывая атрибуты к тегу TABLE . Читать далее Я заменю 2 фона, уберу бордюр (поставлю значение "0") и поменяю отступы СОДЕРЖИМОЕ РАМКИ Урок 2 Урок 3 bloginja

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

Часть 1 - Рамка к Пасхе.
Часть 2 - Душевная музыка. Светлана Копылова.
...
Часть 7 - Урок по созданию музыкальной открытки
Часть 8 - Милые женщины, поздравляю Вас!
Часть 9 - Учимся делать рамочки
Часть 10 - Музыкальный альбом "Гуляночка"
Часть 11 - Учимся делать рамки. Урок 2.
...
Часть 18 - Рамки для постов
Часть 19 - Счастье подобно бабочке }i{ - плейкаст
Часть 20 - Заходи в мой дневник

Формула разрезной ФШ рамочки (код для ЖЖ и Лиру)

Формула разрезной ФШ рамочки Формула универсальная, подходит для Лиру и ЖЖ =============================================== <div align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" align="center"><table width="ШИРИНА ВЕРХНЕЙ ЧАСТИ" height="ВЫСОТА ВЕРХНЕЙ ЧАСТИ" style="border:0px none #000000" background="ССЫЛКА НА ВЕРХНЮЮ ЧАСТЬ РАМКИ" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"></span></td></tr></table></td></tr><tr><td style="padding:0px" align="center"><table width="ШИРИНА" style="border:0px none #000000" background="ССЫЛКА НА СРЕДНЮЮ ЧАСТЬ РАМКИ" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#ffffff;font-size:23px">Здесь будет ваш текст</span></td></tr></table></td></tr><tr><td style="padding:0px" align="center"><table width="ШИРИНА НИЖНЕЙ ЧАСТИ РАМКИ" height="ВЫСОТА НИЖНЕЙ ЧАСТИ РАМКИ" style="border:0px none #000000" background="ССЫЛКА НА НИЖНЮЮ ЧАСТЬ РАМКИ" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"></span></td></tr></table></td></tr></table></td></tr></table>

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

УРОК. РАМКА В РАМКЕ...

СДЕЛАЕМ РАМКУ С ОБВОДКОЙ ВОКРУГ КАРТИНКИ И ВОКРУГ ТЕКСТА. Вот такую. ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ… СМОТРЕТЬ УРОК...

Дорогие друзья и гости! Кому некогда или лень писать комментарии, отмечайте внизу слева в посте: ПОНРАВИЛОСЬ!"

Благодарю за цитирование!

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

Часть 1 - Урок 1. Делаем простую рамочку из 2-х слоев.
Часть 2 - Как скопировать код рамки из окошка и перенести рамку в свой дневник.
...
Часть 18 - Шпаргалка для оформления постов.
Часть 19 - Урок. Ваш компьютер не читает программы на русском языке? Как это исправить?
Часть 20 - УРОК. РАМКА В РАМКЕ...
Часть 21 - LiveInternet – Отношения
Часть 22 - Уменьшаем большую картинку.
Часть 23 - По просьбе "скелетик" кода такой рамки.

Учимся делать рамочку по предложенной формуле

Перед вами две рамочки, выполненные по довольно простой формуле. Сейчас я попытаюсь рассказать, как каждый из вас может научиться делать такие рамочки. Желающие могу посмотреть другой пост, после прочтения которого я написала свой урок. Вот ссылка на этот пост: http://www.liveinternet.ru/users/nataliya_bezyshko/post158167825



<div align="center"><table border="2" background="https://img1.liveinternet.ru/images/attach/d/0/142/128/142128157_fon7.jpg" cellpadding="8" cellspacing="0" width="700"><tr><td style="padding: 8px;"><table border="2" background="https://img-fotki.yandex.ru/get/194858/50114850.7fb/0_11fcfe_9c27de7b_S.jpg" cellpadding="50" cellspacing="0" width="100%"><tr><td style="padding: 50px;"><center><table border="2" background="https://img1.liveinternet.ru/images/attach/d/0/142/128/142128157_fon7.jpg" cellpadding="6" cellspacing="0" width="100%"><tr><td><table border="2" background="https://img-fotki.yandex.ru/get/9825/198571148.33e/0_181432_afbf1701_orig" cellpadding="15" cellspacing="0" width="100%"><tr><td><div align="center"><img src="//img1.liveinternet.ru/images/attach/d/1/131/543/131543885_4059776_Tri_Starca__Nesterov.jpg" width="550" /></div></td></tr></table></td></tr></table></center><br /><div align="center"><table border="2" background="https://img1.liveinternet.ru/images/attach/d/0/142/128/142128157_fon7.jpg" cellpadding="6" cellspacing="0" width="100%"><tr><td><div align="center"><table border="2" background="https://img-fotki.yandex.ru/get/9825/198571148.33e/0_181432_afbf1701_orig" cellpadding="35" cellspacing="0" width="100%"><tr><td><br /><center><font size="5" color="#fafec8" face="Monotype Corsiva"> Здесь будет ваш текст<br /> </font></center><div align="center"><a target="_blank" href="//www.liveinternet.ru/users/tomishka/"><font size="1" color="#fafec8" face="Monotype Corsiva">tomishka</font> </a></div></td></tr></table></div></td></tr></table></div></td></tr></table></td></tr></table></div>

<div align="center"><table border="2" background="//img0.liveinternet.ru/images/attach/c/1//48/868/48868965_autr45.jpg" cellpadding="8" cellspacing="0" width="700"><tr><td style="padding: 8px;"><table border="2" background="//img0.liveinternet.ru/images/attach/d/1/134/202/134202480_1__95_.jpg" cellpadding="50" cellspacing="0" width="100%"><tr><td style="padding: 50px;"><center><table border="2" background="//img0.liveinternet.ru/images/attach/c/1//48/868/48868965_autr45.jpg" cellpadding="6" cellspacing="0" width="100%"><tr><td><table border="2" background="https://img-fotki.yandex.ru/get/57551/39663434.af7/0_c5605_80395121_orig" cellpadding="15" cellspacing="0" width="100%"><tr><td><div align="center"><img src="//img-fotki.yandex.ru/get/4510/32130860.a2/0_90562_6dd1d8dd_XL.jpg" width="550" /></div></td></tr></table></td></tr></table></center><br /><div align="center"><table border="2" background="//img0.liveinternet.ru/images/attach/c/1//48/868/48868965_autr45.jpg" cellpadding="6" cellspacing="0" width="100%"><tr><td><div align="center"><table border="2" background="https://img-fotki.yandex.ru/get/57551/39663434.af7/0_c5605_80395121_orig" cellpadding="35" cellspacing="0" width="100%"><tr><td><br /><center><font size="5" color="#ffffff" face="Monotype Corsiva"> Здесь будет ваш текст<br /> </font></center><div align="center"><a target="_blank" href="//www.liveinternet.ru/users/tomishka/"><font size="1" color="#ffffff" face="Monotype Corsiva">tomishka</font> </a></div></td></tr></table></div></td></tr></table></div></td></tr></table></td></tr></table></div>

Код для рамочки

<div align="center"><table border="2" background="ОБВОДКА РАМОЧКИ" cellpadding="6" cellspacing="0" width="700"><tr><td style="padding: 6px;"><table border="2" background="ФОН РАМОЧКИ" cellpadding="50" cellspacing="0" width="100%"><tr><td style="padding: 50px;"><center><table border="2" background="ОБВОДКА КАРТИНКИ" cellpadding="6" cellspacing="0" width="100%"><tr><td><table border="2" background="ФОН ПОД КАРТИНКУ" cellpadding="15" cellspacing="0" width="100%"><tr><td><div align="center"><img src="КАРТИНКА" width="550" /></div></td></tr></table></td></tr></table></center><br /><div align="center"><table border="2" background="ОБВОДКА ТЕКСТА" cellpadding="6" cellspacing="0" width="100%"><tr><td><div align="center"><table border="2" background="ФОН ПОД ТЕКСТ" cellpadding="35" cellspacing="0" width="100%"><tr><td><br /><center><font size="5" color="#000000" face="Monotype Corsiva"> Здесь будет ваш текст<br /> </font></center><div align="center"><a target="_blank" href="ССЫЛКА НА БЛОГ"><font size="1" color="#000000" face="Monotype Corsiva">ИМЯ БЛОГЕРА</font> </a></div></td></tr></table></div></td></tr></table></div></td></tr></table></td></tr></table></div>

Просмотрим код-шаблон в окошке вверху и попытаемся разобраться с ним. В коде есть три обводки: ОБВОДКА РАМОЧКИ, ОБВОДКА КАРТИНКИ И ОБВОДКА ДЛЯ ТЕКСТА, можно все обводки сделать одинаковыми и тогда адрес будет один и тот же для трех мест. Есть два фона: ФОН ПОД КАРТИНКУ и ФОН ПОД ТЕКСТ, их тоже можно сделать одинаковыми, надо только подобрать фон, который бы подходил к картинке. Наконец, есть ФОН РАМОЧКИ, что-то подобное багетной рамочке, внутри которой расположена картинка и текст. Этот фон желательно взять не однотонным, но гармонирующим с остальными фонами, чтобы рамочка смотрелась красиво. Выбранная для рамочки картинка, должна быть по ширине не менее 550 px, можно взять картинку и меньшего размера, но рамочка в этом случае будет выглядеть чуть хуже. ССЫЛКА НА БЛОГ и ИМЯ БЛОГЕРА также надо заменить на свои собственные. Все замены надо делать очень аккуратно, не затрагивая кавычек, причем ни в начале ( после открывшейся кавычки), ни в конце ( перед закрывшейся кавычкой) не должно быть пробелов. Текст и имя блогера будут напечатаны черным цветом, так как выбран код цвета, состоящий из шести нулей, при желании цвет можно изменить на другой. Немного разобрались с тем, что собой представляет код рамочки, теперь попытаемся разобраться с тем, как этим кодом воспользоваться, если мы нашли картинку и подобрали три подходящих фона. Чтобы сделать рамочку по предложенному "скелетику", надо:
1. скопировать код из окошечка
2. перейти к дневнику и кликнуть на *НОВАЯ ЗАПИСЬ* (в левом верхнем углу странички своего дневника)
3. когда откроется ПРОСТОЙ РЕДАКТОР, кликнуть на *ПЕРЕЙТИ К ПОЛНОЙ ФОРМЕ* (в правом верхнем углу странички)
4. когда откроется текстовый редактор (но только полный), в большое белое текстовое поле вставить код рамочки
5. кликнуть на "ПРЕДПРОСМОТР" и посмотреть, что мы получили (пока практически только контуры рамочки )
6. кликнуть на "РЕДАКТИРОВАТЬ" и аккуратно занести все, что требуется для замены текстов
7. найти внизу страницы "СОХРАНИТЬ ИЗМЕНЕНИЯ" и, кликнув, просмотреть, что получили
8. убедившись в том, что мы с работой справились, нажать "ОПУБЛИКОВАТЬ"

Пробуйте, у Вас получится!
ЖЕЛАЮ УДАЧИ!
Небольшая помощь начинающим

Из окошка можно взять предложенные варианты фонов ( зеленый, желтый и синий) и с выбранной картинкой сделать свою рамочку. Кроме фонов предложен еще вариант для цвета текста. Удачи всем желающим!

<div align="center"><br /><br /> Обводка зеленая<br /> //img0.liveinternet.ru/images/attach/c/0/121/605/121605342_vesna_trava_2_fon_ot_fanina_odnot.jpg<br /> Фон<br /> //img0.liveinternet.ru/images/attach/c/10/112/262/112262962_p2.png<br /> Широкая<br /> //img1.liveinternet.ru/images/attach/d/0/138/808/138808239_250.jpg<br /> Код цвета для текста<br /> fafec8<br /> Обводка желтая<br /> <a href="https://img-fotki.yandex.ru/get/9753/198571148.138/0_1110da_c72453d9_orig" target="_blank">https://img-fotki.yandex.ru/get/9753/198571148.138/0_1110da_c72453d9_orig</a><br /> Фон<br /> //img1.liveinternet.ru/images/attach/d/0/138/235/138235915_0_2d505_ae0149cc_Ljpg.gif<br /> Широкая<br /> //img1.liveinternet.ru/images/attach/c/9/107/924/107924555_18.png<br /> Код цвета для текста<br /> 663300<br /> Обводка синяя<br /> //img0.liveinternet.ru/images/attach/d/1/132/439/132439274_0_635ad_f02236f7_XXS.jpg<br /> Фон<br /> <a href="https://img-fotki.yandex.ru/get/42991/198571148.354/0_185f50_f22c128b_orig" target="_blank">https://img-fotki.yandex.ru/get/42991/198571148.354/0_185f50_f22c128b_orig</a><br /> Широкая<br /> //img1.liveinternet.ru/images/attach/c/0/118/811/118811545_i19948.jpg<br /> Код цвета текста<br /> eeeeee</div>