ПРИМЕР ПРОСТОГО САЙТА SSI

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

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

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

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

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

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

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

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Language" content="ru">
<TITLE>ПРИМЕР ПРОСТОГО САЙТА SSI</TITLE>
</HEAD>
<STYLE>
BODY {margin: 0px; margin-bottom: 28px;}
#tbl {font-family: Arial; margin-bottom: 3px;}
#tdt {padding-left: 24px;}
#tdm {padding-left: 24px; font-size: 13px;}
#tdb {padding-top: 4px; font-family: Verdana; font-size: 103%; line-height: 140%; padding-left: 32px; padding-right: 28px; padding-bottom: 12px;}
.nav A {padding-right: 12px; font-weight: 600;}
A {color: #000000;}
P {margin-top: 8px; margin-bottom: 8px; line-height: 140%;}
H1 {font-size: 22px; font-weight: normal; text-align: center; margin-top: 4px; margin-bottom: 12px;}
H2 {font-size: 20px; font-weight: normal; text-align: center; margin-top: 4px; margin-bottom: 4px;}
</STYLE>
<BODY>
<DIV align="center">
<TABLE border="1" width="1002" cellspacing="0" cellpadding="0" bordercolor="#E1E1E1" id="tbl"><TR>
<TD width="1002" height="90" id="tdt">
<font size="+2">ПРИМЕР ПРОСТОГО САЙТА SSI</font>
</TD></TR><TR>
<TD width="1002" height="30" class="nav" id="tdm">
<a href="index.html">ГЛАВНАЯ</a>
<a href="section2.html">РАЗДЕЛ 2</a>
<a href="section3.html">РАЗДЕЛ 3</a>
<a href="section4.html">РАЗДЕЛ 4</a>
</TD></TR><TR>
<TD width="1002" height="532" valign="top" id="tdb">

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

</TD>
</TR>
</TABLE>
</DIV>
<CENTER>
Простой сайт SSI
</CENTER>
</BODY>
</HTML>

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

<H1>ГЛАВНАЯ СТРАНИЦА</H1>

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

<H1>РАЗДЕЛ 2</H1>

И, наконец, создать файлы: section3.html, section4.html, скопировать в них то же содержимое, что и в section2.html, заменяя при этом в них заголовки:
<H1>РАЗДЕЛ 2</H1> на <H1>РАЗДЕЛ 3</H1> и <H1>РАЗДЕЛ 4</H1>

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

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

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

Создать файл 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>
</HEAD>
<STYLE>
BODY {margin: 0px; margin-bottom: 28px;}
#tbl {font-family: Arial; margin-bottom: 3px;}
#tdt {padding-left: 24px;}
#tdm {padding-left: 24px; font-size: 13px;}
#tdb {padding-top: 4px; font-family: Verdana; font-size: 103%; line-height: 140%; padding-left: 32px; padding-right: 28px; padding-bottom: 12px;}
.nav A {padding-right: 12px; font-weight: 600;}
A {color: #000000;}
P {margin-top: 8px; margin-bottom: 8px; line-height: 140%;}
H1 {font-size: 22px; font-weight: normal; text-align: center; margin-top: 4px; margin-bottom: 12px;}
H2 {font-size: 20px; font-weight: normal; text-align: center; margin-top: 4px; margin-bottom: 4px;}
</STYLE>
<BODY>
<DIV align="center">
<TABLE border="1" width="1002" cellspacing="0" cellpadding="0" bordercolor="#E1E1E1" id="tbl"><TR>
<TD width="1002" height="90" id="tdt">
<font size="+2">ПРИМЕР ПРОСТОГО САЙТА SSI</font>
</TD></TR><TR>
<TD width="1002" height="30" class="nav" id="tdm">
<a href="index.shtml">ГЛАВНАЯ</a>
<a href="section2.shtml">РАЗДЕЛ 2</a>
<a href="section3.shtml">РАЗДЕЛ 3</a>
<a href="section4.shtml">РАЗДЕЛ 4</a>
</TD></TR><TR>
<TD width="1002" height="532" valign="top" id="tdb">

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

</TD>
</TR>
</TABLE>
</DIV>
<CENTER>
Простой сайт SSI
</CENTER>
</BODY>
</HTML>

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

<H1>ГЛАВНАЯ СТРАНИЦА</H1>

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

<H1>РАЗДЕЛ 2</H1>

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

Но этот сайт для примера. В дальнейшем следует использовать полнофункциональный сайт SSI.

Описание полнофункционального сайта SSI