Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.

О том, что включает в себя верстка сайта и какие этапы проходит профессиональный верстальщик, поговорим в сегодняшней статье.

Что включает в себя верстка сайта

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

Выделяется два типа разработчиков сайтов:

Backend– занимается разработкой внутренней части сайта, программирует основной функционал;​
Frontend – занимается внешней частью сайта, настраивает отображение всех элементов, добавляет к ним анимацию и так далее.​

Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.

HTML позволяет показывать страницы и контент, размещенный на них, в заданном порядке. Работа с языком разметки заключается в описании тегов. Вот основные из них:

Теги работают следующим образом:



<h1>Привет – это мой первый сайт!</h1>

В таком случае на странице будет отображен заголовок h1 со стандартным шрифтом, размером и начертанием.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F04%2F48c8beca5c5e008be8754b3159340a2058c2c384.png&hash=a2816a4598c0519b6bb9058b73a85ae9

Аналогичным образом прописываются другие теги, в результате чего получается готовый сайт.

Виды верстки

Существует два вида верстки – блочная и табличная.

Первый вид верстки, с которого началась эпоха сайтов. Именно через таблицы создавались простые веб-ресурсы в далеком 2000-м году. При табличной верстке страница поделена на соседствующие ячейки, что напоминает стандартную работу с таблицами в Excel.

Минус такого подхода состоял в том, что приходилось создавать дополнительные таблицы, которые впоследствии могли остаться пустыми. Например, если требовалось разместить изображение и зафиксировать его положение, то необходимо было создать новую строку и разделить ее на несколько столбцов. Только один из них бы содержал изображение, а другие служили бы для него фиксаторами.

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

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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F04%2Fa08905a4d7b2b71d8b443c7bd217851882a0fbe3.png&hash=990b44f51a61bdb721d6a31ff8f3eddc

Самый актуальный вид верстки сайтов – блочный. Он основан на теге <div>, с помощью которого создаются контейнеры, включающие в себя весь контент страницы или отдельного блока. Например, мы можем разделить сайт на несколько блоков: первый экран, о компании, контакты – для каждого блока будет отведен свой тег <div>.

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



<div>



<h1>Привет – это мой первый сайт!</h1>



<p>Сегодня 2021 год и я сделал свой первый сайт...</p>



<img src="C:\Users\ya\Desktop\8ftyrtes-960.jpg" alt="">



</div>

Прописав его в HTML-документе, получим следующую страницу:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F04%2F9fc305b328a44c6b34d4b28acefebba08731d29d.png&hash=2ab2a2c701c4ff4dcb1dcdfca98f1098
При таком подходе язык разметки HTML всегда взаимодействует с CSS-стилями, которые преобразуют обычную страницу в стильное дизайнерское решение: добавляются цвета, устанавливаются отступы для элементов, задается базовая анимация и многое другое.

Например, у нас есть тег h1, и мы хотим сделать его красным – для этого в стилях прописывается следующий код:

h1{
color: red;

Заголовок нашей страницы примет следующий вид:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F04%2F37f196ebf80943a25b111fef8260fa7590367b77.png&hash=630f01d73763d4b4c4beee9bb73c7f66

HTML и CSS обычно хранят в разных файлах – такой подход позволяет быстро вносить изменения и не путаться в больших проектах.

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

Вот так выглядит типичная схема блочной верстки:

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F04%2F1aac96030869fded3db92a102c719e2f1f65f77e.png&hash=fa574cc3d845f5c96d322f1c0d5ca1a6

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

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

При валидной верстке элементы HTML-кода должны находиться строго на своих местах, в начале обязательно прописывается тег <!Doctype html>, а также <html>, <head>, <body>.

Когда верстка считается правильной

Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.
  • Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
  • Весь написанный код должен быть чистым и легко читаемым.
  • Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
  • Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
  • Сайт должен работать одинаково во всех браузерах.
  • Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице. Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
  • Также для поисковиков важно, чтобы были заполнены атрибуты <title>, <alt> и <description>.
  • Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
  • Сайт должен быть адаптирован для мобильных устройств.
Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.

Инструменты для верстки сайта

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

Если говорить об инструментах разработчика, то чаще всего используются:
  • Notepad++ – простой редактор кода;
  • SublimeText – наиболее используемый редактор;
  • Webstorm – самый мощный редактор.
Последняя программа для верстки сайтов платная, однако для обучения можно получить ее студенческую версию даром и с полным функционалом.

Как проверить верстку

После того как сайт будет сверстан, потребуется проверить его работоспособность. Базовое тестирование включает в себя проверку адаптивности на всех устройствах.
Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.W3.
Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.
Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.
Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.