Содержание

Авторизация

Раздел Авторизация познакомит контент-менеджера с основными способами авторизации на сайте.

Авторизация на сайте

Для полноценной работы с сайтом в качестве контент-менеджера необходима авторизация. Ссылка на форму авторизации расположена, как правило, в верхней части сайта:

Авторизация

Если неавторизованным пользователям запрещено просматривать сайт, то при его открытии сразу будет отображаться следующая форма авторизации:

Авторизация (доступ к сайту неавторизованных пользователей запрещён)

Введите в открывшейся у вас форме авторизации свой Логин, Пароль, Одноразовый Код подтверждения (если такие настройки авторизации по умолчанию установил администратор) и нажмите кнопку Войти. Страница обновится и теперь можно приступать к работе на сайте.


Когда сотрудник авторизован на сайте, то в верхнем правом углу отображается его данные:

авторизованный сотрудник


В настоящий момент .NET Forge CMS не поддерживает системы обноразовых паролей (OTP) по умолчанию.

Элементы Управления

Раздел Элементы управления познакомит контент-менеджера с основными элементами управления Публичного иАдминистративного разделов.

Внимание! Рекомендуется все работы по сайту проводить через Публичный разделАдминистративный разделпредназначен для администраторов сайта и разработчиков. Тем не менее, некоторые виды работ с сайтом могут потребовать обращения к Административному разделу.

Все скриншоты в учебном курсе взяты из рабочего проекта, идентичного стандартному дистрибутиву программы.


Публичный раздел

Публичный раздел - основное место работы контент-менеджера. Он является частью "1С-Битрикс: Управление сайтом", видимой обычным пользователям. При наличии достаточных прав в нем можно производить работы по редактированию содержимого сайта.

Основное назначение Публичного раздела – это отображение информации посетителям сайта. Набрав в адресной строке веб-браузера адрес сайта, пользователь перейдет именно в публичный раздел.

публичный раздел

Для управления информацией, представленной на страницах сайта, служит Панель управления, подключаемая вверху страницы после авторизации пользователя в системе. Панель управления — основной элемент управления содержимым в публичной части сайта.

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

Примечание: ограничения на доступ касаются не только кнопок Панели управления, но и некоторого другого функционала, например, задания прав доступа при создании страниц.

В ходе развития системы Панель управления претерпевала много изменений. На данный момент можно встретить как старую, с четырьмя закладками, так и новую с двумя закладками панели. Детальное описание функционала будет произведено только для нового интерфейса "Эрмитаж" в силу ограниченности ресурсов разработчиков данного курса.

Публичный интерфейс Эрмитаж (с версии 6.0)

Панель управления имеет два основных режима:

  • Сайт - режим для работы над содержимым сайта.
  • Администрирование - административный раздел для полнофункционального управления всем интернет-проектом.
авторизованный сотрудник

Режим Администрирование описан в главе Административный раздел.

Панель управления

Панель управления всегда располагается вверху окна браузера и видна только авторизованным пользователям, обладающим достаточным уровнем прав для управления контентом сайта. В зависимости от прав пользователя, отображаются только те функции, которые соответствуют этому уровню прав. Часть кнопок отображается на Панели управления только если открыта страница с определенными компонентами.

авторизованный сотрудник

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

Панель управления имеет:

  • кнопку Меню;
  • закладки Сайт и Администрирование;
  • индикатор Обновления, отображается только при наличии свежих обновлений;
  • индикатор авторизованного пользователя, нажав на который можно перейти к странице редактирования свойств пользователя;
  • ссылку Выйти;
  • кнопку фиксации панели.

Кнопка Меню

Кнопка menu_button позволяет осуществлять быстрый переход на любую страницу Административного раздела.

Область выбора функций

Кнопка Меню повторяет в верхней части Область выбора функций, о которой рассказывается в главе Административный раздел.

Примечание: Двойной клик указателем мыши по любому из промежуточных пунктов выпадающего меню позволяет сразу перейти в административный раздел на эту страницу.

Закладка Сайт

Закладка кнопка "сайт" - инструмент для работы с контентом сайта, настройки компонентов, выполнения других операций по работе над сайтом.

Команды закладки Сайт
добавить страницуИконка Создать страницуСоздание страниц с помощью мастера.
Меню Создать страницуНажмите на эту кнопку, чтобы запустить мастер или шаблон создания страниц. С помощью этих мастеров, можно создать страницу, в том числе через документооборот, последовательно внося данные на каждом шаге мастера.
добавить разделИконка Создать разделСоздание разделов с помощью мастера.
Меню Создать разделНажмите на эту кнопку, чтобы запустить мастер или шаблон создания разделов. С помощью этих мастеров, можно создать раздел, последовательно внося данные на каждом шаге мастера.
редактировать страницуИконкаИзменить страницуИзменение содержимого страницы.
Меню Изменить страницуНажмите на эту кнопку, чтобы вызвать диалог редактирования страницы, в том числе через документооборот, просмотреть историю изменений страницы, изменить свойства страницы, ограничить доступ к ней.
Редактировать разделИконкаИзменить разделИзменение свойств раздела.
Меню Изменить разделНажмите на эту кнопку, чтобы изменить свойства раздела и ограничить доступ к нему.
МенюКнопка МенюВызов формы редактирования меню сайта. Нажмите на стрелку, чтобы отредактировать все меню открытой на данный момент страницы или создать новое меню на странице.
сбросить кешКнопкаСбросить КешОбновление кеша страницы.
Меню Сбросить кешНажмите на эту кнопку, чтобы обновить кеш страницы или компонентов, или отключить кеш для данной страницы вообще.
компонентыКнопкаКомпонентыВыбор компонента для редактирования его параметров. Активна только при включенном режиме Правка.
шаблон сайтаКнопка Шаблон сайтаВызов форм редактирования стилей сайта и стилей шаблона.
отладкаКнопкаОтладкаВключение режима отображения суммарной статистики. Нажмите на стрелку, чтобы просмотреть статистику запросов базы данных, статистику включаемых областей, время исполнения страницы и статистику компрессии.
протестировать новое решениеКнопкаПротестировать новое решениеВыбор нового решения для установки.
МенюПротестировать новое решениеНажмите на эту кнопку, чтобы выбрать новое решение для установки или удалить эту кнопку с Панели управления или перейти на другой сайт.
режим правкиПереключательРежим правкиВключение режима контекстного редактирования сайта. При включенном режиме наведите курсор на выбранный блок информации и используйте всплывающие панели инструментов.
свернутьПереключательСвернуть/РазвернутьПеревод панели в свернутый или развернутый вид.

Закладка Администрирование

Закладка admin_mode_95.png соответствует Административному разделу системы (см главу Административный раздел).

Индикатор Обновления

Индикатор Обновления  update_but_95.png появляется автоматически, если система обнаружила неустановленные обновления. Проверка обновлений производится согласно настройкам в Главном модуле системы. Кликнув на этот индикатор, можно перейти на страницуОбновления в Административном разделе.

Индикатор авторизованного пользователя

user_button_95.png

Индикатор авторизованного пользователя позволяет в один клик перейти к форме настройки параметров аккаунта пользователя. Ссылка Выйти завершает работу системы под правами авторизованного пользователя.

Свернутый режим панели

Свернутый режим панели

Свернутый режим работы позволяет освободить экранное пространство за счет уменьшения размера панели. Свернутый режим сохраняет часть управленческих функций. Можно работать с Меню, можно обновить продукт, сбросить кеш, включить или выключить Режим правки или перейти в Административный раздел.

Режим правки

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

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

При проведении указателя мыши над областью сайта, где расположен компонент, появится красная рамка, указывающая область компонента и отобразится меню компонента. Например, в случае с компонентом Меню это будет выглядеть так:

редактирование меню

Если какой-либо компонент размещен в шаблоне или в Основной рабочей области страницы, но не выводит данные на страницу (например, по условиям настройки может не отображаться Цепочка навигации на индексной странице), то при включенном Режиме правки компонент отображается таким образом: .

Меню компонента имеет типовые кнопки и кнопки, которые соответствуют выполняемой функции компонента. Так, например, выглядит меню компонента Каталог:

менб компонента "каталог"

Команды имеют следующее значение:


Команды меню компонентов
зона перемещенияЗона перемещенияНаведя курсор мыши на эту зону и нажав на левую кнопку, можно переместить меню компонента в любое место экрана.
зона команд контентаЗона команд контентаВ этой зоне располагаются команды по управлению контентом, который выводит компонент. В зависимости от функционала компонента команды будут разными, либо их может вообще не быть.
кнопка фиксации положенияКнопка фиксации положенияПеремещаемое в другое место экрана меню компонента можно зафиксировать. В этом случае при следующем открытии для редактирования данной страницы и включении Режима правки меню компонента появится в выбранном месте.
меню настроек параметров компонентаКнопка вызова меню настройки параметров компонентаВызывается меню настройки параметров того компонента, который установлен по умолчанию.
Кнопка выбора компонента для редактирования параметровВызов выпадающего списка компонентов для выбора компонента, параметры которого необходимо редактировать:

выпадающий список редактирования параметров компонента

Кнопка вертикального положения командКнопка вертикального положения командПри использовании этой кнопки можно расположить команды управления вертикально, что делает меню более компактным:

вид при применении кнопки вертикального положения команд

Данная опция доступна не для всех компонент.

Отмена действий и Автосохранение

Отмена действий

Система допускает отмену последнего совершенного действия.

После каждого изменения внесенного в содержание сайта под Панелью управления будет отображаться Строка отмены действия.

страница успешно сохранена

В этой строке выводится описание совершенного пользователем действия и команда на отмену действия. Кликнув по ссылке, можно отменить последнее совершенное действие.

Закрыть строку отмены действия можно, щелкнув по крестику у правого края строки.

Автосохранение

В системе предусмотрена функция автосохранения форм при заполнении. Функция включена на большинстве форм редактирования.

Автосохранение - функция, позволяющая сохранить данные введенные в поля формы в случае нештатной ситуации.

Пример нештатных ситуаций: отлучение от компьютера на долгое время с потерей авторизации, аварийное отключение компьютера контент-менеджера, случайное закрытие наполовину заполненной формы и другие.

Функция может быть отключена администратором. Если в форме работает Автосохранение, то в правом углу формы (при редактировании с Административной части) появится такой значок:

значок автосохранения

В формах, вызываемых с публичной части, значок расположен в левом нижнем углу формы:

значок автосохранения в форме

После повторного открытия формы, если в ней есть сохраненные данные полей, система выдаст запрос на восстановление данных:

