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

урок - 11



Цитата сообщения _Н_А_Т_А_Л_И_Я_

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

Теперь продолжим наш предыдущий урок и вставим нашу картинку сбоку,но уже
в сложную рамочку.За основу возьму рамочку с 4-мя слоями:

ВАШ ТЕКСТ

Теперь загружаю картинку,как мы делали это в прошлом уроке(один совет не
берите очень широкие картинки)и вставляю в рамочку между слоями,как мы это делали в предыдущих уроках с прямыми рамочками.
Вот так:

Здесь подчеркнуты те два слоя,которые будут нашей внешней рамочкой:

здесь те слои,которые будут нашей внутренней рамочкой:

Теперь будем регулировать наши размеры,
размер нашей внутренней рамочки ставим так чтобы сумма ,размера картинки и ее размера ,не превышала размера внешней рамочки,а была бы примерно равной ей .

И мы получаем такой вид рамочки:

ВАШ ТЕКСТ

Как видем вид не очень притягательный.
Теперь делаем следующее:
Перед картинкой ставим вот
этот тег со следующими характеристиками:

1.устанавливаем жестко:

2.уравниваем размер по картинки:

И получаем такой вид рамочки:

ВАШ ТЕКСТ

Но это не все, ведь вставляя наш текст в такую рамочку,внутренняя рамочка начнет увеличиваться в высоту,а картинка имеет определенный размер.И если текста будет очень много,то под картинкой образуется пустое место,что не украсит нашу рамочку,поэтому я рекомендую в такие рамочки вставлять текст с прокруткой или плывущий текст.
Сейчас мы разберем плывущий текст ,так как этот вариант намного проще:
Что ж вставлять этот тег мы уже умеем из предыдущих уроков,так что сразу будем оговариватьмаленький ньюанс с размером.
регулировать будем вот этот размер(то есть размер в теге должен равняться размеру картинки):

Вот так:

И мы получим вот такой вид рамочки:

ВАШ ТЕКСТ

Теперь дам один совет ,если вы ставите линии-разделители,то в размере тега,учитывайте и их размер,то есть размер тега должен быть равен ,в этом случае ,разнице между размером картинки и размером линии-разделителя(либо двух линий-рзделителей,если вы ставите их два).

Урок изготовления рамочки для текста.

Как поменять шрифт, цвет и размер в рамках

***********************************************************************************
Для наглядности я поместила скрин кода рамки, весь код рамки большой,
ну или значительно больше этого, мы взяли для рассмотрения абзац,
который принадлежит описанию текста.
ОН РАСПОЛОЖЕН ПРЯМО ПЕРЕД СЛОВАМИ - "ваш текст"

************************************************************************************

Меняем цвет написания текста, это я подчеркнула красной линией.
слово color - известно всем - цвет! Далее КОД ЦВЕТА!
он всегда ШЕСТИЗНАЧНЫЙ!
к примеру
черный - 000000
белый - FFFFFF
Таблицу цветов можно найти, пройдя у меня по ссылке
http://www.liveinternet.ru/users/rusoolga/post67840527/
цвета могут писаться не цифрами, а буквами, например:
white - белый
red - красный
black - черный
yellow- желтый
blue - синий
green - зеленый
и конечно множество оттенков.
названия цветов тоже можно взять в тех же предложенных ссылках.

***************************************************************************************

Теперь меняем размер текста.

Это выделено синим цветом.

SAZE - размер. В нашем случае он 5.

Надо сделать шрифт меньше, к примеру, поставили цифру - 2,
надо больше - поставили цифру 7.

Выбираем ту, которая подходит на Ваше усмотрение.

До 7 (по-моему)!!!!!!

****************************************************************************************

Теперь меняем шрифт текста. Это выделено зеленым цветом.
В кавычках у нас написано "Monotype Corsiva". Не устраивает - меняем на любой другой.
К примеру:
Georgia
MS Mincho
graffpiti
Haettenschweiler
Ruritania
JakobCTT
Monotype Corsiva
Batang
Aero Font One
Impact
Здесь я написала только 10 штрифтов.

****************************************************************************************

Как сделать текст движущимся

Берем в цитатник.
В редакторе копируем код под нужным номером.
Меняем на свое усмотрение - цвет, размер, шрифт, как это делать написано в посте чуть ниже.
Не писала про скорость текста - это - scrollamount="?"
? = от 1 до 9, чем больше цифра, тем быстрее скорость.
Вставляем в свои посты и любуемся)))

1.

справа налево

этот текст у нас движется права налево
2. слева направо
этот текст у нас движется слева направо
3. снизу вверх
этот - снизу вверх
4. сверху вниз
этот - сверху вниз
5. туда-сюда

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

урок - 1



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки

Для начала возмем однослойную рамочку и разберем ее что к чему и для чего.

Ваш текст

На данной картинке красным цветом подчеркнуты характеристики нашего текста,соответственно по порядку: размер,цвет,шрифт


смотреть дальше

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

урок - 2



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 2

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

Ваш текст

Эта команда отвечает за размещение нашей рамочке на листе нашего дневника,то есть ставит рамочку по центру,если не писать этого тега,то наша рамочка сместится влево

этот тег отвечает за поддержку высоты нашей рамочки,чтобы рамочка не свернулась

Этот тег отвечает за поддержку ширины нашей рамочке и также не дает ей свернуться

И так приступем начнем с того,что обозначим наши слои:
1.первый слой

2.второй слой

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

2.

Ну что же дальше повторяем весь наш первый урок,но не забываем что у нас два слоя,будьте внимательны.Поэтому надо взять
соответственно 2 фона к каждому слою свой фон.
Теперь вставим картинку в нашу рамочку,для начала выберим ее и загрузим рядом с нашей рамочкой,вот так:

Ваш текст

В коде это будет выглядеть так:

Здесь я выделила весь адрес загруженной картинки,который в дальнейшем мы вырежем и поставим либо перед текстом либо после текст

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

Ваш текст

В коде это выглядит так(адрес картинки подчеркнула):

Далее подгоняем размер рамки под картинку,так чтобы это красиво выглядело,примерно так:

Ваш текст

Для этого уравниваем размер рамки с размером картинки(вот так):

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

урок - 3



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 3

Теперь будем учиться делать такую рамочку.
И не надо пугаться все гораздо
проще чем может показаться.

Ваш текст

Мы уже знаем из предыдущих уроков:
как менять фон рамки
как менять размеры рамки и какие размеры мы можем поменять.
Начнем!
Берем 2-хслойную рамочку

Ваш текст

и добавляем еще два таких же
слоя(можно просто скопировать)вот так это делается:
1.здесь выделено ,то что вы должны скопировать:

2.здесь показано куда надо вставить скопированные вами теги:

3.теперь копируем отмены наших тег:

4.и вставляем сюда:

Получаем такую рамку(у которой теперь 4 слоя):
размеры меняем по своему вкусу,как кому больше нравиться,я сделала так:

Ваш текст

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

здесь выделина картинка уже стоящая в рамке:

здесь выделина 2 слоя,которые остались под картинкой:

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

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

урок - 5



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 5

В принципе игру со слоями можно самому проделать как нам больше нравиться,все
зависит от вашего вкуса,добавлять слои мы уже умеем.
Давайте в этом уроке поиграем с текстом.
Ну что же начнем.
Для начала сделаем рамку с плывущем текстом.
Опять таки ничего сложного нет,
просто надо вставлять определенный тег перед текстом.
За основу я возьму рамку с предыдущего нашего урока.

Ваш текст

Здесь я показала куда надо вставить наш тег

Здесь я подчеркнула весь тег и его отмену,который нам надо вставить.

Сейчас мы разберем все его параметры:
1.эта команда говорит о том,что наш текст будет плыть
снизу вверх
(если нам надо чтобы он плыл с верху вниз то "up" меняем на "down"):

2.эта команда задает скорость движения текста(ее можно менять от 1 до 3):

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

