Верстка
Верстка — это описание визуальной части сайта с помощью гипертекстового документа на основе HTML-разметки. Простыми словами, соединение и расположение на странице документа разных элементов веб-сайта: текстовых блоков, изображений, таблиц, видео и т.д.
Верстка сайта — один из наиболее важных этапов создания интернет-ресурса. От нее зависит:
скорость загрузки сайта;
корректность его отображения в браузере;
соответствие стандартам HTML и требованиям поисковых систем;
адаптивность под разные устройства пользователей (планшет, смартфон, ноутбук).
Верстка относится к сфере frontend-разработки. Она помогает правильно расположить элементы на странице и сделать так, чтобы работать с ними было максимально удобно.
Основные понятия в верстке
HTML
HTML — язык разметки, при помощи которого браузеры показывают нам размер, порядок, шрифт и форму текста. Популярные HTML-теги в верстке страниц:
<body> </body> — все web-содержимое страницы;
<table> </table> — таблица;
<h1> </h1> — заголовок;
<h2> </h2> — заголовок второго уровня;
<img> — изображение;
<strong> </strong> — жирный шрифт;
<a> </a> — ссылка на сторонний сайт; между тегами необходимо поставить атрибут href, содержащий адрес этой ссылки;
<div> </div> — контейнер.
CSS
CSS (Cascading Style Sheets) — это язык для стилизации веб-страниц. Он определяет внешний вид элементов на веб-сайте. Наиболее популярные операции CSS для верстки включают:
Изменение цвета: CSS позволяет задавать цвет текста, фона и других элементов.
Шрифты: Определение шрифтов и их размеров.
Позиционирование: Размещение элементов на странице с помощью свойств, таких как
position,floatиdisplay.Отступы и поля: Управление отступами и внутренними полями элементов с помощью
marginиpadding.Границы: Определение стиля, цвета и толщины границ элементов.
Анимация и переходы: Создание анимаций и плавных переходов между состояниями элементов.
Медиазапросы: Адаптация стилей к разным устройствам и размерам экранов.
Селекторы: Выбор определенных элементов для применения стилей.
Фон: Установка фоновых изображений и цветов.
Тени и градиенты: Добавление теней и градиентов к элементам.
Эти операции позволяют при верстке и веб-разработке создавать привлекательные и функциональные веб-сайты, а также обеспечивать их согласованный внешний вид на разных устройствах.
Макет сайта
Макет сайта, или веб-макет, представляет собой графическое представление дизайна веб-страницы или всего сайта. Этот графический проект обычно создается в программе для дизайна, такой как Adobe Photoshop, Sketch или Figma, и служит как визуальный план, который определяет структуру и внешний вид веб-страницы до её фактической разработки.
Макет сайта включает в себя элементы дизайна, такие как расположение текста, изображений, кнопок, цветовую палитру, шрифты, отступы, границы и другие стилевые аспекты. Он также учитывает пользовательский интерфейс и навигацию, определяя, каким образом пользователь будет взаимодействовать с веб-страницей.
Виды верстки
Блочная верстка
Тег <div> — блочный элемент и обычно используется для группировки крупных элементов. Верстальщик создает в интегрированной среде разработки IDE макет сайта: готовит фоны и изображения, размечает, где какая область (верх, низ, основной контент, боковые панели) будет находиться. Каждая часть страницы размещается в соответствующем блоке <div>.
Все стилевые решения вынесены за границы HTML-кода в каскадные таблицы стилей (CSS). С ними можно менять цвет, размеры, расположение, границы и другие свойства блоков <div>. В HTML-документе это прописывается так: <div class=”one”></div>, фоновый цвет задается следующим образом: background: red. В итоге получается красный блок. А если нужно ограничить его размер 250 пикселями, то необходимо прописать: width: 250px и height: 250px.
Валидная верстки
В программировании валидность означает соответствие кода стандарту W3C (Консорциума Всемирной паутины) и корректное отображение веб-сайта на разных устройствах. Этот показатель обеспечивается соблюдением правил построения кода, его оптимизации и минимизации. Благодаря такой верстке сайт может занять более высокие позиции в поисковой выдаче.
Чтобы верстка была валидной, нужно как минимум, чтобы элементы HTML-кода содержались в соответствующих разделах. Должен быть прописан элемент !DOCTYPE html, теги <body>, <html>, <head>.
Адаптивная верстка
Адаптивная верстка — это подход к созданию веб-страниц, при котором одно и то же содержимое адаптируется под различные устройства (например, компьютеры, планшеты, смартфоны) и разрешения экрана без необходимости создавать отдельные версии сайта для каждого устройства.
При адаптивной верстке используются CSS медиа-запросы, которые позволяют задавать разное отображение и поведение элементов страницы в зависимости от ширины экрана устройства, на котором она открыта. Таким образом, веб-страница автоматически подстраивается под размер экрана и разрешение устройства, обеспечивая оптимальное отображение содержимого. Это особенно важно для мобильных устройств, где адаптивная верстка позволяет избежать горизонтальной прокрутки и неудобного мелкого текста.
В целом, адаптивная верстка делает веб-сайты более удобными и приятными для пользователей, улучшая их пользовательский опыт и положительно влияя на SEO-показатели сайта.
Несколько полезных советов для быстрой верстки
Анализируйте макет до начала работы
После получения макета представьте будущую страницу в виде HTML-разметки, а после приступайте к написанию кода. Это поможет избежать неправильной вложенности тегов и некоторых других ошибок.
Научитесь быстро печатать
Метод слепой печати поможет научиться быстро набирать код, не отвлекаясь от макета и внешнего вида веб-сайта в браузере.
Выберите и настройте среду разработки
Писать HTML-код можно в любом редакторе кода, даже в «Блокноте», но это долго и неэффективно. Верстальщик может установить IDE (интегрированную единую среду разработки, которая используется разработчиками для создания проекта). От «Блокнота» она отличается массой возможностей: наличием встроенного проводника, подсветкой синтаксиса, управлением форматированием кода, возможностью работы с Git (инструментом, позволяющим фиксировать изменения в коде) и пр.
Используйте популярные плагины в редакторе кода
Используйте методологию Яндекса БЭМ — блок-элемент-модификатор
С помощью нее можно создавать расширяемые и повторно используемые компоненты интерфейса. В результате вам больше не потребуется тратить время на придумывание названий классов или того, как элементы будут зависеть друг от друга.
Используйте препроцессор — надстройку над привычными языками (CSS и пр.)
Препроцессор Sass помогает в организации кода, избавляет от написания селектора каждый раз с новой строки, позволяет сократить код и вынести одинаковые реализации.
Используйте сборщики проекта
Они выполнят то, что разработчику не хочется делать руками и что отнимает много времени. Например, Gulp позволяет:
автоматически обновлять страницу браузера при сохранении кода;
расставлять префиксы для поддержки разных браузеров;
автоматически собирать все файлы в один;
создавать SVG-спрайты.
Признаки правильной верстки
Структура страницы составлена в HTML, параметры стилей присвоены в отдельном CSS.
Использовано небольшое количество изображений. Все по максимуму прописано текстом или кодом.
Верстка корректно отображается при разных разрешениях во всех популярных браузерах: Chrome, Opera, Firefox, Safari.
Атрибуты элементов <title>, <alt>, <description> корректно заполнены.
Использованы заголовки разных уровней (h1, h2, …, h6).
Инструменты верстальщика
Программы для тестирования: Markup Validator, CrossBrowserTesting, IETester, Dr Watson, Validator.w3, CSS Validator.
Программы для работы с изображениями:Photoshop, Krita, Gimp и пр.
Редакторы кода: VS Code, Webstorm, Notepad++, SublimeText, Webstorm, CSS3 Generator, UltraEdit, Firebug, Winless, CoffeeCup HTML Editor, WinMerge.
Проверка верстки
Last updated