восстановление из автосохранения

Автосохранение происходит все время пока контент-менеджер редактирует форму (изменяет значения полей формы) и сработает сразу после окончания редактирования формы. Нажатием на кнопку можно выполнить ручное сохранение.

Если сбой произошел во время создания нового элемента, то автосохранение сработает для формы создания соответствующей новой страницы/элемента. То есть, когда в следующий раз будет открыта форма добавления, выведется запрос на сохранение данных.

Примечание: Описанные на этой странице функции - первые шаги в реализации функционала Корзины, которая появится в полном объеме ближайшее время.

Административный раздел

Административный раздел - раздел системы, содержащий интерфейс для управления модулями системы, структурой, содержанием, посетителями и другими составляющими сайта. Недоступен для просмотра обычным посетителям сайта.

В главе рассмотрены основные элементы интерфейса Административного раздела системы, позволяющие осуществлять полное управление содержанием и настройками сайта. (В документации иногда может использоваться выражение "Административная часть" как синоним Административного раздела.)

Для перехода в Административный раздел служит закладка новая кнопка (в продукте до версии 6.0 вид закладки такой: старая кнопка), расположенная на Панели управления в публичном разделе сайта.

Элементы административного раздела

Интерфейс административного раздела системы «Bitrix .NET Forge CMS» логически разграничен на области, обеспечивающие доступ к функциональным возможностям системы.

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

Интерфейс содержит следующие области (показана панель управления начиная с версии 6.0):

Элементы административного раздела

  1. Административная панель
  2. Административное меню
  3. Меню функций
  4. Рабочая область

Административная панель управления

Интерфейс Эрмитаж (с версии 6.0)

авторизованный сотрудник

Функционал панели:


Команды Панели управления
menu_buttonСлужит для быстрого доступа к страницам административного раздела.
кнопка "сайт"Закладка Сайт - переход в публичный раздел.
новая кнопкаЗакладка Администрирование.
user_button_95.png Переход к изменению профиля текущего пользователя в форме административного раздела. Ссылка Выйти завершает авторизованный сеанс в административном разделе.
panel_fixПозволяет закрепить административную панель управления. Эта кнопка расположена на правом конце панели.
настройкиОткрывает форму настроек активного модуля. Например, если открыт раздел Управление структурой, эта кнопка открывает форму настроек модуля Управление структурой.
система обновлений (доступны обновления)Открывает форму получения обновлений системы. Если в настройках  Главного модуля  выставлена автопроверка обновлений, то, при наличии обновлений, зеленая иконка меняется на анимированную красную иконку. Кроме этого появится всплывающее окно с информацией об обновлениях.
переключение языковПозволяет переключиться на другой (установленный в системе) язык административного интерфейса.

Интерфейс до версии 6.0

Старая административная панель

Административная панель управления содержит общие элементы, которые могут понадобиться при управлении сайтом.

Команды Панели управления
ПУСКСлужит для быстрого доступа к страницам административного раздела.
просмотрРежим служит для просмотра страниц. В этом режиме можно выполнять основные операции по управлению содержанием сайта. Если удерживать клавишу Shift, публичный раздел откроется в новом окне браузера.
редактированиеРежим служит для изменения содержания страниц.
разработкаРежим предназначен для использования разработчиками сайта, т.к. предоставляет возможности по изменению внешнего облика сайта (настройки параметров компонентов, изменение стилей шаблона сайта и др.)
панель управления (старая)Открывает административный раздел сайта - служит для полного управление настройками системы, отдельных модулей и контентом сайтов.
panel_fix Позволяет закрепить административную панель управления. Эта кнопка расположена на правом конце панели.
настройкиОткрывает форму настроек активного модуля. Например, если открыт раздел Управление структурой, эта кнопка открывает форму настроек модуля Управление структурой.
переключение языков Позволяет переключиться на другой (установленный в системе) язык административного интерфейса.
система обновлений (доступны обновления)Открывает форму получения обновлений системы. Если в настройках Главного модуля выставлена автопроверка обновлений, то, при наличии обновлений, зеленая иконка меняется на анимированную красную иконку. Кроме этого появится всплывающее окно с информацией об обновлениях.
выход (старый)Завершает авторизованный сеанс в административном разделе.
профиль (старый)Переход к изменению профиля текущего пользователя в форме административного раздела.

Административное меню

Административное меню

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

Набор функций Контент содержит инструменты для управления информационными блоками, структурой сайта (т.е. папками и файлами), а также настройки документооборота и управления документами.

Набор функций Сервисы наиболее зависим от наличия в системе тех или иных модулей. Полный набор функций позволяет управлять опросами, веб-формами, рекламой, рассылками, техподдержкой, форумами и почтовой системой.

Набор функций Магазин позволяет осуществить продажу товаров и услуг с сайта.

Набор функций Настройки позволяет управлять пользователями, валютами интернет-магазина, шаблонами, получать обновления системы, а также настраивать прочие параметры сайта и системы.

Меню функций

Содержимое этой панели зависит от того, какой пункт меню выбран в предыдущей области. Например, выбрав пункт Контент, вы можете получить такой вид панели:

Контент

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

Выбирая пункты дерева-меню, можно получить доступ непосредственно к тем функциям, которым они соответствуют. При этом, рабочая область (4) будет отображать интерфейс для работы именно с этими функциями.

В случае необходимости административное меню и меню функций могут быть временно скрыты/развернуты с помощью соответствующих стрелок:

Контент - стрелки скрытия

Основная рабочая область

Рабочая область - это основная область, в которой происходит большинство операций по управлению сайтом:

  • просмотр элементов, составляющих контент сайта (например, информационных блоков, баннеров и т.п.);
  • добавление контента;
  • создание и удаление папок и файлов;
  • настройка меню и т.д.

Такие операции реализуются формами двух основных видов:

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

Формы, отображаемые в рабочей области, имеют общие элементы. Ознакомьтесь с их функциями - это значительно облегчит дальнейшую работу с сайтом.

Для удобства текущего управления сайтом рекомендуется настроить Рабочий стол в Основной рабочей области.

Ссылка на текущую страницу

Пиктограмма ссылка на текущую страницу, расположенная в верхнем правом углу страницы, содержит ссылку на текущую страницу (с учетом переходов поAJAX). Скопировать ссылку в буфер обмена можно, нажав на пиктограмме правой кнопкой мыши и выбрав команду Копировать ярлык. Ссылка на страницу может понадобиться вам, например, при обращении в службу технической поддержки компании 1C-Битрикс.

Контекстная панель

Контекстные панели могут отображаться как на формах отчетов, так и на формах редактирования. Если отображаемая форма позволяет производить какие-либо действия в отношении отображаемых элементов, ниже фильтра на форме может располагаться контекстная панель, содержащая такие команды. Например, форма отчета на странице Каталог книг (Контент > Каталог книг) имеет такую контекстную панель:

контекстная панель инфоблока

Первая кнопка панели позволяет добавить новый информационный блок.

Обратите внимание на то, что большинство контекстных панелей содержит кнопки Настроить и Excel:

  • кнопка Настроить выводит диалоговое окно, в котором пользователь может выбрать колонки, которые требуется отобразить в таблице отчета данной формы, а также задать некоторые параметры, применяемые по умолчанию (поле и направление сортировки и т.п.).
  • кнопка Excel позволяет выполнить экспорт элементов формы отчета в Microsoft Excel.

Форма отчета (Списки элементов)

Форма отчета (Списки элементов)

Список элементов выводится при выборе какого-либо пункта в меню функций. В списках отображена подробная (обычно - наиболее важная) информация об элементах. Например, выбрав пункт Баннеры в разделе Реклама, пользователь получает информацию об имеющихся в системе баннерах:

Список элементов

На странице со списком элементов обычно выводится фильтр, контекстная панель, сам список элементов и панель действий под списком.

Фильтр

Фильтр - средство для поиска данных, предназначенное для отбора информации, отображаемой в списках элементов. Указав критерии поиска (отбора) в фильтре, можно найти и показать не все, а только требуемые данные (обычно - записи базы данных).

Типичный фильтр системы имеет следующий вид:

фильтр

Кнопка Показать фильтр отображает фильтр и все критерии поиска. Нажатие кнопки Свернуть фильтр скрывает его, оставляя видимой лишь панель управления фильтра. Нажав кнопку Дополнительно, можно выбрать, какие поля фильтра следует показать, а какие - скрыть.

Параметры, по которым фильтр может отображать данные будут различными для разных форм. Различно и их число. По умолчанию показывается всегда одно поле: Имя (или аналог этого понятия).

Если пользователь отметил несколько полей для поиска в конкретном фильтре, то система запомнит состояние фильтра. И для конкретного пользователя всегда будут показываться выбранные поля до следующей смены.

Элементов в таблице может быть очень много и даже после фильтрации. Для удобства просмотра предусмотрена возможность вывода на странице разного количества элементов: от 20 до всех сразу. Выбор количества выводимых элементов, а так же кнопки для перемещения по страницам списка, размещен между контекстной панелью и самой таблицей.

число элементов на странице

Таблица элементов

Таблица элементов - основное средство для группировки и отображения информации в системе. Несмотря на свое разнообразие, многие таблицы имеют схожие поля.

Колонка флажков

Колонка флажков позволяет выбрать один или более элементов для выполнения над ними каких-либо действий. Установка флажка в заголовке таблицы приводит к выбору всех элементов таблицы, отображаемых на данной странице:

колонка флажков

Действия над отмеченными элементами производятся путем выбора требуемой команды в панели действий, расположенной ниже таблицы. Чтобы применить действие сразу ко всем элементам таблицы, нужно установить флажок в поле Для всех:

палень действий

Обратите особое внимание на команду Быстрое редактирование. С ее помощью можно изменить наиболее важные и часто используемые свойства одновременно всех отмеченных элементов, отображаемых в таблице. Что наиболее важно, это дает возможность правки свойств элементов, не покидая текущей формы отчета (то есть, без переключения в форму редактирования). Рекомендуем пользоваться этими возможностями только для групповых операций небольших по объему параметров типаСортировки или Названия. В крайнем случае – анонсов. Редактирование текстов новостей или статей таким способом неудобно, лучше пользоваться формой редактирования.

Например, находясь на странице Статьи (Контент > Статьи > Статьи), можно отметить для быстрой правки элементы списка (статьи):

быстрое редактирование

После нажатия на кнопку Быстрое редактирование, отображаемые в отчете и доступные для изменения значения станут отображаться как поля ввода:

редактирование названий списка элементов

