Структура блокової верстки

Відео: Урок 2. Структура проекту. HTML верстка для початківців

Найбільш часто зустрічається верстка - блокова. Однак, не всі правильно верстають блоками, в основному, це ті, хто робить це вперше. Як показує практика, такі новачки довго мучаться з першої блокової версткою, а вже наступні їм даються набагато легше, так як вони вже знають структуру блокової верстки. І щоб полегшити трохи життя новачкам, я в даній статті покажу вже готову структуру блокової верстки.

наводжу HTML-код:

 
xmlns="Http://w3.org/1999/xhtml"gt; 




 
заголовок сторінки 
http-equiv="Content-Type"content="Text / html- charset = utf-8"/ Gt; 
name="Description"content="Опис сторінки."/ Gt; 
name="Keywords"content="Ключові слова сторінки"/ Gt; 
href="Css / styles.css"rel="Stylesheet"type="Text / css"/ Gt; 
 
 
id="Header"gt;Шапка сайту 
id="Content"gt; 
id="Left"gt;ліві блоки 
id="Right"gt;праві блоки 
id="Center"gt;Центральна частина 
 
class="Clear"gt; 
id="Footer"gt;вміст підвалу

І CSS-код:

#left { 
float: left-// Ліві блоки розміщуємо зліва 
 width:200px-// Установка ширини 200 пікселів 
} 
#right { 
float: right-// Праві блоки розміщуємо справа 
 width:200px-// Установка ширини 200 пікселів 
} 
#center { 
 margin-left:200px-// Лівий відступ 200 пікселів 
 margin-right:200px-// Відступ справа 200 пікселів 
} 
.clear { 
 clear: both-// Скасовуємо позиціонування (вплив float) 
}

Цю структуру Ви можете сміливо копіювати на свій сайт. Безумовно, деякі елементи можна міняти. Наприклад, розміри лівих і правих блоків. Відповідно, треба буде поміняти і відступи у центрального блоку. Також якщо верстка фіксована, або вона не повинна розтягуватися на всю сторінку, то необхідно все блоки додати в інший, самий верхній, у якого задати фіксовану ширину в пікселях (фіксована верстка) або у відсотках (гумова, але не на всю сторінку).