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

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

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

Для редактирования содержания страницы сайта (файла *.HTML):

Откройте раздел "страницы", щёлкните по значку , в выпадающем меню выберите пункт "редактировать".

Открытие окна редактирования файла

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

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

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

Окно редактора состоит из следующих областей:

  • Панель инструментов (аналогична панели инструментов программы Word). Здесь находятся инструменты визуального редактирования содержания.

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

  • Кнопки. Кнопка "Сохранить" — сохраняет внесенные изменения, производит выход на список файлов; кнопка "Применить" тоже сохраняет внесенные изменения, но без выхода на список файлов. Кнопка "Отменить" отменяет внесенные изменения.

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

Клавиша Enter в визуальном редакторе начинает новый абзац (соответствует тэгу <p></p>). Сочетание клавиш Shift+Enter (соответствует тэгу <br>) используется для перехода на новую строку в текущем абзаце.

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

Источник — включает режим отображения содержания в рабочей области в виде HTML-кода.

Сохранить — сохраняет изменения в файле.

Буфер обмена

Вырезать — вырезает выделенный фрагмент, помещая его в буфер обмена. Вместо этого инструмента можно использовать сочетание клавиш Ctrl+X.

Копировать — копирует выделенный фрагмент, помещая его в буфер обмена. Сочетание клавиш Ctrl+C.

Вставить — вставляет фрагмент из буфера обмена. Можно также использовать сочетание клавиш Ctrl+V для вставки.

Инструмент "Вставить" вставляет текст с сохранением форматирования. При использовании этого инструмента для вставки текста, скопированного из программы Word, в HTML-коде страницы оказывается большое количество лишних тэгов и формируется не правильная логическая структура документа.

Вставить только текст — вставляет фрагмент текста без форматирования из буфера обмена.

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

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

Если вы хотите вставить отформатированный текст из программы Word, то используйте для этого специальный инструмент "Вставить из Word". Он удалит из HTML-кода избыточную информацию (а её там будет больше половины).

Окно инструмента "Вставить из Word"

При копировании и вставке текста из программы Word используйте инструмент "Вставить только текст" либо "Вставить из Word".

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

Вес страницы, после копирования и вставки одного и того же текста из программы Word.
Инструмент Общий размер страницы

Вес контента (вес стр. — вес шаблона(1КБ))

Вставить 51КБ 50КБ
Вставить только текст 2КБ 1КБ
Вставить только текст + форматирование в визуальном редакторе 3КБ 2КБ
Вставить из Word 12КБ 11КБ

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

Что плохого в увеличении веса страницы?

  • Более тяжелая страница будет дольше загружаться в браузере.

  • Избыточные тэги портят логическую структуру текста.

  • Ухудшают отношение поисковых систем к данной странице.

Отменить — отменяет последнее действие.

Повторить — повторяет последнее отмененное действие.

Найти — осуществляет поиск слов или словосочетаний в тексте.

Заменить — осуществляет поиск с заменой.

Выделить все — выделяет весь текст в рабочей области.

Убрать форматирование — убирает форматирование с выделенного фрагмента текста.

Показать блоки — выделяет блочные элементы на странице.

Инструменты форматирования

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

Инструменты, изменяющие начертание текста:

Жирный — делает текст жирным либо убирает жирность с выделенного фрагмента жирного текста.

Курсив — выделяет текст курсивом или снимает курсив с выделенного фрагмента курсивного текста.

Зачеркнутый — инструмент, зачеркивающий текст или снимающий зачеркивание.

Есть два варианта работы с перечисленными выше инструментами форматирования:

  • Выделить уже введенный участок текста и нажать на соответствующую кнопку.

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

Создание списков

Вставить/удалить нумерованный список — преобразует выбранный абзац (выделенный абзац либо абзац в котором находится курсор) в элемент нумерованного списка.

Вставить/удалить маркированный список — преобразует выбранный абзац в элемент маркированного списка.

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

Уменьшить отступ — уменьшает отступ слева от абзаца.

Увеличить отступ — увеличивает отступ слева от абзаца.

Цитата — выделяет выбранный абзац в цитату.

Инструменты выравнивания текста

По левому краю — выравнивает выделенный абзац(абзацы) по левому краю.

По центру — выравнивает выделенный абзац(абзацы) по центру.

По правому краю — выравнивает выделенный абзац(абзацы) по правому краю.

По ширине — выравнивает выделенный абзац(абзацы) по ширине страницы.

