Баннер мобильный (1) Пройти тест

Верстка

Глоссарий

27 сентября 2023

Поделиться

Скопировано

Содержание

    Верстка — это описание визуальной части сайта с помощью гипертекстового документа на основе 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 для верстки включают:

    1. Изменение цвета: CSS позволяет задавать цвет текста, фона и других элементов.
    2. Шрифты: Определение шрифтов и их размеров.
    3. Позиционирование: Размещение элементов на странице с помощью свойств, таких как position, float и display.
    4. Отступы и поля: Управление отступами и внутренними полями элементов с помощью margin и padding.
    5. Границы: Определение стиля, цвета и толщины границ элементов.
    6. Анимация и переходы: Создание анимаций и плавных переходов между состояниями элементов.
    7. Медиазапросы: Адаптация стилей к разным устройствам и размерам экранов.
    8. Селекторы: Выбор определенных элементов для применения стилей.
    9. Фон: Установка фоновых изображений и цветов.
    10. Тени и градиенты: Добавление теней и градиентов к элементам.

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

    Макет сайта

    Макет сайта, или веб-макет, представляет собой графическое представление дизайна веб-страницы или всего сайта. Этот графический проект обычно создается в программе для дизайна, такой как 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 (инструментом, позволяющим фиксировать изменения в коде) и пр.

    Используйте популярные плагины в редакторе кода

    Emmet — позволяет использовать сокращения кода вместо ручного ввода целых конструкций.

    AutoFileName — поможет быстро найти файлы в папке проекта прямо при добавлении пути в атрибут src.

    eCSStractor — с помощью него можно выделить участок HTML-кода с написанными классами и вставить в CSS-код готовые селекторы. В результате вам больше не придется писать в CSS селекторы — только нужные свойства.

    Используйте методологию Яндекса БЭМ — блок-элемент-модификатор

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

    Используйте препроцессор — надстройку над привычными языками (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.

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

    Процесс базового тестирования предполагает ручные прогоны сценариев в разных браузерах и на разных устройствах. В этих сервисах можно найти точную информацию: validator.w3.org и jigsaw.w3.org/css-validator. Также нужно проверить верстку на соответствие макету с помощью сервиса welldonecode.com/perfectpixel. Page Ruler поможет измерить в пикселях сверстанные блоки, оценить размеры форм, шапок, логотипов, контактных данных, карточек, рубрик, виджетов и пр.

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

    Поделиться

    Скопировано

    0 комментариев

    Комментарии