Дорогие друзья, как я  обещала пишу урок по составлению формулы рамочек, не фотошопных разрезных, а рамочек по формулам.

Много просмотрела в инете материала и нашла кое-что

А)  Формулы состоят из слоёв.

Б)  Нашла как их правильно соединять в формулу.

В)  Пока делала сама и вам расскажу о формуле с начальным тегом  <div>  и закрывающим тегом  </div >

      Итак:

Р 

Рабочие формулы в окошке

1.слой - <div style="background: url(<a data-cke-saved-href="http://" href="http://" target="_blank">http://</a>....); border-style: ridge; color:#8B1A1A;padding:8px;">, 2. слой с текстом<div style="text-align: center; font: 20px Arial;font-style: italic; color: #000000; padding:2px;">ВАШ <br>ТЕКСТ<br>КАРТИНКА<br></div> , 3.- код вставки картинки - <img data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА">

А ТЕПЕРЬ НАЧИНАЕМ ТВОРИТЬ.

   Например, сделаем рамочку из 3-х слоев с картинкой и текстом Первые два слоя будут бордюры, третий слой – фон под картинку  и текст.

Шаг %1.  Копируем слой рамки и вставляем к редактор 3 раза (так мы эту рамку делаем), вставлять слой за слоев впритык, не с новой строки каждый сдой,

Шаг №2  Туда же добавляем слой для картинки и текста.   Здесь такие тонкости:

а) удаляем слова «ваш текст» и пишем формулу   <center><pre></pre></center>  и между   preвставляем стих, если это просто текст, то  preне нужен. Если текста на фоне не будет видно, вам надо поменять цвет  (color), вставляем новый цвет во всех слоях, я не знаю почему во всех, но только тогда срабатывает

б)  стираем слово «картинка» и вставляем формулу для вставки изображения

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

   Заполняем формулу:

