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

Очень визуальный HTML редакторВизуальный HTML редактор (WYSIWYG-редактор, от англ. What You See Is What You Get, «что видишь, то и получишь») — HTML редактор в котором страницы редактируются не с помощью правки исходного кода, а непосредственно в окне просмотра результата.

Такой подход упрощает и ускоряет процесс создания и редактирования страниц, но создаёт более "мусорный" код.

WYSIWYG-редакторами отчасти являются и офисные приложения, например, бесплатный OpenOffice.org, в котором документы можно сохранять как HTML-страницы (правда, с большим количеством ненужных тегов).

На этой странице представлен один из лучших бесплатных визуальных редакторов NVU от знаменитых Mozilla Corporation.

NVU 1.0

Визуальный HTML редактор NVU 1.0
Рейтинг:
Размер:
7.9 MB (инсталлятор / портативная версия)
Интерфейс:Русский/Английский
Платформа:
Windows 98/ME/2000/XP/Vista/7 32-bit, Linux, Mac OS X
Обновлено:2008-01-25
Разработчик:
Платный аналог:  


Похожая программа: HTML редактор HtmlReader





NVU 1.0

Визуальный HTML-редактор, подобный Macromedia Dreamweaver, но полностью бесплатный. Отличный инструмент для новичов, только начинающих осваивать науку создания сайтов.

Чем он хорош? Да тем, что для создания web-странички Вам не надо заморачиваться над изучением языков web-программирования. Вы просто набираете текст, вставляете картинки или анимацию, а всю "грязную" работу по оформлению всего этого в HTML берет на себя NVU.

К сожалению, на данный момент разработка NVU приостановлена, но до первой стабильной версии проект все же дорос, а это уже немало. Давайте рассмотрим его подробнее.

Возможности NVU

  • различные режимы отображения редактируемой страницы;
  • широкие возможности для оформления текста;
  • вставка изображений (включая фоновые);
  • возможность работы над целым сайтом, а не только над отдельными страницами;
  • создание таблиц и форм;
  • проверка орфографии;
  • публикация отредактированного сайта напрямую из редактора;
  • собственный редактор каскадных таблиц стилей (CSS) и консоль Java Script.

Все это и еще многое другое позволяет нам сделать небольшой сайт с нуля при минимальных (что предпочтительней) знаниях в области HTML (или их полном отсутствии :)).

Установка визуального редактора

Скачиваем… Устанавливаем… Запускаем и смотрим :) (именно так — никаких лишних телодвижений с русификациями, вводом дополнительной информации и т.п.).

Согласимся на создание ярлыка на рабочем столе и запустим с его помощью NVU.

Интерфейс NVU

C первого взгляда NVU напоминает какой-то текстовый редактор. Это и есть его главная заслуга — визуальный графический интерфейс.

Рабочее окно

Но посмотрев вниз, Вы увидите, что помимо обычного есть еще несколько режимов отображения введенной информации:

  • HTML-теги;
  • код;
  • и предварительный просмотр.

Режим HTML-теги

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

Вкладка HTML-тегив визуальном HTML-редакторе NVU

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

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


Режим Код

Режим "Код" — привычное всем web-разработчикам окошко с HTML-кодом редактируемой странички. Именно отсюда, изо всех этих каракуль и вырастают все ресурсы Интернета.

Вкладка Код в визуальном HTML-редакторе NVU

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

Предварительный просмотр

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

На скриншоте она не отличается от текстового аналога, но стоит добавить любые элементы навигации или скрипты, как отличие обнаружит себя:

Вкладка Предварительный просмотр визуального HTML-редактора NVU

Если бы Вы редактировали эту страницу в Блокноте, как суровые программисты, то для её просмотра Вам понадобились бы ещё как минимум, браузер и локальный веб-сервер.

А здесь, как говорится, уже "всё включено".

Теперь, когда с вариантами просмотра и редактирования немного прояснили, давайте поглубже вникнем в возможности NVU.

Скрытые возможности визуального HTML-редактора NVU

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

Например, в меню "Файл" Вы найдете такие функции,, как:

1. "Открыть адрес в Интернете". Благодаря движку от Mozilla позволяет открывать и редактировать страницы прямо из Интернета.

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

Функция Открыть адрес в Интернете в HTML-редакторе NVU

2. "Экспорт в текстовый формат". Налюбовавшись сайтом, Вы можете сохранить его исходный код в формат .txt на своем жестком диске.

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

В меню "Вставка" можно обратить внимание на возможность вставки PHP-кода и символов, которых нет на клавиатуре.

"Формат" предоставляет широчайшие возможности для настройки вида текста, изображений и другой информации.

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

Вставка фона

Наконец меню "Инструменты" предоставляет такие возможности, как: доступ к консоли JavaScript, редактору CSS и инструменту для проверки HTML кода.

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

Выводы

В NVU несложно разобраться, так как все элементы управления в программе снабжены всплывающими подсказками и пояснениями, а благодаря группе русских разработчиков из Mozilla.ru Team имеется также и очень хорошая справка на русском языке.

Единственным минусом NVU есть то, что код сгенерированный программой очень громоздкий и имеет много лишних тегов. Но пусть это будет для Вас только стимулом изучать HTML и оптимизировать, и доводить свой сайт до совершенства.

Удачных Вам разработок и успехов во всех начинаниях!

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

P.P.S. Сделать сайт — это только полдела. Нужно ещё его грамотно поддерживать и не допускать появления битых ссылок, с помощью вот этой программы для проверки ссылок:
Xenu Link Sleuth https://www.bestfree.ru/soft/inet/checklinks.php



Похожие программы:

XML редактор: PSPad
Многофункциональный XML (и не только) редактор. Умеет подсвечивать команды великого множества языков программирования, проверять на ошибки, и много чего ещё.
WAP редактор: DotWAP
Небольшой простецкий редактор для создания целых WAP-сайтов, или отдельных WML-страниц.
Рейтинг сайта: Site-Auditor Light
Программа для сбора данных необходимых для оценки видимости сайта в Рунете.
Проверка тИЦ и PR: Page Promoter Bar
Небольшая панель, встраивающаяся в браузеры Internet Explorer и Mozilla Firefox, и автоматически определяющая параметры PR и тИЦ открытого сайта..





** Задавать вопросы лучше на нашем форуме. Просто зарегистрируйтесь и создайте новую тему.

Полезный совет:



Система проверки ошибок от Mistakes.ru