Шаблон сайта с использованием тега




Создание шаблона сайта с использованием тега DIV, как при помощи блоков div создать веб-сайт

Создание шаблона сайта с использованием блочного тега <div> дает ряд преимуществ перед табличным шаблоном. Заметить для себя эти изменения можно только саздав такой шаблон. но если в двух словах, то будет меньше кода и в нем проще будет разбираться. К тому же появляется больше динамики, но существует одно «но», которое выражается в подробном изучении самого <div>, правда если появилось желание работат в сети, тогда учиться нужно. А если кто не знаком с блоками <div>, тогда нужно почитать статью, которая описывает данный блочный элемент.

Шаблона сайта с использованием тега <div>

Общая структура страницы шаблона.

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

Подробное описание шаблона сайта.

В прошлой статье было рассмотрено разработку простого табличного сайта, а в данном посте можно подробно разобраться в структуре страницы, созданной на «дивах» (<div>) чтобы после скачивания уже готового шаблона можно было без проблем вставить свои тексты и что то другое. Здесь на данном этапе вникать в «дебри» не нужно, а только самое основное.

Все страницы начинаются с «шапки», которая практически везде одинакова (в смысле кода), дальше могут быть только некоторые отличия, которые появляются в процессе усовершенствования веб-сайта.

Обычно логотипы и главное меню располагается в самом начале страницы, а сам «хедер», или фон, в самом верху страницы, будет вставлятся в файле стилей, который описан в следующей статье.

Все наполнение страницы вставляется между следующими блоками:

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

А заканчивает страницу блок «футер» (footer), его еще называют «подвал сайта«, фон которого также задается в файле стилей, а в самом футере можно помещать счетчики, или перенести все меню в данный блок, или что кому вздумается…

Для дальнейшего изучения простого шаблона веб-сайта, нужно разобраться в стилях, которые задают параметры блокам <div>. Стили всего сайта описываются в отдельном файле style.css, который описан в следующей статье, посвященной стилям CSS. На той же странице можно посмотреть пример данного шаблона, или скачать его для подробного изучения, или модернизации под себя.

Читать описание файла style.css