4.это самое главное в данном теги,здесь задается размер(высота)листа,по которому будет плыть текст(ее можно менять на ваше усмотрение):

5.Тоже не самое последнее,если нам надо чтобы текст был расположен по центру,
тег "center" должен быть расположен непосредственно перед
самим текстом
(так как показано здесь):


Ну вот что у нас получилось:

Ваш текст

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

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

урок - 6



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 6

А сейчас поучимся делать рамку с прокруткой,это довольно сложно,поэтому начнем с
самой простой рамки в этом случае.
Вот с такой:

ВАШ ТЕКСТ

За основу взяла самую постую рамочку с картинкой:

ВАШ ТЕКСТ

А это рамочка прокрутки которую мы будем вставлять в нашу рамочку:

ВАШ ТЕКСТ

сейчас мы разберем ее на части и посмотрим,что за что отвечает:
1.Здесь задаем расположение нашей рамки по центру:

2.Это есть начало нашей прокрутки(то есть задвается сама таблица и дальне пойдут теги ее оформления):

3.это задает режим прокрутки(дословный перевод мне не понятен):

4.здесь мы задаем цвет треугольничков прокрутки:

вот эти треугольнички:

5.здесь задается цвет бортика и его размер(по порядку):

6.здесь задаем размеры нашей прокрутки
(первый размер это ширина,ее лучше задавать в %,
и она сама растянется по нашей основной рамочке;второй размер это ее высота,ее задаем так как нам удобно):

7.эта команда задает цвет нашего фона(можно задавать числовым кодом,как для текста):

8.следующая команда применяется,если мы хотим ставить фоном картинку.
В этом случае предыдущая команда просто полностью удаляется,а вместо обведенного URL ,ставим адрес картинки без ковычек(что такое адрес картинки было описано в прошлых уроках(принцип смены фона таблицы).):

Теперь после того как все разобрали,вводим получившейся код в нашу рамочку,сразу после картинки,вот так(розовым
подчеркнула адрес картинки,а красным код нашей прокрутки и его отмену,то что не подчеркнуто внутри нашей прокрутки-это теги нашего текста,их мы тоже разберали на предыдущих уроках):

В принципе все,если что не понятно пещите,дополню урок.


Я пользуюсь вот этой подсказкой,здесь много разных тег,которыми можно дополнить нашу рамочку прокрутки:

Можно менять цвет прокрутки:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-darkshadow-color - это цвет тени от панели
прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
#FFFFFF - это коды цвета, которые можно менять.
*******
Внешний отвечает за фон, рамку и размер:
свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-color определяет цвет фона, который вы видите, пока подгружается фоновая картинка background-image (или в случае, если у вас отключена подкачка картинок);
- свойства width и height определяют соответственно ширину и высоту слоя, измеряются в пикселях. Можно также и в процентах (от размера окна).
*******
Внутренний div отвечает за стиль шрифта и прокрутку.
Даже если текста много, можно запихнуть его в маленькое окошко:
- свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-image
определяет очередную фоновую картинку;
- свойство overflow регулирует реакцию браузера, если реальные размеры блока не соответствуют заданным и может возникнуть его переполнение.

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

урок - 7



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 7

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

Ваш текст

Первое
Мы не разобрали следующий тег,а он может изменить вид нашей рамочки,покажу все наглядно:
1.в первом случае стоит значение равное 3:

и вид рамочки у нас такой:

Ваш текст

2.теперь ставим значение 13:

и вид рамочки меняется:

Ваш текст

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

Второе

Поиграем с картинкой,я взяла картинку любую,так как нам это сейчас не важно.
Это вид когда картинка просто вставлена в рамочку:

Ваш текст

Теперь профильтруем картинку через фон:
Здесь просто вставляется в адрес картинки определенный тег
1.вот наша картинка в коде рамке

2.здесь отмечено куда будем вставлять наш тег,обратите внимание на пробел который надо оставить перед вводимым тегом:

3.Здесь я подчеркнула весь тег который вводим:

4.здесь я почеркнула те значения,которые можно менять:
4.1)Это стиль фильтрации

