Блоково оформление. Урок 4. Създаване на контейнерни блокове.

Нека започнем да поставяме елементите на нашата уеб страница. При изграждането на страница първо се поставят елементи, които определят местата, където по-късно ще се поставят съдържание, връзки, изображения и т. Н. Нека започнем отгоре и определим мястото под заглавието.

Моля, обърнете внимание, че в нашето оформление хоризонталното меню се намира в заглавката на сайта. За да го поставим по този начин, трябва да изрежем изображението на заглавката на сайта точно над горната граница на елементите на хоризонталното меню. В резултат ще имаме две изображения - отгоре и отдолу, отгоре на които ще бъде поставено менюто. Тези две изображения по-късно ще бъдат зададени като фон за два блокови елемента, които определят местоположението на заглавката на сайта.

Нека отворим нашия уеб документ и добавим следните редове към областта, предназначена за описване на елементи на съдържанието в нашия документ (вътре в блок с идентификатор, равен на „обвивка“):

Първият блок ще съдържа логото на нашия сайт и горната част на заглавката, зададена като фон. Вторият ще съдържа всички елементи, свързани с хоризонталното меню. Разбира се, всичко това би могло да бъде поставено без разделяне на заглавката на отделни части, но в този случай позиционирането на хоризонталното меню би станало по-трудно.

Нека да преминем към таблицата със стилове. Не забравяйте, първо трябва да запишете правилата за цялата страница, след това за общи елементи и блокове, които определят позициите на раздели на документа, и едва след това да напишете правилата за конкретни елементи. В противен случай каскадата няма да позволи на елементите да си дойдат на мястото.

Нека добавим следните правила към таблицата със стилове:

# ширина на заглавката: 780px;
височина: 76px;
background-repeat: no-repeat;
фоново изображение: url ('zubik_top.jpg');
>

# hmenu-височина на контейнера: 50px;
фоново изображение: url ('zubik_btm.jpg');
background-repeat: no-repeat;
>

Както вероятно сте разбрали, тези правила описват свойствата на блоковете, свързани със заглавката на сайта. Разбира се, можехме да поставим тези два блока в друг div, за да отделим напълно логично заглавката на сайта, но не го направихме. Като цяло, divs, както и други елементи, не трябва да се злоупотребява.

В описанието на стила на втория блок посочихме същите свойства, с изключение на ширината. По този начин блокът ще заема цялото пространство, което му е на разположение по ширина. Като цяло, тогава, в първия блок, ширината също не би могла да бъде посочена, нямаше да пълзи извън div, в който се намира, равна на ширина.

Нека запазим нашата таблица със стилове във файл, например с името screen.css, защото правилата на тази таблица със стилове ще се използват при показване на нашата страница на екрана на монитора.

Нека отидем до уеб документа и да добавим блоковите тагове под новодобавените редове, които ще съдържат съдържанието и вертикалното меню:

Тук също така задаваме глобален централен блок, спрямо който ще позиционираме вътрешните блокове под менюто и съдържанието.

Отворете таблицата със стилове screen.css и добавете следните правила:

# vmenu-ширина на контейнера: 115px;
височина: 170px;
фоново изображение: url ('sidemenu.jpg');
background-repeat: no-repeat;
подложка: 1em;
>

#content float: вдясно;
ширина: 610px;
margin-bottom: 1em;
семейство шрифтове: Verdana, Arial, Hevletica;
размер на шрифта: 80%
>

За контейнера под менюто задаваме ширината, височината, фона и подложката, така че елементите, които този блок ще съдържа, да не докосват границите му. Блокът със съдържание беше направен "плаващ" спрямо дясната страна (float: rigth), т.е. други елементи ще се увият около него вляво и ще му дадат цялата налична ширина минус ширината на полето под дясното меню, като по този начин позволяват на полето с менюто да се придвижва нагоре и да се побира до контейнера за съдържание. Освен това в същия блок задаваме свойства, които определят параметрите на шрифта за съдържанието. По този начин съдържанието ще се изобрази с шрифта, определен от тези свойства. Външно долно поле също беше зададено да визуално отделя съдържанието от долния колонтитул на страницата с ширина на символа (1 em).

Нека отново отворим нашия уеб документ и добавим редовете, свързани с долния колонтитул на страницата:

След това добавете правилото към таблицата със стилове.

# цвят на долния колонтитул: сив;
височина: 3em;
семейство шрифтове: Arial;
размер на forn: 10px;
>

Моля, обърнете внимание, че ако добавите съдържание към всички блокове сега, долният колонтитул на нашата страница ще бъде леко изместен. Това е така, защото преди това зададохме стойност, която определя потока около един от блоковете. За да се отървете от този проблем, трябва да деактивирате опаковането. Добавете следния ред преди долния колонтитул:

Сега във вашата таблица със стилове запишете правилото за този блок за корекции.

Тук сме деактивирали обвиването от всички страни. Би било възможно да се забрани потокът само за страната, от която всъщност е бил. Но факт е, че все още се нуждаем от стила, дефиниран от този клас, а допълнителна забрана за опаковане от друга страна няма да ни създаде никакви проблеми тук.

Остава само да маркирате менюто, да добавите връзки и съдържание. Ще направим това в следващия урок.