Простые движки PHP, сайты SSI, программы, статьи

Пример простого сайта SSI

Принцип технологии SSI становится более понятным при рассмотрении примера простого сайта SSI.

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

Отделяют и нижнюю часть страницы, в которой также содержатся повторяющиеся элементы, и называют ее footer. Часто отделяют и другие фрагменты, например, Главное меню. Но в этом примере простого сайта SSI отделены только header и footer. В файлах страниц размещены коды команд SSI, которые выполняют сборку каждой страницы из трех частей, в которых header и footer являются общими для всех страниц.

Такой принцип удобен тем, что для изменения структуры и оформления сайта нужно редактировать лишь два файла: header и footer.

Можно попробовать самостоятельно сделать этот сайт.

Для этого необходимо:

Создать файл header.shtml, открыть его посредством Блокнота и скопировать в него:

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Language" content="ru">
<TITLE>Простой сайт SSI</TITLE>
<STYLE>
#tbl {width: 100%; border-top: 1px #C0C0C0 solid}
#tdl {width: 17%; height: 350px; vertical-align: top; padding-top: 24px; border-right: 1px #C0C0C0 solid}
#tdr {width: 83%; vertical-align: top}
H1 {font-size: 130%; font-weight: 100; text-align: center}
H2 {font-size: 120%; font-weight: 100; text-align: center}
</STYLE>
</HEAD>
<BODY>
<FONT SIZE="+2">Простой сайт SSI</FONT>
<P>
<TABLE id="tbl"><TR>
<TD id="tdl">
<P><a href="index.shtml">Главная </a>
<P><a href="section2.shtml">Раздел 2</a>
<P><a href="section3.shtml">Раздел 3</a>
<P><a href="section4.shtml">Раздел 4</a>
</TD>

Затем создать файл footer.shtml и скопировать в него:

<HR width="98%" size="1px" color="#D9D9D9">
</BODY>
</HTML>

Создать файл index.shtml и скопировать в него:

<!---- Включить в страницу header.shtml ---->
<!--#require virtual="header.shtml"-->
<TD id="tdr">
<!------- Здесь вводятся текст и ссылки рисунков -------->
<H2>Главная страница</H2>


</TD>
</TR>
</TABLE>
<!---- Включить в страницу footer.shtml ---->
<!--#require virtual="footer.shtml"-->

И, наконец, создать файлы: section2.shtml, section3.shtml, section4.shtml, скопировать в них то же содержимое, что и в index.shtml, заменяя при этом в них заголовки:
<H2>Главная страница</H2> на: <H2>Раздел 2</H2>, <H2>Раздел 3</H2> и <H2>Раздел 4</H2>

Создание начальной основы сайта закончено. Для использования простого сайта SSI нужно разместить его на сервере. Все эти файлы должны находиться в одном каталоге (папке). На сервере обычно это папка с именем www.
Можно тестировать и на компьютере, если установлен сервер Apache.

При размещении этого сайта SSI на каком-либо хостинге нужно иметь ввиду, что некоторые серверы могут быть настроены таким образом, что файл index.shtml недопустим для загрузки, так как предусмотрена начальная загрузка лишь страниц index.html или index.htm. В таком случае нужно загрузить на сервер обычную статическую страницу index.html и файл header.shtml, который отличается от предыдущего тем, что содержит в меню соответствующий адрес ссылки главной страницы: index.html. Файл index.shtml удалить.

index.html

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Language" content="ru">
<TITLE>Простой сайт SSI</TITLE>
<STYLE>
#tbl {width: 100%; border-top: 1px #C0C0C0 solid}
#tdl {width: 17%; height: 350px; vertical-align: top; padding-top: 24px; border-right: 1px #C0C0C0 solid}
#tdr {width: 83%; vertical-align: top}
H1 {font-size: 130%; font-weight: 100; text-align: center}
H2 {font-size: 120%; font-weight: 100; text-align: center}
</STYLE>
</HEAD>
<BODY>
<FONT SIZE="+2">Простой сайт SSI</FONT>
<P>
<TABLE id="tbl"><TR>
<TD id="tdl">
<P><a href="index.html">Главная </a>
<P><a href="section2.shtml">Раздел 2</a>
<P><a href="section3.shtml">Раздел 3</a>
<P><a href="section4.shtml">Раздел 4</a>
</TD>
<TD id="tdr">
<!------- Здесь вводятся текст и ссылки рисунков -------->
<H2>Главная страница</H2>


</TD>
</TR>
</TABLE>
<HR width="98%" size="1px" color="#D9D9D9">
</BODY>
</HTML>

header.shtml

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Language" content="ru">
<TITLE>Простой сайт SSI</TITLE>
<STYLE>
#tbl {width: 100%; border-top: 1px #C0C0C0 solid}
#tdl {width: 17%; height: 350px; vertical-align: top; padding-top: 24px; border-right: 1px #C0C0C0 solid}
#tdr {width: 83%; vertical-align: top}
H1 {font-size: 130%; font-weight: 100; text-align: center}
H2 {font-size: 120%; font-weight: 100; text-align: center}
</STYLE>
</HEAD>
<BODY>
<FONT SIZE="+2">Простой сайт SSI</FONT>
<P>
<TABLE id="tbl"><TR>
<TD id="tdl">
<P><a href="index.html">Главная </a>
<P><a href="section2.shtml">Раздел 2</a>
<P><a href="section3.shtml">Раздел 3</a>
<P><a href="section4.shtml">Раздел 4</a>
</TD>

На предыдущую страницу