Верстка — одна з важливих частин роботи при створенні сайту, від якої залежить, наскільки красиво ваш програмний код перетвориться в інтерфейс і дизайн сторінки. Зазвичай її виконують професійні програмісти на чистому HTML і CSS, адаптуючи візуальні елементи під потреби і завдання ресурсу, але можна скористатися готовими фреймворками і CMS, що заощадить час і гроші. Ось як діє кваліфікована команда розробників, готові роботи якої можна побачити на сайті агентства Artweb: спочатку створюється найпростіша структура файлів з назвою порталу, саме її потім закачують на сервер.
У головній папці потрібні підрозділи, кожен з яких містить окрему частину коду: HTML-каркас, CSS-стилі і в останній директорії лежать картинки, що завантажуються при «прочитанні» браузером. Потім беремо макет в форматі PSD і відкриваємо його в графічному редакторі Photoshop: він повинен виглядати у вигляді готової сторінки з усім елементами і блоками, зручне розташування яких придумав і намалював дизайнер. Далі загальне зображення нарізається на прості одноколірні шматки, які найпростіше «написати» за допомогою розмітки HTML і оформити стилями CSS. Логотипів, іконка і простим картинкам призначають імена і складають їх у певні файли, обов’язково зберігаючи в форматі JPG, тоді як фотографії — в PNG.
Щоб визначити колір і розмір шрифтів в спеціальній кодуванні, яка допоможе перенести властивості і стилі елементів в програмний код, досить натиснути на перегляд параметрів зображення в редакторі Photoshop. Далі починають створювати «каркас» сайту, вписуючи в HTML-файл відомі кожному розробнику декларативні конструкції з тегів head, title, body і ін. На готової сторінці не забувайте вказати кодування UTF-8, а також підключити стилі CSS. Зараз програмісти верстають сайти на HTML-5, тому багато компонентів створюються за новою методикою: наприклад, header — «шапка» вашого ресурсу, footer — «підвал», content — середина з вмістом і контентом, а sidebar — смуга прокрутки з новинами або оновленнями на інтернет-майданчику. Всі елементи сторінки вирівнюються відносно один одного і шикуються в колонки за допомогою вказівки розмірів в CSS-стилях. Основні частини сайту — header і footer — не «монолітні» блоки, тому можуть розбиватися на окремі області за допомогою тегів div для зручного розміщення інформації. Кнопки соціальних мереж, стрічка «Твіттер» та інші інтерактивні елементи реалізуються функціями з Javascript.