Управление гиперссылками

Вставить/редактировать ссылку — преобразует выделенный текст в гиперссылку.

После того как вы щёлкнете по данной кнопке, появится окошко редактирования ссылки (см. рисунок).

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

В окне редактирования ссылки вы увидите 2 вкладки:

  • Информация ссылки — основные параметры ссылки.

  • Цель — в этой вкладке указывается место открытия ссылки.

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

  • Ссылка — это ссылки на любые страницы и сайты.

  • Ссылка на якорь в тексте — ссылки внутри текущей страницы (например, возвращение в начало страницы)

  • Email — ссылка на адрес электронной почты, открывающая почтовый клиент.

Во вкладке информация:

  • "Тип ссылки". Из выпадающего списка выберите одно из следующих значений:

    Тип ссылки

  • Ссылка. Выберите этот пункт, если вы хотите создать внутреннюю ссылку, внешнюю ссылку или ссылку на файл.

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

  • Email. Оформляйте адреса электронной почты этой ссылкой.

    Создание ссылки на электронную почту.

    Если вы выберете пункт Email из выпадающего списка "Тип ссылки", то увидите форму, показанную на рисунке выше. В поле "Email адрес" укажите email (это поле обязательно для заполнения). Можете также написать тему и текст сообщения.

Вкладка Цель

Определяет, где будет открыта ссылка. Для того чтобы сделать открытие ссылки в новом окне, нужно выбрать в выпадающем списке пункт "Новое окно". По умолчанию ссылка открывается в том же окне.

Убрать ссылку — убирает гиперссылку. Поставьте курсор на текст гиперссылки и щёлкните по кнопке данного инструмента.

Вставить/редактировать якорь — создает якорь на странице. Необходим для создания ссылки внутри одной страницы. Установите курсор в нужное место, затем щёлкните по кнопке якорь, в окне "Свойства якоря" введите имя нового якоря и нажмите "ОК".

Свойства якоря

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

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

Свойства изображения

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

Чтобы вставить собственное изображение на страницу, файл изображения должен быть предварительно загружен на сайт (сделать это можно при помощи инструмента "Загрузить" в разделе "Изображения").

Поле "Граница" определяет толщину рамки вокруг изображения

Поле "Гориз. отступ" задает отступ слева и справа от изображения, а поле "Вертик. отступ" задает отступ сверху и снизу от изображения. Если не установить эти отступы, то текст вплотную приблизится к картинке, а это выглядит не очень красиво.

Отступы и выравнивание изображений

Значение поля "Выравнивание" определяет положение изображения на странице.

  • "По левому краю" — задает выравнивание картинки по левому краю документа, при этом текст обтекает изображение.

  • "По правому краю" — задает выравнивание картинки по правому краю документа, при этом текст обтекает изображение.

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

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

Изображение — ссылка

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

Таблица — инструмент для создания таблицы. Открывает диалог "Свойства таблицы", в котором осуществляется настройка создаваемой таблицы.

Свойства таблицы

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

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

В поле "Выравнивание" задается выравнивание текста внутри ячеек таблицы.

Выравнивание текста внутри ячеек таблицы
  • Слева

  • По центру

  • Справа

В поле "Заголовок" можно задать заголовок таблицы, а в поле "Итоги" записать описание таблицы.

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

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

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

вы можете добавлять, удалять столбцы, строки и ячейки таблицы.

  • Удаление столбцов, строк и ячеек таблицы

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

  • Добавление столбцов, строк и ячеек таблицы

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

  • Объединение и разбиение ячеек

    Так же можно объединять и разбивать ячейки таблицы.

  • Свойства ячейки

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

Контекстное меню, свойства ячейки

В диалоге "Свойства ячейки" можно изменять следующие свойства:

Свойства ячейки
  • "Ширина" — в данное поле записывается ширина ячейки в процентах или в пикселях. По умолчанию ширина зависит от содержимого.

  • "Высота" — высота ячейки в пикселях. По умолчанию высота ячейки формируется по высоте содержимого.

  • "Перенос по словам" — данная опция определяет, будет ли текст переноситься по словам. По умолчанию установлен вариант "да", при котором текст переносится по словам.

  • "Гор. выравнивание" — выравнивание текста по горизонтали внутри ячейки, по умолчанию текст выравнивается по левому краю.

  • "Верт. выравнивание" — определяет выравнивание текста по вертикали внутри ячейки.

  • "Объединение строк" — инструмент, действующий аналогично инструменту объединения ячеек. Объединяет ячейки по вертикали.

  • "Объединение колонок" — объединяет ячейки по горизонтали.

  • "Цвет фона" — задает цвет фона ячейки. По умолчанию фон прозрачный.

  • "Цвет границ" — изменяет цвет границы ячейки. По умолчанию цвет границы черный.

