Содержание
В данном разделе я расскажу о структуре шаблона vamshop, шаблона по умолчанию, а также о всех метках, которые можно использовать для создания своих шаблонов.
Шаблон vamshop установлен по умолчанию. Шаблон построен на блоках (div), без использования таблиц. В данной разделе я просто покажу структуру данного шаблона.
При создании шаблона vamshop использованы следующие подходы и правила:
HTML-разметка выполнена в соотвествии со стандартном XHTML 1.0.
Логика (xhtml разметка) и представление (css стили) разделены, никаких элементов оформления (цвета, рамки, размеры шрифтов и прочее) в html-разметке нет, есть лишь указания css правил.
CSS стили выполнены в соответствии со стандартом CSS 2.
Шаблон vamshop построен на блоках, схема шаблона имеет следующий вид - рис. 1.
Шаблон состоит из 9 (девяти) блоков:
container - в данном блоке заключён весь шаблон.
header - шапка сайта.
menu - основное меню магазина.
navigation - навигация по магазину, так называемый "breadcrumb".
wrapper - блок, в который выводится основное содержимое магазина.
content - центральная часть магазина.
left - левая колонка.
right - правая колонка.
footer - низ магазина.
Записав схему в виде html-кода мы получим следующий скелет шаблона vamshop:
<!-- Контейнер --> <div id="container"> <!-- Шапка --> <div id="header"> </div> <!-- /Шапка --> <div id="menu"> </div> <!-- Навигация --> <div id="navigation"> </div> <!-- /Навигация --> <!-- Центр --> <div id="wrapper"> <div id="content"> </div> </div> <!-- /Центр --> <!-- Левая колонка --> <div id="left"> </div> <!-- /Левая колонка --> <!-- Правая колонка --> <div id="right"> </div> <!-- /Правая колонка --> <!-- Низ --> <div id="footer"> </div> <!-- /Низ --> </div> <!-- /Контейнер -->
В браузере шаблон выглядит следующим образом - рис. 2.
Шаблон vamshop с визуальным представлением расположения 9 основных блоков - рис. 3.