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

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

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

Для редактирования содержания страницы сайта (файла *.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, то вы можете редактировать страницы сайта в виде исходного кода.

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

Компоненты

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

Список ссылок страницы

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

Вкладка "Ссылки"

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

Список ссылок

Список содержит следующую информацию:

  • "Имя ссылки" - название ссылки на странице.

  • "Ссылка" - адрес файла, на который ведет ссылка.

  • "Корректность ссылки" определяет, существует ли файл, на который ведёт ссылка.

    • ✓ - файл существует на сайте.
    • × - файл переименован или удален.
    • - - внешняя ссылка или ссылка на текст страницы.
  • "Тип ссылки" - ссылка может быть нескольких типов:

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

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

Выпадающий список

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

Диалог

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

Подсказки

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