Отредактировав параметры элементов, нажмите кнопку Сохранить для внесения изменений.

Для группового выбора есть несколько дополнительных инструментов. Это флажок Для всех на Панели действий внизу Таблицы элементов и флажок в колонке Отметить все в заглавной строке Таблицы элементов. Разница между этими флажками в том, что первый отмечает все элементы таблицы, даже те, которые отображены на других страницах. А второй отмечает только элементы на открытой странице.

Меню действий

Колонка Меню действий (меню действий) содержит кнопки кнопка меню действий, нажатие на которые приводит к появлению контекстного меню, в котором можно выбрать желаемое действие, допустимое над элементом таблицы. Например, элементы таблицы страницы Статьи (Контент > Статьи > Статьи) предполагают такие действия:

дейсвтие с элементом

Настройка формы отчетов

Таблицы элементов разных форм отчета тоже, как Фильтр, могут отличаться между собой по числу и названию колонок. Вид таблицы зависит от типа выводимых данных и ваших настроек.

Кнопка Настроить, расположенная на контекстной панели списка элементов, вызывает диалог в котором пользователь может выбрать колонки, которые требуется отобразить в таблице отчёта данной формы, а также задать некоторые параметры, применяемые по умолчанию:

настройка формы отчётов

Полностью удалять все параметры из поля Выбранные колонки – нельзя, должна оставаться хоть одна колонка. Кроме изменяемых колонок в Таблице элементов есть и постоянные, неудаляемые. Это Колонка флажков и Колонка действий.

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

Для применения выбранных настроек нажмите кнопку Сохранить. Для возврата к настройкам таблицы по умолчанию нажмитеСбросить.

Форма редактирования элемента

Этот тип форм применяется для изменения элементов контента сайта или для настройки системных параметров. Например, выбрав пункт Изменить меню действий информационного блока, можно открыть форму детальной правки этого инфоблока.

В отличие от Форм отчета, которые более-менее типовые, Формы редактирования настолько разнообразны, что даже невозможно показать – относительно типовой образец. В форме может быть много полей и закладок. Но функции у них у всех одинаковые: создание каких-либо элементов и их редактирование.

Поскольку элементы контента (или формы настроек системных модулей) могут иметь большое число изменяемых свойств, многие формы редактирования реализованы при помощи страниц свойств или вкладок.

Страницы свойств, с момента своего появления, крайне широко используются при построении пользовательского интерфейса. Их применение позволяет разбить многочисленные свойства элемента на логические группы и, таким образом, сделать интерфейс более легким и понятным. Обычно свойства сгруппированы так, что на первых страницах свойств (в порядке слева направо) помещаются наиболее часто используемые, а на последних - другие, дополнительные параметры.

Иллюстрация показывает часть формы со страницами свойств информационного блока:

настройки инфоблока (с подписями)

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

Если пользователю удобнее просматривать все поля формы в одной вкладке, то для показа всех полей в одном окне (или возврата в табулярный режим) предназначена кнопка в правой части области закладок:

развернуть-свернуть

Отображение всех полей формы на разных закладках (демонстрируется не на свойствах инфоблока, а на элементе инфоблока):

свёрнуто

Отображение всех полей формы на одной закладке:

развёрнуто

Рабочий стол

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

Представление элементов на рабочем столе возможно в двух основных вариантах:

Значками (используется по умолчанию)

рабочий стол

Списком

рабочий стол - списком


Информация на сайте и работа с ней

В разделе рассмотрены вопросы работы с содержимым сайта: как непосредственно работать с информацией на сайте, какие бывают типы информации и как с ними работать, какие есть инструменты для работы с информацией и другие подобные вопросы.

Для управления информацией, представленной на страницах сайта, служит Панель управления, подключаемая вверху страницы после авторизации пользователя в системе.

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

Управление информацией это:

  • Создание страниц и разделов сайта.
  • Задание свойств страниц и разделов.
  • Размещение статической информации на странице.
  • Управление правами доступа к страницам и разделам.
  • Размещение и настройка компонентов на странице.
  • Добавление данных в информационные блоки.

Контроль сессии

Сессия - это сеанс работы пользователя с сайтом. Определяется как серия запросов к серверу, сделанных одним пользователем в заданный промежуток времени.

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

В системе "1С-Битрикс: Управление сайтом" с версии 9.5 реализована "живая сессия". Если вы долго пишете в блог или заполняете какую-либо форму, обращений к серверу не происходит, т.е. сессия формально истекает, но система проверяет ваши действия - нажатия кнопок клавиатуры, движения или клики мышью и при наличии активности автоматически продлевает вашу сессию. И только в том случае, если в окне браузера, где открыт сайт никаких действий не происходит, то сессия истекает и по истечении сессии выдается сообщение:

сессия истекла

Сообщение предупреждает об опасности потерять все несохраненные данные. Для надежности большой текст рекомендуется сохранить где-либо (в отдельном редакторе, буфере обмена), а после возобновления авторизованного сеанса заново ввести текст.

Примечание: Время жизни сессии можно изменить. Если в этом возникла необходимость - обратитесь к администратору сайта.

Типы информации

На сайте может быть представлена информация статического или динамического характера:

Статическая информация – это информация, которая редко изменяется с течением времени. Например, рекламные тексты, история компании, контактная информация и т.п. Статическая информация создается, редактируется, дополняется и удаляется пользователями, обладающими правом на редактирование страниц сайта. Такое редактирование производится, как правило, в визуальном редакторе непосредственно в тексте самой страницы.

Динамическая информация - информация, выводимая с помощью специальных программных компонентов системы. Примерами динамической информации могут служить:

  • выборка последних новостей компании;
  • каталог товаров или услуг;
  • фотогалерея;
  • поле со случайным фото;
  • рекламные баннеры;
  • и многое другое.

На одной статической странице можно разместить как статическую, так и динамическую информацию. Как правило, статическая информация размещается над динамической информацией.

Примечание: Если статическая информация добавлена на статическую страницу на которой размещен комплексный компонент, то эта информация будет видна на каждой динамической странице, создаваемой этим компонентом.

Разделы статические и динамические

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

Но с технической точки зрения - это разные вещи:

  • Раздел в динамической структуре - это запись в базе данных и такой раздел создается с помощью команды Создать раздел при включенном режиме Правка: создать раздел. (Указатель мыши должен быть наведен на область сайта, где расположен компонент.)
  • Раздел в статической структуре - это папка с файлами, которая создается по кнопке добавить раздел на Панели управления.

Аналогично и со страницами. Статическая страница - это файл в структуре сайта, который создается из Панели управления с помощью кнопки Создать страницу. А динамическая страница - это запись в базе данных и для отображения на сайте ее создает автоматически "1С-Битрикс: Управление сайтом". Данные для страницы добавляются с помощью команды Добавить элемент при включенном режиме Правка.


Пример размещения статической и динамической информации

Рассмотрим пример размещения обоих видов информации в визуальном редакторе при редактировании страницы и на странице сайта.

В визуальном редакторе статическая информация отображается непосредственно в виде текста, который можно редактировать (красная рамка). Динамическая информация в визуальном редакторе не показывается. Видна только иконка компонента (синяя рамка), который будет выводить эту самую динамическую информацию на странице сайта.

статическая и динамическая информация в визуальном редакторе

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

статическая и динамическая информация на сайте

Размещение компонентов

Размещение и настройка визуальных компонентов осуществляется при редактировании страницы в режиме визуального HTML-редактора.

Примечание: Детально о размещении компонентов смотрите в разделе Компоненты 2.0 (начальные сведения).

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

Примечание: Детально о размещении информации в информационных блоках смотрите в главе Информационные блоки (начальные сведения).

Управление любым видом информации возможно как с Публичного, так и с Административного разделов.

Редактирование и удаление информации

В Публичной части статическая информация создается, редактируется, дополняется и удаляется через верхнюю Панель управления в визуальным редакторе простым редактированием или удалением ненужного текста, так же как это делается в любом текстовом редакторе. Подробнее об этом смотрите в главе Работа с текстом.

Редактирование динамической информации осуществляется при включении режима Правка и наведении курсора мышки на область компонента, отвечающего за отображение такой информации. Например, при наведении курсора на область с лентой новостей вы можете добавить новость, отредактировать или удалить существующие. Подробнее об этом смотрите в уроке Добавление динамической информации в компоненты.

Структура страниц сайта

Формирование страницы сайта производится динамически на основе используемого шаблона страницы, данных выводимых компонентами и статической информации, размещенной на странице. Создание шаблонов сайта и размещение на них компонентов осуществляется разработчиками сайтов. Тем не менее, контент-менеджеру необходимо иметь основное представление о том как устроена страница сайта.

В общем случае все страницы сайта имеют следующую структуру:

Структура страниц сайта

Структурно дизайн поделен на две части:

  • Верхняя и нижняя части дизайна формируются на основе шаблона дизайна сайта - template.master (мастер страница). Т.е. информация, отображаемая в данных областях, определяется параметрами шаблона сайта.
  • Верхняя часть включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы.

    Нижняя - footer. Включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце сайта и так далее), нижнее горизонтальное меню и правое меню (если они есть в дизайне). Может включать в себя информационные материалы.

  • Основная рабочая область - <asp:ContentPlaceHolder ID="BXContent" runat="server"></asp:ContentPlaceHolder>. Данная конструкция разделяет верхнюю и нижнюю части дизайн. Рабочая область страницы, в которой размещаются собственно информационные материалы сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.

    Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.

Эти две части могут занимать разную площадь, иметь разную форму. Неизменно одно: их структура.

Когда речь заходит о редактировании страниц сайта, в большинстве своем имеется в виду изменение содержимого Основной рабочей области. Здесь контент-менеджер может разместить любую информацию: текст, список новостей, каталог товаров, форму голосования и т.д.

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

пример включаемой области

Включаемые области могут отображаться:

  • для всех страниц сайта;
  • для страниц определенного раздела сайта;
  • для отдельной страницы;
  • в зависимости от любых других программных условий.

Подробнее про работу с включаемыми областями смотрите в уроке Работа с включаемыми областями.

Создание новых страниц и разделов в интерфейсе Эрмитаж

Перед тем как создать новую страницу или раздел нужно определить к какому типу информации они будут относится.

Для статической информации в рамках файловой структуры сайта страница - это файл, а раздел - это папка. Соответственно, создавая страницу вы создаете файл, создавая раздел - папку.

Для динамической информации необходимо создать только одну физическую страницу и разместить на ней комплексный компонент, который и создаст раздел, состоящий из динамически (программно) создаваемых страниц.

