Блоково оформление
Нека започнем да поставяме елементите на нашата уеб страница. При изграждането на страница първо се поставят елементи, които определят местата, където по-късно ще се поставят съдържание, връзки, изображения и т. Н. Нека започнем отгоре и определим мястото под заглавието.
Моля, обърнете внимание, че в нашето оформление хоризонталното меню се намира в заглавката на сайта. За да го поставим по този начин, трябва да изрежем изображението на заглавката на сайта точно над горната граница на елементите на хоризонталното меню. В резултат ще имаме две изображения - отгоре и отдолу, отгоре на които ще бъде поставено менюто. Тези две изображения по-късно ще бъдат зададени като фон за два блокови елемента, които определят местоположението на заглавката на сайта.
Нека отворим нашия уеб документ и добавим следните редове към областта, предназначена за описване на елементи на съдържанието в нашия документ (вътре в блок с идентификатор, равен на „обвивка“):
Първият блок ще съдържа логото на нашия сайт и горната част на заглавката, зададена като фон. Вторият ще съдържа всички елементи, свързани с хоризонталното меню. Разбира се, всичко това би могло да бъде поставено без разделяне на заглавката на отделни части, но в този случай позиционирането на хоризонталното меню би станало по-трудно.
Нека да преминем към таблицата със стилове. Не забравяйте, първо трябва да запишете правилата за цялата страница, след това за общи елементи и блокове, които определят позициите на раздели на документа, и едва след това да напишете правилата за конкретни елементи. В противен случай каскадата няма да позволи на елементите да си дойдат на мястото.
Нека добавим следните правила към таблицата със стилове:
# ширина на заглавката: 780px;
височина: 76px;
background-repeat: no-repeat;
фоново изображение: url ('zubik_top.jpg');
>
# hmenu-височина на контейнера: 50px;
фоново изображение: url ('zubik_btm.jpg');
background-repeat: no-repeat;
>
Както вероятно сте разбрали, тези правила описват свойствата на блоковете, свързани със заглавката на сайта. Разбира се, можехме да поставим тези два блока в друг div, за да отделим напълно логично заглавката на сайта, но не го направихме. Като цяло, divs, както и други елементи, не трябва да се злоупотребява.