Цель: изучить шаблоны HTML и создать страницу, состоящую из шаблонов.

Задачи:

• ознакомиться с шаблонами;
• научиться пользовать шаблонами .kit.

В результате выполнения урока получится следующая веб-страница (рисунок 1.1):

Подготовка к работе

Для начала стоит создать папку проекта. Создайте папку на рабочем столе или в любом другом удобном для вас месте. Назовите папку project.

Создайте внутри следующие папки и файлы (рисунок 1.2):

В папке css создайте файл style.css.

Проект будет реализовываться в следующих программных средствах:

• Sublime Text 3;
• Prepros.

1. Запустите программу Sublime Text 3. В левом верхнем углу выберите File – Open Folder… (рисунок 1.3)

2. Найдите через проводник ранее созданную папку project, нажмите Выбор папки.

3. Слева появится панель Folders (рисунок 1.4):

4. Создайте следующие файлы:

• В папке project файл index.kit (рисунок 1.5):

5. Удостоверьтесь, что файлы появились в проводнике Sublime Text (рисунок 1.6)

6. Запустите программу Prepros. Посередине нажмите кнопку browse и найдите через проводник ранее созданную папку project, нажмите Add Project (рисунок 1.7):

Мы создали базовую структуру проекта, настроили рабочую среду, создали начальные файлы для создания нашего сайта.

Шаблоны .kit

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

1. В папке project создайте папку html_blocks (рисунок 1.8):

2. В созданной папке создайте файлы menu.html и intro.html (рисунок 1.9):

3. Откройте файл index.kit и задайте ему стандартную структуру, заодно подключив файл стилей (рисунок 1.10):

4. Подключаются блоки с помощью следующей конструкции (рисунок 1.11):

5. Сохраните файл index.kit сочетанием клавиш ctrl + s. Можно заметить, что Prepros при этом скомпилировал файл index.html (рисунок 1.12):

Так проводится сборка проекта, состоящего из разных блоков.

Пример использования

1. В файле menu.html создайте предполагаемое меню для сайта (рисунок 1.13):

2. В файле intro.html создайте некоторое наполнение (рисунок 1.14):

3. Сохраните все файлы, проверьте результат в браузере (рисунок 1.15):

Как видно все блоки собрались в файле index.kit и скомпилировались программой Prepros в файл index.html. Если в него заглянуть можно будет увидеть, что все блоки кода собраны в одном файле (рисунок 1.16):

Можно немного разнообразить существующий проект, добавив к нему стилей (рисунок 1.17):

Проверив результат в браузере (рисунок 1.18) можно убедиться, что стили применяются к вставляемым блокам, поэтому необязательно создавать отдельный файл стилей для каждого существующего блока, а можно прописать все стили в одном файле и применить его к главному html-файлу, где собираются все html блоки.