Что такое SSI или как строить сайт из кирпичиков

Что такое ssiHTML – хорошо. HTML+CSS – вообще здорово! Превосходный дизайн, легкость управления дизайном. И все же…

Вот у Вас на сайте уже два-три десятка страниц. И это не предел. А Вы замечаете уже, что добавление каждой новой страницы становится все более хлопотным делом. Ведь на новую страницу нужно поставить ссылку в меню сайта. А меню на сайте имеется если не на всех страницах, то, по крайней мере, на многих. 

Следовательно, добавляя очередную страницу на сайт, Вам приходится обновлять все страницы, на которых имеется меню. Ведь посетители должны иметь возможность перейти на эту страницу с любой другой страницы сайта, на которой имеется меню. Да, да, вот из-за такой мелочи, как добавление всего одной ссылки в меню, вам приходится обновлять столько страниц.

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

Неужели нет выхода из этой ситуации? Как бы сделать так, чтобы новая страница не приносила столько забот? Вы уже догадались? Конечно же, выход есть!

И здесь нам на помощь приходит технология SSI. Еще одна аббревиатура, которую Вам придется запомнить. Сокращение с английского Server Side Include – включение на стороне сервера. Загадочно?

Представьте детскую головоломку или пазлы, где из отдельных фрагментов нужно собрать целую картинку. Можете разбить страницу своего сайта на отдельные фрагменты, повторяющиеся на всех страницах?

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

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

Вы уже уловили, как это упрощает работу с сайтом? Если обычно в HTML Вы повторяли на каждой странице одни и те же фрагменты, то теперь этого делать не нужно. Для этого достаточно загрузить на сервер один файл с описанием хедера, один файл с описанием меню, такой же файл с описанием футера… Остается текстовая часть, которая будет различна для каждой страницы. А на самой странице Вы лишь прописываете комментарии, в каком именно месте будет располагаться тот или иной фрагмент.

На практике это выглядит примерно так:

<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--#include virtual="/head.htm" -->
<!--#include virtual="/menu.htm" -->

А здесь будет расположена информация конкретной страницы сайта

<!--#include virtual="/foot.htm" -->
</table>
</body>
</html>

Вы заметили, что на странице вставляются три внешних файла — head.htm, menu.htm и foot.htm. Сама же страница должна иметь расширение shtml или shtm. Если главная страница называется index.shtml, то это указывает серверу на то, что он должен обратить внимание на соответствующие комментарии в теле страницы и вместо них вставить html код, содержащийся в указанных файлах.

Теперь Вам не нужно обновлять множество страниц лишь из-за одной ссылки. Достаточно добавить новую ссылку в один-единственный файл меню и этот файл будет одинаково выводиться на всех страницах, на которых ему положено быть.

Только замечу: чтобы реализовать все то, о чем говорилось, нужно выбирать такой хостинг, который поддерживает технологию SSI. Практически все платные хостинги предоставляют такую возможность. Многие из бесплатных тоже поддерживают SSI. Но не все. Обращайте внимание при выборе хостинга на данную возможность.

Примерно так выглядит файл head.htm

<body>
<table width="900" align="center" cellpadding="0" cellspacing="0" bgcolor="#3A6B8e">
<tr>
<td width="346" height="142"><img src="" width="346" height="142"></td>
<td width="554" valign="top" ><h1></h1>
<div id="logo"></div></td>
</tr></table>
<hr size="2" color="#3A6B8e" width="900">
<table width="900" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style='margin-top:20;'>
<tr>

Аналогично сделаны menu.htm и foot.htm.

На самом деле на этом не ограничиваются возможности SSI. Об остальном я расскажу в ближайшее время.

Оцените статью
Добавить комментарий