В слоях вставляем фоны (между ковычками, ковычски не удалять, я беру ссылку на картинку так: правой на картинку и там «копировать адрес изображения» не ссылку, а адрес

   Если у на 3 слоя до картинки, то третий слой будет под картинку и текст

     Вставляем картинку и текст.

Теперь делаем ширину бордюров, padding   нужно изменять от 15 до 50, редактируйте в черновике, пока будет то, что вы хотите.

    Следующий пост будет на более сложную рамочку. 

БУДЕТ ТАКАЯ РАМКА

Рукоделие - это наша профессия!
http://www.rukodelie.by/01/http://www.rukodelie.by/01/

Много вязаных вещей и схем
http://mirpiar.com/forum/3-7-13

Видео уроки, полезные советы и самоучители на все случаи жизни, показывающие и рассказывающие что и как сделать.
http://skillopedia.ru/

Пошаговые инструкции, как сделать всё что угодно!
http://akak.ru/recipes/cat/258-zdorove
 

тыц

Работаем в Pixlr Editor.

Для начала работы перейдите по ссылке и откройте редактор   Первое, что мы видим, это меню, которое предлагает нам выбрать изображение для обработки. Далее     ФОТОШОП

Фильтры для фотошопа.

Мне нрапвится работать с этими фильтрами, легко доступно и понятно, не требуется много усилий и знаний фотошопа.

Photoshop Filter – AAA Filter – Transparent – Frame & Vignette

Примеры того, что этот фильтр делает - Прозрачный кадр

Нажмите ссылку, чтобы скачать этот фильтр. AAA Filter - Прозрачная - Рама и виньетка

Изображение              Изображение с рамкой.

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Думаю, многие вебмастера, да и не толко они, ищут простой в обращении и одновременно достаточно функциональный графический редактор для своих нужд. Конечно, современных программ такого рода немало, взять хотя бы знаменитый Фотошоп. Однако, дисктопная версия требует установки на компьютер, изучение функционала программы требует времени, которого катастрофически не хватает.

К тому же во многих случаях весь спектр опций, который предлагает тот же Adobe Photoshop, не всегда нужен и зачастую лишь распыляет внимание. Здесь и приходит на помощь сервис Pixlr, который имеет множество онлайн инструментов, среди которых выделяется Pixlr Editor. Безусловно, среди всех возможностей нельзя не упомянуть и такие популярные средства как Pixlr Express (упрощенная версия фоторедактора) и совсем простая версия редактора O-Matic для наложения эффектов на фото и картинки в 2-3 клика.

Конечно, Экспресс и О-матик предназначены в силу своей незамысловатости прежде всего владельцам мобильных устройств, однако существуют и онлайн варианты. Следует отдать должное грамотной работе разработчиков этого чуда современных приложений, которые позаботились о всех группах пользователей. Кстати, вы, наверное, не раз пробовали вбить в поиск что-то наподобие «онлайн Фотошоп» и удивлялись, что один и тот же инструмент Pixlr Editor, функционал которого действительно напоминает набор опций этого популярного фоторедактора, доступен сразу по нескольким URL, причем все сайты находятся в ТОП?

Это просто предприимчивые ребята с помощью тега Iframe вставляют страницу с Пикслр к себе на сайт и не удосуживаются ничего добавлять в виде полезного контента окромя тизерной рекламы, которая приносит неплохую денежку. А почему такие, с позволения сказать, ГС, занимают ведущие позиции, спросите вы? Да за счет превосходных поведенческих факторов (здесь о ранжировании сайтов по поведению пользователей), как я полагаю. Ведь посетители попали на этот ресурс по абсолютно конкретному запросу и, получив, то, что нужно, а именно редактор фотографий, естественно, не покинут его сразу.

Pixlr Editor - описание возможностей русской версии онлайн фотошопа

Думаю, я освещу в отдельных публикациях поподробнее некоторые инструменты Пикслр вроде выше упомянутых мною Express и O-Matic, поскольку это займет немало места, а статья и так обещает быть довольно объемной. Теперь же разберем основные возможности онлайн фоторедактора Pixlr Editor, который наиболее подходит вебмастерам, тем более он уже переведен на несколько языков, в том числе на русский. Итак, переходим на русскоязычную страницу Pixlr Editor, где сразу перед нами появляется такое окно:

Здесь информация о возможности загрузки фотографии сразу несколькими способами:

Из блога  Алевтина

Сегодня я покажу, как можно сделать рамку с фоном верхний бордюр, такую, как эта моя рамка. Если Вы только пытаетесь делать рамки, то начните с более простых рамок. Сделайте сначала рамку в два, три, четыре слоя. Для этого кликните на ссылки: Рамка в два слоя, для текста в блоге. Рамка в три слоя, для текста в блоге. Рамка в четыре слоя, для текста в блоге. Рамка для текста с картинкой. КОД для изготовления рамки: <div align="center"><table border="1" background="АДРЕС ФОНА 1 " cellpadding="7" cellspacing="0"><tr><td width="700"><table border="1" background="АДРЕС ФОНА 2 " cellpadding="3" cellspacing="0"><tr><td width="700"><table border="0" background="АДРЕС ФОНА С БОРДЮРОМ" cellpadding="0" cellspacing="0"><tr><td width="700" height="ВЫСОТА БОРДЮРА"></td></tr></table><table border="1" background="АДРЕС ФОНА 1 - КОНТУР ФОНА ДЛЯ ТЕКСТА" cellpadding="7" cellspacing="0"><tr><td><table border="1" background="АДРЕС ФОНА ДЛЯ ТЕКСТА" cellpadding="2" cellspacing="5"><tr><td width="700"><center><font size="3" color="#000000" face="Arial"><br>ТЕКСТ</font> <br></center><br></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div> Формула состоит из тегов. Рассмотрим, что обозначают основные теги. 1. <center></center> - Этим тегом мы выравниваем рамку или текст (картинку) в рамке по центру. Если, после применения этого тега рамка не встала по центру, то я ставлю такие теги в самом начале кода рамки:<div align="center"> 2. < table border ="1" - Число 1 это толщина обводки рамки. 3. background ="АДРЕС ФОНА" - На место "Адрес фона" вписываем ссылку на фон. Фон заносим через Фоторадикал: http://www.radikal.ru/ Из предложенных в фоторадикале ссылок, для фона возьмите ссылку № 1. Совет: Не увлекайтесь яркими, тяжелыми фонами, в этом случае Ваш блог будет сложно открыть. 4. cellpadding = "7" и cellpadding = "0" - Ширина слоёв рамки в пикселях. Можно изменить. 5. < font color="000000" > - Цвет текста в рамке, цвет текста можно изменить. 6. < tr > - этот тег поддерживает высоту рамки 7. < td > - этот тег поддерживает ширину рамки 8. <td width="700"> - цифра 700 это ширина фона рамки, её можно менять. 9. "Высота бордюра" - это высота верхнего рисунка. Ставим на глаз и меняйте цифры. Например, поставили 100 и посмотрите. Не подходит - пишите другую цифру. Фоны и верхние бордюры можно взять здесь на данном сайте. Примеры верхнего бордюра: Кликните по картинке и она откроется в полный размер. Желаю успехов! рамка от Алевтины

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

Часть 1 - Как оформлять текстовые кнопки?
Часть 2 - ВСЕ о тегах и оформлении постов
...
Часть 20 - Шаблон рамки
Часть 21 - Теги... для изготовления рамки
Часть 22 - Рамка с фоном верхний бордюр...
Часть 23 - Как загрузить флешку с компьютера в дневник
Часть 24 - Цветочный шлейф за курсором
...
Часть 43 - Набор цветных окошек для кодов
Часть 44 - Как узнать цветовой HTML код
Часть 45 - Делаем кликабельную ссылку с помощью панели спецкода.