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

Перед вами две рамочки, выполненные по довольно простой формуле. Сейчас я попытаюсь рассказать, как каждый из вас может научиться делать такие рамочки. Желающие могу посмотреть другой пост, после прочтения которого я написала свой урок. Вот ссылка на этот пост: 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>