Интеграция дизайна в систему
Однако лучше размещать их в специальной папке самого шаблона, чтобы не путаться.
¦ Откройте папку, где расположен шаблон (/bitrix/templates/test).
¦ Создайте в ней папку /images.
В этой папке мы будем хранить все картинки для фона сайта.
ЗАМЕЧАНИЕ
Поместить картинки можно и в корневую папку Images, но размещение изображений по предлагаемому нами варианту имеет один плюс: при копировании (или экспорте) шаблона вам не придется заново импортировать картинки в новый шаблон. Копия создастся сразу с папкой с картинками.
Загрузить изображения в эту папку можно двумя способами: правильным и быстрым. Правильным это значит с использованием механизма системы.
Однако данный механизм удобен при загрузке малого количества файлов. Быстрый способ позволит загрузить много картинок за один шаг, а при создании шаблона перед нами будет стоять именно такая задача.
Мы опишем оба способа. Начнем с правильного.
¦ Перейдите в папку Контент ^ Структура сайта ^ Файлы и папки ^ /bitrix/templates/test/images.
¦ Щелкните по кнопке Загрузить файл. Откроется форма для загрузки файлов.
В форме только пять строк, то есть можно загрузить за один раз только пять файлов. Поэтому форма и неудобна для массовой загрузки.
¦ Щелкните по кнопке [ Обзорі |. Откроется системный диалог выбора файла для загрузки.
¦ Укажите путь к файлу. Файлы фоновых картинок находятся на CD в папке Сайт\іг?\.
¦ Повторите два последних действия для всех строк формы.
¦ Щелкните по кнопке Сохранить - Файлы загрузятся в указанную папку.
Так как файлов много, четыре последних действия вам придется повторять достаточно много раз. Поэтому мы освоим быстрый способ загрузки.
Для этого можно использовать Проводник Windows или любой двухоконный файловый менеджер. Технология эта типовая, поэтому мы не будем о ней рассказывать, а только укажем пути.
Исходную папку вы уже знаете, конечная папка в рамках локального компьютера: c:\Program Files\Bitrix Environment\www\bitrix\templates\test\images.
ЗАМЕЧАНИЕ
Копирование файлов (не только графических, как в данном примере, но и любых других) с помощью Проводника Windows или файлового менеджера удобно при создании сайта на локальной машине.
При необходимости загрузить на сайт большое число файлов вы должны быть уверены в том, что загруженные не через CMS файлы будут иметь достаточные права при работе с ними из 1С-Битрикс: Управление сайтом.
Скопируйте все файлы картинок любым способом. Осталось только изменить пути до картинок в кодах шаблона.
В исходном дизайне пути до картинок прописаны как izo/. Нам нужно поменять их на bitrix/ templates/test/images.
Можно это делать вручную, но мы облегчим себе процесс с помощью штатной функции поиска в браузере.
¦ Откройте для редактирования шаблон сайта.
¦ Перейдите в режим текстового редактирования.
¦ Вызовите функцию поиска с помощью горячих клавиш CTRL+F. В Internet Explorer откроется диалог поиска, в Firefox появится панель поиска внизу окна.
¦ Установите курсор в самом начале кода.
¦ Введите в поле поиска izo/. В строках кода отобразится первое найденное слово.
¦ Скопируйте в буфер обмена bitrix/templates/test/images.
¦ Горячими клавишами CTRL+V произведите замену одного пути другим.
¦ Щелкните по кнопке Следующее в Firefox или Далее в Internet Explorer. Найдется следующая ссылка на картинку.
Вновь замените путь.
¦ Повторяйте последнее действие до тех пор, пока не замените все пути.
ЗАМЕЧАНИЕ
Число замен будет очень большим 132! Поэтому нужно потерпеть.
Впрочем, если вы не хотите постоянно нажимать клавиши, можете скопировать код шаблона в любой текстовый редактор, кроме MS Word (например, Bred2), воспользоваться встроенной функцией автозамены и вернуть измененный текст назад в поле для кода нашего шаблона.
¦ Сохраните изменения.
¦ Откройте сайт в режиме Просмотр.
Вы увидите, что теперь все картинки, кроме картинок в колонках Блоги и Галерея, а также картинки в теле статьи О прикорме отображаются. При этом не прорисованы границы и на сайте отображен текст, не предусмотренный в дизайне (рис.
4.8).
Статьи / Советы/ О прикорме іа что О прикорме и Споры о том, на что ловитъ и чем лучше гдане прикармливать, наверное, никогда не закончатся. Одни предпочи-тают Рис.
4.8. Нет границ, и появился ненужный текст
Картинки в колонках Блоги и Галерея, а также картинка в теле статьи О прикорме не отображаются, поскольку они не загружены на сайт (они были расположены не в папке izo). На это можно не обращать внимания, так как все равно нам придется удалять участки кода с этими картинками и заменять их компонентами 1С-Битрикс: Управление сайтом.
К ненужному тексту мы вернемся позже (кстати, появившийся самостоятельно текст может быть совсем не таким, как на нашей иллюстрации, это зависит от используемых по умолчанию шаблонов сайта в дистрибутиве CMS). А вот границами займемся сейчас.
Для этого надо познакомиться с файлами CSS.
ПРИМЕЧАНИЕ
CSS (Cascading Style Sheets, каскадные таблицы стилей) это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформлении текста, ссылок, изображений и других элементов.
Файлы CSS могут применяться как к шаблону в целом, так и к отдельным компонентам. В форме редактирования шаблона мы до сих пор работали только с одной закладкой Шаблон. Но там есть еще и другие закладки, которые физически представляют собой два разных файла стилей. Первый файл (первая закладка) Стили сайта применяется к содержимому сайта: тексту, картинкам, таблицам.
Второй файл (вторая закладка) Стили шаблона применяется к самому шаблону в плане его оформления. Со всеми возможностями каскадных стилей в рамках проекта мы будем знакомиться по мере создания тестового сайта.
И начнем с возникшей проблемы рамок, которая связана со вторым файлом, Стили шаблона.
¦ Откройте закладку Стили шаблона.
Вы увидите, что поле Файл стилей шаблона (template_styles.css)
пустое, то есть в нем не задано никаких стилей. Чтобы узнать, какие стили применял в проекте дизайнер, надо посмотреть файл с расширением .css, который используется в тестовом дизайне.
Он называется code.css и лежит на компакт-диске в папке Сайт\іг?\ (кстати, файл формата .css вообще может называться как угодно, не обязательно code).
¦ Откройте файл с помощью любого текстового редактора, например штатного системного Блокнота. Вы увидите, что в нем прописано только два стиля: body и .br.
ЗАМЕЧАНИЕ
При желании с помощью функции поиска вы можете найти в кодах дизайна текст class=br. Вы увидите, что он стоит среди прочих параметров тегов td. Так задается оформление границ ячейки таблицы. Тег td предназначен для создания одной ячейки таблицы.
Тег td должен размещаться внутри контейнера tr, который, в свою очередь, располагается внутри тега table.
Так как речь зашла о тегах, сразу дадим определения и других тегов, чтобы все определения таблиц были в одном месте.
Тег tr служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега TH или TD.
Тег th предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру.
Тег тн должен размещаться внутри контейнера tr, который располагается внутри тега table.
Элемент table служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов tr и td.
Внутри TABLE допустимо использовать следующие элементы: td, tfoot, th, thead и tr.
Поскольку класс .br задан, но не прописан в таблице стилей шаблона, он и не отображается визуально на нашем тестовом сайте.
¦ Из файла code.css скопируйте в буфер обмена строку со стилем: .br {border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; text-decoration: none}.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
¦ Вставьте строку в поле Файл стилей шаблона (template_styles.css) закладки Стили шаблона.
¦ Сохраните внесенные изменения.
¦ Откройте сайт в закладке Просмотр.
Вы увидите, что на сайте появились рамки в местах, где они были в тестовом дизайне. Нам осталось лишь добавить стили для текста. Пока по умолчанию на сайте используются шрифты, их размеры и форматирование в соответствии с настройками браузера. Дизайнер использовал иной шрифт и описал это в стиле.
Добавим этот стиль.
¦ Откройте для редактирования шаблон сайта.
¦ Перейдите в закладку Стили сайта.
¦ Из файла code.css скопируйте в буфер обмена строку со стилем: body {font-family: arial; text-decoration: none }.
¦ Сохраните изменения.
К стилям шаблона и текста мы еще вернемся в ходе работы над интеграцией дизайна в систему 1С-Битрикс: Управление сайтом.
Интеграция дизайна в систему
1С-Битрикс: Управление сайтом динамическая система. Это означает, что для изменения содержимого сайта не нужно править сами коды, изменение происходит за счет работы с визуальными компонентами.
Сам дизайн задается с помощью шаблона сайта, который мы уже на четверть создали. На четверть, потому что в имеющемся на данный момент шаблоне есть только HTML-код, но отсутствуют функции вызова визуальных компонентов.
А их интеграция это существенный объем работы.
ПРИМЕЧАНИЕ
Компонент это программный логически завершенный код, который позволяет выполнять операции с данными отдельных модулей системы, или, проще говоря, действия по работе с содержимым сайта. Компонент может иметь свой отдельный шаблон и файл css, которые и определяют его внешний вид.
Что можно сделать с помощью компонентов?
- Организовать управление структурой сайта и навигацию по сайту: меню, навигационная цепочка, карта сайта.
- Создать полнофункциональные разделы на сайте. Например, раздел статей или фотогалереи.
- Создать возможность управления часто используемыми функциями на сайте (авторизация, подписка, поиск).
- Создать возможность управления динамически обновляемой информацией (например, лентой новостей, случайным фото).
Получается, что весь сайт можно собрать на них, кроме вывода внешнего вида сайта в целом. Управление общим дизайном сайта реализовано в CMS 1С-Битрикс: Управление сайтом с помощью технологии шаблонов.
Что такое шаблон
Шаблонов сайта может быть несколько, могут применяться разные условия для их отображения в окне браузера. Технология шаблонов позволяет не только создавать несколько сайтов на одном движке с разным дизайном, но и использовать разные стили оформления внутри разделов одного и того же сайта. И даже сделать так, чтобы для разных посетителей сайт выглядел по-разному! К одному сайту может быть применено неограниченное число шаблонов.
Один и тот же шаблон может быть многократно использован для любых сайтов при различных условиях. В ваших руках очень сильное и гибкое средство управления оформлением сайта, которое надо знать и уметь с ним работать.
ПРИМЕЧАНИЕ
Шаблон дизайна это внешний вид сайта, в котором определяются расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный HTML-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента.
Может также включать шаблоны компонентов, готовых страниц и сниппеты.
Под интеграцией дизайна в систему понимается замена HTML-кода PHP-кодом. Этот код подключает компоненты, обеспечивающие динамическое управление содержимым сайта.
Далее следует этап подгонки шаблонов компонентов под дизайн проекта.
Будьте далее внимательны, поскольку раньше слово шаблон у нас относилось к шаблону сайта в целом. Теперь, кроме большого шаблона дизайна, появляются еще и маленькие шаблоны каждого отдельного компонента.
Технически вся процедура интеграции дизайна в 1С-Битрикс: Управление сайтом сводится к следующему алгоритму действий:
- Выделение и удаление из исходного кода сайта HTML-кода, обеспечивающего функцию, которую мы хотим реализовать через PHP-код.
- Вставка PHP-кода компонента в нужное место.
- Подгонка шаблона компонента под дизайн сайта.
В целом все просто. Однако эта работа требует особого внимания.
Надо тщательно выбирать то, что будет вырезано из HTML-кода. Случайное удаление лишнего тега (или его части) приведет к искажению дизайна. Не менее внимательно надо подходить к PHP-коду.
Случайное удаление или искажение кода приведет к ошибкам.
В самом начале книги мы оговорились, что от читателя потребуется начальное знание HTML. Поэтому при описании редактирования шаблонов и стилей мы не всегда будем пояснять смысл действий.
ЗАМЕЧАНИЕ
Описанные в тексте этой книги способы изменения дизайна самого сайта и компонентов носят учебный характер. Поэтому их выполнение не всегда оптимизировано. Если вы хотите внести какие-то изменения в дизайн, выполните следующие действия:
¦ Сначала попытайтесь сделать это редактированием шаблона самого сайта и файлов css.
¦ Если это невозможно, то попытайтесь сделать это средствами редактирования страницы сайта.
¦ И только в крайнем случае переходите к редактированию шаблонов компонента и файлов css компонента. При этом необходимо копировать шаблоны, а не редактировать их в системной папке.
Такая последовательность действий необходима, поскольку при обновлении продукта происходит и обновление шаблонов компонентов. Если вы изменили (кастомизировали) шаблон компонента, он обновляться не будет.
При этом возможна потеря функционала обновленной версии или снижение уровня безопасности.
Немного теории
Перед началом работы совсем немного отвлечемся на структуру дизайна динамического сайта в CMS 1С-Битрикс: Управление сайтом. Структурно дизайн поделен на три части: Header, Work Area, Footer.
Эти части могут занимать разную площадь, иметь разную форму, но неизменно одно их порядок (рис. 4.9).
На рисунке приведены три варианта расположения частей шаблона сайта.
Рис. 4.9. Три варианта расположения частей сайта
ПРИМЕЧАНИЕ
Header верхняя часть дизайна, заголовок. Включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и т. д.), верхним горизонтальным меню и левым меню (если они есть в дизайне).
Может включать информационные динамические материалы. Хранится в отдельном файле header.php.
Work Area рабочая область страницы, где размещаются собственно информационные материалы сайта, которые и требуют динамической замены в соответствии с заданными условиями.
Footer нижняя часть дизайна со статической информацией (контактная информация, сведения об авторе и владельце сайта и т. д.), нижним горизонтальным меню и правым меню (если они есть в дизайне). Может включать информационные материалы.
Хранится в отдельном файле footer.php.
Разделение частей сайта на эти зоны происходит установкой разделителя #Work area#, как при создании тестового шаблона. Установив его в выбранное место, мы задали для сайта третий вариант размещения частей.
Чтобы задать иную структуру, нужно разместить тег в другом месте. Например, чтобы задать первый вариант, разделитель #Work area# надо разместить сразу за закрывающим тегом таблицы с картинкой пруда.
Work Area рабочая область
Поясним суть рабочей области Work Area. При создании шаблона мы загружали готовую нарезку дизайна, в центральной части которой предусмотрен текст, в правой части колонка фотогалереи, а в левой колонка с анонсами блогов. На данный момент все они текст, левая и правая колонки входят либо в Header, либо в Footer.
Если при формировании шаблона левая и правая колонки могут то включаться в Footer или Header, то исключаться из него, то текст всегда будет в Work Area.
Чтобы лучше прочувствовать то, о чем сейчас идет речь, скопируем текст, вставим его в рабочую область и посмотрим, что получится.
¦ Перейдите в раздел Редактирование.
¦ Добавьте в буфер обмена текст статьи, которая сейчас видна на шаблоне. Только текст, без картинки!
¦ Выполните команду Изменить страницу в редакторе (рис. 4.10).
Откроется визуальный редактор.
Рис. 4.10. Вызываем редактор
¦ Удалите из редактора все тексты и ярлыки компонентов.
Кстати, этим действием вы удалите весь тот непрошеный текст, который появился на сайте после вставки дизайна в шаблон.
¦ В самом начале страницы введите текст: Тестовый проект. Главная страница.
Такие заметки мы рекомендуем делать при создании каждой страницы, создаваемой в ходе построения сайта, чтобы можно было ориентироваться по сайту, пока не добавлен контент страниц или не установлена цепочка навигации.
¦ В поле редактора вставьте текст из буфера обмена.
¦ Сохраните внесенные изменения.
Вы увидите, что статья теперь отражена дважды: один раз как часть Work Area (то, что мы только что добавили), второй как часть Footer (текст, который стоял раньше, рис. 4.11).
Вот из Footer текст надо убрать.
¦ Удалите текст из кода шаблона сайта вместе со строкой и ячейкой. Метки:
!-- #Begin_Article --
!-- #End_Article --
ЗАМЕЧАНИЕ
Найти тот или иной участок кода бывает достаточно сложно, но в исходном коде страницы тестового шаблона есть специальные метки. Их общий вид:
!-- #Begin******** --
!-- #End******** --, где под звездочками стоит название функции, которую имитирует данный код. В нашем случае это название _Article. То есть метки в данном случае будут иметь вид:
!-- #Begin_ Article --
!-- #End_ Article --.
Весь код, который расположен между ними, необходимо удалить. В дальнейшем, когда нам нужно будет удалить часть кода, мы не будем приводить его весь, а просто скажем: Удалите код между метками....
Сами метки лучше оставить, они абсолютно не влияют на отображение дизайна, зато помогают ориентироваться в HTML-коде.
Рис. 4.11. Статья отображена дважды
Остаться должен только текст, загруженный в Work Area.
¦ Сохраните внесенные изменения.
Думается, что теперь вы поняли: все тексты, картинки и текущая информация должны размещаться в рабочей области. И поняли, как этого добиться.
Композиция структуры
Выбор того или иного варианта композиции сайта дело опыта и вкуса. Каждый из них имеет свои плюсы и минусы. Предложенные схемы неполный перечень возможной структуры.
Чтобы выбрать правильный вариант композиции для своего сайта, надо понимать принципы работы со статической информацией, компонентами, динамически выводящими информацию, и то, как они взаимодействуют между собой. Кроме того, необходимо ясно представлять квалификацию тех, кто будет заниматься поддержкой сайта, а также сам тип выводимой информации.
Статическая информация, которая не нуждается (либо редко нуждается) в замене, как правило, размещается в статических зонах Footer и Header. Заменить ее можно в кодах самих файлов, но делать это придется квалифицированному разработчику.
Либо разработчик должен организовать эту замену с помощью компонентов системы силами редакторов сайта.
ЗАМЕЧАНИЕ
Хорошим тоном в последнее время считается размещение всей информации с помощью тех или иных компонентов и оставление на долю шаблона только графического отображения сайта.
Динамические компоненты существенно облегчают работу по поддержке сайта. Однако работа по их внедрению в шаблон требует квалификации.
Чем шире применяются компоненты, тем более трудоемка и сложна работа по созданию сайта, но проще его поддержка.
Простой пример. При использовании второго варианта структуры сайта может возникнуть проблема с размещением динамических компонентов в Work Area, которая получается зажатой между Footer и Header. При размещении блогов в такой ограниченной по размерам рабочей области может получиться неприятное разъезжание дизайна (рис.
4.12).
Выход из этой ситуации, конечно, есть: отредактировать шаблон блога, подогнав его под текущий дизайн. Но это опять дополнительная работа для разработчика.
Использование первого варианта структуры в плане первоначальной настройки менее трудозатратно, но более трудоемко в плане ежедневной поддержки. На каждую страницу придется добавлять компоненты меню, цепочки навигации и другие компоненты.
Рис. 4.12. Шаблон блогов раздвинул Footer и Header
Использование третьего варианта некий компромисс. Он наиболее распространен и привычен.
Мы им тоже воспользуемся.
Внедрение компонентов в дизайн можно, в принципе, производить в любом порядке. Мы начнем с компонента авторизации.
Авторизация
Переход на страницу авторизации в 1С-Битрикс: Управление сайтом можно реализовать как с помощью HTML, так и с помощью компонента авторизации. Мы опишем оба способа.
За авторизацию в HTML-коде тестового дизайна отвечает код:
img width=4 height=4 src=/bitrix/templates/test/ images/punkt_top.gif /
ba class=text href=#font size=1 color=#6e6e6eРегистрация/font/a/b
img width=4 height=4 src=/bitrix/templates/test/ images/punkt_top.gif /
ba class=text href=#font size=1 color=#6e6e6eВход/font/a/b.
Найти этот код довольно просто по меткам:
! #Begin_Auth --
!-- #End_Auth --.
HTML-авторизация
Для реализации авторизации в HTML:
¦ Замените знак # во втором теге a class=text href=# ссылкой на папку /auth.
¦ Замените знак # в первой ссылке выражением /auth.php? register=yes.
¦ Сохраните внесенные изменения.
Авторизация встроена. Можете перейти в раздел Просмотр, закончить сессию и вновь авторизоваться для проверки работы.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3. Компонент авторизации
Интеграция компонента авторизации несложна, но требует внимания.
¦ Перейдите на панель управления.
¦ Откройте раздел Контент ^ Структура сайта ^ Файлы и папки ^ bitrix/templates/test. Откроется папка тестового шаблона.
¦ Создайте в ней папку components.
¦ Перейдите в созданную папку и создайте папку bitrix.
ЗАМЕЧАНИЕ
Компоненты в CMS 1С-Битрикс: Управление сайтом должны храниться только в определенных местах. Таких мест три, но оптимальным будет размещение компонентов либо в самой папке шаблона сайта (как у нас), либо в папке компонентов по умолчанию (/bitrix/ components/bitrix).
Модуль авторизации, который мы хотим применить, относится к системному шаблону Web 2.0, поэтому и искать его надо в папке компонентов шаблона Web 2.0.
¦ Выполните команду Контент ^ Структура сайта ^ Файлы и папки ^ bitrix/templates/web20/components/bitrix.
¦ Скопируйте из нее папку system.auth.form в bitrix/templates/test/ components/bitrix.
Теперь можно переходить к добавлению компонента в шаблон.
¦ Откройте шаблон сайта для редактирования.
¦ Удалите описанный выше HTML-код из общего кода шаблона. Метки:
!-- #Begin_Auth --
