Джентльменский набор верстальщика

Не редко многие из тех, кто занимаются кодированием встречают на форумах фразы в стиле «Настоящие верстальщики верстают только в блокноте». С моей точки зрения, такие высказывания лишены здравого смысла. Мне кажется, в блокноте можно верстать, когда ты учишься, чтоб лучше запомнить синтаксис разметки, или когда у тебя под рукой нету инструментов, чтоб сделать правки, поэтому и приходится воспользоваться стандартными средствами редактирования. В иных случаях использование блокнота для работы грозит потерей кучи времени и нервов. Цель этой заметки привести список с кратким описанием инструментов которые облегчают и ускоряют верстку.

1.Adobe Dreamweaver: Для меня это лучший инструмент для написания, правки, заливки кода. Из недостатков я вижу только ресурсоемкость, которая может быть заметна на слабеньких тазиках и угрызения совести по поводу использование пиратского софта. Из пюсов огромный вагон полезных и удобных фич о которых можно прочитать в заметке За что я уважаю Dreamweaver.
2.Adobe Photoshop: Полезный инструмент для «нарезки графики» и выполнения корректировок. Многие отказываются от него в пользу Gimp из-за бесплатности последнего и отсутствия необходимости держать такого монстра для выполнения мелких работ. С моей точки зрения в фотошопе встроен отличный инструмент для разбивки макета для верстки. Эта “фича” позволяет минимизировать время на нарезку графики. В заметке “Как разрезать графику для верстки” рассказывается о том, как готовить графику для верстки этой программой
3.Web Developer Toolbar: Незаменимый плагин для FireFox. Имеет такие полезные инструменты как линейка для измерения расстояний, изменения окна браузера под нужные разрешения, отключения стилей, картинок иконкой или горячими кнопками, просмотр заголовков в виде отельной иерархической структуры. Подсветка таблиц, блочных элементов. Также этот плагин показывает валидность CSS и режим отображения браузера.
addons.mozilla.org/ru/firefox/addon/60
4.FireBug: Плагин для FireFox. Я не представляю, как без него может работать верстальщик. Это плагин который позволяет просматривать структуру документа, DOM, отлаживать скрипты. Имеет полезную функция подсветки отдельных, выбранных, структурных элементов. К тому же к этому плагину есть ряд полезных надстроек для просмотра кукисов, подсветки синтаксиса скриптов, плагин для пхп, плагин показывающий время загрузки и прочие.
addons.mozilla.org/ru/firefox/addon/1843
5. FireBug Light: Тот же FireBug с некоторыми ограничениями. Он выполненный в виде подключаемого джава скрипта что позволяет его использовать в других браузерах.
getfirebug.com/lite.html
6. IETester / Multiple IE: Программы для совместного использования ИЕ6 и ИЕ7 на одном компьютере. Первая реализована в виде отдельного приложения в котором вкладками можно открывать ИЕ5,6,7. Вторая устанавливает отдельно каждую версию браузера. Недостаток первой в наличии мерцания при переключении вкладок и небольшая тормознутость. Недостаток второго в том что пока не работает под MS Vista. Мне больше нравится первая программа.
my-debugbar.com/wiki/IETester/HomePage
tredosoft.com/Multiple_IE
7.HTML Validator: Плагин для FireFox. Выполняет проверку валидности страницы при загрузки. Результат отображает значком в строке состояния. Если страница валидная отображается зеленый значок в виде галочки, в случае не прохождения валидации отображается красный значек в виде креста. При клике на значек можно просмотреть ошибки валидации. В настройках можна выбрать среди трех алгоритмов валидации HTML Tidy, SGML Parser, Serial. SGML Parser это самый жесткий алгоритм, он же используется на w3c, его я и рекомендую использовать.
addons.mozilla.org/ru/firefox/addon/249
8. Color Zilla: Плангин для фаерфокса. Выполнен как обычный инструмент «Пипетка» в графических редакторах. Позволяет вытянуть в буфер код цвета с окна браузера.
addons.mozilla.org/ru/firefox/addon/271
9. Сервисы для сжатия CSS: Эти сервисы позволяют сжать уже готовый CSS. Некоторые из них имеют богатый функционал, некоторые имеют попроще. Они убирают лишние пробелы, табуляцию, лишние символы такие как ненужный px после 0. Мне больше всего нравиться www.cleancss.com. Он предельно прост и имеет большое количество настраиваемых параметров.
10. OptiPNG,PNGOut: Небольшие программы которые позволяют ужимать пнг картки. Сжатие не всегда большое но все же некая оптимизация есть. В статье “Оптимизация PNG c помощью OptiPNG, PNGOut” рассказывается об этих программах и как их использовать .
optipng.sourceforge.net
11. Pixel Perfect: Плагин для FireBug позволяющий оценить насколько точно относительно макета вы сверстали сайт. Плагин накладывает на сайт слой в котором находится картинка сайта, можно изменять ее прозрачность, таким образом что видно сверстанный сайт под нею и можно сравнить насколько верстка соответствует макету.
https://addons.mozilla.org/ru/firefox/addon/7943
NoSquint: Плагин, который отображает в статус баре зум страницы
No Squint

26.Сен.2008 | В категории CMS, Графика, Инструментарий

Филиппов 8.Окт.2008 в 21:53

Неплохо
Derzhavin 9.Окт.2008 в 4:52

