Создать сайт html css + динамические страницы ssi. Этап #3

Такой подход создания сайта html css позволяет относительно легко и быстро превратить статический веб-ресурс в динамический, решая, тем самым, известные проблемы статических сайтов. Это простой и всем доступный способ, основанный на отделении общих страничных блоков от информационного контента и на использовании директив SSI. Все это в комплексе дает возможность на стороне веб-сервера (рассматривается Apache) объединять разные документы html в один, таким образом, динамически формируя веб-страницы.

   Демо / Скачать

Если, над скриншотом нажать на выражение «Демо» и посмотреть на открывшееся изображение, то можно подумать, что от предшествующего варианта этот шаблон отличается лишь наличием третьей колонки. Впечатление обманчивое. Это совершенно другой шаблон, умеющий создавать динамические страницы.

Совет

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

Программное окружение

В настоящем случае для отображения и отладки сайта лишь одних браузера и редактора будет недостаточно. Теперь, создать сайт html css будет немного сложнее, необходим еще и веб-сервер (в качестве локального или на хостинге). Обычно в таких случаях используют локальные десктопные решения. Например OpenServer, Xampp и Denwer. Их гораздо больше, но я перечислил лишь с которыми имел дело. Если разработка будет вестись в среде Linux, то подойдет Xampp, поскольку является кроссплатформенным продуктом.

Использование Denwer-а

Для Windows из трех вариантов предпочитаю Denwer. Он менее требователен к ресурсам, прост и надежен. Правда, автор (Дмитрий Котеров) свой проект уже не поддерживает, но для рассматриваемого здесь шаблона имеющихся возможностей пока будет вполне достаточно. А впоследствии нетрудно воспользоваться бесплатными услугами сторонников этого проекта и обновиться до современных требований.

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

Запустить приложение очень просто, необходимо лишь набрать адрес, как это указано на скриншоте (результат запуска) слева стрелкой. Чуть ниже находится предложение проверить установку, запустив прилагаемые тесты. Рекомендуется их пройти.

Далее, необходимо вернуться в сеть и получить веб-архив, нажав над скриншотом на выражение «Скачать». Зайти на диск z:, использую директорию home и создать папку template2.ru, в ней создать очередную папку www, в которую распаковать полученный ранее архив. Снова выйти из сети и перезапустить Denwer или стартовать заново, если необходимо. На последнем этапе в браузере адресной строки вписать template2.ru , что есть адрес (URL) создаваемого ресурса. В результате должно появиться изображение, как на первом скриншоте.

Cтруктура

В значительной степени она похожа на структуру описанную ранее, но есть некоторые отличия. В коренной директории теперь находится восемь папок и пять файлов, один из них c расширением html (заготовка Главной страницы). Остальные технические (см. предыдущую статью).

Из восьми имеющихся папок две новые (general-includes и general-styles), остальные уже знакомые папки разделов. В general-styles содержится тоже знакомый файл style.css, который раньше находился в корневой директории. А вот содержимое general-includes необходимо рассмотреть более подробно. В ней находятся именно те общие блоки (в виде файлов с расширениями shtml), которые упоминалось ранее:

• preamble — самая верхняя часть кода, которая практически не меняется, однажды написанная;
• header — остальная верхняя часть и шапка с названием сайта;
• left — левая часть (первая колонка с меню навигации);
• right — правая часть (третья колонка, где представлены ссылки на статьи в разделах);
• footer - нижняя часть.

Для наглядности, их применение представлено на прилагаемой условной схеме шаблона.

В сущности все эти пять файлов ничем не отличаются от других с расширениями html (их код выполнен на едином языке). Дополнительная же буква «s» лишь дает понять веб-серверу (для ускорения времени загрузки), что эти файлы должны обрабатываться средствами SSI, динамически подгружаясь к текущему документу index.html, фактически будущей странице.

Использование директив SSI

Данные директивы обладают довольно обширными и гибкими возможностями на стороне веб-сервера. А их настойка осуществляется самими пользователями хостинга с помощью внесения изменений в файл .htaccess (стр. 38-44). Из всех возможностей в нашем случае используется лишь две их них:

• вставка (unclude) при соединении одного документа с другим (используется в первых и последней строках index.html, а также в последней строке right.shtml);
• обработка условий исходного текста - используется при создании системы навигации в документах header.shtml (стр. 6-10) и left.shtml (стр. 3-47).

Результат верстки

Таким образом, как видно из условной схемы, шаблон состоит из шести различных блоков, которые по запросу с помощью директив SSI собираются в единое целое, динамически формируя требуемую страницу. А значения свойств им передаются из style.css с помощью соответствующих селекторов.

Заключение

Создать сайт html css с динамическими страницами SSI не многим сложнее, чем статический, но гораздо более удобный в эксплуатации. Кроме того, он может обладать значительно большим функционалом, что будет рассмотрено позднее.

А пока завершим начатое и откроем к нему доступ.