Продвинутые техники веб-разработки
До сих пор размещали элементы друг за другом сверху вниз. Заголовок, потом картинка, потом текст, потом кнопка. Как столбик кирпичей. Но посмотрите на сайт ADC. В секции «Контакты» видите информацию в два столбца? Слева «По вопросам поступления» с телефоном и почтой, справа «По общим вопросам» с другим телефоном. Элементы расположены горизонтально, рядом друг с другом.
Без специальных инструментов — это сложно. Раньше использовали таблицы или float. Получалось громоздко и хрупко. Теперь есть Flexbox. Flexible Box Layout, гибкая блочная раскладка. Современный способ размещать элементы в ряд или столбец, выравнивать их, распределять пространство.
Flexbox — это как коробка с отделениями. Коробка — это контейнер. Отделения — это элементы внутри. Говорите коробке: расположи отделения в ряд или в столбец, прижми их к краю или по центру, растяни на всю ширину или оставь как есть. Коробка выполняет команды.
Посмотрите на секцию «Контакты» ADC. Две колонки с информацией расположены горизонтально. Создайте HTML структуру:
Без стилей колонки расположатся друг под другом. Каждый <div> блочный элемент, занимает всю ширину. Чтобы расположить их рядом, примените Flexbox к контейнеру:
Сохраните. Обновите страницу. Видите? Колонки встали в ряд. Одно свойство display: flex превратило контейнер в flex-контейнер. gap обозначает отступы между элементами. Первое значение по горизонтали, второе — по вертикали. Вертикальный отступ работает здесь благодаря flex-wrap: wrap. Это свойство позволяет элементам переноситься. Если ширины не хватает, элемент перейдёт на следующую строку. nowrap запрещает перенос (по умолчанию).
В хедере чуть другая ситуация, там элементы распологаются на одинаковом расстоянии друг от друга. Это нам помогает сделать также flex.
Добавим хедеру стили:
justify-content: space-between позволяет нам как раз сделать равное расстояние между элементами, он отвечает за горизонтальное расположение. align-items — за вертикальное. Значение center говрит браузеру, что все элементы находятся по центру относительно горизонтальной оси.
Далее давайте обернём весь наш контентный блок после большой картинки в div, ведь между блоками основными у нас одинаковое расстояние
Для тега main добавим стили
flex-direction даёт браузеру понять как мы хотим расположить элементы: вертикально или горизонтально. column означает вертикальное расположение.
У нас есть блок «Наш ADC» с картинкой, тут есть и вертикальное расположение блоков и горизонтальное. Давайте добавим.
Добавим стили:
Посмотрим на секцию «Что изучают студенты ADC». Здесь есть тоже схожие расстояния между элементами.
Добавим и сюда flex:
И последний блок, который нам осталось стилизовать при помощи flex — это форма
Добавим flex:
Запомните главное. display: flex делает элемент flex-контейнером. justify-content выравнивает элементы по горизонтали. align-items выравнивает по вертикали. gap добавляет отступы между элементами. flex-direction меняет направление раскладки. flex-wrap разрешает перенос элементов.
В качестве домашнего задания пропишите flex для всех блоков на странице статьи.
В прошлом уроке использовали Flexbox для раскладки элементов в ряд или столбец. Flexbox отлично работает для одномерных раскладок: навигация, футер, карточки в ряд. Но есть задачи посложнее. Посмотрите на секцию «Контакты» ADC. Видите сетку из четырёх блоков? Верхний ряд: «По вопросам поступления» слева, «По общим вопросам» справа. Нижний ряд: «Дополнительное образование» слева, «Адрес» справа. Чёткая сетка два столбца, два ряда.
Flexbox может это сделать, но сложно. Нужно создавать вложенные контейнеры, считать ширины, настраивать переносы. Для таких двумерных раскладок существует Grid Layout. CSS Grid, сеточная раскладка. Вы рисуете сетку из строк и столбцов, размещаете элементы в ячейки. Как таблица, но намного мощнее и гибче.
Grid — это как шахматная доска. Доска разделена на клетки. Размещаете фигуры на нужные клетки. Одна фигура может занять одну клетку, другая несколько. Grid позволяет делать то же самое с элементами страницы.
У нас уже есть разметка для секции контактов:
Четыре блока с контактной информацией. Без стилей они встанут друг под другом. Примените Grid:
display: grid делает контейнер grid-контейнером. grid-template-columns: 1fr 1fr создаёт два столбца равной ширины. 1fr — это одна доля свободного пространства. Два столбца по 1fr делят ширину пополам. gap: 54px 234px добавляет отступы между ячейками.
Сохраните. Обновите страницу. Видите? Четыре блока выстроились в сетку два на два. Первые два в верхнем ряду, следующие два в нижнем. Grid сам распределил элементы по ячейкам.
Можете задать больше столбцов. Например, три:
Теперь три столбца. Четыре элемента распределятся: три в первом ряду, один во втором. Для дизайна ADC нужны два столбца, вернитесь к 1fr 1fr.
Доли 1fr могут быть разными. Если хотите левый столбец шире правого:
Левый столбец занимает две доли, правый одну. Левый в два раза шире. Для равных столбцов используйте одинаковые доли.
Можете задать ширину в пикселях:
Левый столбец фиксированный 300 пикселей, правый растягивается на оставшееся пространство. Это полезно для сайдбаров или боковых меню.
Grid подходит для двумерных раскладок: сетки карточек, сложные макеты с шапкой, сайдбаром, контентом и футером. Flexbox для одномерных раскладок: навигация, строки кнопок, простые ряды элементов. Вместе они покрывают все задачи раскладки.
До сих пор создавали сайт для большого экрана. Открывали в браузере на компьютере, всё выглядело отлично. Но посмотрите вокруг. Люди заходят на сайты с телефонов, планшетов, маленьких ноутбуков. Экраны разные: 1920 пикселей, 1024, 768, 430. Если сайт сделан только для большого экрана, на телефоне он развалится. Текст мелкий, кнопки крошечные, элементы наезжают друг на друга.
Адаптивная вёрстка решает эту проблему. Сайт подстраивается под ширину экрана. На компьютере контент в три колонки, на планшете в две, на телефоне в одну. Шрифты становятся крупнее, кнопки больше, навигация прячется в меню. Один сайт работает на всех устройствах.
Посмотрите на сайт ADC на разных экранах. На десктопе ширина 1920 пикселей: крупный заголовок «ADC Community», картинка на всю ширину навигация сверху горизонтально. На планшете 1024 пикселя: заголовок чуть меньше, картинка адаптируется, контакты остаются в две колонки, всё читаемо. На телефоне 430 пикселей: картинка узкая, контакты в одну колонку, навигация превращается в иконку меню.
Адаптация делается через media queries, медиазапросы. Это правила CSS, которые срабатывают при определённой ширине экрана. Пишете: «Если ширина меньше 1024 пикселей, уменьши шрифт заголовка». «Если ширина меньше 430 пикселей, расположи контакты в одну колонку». Браузер проверяет ширину и применяет нужные стили.
Откройте style.css. В конце файла добавьте медиазапрос для планшетов:
@media (max-width: 1024px) означает — «если ширина экрана 1024 пикселя или меньше». Внутри фигурных скобок пишете правила, которые перезаписывают основные стили. Заголовок h2 был 72 пикселя, становится 48. Сетка контактов уменьшает отступы.
Медиазапросы работают каскадом. Сначала применяются основные стили, потом медиазапросы для меньших экранов. Это как надевать одежду: сначала базовый слой, потом куртка, потом шапка. Каждый слой добавляет что-то новое.
Теперь адаптация для телефонов. Добавьте медиазапрос для 430 пикселей:
Обратите внимание: медиазапросы перезаписывают только те свойства, которые нужно изменить. Цвета, шрифты, остальное остаётся прежним. Не нужно дублировать весь CSS, только изменения.
Проверьте адаптацию. Откройте сайт в браузере. Нажмите F12, откройте инструменты разработчика. Нажмите иконку устройств или Ctrl+Shift+M. Выберите разрешение: Desktop, Tablet, Mobile. Или введите точную ширину: 1920, 1024, 430.
Видите, как перестраивается страница? На 1024 заголовок меньше, отступы уже. На 430 контакты в столбик, навигация вертикально, текст крупнее. Это и есть адаптивная вёрстка.
Важный момент: viewport. Это мета-тег, который указывает мобильным браузерам, как отображать страницу. Без него телефон покажет десктопную версию в миниатюре. Откройте index.html, в <head> добавьте:
width=device-width устанавливает ширину страницы равной ширине устройства. initial-scale=1.0 устанавливает начальный масштаб. Без этого тега адаптация не заработает на реальных телефонах.
Адаптация затрагивает все элементы. Навигация на телефоне часто прячется в бургер-меню. Три горизонтальные полоски, кликаете, меню выезжает сбоку. На десктопе навигация всегда видна, на телефоне скрыта для экономии места.
Создайте адаптивную навигацию:
Кнопка menu-toggle — это три полоски бургер-меню. В CSS скройте её на десктопе, покажите на телефоне:
И стили для адаптива:
На телефоне навигация скрыта display: none. Когда добавляется класс active, меню появляется справа. Это делается через JavaScript:
classList.add (’active’) добавляет класс, classList. remove (’active’) убирает. Кликаете кнопку, меню выезжает. Кликаете ещё раз, прячется.
Запомните главное. Адаптивная вёрстка делается через медиазапросы @media. max-width означает «ширина экрана или меньше». Viewport тег обязателен в «». Адаптация изменяет размеры шрифтов, количество колонок, раскладку элементов. Проверяйте адаптацию в инструментах разработчика на разных разрешениях.
В качестве домашнего задания адаптируйте страницу статьи.
До сих пор размещали на странице статичные элементы: текст, картинки, формы. Но посмотрите на секцию «Контакты» ADC. Под сеткой с телефонами и адресами видите интерактивную карту? Можете перемещаться, увеличивать масштаб, кликать на маркер. Это не картинка, это живая Яндекс Карта, встроенная прямо в страницу.
Карты помогают посетителям найти физическое местоположение. Адрес «Пантелеевская, 53» понятен москвичам, но что если человек из другого города? Карта покажет точное место, можно построить маршрут, посмотреть окрестности. Это удобнее статичной картинки.
Яндекс предоставляет API для встраивания карт. API — это набор инструментов, который позволяет использовать сервисы Яндекса на вашем сайте. Вы подключаете скрипт, пишете несколько строк кода, карта появляется на странице. Без API пришлось бы создавать карту с нуля, прорисовывать улицы, здания, маршруты. С API получаете всё готовое.
Сначала нужен API-ключ. Это уникальный идентификатор, который подтверждает, что вы имеете право использовать API. Откройте браузер, зайдите на developer. tech. yandex. ru. Перейдите в раздел «JavaScript API и HTTP Геокодер». Нажмите «Получить ключ». Зарегистрируйтесь или войдите через Яндекс ID. Создайте ключ, скопируйте его.
Ключ выглядит как длинная строка символов: abc123def456ghi789. Храните его безопасно. Не публикуйте в открытом доступе. Для учебных проектов это не критично, но для реальных сайтов важно.
Теперь подключите API к странице. Откройте index. html. В секции <head> добавьте скрипт:
Замените ВАШ_API_КЛЮЧ на скопированный ключ. lang=ru_RU устанавливает русский язык интерфейса карты.
Создайте контейнер для карты в HTML. В секции контактов после сетки добавьте:
ID map нужен, чтобы JavaScript нашёл этот элемент и поместил туда карту. Класс map-container для стилизации.
В CSS задайте размеры контейнера:
Теперь JavaScript. Откройте script.js. Напишите код инициализации карты:
ymaps.ready (initMap) ждёт, пока API загрузится, затем вызывает функцию initMap. Без этого код выполнится раньше, чем API будет готов, и выдаст ошибку.
new ymaps. Map (’map’, {…}) создаёт карту внутри элемента с ID map. Передаёте настройки: center — это координаты центра, zoom — это масштаб от 0 (весь мир) до 19 (детализация зданий).
Координаты [55.787300, 37.641764] — это широта и долгота Пантелеевской, 53. Как узнать координаты? Откройте Яндекс Карты, найдите адрес, кликните правой кнопкой, выберите «Что здесь?». В левом меню появятся координаты. Скопируйте их.
new ymaps. Placemark ([…], {…}, {…}) создаёт маркер на карте. Первый параметр координаты маркера. Второй параметр свойства: balloonContent — это текст во всплывающем окне при клике на маркер. Третий параметр опции: preset — это стиль иконки.
map.geoObjects.add (placemark) добавляет маркер на карту. Без этой строки маркер создан, но не виден.
Сохраните файлы. Обновите страницу. Видите карту? Видите красный маркер на Пантелеевской, 53? Кликните маркер, появляется окно с текстом «НИУ ВШЭ, ADC». Можете перемещать карту, увеличивать масштаб. Это полноценная интерактивная карта.
Можете настроить управление картой. Например, отключить прокрутку колесом мыши, чтобы при скролле страницы случайно не зумировать карту:
controls: [’zoomControl’] оставляет только кнопки зума, убирает остальные элементы управления. scrollZoom: false запрещает зум колесом мыши.
Можете изменить стиль маркера. Яндекс предоставляет несколько готовых стилей:
Доступны цвета: red, darkOrange, yellow, green, darkGreen, blue, lightBlue, violet, pink, gray, black. Для ADC подойдёт зелёный, в тон дизайну.
Можете использовать свою иконку. Загрузите SVG или PNG, укажите путь:
iconImageHref — путь к файлу иконки. iconImageSize — размеры иконки. iconImageOffset — смещение, чтобы острие маркера указывало точно на координаты.
Запомните главное. Яндекс Карты подключаются через API-ключ. Скрипт в <head>, контейнер с ID в HTML, код инициализации в JavaScript. ymaps.ready () ждёт загрузки API. ymaps.Map () создаёт карту. ymaps.Placemark () создаёт маркер. Координаты в формате [широта, долгота]. balloonContent добавляет текст в окно маркера.
