Шаблон сайту з використанням тега - div

Створення шаблону сайту з використанням блочного тега

дає ряд переваг перед табличним шаблоном. Помітити для себе ці зміни можна лише саздав такий шаблон. але якщо в двох словах, то буде менше коду і в ньому простіше буде розбиратися. До того ж з'являється більше динаміки, але існує одне "але", яке виражається в докладному вивченні самого
. правда якщо з'явилося бажання работат в мережі, тоді вчитися потрібно. А якщо хто не знайомий з блоками
, тоді потрібно почитати статтю, яка описує даний блоковий елемент.

Шаблон сайту з використанням тега - div

Загальна структура сторінки шаблону.

Даний HTML-код показує загальне розташування блоків сторінки веб-сайту. Практично не важливо, сайт створений на движку, чи ні, все елементи розташовуються проблізітельно в даній послідовності. Сам шаблон взятий на основі поширених прикладів, щоб простіше було вивчати.

Детальний опис шаблону сайту.

У минулій статті було розглянуто розробку простого табличного сайту. а в даній статті можна детально розібратися в структурі сторінки, створеної на "дівах" (

) Щоб після скачування вже готового шаблону можна було без проблем вставити свої тексти і що то інше. Тут на даному етапі виникають в "нетрі" не потрібно, а тільки найосновніше.

Всі сторінки починаються з "шапки", яка практично скрізь однакова (в сенсі коду), далі можуть бути тільки деякі відмінності, які з'являються в процесі удосконалення веб-сайту.

Зазвичай логотипи і головне меню розташовується в самому початку сторінки, а сам "хедер", або фон, в самому верху сторінки, буде вставлена ​​в файлі стилів, який описаний в наступній статті.

Все наповнення сторінки вставляється між наступними блоками:

В даному прикладі, шаблон буде з одним лівим сайдбарі, в якому будуть розташовуватися банери і додаткове меню для веб-сайту.

А закінчує сторінку блок "футер" (footer), його ще називають "підвал сайту", фон якого також задається у файлі стилів, а в самому футере можна поміщати лічильники, або перенести все меню в даний блок, або що кому заманеться.

Для подальшого вивчення простого шаблону веб-сайту, потрібно розібратися в стилях, які задають параметри блокам

. Стилі всього сайту описуються в окремому файлі style.css. який описаний в наступній статті, присвяченій стилям CSS. На тій же сторінці можна подивитися приклад даного шаблону, або завантажити його для докладного вивчення, або модернізації під себе.

за матеріалами сайту kapon.com.ua

Можливо дані теми Вам будуть цікаві:

Схожі статті