И опять об этом. Если поисковики научатся понимать смысл, то блогерам придется поизголяться, чтобы быть читаемыми и не похожими на других.
Bazarov 9.Окт.2008 в 9:22

Как хорошо что удалось отыскать такой замечательный блог, и тем более отлично, что есть такие автора толковые!
Klaid 6.Ноя.2008 в 9:24

А есть аналог Web Developer Toolbar для ИЕ и Оперы?
Zodios 6.Ноя.2008 в 11:26

У оперы есть встроенный инструмент - Dragonfly, для IE есть Internet Explorer Developer Toolbar, но это больше аналоги firebug, аналога Web Developer Toolbar нету.
Hiway 7.Ноя.2008 в 18:15

Web Developer Toolbar имеет уже встроенный валидатор как локальных страниц, так и обычных. Более того в Dreamweaver тоже есть валидатор. А так, в принципе, очень неплохо. Сжатие CSS и оптимизатор png - +1
Zodios 7.Ноя.2008 в 18:35

Преимущество HTML Validator в том что он выполняет проверку валидации при загрузке страницы, а при клике на значек видно все ошибки и исходный код…
felix 13.Ноя.2008 в 11:48

да, HTML Validator сила! Пожалуй, самый лучший плагин для лисички
Ялекс 22.Ноя.2008 в 17:20

Netware Pixie - очень полезная программулька, но скорее для дизайнера, а не для верстальщика, хотя мне помогает и там и там.
Zodios 23.Ноя.2008 в 0:43

А что за программа такая, а то я через поиск не смог найти обзора с толковым описанием.
Verstalschik.Com 2.Дек.2008 в 12:05

Добавил бы в набор какую-нибудь экранную линейку. Мне больше всего понравилась PMeter
Zodios 6.Дек.2008 в 11:23

2Verstalschik.Com
Экранная линейка есть в WebDeveloper toolbar, не вижу смысла для этого ставить лишний плагин.
MustFun 16.Дек.2008 в 6:07

Спасибо за FireBug! О4ень понравился!!! : )
Ялекс 18.Дек.2008 в 0:20

Извиняюсь, что не дал ссылку. Описания нет, потому что по сути там нечего описывать.

Есть базовые сочетания клавиш Ctrl+Z (показать увеличенный кусочек экрана под курсором, вроде лупы), Ctrl+X (вывести палитру цветов с текущим цветом пикселя под курсором), Ctrl+C (скопировать цвет пикселя).

Существует аналог. Но его названия не помню.

Простите еще раз за то что неверно указал название производителя Nattyware Pixie.

Ссылка.
Серёга 21.Янв.2009 в 18:37

А вы всем этим пользуйтесь? Или есть какие-то программы, которые не вошли в приведенный список?
XyлиГAHкa 1.Апр.2009 в 2:10

Хех… Почаще пишите смайлики, а то всё так как будто все очень серъёзно
Вячеслав 2.Апр.2009 в 21:59

Н-дя, а я все еще верстаю в древнем HomeSite 4.5 от уже несуществующей компании allaire. Версия 2000 года выпуска
Хранитель Реж! 12.Апр.2009 в 17:20

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

сервер Denwer 3.3

учебник по Html и php msQi MySQL
стандартный виндовс блакнот

Adobe Photoshop
учебник к нему

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

ну и так по мелочи типа такой програмки что бы не заморачиваться в с ява менюхами Ultra menu

Ну а самое главно желание, дело это не простое и не одна профа, если хотите заниматься сайтами вам надо это делать компанией, в одно лицо это сложно сделать! Удачи !
Zodios 13.Апр.2009 в 13:09

2Хранитель Реж
Спора нет, сайт и на телефоне при достаточном энтузиазме можно сверстать.
Все плагины нужны для двух целей - автоматизировать процесс, сэкономить время.

Блокнот подходит только для обучения. Верстка в блокноте - потеря кучи времени.

ПНГ выгодный формат. Читайте мат.часть. В пнг ряд картинок обыгрывают по размерам и качеству другие форматы. Альфа-канал без пнг вообще не существует.

По поводу студий и распределения обязанностей согласен, но этот блог посвящен чисто верстке!
Хранитель Реж! 25.Апр.2009 в 13:47

Zodios ну если у тебя инет афигеть какой быстрый то можно и не только пнг использовать формат:)))) а вот если у человека скорость 15 кб.с у него сайт как зависнет на пнг и будет частями открываться ох как не красиво это выглядит. Вот в чем не выгоден пнг:)
petro_Kuliw 1.Июн.2009 в 22:48

Было бы прикольно, если бы свои мысли читатели выражали в стихах..интересно было бы такой блог прочесть :), админ мо введешь ради прикола такое правило на пару дней?)
Всеволод Кузьмичев 13.Июн.2009 в 20:32

Да уж… Тут как говорится: А ларчик просто открывался.:)
Бронислав 19.Июн.2009 в 11:20

Однажлы в студеную осеннюю пору. Бродил Я по нету. Наткнулся на пост. Понравилось очень! Респект выражаю! И даже закладки себе добавляю!
Михаил Кузьмин 21.Июн.2009 в 10:33

Вопрос к автору блога, а вот у вас время у каждой статьи и в комментах пишется… Это какое? Московское? Заранее спасибо за ответ.
Владимир Крылов 22.Июн.2009 в 19:02

Да уж Ну у вас либо талант писать, или это скопировано откуда-то!