ИНСТРУКЦИЯ

УТВЕЖДЕНА
постановлением Администрации
Петрозаводского городского округа
от __________ № ____________
ИНСТРУКЦИЯ
по размещению информации для Управляющих организаций, размещающих
информацию в соответствии со Стандартом на сайте "Управляющие
организации" (uprorg.petrozavodsk-mo.ru) в сети Интернет
Петрозаводск
2012
Содержание
1. Основные сведения о системе ................................................................................................ 2
1.1 Что такое Webylon? ........................................................................................................................ 2
1.2 Вход в систему ................................................................................................................................. 2
1.3 Основное окно ................................................................................................................................. 2
2. Базовые возможности............................................................................................................. 4
2.1 Управление структурой разделов сайта ..................................................................................... 4
2.2 Редактирование раздела ................................................................................................................ 6
2.3 Визуальный редактор .................................................................................................................... 7
2.3.1 Работа с таблицами ................................................................................................................................... 9
2.3.2 Работа с изображением ........................................................................................................................... 10
2.3.3 Вставка ссылок ........................................................................................................................................ 12
2.4 Вкладка «Поведение» ................................................................................................................... 14
2.5 Вкладка «Планирование» ........................................................................................................... 15
2.6 Вставка файлов ............................................................................................................................. 16
2.7 Примечание по вставке файлов ................................................................................................. 17
1. Основные сведения о системе
1.1 Что такое Webylon?
Webylon CMS – это полноценная система поддержки сайтов любого уровня сложности,
разработанная в интернет-дизайн студии MediaWeb. Данная программа позволяет в полном
объеме управлять контентом сайта и наполнять его информацией.
Webylon CMS позволяет своим пользователям реализовывать все необходимые
потребности по работе с сайтом. Управление структурой, визуальный редактор, возможность
добавления прикрепленных файлов и прайс-листов, организация галерей изображений – все это и
многое другое предлагает своим пользователям система Webylon CMS.
1.2 Вход в систему
В строке адреса браузера введите адрес системы управления сайтом, как правило оно
состоит из домена Вашего сайта и «/admin», например «http://yoursite.ru/admin»
Для того, чтобы начать работу с системой поддержки, необходимо пройти авторизацию.
На заглавной странице (рис. 1) введите свои логин и пароль, и после загрузки, вы можете
приступить к работе.
Адрес системы управления и логин/пароль выдается заказчику при сдачи проекта.
Рис. 1. Внешний вид входа в систему сопровождения сайта.
1.3 Основное окно
При первом входе в систему загрузка может занять 1-2 минуты. Это требуется для
ускорения дальнейшей деятельности: в этот момент на компьютер загружаются все необходимые
для работы элементы.
После загрузки системы перед вами появится основное окно (рис. 2). Далее приведено
описание каждого из блоков и элементов, обозначенных на рисунке.
Обратите внимание, что не все из представленных ниже блоков могут быть доступны в
Вашем интерфейсе. Их наличие зависит от того, какими правами доступа Вы обладаете.
Рис. 2. Основное окно Webylon CMS.
Номер
Название
Описание
1
Основные разделы
Данное поле содержит список основных разделов
системы управления, разделы специализированного
функционала.
2
Управление
сайта
Служит для управления структурой сайта, создание
разделов сайта. Не доступные для редактирования
разделы выделены серым цветом.
3
Структура сайта
Данный блок представляет собой список разделов сайта,
созданных на сайте, в древовидной форме. Для
редактирования раздела необходимо кликнуть на
соответствующий раздел.
4
Дополнительные
функции
Содержит вкладки «История страницы» и «Отчеты»,
служащая для планирования и отслеживания изменений
страниц
5
Служебные разделы
структурой

Вид страницы
состояния страницы

Профиль – профиль оператора системы, под
аккаунтом которого, в данный момент находится
пользователь в системе.

–
отображение
Выйти – выход из системы
статус
2. Базовые возможности
2.1 Управление структурой разделов сайта
Поле для управления структурой разделов сайта находится слева от основного поля.
Внешний вид вы можете посмотреть на рис. 3
Рис. 3. Управление структурой разделов сайта
Для того чтобы создать новый раздел сайта, необходимо выбрать тот раздел, в котором вы
хотите создать новый. Для этого необходимо кликнуть на имени раздела в структуре разделов
сайта. Выбранный раздел будет выделен серым цветом (см. рис. 3).
Если необходимо создать раздел 1-го уровня, т.е. раздел, который будет выводится сразу
в левой колонке сайта, (там где «О Министерстве финансов РК», «Бюджет Республики Карелии» и
т.д.) необходимо выбрать «Содержимое сайта».
После того как вы выбрали раздел, в котором хотите создать новый раздел, нужно кликнуть
на кнопку «Создать». Перед Вами появится выбор типа страницы. По умолчанию тип страницы
устанавливается, того типа, который определен для данной структуры сайта. На рис. 3 тип «Страницы (Page)». В большинстве случаев, данный тип вам и необходим, поэтому менять тип
страницы на отличный от «По умолчанию» не рекомендуется.
Затем кликнете на «Перейти». После чего создается пустая страница, и будет находиться
в структуре сайта в выбранном разделе последним в списке (рис. 4 - на данном рисунке показан
уже созданный и наполненный раздел, при создании нового раздела данная страница будет
пустой).
Рис. 4. Вид раздела сайта для редактирования
Номер
Название
Описание
1
Вкладки
раздела
(содержимое, поведение,
планирование,
отчеты,
доступ).
На
вкладке
Содержимое
доступны
вкладки Основное, Метаданные,
Фотографии,
Файлы, Настройки.
Вкладки выбранного раздела – предназначены для
работы с содержимым данного раздела сайта.
2
Название
Название раздела сайта:
3
Визуальный редактор

Название страницы – название, выводимое
исключительно
в
системе
сайта,
и
не
отображающееся на сайте.

Метка в навигации – выводится на сайте.
Основной инструмент наполнения сайта информацией.
Его функции и внешний вид схож с MS Word
4
Сохранения/удаления
раздела
Сохранить – сохраняет изменения в системе
управления; доступен для просмотра в черновом сайте,
но на самом сайте не отображается.
Сохранить и опубликовать – сохраняются изменения и
публикуются на сайте.
Удалить с тестового сайта – удаление раздела с
чернового сайта, на сайте информация остается.
Отмена публикации – информация удаляется с сайта, но
остается в системе и на черновом сайте.
2.2 Редактирование раздела
После того как вы создадите новый раздел или кликнете по существующему, основное
поле системы примет вид показанный на рис. 4. Теперь вы можете либо наполнить раздел
информацией,
либо
отредактировать
уже
размещенную
информацию.
1.
Пишем/редактируем название раздела сайта в поле «Название страницы», после
того как вы кликните в любое место мышкой, система спросит у вас «Изменить URL на ….». Под
этим подразумевается имя HTML страницы, т.е. то название которое будет стаять в конце адреса
данной страницы в строке браузера. Данное имя может содержать только латиницу, цифры,
подчеркивания и дефисы. Поэтому система автоматически переводит, то что вы ввели в поле
«Название страницы» в латиницу, поэтому рекомендуется всегда соглашаться с предложенным
вариантом. Если по каким-то причинам вы отказались, то написать свое название HTML страницы
можно буде во вкладке «Мета-данные».
2.
В поле «Метка навигации» пишем название раздела сайта. Для удобства можно
дублировать содержимое поля «Название страницы» и «Метка в навигации»\
3.
Далее наполняем раздел информацией по средствам визуального редактора.
Описание Визуального редактора см. ниже.
4.
После того как, вы закончили наполнение сайта необходимо для сохранения
данных нажать «Сохранить» (рис 4), после чего все внесенные данные сохранятся. Но на самом
сайте они не будут опубликованы. Вы сможете посмотреть как будет выглядеть на сайте ваша
информация, кликнув по ссылке «Черновой сайт» (слева внизу, рис. 4). После того как вы
убедились в том, что вся информация размещена правильно, необходимо кликнуть «Сохранить и
опубликовать», после этого Ваша информация появится на самом сайте.
5.
Вставка файлов и изображений описана далее в этом руководстве.
Примечание: Если вы уверены в том, то вся информация внесена верно, и хотите сразу
опубликовать ее на сайте, то можно сразу нажать «Сохранить и опубликовать».
6. Чтобы отменить публикацию информации на сайте кликните «Отмена публикации»
7. Для удаления раздела с сайта сначала кликните «Удалить с тестового сайта», после
чего раздел исчезнет на черновом сайте, а после этого кликнуть «Удалить с опубликованного
сайта», после чего раздел исчезнет и на самом сайте. Так же можно восстановить раздел, если он
удален
только
с
чернового
сайта,
кликнув
на
«Восстановить».
2.3 Визуальный редактор
Визуальный редактор является основным инструментом наполнения сайта информацией. Вид
визуального редактора представлен на рис. 5. Внешний вид и большинство функций схожи с
программой MS Word.
Визуальный редактор позволяет как набирать тексты в ручную, так и копировать уже
набранные тексты из Word.
Для того чтобы приступить к работе с визуальным редактором, необходимо поместить курсор
в рабочую область редактора.
Рис. 5 Визуальный редактор
Иконка
Название
Горячие
клавиши
Описание
Жирный
[Ctrl] + [B]
Выделяют фрагмент текста
жирным, курсивом, делают
подчеркнутым
[Ctrl] + [I]
Курсив
[Ctrl] + [U]
Подчеркивание
Зачеркивание
Предает тексту
зачеркнутый вид
Выравнивание
текста
по левому краю, центру,
правому, по ширине
Служат для
форматирования текста по
ширине
Применить стиль
Придает фрагменту текста
стиль, прописанный в
системе
Применить формат
Придает фрагменту текста
определенный формат,
прописанный в системе
Списки
Создание нумерованных и
не нумерованных списков
Отступы
Увеличение/уменьшение
отступов выделенного
абзаца
Блок цитаты
Выделение фрагмента
текста как Цитаты
Горизонтальная линия
Вставка горизонтальной
линии на всю ширину
экрана
Спец. символы
Вставка специальных
символов
Отменить Повторить
[Ctrl] + [Z]
[Ctrl] + [Y]
Вырезать
[Ctrl] + [X]
[Ctrl] + [C]
Копировать
Отмена последнего
действия, переход к
следующему действию
Вырезает, копирует,
вставляет выделенный
фрагмент текста
[Ctrl] + [V]
Вставить
Вставка текста
Вставка текста из блокнота
Вставка из Word
Вставка из Word
Вставить изображение
Вставка изображения в
текст
Вставить Flash
Вставка flash ролика
Вставить ссылку
Вставка ссылки на другую
страницу сайта, другой
сайт, файл для скачивания,
якорь
Удалить ссылку
Удаление ссылки с текста
Вставка/редактирование
якоря
Вставка якоря на страницу.
Примечание: якорь – метка
на странице,
предназначенная для
возможности размещения
ссылок на конкретное место
страницы сайта, где
размещен якорь.
Редактирование HTML кода
страницы
HTML-код
Выделить все
[Ctrl] + [A]
Выделение всего
содержимого в визуальном
редакторе
Включить/выключить
направляющие
невидимые элементы
Отображение невидимых
элементов, таких как
границы таблиц, если рамка
у таблицы отсутствует
Вставка/редактирование
таблицы
Вставка таблицы и
редактирование таблицы
Редактировать строку
Предназначен для
редактирования свойств
строки и ячейки
Редактировать ячейку
Вставка строки перед
Вставка строки после
Предназначен для
добавления и удаление
строк в таблице
Удаление строки
Вставить столбец перед
Вставить столбец после
Предназначен для
добавления и удаление
столбцов в таблице
Удалить столбец
Склеить ячейки
Разделить ячейки
Предназначен для
склеивания и разделения
склеенных ячеек
2.3.1 Работа с таблицами
Для того чтобы вставить таблицу необходимо либо скопировать ее из Word либо кликнув на
иконку
в панели инструментов визуального редактора. Изначально таблица появится в визуальном
редакторе в произвольном виде, не соответствующим общему стилю сайта. Для того чтобы привести таблицу к
стилю сайта необходимо поставить курсор в любое место таблицы и кликнуть на иконку
. Перед Вами
откроется окно редактирования таблицы (рис. 6)
Рис. 6. Редактирование таблицы.
В данном окне можно задать кол-во ячеек, строк, фиксированную ширину, толщину рамки
(граница), выравнивание и т.д. Во вкладке «Дополнительно» можно задать цвет фона, цвет рамки, и
т.д. Для того чтобы придать таблице стиль сайта, необходимо в поле «Класс» выбрать «tab-style» и
нажать «Вставить».
После чего таблица примет фон, цвет рамок и отступы, предусмотренные дизайном сайта. Для того
чтобы выделить заголовок таблицы, разместите курсор в строку, которая будет являться заголовком
и кликните на иконку «Редактировать строку». В появившемся окошке в поле «Строка в части
таблицы» выберете «Верхняя часть таблицы» и нажмите «Вставить».
После чего таблица примет вид в соответствии с дизайном сайта (рис. 7).
Рис. 7 Таблица
2.3.2 Работа с изображением
Для того чтобы разместить загруженное изображение в визуальном редакторе необходимо:
1. Поставить курсор в место, куда вы хотите разместить изображение в рабочем поле визуального
редактора.
2. Кликнуть на иконку
(Вставка изображение), на панели инструментов визуального редактора, после чего
справа откроется поле вставки изображения (рис. 8).
Рис. 8. Вставка изображения
3. В поле «папка» выбрать папку, в которой находится ваше изображение или в поле «Искать по
имени файла» вписать имя файла. Примечание: создание папок и загрузка изображений происходит
автоматически по именам разделов в которые они загружаются.
4. Содержимое выбранной папки или результатов поиска появится под строкой поиска.
5. Найдите изображение, которое хотите разместить или загрузите новое. После этого кликнете по
нему.
6. В нижней части поля появится размеры загружаемого изображения, при желании данные размеры
можно изменить.
Примечание. Желательно изменять размеры изображений и проводить другие работы с
изображениями в любом отдельном графическом редакторе (Photoshop, Microsoft Photo
Editor и др.)
7. В поле выравнивание/стиль, выбираете вид обтекания текстом изображения.
8. Кликните на кнопку «Вставить изображ.».
Редактирование изображения
1. Выделите изображение в визуальном редакторе.
2. Кликните на иконку
(Вставка изображение), на панели инструментов визуального редактора. В
появившимся справа окне, внесите изменения и кликните «Вставить изображен.».
2.3.3 Вставка ссылок
Для того чтобы разместит ссылку на другой сайт, страницу вашего сайта или на файл для скачивания
необходимо:
1. Выделить фрагмент текста, который будет являться ссылкой.
2. Кликните на иконку
(вставить ссылку) на панели инструментов визуального редактора,
после чего откроется окно справа от визуального редактора (рис. 9).
Рис. 9. Вставка ссылок
3. Для того чтобы размесить ссылку на страницу вашего сайт необходимо:

Выбрать в блоке «Ссылка на» - «Страницу данного сайта» (рис. 9).

В выпадающем списке «Страница» выберите страницу, на которую будет вести ссылка.

Для того чтобы данная ссылка открылась в новом окне, поставте галочку «открыть ссылку в
новом окне?».

Кликните на «Вставить ссылку».
4. Для того чтобы размесить ссылку на другой сайт (рис. 10) необходимо:

Выбрать в блоке «Ссылка на» - «Другой сайт»

В поле «URL» впишите адрес сайта, на который будет вести ссылка.

Для того чтобы данная ссылка открылась в новом окне, поставте галочку «открыть ссылку в
новом окне?».

Кликните на «Вставить ссылку».
Рис. 10. ссылка на другой сайт
5. Вставка ссылки на скачивание файла описана в разделе 2.6.
2.4 Вкладка «Поведение»
Данная вкладка предназначена для назначения свойств раздела сайта (рис.
12).
Рис. 12. Вкладка «Поведение»
Название
Описание
Тип страниц
Определяет тип страницы в структуре сайта. Назначается
автоматически в зависимости от типа раздела, в котором
страница создается.
Page location

Раздел – страница имеет вложенные страницы

Страница – страница не имеет вложенности
Вложенность в раздел
Служит для определения того, в каком разделе будет
находится данная страница, дублирует функцию
перетаскивания мышкой
Показывать в меню?
Если галочка не установлена, то данная страница не
будет выводиться в структуре сайта, но на нее можно
поставить ссылку
Показывать в поиске
Если галочка не установлена, то данная страница будет
не доступна для поиска и не будет выводиться по
поисковым запросам
Автоматически скрывать
поддокумент если нет
своего содержимого
Если галочка установлена, то в случае если у данной
страницы (раздела) нет наполнения, то при клике на эту
страницу (раздел) на сайте, будет открываться первая
вложенная страница (подраздел) данного раздела.
2.5 Вкладка «Планирование»
Вы можете использовать эту вкладку для отслеживания запланированных изменений в содержимом
вашего сайта. Чтобы просмотреть все запланированные изменения на ваших страницах, откройте
слева окно «Отчеты сайта» и выберите «Запланировано» (рис. 13).
Рис. 13. Вкладка «Планирование»
2.6 Вставка файлов
Рис. 14. Вкладка Файлы
Загрузка файла на сервер:
1. перейти на вкладку Файлы редактора документа
2. Нажать кнопку «Добавить файлы»
3. В диалоговом окне выбрать файл или несколько на компьютере
4. Нажать кнопку Upload
5. Внизу страницы нажать «Сохранить и опубликовать»
Данные файлы будут привязаны к выбранному разделу, но могут использоваться и в других.
Вставка файла в визуальном редакторе описана в разделе о вставке ссылок. Для вставки файла в
визуальном редакторе необходимо:
1. Выделить текст, с которого будет создана ссылка на файл
2. Нажать кнопку «Вставить ссылку»
3. В диалоговом окне справа выбрать пункт «Скачивание файлов»
4. В списке «Страница» выбрать необходимый файл. По умолчанию откроется папка файловой
библиотеки соответствующая разделу. Если этого не произошло — см. раздел 2.7.
2.7 Примечание по вставке файлов
В случае, когда при вставке файлов, связанная с документом папка не открылась (как правило при
первом входе в систему) — отображается страница с корневой структурой файловой библиотеки.
Необходимо провести одно из следующих действий:

Обновить страницу нажатием соответствующей кнопки браузера или кнопки F5.

Нажать на ссылку «Содержимое сайта».
При любом варианте необходимо сохранить данные страницы до одного из этих действий.
Рис. 15. Структура файловой библиотеки