его можно менять на
(Я сменила фон чтобы было виднее в чем суть)
1 -один край полностью виден:

Ваш текст

2 -картинка в овале

Ваш текст

3 -картинка в квадрате

Ваш текст

4.2)это на сколько % наша картинка будет видна из фона,
(я редко использую это,но
может и пригодиться,но писать его надо обязательно,просто ставить значение 100):

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

урок - 8



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 8
[
Это урок мы тоже посвятим маленьким мелочам.
Начнем с того,что введем
заголовок в нашу рамку и заставим его двигаться.
Вот так:

Ваш заголовок.... ВАШ ТЕКСТ

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

Здесь я обозначила полностью весь тег:

Теперь разберем его характеристики:
1.Это уже знакомый нам тег фильтрации,
который мы использовали для фильтрации картинки,
его характеристики можно менять также как и при фильтрации картинки:

2.Здесь мы задаем цвет нашего текста:

3.Здесь задаем основной цвет,по которому будет двигаться наш заголовок:

Теперь нам надо поставить отмену этого тега(его ставим так же перед кодом нашей картинки,после самого
заголовка).
Здесь красным цветом подчеркнута отмена тега,
а синим -отмена характеристик нашего зоголовка:


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

Ставиться он в конце каждого слоя и отвечает за поддержку каждого слоя в отдельности,так как наше ли.ру очень не любит ручной ввод(даже если вы все правельно ввидете,рамка все равно может свернуть)так этот тег уменьшает этот риск до минимума,хотя не дает 100%
защиты.За что же я его не люблю спросите,отвечаю,у вас в посте рамка будет стоять и смотреться великолепно,но если кто из друзей захочет вас процитировать,она у него расползется на слои,вот такой это веселый тег.
Вот так выглядет рамка при цитировании:

Вот так выглядет код такой рамки(я выделила пробелы,которые образуются при цитировании):


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

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

урок - 9



Цитата сообщения _Н_А_Т_А_Л_И_Я_
Учимся делать рамочки 9
[
Сегодня опять поговорим о ручном вводе тег рамочек.
Затронем только два
вида рамочек,они сильно не отличаются друг от друга.но пару тонкостей все же есть.
Вот первый тип рамочки:

ВАШ ТЕКСТ

Он вводится через вот такой вариант тега:

в этом варианте одна характеристика рамки теряется,какой бы вы ее не задавали.
Вот эта характеристика:

А вот вторая рамочка:

ВАШ ТЕКСТ

Здесь я подчеркнула начало ее ввода(надеюсь разница очевидна):

в этом варианте все характеристики работают четко:

Мне больше нравиться второй вариант!

Теперь поговорим об еще одном варианте ввода фона,
так сказать о заливке рамки цветом.
Этот вариант сродни тому,как мы окрашиваем наш текст цветом.
Здесь вместо нашей вот этой привычной команды c адресом фона:

Мы пишем следующую команду,
в которой ставим код цвета из палитры цвета(надеюсь она у каждого есть):

очень удобно когда
надо получить однотонный фон!
К примеру так:

ВАШ ТЕКСТ

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

урок - 10



Цитата сообщения _Н_А_Т_А_Л_И_Я_

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

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

ВАШ ТЕКСТ

Теперь загружаем картинку и ставим галочку вот здесь:

или здесь:

Наша картинка в коде встанет над тегом рамочки,вот так:

Теперь вырезаем ее и ставим сразу перед текстом в рамочку ,вот так:

И наша рамочка будет выглядеть так:

ВАШ ТЕКСТ

Теперь покажу этот тег наглядно,так как его легко вводить в ручную,вот он:

В данном случае картинка у нас находится слева,но если вместо "left" написать "right",то картинка встанет справа от текста.
Это основа боковых рамочек.
Теперь поговорим о соотношении размеров,главным образом ,в данном случае,надо отрегулировать ширину нашей рамочки и ширину картинки,то есть размер рамочки должен быть больше размера картинки,на столько чтобы было удобно
размещать текст.Где то вот так: