Що таке блокова верстка (div верстка) сайтів

Останнім часом дуже популярною стала блокова верстка сайтів або, як її ще називають, div верстка. Більшість сучасних сайтів будуються саме за цією технологією. Суть її полягає в тому, що базовий каркас (шаблон) сторінки формується з блоків, в якості яких виступає html тег DIV. За допомогою стилів ці блоки позиціонуються на сторінці певним чином, формуючи каркас, який вже потім наповнюють змістом.

В даному уроці я спробую дохідливо пояснити, що таке блокова верстка і за яким принципом вона будується. Матеріал розрахований на людей, вперше зіткнулися з поняттям div верстка. тому спеців прошу не судити строго :)

Ми розглянемо побудову різних варіацій 2-х найбільш популярних шаблонів, привиди на малюнку нижче.

Ось приблизний план уроку:

1. Що таке блокова верстка, і які її базові принципи.

2. Верстаємо двоколонний макет фіксованої ширини (меню зліва)

3. Верстаємо двоколонний макет фіксованої ширини (меню праворуч)

4. Верстаємо трехколонной макет фіксованої ширини

5. Розбираємо відмінності фіксованих макетів і гумових (які тягнуться на весь екран) і відповідно верстаємо всі перераховані макети, тільки в гумовому варіанті ..

6. Підводимо підсумок про блокової верстці сайтів ..

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

Є питання? Отримай відповідь на форумі ПІДТРИМКИ