Верстка сайту

19

Від автора: у цій статті ми поговоримо про верстці сайтів. Як почати верстати з нуля? Які особливості верстки під CMS? Які відео подивитися, щоб навчитися? Будемо обговорювати ці та інші питання.

Початківцям у верстці

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

Якщо ви читали попередню статтю, то напевно зрозуміли, що сторінки створюються за допомогою мови HTML, CSS і JavaScript. Там ми також коротко розглянули процес верстки. Але якщо ви новачок, як виконати верстку сайту з нуля? У цьому вам можуть допомогти відеоуроки та статті з основ HTML і CSS на нашому сайті. Вони дійсно призначені для новачків. Тобто, навіть якщо ви абсолютно нічого не розумієте в процесі створення сайту, пройшовши пару уроків, у вас буде вже більш ясне уявлення, а вивчивши всі надані матеріали можна досягти першого вражаючого результату – зробити верстку сайту своїми руками.

Щоб навчитися верстати прості макети, вам достатньо вивчити основи. Наприклад, цей відеокурс по верстці сайтів для початківців, з використанням простих технік. Скільки часу на це може піти? Звичайно, за одну ніч ви не зможете навчитися, але цілком реально за 1 місяць з нуля вийти на рівень, при якій ви сверстаете свій перший, нехай і дуже простий, але все-таки сайт! Далі вам слід просто підвищувати свій рівень, якщо є бажання збільшувати свою майстерність.

Сьогодні відбувається революція веб-стандартів. Нові технології HTML5 і CSS3 дозволяє робити набагато більш красиві сайти, а іноді навіть обходитися без JavaScript-коду. Саме їх вам потрібно буде вивчити далі, тому що все більше і більше макетів сьогодні верстається саме за допомогою цих технологій.

Як навчитися верстати краще?

Проста верстка сайту, в основному, виконується з фіксованим макетом, з мінімумом функціональності і додаткових елементів. Веб-сценарії або взагалі відсутні, або їх дуже мало. Це початок. Найпростіше, що ви зможете зробити. Захочете більшого? Тоді вам просто доведеться вчитися далі. Якщо на основи може піти всього лише місяць-другий, то на більш просунутий рівень доведеться виходити довше. Наприклад, одних тільки плагінів для jQuery (це така JavaScript-бібліотека, найпопулярніша, між іншим) налічується багато сотень. Звичайно, всі вони вам не потрібні, але щоб набратися досвіду в веб-програмуванні, доведеться вивчити хоча б кілька десятків. З допомогою цих плагінів ви зможете витворяти зі сторінками практично все, що тільки можна придумати.

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

Вони допомагають своїм колегам, полегшують їхню працю. Ще одним терміном, який непогано було б знати, що є «фреймворк». Це теж файли або файли з готовим кодом, які значно полегшують вашу роботу. Одним з таких фреймворків для верстки є Bootstrap. З його допомогою сьогодні верстають дуже багато. Звичайно, роботу з фреймворками теж потрібно вивчати. Це допомагає вам розвиватися і ставати кращими у своїй справі.

Верстка сайту

Рис. 1 Готові стилі, вже прописані в Bootstrap. Вам залишається тільки застосовувати їх у своїх проектах

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

Види верстки

Якщо ви збираєтеся навчатися верстці, то ви обов’язково повинні знати, на які вона ділиться види. Загалом, у попередній статті ми вже частково розібрали це питання. Мабуть, його можна трохи доповнити.

Отже, верстка може відрізнятися по тому, як буде змінюватися зверстана сторінка при зміні ширини вікна або на різних пристроях. Ми вже розібрали, що фіксований макет ніяк не змінюється. Гумовий макет завжди змінюється в залежності від ширини вікна, але з-за цього також можуть виникати труднощі.

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

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

Верстка під CMS

CMS – системи управління сайтом. Щось на кшталт двигуна, на якому знаходиться ваш проект. Саме так їх часто і називають – движки. Верстка сайтів під такі движки має свої особливості. Самими популярними CMS є WordPress і Joomla.

Завдяки цим движка сторінки сайту можуть генеруватися динамічно. Наприклад, якщо у вас на сайті 3 сторінки, і ви не плануєте робити більше, то вам може і не знадобитися движок. Зробити такий проект можна на чистому HTML і CSS. Але уявіть, що ви запускаєте новинний сайт, на якому кожен день будуть публікуватися нові пости. Для такого проекту абсолютно точно потрібна CMS.

Верстка сайту під WordPress відрізняється від звичайного тільки тим, що готову верстку вам потрібно інтегрувати в движок. Своїми силами це можна зробити лише після вивчення самого движка. Також непогано буде добре знати PHP, тому що на цій мові написані майже всі CMS. Завдання щодо інтеграції верстки можна доручити іншій людині, яка розбирається в цьому, якщо ви самі не компетентні в питанні. Звичайно, в такому випадку вам доведеться заплатити певні гроші за послуги.

Альтернативний варіант – можна використовувати один із шаблонів WordPress (їх тисячі) і переробити його дизайн, змінивши стилі. Для цього вам досить добре розбиратися в CSS. Деякі речі в шаблоні можна поміняти чисто з допомогою візуальних параметрів, а для деяких доведеться лізти в нетрі движка, змінюючи PHP-код. Так що основи PHP вам все одно потрібні, якщо ви хочете повноцінно користуватися движками.

Верстка сайту

Рис. 2 Вибирайте будь-який з сотень шаблонів, які вже існують для WordPress. За допомогою CSS і PHP можна серйозно змінити дизайн теми.

Joomla – верстка сайту під цей движок теж вимагає інтеграції написаного вами раніше коду. Тут вам знадобляться приблизно такі ж знання, як і для інтеграції в WordPress, але якщо говорити коротко, то в Joomla це трохи більш важкий процес. Знову ж таки, є сотні готових тим, і ви маєте повне право переробляти їх на свій лад.

Висновок

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