10 августа 2019
9 мин на чтение
14

Верстка сайта: инструкция для начинающих

author__photo
Денис Гордовский
Маркетолог-аналитик
Нет времени читать?



Что такое вёрстка веб-страниц

Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.

Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.

В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.

В контексте создания сайтов есть два вида разработки:

  • Back-end — программирование функционала сайта;
  • Front-end — программирование внешнего отображения и интерактивных элементов сайта.

Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.

Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать.

К вёрстке предъявляются особые требования и она бывает нескольких видов.

Виды вёрстки

Что такое вёрстка

Выделяют два наиболее распространённых вида:

  • Табличная вёрстка;
  • Блочная вёрстка.

Табличная вёрстка

С неё начинался веб — первые простейшие страницы на одном только HTML в содержали набор таблиц, внутри которых располагался контент.

При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel.

Побочный эффект использования такого подхода состоит в том, что придётся создавать дополнительные таблицы, которые, возможно, останутся пустыми.

Например, когда необходимо разместить небольшое изображение и зафиксировать его положение, потребуется создать новую строку и разделить её на два или три столбца, если изображение располагается посреди страницы. Один из них будет содержать изображение, а другие служить «фиксаторами» для него, при этом не имея собственного контента.

Есть и положительный момент: табличная вёрстка хорошо подходит для резиновой вёрстки, так как при растягивании окна бразуера таблица меняется вместе с ним и автоматически подгоняет положение внутренних элементов.

Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.

Табличная вёрстка

Блочная вёрстка

Более современный тип вёрстки — блочный.

В нём нет необходимости создавать лишние поддерживающие строки или столбцы. Контейнеры с содержимым задаются единственным тегом <div>, точные параметры размеров и расположения которых определяются сразу.

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

<div> обеспечивает адаптивный дизайн — это ценится в современных стандартах разработки и юзабилити.

Блочная вёрстка

Валидная вёрстка

Валидность вёрстки — широкое понятие, означающее соответствие кода стандарту W3C и корректное отображение сайта на пользовательских устройствах.

Валидность обеспечивается соблюдением правил построения кода, его оптимизации, минимизации.

Верстальщик должен быть знаком с методологией разработки, чтобы потом не приходилось за ним переделывать.

Валидная вёрстка помогает сайту занять более высокие позиции SERM благодаря соответствия алгоритмам чтения сайтов поисковыми роботами.

Как минимум, в HTML-коде элементы должны содержаться в соответствующих разделах.

Должен быть прописан <!Doctype html>, теги:

  • <html>;
  • <head>;
  • <body>

Признаки правильной вёрстки

  • Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.
  • У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.
  • Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.
  • Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.
  • Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.
  • Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.
  • Используйте заголовки H1, H2, …, H6.
  • Заполняйте атрибуты элементов: <title>, <alt>, <description>.
  • Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.

Инструменты верстальщика

Чаще верстальщик работает только с кодом. Хотя многие советуют верстальщику освоить графические редакторы — Photoshop и другие, это не принципиально. В качественных проектах графика изготавливается дизайнерами и передаётся в готовом для интеграции виде верстальщикам, которым остаётся её разместить в нужных местах.

То же касается и прототипов. Хорошо, когда верстальщик может сам покрутить схему в инструменте прототипирования и заглянуть внутрь графики через Photoshop, но серьёзные студии строго разделяют обязанности сотрудников.

Наиболее релевантное ПО для верстальщика — редакторы кода, такие как:

  • Notepad++ (наименее предпочтительный вариант, хотя и временами использующийся).
  • SublimeText.
  • Webstorm — пожалуй, лучший из существующих.

Проверка вёрстки

Базовое тестирование включает в себя ручные прогоны сценариев в нескольких браузерах и устройствах.

Боле фундаментальную информацию дают сервисы jigsaw.w3.org/css-validator и validator.w3.org.

caltouch-platform

Сквозная аналитика

 от 990 рублей в месяц
  • Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
  • Анализируйте воронку продаж от показов до ROI
  • Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
  • Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
  • Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
Оцените
Верстка сайта: инструкция для начинающих
5 (100%) 1 vote
Поделитесь с друзьями
Подпишитесь на обновления
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных.
Пришлите свою статью

Комментарии:

Рекомендуем прочитать
Callday 2019
Главная конференция о бизнесе, сквозной аналитике и эффективном маркетинге
Записаться
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.