Вёрстка сайта и кто ей занимается
Вёрстка сайта – это перевод дизайна, полученного в виде изображения, в формат, понятный браузеру. Страницы превращаются в код, а браузер его выполняет и выводит на экран. Посетитель видит уже готовый результат, который выглядит в точности, как на картинке, но теперь с элементами можно взаимодействовать.
К свёрстанным страницам подключаются различные скрипты, поэтому начинают работать формы связи, появляется анимация, отзывчивые кнопки и ссылки, и многое другое. Их можно интегрировать в какую-нибудь CMS и получить готовый сайт с богатым функционалом и панелью администратора.
Кто занимается вёрсткой сайтов
Этим занимается человек, которого называют верстальщиком. После получения макета сайта перед ним стоит задача:
- Проанализировать структуру и выделить основные блоки – хедер, футер, отдельные секции, а также похожие части – карточки товаров, записей и прочее.
- Сверстать страницу, используя язык разметки и стили.
- Добавить адаптивность, чтобы страница хорошо выглядела на любых экранах.
- Добавить функционал – подключить скрипты и написать собственные. Основные – срабатывание мобильного меню, настройка слайдеров, валидации форм. Если необходимо, то подключаются библиотеки анимации, создаются скрипты для калькуляторов или других интерактивных элементов.
- Свёрстанная страница обязательно проверяется на валидность кода – соответствие требованиям и стандартам.
- Выполняется проверка работоспособности в разных браузерах, на разных устройствах. Если что-то плохо работает или нарушается внешний вид, верстальщик исправляет ошибки и проверяет снова.
Всё это выполняется для каждой страницы сайта, которые есть в макете. Ведь кроме главной обычно имеется и ещё несколько – с информацией о компании, страница товара, с контактами, и прочие. Дизайн у них может отличаться.
Какие языки используются для вёрстки
Разработка сайтов требует от верстальщика знания самых разных вещей, и в первую очередь это языки.
Самый главный – HTML. Это не язык программирования, а язык разметки. Именно с его помощью создаётся структура страницы и размечаются всё её элементы. Например, простой абзац текста в коде страницы будет описан так:
<p>Текст абзаца</p>
А кнопка будет обозначена так:
<button>Надпись на кнопке</button>
В угловых скобках – теги HTML, с помощью которых браузер определит тип элемента и сможет его правильно вывести на экран. Тегами размечаются все блоки, которые имеются на странице, и все отдельные их части – заголовки, абзацы, ссылки, кнопки, картинки, иконки, поля ввода, списки, и другие.
Следующий совершенно необходимый язык для вёрстки – язык стилей CSS. Он неотделим от HTML и позволяет задать внешний вид каждому элементу. Его размеры, цвет, отступы внутренние и наружные, задать поведение при наведении курсора или при клике, назначить фоновое изображение, добавить анимацию.
HTML в комбинации с CSS – основа любой страницы в Интернете. Но, чтобы добавить некоторый функционал или реализовать креативную идею, используется язык программирования – JavaScript. Он делает страницы сайта интерактивными, то есть даёт возможность пользователю взаимодействовать с элементами. Например, при клике на миниатюре изображения оно появится в полном размере во всплывающем окне. На нём пишутся калькуляторы для всевозможных расчётов, конвертеры, слайдеры, галереи. Также JavaScript применяется для валидации полей формы до отправки данных на сервер. Если поле не заполнено или заполнено неверно, то сразу выведется соответствующее сообщение.
Вот эти три языка – HTML, CSS и JavaScript, являются основными для работы верстальщика. Конечно, современные технологии на этом не останавливаются и уже создано множество дополнительных библиотек и фреймворков, которые можно использовать в разработке – это, например, Bootstrap, React, Angular и многие другие.
Какие бывают типы вёрстки
На самом деле вёрстка – творческий процесс. Существует много способов, которые позволяют решить одну и ту же задачу по-разному. И сверстать страницу сайта тоже можно по-разному. Самые распространённые методы:
- Табличная вёрстка – когда вся страница представляется в виде таблицы, а в её ячейках располагаются части контента. Этот способ уже устарел и не используется, так как вызывает большие сложности с реализацией адаптивности, и дизайн нарушается при малейшем изменении на странице. Хотя лет 10 назад табличная вёрстка была очень популярна, с тех пор появились более удобные технологии. А широкое распространение смартфонов заставило отказаться от такой практики.
- Блочная вёрстка – когда все элементы группируются в логические блоки, ограниченные тегами div или некоторыми другими. Эти блоки можно как угодно выравнивать или позиционировать на странице. Они могут даже накладываться друг на друга, что позволяет создавать интересный дизайн.
- Адаптивная вёрстка – по сути, развитие блочной вёрстки, так как здесь просто предусматривается поведение блоков на разных экранах. С помощью особых правил – медиазапросов, верстальщик прописывает, как должен выглядеть блок или элемент на экране с разной шириной. Например, на мониторе компьютера слайдер должен показывать 3 слайда в ряд и стрелки по бокам, а на мобильном экране этот же слайдер должен показывать 1 слайд и без стрелок. Медиазапросы срабатывают на определённых разрешениях экрана. Поэтому адаптивная страница может выглядеть по-разному на разных устройствах.
Сейчас широко применяется как раз блочная адаптивная вёрстка. Конечно, и её можно выполнить по-разному, но здесь уже всё зависит от дизайна, опыта и предпочтений самого верстальщика, а также инструментов, которые он будет использовать.