Инструкция по работе с HTML-модулем ANT087_PROGRESS

1. Начало работы:

Прежде всего, у Вас уже должна быть распакована обертка шаблона. Данный модуль будет интегрироваться Вами вручную.

Корректная работа модуля подразумевает, что все пункты данной инструкции будут выполнены в строгом порядке.

Также подразумевается, что Вы владеете базовыми навыками HTML и CSS - на уровне копирования разметки и стилей, т. п.

Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!

Для комфортной работы с модулем рекомендуем использовать редактор Visual Studio Code.

1.1 Структура модуля

Модуль имеет следующую структуру файлов и папок:

• css - стили модуля;
  • ant087_progress.css - стили, относящиеся только к модулю;
  • bootstrap.min.css - стили Bootstrap;
  • style.css - стили общего шаблона.
• img - медиа модуля;
• js - скрипты модуля;
  • ant087_progress.js - JS-скрипты, относящиеся только к модулю;
  • bootstrap.min.js - скрипты Bootstrap;
  • jquery.js - библиотека jQuery;
  • jquery-migrate.min.js - необходимые компоненты jQuery.
• index.html - базовое представление модуля;
• full.html - представление модуля рядом с другими секциями сайта;

1.2 С чем будем работать

Нам потребуются только те элементы, которые касаются конкретно самого модуля. То есть, следующие файлы мы НЕ трогаем:

• ./css/bootstrap.min.css
• ./css/style.css
• ./js/bootstrap.min.js
• ./js/jquery.js
• ./js/jquery-migrate.min.js

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

Если Вы еще не скачали обертку шаблона, то самое время сделать это прямо сейчас!

Откройте скачанный архив обертки шаблона. Обертка шаблона представляется в двух вариантах:

• clear template - полностью чистая обертка. Начните добавлять модули с нуля.
• default template - шаблон, в который уже включены модули по умолчанию. Глядя на этот пример, вы сможете добавлять модули, как по образцу.

В архиве обертки шаблона Вы также найдете подробное руководство, которое рекомендуется к прочтению.

Итак, предположим, что мы выбрали вариант default template. В нем уже присутствуют стандартные модули. Они отлично подходят для того, чтобы разобраться, как подключать модули.

1.2 Подключение модулей в шаблон

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

1. Скопируйте файл ant087_progress/css/ant087_progress.css в default template/css
2. Скопируйте содержимое папки ant087_progress/img в default template/img
3. Поскольку данный модуль не содержит JS-скриптов, то файл ant087_progress/js/ant087_progress.js можно не копировать
4. Откройте файл ant087_progress/index.html в редакторе VS Code, выделите и скопируйте строки с 33 по 92, т.е., содержимое тега main
5. Откройте HTML-файл шаблона в редакторе VS Code, где необходимо использовать модуль, в данном случае это default template/index.html и вставьте скопированную разметку внутрь тега main:
   
6. В этом же файле, в теге head, подключите стили модуля:
   
7. Готово! Модуль подключен к Вашему шаблону.
8. Основные цвета модуля: #1089ff и #23374d. Откройте файл css/ant087_progress.css и замените их на свои.

Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!

Модуль должен отображаться точно так же, как Вы это видите в онлайн-конструкторе.

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