Інструменти для верстки сайтів

Часто в інтернеті зустрічаю питання типу “Які інструменти ви використовуєте для верстки сайтів?” або ж “Які є інстурменти для верстальщика початківця?”. У цій статті я розкажу та намагатимусь детально описати увесь набір інструментів, який я використовую повсякденно для верстки різноманітних сайтів.

Інструментів для розробки сайтів придумали досить багато. Забігаючи на перед скажу що їх ділять на дві великі групи – візуальні та текстові редактори. Візуальні редактори дозволяють правити код без особливого знання HTML. Текстові редактори – це фактично нащадки старого доброго “Блокнота”, навіть якщо у них є підсвідка синтаксису, знання коду просто необхідне.

Два слова скажу про візуальні редактори. Особисто я користувався і візуальним і текстовим редактором. Та все ж надав перевагу останньому. Візуальний редактор типу Adobe Dreamweaver (будь-яких версій) звичайно досить зручний, та варто відзначити що він і дуже важкий для системи. Всеж якщо ви встановили саме цей візуальний редактор, то розібратись в ньому не складе особливих труднощів. Дозволю собі дати вам пораду. Якщо хочете стати професіоналом забудьте про візуальні редактори верстки.

1. Sublime Text

Sublime Text
Тож перший інструмент який я рекомендую використовувати це є Sublime Text. Це мій основний робочий інструмент. Розглянемо його переваги:

  • Sublime Text є умовно-платним або умовно-безкоштовним :), що власне дозволяє використовувати його початківцям. Вартує редактор 70$ за ліцензійну версію. Але ним можна користуватись і безкоштовно. В безкоштовному режимі з періодичністю в декілька годин з’являється діалогове вікно із пропозицією придбати редактор, а також у заголовку вікна капсом написано UNREGISTERED. Наскільки я знаю, інших відмінностей немає;
  • Якщо ви працюєте із різноманітними ОС. Не проблема! У Sublime Text є версії для Linux, OS X і Windows;
  • Редактор володіє пристойною швидкістю роботи. Повірте на слово при роботі з ним це відчувається;
  • Приємним інтерфейс (включаючи всілякі анімації);
  • Sublime Text можна з легкістю налаштувати під себе (правда, не в GUI, а в json-конфігах);
  • Велика кількість плагінів, яка постійно збільшується;
  • Дуже хороший автокомплит. Нажаль немає автокомплита CSS-правила в атрибуті style HTML-тегів;
  • Сніпети. Це заздалегідь заготовлені шматки коду, з розставленими в них якорями. Створивши необхідні сніпети ви зекономите свій час. Щоб вставити сніпет у код достатньо використати комбінацію клавіш CTRL+SHIFT+P та ввести у пошуку назву сніпета;
  • Fuzzy пошук – це не чіткий пошук;

Мінуси:

  • Із коробки Sublime Text не працює з FTP. Для цього є додатковий плагін, та буду відвертим я ніколи його не встановлював та незнаю як він у дії. Я практично не користуюсь прямим редактуванням файлів через FTP, тому для мене цей мінус незначний;

Описувати функціональність Sublime Text та його плагіни можна довго, та це вже зовсім інша стаття.

2. Adobe Photoshop

Photoshop
Сам процес верстки важко уявити без обробки зображення. Для цього я використовую Adobe Photoshop.

3. Adobe Illustrator

Adobe-Illustrator
В попередній статті я розказував як і для чого використовувати SVG-іконки на вашому сайті. Для обробки векторного зображення та створення SVG спрайта вам знадобиться Adobe Illustrator. Для вирішення цієї задачі ви можете використати і інші векторні редактори такі як CorelDRAW, Xara Xtreme, Inkscape. Та все ж як на мене Adobe Illustrator найзручніший.

4. Firebug для Mozilla Firefox

Крім редактора коду важливо не забути встановити та навчитись використовувати плагін Firebug для Mozilla Firefox. Цей плагін дозволяє розібрати майже будь-яку веб-сторінку до дрібниць. При цьому він дозволяє істотно спростити процес налагодження сторінки прямо у вікні браузера. Орієнтовно 80% свого часу я працює в Mozilla із плагіном Firebug. Та всього 20% із іншими браузерами тестуючи кросбраузенрість зверстаного сайту.

5. Режим адаптивного дизайна у Mozilla Firefox

Часто для тестування адаптивної верстки я використовую режим адаптивного дизайна у Mozilla Firefox. У браузері його можна викликати за допомогою клавіш CTRL+SHIFT+M Для цього можна використовувати також сервіс Screenfly та всеж тестувати локально верстку за допомого нього неможливо!

6. Валидатори

Не забувайте використовувати валідатори для провірки html validator.w3.org та CSS jigsaw.w3.org кода на відповідність заявленим стандартам.

Також для полегшення роботи можете використовувати різноманітні сервіси як от:

  • Gradient editor – генератор градієнтів;
  • Csstooltip – генератор вспливаючих підказок.
  • Або ж можна використовувати css3generator.com – сервіс який об’єднав досить багато генераторів

CSS3Generator

Ось на мій погляд достатній набір інструментів для верстки сайтів.

Коментарі (1)

Вам вже є 18 років?

Для переходу по цьому посиланню ви повинні підтвердити, що вам виповнилось 18 років.

Мені немає 18 Мені вже є 18