Главная » 2013 » Январь » 23 » HTML редакторы
23:56
HTML редакторы

Все познается в сравнении… Как известно, нет ничего совершенного, однако ничто, тем не менее, не мешает к совершенству стремится. И так во всех сферах нашей жизни. 
Сейчас  есть достаточное количество специальных программ, которые помогают программисту, а иногда даже берут на себя большую часть работы. Однако, бывают случаи, когда требуется, чтобы под рукой всегда был небольшой, но функциональный инструмент, который одинаково бы мог справиться и с созданием сайта, и с написанием программ на любых языках программирования. 
Таких программ хоть и меньше, но они все же есть. Какую же выбрать? Таким вопросом очень часто задаются начинающие программисты. Да и опытные иногда пересматривают свою точку зрения и меняют излюбленный инструмент на более современный и функциональный.

Многофункциональный HTML (и не только) редактор   PSPad

Здесь я расскажу Вам об одном из таких мультифункциональных инструментов —  программе PSPad. По сути это тот же Блокнот, но его функциональность расширена до предела. 

В программу, которая в установленном виде занимает всего около 10 мегабайт, умудрились впихнуть столько, что ни в сказке сказать, ни пером описать.Чтобы описать все функции PSPad, не хватит, наверное, и целой книги, так как их не просто много, а очень много. Каждый найдет в программе что-то свое, однако я бы советовал обратить на нее внимание, прежде всего веб-программистам и верстальщикам, потому что PSPad просто так и просится на место главного инструмента для работы с HTML .

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

поддержка множества языков программирования: HTMLPHP, Pascal, JScript, VBScript, MySQL, MS-DOS, Perl, Basic и т. д.;

подсветка синтаксиса и проверка (а также оптимизация) кода;

встроенный предпросмотр готовой web-странички;

HEX-редактор;

проверка правописания;

встроенный FTP-клиент;

возможность вызова из PSPad среды разработки для каждого из языков;

гибкая система настроек.

Короче говоря, PSPad может заменить собой уйму другого софта, чем сэкономит место на винчестере и поможет упорядочить и более или менее централизовать всю работу по верстке сайтов.

Интерфейс PSPad

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

PSPad автоматически отображает разными цветами цифры, печатаемый текст и зарезервированные слова языка программирования. Таким образом, мы всегда можем видеть, правильно ли вводим ту или иную информацию. При этом цвет подсветки можно изменять по желанию, что делает взаимодействие с PSPad еще более удобным. Все настройки можно произвести при помощи возможности редактирования шаблонатого или иного языка. Чтобы это сделать зайдите в меню "Настройка" и выберите пункт "Редактировать шаблон", после чего в выпадающем списке выберите нужный язык. Несколько слотов, как Вы могли заметить, пустые. Это дает возможность дополнительно подключить те языки, которых нету по умолчанию, но, которые нужны для работы.

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

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

Сжатие HTML

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

Проверка HTML-кода на валидность 

 Хорошо помогает также утилита для проверки HTML кода и таблица непечатаемых символов. Для того чтобы проверить документ на ошибки зайдите в меню "HTML" и выберите пункт "Проверить HTML код" (горячие клавиши — CTRL+F10). Внизу Вы увидите в открывшемся LOG-окошке все ошибки и предупреждения касательно Вашего кода. 

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

Чтобы описать все функции PSPad, не хватит, наверное, и целой книги, так как их не просто много, а очень много. Каждый найдет в программе что-то свое, однако я бы советовал обратить на нее внимание, прежде всего веб-программистам и верстальщикам, потому что PSPad просто так и просится на место главного инструмента для работы с HTML :).

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

P.P.S. Если Вы — начинающий верстальщик, то Вам лучше всего может подойти визуальный HTML-редактор Nvu. C его помощью Вы лучше поймете язык гипертекстовой разметки и сможете видеть и контролировать все свои действия в реальном времени.


 

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

 Предлагаю Вашему вниманию бесплатный визуальный HTML редактор NVU.
Чем он хорош? Да тем, что для создания web-странички Вам не надо заморачиваться над изучением языков web-программирования. Вы просто набираете текст, вставляете картинки или анимацию, а всю "грязную" работу по оформлению всего этого в HTML берет на себя NVU.
Возможности NVU:
поддержка нескольких режимов отображения редактируемой страницы;
расширенные возможности для редактирования текста;
вставка картинок (в том числе и фоновых);
редактирование отдельных страниц и целых сайтов;
создание форм и таблиц;
проверка орфографии;
возможность публикации сайта прямо из программы;
встроенный редактор CSS и консоль Java Script.
Все это и еще многое другое позволяет нам сделать небольшой сайт с нуля при минимальных (что предпочтительней) знаниях в области HTML (или их полном отсутствии .
Скачиваем… Устанавливаем… Запускаем и смотрим :) (именно так - никаких лишних телодвижений с русификациями, вводом дополнительной информации и т.п.. Согласимся на создание ярлыка на рабочем столе и запустим с его помощью NVU.

Интерфейс NVU
C первого взгляда NVU напоминает какой-то текстовый редактор. Это и есть его главная заслуга - визуальный графический интерфейс. Но, посмотрев внизу, Вы увидите, что помимо обычного есть еще несколько режимов отображения введенной информации: HTML-теги, код и предварительный просмотр.
Режим HTML-теги
"HTML-теги" представляют собой эдакую мозаику из текста и тегов, оформленных в виде цветных прямоугольничков. Такой режим просмотра пригодится начинающим пользователям, так как он отображает все основные использованные теги и при этом не смущает большим их количеством, оставаясь все тем же визуальным редактором. В таком режиме хорошо учить названия тегов, чтобы потом легко использовать их в режиме правки кода.
Режим Код
Режим "Код" представляет собой привычное всем web-разработчикам окошко с HTML-кодом редактируемой странички. Именно отсюда изо всех этих каракуль и вырастают все ресурсы Интернета. Освоив кодовый язык Вы легко сможете добавить в свой сайт любые элементы управления, скрипты и прочие "вкусности", которыми привыкли любоваться на чужих сайтах :).
Предварительный просмотр
И, наконец, "Предварительный просмотр" позволяет оценить результат наших стараний, отображая страничку в том виде, который она приобретет в Интернете. На скриншоте она не отличается от текстового аналога, но стоит добавить любые элементы навигации или скрипты, как отличие обнаружит себя:

Теперь, когда с вариантами просмотра и редактирования немного прояснили, давайте поглубже вникнем в возможности NVU. Взаимодействоватьс программой можно при помощи панели меню или используя пиктограмки и условные обозначения под ней.
Скрытые возможности визуального HTML-редактора NVU
Все основные параметры форматирования доступны в виде пиктограмм, но некоторые возможности скрыты в панели меню и не сразу обнаруживают себя.
Например, в меню "Файл" Вы найдете такие функции,, как:
"Открыть адрес в Интернете". Благодаря движку от Mozilla позволяет открывать и редактировать страницы прямо из Интернета. Это может очень пригодиться, если Вы хотите посмотреть, как делается та или иная фича для сайта. Просто вводим в открывшемся окошке адрес и любуемся результатом:

"Экспорт в текстовый формат". Налюбовавшись сайтом, Вы можете сохранить его исходный код в формат .txt на своем жестком диске.
В "Правке" есть инструменты для поиска нужных слов по тексту и проверки орфографии.
В меню "Вставка" можно обратить внимание на возможность вставки PHP-кода и символов, которых нет на клавиатуре.
"Формат" предоставляет широчайшие возможности для настройки вида текста, изображений и другой информации. Самой интересной, а главное нигде не отображенной возможностью здесь есть "Цвет и фон страницы". При помощи данной опции Вы легко сможете добавить любой фоновой рисунок либо просто задать фоновой цвет для сайта.
Наконец меню "Инструменты" предоставляет такие возможности, как: доступ к консоли JavaScript, редактору CSS и инструменту для проверки HTML кода. Также отсюда Вы можете получить доступ к настройкам программы и настройкам тем оформления NVU.
В NVU несложно разобраться, так как все элементы управления в программе снабжены всплывающими подсказками и пояснениями, а благодаря группе русских разработчиков из Mozilla.ru Team имеется также и очень хорошая справка на русском языке. Единственным минусом NVU есть то, что код сгенерированный программой очень громоздкий и имеет много лишних тегов. Но пусть это будет для Вас только стимулом изучать HTML и оптимизировать, и доводить свой сайт до совершенства.
Удачных Вам разработок и успехов во всех начинаниях :)!!!
P.S. Данная статья предназначена для свободного распространения. Приветствуется её копирование с сохранением авторства Руслана Тертышного и всех P.S. и P.P.S.
 






Категория: Инструменты успеха | Просмотров: 2124 | Добавил: greyser11 | Теги: Скрытые возможности визуального HTM, Интерфейс NVU, Режим HTML-теги, визуальный HTML-редактор Nvu, Многофункциональный HTML редактор P | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]