Блокова верстка css - уроки css

Блокова верстка в CSS

Як приклад буде зроблена фіксована (жорстка) блокова верстка - тобто при зміні розмірів вікна веб-браузера сайт буде зберігати свої розміри. Шаблон буде мати: шапку; блок для контенту; лівий блок; і підвал;

Хоч вище і було названо 4 блоки - насправді їх буде більше. Для того що б технологія блокової верстки була зрозуміла - розглянемо кожен блок і ідентифікатор застосовуваний до нього окремо:

#main_pole <…> (

) - всередині цього блоку знаходиться вся конструкція сайту. За допомогою стилів застосовуються до нього визначається положення сайту щодо вікна веб-браузера, довжина шапки і поля з контентом (але не підвалу);

#header <…> (

) - це блок розташовується над усіма іншими і дорівнює довжині всього сайту. У ньому актуально розмістити назву сайту. За допомогою стилів йому можна задати: висоту, колір відступи та інші параметри;

#middle <…> (

) - великий блок всередині якого знаходяться ще три. За допомогою стилів можна задати ширину поля з контентом і відступ від підвалу сайту. У ньому актуально розмістити горизонтальне меню, так як воно буде розтягнуто в довжину всього сайту і знаходитися над полем для контенту і правої колонкою.

У селекторі #middle: after <…> буде три атрибута, значення яких наврятли вам відомі:

Сам елемент (властивість): after - означає, що вміст блоку, до якого застосовано це властивість буде відображатися після нього. Тобто якщо написати замість: after властивість: before - то підвал сайту "залізе" під шапку поверх інших блоків (можете спробувати);

content: '' - відображати весь написаний контент після цього блоку;

clear: both - задає, що по обидва боки елемента заборонено його обтікання іншими елементами;

display: table - даний атрибут надає елементу властивість блокової таблиці;

#container <…> (

) - розмістивши що-небудь в цьому блоці, це буде відображатися поверх всього контенту, але на одному рівні з правого колонкою.

#content <…> (

) - У цьому блоці повинен розташовуватися весь основний контент (статті, таблиці, картинки посилання та інше). У селекторі прописаний єдиний параметр, що задає відступи.

#right_bar <…> (

) - права колонка. У селекторі значення параметра margin-left: ... має дорівнювати ширині (довжині) блоку.

#footer <…> (

) - підвал сайту, в якому розміщують лічильники і посилання на зворотний зв'язок, службу підтримки і інше. У селекторі значення параметра width: ... має бути рівним значенню width: ... в #main_pole.

Створіть файл div_style.css і помістіть в нього нижче написаний код. Це файл стилів може бути шаблоном для сторінок вашого майбутнього сайту.

Тепер створіть файл index_test.html. У ньому буде розміщена структура шаблону, а так само деякі приклади, що демонструють роботу стилів. Зокрема буде розміщено горизонтальне меню, що випадає, створення якого розглядалося в одному з попередніх уроків. В голові сторінки (
) Підключаються стилі для сторінки і меню.

Ви можете і самі дописати необхідні стильові атрибути для блоків, спираючись на інформацію викладену в уроках по CSS і HTML.

Таким чином можна зробити простий движок для свого сайту, якщо кожен з блоків помістити в окремий файл і підключати його за допомогою PHP - Так можна буде внести зміни тільки в одному файлі, а вони відобразяться у всіх файлах, де оголошено підключення цього елемента. (Php include буде працювати, тільки якщо html-сторінка знаходиться на хостингу або домашньому сервері).