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

Что это такое? Верстка сайта – важный этап в разработке ресурса. Он заключается в переводе макета на «рельсы» браузера с помощью кода. Если верстка пройдет гладко, то сайт будет отображаться как надо в Google или Яндексе. Но если верстальщик ошибется, не ждите много посетителей.

Как сделать? Не будем юлить и сразу скажем, что сверстать с нуля даже страницу у вас вряд ли получится с первого раза. Даже опытные мастера нет-нет да допускают ошибки, что уж говорить про новичков. Верстке учатся месяцами, периодически обновляя и дополняя свои знания. Хорошая новость в том, что не бывает ничего невозможного.

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

Все современные веб-сайты разрабатываются специалистами двух направлений:

1. Бэкенд — разработка внутренней (серверной) функциональной части сайта;
2. Фронтенд — разработка пользовательского интерфейса (видимой части) сайта.

Фронтенд-специалисты — это верстальщики и разработчики. Первые в своей работе используют связку HTML и CSS, вторые непосредственно программируют сайт на языке JavaScript.

Основным форматом деятельности верстальщиков является верстка сайта по макету. Грубо говоря, дизайн-макеты переводятся на понятный браузеру язык с помощью кода HTML+CSS. Таким образом, верстальщик реализует задуманные дизайнером идеи путем превращения изображений в полноценный веб-сайт. Специалисты пользуются следующими средствами:

• HTML — язык разметки, определяющий структуру и содержимое сайта, задающий местоположение каждого элемента;
• CSS — язык описания внешнего представления элементов, задающий конкретные значения размера, цвета и формы;
• JavaScript — язык, определяющий поведение объектов при взаимодействии пользователя с ними.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 32470

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

Важность верстки при разработке сайта

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

Дело здесь не только в эстетической привлекательности, но также в удобстве, информативности и читаемости. Даже верстка простого сайта, не говоря уже о разработке крупного интернет-портала, должна обеспечивать все эти качества. Например, расположенные радом текстовые блоки могут наложиться друг на друга, или картинка «съехала» и закрыла собой часть важной информации. Подобные недочеты значительно снижают пользу ресурса.

Грамотно сверстанный веб-сайт доступен для поисковых роботов. Будет ли проиндексирован весь контент, зависит от правильности верстки сайта. Что это дает в итоге? Роботу, например, становится известно, где расположен основной контент, а что является лишь вспомогательным элементом. Также создается четкая структура страниц.

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

Основные виды верстки сайта

В настоящий момент широко используются пять видов верстки.

Адаптивная

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

В процессе адаптивной верстки сайта HTML код пишется под несколько вариантов разрешений экрана. Как минимум, страницы адаптируют под ПК, ноутбуки, планшеты и смартфоны. Используемые при этом брейк-поинты (точки слома) сообщают браузеру места кода, где сайт необходимо трансформировать для обеспечения максимальной читаемости.

Мобильная

Сайт создается на выделенном поддомене и адаптируется только под мобильные устройства. Соответственно, ресурс станет удобен для чтения лишь пользователям смартфонов и планшетов. Мобильная верстка сайта по сравнению с адаптивной менее затратна. Выбирать этот вариант целесообразно, когда использование ресурса с компьютера или ноутбука изначально не предусматривается.

Фиксированная

В данном случае макет разрабатывается с фиксированными параметрами (например, с точным указанием размеров в пикселях). Такой подход устарел и применяется редко.

Отзывчивая (Responsive)

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

Резиновая

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

Суть валидной верстки

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

Как учебный проект верстки сайта, так и реальная разработка могут быть валидными. Стандарт W3C требует размещать элементы HTML строго в определенных местах. Начало кода предваряется тегом <!Doctype html>, также обязательно присутствуют блоки <html>, <head>, <body>.

Техники верстки

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

Табличный метод

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

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

Однако табличная верстка сайта обладает многими недостатками, из-за чего ее применение в дальнейшем становится нецелесообразным.

• Проблемы с загрузкой сайта при плохом соединении

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

• Тяжелый код

Размещение картинок посередине страницы при табличном методе требует предварительного создания таблицы из трех колонок. Далее в средний столбец загружается изображение, а крайние оставляются пустыми в качестве ограничителей (фиксаторов) положения картинки. Таким образом в процессе верстки возможно придется создавать десятки таких таблиц. Этот метод существенно утяжеляет код, да и сама верстка сайта для новичков усложняется.

• Вероятные проблемы с индексацией

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

• Превалирование HTML-кода над отображаемым контентом

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

Послойный метод

