Фреймы, их теги и атрибуты

Author
Анна Петрова
Senior UX Designer @ TechCorp

HTML и CSS
4.2 / 5 (64 оценок)


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

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

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

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

Например, тег задает деление окна на два горизонтальных фрейма, один из которых имеет высоту 150 пикселей, а второй занимает то место, что осталось. Тег задает деление окна на три вертикальные фреймы, один из которых занимает 20% от ширины экрана, второй - 55%, а третий занимает то место, что осталось. Можно использовать одновременно и горизонтальный, и вертикальный разделение окна на фреймы - это делают с помощью вложения тегов один в один.


Страница: 1 из 5    -   Следующая

Навигация: 1  2  3  4  5  
#UX #UI #Дизайн #Доступность
Author

Анна Петрова

Senior UX Designer @ TechCorp

Более 10 лет опыта в дизайне пользовательских интерфейсов. Работала с компаниями из списка Fortune 500. Спикер на международных конференциях по дизайну.

Комментарии (5)

Оставить комментарий

Ваш email не будет опубликован

М
Михаил Сидоров

15 Января 2026

Отличная статья! Особенно понравился раздел про визуальную иерархию. Обязательно применю эти принципы в своём следующем проекте.

Е
Елена Козлова

20 Декабря 2025

Спасибо за подробное объяснение принципов доступности. Многие дизайнеры недооценивают эту тему, а зря!

А
Алексей Новиков

17 Ноября 2025

Could you share more about design systems? Would love to see a dedicated article on that topic!

Понравилась статья?

Подпишитесь на нашу рассылку и получайте новые материалы каждую неделю