О верстке мы уже вспоминали, а вернее, говорили о тех сайтах, которые помогут нам ее изучать. Пришло время поговорить и о инструментах, которые нам помогут в повседневной работе над версткой сайтов.
Таких инструментов придумали и разработали большое множество. Забегая вперед, скажу, что их условно делят на две большие группы — визуальные и текстовые редакторы. Визуальные редакторы позволяют править код без особого знания html. Текстовые редакторы — это, фактически, потомки доброго «Блокнота» — даже если в них имеется подсветка синтаксиса, знание кода просто необходимо. В этой заметке будем разбирать некоторые популярные и проверенные в работе инструменты.
Лично я пользовался и визуальными, и текстовыми редакторами, но в результате остановился на последнем варианте. Визуальный редактор типа Adobe Dreamweaver (любых версий), конечно, довольно удобен, но и довольно тяжкий на подъем. Для решения большинства задач мне вполне хватает текстовых редакторов, так что оставим Dreamweaver для любителей кряков и платного ПО. Если Вы все же установили эту программу, разобраться с ее работой не составит особого труда. Так как в разных версиях детали настроек подключения сервера итд итп отличаются, углубляться в механизмы отладки работы Dreamweaver не будем.
Чаще всего для верстки и правки кода использую бесплатный текстовый редактор Notepad++. Загрузить его можно с официального сайта команды разработчиков, устанавливается он также просто и работает довольно шустро. Редактор позволяет осуществить подключение к локальному/удаленному серверу, имеет простую подсветку синтаксиса и настолько же прост в настройке и использовании. Несмотря на привычку, в ближайшее время хочу попробовать сменить редактор на NetBeans. Он также имеет приличный функционал и также абсолютно бесплатен, как Notepad++.
Кроме редактора кода важно не забыть установить/научиться использовать плагин Firebug для Mozilla Firefox. Этот плагин позволяет разобрать почти любую веб-страницу до мелочей. При этом он позволяет существенно упростить процесс отладки страницы прямо в окне браузера.
Конечно, в Chrome это можно сделать, воспользовавшись пунктом меню «Анализировать элемент». Но лично я провожу 90% работы по верстке в Mozilla и только 10% — в других браузерах и эмуляторах браузеров, поэтому Firebug и еще раз Firebug. Кроме Firebug не лишним будет установить дополнение Web Developer — оно позволит «не закрывая браузер» определять размеры блоков, картинок, определять валидность кода и делать многое другое.
Естественно, сам процесс верстки сейчас трудно представить без обработки изображений. Лично я для этих целей использую Adobe Photoshop, рисуя там макеты и набрасывая дизайн сайта. Но в последнее время стараюсь резать макет в Photoshop все реже, применяя эффекты CSS и jquery — как для создания кнопок, так и графических элементов сайта.
Для того, чтобы Ваш сайт был кроссбраузерным (одинаково отображался в разных браузерах), не лишним будет использовать при тестировании различные версии предустановленных браузеров или специальные программы-эмуляторы. Последних в сети большое множество, причем как платных, так и бесплатных.
В качестве бонуса к данной заметке делюсь списком инструментов для более серьезного кодинга — на языке PHP.
Бонус 1: Список полезных инструментов для php разработчика
Бонус 2: Sublime Text — отличный редактор для веб-мастера
Похожие статьи:
About the author
Заметил, что о программах-эмуляторах рассказали мало. Собираетесь отдельный пост о них писать?
Спасибо за наблюдательность 🙂 Да, решил не мешать все вместе, буду писать отдельный пост.