Создавать раздел или страницу можно как с Публичной части, так и с Административного раздела. Контент-менеджеру рекомендуется работать с Публичной части.

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

Создание страниц

Создание страниц осуществляется с помощью кнопки:

создать страницу

С помощью верхней части кнопки можно в один клик запустить мастер создания страницы. С помощью нижней части кнопки можно выбрать вариант создания страницы: обычным мастером из публичной части или в административном разделе.

Создание страниц с помощью мастера

Мастер создает страницу в несколько шагов. Число шагов зависит от активных опций, выбранным в первом шаге. Если все опции будут неактивными, то завершение страницы возможно уже после после первого шага. Завершение работы мастера производится по нажатию на кнопку Готово.

Первый шаг.

создание страницы мастером - шаг 1

  • Поле Заголовок страницы - это название страницы.
  • Поле Имя файла - это название файла в рамках файловой структуры сайта. 

Примечание: В системе не доступно задание имени файла и на русском языке. 

В названии файла так же недопустимо использование следующих спецсимволов: \ / ? * < > " '.

Пожалуйста, используйте только латинские буквы, цифры и следующие символы: ! ( ) [ ] { } - . _ ~

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

Второй шаг

Задание пункта меню для страницы

создание страницы мастером - шаг 2

  • Имя нового пункта - название, под которым страница будет отображаться в меню.
  • Тип меню - меню в которое будет добавлена страница
  • Вставить перед пунктом - в выпадающем списке существующих списков меню выберите нужный пункт.

Третий шаг

Задание свойств страницы.

создание страницы мастером - шаг 3

  • Поле Описание - описание страницы.
  • Поле Ключевые слова - ключевые слова страницы, необходимы для поисковых машин.

После этого шага нужно нажать на кнопку Готово, мастер перейдет к редактированию страницы.

Четвертый шаг

Наполнение страницы содержанием.

создание страницы мастером - шаг 4

Добавьте на страницу нужную статическую информацию или компоненты.

Создание разделов

Создание раздела производится с помощью кнопки:

создать раздел

Верхняя часть кнопки сразу запускает мастер создания раздела. Нижняя часть позволяет выбрать создание раздела через мастер, либо в панели управления. Контент-менеджерам рекомендуется использовать мастер.

Все шаги мастера создания раздела аналогичны мастеру создания страницы.

Внимание! При создании раздела автоматически создается страница Default.aspx, которая и отображается на сайте как главная страница раздела. Удаление этой страницы приведет к тому, что раздел станет недоступен для просмотра.

Управление свойствами страниц и разделов

Свойства раздела и страницы — это параметры, которые влияют на отображение страницы в браузере и ее взаимодействие с поисковыми системами.

Предлагаемая в продукте возможность задавать свойства страниц и разделов позволяет:

  • организовать гибкое управление показом информации на сайте;
  • управлять мета-данными страниц (например, ключевыми словами) для оптимизации сайта под поисковые системы;
  • управлять показом навигационной цепочки;
  • и т.д.

Управление свойствами страницы

Настройка свойств страницы выполняется в публичном разделе:

  • при создании страницы с помощью кнопки Создать страницу

добавить страницу

в форме Мастер создания новой страницы

создание страницы мастером - шаг 3

либо

  • при редактировании страницы с помощью пункта меню Заголовок и свойства страницы кнопки Изменить страницу

изменение свойств страницы

в форме Свойства страницы

форма изменения свойств страницы

Управление свойствами раздела

Свойства раздела — это свойства, которые будут автоматически наследоваться всеми подразделами и страницами данного раздела. Пользоваться этим способом назначения свойств удобнее всего. При необходимости вы можете отредактировать свойства любой отдельно взятой страницы раздела, подправив ее параметры под конкретную ситуацию.

Внимание! Любое действие кнопок, размещенных на Административной панели, относится к открытой на данный момент странице или разделу. Если необходимо изменить свойства какого-либо конкретного раздела (страницы), то нужно перейти в Публичном разделе именно в этот раздел (на эту страницу) либо воспользоваться кнопкой Структура.

Использование свойств разделов позволяет:

  • устанавливать значения свойств для всех страниц раздела по умолчанию;
  • создавать дополнительные средства управления показом информации на страницах раздела.

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

Настройка свойств раздела выполняется в публичном разделе:

  • при создании раздела с помощью кнопки Создать раздел

    добавить раздел

    в форме Мастер создания нового раздела

    создание раздела мастером - шаг 3 - свойства раздела

  • либо

  • при редактировании раздела с помощью пункта меню Свойства раздела кнопки Изменить раздел

    изменение свойств раздела

    в форме Свойства раздела

    форма изменения свойств раздела

Управление правами доступа

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

Например, можно задать права только на чтение/изменение каких-либо отдельных страниц или разделов только для отдельных групп пользователей. Или запретить пользователям с определённой ролью, например, редактирование пунктов меню.

Реальное право доступа складывается из суммы уровней доступа на страницу, на модуль, на инфоблок и так далее.

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

Ограничение доступа

Ограничить доступ можно только на этапе редактирования страницы или раздела. 

Внимание! Для ограничении доступа необходимы соответствующие права. Эту операцию может выполнить только пользователь с правами полного доступа на этот раздел (страницу). При недостатке у контент-менеджера прав на раздел, обращайтесь к администратору сайта.

Уровень доступа к текущему разделу устанавливается с помощью команды Доступ к разделу меню Изменить раздел административной панели.

изменить уровень доступа к разделу

Уровень доступа для текущей страницы устанавливается с помощью команды Изменить доступ к странице меню Изменить страницу административной панели.

изменить уровень доступа к странице

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

форма редактирования прав на доступ к разделу

Если для всех групп по умолчанию установить право Доступ закрыт, то кнопки Изменить страницу/Изменить раздел на административной панели будут отображаться с символом замок. Это означает, что просмотр этой страницы будет закрыт для всех групп, кроме указанных ранее в форме Права доступа к разделу/странице.

доступ закрыт

Работа с включаемыми областями

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

Включаемые области служат для размещения справочной информации, различных форм (подписки, голосования, опросов), новостей и любой другой статической и динамической информации. Также в виде включаемой области могут быть выполнены области с указанием авторских прав, графические ссылки, контактная информация, логотип компании и т.п.

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

  • включаемая область страницы – выводится только при просмотре определенной страницы;

    включаемая область страницы

  • включаемая область раздела – выводится на всех страницах определенного раздела сайта;

    включаемая область раздела

  • включаемый файл – в области выводится информация какого-либо файла (например, название компании, информация об авторских правах и т.д.). Как правило этот файл применяется для всего сайта.

    включаемый файл

Как правило, включаемые области включают в шаблон дизайна сайта. Один компонент может быть настроен только на один из вышеописанных вариантов отображения. Кроме того, они могут отображаться на страницах сайта в соответствии с любыми другими условиями. Например, только на главной странице сайта или только для авторизованных посетителей, и т.д.

Использование включаемых областей позволяет управлять не только текстом. Можно поместить в эту область картинку вместо текста (или компонент Случайное фото) и получить индивидуальный вид каждого раздела. При этом индивидуальность будет «динамическая», изменяемая.

Использование включаемых областей в плане интеграции в дизайн имеет ограничение. Оно связано с размером, отведенным под ячейку, в которой размещен компонент. Если вводимый текст, картинка, либо что-то еще по своим размерам больше, чем отведенное компоненту место, то дизайн «поедет», то есть исказится.

Задание параметров где отображать включаемую область производится в настройках компонента:

параметры включемой области

Размещение включаемой области

Количество включаемых областей может быть изменено. При этом потребуется некоторая модификация шаблона сайта (например, добавление в шаблон дизайна компонентов или php-кода для подключения дополнительных редактируемых областей), что требует определенной квалификации. Поэтому при необходимости задать дополнительные включаемые области обратитесь к администратору сайта или к разработчикам сайта.

Создание и редактирование включаемой области

Создание включаемых областей может быть выполнено двумя способами:

  • из административного раздела в Менеджере файлов, создав файл с соответствующим именем;
  • из публичного раздела сайта в режиме Правки. В тех местах, где предполагается вывод включаемых областей, будут показаны иконки для быстрого перехода к созданию или редактированию этих областей.

    создание включаемой области

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

Для контент-менеджеров рекомендуется именно второй способ.

Аналогично перейти к редактированию включаемых областей можно

  • непосредственно из публичного раздела сайта в режиме редактирования контента или режиме разработки и настройки сайта:

    редактирование включаемой области

  • либо из административного раздела, открыв для редактирования соответствующий файл в Менеджере файлов.

Загрузка файлов на сайт

Загружать любые файлы на сайт можно из административного раздела в специальной форме. Учтите, что настройками сайта могут накладываться ограничения на размер загружаемых файлов. Размер этих ограничений можно узнать у администратора сайта. С ним же и нужно решать вопросы увеличения, при необходимости, этого ограничения.

Примечание! Система поддерживает использование файлов с именами как на латинице, так и на кириллице, без ограничений по регистру. Недопустимо только использование спецсимволов: \ / ? * < > " '.


Применение шаблонов дизайна

Шаблон дизайна — это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный HTML-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.

Как правило для большинства страниц сайта используется один и тот же шаблон внешнего вида. Однако "Bitrix .NET Forge CMS" допускает использование любого количества шаблонов. Вплоть до того, что можно назначить свой собственный шаблон на каждый раздел сайта, на каждую страницу. И более того, выводить разные шаблоны для одной и той же страницы в зависимости от разных условий, например, для авторизованных пользователей один шаблон, для неавторизованных - другой.

Шаблоны создаются и размещаются в системе разработчиками сайтов или администраторами. Контент-менеджеру остается только назначить использование шаблона для той или иной страницы. Условия, от которых зависит выбор системой шаблона могут быть разные. Однако для применения некоторых условий требуются навыки программиста. Если вы не уверены в правильном назначении условия применения шаблона, обратитесь к администратору сайта.

Применение шаблонов к странице производится в Административном разделе на странице редактирования сайта Настройки > Настройки продукта > Сайты > Список сайтов. Перейдите на эту страницу и откройте для редактирования нужный сайт.

Внимание! Это очень важная страница! На ней, кроме описанных ниже действий, ничего более выполнять нельзя без ведома администратора!

Внизу открывшейся формы есть группа полей Шаблон.

В полях колонки Тип условия можно выбрать одно из следующих значений:

