Динамический сайт 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: , в будущем пригодится.
Далее необходимо проверить работоспособность полученного приложения:
- Кликнуть на иконку « Start . » (2), таким образом запустив Denwer. Станет доступен диск Z: со структурой (4), что фактически является копией папки WebServers (1)
- В браузере перейти по адресу — http://127.0.0.1 , откроется экран похожий на представленное изображение
- Перейти в раздел « Тестирование . » и пройти предложенные тесты
1. Если все тесты завершились успешно, то в случае появления запроса подтвердить корректность установки Денвера.
2. Во избежание неприятных сюрпризов, требуется отключать ПК от сети при работе Денвера и наоборот. При этом, доступность диска Z: сохраняется, если не будет закрыт специально.
3. При необходимости избавиться от Денвера нужно просто удалить директорию WebServers , предварительно закрыв само приложение, если оно находилось в рабочем состоянии.
4. Работоспособность приложения проверена в средах Windows 7 и 11.
К сожалению, проект больше не поддерживается авторами, но для предлагаемого здесь варианта кода каркаса стандартных функциональных возможностей достаточно с лихвой. В будущем можно обновиться до современных требований, воспользовавшись статьей «Локальный веб сервер Денвер установка обновление с PHP 7».
Шаблон динамического сайта SSI HTML
Если тестирование в пункте «c» предыдущего подраздела прошло успешно, то необходимо получить архив рассматриваемого шаблона:
- Закрыть Denwer, вернуться в Internet и нажать на ссылку — «СКАЧАТЬ»
- На ПК диске Z: в директории home создать папку template2.ru , а в ней каталог www , в который распаковать полученный ранее архив
- Снова выйти из Internet и опять запустить Denwer
- В браузере перейти по адресу template2.ru , что есть url создаваемого динамического ресурса. В результате браузер должен отобразить экран, как на первом скриншоте
Структура
В значительной степени демонстрируемая картинка похожа на структуру описанную в предыдущей статье, но имеются отличия. В коренной директории теперь находится восемь папок и пять файлов. Один из них index — Главная страница, остальные технические.
Из восьми имеющихся папок две новые — general-includes и general-styles , остальные разделы. В general-styles содержится знакомый файл style.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 с помощью соответствующих селекторов.
Заключение
Рассмотрена схема, создания простого динамического сайта, который не многим сложнее статического, но гораздо удобнее в эксплуатации. Потенциально обладающий значительно большим функционалом, что постепенно реализуется на этом блоге.
А пока завершим начатое. В следующей статье рассмотрим процесс открытия поисковикам доступа к создаваемым сетевым ресурсам, включая динамические, и публикацию сайта html в Интернет пространстве.
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5.
Научитесь создавать интерактивные сайты, активно работающие с данными, воплощая в них мощные комбинации свободно распространяемых технологий и веб-стандартов.
Для этого достаточно обладать базовыми знаниями языка HTML. Это популярное и доступное пособие поможет вам уверенно освоить динамическое веб-программирование с применением самых современных языков и технологий: PHP, MySQL, JavaScript, CSS и HTML5.
С каждой из упомянутых технологий вы познакомитесь отдельно, научитесь применять их в комбинации друг с другом, а по ходу изложения освоите ценные практические приемы веб-программирования.
В конце книги весь изученный материал будет обобщен: вы создадите полнофункциональный сайт, работающий по принципу социальной сети. Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
Откройте для себя базу данных MySQL. Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности. Пользуйтесь фундаментальными возможностями языка JavaScript.
Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта. Изучите основы CSS для форматирования и оформления ваших страниц.Познакомьтесь с возможностями HTML5: геолокацией, работой с аудио и видео, холстом.
Фактически любой человек, стремящийся изучить основные принципы, заложенные в основу технологии Web 2.0, известной как AJAX, сможет получить весь-AJAX, сможет получить весьма обстоятельные сведения об основных технологиях: PHP, MySQL, JavaScript, CSS и HTML5, а также изучить основы библиотеки jQuery.
Эта книга предназначена для тех, кто хочет изучить способы создания эффективных и динамичных сайтов. Сюда можно отнести веб-мастеров или специалистов по графическому дизайну, которым уже приходилось создавать статические сайты и у которых есть желание вывести свое мастерство на следующий уровень.