Делаем рамочку с картинками

Вторник, 10 Мая 2011 г. 01:30 + в цитатник

ИЗГОТОВЛЕНИЕ РАМОЧКИ.
УРОК №8

Ну что ...давно вы не читали моих уроков и не учились новому...То что вы проделываете со своими рамками -похвально...Вижу что я вас многих чему то научила...Умнички..У некоторых даже свой стиль "образовался" И это похвально....потому что узнаваемо))))А сегодня мы поговорим еще о рамочках...Я уже насмотрелась на мигание ...мерцание....блескучести и тому подобное и вот решила вас немного в другое русло "повернуть"..А вдруг вам спокойствие и классика понравится больше чем авангард и анархизм))))Для начала скажу....что при этих формулах не надо искать и подбирать такие разные и многообразные фоны , а надо всего-навсего иметь таблицу цветов под рукой....и формулу =шаблон слоя рамки (как обычно) А все остадльное это ваша фантазия...
Итак.....приступим...

Что нам необходимо..
1. Таблица цветов
вот она
http://web.njit.edu/~kevin/rgb.txt.html
кстати...больше этой таблицы и полнее просто не существует...
2. Шаблон-формула слоя

/www.fiestac.com/fondos/tira09.jpg"" target="_blank">http://www.fiestac.com/fondos/tira09.jpg") repeat scroll 0% 0% transparent; border-style: ridge; width: 90%; color: rgb(0, 51, 0); padding: 4px;">

<div style="background-color:#КОД ЦВЕТА ФОНА; border-style: ridge; color:#КОД ЦВЕТА БОРДЮРА;padding:8px;">

Что в ней такое есть?
Код цвета фона -это мы выбираем цвет каким хотим видеть фон рамки
Код цвета бордюра-это тот самый бордюрчик чья цветная полоса окаймляет нашу рамку и каждый слой...
ну и естественно шаблон текстового слоя.

/www.fiestac.com/fondos/tira09.jpg"" target="_blank">http://www.fiestac.com/fondos/tira09.jpg") repeat scroll 0% 0% transparent; border-style: ridge; width: 90%; color: rgb(0, 51, 0); padding: 4px;">

<div style="text-align: center; font: 20px Arial;font-style: italic;
color: #000000; padding:2px;">ВАШ <br>ТЕКСТ<br>КАРТИНКА<br></div>

С ним мы уже знакомы
Итак...схема работы...как обычно
1.Открываем окно с таблицей цветов..
2.открываем окно с "записать мысль"
3.Копируем шаблон-формулу нового слоя
4.Вставляем его в "записать мысль" 4 раза и в каждом слое СТАВИМ СВОИ ЦВЕТОВЫЕ ПАРАМЕТРЫ ВМЕСТО КОДА ЦВЕТА ФОНА взяв их в таблице цветов в колонке "RGB Hex"(она четвертая по счету) а вот код цвета бордюра должен быть один и тот же у всех 4-ёх слоев
5.добавляем в хвост текстовой слой-шаблон
и вот что получаем (я взяла синюю палитру цветов Они удобны тем что палитра одного цвета рядом так что просто выбираете близкородственные и сочетаемые цвета..)
Да..кстати...в последнем перед текстовым слоем( в 4-ом )ширину слоя поставьте 2 пикс.

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

Теперь выбираем какую нибудь картинку клип арт на прозрачном фоне
Ну например вот такую

вот её код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M">
Она несколько великовата...поэтому как я вас учила в конце кода перед угловой скобкой добавляем теги
width="100" height="80"
и получаем вот такую уже картинку

смотрите и корректируете размеры в этих подставленных тегах чтобы картинка была пропорциональной...меняете или ширину(она первая) или высоту но по чуть-чуть
И вот этот код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80">
Да..кстати..забыла сказать .ВСЕ ЧТО В КОДЕ КАРТИНКИ ЕСТЬ ЕЩЕ===стираем нафиг...нам больше ничего не нужно там может быть атрибут* border * или *alt* и цифры при них вот ЭТОГО НИЧЕГО НЕ НАДО ну или не нужно))))
Так вот...отвлеклась...этот код
берем и вставляем сразу перед словом ВАШ Вставили? Теперь ЕЩЕ РАЗ в хвост предидущему..А теперь немного доработаем...У нас перед словом ВАШ два кода одинаковых так вот в конце первого кода перед угловой скобкой ставим тег
align="left" Он будет выглядеть вот так
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80" align="left">
это значит картинка справа
а во второй код добавляем в конце
align="right"
и он будет выглядеть вот так
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80" align="right">
и вот что мы имеем

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

Нравится???Я думаю ..да..Что еще можем сделать.Ах да...Не забываем закрывашки для слоев...у нас 4 слоя плюс текст значит их в конце должно быть 5..
Ну можем еще взять просто код маленькой этой картинки и поставить сразу после слова КАРТИНКА и тега* br*и вот что мы получим
вот код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80">
и вставляем....получаем

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

