Робота з HTML -редактором WYSIWYG

Практично всі тексти для Web створюються за допомогою мови HTML. Мова розмітки HTML має свій синтаксис, який необхідно знати, якщо ви хочете оформити свій текст, зробити його більш зручним для читання іншими людьми. Але основні операції по форматуванню можна робити без знання HTML! У цьому вам допоможе WYSIWYG редактор, який дає досить широкі можливості щодо форматування тексту, вставку малюнків, посилань, роботі з таблицями. Ви відразу ж можете візуально оцінити, яким буде результат. 

WYSIWYG (вимовляється [wɪziwɪɡ] , абревіатура від англ. What You See Is What You Get, «що бачиш, те й отримаєш») - ця загальна назва редакторів, які вже в процесі форматування тексту дозволяють бачити, як виглядатиме форматований текст.

Веб-платформа дистанційного навчання Moodle має власний вбудований Richtext HTML-редактор WYSIWYG, який використовується для редагування усіх полів, котрі можуть містити форматований текст і графіку. Над такими полями (наприклад, над полем редагування тексту) відображаються кнопки і інші інструменти редактора :

Панелі редактора

Але якщо Ви форматуєте таблиці або працюєте з великим за об'ємом тексту, набагато зручніше використовуватиме повнофункціональний режим редактора. Він включається кнопкою Повернутись в звичайний режим - «Редактор на весь екран».
Частіше за все вид такого редактора достатньо для комфортної роботи.

У цьому режимі редактор розгортається на увесь екран браузеру і в ньому з'являються додаткові кнопки форматування таблиць і кнопка - Повернутись в звичайний режим«Повернутися в звичайний режим»:

Якщо редактор не відображається, то Вам потрібно в особистих налаштуваннях для параметра «Під час редагування тексту» вибрати значення «Використовувати Richtext HTML - редактор» (як це зробити, описано в темі Профіль користувача - особиста картка).

Якщо параметр має потрібне значення, а редактор не відображається, то спробуйте використовувати інший браузер.

Браузером Opera до 10 версії робота Richtext HTML-редактора не підтримується!

Якщо підвести курсор до кнопки редактора, то відображається текст- підказка, який пояснює призначення цієї кнопки.

Набір кнопок редактора дуже схожий на той, що використовується в MS Word.

Співпадають і комбінації клавіш для виконання основних операцій : Ctrl+C - скопіювати виділене у буфер обміну, Ctrl+X - перенести виділене у буфер обміну (вирізати), Ctrl+V -вставити з буфера обміну, Ctrl+Z - відмінити попередню операцію і тому подібне

Деякі сучасні версії браузерів, наприклад Mozilla Firefox, дозволяють здійснювати перевірку орфографії своїми засобами за допомогою вбудованих словників.
На нашому сайті редактор за умовчанням використовує такі параметри: шрифт - Arial, розмір шрифту - 3 (12р1), стиль шрифту - Абзац.

Деякі можливості говорять самі за себе, деякі необхідно розглянути детальніше.
Стиль абзацу: в рамках даного редактора стилі переважно використовуються для оформлення заголовків різного рівня.

Для створення заголовків зручно користуватися списком стилів:

Список стилів

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

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Абзац

Адреса
Попередньо форматований

Оформлення тексту: за допомогою цих кнопок ви можете виділяти текст напівжирним (гарячі клавіші Ctrl + B), курсивом (гарячі клавіші Ctrl + I), підкреслювати (гарячі клавіші Ctrl + U) або закреслювати (гарячі клавіші Ctrl + S).

Вставити/змінити посилання: для вставки посилання вам необхідно спочатку виділити текст, який потім буде посиланням, і заповнити поля у вікні.

Знайти/замінити: при пошуку і заміні ви можете користуватися регулярними виразами.
Редагувати html-код: можливості WYSIWYG редакторів не безмежні, іноді треба більш тонко керувати вашими текстами. Це вже можна зробити тільки знаючи мову розмітки HTML. Для будь-яких текстів, що створюються за допомогою WYSIWYG редактора, ви можете подивитися його вихідний html-код і внести зміни. При натисканні на цю кнопку
Редагувати HTML код відкриється вікно для редагування вихідного коду, для повернення в звичайний режим вам необхідно оновити зміни за допомогою кнопки "Оновити".

Трапляються в роботі редактора і помилки, які неважко виправити, маючи мінімальні уявлення про структуру тегів HTML. Наприклад, фрагмент, виділений курсивом, починається тегом <i> і завершується тегом </i>. Якщо сталося, що натисненням кнопки Курсив Ви ніяк не можете позбутися курсиву у Вашому тексті, то включіть відображення тегів, знайдіть і видаліть зайвий тег <i> чи додайте, де потрібно, тег </i>.

Приклади часто вживаних тегів HTML :

Приклади використання тегів Результат
<b>жирний</b> жирний
<i>курсив</i> курсив
<u>підкреслений</u> підкреслений
<font size=1>розмір шрифту 1</font> розмір шрифту 1
<font size=4>розмір шрифту 4</font> розмір шрифту 4
<font color=green>зелений колір</font> зелений колір
<ul><li>перший<li>другий</ul>
  • перший
  • другий
<hr>

При використанні редактора натиснення клавіші Enter створюється наступний абзац (обмежений тегами <p> </p>) з інтервалом між ним і попереднім абзацом.

Для простого переходу на наступний рядок (без інтервалу) використовуйте комбінацію клавіш Shift+Enter - тег <br/>.

Остання зміна: неділя 24 липень 2011 11:35