Редакторы для верстки

Для разработки HTML-документов существует множество специализированных программ. Они подсвечивают HTML-код и позволяют сразу определить, где в коде находится ошибка. Кроме того, многие из них содержат интерактивную справку, «подсказывающую» назначение того или иного тега/атрибута/параметра. Нпример:

• популярной бесплатной заменой Блокнота является программа Notepad++, которую можно скачать с сайта http://notepad-plus-plus.org.

• phpDesignerPro ( http://www.mpsoftware.com ) Это коммерческая программа, но ее ознакомительная версия работает 21 день;

• PSPad (http://www.pspad.com/ru/download.php) – еще одна бесплатная замена блокноту, которой известен синтаксис HTML и CSS;

• HTMLReader (http://manticora.ru/download.htm) – бесплатный редактор, позволяющий просматривать, редактировать и создавать HTML-документы.

Также категорически запрещается использовать для верстки Microsoft Word и другие текстовые процессоры – они автоматически выполняют некоторые действия, приводящие к нарушению работоспособности кода (например, заменяют одни кавычки на другие).

Валидаторы

Валидаторы – сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам выбранного DOCTYPE. Строка DOCTYPE влияет на большое количество мелочей : от поведения различных тегов до размера границ, расстояния по умолчанию, высоты и ширины тегов. Поэтому указывать строку DOCTYPE нужно осознанно. Если вы не укажете строку DOCTYPE или сделаете это неверно, различные браузеры будут вести себя по-разному.

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

Наиболее популярным валидатором является сервис http://validator.w3.org. Он позволяет проверить корректность сайта в Интернете.

Если нет доступа к Интернету, проверить HTML-документ на валидность можно с помощью бесплатной программы Tidy (http://tidy.sourceforge.net).

В Mozilla Firefox в качестве валидатора, не требубщего доступа к Интернету, выступает расширение HTML Validator, которое можно скачать по адресу http://users.skynet.be/mguery/mozilla/.

Графические редакторы

Верстальщик сайта работает с макетами дизайна, которые, как правило, сделаны в Photoshop, следовательно, необходим графический редактор Adobe Photoshop.

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

Заменой Adobe Photoshop могут служить бесплатные графические редакторы, поддерживающие работу с родным форматом Adobe Photoshop – PSD. Примером может служить GIMP (http://www.gimp.org/downloads) – бесплатный аналог Adobe Photoshop, изначально предназначенный для ОС Linux, но сейчас работающий и в Windows.

Другие программы

На помощь веб-мастеру могут прийти различные плагины для браузеров. Незаменимым является расширение Web Developer для Mozilla Firefox (http://addons.mozilla.org/ru/firefox/addon/web-developer). После установки данного расширения в браузере Mozilla Firefox появится дополнительная панель с большим количеством команд, упрощающих разработку сайтов.

Наиболее полезные из них следующие:

• Отключить->Отключить кэш – отключает использование кэша браузера для хранения веб-страниц;

• Ошибок CSS нет->Редактор CSS – позволяет просмотреть все CSS-файлы, используемые загруженной страницей;

• Формы->Показать параметры форм – отображает идентификаторы всех форм и их элементов на странице, а также значения таких атрибутов, как action, method, name, size, maxlength;

• Формы->Показать пароли – если в поле для ввода пароля указаны звездочки, позволяет заменить звездочки на введенный пароль;

• Графика->Показать размеры изображений – показывает рядом с каждым изображением реальные размеры данного изображения;

• Разное->Редактор HTML – открывает встроенный редактор HTML расширения Web Developer;

• Инструменты->Validate HTML – позволяет произвести валидацию открытой страницы с помощью сайта http://validator.w3.org;

• Инструменты->Validate CSS – выполняет валидацию CSS для текущего сайта.

Полезными также являются значки, сигнализирующие об ошибках CSS и JavaScript.