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

Пятница, 06 Мая 2016 г. 22:09 + в цитатник

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

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

Учимся делать рамки. Урок 3 "Рамка с картинкой сверху"

Рамка с картинкой сверху

ЗАГОЛОВОК

ТЕКСТ

Bloginja

В предыдущих уроках для создание рамки мы использовали тег table и его стилевые значения. Но здесь мы его заменим. Вместо table будем использовать элемент div.

Открываем простой редактор и начинаем писать:

<div style= >
открываем кавычки
<div style=" > и начинаем вписывать атрибуты стиля.

Нам нужен фон (background-color ), его размер (width), отступ ( padding) от предыдущего фона или текста... Вставляем и закрываем кавычки.
<div style=" background-color:#FF3016; width:400px; padding: 6px;">

Один слой фона у нас готов. Его можно использовать как фон для постов.
Осталось поставить закрывающий тег </div>.
Получим код слоя:
1 часть <div style=" background-color:#FF3016; width:400px; padding: 6px;" >
СОДЕРЖАНИЕ
2 часть </div>

СОДЕРЖАНИЕ

Теперь можно повторить каждую часть кода, изменяя цвет фона и отступ, и получить рамку в несколько слоёв.
Важно! Ширину в последующих частях кода лучше удалить, оставив только в первом!
Лучше - не значит обязательно. В этих рамках можно проявить разные фантазии.

<div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;">
СОДЕРЖАНИЕ
</div> </div> </div>

СОДЕРЖАНИЕ

Теперь мы будем ставить картинку сверху этой рамки слева или справа

Код этой картинки такой

Мы будем ставить её по правому краю, вставив в код атрибут выравнивания align="right"

Поставим этот код перед началом кода рамки

<img src="//img0.liveinternet.ru/images/attach/d/4/159/869/159869352_159367824_4_400h169.png" width="400" height="169" align="right" /><br /> <div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;"><br /> СОДЕРЖАНИЕ<br /> </div> </div> </div>

Чтобы картинка не уходила в сторону , нужно вставить наш готовый код в рамку без фона и поставить её по центру, т.е. пишем в самое начало кода
<div align="center">
<table border="0"><tbody><tr><td style="padding: 0px;" width="400">
и в самый конец пишем закрывающие теги
</td></tr></tbody></table> </div>

Код нашей рамки будет выглядеть так:

<div align="center"><br /> <table border="0"><tbody><tr><td style="padding: 0px;" width="400"><br /> <img src="//img0.liveinternet.ru/images/attach/d/4/159/869/159869352_159367824_4_400h169.png" width="400" height="169" align="right" /><br /> <div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;"><br /> СОДЕРЖАНИЕ<br /> </div> </div> </div><br /> </td></tr></tbody></table> </div>

Если картинка становится слишком низко, поднять её можно тегом <br> (переход на другую строку), установив его после кода картинки. Я поставила три тега.

