Общая структура внешнего вида в скриптах.

Автор:Кузнецов Сергей

Общая структура внешнего вида в скриптах.

В своих скриптах я применяю схему, которой сам придерживаюсь уже несколько лет при проектировании сайтов любой сложности. Эта схема имеет ряд преимуществ, и в дальнейшем будет только развиваться. Все приемы, описанные ниже применимы для практически для любого из моих скриптов.

Суть данного подхода в том, что существуют единые для всего сайта (скрипта) блоки кода html, которые подключаются абсолютно ко всем страницам сайта (скрипта). Это так называемая «верхняя часть страницы кода» и «нижняя» часть страницы кода. В кавычках эти понятия даны для того, что бы подчеркнуть, что такая их ориентация отражается только в местоположении кода в html коде страницы, а не в расположении элементов оформления при просмотре страницы в браузере. Например, в «нижней части» кода вполне реально сделать шапку страницы – все зависит от html кодирования.

Благодаря этим двум файлам (блокам кода) и достигается единство всего оформления сайта, а также повторение на всех его страницах неизменяемого содержимого – например меню сайта.

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

То есть, в самом простом варианте, наша схема при загрузке любой страницы выглядит так:
- Загружается «верх» кода страницы
- Загружается код самой страницы
- Загружается «низ» кода страницы.

Однако при такой упрощенной схеме мы лишены возможности выводить для каждой страницы свои собственные элементы страницы: title, keywords, description . Поэтому с недавнего времени данная схема чуть усложнилась, а именно:

Теперь при загрузке страницы в шаблоне сначала идет код, отвечающий за блок

страницы, а затем уже стандартная схема. При этом блок

убирается из файла «верха» страницы.

Последовательность теперь выглядет так:
- Загружается блок < head >< /head > вызываемой страницы
- Загружается «верх» кода всех страницы (top.php)
- Загружается код самой страницы (оформляется в шаблонах, обычно файл *.tpl)
- Загружается «низ» кода страницы. (bottom.php)

Для примера возьмем шаблон главной страницы скрипт продажи авто (ЛЮКС) Небольшие пояснения: Элементы заключенные в такие {* … *} – это комментария шаблонизатора, и в html коде страницы не отображаются. Мио комментарии, касающиеся пояснений схемы общего вида, выделены так:

< ! - -//ЭТО МОИ КОММЕНТАРИИ  -- >

{*Smarty*}
{*Шаблон для вывода списка всех марок  - главная страница скрипта*}
< ! - -//Начинается вывод блока HEAD страницы -- >

 < !doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Продажа авто, продать или купить подержанные автомобили :: Центр продажи авто< ! - -//Теперь подключается файл со стилями -- > < link rel="stylesheet" type="text/css" href=" css/style.css" > < ! - -//оформляется поле с ключевыми словами -- > < ! - -//А вот теперь подключается файл с «верхом» кода страницы -- > {include_php file='inc/top.php'} < ! - -//И подклчюаем общее меню для скрипта -- > {include file='_navbar_public.tpl'} < ! - -//Далее идет html код самой страницы, с вызовами нужных таблиц при помощи переменных Smarty -- > < tr > < td valign="top"> < ! - -//Тут в скрипте выводится список марок -- > {html_table loop=$list_marks table_attr='border="0" cellpadding="0" cellspacing="0" align="center" width=100%' cols=5 inner="rows"} < /td > < td valign="top" width="200"> < ! - -//Здесь – подключение вывода последних объявлений-- > {include_php file='news_bill.php'} < /td >

< ! - -//дальше – скрипт вызывает «нижнюю» часть кода -- > {include_php file='inc/bottom.php'}

Все, формирование страницы закончено.

Небольшие дополнения.

Файлы с общими блоками кода я обычно называю
«Верхнюю» часть – top.php
«Нижнюю» - bottom.php

Располагаются они в зависимости от скрипта либо в папке /inc/ , либо /include_design/

Итак, данная схема позволяет использовать единое оформление — как для самих скриптов, так и для всего остального сайта. Каким образом можно подключить дизайн к другим страницам сайта? - за счет внедрения в них тех самых единых элементов внешнего вида, заключанных в файлах «верха» и «низа» страниц. Обычно это делается для страниц php при помощи включений вида .

Подобный прием можно использовать и для создания дополнительной страницы в рамках скрипта — например с формрой обратной связи. В таком случае нам нужно работать с php файлом следующим образом:
- поместить в него весь код из шаблона например главной страницы скрипта
-убрать из него лишние элементы, отвечающие за вывод спецефичной инфорации конкретного шаблона
-в оставшемся коде заменить все включения php файлов дизайна {include_php file='путь до файла'} на включения через php функцию:
- удалите все комментарии шаблонизатора вида {* комменатрий *} - так как в обычном php или html файле они будут видны.
-Протестируйте полученную страницу, если требуется – подкорректируйте пути до файлов стилей и картинок.

Итак, мы рассмотрели общую схему создания внешнего вида скриптов и приемы использования этой схемы для подключения к ней дополнительных страниц. Если у вас возникли какие либо вопросы – пишите мне, с удовольствием проконсультирую.