Реализуется использованием в коде тега <layer>. Верстка слоями обладает важными преимуществами перед табличным методом — возможностью накладывания элементов друг на друга и наличием функции подгрузки контента из файла.

Блочный метод

Будучи модификацией послойного метода, верстка блоками в настоящее время является единственно валидной. Аналогом слоев здесь служат блоки (контейнеры) прямоугольной формы. Прямоугольник как фигура привлекателен тем, что его можно делить на такие же фигуры меньших размеров бесконечное число раз. Это свойство позволило значительно повысить гибкость верстки.

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

• Размещение всего кода в одном блоке
• Использование отдельных пар тегов <div> для каждого смыслового блока (обложка, информация о компании, преимущества продукта и т. д.)
• Разделение элементов дизайна одного смыслового блока по разным контейнерам

Итак, блочный метод предоставляет верстальщику чрезвычайно гибкие возможности. А внедрение стилей CSS превращает эти возможности в безграничные.

Перечислим основные достоинства блочной верстки сайта.

• Сравнительно легкий код

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

• Понятность и читаемость кода

• Возможность реализовывать дизайн любой сложности
• Превосходная считываемость кода поисковыми роботами

С точки зрения SEO это идеальный метод. Роботы сразу распознают семантическую структуру сайта и поэтому достаточно быстро его индексируют.

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

Дарим скидку от 60%
на обучение «Веб-разработчик» до 22 декабря

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

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

Фреймовый метод

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

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

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

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

• Графические инструменты. Позволяют видеть промежуточный результат в процессе работы. В данной категории большой популярностью пользуются такие программы, как Adobe Photoshop, Gimp, Krita и т. п. Верстальщики здесь могут всесторонне изучать дизайн-макет для планирования своих дальнейших действий.
• Редакторы кода. Это основной инструментарий для верстки сайта. Работа верстальщика может осуществляться во множестве профессиональных редакторов, среди которых Notepad++, Adobe Dreamweaver, CSS3 Generator, SublimeText, Firebug, WinMerge, VSCode, JetBrains WebStorm. Отдельно стоит отметить VSCode. Этот бесплатно распространяемый редактор обладает наиболее широким функционалом из всех благодаря наличию всевозможных плагинов. В качестве платной альтернативы можно рассмотреть JetBrain WebStorm. Редактор предлагает глубокую интеграцию с другими инструментами разработки. Из дополнительных опций имеются автодополнение кода и автоформатирование.
• Гибридные инструменты. Представляют собой блочные конструкторы, предлагающие возможность ручной верстки сайта. Дизайн и код в таких мощных программах, как Adobe Dreamweaver, могут создаваться совместно либо по отдельности.

Пошаговая верстка сайта для начинающих с нуля

Ниже покажем пошагово, как сверстать простой сайт с самого начала.

Шаг 1. Выбор готового шаблона

Во-первых, следует отыскать перед версткой сайта шаблон в формате Adobe Photoshop. Саму программу, соответственно, нужно приобрести или скачать.

Только до 26.12

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Шаг 2. Создание файлов и папок страницы

Этот этап также можно считать подготовительным. Прежде всего нужно выбрать подходящий хостинг для размещения файлов будущего сайта и распределения их по папкам. Хостинг-провайдеры обычно предоставляют свои услуги платно, но есть и бесплатная альтернатива — установка сервера WAMP. Правда, это потребует затрат времени на тонкую настройку.

Корневая папка www должна содержать файл index.html с кодом основной страницы, а также папки css и images. При отсутствии этих элементов их нужно создать. Далее в css и images загружаются соответственно стили (как минимум, файл styles.css) и изображения.

Шаг 3. Создание структуры страницы

Примерная отрисовка основных блоков и определение их содержимого — первое, с чего начинается, собственно, верстка сайта с нуля. HTML и CSS затем используются для описания намеченной структуры.

<!DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″ />

<title>Название сайта</title>

</head>

<body>

<div id=»wrapper»>

<div id=»header»></div>

<div id=»sidebar»></div>

<div id=»content»></div>

<div id=»footer»></div>

</div>

</body>

</html>

Итак, в формате блочной верстки сайта код содержит общий див, внутри которого создаются функциональные блоки с собственными id для более удобного обращения к ним средствами CSS.

Шаг 4. Нарезка отдельных изображений из макета

Работа выполняется в Adobe Photoshop. Сложные картинки, не являющиеся одноцветными прямоугольниками, вырезаются из макета и сохраняются в отдельных JPG-файлах. Их затем следует загрузить на хостинг в папку images.

Шаг 5. Компоновка всех элементов

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