Ещё`нужно установить атрибуты текста
<center><font size="3" color="8b4513" face="verdana">ТЕКСТ</font></center>
center - по центру
size - размер шрифта
color - цвет шрифта
face - гарнитура шрифта

Все, рамка готова. Её код

А так она будет выглядеть

ТЕКСТ

Урок 1
Урок 2
Урок 3

bloginja

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

Часть 1 - Плейкаст "Два голубя"
Часть 2 - Душевная музыка. Светлана Копылова.
...
Часть 7 - Учимся делать рамки
Часть 8 - Учимся делать рамки. Урок 2.
Часть 9 - Учимся делать рамки. Урок 3 "Рамка с картинкой сверху"
Часть 10 - Анимашки
Часть 11 - Рамка "Светлой пасхи"
...
Часть 20 - Рамка для вашего поста
Часть 21 - Вставить чужую рамку себе в пост
Часть 22 - Календарь на любой год

Серия сообщений "Памятка для Лиру":

Часть 1 - Как узнать цветовой HTML код
Часть 2 - Бегущая строка из картинок или текста
...
Часть 9 - Учимся делать рамки
Часть 10 - Учимся делать рамки. Урок 2.
Часть 11 - Учимся делать рамки. Урок 3 "Рамка с картинкой сверху"
Часть 12 - Читать закрытые записи
Часть 13 - Скачать видео с Лиру.
...
Часть 15 - Плееры для Лиру
Часть 16 - Развернуть картинку прямо на странице поста
Часть 17 - Вставить чужую рамку себе в пост

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

Часть 1 - Как узнать цветовой HTML код
Часть 2 - Бегущая строка из картинок или текста
...
Часть 10 - Где найти ссылки МР3 (2)
Часть 11 - Учимся делать рамки. Урок 2.
Часть 12 - Учимся делать рамки. Урок 3 "Рамка с картинкой сверху"
Часть 13 - Скачать видео с Лиру.
Часть 14 - Вставляем музыкальный плеер (и не только) в определённое место
...
Часть 17 - Урок по созданию музыкальной открытки
Часть 18 - Развернуть картинку прямо на странице поста
Часть 19 - Вставить чужую рамку себе в пост

Рубрики:

*ВСЁ ДЛЯ ДНЕВНИКА/рамки,шаблоны

Метки: делаем рамку

<a href="https://www.liveinternet.ru/users/tapioka/post390282479/">РЈС‡РёРјСЃСЏ РґРµР»Р°С‚СЊ СЂР°РјРєРё. РЈСЂРѕРє 3 </a><br/>РЈС‡РёРјСЃСЏ РґРµР»Р°С‚СЊ СЂР°РјРєРё. РЈСЂРѕРє 3 "Р Р°РјРєР° СЃ РєР°СЂС‚РёРЅРєРѕР№ СЃРІРµСЂС…Сѓ"

Р Р°РјРєР° СЃ РєР°СЂС‚РёРЅРєРѕР№ СЃРІРµСЂС…Сѓ

Р—РђР“РћР›РћР’РћРљ  
РўР•РљРЎРўBloginja

Р’ РїСЂРµРґС‹РґСѓС‰РёС… СѓСЂРѕРєР°С… РґР»СЏ СЃРѕР·РґР°РЅРёРµ СЂР°РјРєРё РјС‹ РёСЃРїРѕР»СЊР·РѕРІР°Р»Рё С‚РµРі table Рё РµРіРѕ СЃС‚РёР»РµРІС‹Рµ Р·РЅР°С‡РµРЅРёСЏ. РќРѕ Р·РґРµСЃСЊ РјС‹ РµРіРѕ Р·Р°РјРµРЅРёРј. Р’РјРµСЃС‚Рѕ table Р±СѓРґРµРј РёСЃРїРѕР»СЊР·РѕРІР°С‚СЊ СЌР»РµРјРµРЅС‚ div.

РћС‚РєСЂС‹РІР°РµРј РїСЂРѕСЃС‚РѕР№ СЂРµРґР°РєС‚РѕСЂ Рё РЅР°С‡РёРЅР°РµРј РїРёСЃР°С‚СЊ:  
 
 &lt;div style=   &gt;
РѕС‚РєСЂС‹РІР°РµРј РєР°РІС‹С‡РєРё 
&lt;div style=&quot;   &gt; Рё РЅР°С‡РёРЅР°РµРј РІРїРёСЃС‹РІР°С‚СЊ Р°С‚СЂРёР±СѓС‚С‹ СЃС‚РёР»СЏ.

РќР°Рј РЅСѓР¶РµРЅ С„РѕРЅ (background-color ), РµРіРѕ СЂР°Р·РјРµСЂ (width), РѕС‚СЃС‚СѓРї ( padding) РѕС‚ РїСЂРµРґС‹РґСѓС‰РµРіРѕ С„РѕРЅР° РёР»Рё С‚РµРєСЃС‚Р°...  Р’СЃС‚Р°РІР»СЏРµРј Рё Р·Р°РєСЂС‹РІР°РµРј РєР°РІС‹С‡РєРё. 
&lt;di... <a href="https://www.liveinternet.ru/users/tapioka/post390282479/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Ссылки

-Видео

-Музыка

-Я - фотограф

-Подписка по e-mail

-Поиск по дневнику

-Фотоальбом

-Приложения

-Резюме

Савченко Татьяна

-Новости

-Друзья

-Постоянные читатели

-Сообщества

-Трансляции

-Статистика

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