Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Что такое SSI? Собираем web-страницу из кусочков.

Автор: Андрей Краснокутский

Дата: 2010-05-06

Собираем web-страницу из кусочков

SSI (Server Side Includes) - включения на стороне сервера, а точнее это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия: например, вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа Браузера) и другие.

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

Физически эти блоки представляют собой просто отдельные HTML-файлы, содержащие часть кода, нужную для выполнения их задачи. Например такие элементы сайта как Шапка, Меню, Подвал и т.д. повторяются на всех web-страницах сайта, так почему бы их не вынести в отдельные файлы и просто не подгружать в нужное место каждой html-страницы при загрузке запрашиваемой web-страницы Посететелем. А сборку готовой web-страницы давайте доверим серверу.

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: .shtml или .shtm, наличие такого расширения и заставляет web-сервер предварительно обрабатывать web-странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно .shtml.

Полная страничка формируется web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария:

<!--#command param="value" -->

где:

# - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.

SSI-команд насчитывается около десятка, в данной статье будет рассмотрим только самые употребляемые. Самая популярная команда - это команда включения содержимого одного файла в другой:

<!--#include virtual="/path/file.ssi" -->

где:

include - команда вставки;
virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual);
"/path/file.ssi" - путь к включаемому файлу.

Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для Браузеров, они получают исключительно корректный HTML-код.

 

Следующая команда - это команда установки значения переменной:

<!--#set var="pic" value="picture.gif"-->

где:

var - команда установки значения переменной;
pic - имя переменной;
picture.gif - значение переменной.

В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты.

Перед тем, как показать реальный пример использования переменных в SSI-включениях, рассмотрим некоторые команды, применяемые при работе с переменными. Во-первых, это команда печати значения переменной:

<!--#echo var="pic" -->

Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст:

<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->

После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:

<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->

condition - условие для сравнения.

В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип Браузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих Обозревателях. Вот пример использования условного оператора:

<!--#set var="Monday" -->
<!--#if expr="$Monday " -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->

В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа Листинг 1, полагая, что SSI-вставки находятся в каталоге /ssi:

Листинг 1.

<!--Файл index.shtml-->
<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->
<!--#include virtual="ssi/header.shtml" -->
<!--Здесь находится текст нашей странички-->
<!--#include virtual="ssi/footer.shtml" -->

 

Следующие файлы вставки Листинг 2 шапка сайта - header.shtml и Листинг 3 подвал сайта - footer.shtml как мы и договорились лежат в папке ssi:

Листинг 2.

<!--Файл header.shtml-->
<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords" -->">
<meta name="description" content="<!--#echo var="description" -->">
</head>
<body>

 

Листинг 3.

<!--Файл footer.shtml-->
</body>
</html>

 

Как видите, основной документ предельно упрощен и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички.

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

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

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

 

Читайте так же:

FTP протокол. Закачать сайт по FTP. FTP-клиент.

Форматируем текст html-страницы.

Спецсимволы в HTML.

Кодировка web-страниц на сайте.

Как сделать красивую 3D обложку. Практическое руководство. Скачать бесплатно.

Анимированные картинки Цветы. Сделайте подарок своим Любимым ...

 

Просмотров: 7849


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Андрей
Дата: 2010-05-08

Спасибо, Андрей. Так получилось, что я как раз морочился с этой задачей - сокращением времени на обслуживание сайта: статья в тему.

Комментарии добавил(а): Oleg L
Дата: 2010-05-13

А сборка готовой web-страницы таким образом дает ли нагрузку на сервер? Не предложит ли хостинговая компания перейти после этого на выделенный сервер?

Комментарии добавил(а): Андрей_К
Дата: 2010-05-13

Больше года, когда у меня был простой HTML сайт я пользовался SSI. Сайт жил на Гудзоне (если интересно баннер сверху) никаких предъяв со стороны Хостера не было. Нагрузка конечно дополнительная возникает, но небольшая, не переживайте. Но если Вам из-за этого будут претензии от хостера - смело его меняйте.

Комментарии добавил(а): Евгений
Дата: 2011-02-26

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

Комментарии добавил(а): kskd
Дата: 2011-09-29

чтобы переменные SSI с русским текстом не превращались в кракозябры при выводе, надо в echo перед var добавить encoding="none". должно получиться <!--#echo encoding="none" var="SOME_VAR" -->

Комментарии добавил(а): RY
Дата: 2013-04-01

А как бы сделать работающее SSI на PHP-странице?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT