Структура блочной вёрстки сайта

На данный момент насчитывается два основных вида вёрстки – блочная и табличная. Наиболее популярной является блочная, о ней - то вы и узнаете в этой статье. Не будем углубляться в терминологию, и еще больше запутывать тех, кто впервые будет работать с таким типом вёрстки.

Блочная вёрстка имеет огромное преимущество над табличной. К основным её плюсам можно отнести то, что можно наложить слоя друг на друга, легкое создание эффектов (выплывающее меню, списки и т. д.), быстрая загрузка страниц. Самым большим недостатком блочной верстки, считается то, что каждый браузер может по-своему воспринимать такой тип вёрстки, поэтому зачастую приходится использовать дополнительные хаки в написании кода для разных браузеров. Для редактирования кода используют визуальные редакторы html, собственно как и везде при создании сайта. Эти программы автоматически генерируют код визуальных элементов, но чаще всего код нуждается в ручной доработке.

Перед тем как начать вёрстку, нужно разрезать нужные фрагменты в любом удобном графическом редакторе. Помещать их, при сохранении, нужно в отдельную папку. Структура html-кода в блочной верстке в основном создается при помощи тега DIV, но существуют и другие теги, например такие как SECTION, который ничем не отличается от тега DIV. Каждый слой (блок) должен отвечать своему id-селектору, либо классу.

Пример:

Блок 1
Блок 2

Прикрепляем в html-код файл css:

body {
background: #d5d5d5;
font-size: 20px;
}

#container {
background:#CCEEFF;
margin: 40px auto;
width: 1000px;
height: 550px; 
}

.block-1 {
background: #FFFF00;
width: 1000px;
height: 100px;
} 

.sblock-2 {
background: #00FF00;
width: 1000px;
height: 550px;
}

Сохраняем и смотрим на результат. Перед нами два блока: верхний – это шапка вашего сайта, в центре – контент. Попробуйте добавить еще один слой, назовите его «menu» и расположите слева от «content». Получилось? Вы должны были написать примерно вот этот код:


И css:

#menu {
background: #2E8B57;
float: right;
width: 150px;
height: 550px;
}

Добавляем код в нужный файл и видим, как слева у нас появился еще один слой. Так же добавляем слой справа или внизу, – в зависимости от структуры сайта. С помощью тега H1 добавляем нужный текст, а с помощью 'background:url ("адрес изображения")' можно поставить фоном картинку на нужный слой. Ширину и высоту блока можно изменить с помощью width\height. Изменять положения слоя можно с помощью float: left\right.

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