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

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

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

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

Суть данного подхода в том, что существуют единые для всего сайта (скрипта) блоки кода 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 функцию: include(“путь до файла”) ?>

- удалите все комментарии шаблонизатора вида {* комменатрий *} - так как в обычном php или html файле они будут видны.

-Протестируйте полученную страницу, если требуется – подкорректируйте пути до файлов стилей и картинок.

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