"1С-Битрикс: Управление сайтом ASP.NET"
Руководство по интеграции дизайна
Содержание
Введение 3
Глава 1. Создание сайта 4
Глава 2. Общие принципы интеграции 7
Шаблон сайта 7
Управление шаблонами 8
Включаемые области и компоненты 11
Объекты ASP.NET 13
MasterPage 13
ContentPlaceHolder 14
Глава 3. Интеграция в деталях 17
Структура файлов 17
Свойства страниц и разделов 18
Создание и редактирование шаблона сайта 18
Служебные области 20
Включение таблиц стилей 21
Подключение административной панели 22
Добавление html-кода 22
Добавление ContentPlaceHolder 23
Вывод графики 23
Размещение компонентов 24
Применение шаблонов к сайту 24
Работа с компонентами 25
Размещение компонента 26
Управление содержимым компонента 27
Редактирование параметров компонента 28
Копирование шаблона компонента 30
Редактирование шаблона компонента 31
Редактирование CSS-файла шаблона компонента 32
Компонент Меню 33
Компонент Включаемая область 37
Использование файлов языковых сообщений 40
Приложение 1. Рекомендации по подготовке HTML шаблона 41
Приложение 2. Страница для печати 42
Приложение 3. Добавление кнопок в административную панель 44
Заключение 45
Введение
Руководство по интеграции предназначено для разработчиков веб-сайтов на основе программного продукта "1С-Битрикс: Управление сайтом ASP.NET". При составлении документа подразумевалось, что разработчик владеет базовыми технологиями для разработки веб-сайта, такими как HTML, CSS, а так же владеет основами технологии работы с платформой ASP.NET.
Целью документа является разъяснение основных принципов интеграции дизайна, а также объяснение частных ключевых моментов в процессе создания шаблона сайта.
Интеграция дизайна возможна как средствами самой системы "1С-Битрикс: Управление сайтом ASP.NET", так и с помощью Microsoft Visual Studio. В данном руководстве будет рассмотрен вариант интеграции дизайна с помощью штатных средств системы.
Если у вас возникнут дополнительные вопросы по работе с продуктом, то вы можете обратиться в службу технической поддержки или на форумы компании "1С-Битрикс".
Глава 1.Создание сайта
Демонстрационная версия продукта представлена только одним сайтом. Его основная задача – ознакомление с возможностями продукта. Для более детального изучения процесса интеграции сайта с системой рекомендуется не изменять существующий, а создать новый сайт. И затем создать шаблон дизайна для вашего сайта.
Управление сайтами системы выполняется в Административном разделе на странице Настройки > Настройки продукта > Сайты > Список сайтов (Рис. 1 .1).
Рис. 1.1 Список сайтов
Для создания нового сайта:
Перейдите на страницу Контент > Структура сайта.
Создайте папку для нового сайта в папке, где установлен продукт "1С-Битрикс: Управление сайтом ASP.NET".
Скопируйте в эту папку файл default.aspx из папки, где установлен продукт "1С-Битрикс: Управление сайтом ASP.NET".
Перейдите в раздел Настройки > Настройки продукта > Сайты > Список сайтов.
Нажмите на кнопку Добавить на контекстной панели. Откроется форма создания нового сайта (Рис. 1 .2).
Рис. 1.2 Форма создания сайта
Примечание. Поля, отмеченные * - обязательны для заполнения.
ID – идентификатор сайта, вводится на латинице;
Активен – установите флажок, если хотите, чтобы сайт отображался при обращении к нему;
Название – название сайта, как он будет отображаться в общем списке сайтов в административном интерфейсе;
Язык - выберите язык, на котором будет выводиться информация в публичном разделе;
По умолчанию – установка этого флажка сделает сайт открывающимся по умолчанию;
Доменное имя – введите доменное имя или список доменных имен (каждое с новой строки) сайта;
Примечание. Ввод доменного имени необходим только при использовании многосайтовости.
Папка сайта – введите имя созданной папки для сайта;
Сортировка – выберите порядок сортировки;
Языковая культура – выберите вид используемой на сайте культуры;
Примечание. Под языковой культурой понимается не только язык сайта, но и способы задания дат, времени и кодировка.
Название сайта – название сайта для публичного интерфейса;
URL сервера – введите URL сервера, на котором размещён сайт;
E-mail адрес по умолчанию – введите адрес отправителя сообщений сайта.
Шаблон – выберите «Пустой шаблон для сайта по умолчанию».
Сохраните внесенные изменения.
Сайт создастся.
Откройте сайт, набрав в адресной строке браузера: http:// localhost:_номер_порта_/имя_папки. Вы увидите просто Панель управления и под ним – синее поле с текстом из первого сайта.
Глава 2.Общие принципы интеграции
Внешний вид сайта определяется шаблоном дизайна. Использование шаблона с программным кодом обеспечивает необходимую гибкость при реализации интернет-проекта, позволяет создавать как простые шаблоны, так и шаблоны с произвольной программной логикой и индивидуальным внешним видом. Система не устанавливает никаких ограничений в шаблонах и внешнем виде сайта.
Шаблон сайта
-
Шаблон дизайна - это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя html разметку, команды обращения к объектам ASP.NET, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.
Гибкие возможности интеграции реализованы за счет разделения графической (оформительской) составляющей проекта и информационной (смысловой) составляющей. Задание графической части производится в шаблоне сайта, а так же с помощью файлов стилей. Задание информационной составляющей – с помощью модулей и компонентов.
Каждый из компонентов системы построен по аналогичному принципу. Компонент имеет оформительскую составляющую в виде шаблона и файла стилей и логическую составляющую, отвечающую за обработку собственно информации.
Внимание! Процесс перевода HTML-макета в полноценный ASP.NET-шаблон сайта заключается в замене HTML-кода макета дизайна на обращения к соответствующим объектам ASP.NET (ContentPlaceHolder, серверным компонентам и программным компонентам "1С-Битрикс: Управление сайтом ASP.NET").
Общий алгоритм действий по созданию полноценного шаблона следующий:
Создание бланка шаблона в разделе Настройки > Настройки продукта > Сайты > Шаблоны сайтов;
Добавление в бланк шаблона нарезанного HTML-макета;
Задание области ContentPlaceHolder;
Замена HTML-кода на вызов соответствующих объектов ASP.NET и программных компонентов "1С-Битрикс: Управление сайтом ASP.NET";
Применение шаблона к сайту.
Создание шаблона сайта рекомендуется выполнять на локальной демо-версии продукта. Готовый шаблон можно экспортировать в виде комплекта файлов на удаленный сервер и выполнить наполнение сайта содержанием на созданном шаблоне.
Удобство работы по созданию шаблона определяется:
возможностью использования визуального HTML-редактора;
поддержкой технологии Drag and Drop при работе с компонентами;
возможностью быстрого доступа к редактированию компонентов и свойств объектов.
Управление шаблонами
Все шаблоны хранятся в директории /bitrix/templates/. Набор файлов каждого шаблона находится в поддиректории, название которой соответствует идентификатору шаблона.
Каждый шаблон имеет схожую структуру файлов и поддиректорий. Простейший шаблон может состоять всего из нескольких основных файлов: template.master, styles.css, template_styles.css.
В каталоге шаблона могут быть также размещены другие файлы и компоненты. Посмотреть состав шаблона в Менеджере файлов можно, перейдя по ссылке, показанной рядом с идентификатором шаблона.
В виде отдельных файлов могут быть представлены любые области дизайна, которые предполагается использовать в шаблоне сайта, и к редактированию которых необходимо иметь быстрый доступ. Примерами таких областей могут служить: область с указанием авторских прав (copyright), область с контактной информацией и т.п.
Управление шаблонами дизайна осуществляется в Административном разделе:
Перейдите на страницу со списком шаблонов: Настройки > Настройки продукта > Сайты > Шаблоны сайтов. (Рис. 1 .1)
Рис. 2.3 Страница Шаблоны сайта
Форма, представленная на этой странице, позволяет просмотреть, отредактировать существующие шаблоны, а также добавить новые.
Для добавления шаблона необходимо воспользоваться кнопкой Добавить на контекстной панели.
Примечание: При создании нового шаблона задается его имя, название, описание для показа в списке, код шаблона внешнего вида сайта, таблицы стилей и набор используемых включаемых компонентов и картинок. При сохранении шаблона автоматически создается поддиректория /bitrix/templates/<�идентификатор_шаблона>.
Для изменения шаблона необходимо воспользоваться командой Изменить в списке действий.
Рис. 2.4 Список шаблонов
Перейдите к редактированию шаблона демо-сайта Web 2.0, выбрав действие Изменить. Откроется форма редактирования шаблона (Рис. 2 .5).
Рис. 2.5 Форма редактирования шаблона
На закладке Шаблон представлен внешний вид шаблона дизайна сайта. По умолчанию используется вывод шаблона в режиме кода. Есть возможность редактирования шаблона в режиме визуального редактора. Для этого:
Установите флажок в поле Использовать визуальный редактор. Страница перезагрузится в режиме визуального редактора (Рис. 2 .6).
Рис. 2.6 Редактирование шаблона в визуальном режиме
Большинство компонентов, необходимых для создания шаблона, располагаются в разделе Служебные. Остальные – в соответствующих тематических группах (Контент, Сервисы и т.д.). Детально с работой визуального редактора можно познакомиться с помощью учебного курса Визуальный HTML-редактор.
Каскадные стили, используемые в шаблоне, рекомендуется разделять на две таблицы стилей, хранящиеся в двух разных файлах. Оба файла находятся в директории /bitrix/templates/<�идентификатор_шаблона>/.
Один из файлов носит название styles.css и содержит стили для представления информационного содержания страницы на сайте. Содержимое этого файла отображается при редактировании шаблона на закладке Стили сайта. Во втором файле – с именем template_styles.css - описаны стили для отображения текстов в самом шаблоне дизайна. Содержимое этого файла отображается при редактировании шаблона на закладке Стили шаблона.
Включаемые области и компоненты
Некоторые элементы дизайна в шаблоне представлены в виде программных компонентов. На Рис. 2 .7 выделены компоненты и включаемые области в шаблоне Web 2.0.
Рис. 2.7 Включаемые области в шаблоне
Каждый компонент имеет свой собственный шаблон, определяющий форму вывода. Шаблон компонента состоит из файла template.ascx и файла style.css. Файлы хранятся в папке /bitrix/components/bitrix/имя_компонента/.
Изменение формы вывода информации осуществляется за счет редактирования этих файлов. При этом не рекомендуется редактировать системный шаблон, расположенный в указанной папке. Шаблоны необходимо копировать в папку создаваемого шаблона сайта и там редактировать. Рекомендация связана с тем, что при обновлении компонента происходит полная перезапись всего содержимого папки компонента. Если был изменен шаблон и файл css, то внесенные изменения будут потеряны.
Переход к редактированию параметров шаблона удобнее всего осуществлять из режима Разработка (закладка  на административной панели, Рис. 2 .8), который включает в себя действия, необходимые для разработки и верстки сайта.
Рис. 2.8 Меню компонента в режиме Разработка
Объекты ASP.NET
Динамическое управление контентом на сайтах, созданных на "1С-Битрикс: Управление сайтом ASP.NET" осуществляется с помощью объектов. Основные объекты ASP.NET, используемые в процессе работы сайта – это MasterPage и ContentPlaceHolder.
MasterPage
MasterPage – основной контейнер для генерации страниц. В этом случае страницы состоят только из элементов управления Content и их дочерних элементов управления.
Примечание. Подробнее о MasterPage, как о классе, смотрите здесь: http://msdn.microsoft.com/ru-ru/library/system.web.ui.masterpage.aspx.
Шаблоны сайтов создаются на базе MasterPage. Фактически шаблон сайта – это MasterPage и две таблицы стилей css: стилей сайта и стилей шаблона. Система допускает создание неограниченного множества шаблонов и их использование на сайте (или сайтах) в соответствии с необходимыми вам условиями.
Примечание. В отличие от "1С-Битрикс: Управление сайтом" в "1С-Битрикс: Управление сайтом ASP.NET" нет двух отдельных файлов header и footer, задающих оформление страницы и разделенных областью #WorkArea#.
Типовая страница на базе MasterPage выглядит таким образом:
<%@ Master Language="C#" Inherits="Bitrix.UI.BXMasterPage" %>
|
|
