Програми для верстки сайтів

13

Від автора: в процесі створення сайту вам знадобляться якісь програми. Про найпопулярніших давайте поговоримо в цій статті.

Для яких цілей потрібні програми?

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

Робота з графікою. В першу чергу верстальник повинен вміти працювати з макетом, який він одержує. Якщо він не може вирізати потрібні частини з макету, то подальша верстка неможлива в принципі.

Робота з кодом. Коли ви розберетеся з графікою і виріжете все необхідне, потрібно буде приступити до основної роботи верстальника – написання коду. Щоб це було максимально швидко та зручно, потрібно використовувати відповідний софт.

Перевірка роботи. Коли ви вже зробите основну роботу, потрібно буде перевірити її результат. Як правило, в процесі написання ви можете зробити багато помилок, особливо якщо не володієте великим досвідом. Також до готової верстці зазвичай пред’являють різні вимоги. Перевірки допоможуть підігнати її під ці вимоги.

Для роботи з макетом

Верстальщику потрібно пам’ятати про необхідність роботи з макетом. Для цього є PhotoShop, хоча можна використовувати GIMP, як безкоштовний варіант-аналог. Підходять обидві, хоча фотошоп, звичайно, трохи зручніше.

Потрібно розуміти, що макет може містити сотні верств. Щоб працювати з ним без гальм, потрібно працювати на більш менш потужному залозі. Багато чого залежить від самого макета. Чим менше шарів та елементів, чим менше розмір файлу, тим швидше він буде оброблятися.

Власне верстка

З макетом все гранично зрозуміло, а який софт може стати в нагоді для верстки? Може бути, вам потрібна програма для верстки сайту лише на html і css. В такому випадку можна вибрати щось простіше. Чий складніше робота, тим більш функціональне рішення варто використовувати.

Блокнот. Найпростіше, що ви можете мати для редагування коду. Ніякого функціоналу. У яких випадках вам доведеться їм користуватися? Припустимо, потрібно буде показати одному якийсь фрагмент коду, а на його комп’ютері не виявиться відповідної програми. Блокнот не годиться для редагування і вже тим більше написання коду.

Програми для верстки сайтів

Рис. 1. В блокноті немає підсвічування синтаксису, тому він не годиться для роботи з кодом.

Notepad++. А ось це вже набагато більш просунутий інструмент. Її часто називають блокнотом програміста. Він підтримує підсвічування синтаксису, безліч мов і кодувань. Писати код легко, зручно, є можливість підключати плагіни і працювати з великою кількістю файлів одночасно. В залежності від вашого знання мов, ви можете включати або відключати підказки. Досвідчені верстальники зазвичай відключають їх, тому що вони тільки заважають писати код.

Програми для верстки сайтів

Рис. 2. В Notepad++ відмінна підсвічування синтаксису. Теги, атрибути, значення атрибутів і простий текст виділені по-різному.

Adobe DreamViewer. Більш потужна програма, яка включає в себе не лише редактор, але й інструменти для повністю візуального створення сторінок та елементів. Роботу з нею доведеться вивчати, оскільки вона досить складна. Потрібно сказати, що будь-візуальний редактор вставляє багато зайвого коду.

Це справедливо і у випадку з Dreamviewer, але тут вже доводиться платити за швидкість. Програма підійде професіоналам, коли потрібно дуже швидко отримати код-сторінки, щоб показати її замовнику.

SublimeText. Дуже схожий на Notepad++. Відрізняється в основному лише інтерфейсом і різними плагінами, які можна підключити.

Front Page. Ще одна програма від Microsoft. Теж дозволяє працювати з зображеннями, відеороликами та JavaScript.

Знову ж таки, вибір залежить від того, чи потрібно вам візуальна складова чи ви маєте намір більше писати код самостійно.

Статистика показує, що більшість розробників використовують Sublime і Notepad++. Це кращі програми для верстки сайтів. Але вони підійдуть вам, якщо ви вже знаєте код і особливо не потребуєте допомоги. Тоді ці редактори дадуть вам більше свободи.

Можна ще виділити UltraEdit. Хоча програма не користується великою популярністю, вона досить швидко відкриває великі файли і в ній теж зручно писати код.

Також багато хвалять NetBeans. Ця середовище розробки добре підходить для написання веб-сценаріїв і скриптів. Рекомендується початківцям.

З більш сучасного можна відзначити текстовий редактор Vim. По функціональності він вважається одним з найбільш потужних. Наприклад, можна працювати з безліччю файлів в одному вікні, проводити порівняння двох файлів, після чого швидко вносити правки. Ще одна особливість – необмежена можливість відміняти і повертати якісь свої дії.

Перевірка верстки

Як правило, нормальні редактори коду вже містять у собі інструменти для перевірки написаного. Наприклад, підсвічування коду дозволяє легко виявити випадкові помилки і дрібні помилки (незакритий тег, зайва крапка з комою і т. д.)

Але перевірка верстки полягає не тільки в цьому. Для більш повноцінного тестування потрібно використовувати й інші програми. Наприклад, той же відладчик. Я вже згадував про нього кілька разів. По-перше, це можливість швидко знайти проблему і вирішити її. Оскільки в налагоджувач можна відключити будь-які стилі, це дозволяє швидко знайти з його допомогою можна перевірити роботу медіа-правил, якщо ви реалізуєте адаптивність.

Цього теж може бути недостатньо. Якщо шаблон повинен однаково виглядати в більшості популярних браузерів, потрібно перевірити верстку на кросбраузерність. Для цього існує кілька онлайн-сервісів. Одним з найпопулярніших є crossbrowsertesting.com/. Певні функції на сайті доступні тільки за гроші. Сервіс здобув популярність із-за можливості перевірити сайт в більш ніж ста різних версіях браузерів.

Програми для верстки сайтів

Рис. 3. Crossbrowsertesting – один з ресурсів, який пропонує перевірку на кросбраузерність в сотнях версій браузерів.

Все ще може бути необхідна адаптація верстки під старі версії браузерів. Як відомо, найбільше проблем завжди виникало з Internet Explorer. Раніше я вже писав про IE Tester – програмою, де можна безкоштовно перевірити, як сайт буде виглядати в старих версіях браузера. Для цього також підходить програма NetRederender. Вона дозволяє подивитися зовнішній вигляд сайту IE-версіях від 5.5 до 9.

Висновок

Для верстки сайту може знадобитися досить багато сервісів і програм. У мінімальній комплектації це програма для роботи з графікою, 1 редактор коду і 2-3 сервісу для перевірки верстки. Я бачив людей, у яких набір інструментів набагато більше. Тут все залежить від складності вашої діяльності як веб-розробника. На сьогодні все. Підписуйтесь на наш блог, якщо хочете знати все про сайтобудуванні.