Урок № 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 регулирует реакцию браузера, если реальные размеры блока не соответствуют заданным и может возникнуть его переполнение.

Серия сообщений "Рамочки и уроки по их созданию":
Часть 1 - Рамочки для Блогов
Часть 2 - Урок № 1 Учимся делать рамочки
...
Часть 6 - Учимся делать простую рамочку
Часть 7 - Урок №5 Учимся делать рамочки
Часть 8 - Урок № 6 Учимся делать рамочки
Часть 9 - Как расположить несколько элементов на страничке рядом друг с другом.Урок для начинающих!
Часть 10 - Рамка для текста
...
Часть 13 - УРОКИ -окошки для текста и кнопки
Часть 14 - Рамочка для видео
Часть 15 - Рамочка для видео