Динамический сайт ssi html css код скачать узнать #3 MYsiteD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

2.1 Структура

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

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

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

Если чтение кодов html css вызывает затруднение, то рекомендуется обратиться к изучению основ.

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

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

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

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

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

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

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

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

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

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

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

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

А значения свойств им передаются из style.css с помощью соответствующих селекторов css.

⚬ ⚬ ⚬

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

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