выбор шаблона сайта

  • Без условия - выбранный шаблон будет применен к каждой странице сайта, к которой не указано условия.
  • Для папки и файла - выбранный шаблон будет применен только к указанной папке (разделу) или файлу (странице). При выборе этого условия в колонке Условие появится поле для указания папки или файла. Папку или файл можно указать вручную, либо с помощью кнопки [...].
  • Для ролей пользователей - страница в выбранном шаблоне будет отображаться только тем пользователям, которые относятся к указанным ролям. В колонке Условия отобразится список всех ролей, имеющихся в системе. Можно выбрать одну или несколько групп.
  • Период времени - страница будет отображаться в выбранном шаблоне в указанный период времени.
  • Параметр в URL - страница в выбранном шаблоне будет отображаться только в случае если в ее адресе стоит определенный параметр.

Примечание: Использование типа Параметр в URL позволяют задать очень сложные зависимости для применения шаблона, однако требуют определенной квалификации. Для использования этого типа обратитесь к администратору сайта.

Управление структурой

В разделе рассматривается процесс управления структурой сайта.

Управление структурой возможно только через Административный раздел с помощью Менеджера файлов.

Через Публичный раздел с помощью раздела Структура сайта (Меню -> Контент -> структура сайта) возможен только переход в соответствующий раздел в административном разделе.

Менеджер файлов

Из Административной части управление структурой осуществляется с помощью Менеджера файлов.

Инструменты и средства управления Менеджера файлов позволяют:

  • создавать и удалять папки и файлы;
  • выполнять загрузку файлов в систему;
  • выгружать файлы на локальный компьютер;
  • управлять свойствами страниц и папок;
  • переходить к созданию и редактированию страниц;
  • управлять меню разделов сайта;
  • управлять правами доступа ролей пользователей к страницам и разделам сайта;
  • просматривать права на доступ к файлам и папкам на уровне операционной системы.

Перейти в Менеджер файлов можно из административного меню (Контент > Структура сайта). Меню для секции Структура сайта создается динамически по мере погружения в уровни иерархии:

структура

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

Физическая структура - список папок и файлов в том виде, в котором они существуют на сервере.

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

файлы и папки в физической структуре сайта

Менеджер файлов содержит следующие элементы управления:

  • Контекстная панель;
  • Контекстное меню;
  • Панель групповых операций.

Контекстная панель

Контекстная панель содержит набор общих команд, необходимых для управления структурой и контентом сайта:

Контекстная панель

ИконкаНазваниеОписание
новая папкаНовая папкасоздание новой папки в текущей директории;
новый файлНовый файлсоздание нового файла в текущей директории;
загрузить файлЗагрузить файлпереход к форме загрузки файлов в текущую директорию;
добавить менюДобавить менюсоздание меню для текущего раздела сайта;
свойства папкиСвойства папкипереход к форме управления свойствами текущей папки;
Показать права на доступпозволяет показать в столбце Права на доступ продукта уровень прав доступа к файлам и папкам для выбранной группы пользователей;
Путьпозволяет перейти в указанную директорию сайта;
доступ для текущей папкиДоступ для текущей папки переход к форме редактирования прав доступа к текущей папке;
настроитьНастроитьпозволяет настроить вид списка файлов и папок;
выгрузить в эксельExcelэкспортирует данные из отображаемой таблицы в формат MS Excel.

Контекстное меню

Контекстное меню позволяет выполнять определенные действия над выбранным файлом или папкой. Вызвать контекстное меню элемента можно с помощью кнопки кнопка контекстного меню, расположенной в столбце Действия, либо с помощью клика правой кнопкой мыши на выбранном элементе:

контекстное меню

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

Панель групповых операций

Данная панель позволяет выполнять групповые операции над элементами списка, отмеченными в Колонке флажков.

панель групповых операций

ИконкаОписание
для всехприменение выбранного действия ко всем элементам в списке;
быстрое редактированиебыстрое редактирование выбранных элементов непосредственно в списке (и т.ч. переименование файлов и папок);
удаление выбранных элементовудаление выбранных элементов;
кнопка действиесписок действий, доступных для выполнения над выбранными элементами:
  • Копировать... - копирование выбранных элементов в указанную директорию;
  • Переместить... - перемещение выбранных элементов в указанную директорию.
Для выполнения выбранного действия служит кнопка Применить. Перед совершением действия необходимо указать путь куда будет скопированы/перемещены элементы.

  • Это можно сделать в ручном режиме, самостоятельно указав адрес:
адрес копирования-перемещения

Либо
  • Воспользоваться мастером выбор пути копирования-перемещения:
настройка пути копирования-перемещения
доступ для текущей папкиПереход к настройке прав доступа для выбранных элементов:
форма настройки прав для группы файлов

Управление меню

Управление меню может осуществляться как с Публичной части сайта, так и с Административной. Контент-менеджерам рекомендуется работать, используя возможности публичного интерфейса. Работа с меню сайта через Административный раздел предоставляет больше возможностей, но для их использования нужно иметь соответствующую квалификацию.

Меню в системе "Bitrix .NET Forge CMS" наследуемое. Это значит, что если для одного компонента Меню в шаблоне сайта выбран определенный тип меню, то это меню будет транслироваться ниже на все разделы и страницы сайта с этим шаблоном, если в этих разделах и страницах не было созданного собственного меню. Этот механизм удобен для главного меню сайта, обычно ему присваивают тип Верхнее (Top).

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

Меню разделов, как правило, создается для каждого раздела свое и транслируется на все страницы раздела. При необходимости в подразделах можно создать свое собственное меню и применить к нему собственный тип. Будьте внимательны, наследуемое меню накладывает одну особенность. Если вы воспользуетесь командой Редактировать пункты меню в разделе, в котором не создано собственное меню, то фактически вы будете редактировать вышестоящее меню.

Типы меню

Использование меню нескольких типов позволяет создать на сайте удобную систему навигации. На сайте может быть представлено несколько меню различных типов: верхнее, левое, нижнее и т.п. Как правило, используется одно "основное" меню, соответствующее самому верхнему уровню иерархии и отображаемое во всех разделах сайта, и "второстепенное" (правое боковое или левое боковое), отображающее содержание раздела.

меню

Число типов меню не ограничено системой. Типы используемых на сайте меню задаются из административного раздела на странице настроек модуля Управление структурой (Настройки > Настройки продукта > Настройки модулей > Главный модуль > вкладка Управление структурой).

Например, пусть в системе используются два типа меню:

типы меню

  • левое меню – тип "left";
  • верхнее (основное) меню – тип "top".

Тип меню, заданный в настройках Главного модуля, будет использован для идентификации файлов с пунктами меню (например, left.menu). Кроме того, имя типа меню используется для подключения меню в шаблоне дизайна.

Примечание: Типы меню могут быть заданы отдельно для каждого сайта.

типы меню для каждого сайта

Типы меню задаются произвольно (только символами латинского алфавита). Однако для упрощения управления меню рекомендуется давать типам меню значимые имена. Например, top, left, bottom.

Построение меню

Построение меню может производится как на основе статических разделов и страниц, так и на основе динамической информации: разделов и элементов инфоблоков.

Построение меню из динамических элементов - информационных блоков - позволяет снять с контент-менеджера часть нагрузки по поддержке сайта. Не нужно будет выполнять работы по актуализации меню в связи с появившимися новыми разделами и страницами. Эту работу, как правило, выполняет разработчик сайта или администратор сайта.

Создание

Создание меню производится с помощью соответствующей команды кнопки Меню.

создать меню

По этой команде откроется форма создания меню. Заполнение полей формы аналогично редактированию меню, которое описано ниже.

Управление меню

Для управлением меню воспользуйтесь командой Редактировать пункты меню в панели команд компонента или командой Редактировать меню в выпадающем списке команд кнопки Меню Панели управления.

редактировать меню

Откроется Форма редактирования меню:

форма редактирования меню

Поля "Название" и "Ссылка" становятся активными для редактирования при наведении и клика по ним.

Для добавления пунктов меню воспользуйтесь кнопкой Вставить пункт. Для редактирования и удаления пунктов меню, а так же их порядка расположения воспользуйтесь командами:

ПоляОписание
НазваниеИмя пункта меню.
СсылкаСсылка на пункт меню.
ИнструментыОписание
Перетащить пункт меню мышьюИнструмент для изменения положения пункта меню в общем порядке способом Drag&Drop.
 Открыть диалог выбора файлаПереход к диалогу выбору ссылки на раздел или страницу, по которой будет осуществлен переход при выборе данного пункта меню.
Передвинуть пункт вышеИнструменты для пошагового изменения положения пунктов меню относительно друг друга.
Передвинуть пункт нижеИнструменты для пошагового изменения положения пунктов меню относительно друг друга.
 Удалить пункт менюУдаление пункта меню

Примечание: При удалении пункта меню не происходит удаления папки (страницы), относящейся к этому пункту. Если вам вместе с пунктом не нужна и папка (страница), то ее удаление нужно выполнить дополнительно через кнопку Структура. Это сделано для того, чтобы иметь возможность выводить из показа разделы, которые временно не нужно демонстрировать. Данный способ хорош тем, что пользователь не видит даже саму ссылку из меню на раздел.

Внимание! Если при удалении страниц сайта в форме диалога не снять флажок с поля удалить cтраницу из меню, то файл удалится, а пункт меню останется. В этом случае переход по пустому пункту меню приведет к 404 ошибке.

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

Пункт меню с ограниченным доступом

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

Управление цепочкой навигации

Цепочка навигации представляет собой последовательный список ссылок на разделы сайта и показывает уровень «погруженности» текущей страницы в структуру сайта.

навигационная цепочка

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

Навигационная цепочка подключается с помощью визуального компонента Навигационная цепочка (bitrix:system.PublicBreadCrumb). Чтобы цепочка навигации по умолчанию выводилась на всех страницах сайта, ее обычно подключают в шаблоне дизайна сайта. Эту операцию выполняют разработчики сайта при его создании. Контент-менеджеру остается только управление названиями разделов, которые будут отображаться в цепочке навигации

Название ссылки в навигационной цепочке на раздел сайта определяется в поле Заголовок на странице настройки свойств раздела (свойств страницы), либо поле Название, если речь идет об элементе инфоблока.

Управление пунктами цепочки навигации

Название ссылки в навигационной цепочке определяется в поле Название формы редактирования меню раздела.

Например, изменим название пунктов левого меню раздела. Для этого выполните следующие действия:

  • Перейдите в раздел, название пунктов которого необходимо изменить.
  • На Административной панели нажмите кнопку Меню и выберите пункт Редактировать пункты левого меню:

меню

  • Загрузится форма редактирования пунктов меню:

редактировать меню

  • В поле Название измените имя пункта(-ов) меню (например, Архитектура 19 века).
  • Сохраните внесенные изменения с помощью кнопки Сохранить.

В результате в публичной части название ссылки в навигационной цепочке и имя пункта меню будет изменено сразу же после сохранения:

пример навигационной цепочки


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

Визуальный редактор

Глава курса знакомит контент-менеджера с правилами и возможностями работы в визуальном HTML-редакторе, который позволяет управлять информационным содержанием страницы в режиме реального времени через браузер. Большим преимуществом редактора является возможность работать с визуальными компонентами: размещать их на странице и настраивать их параметры, определяющие внешний вид динамически меняющейся информации. Также визуальный редактор обладает другими обширными средствами редактирования страниц.

WYSIWYG (произносится как «ви-зи-виг», от англ. What You See Is What You Get — «что видишь, то и получишь») — способ редактирования, при котором корректируемый материал в процессе редактирования выглядит в точности так же, как и конечный результат.

Визуальный редактор в "Bitrix .NET Forge CMS" является штатным функционалом и не требует дополнительной установки. Администратор сайта может запретить использование редактора в некоторых случаях. Если Визуальный редактор недоступен, то обратитесь к администратору.

Примечание! Визуальный редактор Bitrix .NET Forge CMS по своим возможностям и функционалу практически идентичен визуальному редактору 1С-Битрикс: Управление сайтом для которого можно скачать материалы главы в формате PDF

Описание интерфейса

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

Внешний вид редактора

Рассмотрим внешний вид редактора и его панели подробнее. Визуальный редактор, открываемый из Публичной части и из Административного раздела несколько различается по функционалу.

Визуальный редактор в публичной части:

внешний вид визуального редактора .NET Forge CMS 7.0

Визуальный редактор в административной части:

внешний вид визуального редактора .NET Forge CMS 7.0 - в административном интерфейсе

Мы будем описывать окно редактора в Административном разделе, т.к. в нем доступен несколько более широкий набор кнопок и возможностей, чем в Публичной части.

Панель инструментов

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

  • Стандартные

    стандартная панель инструментов

  • Шаблон сайта

    панель инструментов шаблоном сайта

  • Управление и настройки

    Управление и настройки

  • Стиль

    панель управления стилем

  • Форматирование

    панель управления форматированием

В административном разделе на каждой из этих панелек имеются специальные области для перемещения панели в любое место окна редактора.

область перемещения панели 1

При наведении курсора на выделенную область курсор меняет внешний вид.

область перемещения панели 2

Теперь вы можете перетаскивать панель в любую область редактора. После переноса вы можете ее закрыть, нажав на кнопку Х в правом верхнем углу панели.

область перемещения панели 3

Восстановить отображение панели можно с помощью кнопки настройки Настройки.

Внимание! Состав и набор кнопок на панели инструментов может отличаться, в зависимости от режима работы редактора и настроек администратора.

Панель задач

Панель задач используется для быстрого доступа к компонентам. Компоненты делятся на системные и пользовательские, а так же на разделы по их функциональному назначению (Контент, Интернет-Магазин, Сервисы, Общение, Служебные и другие, если такие создаст разработчик). Панель задач позволяет быстро добавить на страницу компонент и приступить к настройке его параметров, не используя код.

Отображать и скрывать панель Компоненты можно с помощью соответствующих кнопок панели 6. Доступны следующие действия управления панелью задач:

дейсвтия с панелью задач

  • По кнопке Свернуть можно временно скрыть панель. Вернуть ее можно, используя кнопки панели 6.
  • Кнопка Обновить закешированные данные позволяет сбросить кеш, например, если были добавлены собственные компоненты.
  • Кнопка Настроить вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке настройки Настройки панели инструментов.
  • Кнопка Закрыть закрывает отображаемую панель. Восстановить ее отображение можно с помощью формы настройки редактора (кнопка настройки).

Панель переключения режимов редактирования

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

Панель переключения режимов редактирования

Кнопка исходный код служит для перехода от визуального режима к работе с исходным кодом. В режиме работы с исходным кодом не все кнопки панели редактирования доступны. Можно работать только с панелью Управление и настройки  Управление и настройки, а также доступными остаются кнопки открыть на полный экран и настройки. Остальные кнопки панели редактирования заблокированы.

Кнопка wysiwyg служит для перехода обратно к режиму визуального редактирования.

Кнопка совмещённый режим редактирования служит для перехода в совмещенный режим редактирования, при котором можно работать одновременно и с визуальной частью, и с исходным кодом:

совмещённый режим редактирования

Внимание! Режим работы с исходным кодом рекомендуется использовать только подготовленным пользователям.

 

Примечание! При работе с исходным кодом и в совмещенном режиме редактирования становится доступной кнопка , которая служит для переноса не поместившейся на текущей строке части кода на следующие строки. Заметим, что эта кнопка присутствует и работает только в браузере Internet Explorer.
совмещённый режим редактирования - InternetExplorer

Панель отображения свойств объектов (Свойства)

В области Свойства отображаются свойства того объекта, на котором установлен курсор мыши в данный момент. Это может быть визуальный компонент, тогда в области Свойства можно будет настроить параметры этого компонента. Панель Свойства также является скрывающейся, что регулируется кнопкой панели 6. Доступны следующие действия управления панелью Свойства:

свойства

  • По кнопке Свернуть можно временно скрыть панель. Вернуть ее можно, используя кнопки панели 6.
  • Кнопка Настроить вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке настройки Настройкипанели инструментов.



Настройка внешнего вида редактора

Работая с визуальным редактором, вы можете настроить его внешний вид, который будет автоматически запомнен:

  • определить отображаемые панели;
  • отключить ненужные в данный момент панели задач или панели инструментов.

Для этого служит кнопка настройки Настройки панели инструментов. По нажатии на эту кнопку появляется диалоговое окно Настройки визуального редактора:

Настройки визуального редактора - Панели инструментов

Форма настроек состоит из трех закладок:

  • Панели инструментов - служит для настройки показа панели инструментов. Есть возможность отключить ненужные в данный момент панели (снимая флаги рядом с названием панелей). Панель Стандартные отключить невозможно.
    При запуске визуального редактора из публичной части закадка Панели инструментов не будет выведена. Т.е. регулировать набор панелек будет невозможно.
  • Панели задач

    Настройки визуального редактора - Панели задач 

    Работая с опциями данной закладки, можно отключить отображение ненужных на данный момент панелей задач.
  • Дополнительные настройки

    Настройки визуального редактора - Дополнительные настройки 

    Опция Показывать подсказки к параметрам компонентов управляет отображением всплывающих подсказок к настройкам компонентов при их изменении в панели Свойства (для этого данные подсказки для параметров компонента должны быть заданы разработчиком). 

    Опция Использовать визуальные эффекты на данный момент определяет наличие тени при открытии/сворачивании панелей задач. В дальнейшем функционал опции будет расширяться.

Кнопка Восстановить по умолчанию позволяет восстановить отображение всех панелей визуального редактора в исходном виде.

Обратите внимание! Вы можете значительно ускорить загрузку визуального редактора, отключив не используемые панели инструментов и панели задач. Это можно выполнить в форме настройки редактора либо воспользовавшись крестиками в самом редакторе.

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

Администратор сайта может в случае необходимости включить и полноэкранный режим работы визуального редактора.

Режимы работы

Новая версия визуального HTML-редактора разработана на JavaScript. Редактор работает со следующими браузерами:
  • Internet Explorer версии 7 и выше;
  • Firefox версии 3.x и выше;
  • Opera версии 10.x и выше;
  • Safari версии 5 и выше;
  • Google Chrome версии 7 и выше.

Используя редактор, можно формировать и изменять содержание статических и динамических страниц, уроков обучающих курсов, элементов информационных блоков и прочее.

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

  1. Для редактирования страниц;
  2. Для редактирования текстовых описаний внутри формы, например, для редактирования элементов информационных блоков;
  3. Для редактирования шаблона сайта (не рекомендуется для сложных шаблонов!).
Примечание: использование визуального редактора для редактирования шаблона может быть запрещено администратором сайта или разработчиком.

Редактирование страницы

Редактировать страницу с помощью визуального HTML-редактора можно как из Публичной части, так и из Административного раздела (если имеется соответствующий доступ).

Редактирование страниц из публичного раздела

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

редактировать страницу

В Публичной части загрузится окно редактора над поверхностью сайта.

Редактирование страниц из публичного раздела

Редактирование страниц из административного раздела

Вы также можете работать с визуальным редактором в Административном разделе.

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

Редактирование страниц из административного раздела


Редактирование текстовых описаний

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

Используя режимы работы публичного интерфейса можно добавлять/изменять элементы или разделы инфоблоков.

Приведем пример управления новостями.

  • Для этого перейдите в Режим правки.

    режим правки

  • Наведите курсор мыши на внутреннюю область страницы, где размещены новости.
  • На появившейся Панели компонента выберите кнопку Добавить новость/раздел.
  • панель компонента

Загрузится форма добавления, в которой можно использовать визуальный редактор.

форма добавления элемента ИБ

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

Внимание! Возможность использования визуального редактора может быть отключена администратором сайта. Кроме того, редактор может быть не виден, если форме снят флажок с чекбокса Визуальный редактор.

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

Работа с текстом

Визуальный редактор обладает широкими возможностями для редактирования текста. В данной главе будут рассмотрены основные операции по работе с текстом такие, как:
  • форматирование текста веб-страниц, используя набор основных инструментов текстового редактора MS Word;
  • вставка текста напрямую из редактора MS Word с автоматической очисткой кода;
  • проверка орфографии и грамматики текстов сайта в визуальном редакторе.

Также будет рассмотрено создание таблиц и ссылок.

Форматирование текста

Визуальный редактор предоставляет различные средства форматирования текста. Опишем подробнее кнопки и выпадающие списки панели форматирования:

панель форматирования текста

Стили шаблонов сайта

При переходе к редактированию динамических элементов (например, элементов инфоблоков) в визуальном редакторе в списке шаблонов templates_panel.png будет выбран шаблон по умолчанию. Его таблица стилей (файл styles.css) будет подключена для использования для данной страницы.

Для каждого шаблона задается своя таблица стилей (файл styles.css). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.

Для каждого из стилей шаблона может быть задано название. В визуальном редакторе описанные стили выводятся идентификаторами (ID) шаблонов сайтов к которым относятся.

Примечание: Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название styles.css и содержит стили для представления внутреннего содержания страниц на сайте. Во втором – с именем template_styles.css – описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора.

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

список стилей в визуальном редакторе

Работа с заголовками

В визуальном редакторе есть возможность управлять заголовками в тексте. Для этого существует выпадающий список, в котором можно выбрать нужное выделение заголовка:

заголовки в визуальном редакторе

Значение Normal из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.

Таблица соответствий внешнего вида заголовка и его кода:

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>
Preformatted
<pre>Preformatted</pre>

Шрифты

В визуальном редакторе доступны следующие шрифты:

шрифты в визуальном редакторе

Для задания шрифта при редактировании в режиме кода используется такой HTML-код:

<font face="font_name"> TEXT </font>

где font_name заменяется на название выбранного шрифта из списка доступных: Times New RomanCourierArialTahoma,Verdana или Georgia.

Цвет фона текста задается по кнопке цвет фона. Выполнение действия происходит с использованием стиля для тега <font>. Например, при редактировании в режиме кода при выделении фона текста желтым цветом код будет выглядеть так:

<font style="BACKGROUND-COLOR: #ffff00">ТЕКСТ</font>

Цвет самого текста задается по кнопке цвет шрифта. Это действие выполняется помощью атрибута color тега <font>. Например, при редактировании в режиме кода при выделении текста желтым цветом код будет выглядеть так:

<font color="#3366ff">ТЕКСТ</font>


Размер шрифта

В редакторе могут быть использованы следующие размеры шрифтов:

размер шрифта в визуальном редакторе

Для задания размера шрифта при редактировании в режиме кода используется такой код:


<font size="size_number">TEXT</font>

где size_number заменяется на размер шрифта от 1 до 7. Например, в визуальной части текст medium соответствует коду: <font size="4">medium</font>

Кнопки форматирования

Рассмотрим, с помощью каких тегов реализуется различное написание текста.

КнопкаТекстТеги
Жирный<strong>Жирный</strong>
Курсив<em>Курсив</em>
Подчеркнутый<u>Подчеркнутый</u>

Кнопка удалить текстовое форматирование удаляет текстовое форматирование, т.е. удаляет тег <font> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.

Кнопка горизонтальный разделитель позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <hr>

Кнопка оптимизировать HTML Оптимизировать HTML-код убирает пустые HTML-теги.
Список убираемых пустых тегов: b, em, font, h1, h2, h3, i, li, ol, p, small, span, strong, u, ul и т.д.
В дальнейшем функционал этой кнопки будет расширяться.

Выравнивание текста


КнопкаТекстТеги
по левому краю

По левому краю

<p align="left">По левому краю</p>
по правому краю

По правому краю

<p align="right">По правому краю</p>
по центру

По центру

<p align="center">По центру</p>
по ширине

Выравниваем по ширине

<p align="justify">Выравниваем по ширине</p>

Списки элементов

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

  1. первый
  2. второй
  3. третий

Для этого представления при редактировании в режиме кода используется следующий код:

<ol>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ol>

Второй вид, маркированный список, создается с помощью кнопки маркированный список и выглядит так:

  • первый
  • второй
  • третий

Исполняемый код такой:

<ul>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ul>

Сдвиг текста

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

<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p>ТЕКСТ</p>
</blockquote>

Кнопка сдвиг текста влево сдвигает текст влево и убирает из кода тег <blockquote>

Примечание: в визуальном редакторе в области Свойства есть возможность просматривать и редактировать свойства того объекта, на котором установлен курсор мыши в данный момент. Для разных объектов набор свойств не одинаков. Например, для текста в панели Свойства представлены такие параметры:

параметры для текста


Если выделено изображение, то: 

параметры для картинки


А если выделить ссылку в рабочей области, то в Свойствах отобразится следующее: 

параметры для ссылки


Копирование и вставка текста

Для копирования и вставки текста служат следующие кнопки:

КнопкаДействие
paste from wordВставляет фрагмент из редактора MS Word. Позволяет очистить добавляемый текст от дополнительных элементов форматирования (например, стилей, шрифтов, дополнительных отступов).
paste from textВставляет фрагмент как текст.
выделить всёПозволяет выделить все содержимое страницы.

Рассмотрим разницу между возможными режимами вставки текста, скопировав текст из редактора MS Word в визуальный редактор разными способами. Пусть мы хотим скопировать из MS Word следующий текст:

отображение фрагмента текста

Скопируем этот фрагмент в буфер и вставим его в содержание страницы тремя разными способами:

  1. При вставке текста из редактора MS Word с помощью комбинации клавиш Ctrl+Insert или Ctrl+C, то текст будет вставлен без удаления каких-либо элементов форматирования:

    отображение фрагмента текста

    В этом случае код будет таким:


    <p style="LINE-HEIGHT: normal; MARGIN: 12pt 0cm 3pt; mso-outline-level: 2" class="MsoNormal">
    <b><i><span style="FONT-FAMILY: &quot;Arial&quot;,&quot;sans-serif&quot;; COLOR: black; FONT-SIZE: 18pt;
    mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: RU">
    Осень
    </span></i></b><b>
    <span style="FONT-FAMILY: &quot;Times New Roman&quot;,&quot;serif&quot;; FONT-SIZE: 18pt;
    mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: RU">
    <p></p>
    </span></b></p>

    <p style="LINE-HEIGHT: normal; TEXT-INDENT: 35.4pt; MARGIN: 0cm 0cm 0pt" class="MsoNormal">
    <span style="FONT-FAMILY: &quot;Arial&quot;,&quot;sans-serif&quot;; FONT-SIZE: 9pt;
    mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: RU">
    Еще очень тепло, но наступление осени ощущается в каждом дуновении ветерка.
    Деревья сбрасывают обожженную за лето листву. Кажется, что стволы темнеют,
    они устали и хотят спать. Неугомонные мелкие паучки с невероятной скоростью плетут паутины,
    и ты, не видя, срываешь их ловушки&hellip;
    </span><span style="FONT-FAMILY: &quot;Times New Roman&quot;,&quot;serif&quot;; FONT-SIZE: 12pt;
    mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: RU"> </span>
    <span style="FONT-FAMILY: &quot;Arial&quot;,&quot;sans-serif&quot;; FONT-SIZE: 12pt;
    mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: RU">
    <p></p>
    </span></p>

    <p></p>

    Как видим, при таком варианте вставки многое в коде является лишним. Это приводит к передаче лишней, незначимой информации, что в свою очередь увеличивает время ее загрузки.

    Если вставлять текст из браузера при помощи этой же комбинации клавиш, то код этого фрагмента текста будет содержать стандартные HTML-теги без дополнительного форматирования.

    Данный инструмент подходит для быстрой вставки заранее отформатированного для web текста.


  2. По нажатии на кнопку paste from word Вставить из Word появляется диалоговое окно для установки уровней очистки текста от тегов редактора MS Word. Отметим, что пустые теги (<span></span>, <p></p>), незначащие стили, все размеры шрифта и некоторое другое форматирование будет удалено автоматически. Это позволяет сократить размер страницы и увеличить скорость ее загрузки, при этом сохранив основное оформление текста.

    вставка текста из word

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

    Если отключить все опции, т.е. сохранить определения шрифтов, стилей и отступы, то в диалоговом окне можно увидеть HTML-код до изменения:

    форматирование при вставке текста из word

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

    результат вставки с помощью кнопки вставки из word


  3. Если вставлять "как текст", т.е. по кнопке paste from text Вставить как текст, то удаляется вообще какое-либо форматирование. Как видим, осталось только выделение абзацев:

    вставить как текст

    Код в этом случае будет таким:

    Осень 
    <br />
    Еще очень тепло, но наступление осени ощущается в каждом дуновении ветерка.
    Деревья сбрасывают обожженную за лето листву.
    Кажется, что стволы темнеют, они устали и хотят спать.
    Неугомонные мелкие паучки с невероятной скоростью плетут паутины,
    и ты, не видя, срываешь их ловушки&hellip;
    <br />

    То есть, при вставке текста по кнопке paste from text любое форматирование будет удалено, не зависимо от источника копирования.


Примечание: в любой момент (до сохранения изменений) вы можете отменить выполненные действия с помощью кнопки undo и заново повторить действие после отмены по кнопке redo. Аналогичный эффект имеют сочетания горячих клавиш ctrl+z и ctrl+y.
При внесении изменений в режиме редактирования html кода данные возможности могут оказаться заблокированы!


Проверка орфографии

Визуальный редактор предоставляет возможность проверки орфографии введенного текста с помощью редактора MS Word (проверка производится на компьютере пользователя);

Проверка орфографии производится автоматически.

Примечание: Некоторые браузеры обладают встроенной системой проверки орфографии, например Mozilla Firefox.

Добавление специальных символов

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

вставка спец символа

При единичном клике по нужному символу он появится на странице.

Работа с таблицами

При работе с визуальным редактором есть возможность создавать и редактировать таблицы с использованием специального интерфейса без непосредственного написания HTML-тегов.

Создание новой таблицы

Рассмотрим создание новой таблицы подробнее.

  • Выберите место на странице, где бы вы хотели видеть таблицу, установите в это место курсор и нажмите кнопку кнопка создания таблицыВставить таблицу панели редактирования. Появится диалоговое окно:

    диалог создания таблицы

  • Заполните следующие поля формы:
    • Количество Строк и Столбцов;
    • Ширина и Высота таблицы в пикселях или в процентах;
    • Толщина рамки;
    • Выравнивание таблицы;
    • Стиль (В списке перечислены все стили, определенные в системе);
    • Параметры Cellpadding и Cellspacing.
  • После указания всех желаемых параметров нажмите кнопку Сохранить.

Пустая таблица появится на странице. Теперь можете приступать к ее заполнению.

Редактирование существующей таблицы

Если толщина границы равна 0, то просмотреть структуру таблицы можно с помощью кнопки кнопка показа границ таблицПоказать границы таблиц.

Чтобы отредактировать структуру существующей таблицы, подведите указатель мыши к таблице и кликните правой кнопкой. Появится контекстное меню:

меню редактирования таблицы

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

Примечание: набор пунктов контекстного меню зависит от объекта, на котором расположен указатель мыши или который выделен, когда вызывается меню. Например, если вызвать контекстное меню на картинке, которая расположена в таблице, то меню будет содержать и пункты редактирования таблицы и пункт редактирования картинки. Оно примет вид:

меню редактирования таблицы с содержимым

Примечание: при выделении таблицы мышью, в области Свойства можно будет редактировать параметры таблицы: 
  • стиль написания текста,
  • выравнивание содержимого ячеек,
  • перенос по словам, цвет фона,
  • ширину и высоту текущей ячейки таблицы,
  • размеры таблицы.
Перемещение по таблице возможно с помощью выделенной цепочки. При нажатии на отдельные теги цепочки станут доступны свойства соответствующей строки или столбца.

область свойства для выделенной таблицы

Примечание: в браузере Mozilla Firefox есть дополнительная возможность вставлять столбцы и строки, а также удалять их. При редактировании страницы нажмите (для наглядности) кнопку , щелкните мышью по ячейке таблицы. Она выделится следующим образом:

возможности FireFox для редактирования таблиц

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

Работа с гиперссылками

Для создания и изменения гиперссылок также предусмотрены отдельные кнопки панели редактирования:

КнопкаДействие
создать закладкуПозволяет создать якорь (закладку) в нужном месте страницы, для создания ссылки именно на это место страницы
создать/редактировать ссылкуПозволяет создать/редактировать ссылку
удалить ссылкуУдаляет ссылку

Рассмотрим предназначение этих кнопок подробнее.

Создание ссылки

Для создания ссылки нажмите на кнопку создать/редактировать ссылку Ссылка, после чего откроется диалоговое окно создания ссылки на страницу или документ на сервере.

создать новую ссылку

В системе возможно создание четырех типов гиперссылок.

тип ссылки


Документ на сервере

После выбора данного типа ссылки вы можете указать адрес документа в поле "Документ" или выбрать интересующий файл из структуры сайта:

путь к документу на сервере

Другой сайт

ссылка на другой сайт

Параметры ссылки для внешних сайтов и внутренних документов

  • В выпадающем списке Открыть ссылку в укажите окно, в котором будет открываться ссылка.

    окно в котором открывать

    В коде каждый из пунктов этого списка задается с помощью атрибута target тега <a>. Атрибут target может принимать соответственно следующие значения:

    • _blank;
    • _parent;
    • _self;
    • _top.
  • Заполните, по желанию, поле Всплывающая подсказка, текст которого будет появляться при наведении курсора мыши на ссылку. В коде она вводится с помощью атрибута title тега <a>.
  • Укажите один из описанных в продукте Стиль CSS для написания слова или фразы, являющихся ссылками
  • Задайте, по желанию, атрибуты ID и Rel
  • noindex и nofollow

    Отметьте опцию Не учитывать ссылку поисковиками (nofollow, noindex), если хотите, чтобы ссылка не учитывалась поисковыми системами при индексировании страницы.

Закладка внутри данного документа

Для создания ссылки внутри документа сначала необходимо создать на странице закладку (или якорь).

  • Для этого установите курсор указателя мыши в необходимое место и нажмите на кнопку кнопка якорь Якорь панели инструментов. Появится диалог создания якоря.

    редактировать/создать якорь

  • Введите название якоря (закладки). Пусть это будет history.
  • Нажмите кнопку Сохранить, после чего на странице появится изображение якоря.

    якорь в тексте (в визуальном редакторе)

  • В коде якорь задается с помощью атрибута name тега <a>:

    <a name="history"></a>

Теперь создайте ссылку на этот якорь

    Для этого:
  • Выделите слово, которое будет служить ссылкой (например: "Сайт") и нажмите кнопку создать/редактировать ссылку Ссылка. Появится диалог создания ссылки как в случае Ссылка на документ на сервере.
  • В поле Тип выберите из списка вариант Ссылка внутри данного документа. Диалог примет вид:

    создать вкладку

  • В поле Закладка в выпадающем списке будут доступны все закладки (якоря), созданные на данной странице. Выберите необходимую закладку и укажите Текст ссылки
  • Заполните, по желанию, все остальные поля формы.
  • После того, как указаны все параметры, нажмите кнопку Сохранить.

Теперь в публичной части при нажатии на ссылку будет осуществлен переход к закладке на данной странице.


Электронный адрес

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

Для создания такой ссылки выполните следующее:

  • Напишите текст ссылки, выделите его и нажмите кнопку создать/редактировать ссылку Ссылка на панели редактирования. Появится диалог создания ссылки как в случае Ссылка на документ на сервере.
  • В поле Тип выберите из списка вариант Электронный адрес (EMail). Диалог примет вид:

    ссылка на EMail

  • Заполните поля формы и нажмите кнопку Сохранить

После сохранения ссылки и выхода из редактора по этой ссылке будет запущена почтовая программа с заполненным полем адресата.

В коде такая ссылка создается так:

<a href="mailto:a@coffeediz.ru" title="написать 
письмо">a@coffeediz.ru</a>
Примечание: после создания гиперссылки редактировать ее параметры можно в панели Свойства и в контекстном меню, если установить указатель мыши на ссылку.

Удалить ссылку можно, поставив курсор мыши на эту ссылку и нажав кнопку удалить ссылку Удалить ссылку панели редактирования, а также через контекстное меню.

Работа с графикой

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

Загрузка и размещение изображения

HTML-редактор позволяет загружать графику с локального диска и размещать ее на веб-странице. Процесс размещения изображения очень прост:

  • Выберите место для изображения на странице, установите курсор в эту позицию и нажмите кнопку кнопка вставки изображения Изображение на панели редактора. Появится диалог:

    диалог вставки рисунка

  • Выбор изображения из структуры сайта

  • Перейдите к форме загрузки изображения из структуры сайта с помощью кнопки кнопка выбора изображения из структуры сайта.


    Появится окно Менеджера файлов:

    менеджер выбора файла из структуры сайта

    Окно Менеджера файлов имеет дополнительный инструмент - Загрузить файл.
  • С помощью основного функционала менеджера мы вы можете открыть один из файлов, находящихся на сервере. С помощью дополнительной области Загрузите файл можно загрузить файл с локального компьютера.

  • Для загрузки файла с локального компьютера нажмите кнопку выбрать.

    загрузка файла с локального компьютера - шаг ВЫБОР


    В появившемся диалоге найдите файл на локальном компьютере (пример диалогового окна для Windows XP): пример диалогового окна загрузки файла - Windows XP
    Поле Имя файла на сервере заполнится автоматически (вы можете изменить его по собственному усмотрению).
    Для размещения файла в конкретной папке сервера воспользуйтесь структурой сайта в левом окне. Адрес папки, куда будет загружен файл всегда можно увидеть в поле Папка на серверевыбор папки на сервере для сохранения файла Загрузка файла осуществляется на сервер после этого нажатием кнопки Загрузить.

  • Выберете файл на сервере (загруженный заранее или на предыдущем шаге с помощью менеджера загрузки с локального компьютера) с помощью левой панели и нажмите кнопку Сохранить. Изображение появится в окне предпросмотра, а также будет указана его ширина и высота, которые задаются в коде с помощью атрибутов width и height тега <img> соответственно:

    загрузка изображения

  • Далее в форме Новый рисунок заполните следующие поля:

    • Название (title) – служит для ввода всплывающей подсказки к рисунку. Подсказка будет выведена при наведении курсора независимо от того, показан сам рисунок или нет.
    • Альтернативный текст – позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то альтернативный текст появляется раньше самого рисунка. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В HTML-тегах альтернативный текст задается с помощью атрибута alt тега <img>, т.е. HTML-код вставки изображения с альтернативным текстом "Обсуждение" будет таким:

      <img src="/medcin/images/Papiloma.jpg" height="222" alt="Обсуждение" width="200"/>
    • Горизонтальный отступ и Вертикальный отступ. Если задать эти параметры отличными от нуля, то изменение положения изображения сразу отображается в окне предпросмотра.

      отступы

      В коде эти параметры задаются с помощью атрибутов hspace и vspace тега <img>. HTML-код вставки изображения c горизонтальным отступом 30 пикселей и вертикальным отступом 5 пикселей имеет вид:

    • <img src="/medcin/images/Papiloma.jpg" title="" hspace="30" vspace="5" border="0" align="left" alt="Светофор" width="96" height="152"/>
      
    • Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице, ее толщину в пикселях задают в поле Толщина рамки. В HTML коде этот параметр задается с помощью атрибута border тега <img>.
    • Параметр выравнивание дает возможность указывать положение изображения относительно текста или других изображений на веб-странице. В форме вставки изображения в визуальном редакторе этот параметр может принимать следующие значения:

      выравнивание

      В коде этот параметр задается с помощью атрибута align тега <img>.

      Представим в виде таблицы подробное описание значений этого атрибута:

      ЗначениеОписание
      bottomНижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.
      leftИзображение располагается по левому краю родительского элемента.
      middleСередина изображения выравнивается по базовой линии текущей строки текста.
      rightИзображение выравнивается по правому краю родительского элемента.
      topВерхняя граница изображения выравнивается по самому высокому элементу текущей строки.


Загрузка и размещение flash ролика

Кроме загрузки и размещения изображений, HTML-редактор позволяет разместить на странице flash-ролики. Процесс загрузки и размещения ролика аналогичен процессу загрузки/размещения изображения:

  • Для размещения ролика служит кнопка flash_but Вставить Flash, при нажатии на которую открывается форма:

    разместить флеш ролик

    На закладке Основные параметры указывается путь к выбранному файлу, а внешний вид ролика представлен в окне предпросмотра. Кроме того, при помощи полей Ширина и Высота, вы можете указать ширину и высоту окна данного ролика.

  • Перейдите к форме загрузки ролика, нажав на кнопку файлоый менеджер. Появляется окно менеджера файлов:

    диалог выбора файла

  • С помощью данного окна выберите файл, находящийся на сервере, либо загрузите с локального компьютера, после чего информация о выбранном ролике будет отображена в форме Вставка Flash:

    разместить флеш ролик - отображённая информация

  • На закладке Дополнительные параметры задайте ряд дополнительных свойств ролика. Например: название ролика, качество показа, вид окна.

    дополнительные параметры вставки флеш ролика

  • На закладке HTML код можно самостоятельно ввести код вызова ролика.

    вставка html кода флеш ролика

Панель задач

При редактировании страниц сайта панель задач по умолчанию состоит из одной закладки - Компоненты.

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

Компоненты

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

Компоненты являются блоками, с помощью которых строится публичная часть сайта. Они позволяют многократно использовать единожды написанный и отлаженный код в рамках одного сайта или на разных сайтах. С помощью визуальных средств среды «Bitrix .NEt Forge CMS» можно размещать и настраивать компоненты без написания кода. Поставляемые с продуктом системные компоненты регулярно обновляются, при этом расширяется их функционал и исправляются возможные ошибки.

Для работы с компонентами служит панель Компоненты:

панель компонентов