• Авторизация


Учимся делать рамки. 20-04-2010 13:00 к комментариям - к полной версии - понравилось!

Это цитата сообщения Rukodelkino Оригинальное сообщение

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



                        La_PerlaАвтор урока  La_Perla
Научимся делать рамочки
с использованием альтернативных кодов


Преимущества альтернативных кодов:

1 - Возможность использовать вместо однотонных фонов (background) просто коды цвета (background-color)
А это значит, что имея красивый разноцветный фон, мы сможем, используя, например ресурс1 или ресурс2 подобрать набор гармонирующих с этим фоном цветов и просто вставить коды этих цветов в формулу. В этом случае не придется в фотошопе изготавливать образцы однотонных фонов, загружать эти образцы на хостинг, чтобы потом иметь их адреса.

2 - Каждый слой рамочки может иметь свою окантовку, цвет, ширину и стиль (сплошная линия, пунктир, точечки) которой можно задавать прямо в коде по своему вкусу.
В общем, возможности для творчества - огромные. Гораздо шире, чем в обычных кодах, в которых все мы раньше работали.

3 - Рамочки, написанные с использованием альтернативных кодов "меньше весят", а значит странички с этими рамками будут быстрее открываться.

4 - Возможно сочетание традиционных кодов и альтернативных в одной рамочке.
Например, возможно задать в альтернативном коде всего один слой, например, самый внутренний. Обычно он бывает однотонным.

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


/s11.radikal.ru/i184/0908/59/6b13726c4ba0.gif""" target="_blank">http://s11.radikal.ru/i184/0908/59/6b13726c4ba0.gif""); padding: 35px;">




ВАШ ТЕКСТ!


Сам код

1н <table cellpadding="0" cellspacing="0" border="0"><tr><td>
2н <font style="display:block;border:7px dashed #00cc33;background-image:url(http://s11.radikal.ru/i184/0908/59/6b13726c4ba0.gif);padding:35px">
3н <font style="display:block;border:4px dotted #ffcccc;background-color:#000000; padding:22px">
4н <font style="display:block;border:10px groove #CC6600;background-color:#00cc33;padding:22px">
5н <font style="display:block;border:7px solid #ffff66;background-color:#92278f">
6н <table cellspacing="0" cellpadding="0" border="0"><tr><td align="center" width="200" height="100">
7н <font face="Georgia" color="#FFFFFF" style="font-size:16px"><i><b>

ВАШ ТЕКСТ!

7к </b></i></font>6к</td></tr></table> 5к </font> 4к </font> 3к </font> 2к </font> 1к </td></tr></table>


Пояснения:
 
Стиль окантовки задается параметрами:
dashed- пунктир
dotted - точечки
solid - сплошная окантовка
groove - фигурная выпуклая окантовочка.

background-color:хххххх - цвет слоя рамочки, задается шестизначным кодом
background-image:url(Адрес фона); задается слой рамочки с разноцветным фоном
padding:22px - ширина слоя рамочки в пикселях

атрибуты, задающие размер, цвет, и стиль шрифта текста внутри рамки.

Итак, с использованием этого шаблона, выбирая нужные строчки и задавая свои параметры и нанизывая их один на другой можно формировать любые рамочки в зависимости от своей фантазии.
Важно - не забывать о закрывающих тегах.
Если мы какой-то слой открыли, то обязательно должны его закрыть , написав в конце </font>
И еще - для удобства понимания кода атрибуты, описывающие каждый новый слой, я записавала с новой строки,
Вы же, написав код своей рамки, должны будете написать его сплошным массивом, убрав возврат каретки между строчками - слоями. Иначе рамочка вытянется по вертикали
(Это не касается внутреннего содержимого рамки)

Ну вот, пожалуй и все [показать]
Удачи в творчестве.
С уважением La_Perla (Маргарита).
Блог La_Perla
 
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Учимся делать рамки. | NATASHIO - Дневник NATASHIO | Лента друзей NATASHIO / Полная версия Добавить в друзья Страницы: раньше»