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


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

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

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


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

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


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

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

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

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

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

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

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

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


по материалам сайта kapon.com.ua 

Поделитесь ссылкой на статью...


Всего комментариев - 2.    Можете оставить свой комментарий.

clearmade   2012-08-17 13:37:02   сайт автора -

Спасибо вам! рада, что нашла вас. Буду изучать. Немного знакома с HTML, но сейчас предстоит создать несколько одностраничных сайтов, но в определенном стиле. Надеюсь с вашими объяснениями справлюсь.

админ   2012-08-17 14:07:57   сайт автора -

Пожалуйста! Спрашивайте, если что не ясно.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер