Медиаблог /

Все, что надо знать о верстке начинающему разработчику

27 марта 2023

Все, что надо знать о верстке начинающему разработчику

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

верстка на ноутбуке

Получите востребованную профессию бесплатно. Обучение от 1 до 4 месяцев

Принять участие

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

 

Как верстать сайты, в чем разница между видами верстки, как пишется код для создания сайтов — рассказываем в статье.

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

Что такое верстка
Источник: unsplash.com

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

HTML — язык разметки, при помощи которого блоки сайта находятся на своих местах.

Важные HTML-теги для работы верстальщика:

<body> </body> — все содержимое страницы

<table> </table> — таблица

<h1> </h1> — заголовок

<h2> </h2> — заголовок второго уровня

<img> — изображение

<strong> </strong> — жирный шрифт

Виды верстки

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

  • Фиксированная;
  • Резиновая;
  • Адаптивная.

Фиксированная — вид дизайна, при котором размеры указываются точно в пикселях (px) и не меняются в зависимости от экрана устройства.

#block1, #block2 { width: 900px; }

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

✅ Плюсы

Просто и быстро реализовать.

❌ Минусы

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

гиф под верстку
Источник: статья Марии Гопкало «История одного макета: способы сделать сайт послушным» блога компании АО «ГНИВЦ» на Хабр

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

#block1, #block2 { width: 100%; }

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

Плюсы

Адаптирует шаблон сайта под разрешение любого экрана.

❌ Минусы

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

гиф под верстку 2
Источник: статья Марии Гопкало «История одного макета: способы сделать сайт послушным» блога компании АО «ГНИВЦ» на Хабр

Адаптивный тип подстраивает размер страницы под разрешение экрана устройства, на котором открыт сайт.

При таком виде дизайна заранее задаются фиксированные макеты, подходящие под различные экраны. Размеры страницы меняются в зависимости от того, на каком экране открывается сайт. Для реализации такого вида верстки под каждый размер создаются отдельные стили CSS и правила медиа-запросов @media.

Плюсы

Можно комбинировать с резиновой и настроить сайт для любого вида экранов.

Минусы

Сложно просчитать все варианты отображения страницы на разных устройствах.

гиф под верстку 3
Источник: статья Марии Гопкало «История одного макета: способы сделать сайт послушным» блога компании АО «ГНИВЦ» на Хабр

Принципы создания верстки

Принципы создания верстки
Источник: unsplash.com

В программировании существует табличный и блочный принцип.

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

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

Какой метод использовать

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

Сделать это можно, комбинируя разные методы, например, резиновый и адаптивный вид.

Главный совет: ориентируйтесь на то «зачем» и «для кого» вы делаете сайт.

Стать квалифицированным специалистом реально за два месяца на бесплатном курсе «Web-программист: с нуля до первых проектов». Обучение проходит в рамках федерального проекта «Содействие занятости».

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

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

После окончания программы вы получите документ установленного образца и возможность пройти оплачиваемую стажировку в компаниях-партнерах проекта. Сейчас «Содействие занятости» сотрудничает с крупными компаниями: Литрес, МТС, Яндекс, Кинопоиск, ВТБ, банк «Открытие», Теле2 и другими. 

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

После прохождения обучения получите доступ в канал с 4500+ вакансиями от проверенных работодателей России.

Оставить заявку на бесплатное обучение

Бесплатно помогаем найти работу мечты

Лучшая инвестиция — это инвестиция в себя, в свои знания и будущее. Оставьте заявку на бесплатное обучение прямо сейчас и станьте участником проекта.

Принять участие

Хотите стать амбассадором?

Заполните форму, отправьте заявку, и мы свяжемся с вами для обсуждения сотрудничества.

*
*
*
*