Лабораторная работа №7: Server Side Includes

Откройте в текстовом редакторе стартовую вашего страницу сайта, хранящуюся в файле index.html, скопируйте в буфер обмена фрагмент кода, описывающий таблицу заголовка веб-страницы, и поместите его в отдельный текстовый файл. Этот элемент дизайна будет единым для всех страниц нашего сайта и впоследствии мы станем просто подключать его к другим страничкам нашего ресурса, используя соответствующие директивы SSI. Однако вы наверняка уже обратили внимание на тот факт, что оформление верхней части сайта действительно идентично для всех составляющих ресурс документов, однако внешний заголовок, описываемый в коде HTML документа при помощи тегов <TITLE> и </TITLE>, может варьироваться от страницы к странице. Решение этой проблемы очевидно: мы сохраним содержимое внешнего заголовка в строковой переменной с именем TITLE и будем просто подставлять значение этой переменной в качестве заголовка. Таким образом, после незначительного редактирования этот фрагмент кода будет выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

<AREA ALT="Домой!" SHAPE="circle" COORDS="349.78.21"

HREF="http://www.myhost.ru/index.html">

</MAP>

<tr>

<img border="0" src="images/title.gif" width="700" height="101"

usemap="#title">

</center>

</td>

</tr>

<tr>

</center>

</td>

</tr>

</TABLE>

</CENTER>

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

<A HREF="index.shtml">Главная</A><BR>

<A HREF="hobby.shtml">Увлечения</A><BR>

<A HREF="p1ctures.shtml">Фотографии</A><BR>

</DIV>

Теперь из исходного документа перенесем через буфер обмена в отдельный файл фрагмент кода, описывающий нижнюю часть веб-страниц, и сохраним его под именем footer.html:

<tr>

</center>

</td>

</tr>

</TABLE>

</CENTER>

<BODY>

</HTML>

Теперь необходимо подумать о способах будущего обновления нашего ресурса. Ради удобства создадим в папке localhost вложенную папку txt, в которую мы будем помещать все текстовые файлы, содержащие информационное наполнение наших веб-страниц. И первым из них станет файл index.txt, в который мы скопируем через буфер обмена все, что выводилось до этого в контентном поле стартовой страницы нашего сайта

<Hl>ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</H1>

<P><IMG SRC="images/mypicture.jpg" width="ширина рисунка" height="высота рисунка» align="left" border="0"> Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность заглянуть на мою страничку во Всемирной Сети. Здесь Вашему вниманию будет предложена информация <EM> о моих увлечениях, моей биографии, моих друзьях, работе и семье </EM>. В отдельной рубрике я опубликую несколько собственных фотографий. Надеюсь, они Вам понравятся. <P> В последнее время мой сайт претерпел ряд существенных изменений, благодаря которым он, на мой взгляд, стал выглядеть значительно лучше и профессиональнее. Этот проект будет постоянно совершенствоваться, поэтому его оформление время от времени будет меняться, а количество полезных функций-возрастать.

<P>Заходите ко мне почаще!

Осталось лишь соответствующим образом изменить код самой индексной страницы сайта и снова сохранить ее в папке localhost, но уже под именем index.shtml. Содержащийся в ней код будет выглядеть теперь следующим образом:

<tr>

<!—Навигация -->

</center>

</td>

<!—Содержимое веб-странички-->

</td>

</tr>

</TABLE>

</CENTER>

Теперь, если мы захотим создать на основе данного шаблона новую веб-страничку, нам достаточно будет скопировать этот код в другой файл, сохранить его на диске с расширением .shtml и поменять значения переменной TITLE, а так же изменить имя текстового файла, в котором хранится содержимое странички. Переоформление меню навигации теперь также не представляет никаких сложностей: для этого нам достаточно открыть файл menu.html, содержащий всего-навсего шесть строк кода, и внести в него любые изменения – эти изменения незамедлительно отобразятся на всех страницах сайта. Ну а редактирование информационного содержимого веб-странички вообще превращается в приятное и неутомительное занятие, поскольку править текст, содержащий минимум тегов разметки, - гораздо приятнее, чем копаться в коде, представляющем собой нагромождение огромного количества инструкций HTML. Теперь, запустив http-сервер Apache и вызвав наш локальный веб-сайт по его IP-адресу, мы увидим в окне браузера веб-страницу, внешне ничем не отличающуюся от обыкновенного html- документа, но состоящую в то же время из пяти отдельных файлов, не считая графических элементов.

ЗАДАНИЕ.

Ввести приведенную выше программу в Блокноте (Notepad) и отладить ее.