Фреймы, слои и структура макета

Фрейм задаёт контекст

Фрейм — контейнер для элементов интерфейса: отдельной кнопки, карточки или целого экрана. Внутри него могут находиться текст, изображения и другие фреймы. Название слоя должно объяснять его роль, а не только тип объекта.

Соберите основу экрана

1. Создайте фрейм для компьютерной версии, например шириной 1440 пикселей. Это учебный размер, а не обязательный стандарт для всех сайтов.
2. Добавьте контейнер первого экрана и разместите в нём заголовок, пояснение, кнопку и изображение.
3. Разделите контент на смысловые группы. Для шапки, первого экрана и карточек используйте понятные названия.
4. Проверьте вложенность в панели слоёв: текст кнопки должен находиться внутри её контейнера.
5. Скройте и снова покажите один слой, затем убедитесь, что случайно не оставили важный элемент скрытым.

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

Практическое задание

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

Проверьте себя

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