Логотип блога MY

 ВЕБ-ТЕХНОЛОГИИ

 Домен itworldmy.ru - блог MY

начинающим

 Поиск  

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

 Второй опыт самый мудрый

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


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

Пример динамического сайта SSI

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

Совет

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

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

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

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

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

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

Запуск Денвера

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

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

Cтруктура

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

Из восьми имеющихся папок две новые (_includes и _styles), остальные уже знакомые папки разделов. В _styles содержится тоже знакомый файл style.css, который раньше находился в корневой директории. А вот содержимое _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 не многим сложнее, чем статический, но гораздо более удобный в эксплуатации. Кроме того, он может обладать значительно большим функционалом, что будет рассмотрено позднее.

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



Комментарии
Опубликовано: 0
Ждущих публикации: 0


Ваше имя:
(не более 20 символов)

Ваше сообщение:
(не более 1000 символов)



В разделах


Опрос 1

Какая у Вас система ?


   Linux - 5
   Windows - 5
   Обе - 1
   Android - 2
   iOS - 0
   Другие - 0

Всего: 13 чел.


Опрос 2

Какой формат док-ов пользуете?


   ODF - 3
   MS OOXML - 3
   Оба - 1
   Что это? - 2

Всего: 9 чел.


Данные

Время  - 05:26:04
Дата - 29.11.2021

Страница:
 - обновлена - 06.11.2021
 - посещений - 123

Сейчас:
 - на сайте - 1
 - переходов - 1

↑ ВВЕРХ