Як стати верстальником з нуля: шпаргалка для початківців

41

Від автора: доброго часу доби! Для непосвячених у верстці є щось таємниче і навіть, можна сказати, що лякає. Коли ми заходимо на сайт, то бачимо гарну картинку, струнку структуру і плавно виїжджає менюшку. Але за всім цим стоїть праця хорошої людини, сполучної ланки між веб-дизайнером і веб-програмістом — «сірого кардинала», який не просто створив код всіх елементів на сайті, але і постарався, щоб вони правильно відображалися у всіх браузерах. Давайте поговоримо про нюанси цієї інтернет-професії та про те, як стати верстальником з нуля.

Не повторюйте їх помилок!

Як ви знаєте, скупий платить двічі, а то й більше. Однак безліч, на перший погляд, привабливих сайтів постраждало від скупості їх замовників і, при ретельному розгляді, мають огидним кодом. Часто сайти клепаются на швидку руку в спеціальних програмах, освоєних не повністю. У підсумку, код виходить кострубатим, засміченим, негнучким і більше нагадує смітник, ніж стрункі ряди HTML-тегів, CSS-властивостей і Java-скриптів.

Надалі економія на якісній верстці може зіграти ведмежу послугу: за неоптимизированного коду витрати на розкрутку сайту збільшуються, з’являються проблеми з кросбраузерністю (окремі елементи сайту неадекватно відображаються в деяких браузерах і на різних екранах користувачів), а надалі все приходиться переверстувати. Хнык…

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

З чого починається робота верстальника?

Як ви вже зрозуміли, верстальник відіграє найважливішу роль при створенні сайту. Він створює код веб-сторінок з допомогою мови розмітки HTML і XHTML, застосовуючи каскадні таблиці стилів CSS.

Спочатку верстальник отримує макет сайту від веб-дизайнера, найчастіше, у форматі програми Adobe Photoshop PSD шаблон, який є заготовкою для верстки. Шаблон повністю відображає дизайн майбутньої веб-сторінки, її розміри та схему розташування всіх складових (зображень, логотипів, кнопок, меню і т. д.).

Головна принадність шаблону PSD — в тому, що він підтримує багатошарову структуру зображень. Це означає, що кожен елемент дизайну розташований на окремому шарі, завдяки чому їх можна редагувати незалежно один від одного. Це істотно спрощує верстку, так як враховує її можливості при відтворенні дизайну за допомогою CSS і HTML.

Намилувавшись на макет, верстальник приступає безпосередньо до верстки. Він прописує кожен елемент сайту у вигляді коду HTML в спеціальній програмі або текстовому редакторі, призначеному для програмістів, наприклад, Notepad++.

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

Основи верстки на прикладі

Для прикладу візьмемо елементарне 2-х колоночный шаблон з логотипом, який ми будемо використовувати в якості фонового зображення. Інші частини зверстаємо з допомогою HTML, а розміри та стилі виставимо класами CSS.

Сайт в нашому прикладі складається з «Контенту», «збоку» і «Підвалу». Структуру веб-сторінки можна створити з допомогою тегів div. Кожен елемент повинен бути розташований в окремому шарі-контейнері шаблону. Наприклад, частини «Контент» та «Бічна панель» знаходяться всередині шару:

Контент

Бічна панель

Підвал

За допомогою класів CSS задаємо параметри стилів. Параметр background вказуємо колір фону. Властивості height і width встановлюємо розміри. Відступи від верхнього лівого та правого краю вікна виставляються значеннями margin-top margin-left margin-right.

Для верхньої частини відразу встановлюється колір і фон. Шлях до зображення, витесаному з PSD-шаблон, зазначається у спеціальному полі background-image.

.header {
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
width:1000px;
height:100px;
border:1px solid #000000;
background: #009966;
background-image: url(img/1.gif);
}
.pages {
margin-left:auto;
margin-right:auto;
width:1000px;
}
.content {
margin-right:10px;
width:806px;
height:450px;
border:1px solid #000000;
background: #999999;
float:left;
}
.sidebar {
width:180px;
height:450px;
border:1px solid #000000;
background: #FF9900;
float:left;
}
.foot {
clear:both;
}
.footer {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width:1000px;
height:50px;
border:1px solid #000000;
background: #333399;
}

Особливості блокової верстки

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

Така верстка передбачає відділення стилю елементів від HTML-коду, а також можливість накладення шарів один на одного. З її допомогою легко створювати різні візуальні ефекти: підказки, що випадають меню, списки і т. д.
Основним елементом блокової верстки є тег div, який ми вже згадували раніше. Він виділяє з двох сторін певну ділянку коду — шар. Всі стильові завдання винесені за межі HTML-коду CSS, доступ до яких здійснюється за допомогою класів або ідентифікаторів.

Спрощуємо процес верстки

Взагалі, зовсім не обов’язково всю ношу знань з верстки тягнути на своєму горбу. В інтернеті можна скачати вже зверстані шаблони або використовувати CSS фреймворки, наприклад, Bootstrap. Принадність використання цього фреймворку полягає в тому, що його творці вже подбали про всі нюанси верстки (підтримка різних дозволів екранів, кросбраузерність і т. д.).

Вам тільки потрібно вказати, що, коли і як відобразити на екрані, решта Bootstrap зробить сам. Крім цього, завдяки його популярності, вашому колезі буде простіше доповнювати ваш код.

Звичайно, у фреймворків є і недоліки, куди ж без них. Їх інструменти більше підходять для прототипування і створення веб-сторінок з вторинним дизайном, наприклад, сторінок адміністрування. Більш специфічний дизайн краще верстати «ручками».

Підіб’ємо підсумки

В Інтернет-просторах зустрічаються ресурси зі складною і дуже складною структурою, в яких верстка є найбільш трудомістким етапом в створенні сайту. Абсолютне позиціонування JavaScript і складна вкладеність шарів значно ускладнюють роботу верстальника, але зате роблять її однією з найбільш високо оплачуваних в Рунеті.

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