Задание №1 - Bitrix - Интеграция дизайна (экзамен 1)
Войти

Задание №1 - Bitrix - Интеграция дизайна (экзамен 1)

Задание №1 - Bitrix - Интеграция дизайна (экзамен 1)

Общие требования

  • Создать шаблон сайта на основе предоставленной HTML верстки, папка html в архиве с материалами.
  • В этом задании создать только общий шаблон сайта, без внедрения в него компонентов!
  • Предоставленную верстку разделить на header, footer и контентную частью, создать шаблон сайта, выполнить пункты задания.
  • Шаблон создается один и для главной и для внутренних страниц.
  • Задать ID шаблона: exam1, название шаблона: Экзамен N1
  • Созданный шаблон применить для отображения по умолчанию для всего сайта.

1. Анализ шаблона

Процедура внедрения

  1. 1. Определить сколько шаблонов и разделение верстки на header и footer.
  2. 2. Какие блоки в header и footer отличаются.
  3. 3. Создание нового шаблона, перенос HTML верстки в файлы шаблона.
  4. 4. Внедрение в header и footer API функций, использование констант и языковых файлов.

2. Создание шаблона

Очень важная часть работы с сайтом - это внедрение шаблона. Итак приступим.

  1. 1. Переходим в административный раздел сайта.
    Настройки -> Настройки продукта -> Сайты -> Шаблоны сайтов

  2. 2. Жмем кнопку Добавить шаблон.
  3. 3. Заполняем поля открывшейся формы.
    • «ID» - exam1
    • «Название» - Экзамен N1
    • «Описание» - Экзамен N1
  4. 4. Ниже в текстовую область вставляем тэг #WORK_AREA# (иначе шаблон просто не сохранится).
  5. 5. Нажимаем Сохранить.
  6. 6. Открываем через FTP-клиент папку нашего сайта
  7. 7. Создаем папку local в корне сайта
  8. 8. В папке local создаем папку templates, в которой будет храниться шаблон нашего сайта
  9. 9. Переносим созданный нами шаблон сайта exam1 из папки /bitrix/templates в папку /local/templates.
  10. 10. Заходим в список сайтов по пути Настройки -> Настройки продукта -> Сайты -> Список сайтов, находим наш сайт и в его настройках сохраняем наш шаблон по умолчанию.

3. Разбиваем сайт на header, footer, content и переносим в наш шаблон

  1. 1. Открываем папку /bitrix/templates/exam1. Это папка основного шаблона, который мы только что создали.
  2. 2. Ищем в этой папке файлы: header.php и footer.php и открываем на редактирование.
  3. 3. Также открывем папку шаблона html. Открываем на редактирование файл inner.html и копируем из него строчки, начиная с первой и заканчивая строчкой заголовка первого уровня: h1 Заголовок страницы . В этом заголовке мы будем помещать заголовки страниц.

  4. 4. Вставляем скопированный текст в файл header.php
  5. 5. Далее из файла копируем все то, что идет после контента и помещаем в footer.php.

  6. 6. Затем в нашей заготовке открываем файл main.html копируем основной контент страницы и вставляем на очищенную страницу index.php, расположенной в корне сайта.

4. Копируем материалы

  1. 1. Копируем все папки с нашими заготовками (img, css, fonts, js) и фавиконку (favicion.ico) в наш шаблон /local/templates/exam1.
  2. Примечание - пункты 2 и 3 необязательные

  3. 2. Теперь будем работать со стилями нашего шаблона exam1. Открываем на редактирование файл template_styles.css в папке bitrix/templates/exam1. Также на редактирование открываем файл style.css в папке «css». Копируем содержимое файла style.css в файл template_styles.css. После копирования удаляем файл style.css
  4. 3. Теперь в файле template_styles.css нужно поменять пути ко всем файлам для текущей папки (везде удалить «../»)

5. Подключаем к логике Bitrix

Примечание: далее представлено подключение к логике Bitrix двумя способами old - старый способ, D7 - новый способ. Какой выбрать путь решать Вам

index.php

Интегрируем index.php

header.php

Интегрируем header.php D7
Интегрируем header.php Old

footer.php

Интегрируем footer.php
Теги:
php