Шаг 6. Тестирование

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

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

По завершении создания сайта верстка нуждается в тестировании на различных устройствах.

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

Критерии правильной верстки сайта

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

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

Например, верстается интернет-магазин. Изначально запланировано отображение на главной странице пяти товарных карточек. А что случится с разметкой при попытке добавить шестую, если возникнет такая необходимость? Этот момент следует заранее обсудить с дизайнером. Одно из адекватных решений в данном случае будет заключаться в переносе новой карточки на другую строку.

Доступность

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

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

• Contrast (для определения доступности цветового контраста каждого элемента в макете).
• Adee Comprehensive Accessibility Tool (для проверки цветового контраста и последующего моделирования предполагаемого отображения дизайна для людей с разными формами дальтонизма).
• HCL Easy (для быстрого подбора цветовой гаммы в соответствии с заданными требованиями контрастности и разными особенностями цветовосприятия людей).
• Low Vision (для тестирования пользовательского интерфейса на предмет восприятия людьми с различными типами нарушения зрения).

Зачастую на разрабатываемом сайте в полях ввода предполагается подкрашивание текста зеленым или красным в зависимости от правильности ввода данных. Однако, например, дальтоники воспринимают цвета по-другому. Поэтому с целью обеспечения доступности требуется дополнительно показывать правильность ввода значками (обычно галочкой и крестиком).

Отзывчивость

Отзывчивый веб-сайт быстро реагирует на изменение размера окна или экрана, а также на изменение настроек пользователем. Верстка готового сайта должна предусматривать вероятные изменения.

Интерактивность

Этот критерий определяет, насколько хорошо элементы сайта реагируют на действия пользователя (например, клик или наведение курсора мыши). Интерактивные элементы, равно как и их окружение, при этом не должны менять своего положения, если это изначально не требуется проектом.

Кроссбраузерность

Кроссбраузерная верстка фактически аналогична обычной верстке по макету. Проверяются правильность расположения шрифтов, совпадение расстояний между строками и текстовыми символами, идентичность размеров иконок и т. п. Такую проверку можно проводить, используя Pixel Perfect и WellDoneCode, которые реализованы в виде плагинов для браузеров:

• Pixel Perfect для Firefox;
• Pixel Perfect для Google Chrome;
• Кроссбраузерный WellDoneCode.

С помощью данных расширений можно накладывать дизайн-макет прямо поверх сверстанной страницы. Различия будут видны сразу.

Отсутствие переполнения

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

Читайте также!

Книги по Golang, с которыми обязательно стоит ознакомиться

Подробнее

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

Распространенные ошибки верстки сайта

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

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

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

1. Не следует повсеместно использовать теги <div>. Для URL-ссылок, списков, картинок и параграфов в HTML предусмотрены отдельные теги. Строки же определяются в стилях как блочные элементы.
2. Значения классов и ID должны быть корректными. Если в HTML-коде и в файле стилей они не совпадают, браузер не сможет правильно интерпретировать директивы HTML. Поэтому в процессе верстки важно проверять все уникальные ID, особенно у контейнеров с одними и теми же свойствами.
3. Следует своевременно проверять код на наличие опечаток, лишних и недостающих символов. Такие ошибки вполне могут допускать даже опытные разработчики, поэтому проверка необходима во время любой верстки сайта. Программы, специально созданные для автоматизации этого процесса, подсвечивают найденные в коде опечатки, чем значительно облегчают работу верстальщика. В современных редакторах также присутствует подсветка синтаксиса, облегчающая восприятие текста.
4. Единицы измерения размера для типографики и блоков должны быть идентичными. Чаще всего размер и расстояния измеряются в пикселях (px). Важно постоянно проверять, что в HTML и CSS используются одни и те же единицы. Особое внимание нужно уделять относительным единицам (em), характерным для адаптивной верстки.
5. Файлы нужно именовать корректно, не допуская кириллических и специальных символов, а также пустых пробелов в названиях. Если, например, название файла изображения состоит из нескольких слов, их следует разделять дефисами, а не пробелами.
6. Следует проявлять осторожность, меняя структуру контейнеров в процессе блочной верстки. И хотя данный метод основывается на простом принципе «меньшее внутри большего», иерархия блоков может получиться достаточно сложной. Во избежание ошибок рекомендуется пользоваться валидаторами. Они предостерегают верстальщика в случае размещения большого блока внутри малого, маркируя соответствующие строки кода. Увеличение сложности блочной структуры повышает вероятность допущения ошибок, поэтому валидаторами пренебрегать не нужно.

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование