Делаем рамочку не покидая блог

Четверг, 13 Июня 2013 г. 17:30 + в цитатник

Цитата сообщения Irina_Gizhdeu

Прочитать целиком В свой цитатник или сообщество!

Делаем рамочку не покидая блог

1.

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

Это пример того,что у нас с вами должно получиться в конечном итоге.

Скажи, откуда у тебя
Фантазия такая -
Как будто я люблю тебя
И по тебе страдаю.

Во-первых, милая моя,
Страданий я не знаю,
А, во-вторых, быть может, я
Не по тебе страдаю.

А то, что под твоим окном
Стою я каждый вечер,
Отнюдь не говорит о том,
Что я желаю встречи.

Во-первых, если я там был,
То как простой прохожий,
А, во-вторых, не я там был,
А на меня похожий.

Так вот что, милая моя,
Ты не играй на нервах,
Во-первых, я люблю тебя,
А, во-вторых - во-первых.

РАМОЧКА-РЕЗУЛЬТАТ УРОКА

====================
2.

Давайте рассмотрим подробнее,что нам необходимо сделать,чтобы получить такую рамочку:

1.ПОДГОТОВИТЬ НЕОБХОДИМЫЕ ФОНЫ.
2.ВЫБРАТЬ ПРАВИЛЬНЫЙ КОД ФОНОВ ДЛЯ ВСТАВКИ В КОД-ШАБЛОН РАМОЧКИ.

Вот фоны и коды к ним,которыя я использовала для этого урока:

Ссылка на основной-нижний фон (в коде-шаблоне обозначается,как фон №1) рамочки (Радикал,строчка №1).

Ссылка на второй фон (в коде-шаблоне обозначается,
как фон №2) рамочки (Радикал,строчка №1).

Ссылка на фон (в коде-шаблоне обозначается,как фон №3) записи
(Радикал,строчка №1).

картинка в текст (Радикал,строчка №6).

линеечка-разделитель для текста (Радикал,строчка №6)

Волшебный КОД-ШАБЛОН,для создания рамочки:

****************
<table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №1"><tr valign="top"><td width="100%"><table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №2"><tr valign="top"><td width="100%"><table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №3"> <tr valign="top"> <td width="100%"><center><font face="Times New Roman"><font color="EEDD82"><font size="4">ВАША КАРТИНКА;ВАШ ТЕКСТ </font></font></font>ВАША ПОДПИСЬ</center></td></tr></table></td></tr></table></td></tr></table>
****************

НАШИ ДАЛЬНЕЙШИЕ ДЕЙСТВИЯ:
Копируем (из белого окошка)КОД-ШАБЛОН и вставляем его в текстовое поле вашей новой записи,в формате HTML.
Вот,что у нас получится:

******************
<table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №1"><tr valign="top"><td width="100%"><table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №2"><tr valign="top"><td width="100%"><table width="100%" border="0" cellspacing="1" cellpadding="1" background="ФОН №3"> <tr valign="top"> <td width="100%"><center><font face="Times New Roman"><font color="EEDD82"><font size="4">ВАША КАРТИНКА;ВАШ ТЕКСТ </font></font></font>ВАША ПОДПИСЬ</center></td></tr></table></td></tr></table></td></tr></table>
****************************

Сейчас рассмотрим основные параметры тэгов,составляющие КОД-ШАБЛОН рамочки,их значения и названия,без которых невозможно сделать рамку:
1.table width="100%"-этот тэг обозначает ШИРИНУ всей нашей рамочки.В КОДЕ-ШАБЛОНЕ стоит ширина 100%.Значение ширины можно менять на ваше усмотрение.
Вот так выглядет рамочка после добавления фонов и без наших изменений:

ВАША КАРТИНКА;ВАШ ТЕКСТ ВАША ПОДПИСЬ

2. border="0"-этот тэг определяет ТОЛЩИНУ границ каждого слоя рамки (КРАЙ ФОНА).В КОДЕ-ШАБЛОНЕ стоит цифра"0"(см.в коде).Этот тег можно менять на любую цифру по вашему желанию.Например я поменяла в фоне №1 border="0" на border="5" ,в фоне №2 border="0" на border="2" ,в фоне №3 border="0"на border="2"
и вот что у меня получилось:

ВАША КАРТИНКА;ВАШ ТЕКСТ

ВАША ПОДПИСЬ

Видите,как изменилась рамка!В первом слое край стал намного шире,чем во втором и в третьем.

3.cellspacing-увеличивает ШИРИНУ фонового слоя,
а cellpadding -расстояние между фонами рамки.
В КОДЕ-ШАБЛОНЕ-параметры выглядят так:
cellspacing="1", cellpadding="1".
Давайте посмотрим,что будет если я их поменяю:
в фоне №1:cellspacing="1" на cellspacing="20",
cellpadding"1" на cellpadding"2",
в фоне №2:cellspacing="1"-оставлю без изменений,cellpadding"1" на cellpadding"5",
в фоне №3:cellspacing="1" на cellspacing="3",
cellpadding"1"-оставлю без изменений.
Вот что получится:

*****************************************

ВАША КАРТИНКА;
ВАШ ТЕКСТ

ВАША ПОДПИСЬ

Видите разницу? Рамка стала выглядеть совсем по другому !
Далее,чтобы в рамочке всё встало на свои места,делаем отступ вниз после слов ВАША КАРТИНКА;и после слов ВАШ ТЕКСТ.
Вот,что у нас получится:

ВАША КАРТИНКА;

ВАШ ТЕКСТ

ВАША ПОДПИСЬ

********************

Остаётся добавить картинку и текст,результат вы видели.

--------------------------ПОСЛЕДНЕЕ:

font color="EEDD822"- ЭТО ЦВЕТ ТЕКСТА.
Имеет цифровое значения "EEDD822".
Можно менять.

font size="4"-ЭТО РАЗМЕР ТЕКСТА.Можно менять значения,
увеличивать или уменьшать текст.

font face="Times New Roman"- ЭТО название ШРИФТА ТЕКСТА.
Можно менять названия.
Вот и всё ! Желаю всем удачи !

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

Часть 1 - Учимся сами делать свои рамочки.
Часть 2 - 1.Рамка в ОДИН слой.
...
Часть 13 - 12.Делаем простую Рамку с выплывающим текстом.
Часть 14 - 13.Рамка в 5-слоёв фона
Часть 15 - Делаем рамочку не покидая блог
Часть 16 - образец от И.О