Урок от Zomka. ПОЛЕЗНЫЕ ТЕГИ ПРИ ИЗГОТОВЛЕНИИ РАМОЧЕК

Воскресенье, 20 Ноября 2011 г. 13:56 + в цитатник

ПОЛЕЗНЫЕ ТЕГИ ПРИ ИЗГОТОВЛЕНИИ РАМОЧЕК

Ну что ,мои хорошие...продолжим))) Вы меня все порадовали...у ВСЕХ ВСЕ ПОЛУЧИЛОСЬ..вот теперь мы с вами умеем делать пускай пока простую...(но это дело времени!! ) но зато СВОЮ...СОБСТВЕННУЮ...рамочку для всякой всячины))) Что мы умеем... составлять слои, вставлять фоны и картинки, писать текст вместе с оформленными разделителями..то есть писать и вставлять все что пожелаем. Сегодня мы с вами поговорим вот о чем..Я научу вас как сделать ,чтобы все ваши "питомцы" (теги...переносы...картинки...текст..) четко знали свое место..Ведь как это часто бывает, а многие уже с этим я видела столкнулись, вроде пишешь у себя нормально..и картинка встала туда куда надо..и отступ на месте и устраивает..и текст по центру.....и все тип-топ..Копируем ...вставляем не у себя дома и....кошмар...Картинка уехала вбок...текст находится не там где надо...Короче ВСЕ не так как хотелось...Вот для этого есть много хитрых штучек...чтобы раз и навсегда научить все эти непослушные вещи выполнять ваши команды...Раз сказали....так оно и будет ВЕЗДЕ и ВСЕГДА..
Для начала посмотрите на (не будем брать четырехслойную...а возьмем для примера попроще...рамочку второго урока) Итак...смотрим

Счастье может быть разным и всё же Каждый верит, что счастье придёт. Часто счастье с Любовью похоже, Что заставит лететь в небосвод. Счастье может ребёнком родиться И наполнить заботами дом. Засияет улыбкой на лицах И не стоит мечтать о другом.

а вот другой вариант

Счастье может быть разным и всё же Каждый верит, что счастье придёт. Часто счастье с Любовью похоже,Что заставит лететь в небосвод. Счастье может ребёнком родиться И наполнить заботами дом.Засияет улыбкой на лицах И не стоит мечтать о другом.

Видите разницу?? Конечно видите--- в первой рамочке отступ текста от бортов рамки намного больше чем во второй...ЗАПОМИНАЕМ...за это отвечат ширина самого последнего перед текстом слоя..То есть назовем его скатертью под текст.Хотя обзывается он "подложкой" Но мне не всегда нравятся слова -термины..и я придумываю им аналоги...так..кстати запоминается намного быстрее..Вы же теперь знаете что такое "закрывашка??!!)))..Ну...отвлеклись....идем дальше...
Этот отступ у нас в первой рамке-образце 33 а во второй -всего 3..Можем вообще сделать 1-тогда слой не будет виден внешне но присутствовать все равно будет и если сразу после него добавим анимированный прозрачный с нормальной шириной ну где то под 35 пикселей то мы увидим что под анимацией просвечивает именно этот ширину которого мы сделали всего 1 пиксель...Ой что то я забежала вперед)))
Вернемся к нашим "баранам" с шириной слоя разобрались....Закрепляем...В ПОСЛЕДНЕМ СЛОЕ -СКАТЕРТИ ПОД ТЕКСТ он отвечает за расположение текста, за его отступы..
Теперь другое....КАРТИНКА..
Вы уже поняли что размеры картинок настолько разные что многие просто не помещаются даже в пост..или настолько малы что не видны когда их вставили...весь антураж портят...Учимся..
Вот код самой обычной картинки или разделителя...

<img src="http://img1.liveinternet.ru/images/attach/c/1//55/90/55090123_yjY59ujMsG.png">

Мы видим что в скобках это ссылка на это изображение .А вот чтобы изменить картинку мы можем сами кое что к ней ..то есть к коду ..добавлять...

Я беру и вставляю.перед последней угловой кавычкой тег border="3"

вот так

и что мы видим???

было так
стало так
Значит этот тег отвечат за то чтобы вокруг картинки появилась рамочка...бордер-бортик)))

теперь возьмем и в конец кода вставим тег align="left"

<img src="http://img1.liveinternet.ru/images/attach/c/1//55/90/55090123_yjY59ujMsG.png"align="left"> Вот что мы получим от этого

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

align="right"

то картинка будет справа от текста...
Так и с этим разобрались...А вот теперь самое главное.
Когда вы вставляете картинку (не маленькую) в рамочку..ОЧЕНЬ важно чтобы её положение относительно рамки НЕ МЕНЯЛОСЬ..при любых условиях..в ЛЮБЫХ браузерах...и ЛЮБЫХ клубах..где ширина поста ВЕЗДЕ разная...Даже у нас эта ширина то уже то шире...Значит надо дать команду ПРИСПОСАБЛИВАТЬСЯ к рамке и к ширине...Мы просто перед этой угловой кавычкой ставим вот такой тег

width="100%"

вот так <img src="http://img1.liveinternet.ru/images/attach/c/1//55/90/55090123_yjY59ujMsG.png" width="100%">

И получаем всегда правильную вставку..которая не заползает и не выползает из рамки
Ну и напоследок еще одна "фенечка" Самый первый слой...рамки-он как фундамент всей остальной...и задает размеры остальным слоям..По умолчанию.это 100% поэтому рамки DIV всегда заполняют все пространство поста.Но если мы изменим этот первый слой...автоматически на новом фундаменте и все слои станут подстраиваться под него..Вот код этого самаого слоя..

<div style="background: url(АДРЕС ФОНА); border-style: ridge;color:#003300;padding:3px;">

Посмотрите внимательно..видите теги разделены двоеточиями и точками с запятой ??? Вот нашли последнюю точку с запятой и двойные кавычки и между ними вставили width:50% и вот что мы получим

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

правильно..рамку вполовину меньшую .Ну а все другие слои уже идут как и раньше ..В них ничего не надо вставлять..Они будут "за вожаком" принимать нужные размеры...Вот так делаются рамочки комменты)))) самые простые))
Ну, мои хорошие..на сегодня хватит... Ах да...маленький бонус!!!))) Если при редактировании рамочки... или при вставке... или когда стирали и сделали что то не так....просто нажмите CTRL+Z и ваше последнее действие будет отменено.Это очень нужно когда стираете буквы и фразы и теги и....."залазите" не туда куда нужно))))

До встречи. Ваша ZOMKA

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