а вот тут код всей этой рамочки в котором вы уже умеете разбираться))))Проверьте...сравните....и СДЕЛАЙТЕ САМИ!!!
/img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100"" target="_blank">//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"align="left" ><img data-cke-saved-src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"align="right">ВАШ <br>ТЕКСТ<br>КАРТИНКА<br><img data-cke-saved-src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"></div></div></div></div></div>" />
Вот как просто только с одной таблицой цветов и формулами шаблонами....да еще имея картинки которые можно вставлять мы сделали рамочку...Должна сказать получилось прикольно)))
Удачи....мои хорошие...Экспериментируйте!!!
Ваша Zomka

Серия сообщений "Рамочки":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
Часть 3 - Рамочка "Зимняя" от MANGIANA
Часть 4 - Рамочка от MANGIANA - "Фонари"
...
Часть 19 - Мои помощники генераторы для создания рамочек..Делюсь.
Часть 20 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 21 - Рамочка новогодняя "Танцуют празднично снежинки..."

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
Часть 3 - Обводка текста рамочкой
Часть 4 - УРОКИ ОФОРМЛЕНИЯ ПОСТОВ С ПОДЛОЖКОЙ ИЗ ФОНА
...
Часть 40 - Полоски или линии которыми можно украсить свой текст
Часть 41 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 42 - Все о бегущем тексте. Примеры и коды.

Серия сообщений "Создание рамочек":
Часть 1 - Делаем рамочку с картинками
Часть 2 - Обводка текста рамочкой
Часть 3 - УРОКИ ОФОРМЛЕНИЯ ПОСТОВ С ПОДЛОЖКОЙ ИЗ ФОНА
...
Часть 13 - Мои помощники генераторы для создания рамочек..Делюсь.
Часть 14 - ОБРАМЛЯЕМ КАРТИНКУ РАМОЧКОЙ (урок от Zomka)
Часть 15 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ

Рубрики:

Уроки
Ссылки

Метки: создание рамочек шаблоны уроки

Процитировано 83 раз
Понравилось: 26 пользователям

<a href="https://www.liveinternet.ru/users/mangiana/post165530472/">Р”РµР»Р°РµРј СЂР°РјРѕС‡РєСѓ СЃ РєР°СЂС‚РёРЅРєР°РјРё</a><br/>
	
		
			
				
					
						
							
								
									РР—Р“РћРўРћР’Р›Р•РќРР• Р РђРњРћР§РљР.
									РЈР РћРљ в„–8
									
									РќСѓ С‡С‚Рѕ ...РґР°РІРЅРѕ РІС‹ РЅРµ С‡РёС‚Р°Р»Рё РјРѕРёС… СѓСЂРѕРєРѕРІ Рё РЅРµ СѓС‡РёР»РёСЃСЊ РЅРѕРІРѕРјСѓ...РўРѕ С‡С‚Рѕ РІС‹ РїСЂРѕРґРµР»С‹РІР°РµС‚Рµ СЃРѕ СЃРІРѕРёРјРё СЂР°РјРєР°РјРё -РїРѕС…РІР°Р»СЊРЅРѕ...Р’РёР¶Сѓ С‡С‚Рѕ СЏ РІР°СЃ РјРЅРѕРіРёС… С‡РµРјСѓ С‚Рѕ РЅР°СѓС‡РёР»Р°...РЈРјРЅРёС‡РєРё..РЈ РЅРµРєРѕС‚РѕСЂС‹С… РґР°Р¶Рµ СЃРІРѕР№ СЃС‚РёР»СЊ &quot;РѕР±СЂР°Р·РѕРІР°Р»СЃСЏ&quot; Р СЌС‚Рѕ РїРѕС…РІР°Р»СЊРЅРѕ....РїРѕС‚РѕРјСѓ С‡С‚Рѕ СѓР·РЅР°РІР°РµРјРѕ))))Рђ СЃРµРіРѕРґРЅСЏ РјС‹ РїРѕРіРѕРІРѕСЂРёРј РµС‰Рµ Рѕ СЂР°РјРѕС‡РєР°С…...РЇ СѓР¶Рµ РЅР°СЃРјРѕС‚СЂРµР»Р°СЃСЊ РЅР° РјРёРіР°РЅРёРµ ...РјРµСЂС†Р°РЅРёРµ....Р±Р»РµСЃРєСѓС‡РµСЃС‚Рё Рё С‚РѕРјСѓ РїРѕРґРѕР±РЅРѕРµ Рё РІРѕС‚ СЂРµС€РёР»Р° РІР°СЃ РЅРµРјРЅРѕРіРѕ РІ РґСЂСѓРіРѕРµ СЂСѓСЃР»Рѕ &quot;РїРѕРІРµСЂРЅСѓС‚СЊ&quot;..Рђ РІРґСЂСѓРі РІР°Рј СЃРїРѕРєРѕР№СЃС‚РІРёРµ Рё РєР»Р°СЃСЃРёРєР° РїРѕРЅСЂ... <a href="https://www.liveinternet.ru/users/mangiana/post165530472/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]