2.2.3 Завершение работы над шаблоном
На данном шаге шаблон выглядит как заготовка из графики и только, но необходимо завершить композицию и наполнить шаблон пробной информацией и на основе этой информации дополнить таблицу стилей.
Вся текстовая информация на сайте будет выводиться в тегах абзаца, соответственно надо указать параметры тега в фале стилей. Но для разных блоков тег должен выглядеть по разному, поэтому укажем параметров для всех тегов, а потом для каждого блока в отдельности.
Аналогичным образом указываем параметры для тега ссылки (<a>), для общего тега указывается только цвет и параметр декорации текста. Так как в остальных блоках ссылки должны выглядеть по другому, вот на пример блок меню. Меню на сайте будет горизонтальное и каждая ссылка это блок, с указанными параметрами его расположения и вида, здесь параметры ссылки будут отличаться от остальных.
Для остальных элементов которые будут выводиться на сайте стили будут прописываться по ходу их появления.
В завершении работы над шаблоном его код выглядит так:
<body> <div id="wrapper"> <div id="header"> <!--ШАПКА--> <?php include("blocks/header.php"); ?> </div> <div id="menu"> <!--БЛОК МЕНЮ--> <?php include("blocks/menu.php");?>
</div> <div id="content"> <div id="main"> <!--ОСНОВНАЯ ЦЕНТРАЛЬНАЯ ЧАСТЬ САЙТА--> <blockquote><p>Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст Пробный текст </p></blockquote> <p>На данном шаге шаблон выглядит как заготовка из графики и только, но необходимо завершить композицию и наполнить шаблон пробной информацией и на основе этой информации дополнить таблицу стилей.<br> Вся текстовая информация на сайте будет выводиться в тегах абзаца, соответственно надо указать параметры тега в фале стилей. Но для разных блоков тег должен выглядеть по разному, поэтому укажем параметров для всех тегов, а потом для каждого блока в отдельности.<br> Аналогичным образом указываем параметры для тега ссылки (<a>), для общего тега указывается только цвет и параметр декорации текста. Так как в остальных блоках ссылки должны выглядеть по другому, вот на пример блок меню. Меню на сайте будет горизонтальное и каждая ссылка это блок, с указанными параметрами его расположения и вида, здесь параметры ссылки будут отличаться от остальных. <br> Для остальных элементов которые будут выводиться на сайте стили будут прописываться по ходу их появления. </p> </div> <div id="right"> <!--ПРАВЫЙ КОНТЕЙНЕР--> <?php include("blocks/right.php");?> </div> </div> <div class="clearbottom"></div> <div id="footer"> <!--ПОДВАЛ--> <?php include("blocks/footer.php");?> </div> </div> <
Табл. 2.1 Код
полного шаблона |
В браузере шаблон выгляди так:
Рис. 2.11 Вид шаблона
в браузере