Советы по созданию собственных рамочек.

Видя красивые рамочки, вы тоже захотели научиться делать их самостоятельно, но не знаете с чего начать. Поверьте мне на слово, что научиться этому может каждый. Когда-то у Ларисы Гурьяновой мне попалась формула, приведенная ниже, и большую часть своих рамочек я делаю по ней. О том, что собой представляет эта формула, вы можете прочитать, открыв пост https://www.liveinternet.ru/users/tomishka/post428985241/, я же хожу рассказать с чего начать и какие подводные камни вы можете встретить на своем пути.

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

<div align="center"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС БЛЕСТЯЩЕГО ФОНА" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ШИРОКОГО ФОНА" cellpadding="45" cellspacing="0"><tr><td style="padding: 45px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС БЛЕСТЯЩЕГО ФОНА" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ОСНОВНОГО ФОНА" cellpadding="15" cellspacing="0"><tr><td style="padding: 15px;"><center><img src="АДРЕС КАРТИНКИ" width="500" /><br /><img src="АДРЕС РАЗДЕЛИТЕЛЯ" border="0" /><br /><center><font size="5" color="#000000" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img src="АДРЕС РАЗДЕЛИТЕЛЯ" border="0" /><br /></font></center><div align="center"> <a target="_blank" href="АДРЕС БЛОГА"><font size="1" color="#000000" face="Monotype Corsiva">ИМЯ БЛОГА</font></a></div></center></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div><br />
Вам попалась красивая картинка и вы захотели сделать с ней рамочку, а внутри поместить какой-то текст. Самый простой вариант это картинка, расположенная на подходящем для картинки фоне, с вашей подписью. Прежде всего в коде для рамочки замените АДРЕС БЛОГА на свой собственный и ИМЯ БЛОГА на своё и полученный код сохраните там, откуда вы всегда сможете его взять. Замену проведите очень аккуратно, не затронув кавычки и не допустив пробелов ни в начале, ни в конце. Теперь адрес картинки и адрес подобранного основного фона занесите в код рамочки.




<div align="center"><table border="0" background="//img1.liveinternet.ru/images/attach/d/1/135/223/135223423_936848.jpg" cellpadding="15" cellspacing="0"><tr><td style="padding: 15px;"><center><img src="https://img1.liveinternet.ru/images/attach/d/0/142/203/142203693_les.jpg" width="500" /><br /><br /><center><font size="5" color="#fafec8" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><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></center></td></tr></table></div><br />

Перед вами рамочка этого простейшего варианта. Все лишнее из кода рамочки надо убрать. Рамочка восьмислойная, а мы использовали только один ( ОСНОВНОЙ ), значит информацию для семи неиспользованных слоев надо аккуратно выделить и удалить. Мы не стали использовать разделители, значит и эту информацию надо удалить, а вот закрывающие теги будут удалены автоматически, если мы сами этого не сделаем. Какие неприятности нас могут ожидать на этом этапе? Код основного фона, вроде, занесли, нажали СОХРАНИТЬ ИЗМЕНЕНИЯ, но фон отсутствует. Почему? Причин может быть несколько:
1. На место адреса фона занесли адрес своего дневника ( со мной такое и сейчас иногда случается).
2.Адрес фона занесен верный, но в конце есть пробелы.
3.Занесенный адрес фона содержит пробел впереди.
Первые две ошибки легко обнаружить и исправить, перейдя в режим РЕДАКТИРОВАНИЯ, а вот третий вариант, если не знать, что произошло, исправить труднее. Чтобы вам было понятнее, что произойдет, если вы не заметили пробел предшествующий адресу фона, я ниже привела коды до замены и после замены.


<table border="0" background="АДРЕС ФОНА" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"></td></tr></table>


<table border="0" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"></td></tr></table>
Однослойную рамочку вы делать научились и вам захотелось сделать рамочку из двух слоев и для украшения добавить парочку разделителей. Можно ширину основного фона уменьшить до нуля, но увеличить размер картинки, при этом рамочка будет выглядеть иначе. Ниже приведен вариант такой рамочки. Как и в первом случае, всё лишнее из кода рамочки удалено, а код стоит под рамочкой.




<div align="center"><table border="0" background="https://img-fotki.yandex.ru/get/194550/50114850.7e7/0_11e176_bae1480_S.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img-fotki.yandex.ru/get/46310/50114850.7e1/0_11de4d_f0a35e62_orig.jpg" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><center><img src="//img0.liveinternet.ru/images/attach/d/0/142/206/142206936_blond2.jpg" width="650" /><br /><img src="https://img-fotki.yandex.ru/get/6506/39663434.1a7/0_78557_57bffb14_L.jpg" width="250" /><br /><br /><center> <font size="5" color="#000000" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img src="https://img-fotki.yandex.ru/get/6506/39663434.1a7/0_78557_57bffb14_L.jpg" width="250" /><br /></font></center><div align="center"><a target="_blank" href="//www.liveinternet.ru/users/tomishka/"><font size="1" color="#000000" face="Monotype Corsiva">tomishka</font></a></div></center></td></tr></table></td></tr></table></div><br />



<div align="center"><table border="0" background="https://img-fotki.yandex.ru/get/9118/221631715.1c/0_fe2e2_79008ceb_orig.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img-fotki.yandex.ru/get/6112/39663434.139/0_744f4_43cc05e4_M.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img-fotki.yandex.ru/get/9118/221631715.1c/0_fe2e2_79008ceb_orig.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img-fotki.yandex.ru/get/4421/104967700.68/0_76c94_a3307914_XS.jpg" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><table border="0" background="http://fony-kartinki.ru/_ph/46/2/309457941.png" cellpadding="45" cellspacing="0"><tr><td style="padding: 45px;"><table border="0" background="https://img-fotki.yandex.ru/get/9118/221631715.1c/0_fe2e2_79008ceb_orig.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img-fotki.yandex.ru/get/6112/39663434.139/0_744f4_43cc05e4_M.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img-fotki.yandex.ru/get/9118/221631715.1c/0_fe2e2_79008ceb_orig.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img-fotki.yandex.ru/get/4421/104967700.68/0_76c94_a3307914_XS.jpg" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><center><img src="//img0.liveinternet.ru/images/attach/d/0/142/208/142208060_blon3.jpg" width="550" /><br /><img src="https://img-fotki.yandex.ru/get/5601/redakciya-dream-news.3/0_52578_daa58146_XL.jpg" width="350" /> <br /> <br /><center> <font size="5" color="#fafec8" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img src="https://img-fotki.yandex.ru/get/5601/redakciya-dream-news.3/0_52578_daa58146_XL.jpg" width="350" /><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></center></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div><br />
Перед вами рамочка, в которой фон для широкой полосы прозрачный. Если ничего в коде рамочки не менять, то этот фон будет наложен на фон обводки, что не всегда смотрится красиво. Исправить положение можно, если добавить лишний слой с фоном, совпадающим с основным фоном рамочки. Для этого копируем всё, относящееся к основному фону, и вставляем перед широким фоном. Закрывающие теги в коде рамочки не ставим, они будут добавлены автоматически.




cellspacing="0"><table border="0" background="https://img0.liveinternet.ru/images/attach/c/11/117/609/117609888_fonn_fanina_romashishki.jpg" cellpadding="45" cellspacing="0"><tr><td style="padding: 45px;"><table border="0" background="https://img-fotki.yandex.ru/get/194588/50114850.7e7/0_11e15e_68df3ef2_S.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img-fotki.yandex.ru/get/6112/39663434.139/0_744f4_43cc05e4_M.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img-fotki.yandex.ru/get/194588/50114850.7e7/0_11e15e_68df3ef2_S.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img-fotki.yandex.ru/get/40777/198571148.353/0_185f32_f75b430d_orig" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><center><p><img src="//img0.liveinternet.ru/images/attach/d/0/142/207/142207614_blond1.jpg" width="550" height="412" align="absmiddle" style="border: 4px solid #ffdead" /></p><br /><img src="https://img-fotki.yandex.ru/get/5002/39663434.5a8/0_99134_aba51044_M.png" border="0" /><br /><br /><center> <font size="5" color="#664400" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img src="https://img-fotki.yandex.ru/get/5002/39663434.5a8/0_99134_aba51044_M.png" border="0" /><br /></font></center><div align="center"><a target="_blank" href="//www.liveinternet.ru/users/tomishka/"><font size="1" color="#664400" face="Monotype Corsiva">tomishka</font></a></div></center></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br />
Ещё одна рамочка, отличие которой от других состоит в том, что вокруг картинки есть обводка. Сделать это легко, если заменить

<img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" /> на

<p><img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ" align="absmiddle" style="border: 4px solid #КОД ЦВЕТА ОБВОДКИ" /></p>
Исходный размер картинки 590*442, для рамочки мы хотим взять картинку шириной 550 px, значит надо пересчитать высоту. Из пропорции находим высоту Х=(550*442)/590=412. А вот цвет для обводки придется подобрать. Желаю всем удачи в создании своих собственных рамочек. Вопросы можно задать в комментариях.