Вставить горизонтальную линию — вставляет горизонтальную линию. Поставьте курсор в то место, где вы хотите вставить линию, и щёлкните инструмент "Горизонтальная линия".

Форматирование — готовые стили для форматирования текста. Форматирование применяется к целому абзацу.

Шрифт — выбор шрифта. Изменяет шрифт выделенного фрагмента текста.

Размер — выбор размера шрифта. Изменяет размер шрифта выделенного фрагмента текста.

Цвет текста — меняет цвет выделенного текста.

Цвет фона — изменяет цвет фона выделенного текста.

Сохранение страницы

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

  • Кнопка "Сохранить" сохраняет изменения в документе и производит выход в раздел "Страницы".

  • Кнопка "Применить" сохраняет изменения без выхода из модуля редактирования.

Исходный код страницы

В CMS.edu существует 2 способа редактирования содержания страниц сайта. Первый — редактирование с использованием "Визуального редактора", который был рассмотрен в предыдущем разделе. И второй — редактирование в виде "Исходного кода". Если вы знакомы с языком гипертекстовой разметки HTML, то вы можете редактировать страницы сайта в виде исходного кода.

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

Компоненты

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

Компонент фотогалереи "Лента с центральной фотографией"

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

Фотогалерея "Лента с центральной фотографией" показана на рисунке. Чтобы добавить галерею на сайт, установите курсор в то место, куда вы хотите вставить галерею, кликните по кнопке, откроется диалог создания фотогалереи.

Диалог добавления фотогалереи

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

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

Для изменения свойств галереи выделите её значок и щёлкните по кнопке "Свойства компонента" на панели инструментов визуального редактора.

Лента с центральной фотографией

Компонент фотогалереи "Список с предпросмотром"

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

В диалоге добавления галереи "Список с предпросмотром" устанавливаются следующие настройки:

Диалог добавления фотогалереи "Список с предпросмотром"
  • "Фотогалерея" — из выпадающего списка выбирается название галереи.

  • В полях "Количество столбцов", "Количество строк" указывается, из скольких столбцов и строк будет состоять таблица фотографий.

  • Из списка "Наличие текста описания и его оформление" выбирается, будут ли добавлены подписи к фотографиям и где они будут расположены. Возможные варианты: нет, слева, справа, внизу.

  • "Тип открытия" — определяет, как будет раскрываться фотография.

  • "Без открытия" — фотографии не открываются.

  • "Новое окно" — фотографии открываются в новом окне браузера.

  • "LightBox" — анимированное открытие фотографий во всплывающей области, в том же окне браузера. Галерея с таким вариантом открытия показана на рисунке.

<em>Список с предпросмотром</em>, тип открытия LightBox

Компонент "Список фотогалерей"

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

В диалоге добавления списка устанавливаются следующие настройки:

Диалог добавления "Списка фотогалерей"

  • "Фотогалерея" — в этом поле выбираются галереи, которые надо добавить в список.

  • Опция "Отображение первой фотографии" включает отображение первой фотографии галереи в списке.

  • "Вид отображения" — определяет отображение галереи после того, как вы перейдете по ссылке в списке.

  • "Шаблон отображения" — здесь можно добавить свой шаблон отображения выбранной фотогалереи.

Компонент "Лента новостей"

Компонент "Лента новостей" расположен на панели инструментов визуального редактора. Так же как и фотогалерею, ленту новостей необходимо предварительно создать в разделе "Ленты новостей".

Свойства ленты новостей
  • "Лента новостей" — в этом поле нужно выбрать ленту новостей.

  • "Отображение новостей" — возможны два варианта показа новостей:

  • Все новости — выводятся все новости, с сортировкой по дате.

  • По дате — новости выводятся в соответствии со сроком публикации, т.е. новости, срок публикации которых прошел, не отображаются.

  • "Новостей на странице" — в этом поле надо указать, сколько будет выводиться новостей на одной странице.

  • "Минимум новостей" — укажите минимальное число новостей. Минимальное количество новостей будет выведено, даже если их срок публикации уже прошел.

  • "Максимум новостей" — укажите максимальное число новостей.