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

Главная   →   Справка   →   Добавление и редактирование

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

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

  1. Пример форматирования текста
  2. Привет размещения заголовка
  3. Пример добавления якоря на странице
  4. Пример создания ссылки на странице
  5. Пример добавления изображения на страницу
  6. Пример создания таблицы на странице
  7. Пример добавления/редактирования html на странице

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

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

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

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

    Нажмите в месте страницы, где будет размещатся якорь и нажмите кнопку «Добавить/Изменить якорь». Укажите идентификатор якоря используя буквы английского алфавита и цифры.

    В тексте появится иконка якоря.

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

  4. Для того, чтобы сделать ссылку на другую страницу или на якорь, необходимо выделить текст и нажать кнопку «Добавить/Изменить ссылку», которая становится активна после выделения текста.

    Откроется диалоговое окно, в поле «Адрес» необходимо вписать url страницы, на которую будет переходит ьпользователь при нажатии на неё. В данном примере это «google.com».

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

  5. Для того, чтобы добавить изображение на страницу, вам необходимо поставить курсор в том месте где будет находится изображение. (Это делать необязательно, после добавления изображения, его можно будет легко переместить). Далее нажмите кнопку «Добавить/Изменить изображение».

    Откроется диалоговое окно, в поле «Адрес» необходимо вписать url изображения или выбрать из выпадающего списка(список изображений закачанных ранее).

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

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

  7. Чтобы добавить табличные данные в текст, нужно нажать кнопку «Добавление/Изменение таблицы».

    Откроется диалоговое окно с параметрами создания таблицы. При создании таблицы вы можете указать количество столбцов и строк. Ширину таблицы можно задавать в процентах и в пикселях, в данном случае выбрано 100%. После того как вы выбрали все нужные параметры, нажмите кнопку «Вставить».

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

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

     

Использование режима HTML

  1. HTML - язык гипертекстовой разметки. С его помощью вы можете более тонко настраивать отображения данных веб-странице, добавлять скрипты, т.е. использовать все возможности HTML. Подробную информацию по html можно получить на сайте htmlbook.ru
    Чтобы открыть редактор html достаточно нажать кнопку «Редактировать HTML код».

    Откроется диалоговое окно. Чтобы продемонстрировать принцип работы, зададим тексту «извержение прерывисто» жирный шрифт, для этого есть специальный html-тег,<b></b>. Поместим текст внутрь тега <b></b>.

    После этого нажием кнопку «Обновить» и получим результат.

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


Теперь, вы знаете, что делать


— или посмотреть пример магазина

Создание интернет-магазина