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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Підведемо підсумки

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі