Етапи та типи верстки сайту

21

Від автора: у вас є макет сайту і вам потрібно спланувати подальшу роботу. На які етапи поділяється верстка сайту? Спробуємо відповісти на це питання в сьогоднішній статті. Вона орієнтована на новачків.

Робота головою

Чому робота головою? Перш ніж приступити до верстки, потрібно проаналізувати наявний макет. Наприклад, можна намалювати на листку зошити його структуру, відразу продумати, з допомогою яких властивостей можна зробити таку сітку, яка представлена дизайнером. По-простому етапи верстки сайту можна розділити на три частини.

Це перший етап. Етап осмислення. Ви повинні зрозуміти, як взагалі підійти до верстки конкретного макета. У своїх думках ви вже формуєте дії, які будете виконувати далі.

Робота з макетом

Значить, подивилися на макет, осмислили суть. Тепер потрібно вирізати з нього все необхідне, що може знадобитися: іконки, картинки та іншу графіком. Непогано буде також записати шрифти, які використовуються в макеті. Для роботи потрібно використовувати PhotoShop або GIMP. Саме ці редактори підтримують роботу з шарами.

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

Етапи та типи верстки сайту

Рис. 1. Робота з макетом.

Верстка

Для початку вам потрібно створити два файли: html і css. В одному у вас буде зміст і розмітка, в іншому – стилі. Очевидно, що верстати буде легше, якщо дотримуватися порядку. Наприклад, почати з прописування базових речей у тегу head. Тут слід вказати кодування, шлях до таблиці стилів, title і т. д.

Далі починається робота з безпосереднім вмістом. Це все, що буде знаходиться в тегу . Починати потрібно з верхнього лівого кута, рухаючись в правий нижній. Тобто, спочатку ви описуєте шапку сайту (її ліву частину, а потім праву), потім нижче описуєте наступну структурну частину і таким чином поступово переносите макет в код.

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

Спочатку верстальник пише структуру в html. Заодно він відразу вішає елементів класи і ідентифікатори, щоб пізніше стилізувати їх в css. Нормальний верстальник повинен придумувати адекватні імена класів. Наприклад, menu, head, widget і т. п. Щоб було зрозуміло, що це за елемент.

Наприклад, коли я тільки починав, мій код напевно міг розсмішити будь-якого. У ньому присутні такі імена класів, як: verh_sayta, konec і bok. Звичайно, це краще, ніж block1, block3, block459, але виглядає якось непрофесійно і не зовсім зрозуміло, про який саме елемент мова.

Стилізація

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

Подальший процес верстки сайту в основному буде відбуватися за допомогою css-файлу, в якому ви прописуєте потрібні властивості і правила. Скільки це може зайняти часу? Залежить від вашого професіоналізму. Я бачив людей, які за годину верстали пристойний одностраничник. При цьому він був адаптивним і мав анімаційні ефекти. Професіонал може зверстати просту сторінку хвилин за 20.

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

Стилізація теж повинна виконуватися по порядку. Спочатку потрібно прописати якісь загальні правила. Наприклад, загальний фон сторінки, базовий шрифт. Не забувайте скидати відступи.

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

Наприклад, ви вирішили написати стилі для шапки. Так пишіть їх до кінця, не перемикайтеся на інші елементи! В кінці css-файлу зазвичай прописують медіа-запити (для адаптивності, якщо вона потрібна). Також тут можуть підключатися шрифти і описуватися різні ефекти, які потім можна застосувати до блокам через завдання стильового класу.

Скрипти

Верстальник повинен вміти працювати з JavaScript-бібліотеками. З їх допомогою задається різна поведінка для веб-сторінок. Приклад: адаптивне меню. При зменшенні вікна, припустимо, до 500 пікселів, меню повинно згорнутися в одну кнопку. При кліці на неї повинен розкриватися вертикальний список (наприклад). Все це реалізується за допомогою JavaScript.

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

Перевірка

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

Етапи та типи верстки сайту

Рис. 2. Перевірка верстки в валидаторе від W3C.

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