Динамический сайт SSI HTML CSS, код скачать. Этап #3 MYsiteD

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

Суть идеи в разнесении всех элементов общего контента и уникального по разным документам с применением на стороне веб-сервера директив ssi. В результате браузер по запросу отображает уже сформированные страницы, как бы «склеенные» из этих разных элементов.

   ДЕМО | СКАЧАТЬ

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

Преимущества такого подхода изложены в прилагаемом видео-ролике.

При просмотре видео отображаемые экраны рекомендуется ставить на паузу.

Программный инструментарий

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

Для Windows существует множество готовых программных решений, выполняющих такое предназначение на базе веб-сервера Apache, системы управления базами данных MySQL и скриптового языка PHP - сокращенно WAMP. В России одним из старейших и популярных подобных продуктов является Denwer, не требователен к ресурсам, прост и надежен. Подробнее рассматривается ниже.

В среде Linux часто используют Xampp являющийся кроссплатформенным продуктом. Или можно обойтись связкой LAMP - аналог WAMP. Тема отдельного рассмотрения.

Установка Денвера

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

Второй вариант, воспользоваться официальным сайтом - http://www.denwer.ru/. Для получения продукта потребуется пройти процедуру регистрации.

В обоих случаях должны появиться на диске C: каталог WebServers с вложенной файловой структурой (1), а на «рабочем столе» три иконки: «Start ...», «Stop ...», «Restart ...» (2). Также рекомендуется разместить на «рабочем столе» ярлык файла SwitchOff.exe (3) из папки WebServers. Назначение - возможность отключения диска Z: , в будущем пригодится.

Далее необходимо проверить работоспособность полученного приложения:

1. Кликнуть на иконку «Start ...» (2), таким образом запустив Denwer. Станет доступен диск Z: со структурой (4), что фактически является копией папки WebServers (1)
2. В браузере перейти по адресу - http://127.0.0.1 , откроется экран похожий на представленное изображение
3. Перейти в раздел «Тестирование ...» и пройти предложенные тесты

Примечание

1. Если все тесты завершились успешно, то в случае появления запроса подтвердить корректность установки Денвера.

2. Во избежание неприятных сюрпризов, требуется отключать ПК от сети при работе Денвера и наоборот. При этом, доступность диска Z: сохраняется, если не будет закрыт специально.

3. При необходимости избавиться от Денвера нужно просто удалить директорию WebServers, предварительно закрыв само приложение, если оно находилось в рабочем состоянии.

4. Работоспособность приложения проверена в средах Windows 7 и 11.

К сожалению, проект больше не поддерживается авторами, но для предлагаемого здесь варианта кода каркаса стандартных функциональных возможностей достаточно с лихвой. В будущем можно обновиться до современных требований, воспользовавшись статьей «Локальный веб сервер ... с PHP 7».

Шаблон динамического сайта SSI HTML

Если тестирование в пункте «c» предыдущего подраздела прошло успешно, то необходимо получить архив рассматриваемого шаблона:

1. Закрыть Denwer, вернуться в Internet и нажать на ссылку - «СКАЧАТЬ»
2. На ПК диске Z: в директории home создать папку template2.ru, а в ней каталог www, в который распаковать полученный ранее архив
3. Снова выйти из Internet и опять запустить Denwer
4. В браузере перейти по адресу template2.ru, что есть url создаваемого динамического ресурса. В результате браузер должен отобразить экран, как на первом скриншоте

Структура

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

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

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

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

В документах с расширениями shtml и html коды выполнены по единым правилам языка разметки. Символ «s» лишь указывает, что этот материал должен обрабатываться с учетом технологии ssi. Это позволяет ускорить процесс динамического формирования, когда элементы общего контента по запросу подгружаются к текущей странице.

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

Фактически эти директивы являются расширением возможностей языка html, осуществляемых в рамках использования синтаксиса комментариев. Далее представлены примеры практической их реализации.

Такие директивы обладают обширными и гибкими возможностями на стороне сервера:

• вставка одного документа в другой;
• исполнение cgi-скриптов, программ и системных команд;
• вывод размера и времени редактирования материала;
• вывод переменных окружения;
• использование пользовательских переменных;
• обработка условий.

Включение механизма ssi и комплексная его настройка осуществляется самими пользователями в коде файла .htaccess .

Из всех упомянутых возможностей в нашей ситуации используются лишь две c демонстрацией примеров их применения и синтаксиса.

1. Вставка - unclude, соединение одного документа с другим.

2. Обработка условий if в исходном тексте при создании системы навигации.

Схема верстки

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

Заключение

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

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