ГлавнаяПостроение сайта с помощью SSI при использовании файлов header и footer
|
Рассмотрим схему построения веб-сайта с использованием файлов header и footer. В данном случае необходимо весь html-код, отвечающий за дизайн (оформление) страницы убрать во внешние файлы:
Ниже приведена типичная схема расположения элементов на веб-странице. В данном случае имеем логотип в левом верхнем углу, чуть правее баннер. Ниже слева расположено меню сайта, а справа основной текст. Внизу страницы (в «подвале») находятся различные счетчики посещений и информация о сайте.
Нашей задачей будет разбить html-код данной страницы на отдельные куски и наиболее часто используемые элементы дизайна разместить в отдельных файлах, которые будем подключать к странице с помощью функции Листинг 1
<html>
<head> <title>Заголовок страницы</title> </head> <body> <table width="100%" border="1"> <tr> <td width="200">Лого</td> <td>Баннер</td> </tr> <tr> <td>Меню</td> <td>Текст</td> </tr> <tr> <td>Счетчик</td> <td>Copyright</td> </tr> </table> </body> </html>
Здесь весь код, выделенный красным цветом, убираем в файл header.html, а код, выделенный синим цветом, в файл footer.html. Таким образом, на странице остается следующий код: Листинг 2
<html>
<head> <title>Заголовок страницы</title> <--#include virtual="/header.html" --> Текст <--#include virtual="'/footer.html" -->
Файлы header.html и footer.html следующие: Листинг 3 – header.html
</head>
<body> <table width="100%" border="1"> <tr> <td width="200">Лого</td> <td>Баннер</td> </tr> <tr> <td>Меню</td> <td> Листинг 4 – footer.html
</td>
</tr> <tr> <td>Счетчик</td> <td>Copyright</td> </tr> </table> </body> </html>
Создание версии страницы для печати
Для создания версии страницы для печати необходимо модифицировать (изменять) html-код, отвечающий за дизайн (оформление) страницы. Весь html-код, отвечающий за оформление страницы, в данном примере располагается в файлах header.html и footer.html. Для вывода оформления страницы для печати будем анализировать информацию, находящуюся в строке запроса (QUERY STRING):
В данном случае, для вывода версии страницы для печати запрос к нашей странице будет выглядеть, например, следующим образом: Листинг 6
http://www.site.ru/page.html?print=yes
Примечание
В данном случае необходимо, чтобы после знака вопроса стояло слово print, потому что ниже мы будем проверять, присутствует ли именно это слово в строке запроса или нет
Здесь всё, что идет после знака вопроса (так называемая «строка запроса») заносится в переменную Листинг 7 – header.html и footer.html
<!--#if expr="$QUERY_STRING = /print/" -->
HTML-код варианта оформления страницы для печати <!--#else --> HTML-код обычного варианта оформления страницы <!--#endif -->
Примечание
1. В директиве <!--#if expr="$QUERY_STRING = /print/" -->print» стоит в слешах, это означает, что мы проверяем, есть ли в строке $QUERY_STRING это слово. В данном случае, наша строка $QUERY_STRING может быть такой «print=yes&и_что_нибудь_ещё» или такой «елкиprintпалки». В обоих случаях условная директива, приведенная выше, будет истинна.
Изменение элементов оформления страницы
В данном примере весь html-код, отвечающий за оформление страницы, убран в отдельные файлы (в файлы header.html и footer.html), и эти файлы подключаются к страницам сайта в момент запроса посетителем. Однако часто бывает необходимо немного изменить оформление страницы. Например, страницы, относящиеся к разным разделам сайта, могут выглядеть немного по-разному. Чтобы в этом случае не делать разные файлы header.html и footer.html для различных частей (разделов) сайта, а ограничиться только двумя – соответственно одним файлом header.html и одним файлом footer.html, необходимо в код нашей страницы ввести некую переменную, например, переменную Листинг 8
<html>
<head> <title>Заголовок страницы</title> <!--#set var="punkt_menu" value="1" --> <!--#include virtual="/header.html" --> Текст <!--#include virtual="/footer.html" -->
А на странице header.html или footer.html анализировать значение данной переменной и исходя из этого выбирать тот или иной html-код: Листинг 9 – header.html или footer.html
...
HTML-код ... <!--#if expr="$punkt_menu = 1" --> HTML-код #1 <!--#else --> HTML-код #2 <!--#endif --> ... HTML-код ...
Примеры сайтов
|
Примеры сайтов, созданных с помощью SSI, смотрите 
