Выбор макета (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Чтобы предоставить наиболее гибкий и адаптируемый интерфейс пользователям приложения среды выполнения Windows, надо сначала решить, какой режим макета лучше всего подходит для содержимого этого приложения, а также в каких представлениях это содержимое будет использоваться. В этом разделе описываются компоненты макета, содержащиеся в каскадных таблицах стилей третьего поколения (CSS3) и поддерживаемые приложениями Магазина Windows в Windows 8. Макет на основе адаптируемых блоков и сетка полезны для создания гибких макетов для программ и пользовательских элементов управления, тогда как макеты с несколькими столбцами и областями наиболее полезны для структурирования текста и прочего содержимого, рассчитанного на чтение.

Макет на основе адаптируемых блоков

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

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

При определении размеров рамки макет на основе адаптируемых блоков учитывает доступное пространство, что делает возможным установить относительные размер и положение. Например, можно обеспечить равномерное распределение лишнего пустого пространства в окне браузера между несколькими дочерними элементами и группировку этих элементов в середине содержащего их блока.

макет на основе адаптируемых блоков позволяет:

• создавать гибкие макеты — даже для разных размеров экрана и окна браузера — элементы которых (такие как изображения или элементы управления) будут сохранять свои размеры и положение относительно друг друга;
• настраивать пропорциональное распределение избыточного пространства вдоль оси размещения (горизонтальной или вертикальной) набора элементов, позволяющее увеличить размер заданных элементов;
• настраивать распределение избыточного пространства вдоль оси размещения набора элементов, помещая его перед ними, после них или в промежутках между ними;
• указывать расположение избыточного пространства, перпендикулярного оси размещения элемента, вокруг этого элемента — например выше или ниже кнопок, которые расположены в ряд;
• управлять направлением расположения элементов на странице — например, сверху вниз, слева направо, справа налево или снизу вверх.
• изменять порядок элементов на экране независимо от порядка их описания в модели DOM.

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

Дополнительные сведения см. в статье, описывающей макет на основе адаптируемых блоков.

Выравнивание сетки

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

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

Дополнительные сведения см. в статье Сетка.

Макет с несколькими столбцами

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

Макет с несколькими столбцами позволяет размещать содержимое в нескольких столбцах, между которыми сохраняется произвольный промежуток. Он также позволяет варьировать число столбцов в зависимости от размера окна браузера. Элемент с несколькими столбцами определяется W3C как элемент, свойствам column-width или column-count которого не присвоено значение "auto". Таким образом, он служит контейнером для макета с несколькими столбцами. Макет с несколькими столбцами содержит поле столбца, определенное как новый тип контейнера между полем содержимого и содержимым. Элементы с несколькими столбцами могут содержать несколько строк с полями столбцов. Строки разделены по элементам объединения столбцов (элементам, для которых указан атрибут column-span:all). Порядок строк следует в направлении элемента с несколькими столбцами. Соседние столбцы разделяются промежутками, которые могут содержать необязательную пробельную линейку.

Дополнительные сведения см. в статье Макет с несколькими столбцами.

Макет с областями

Макет с областями позволяет вам обрабатывать единый поток содержимого и сегментировать его на несколько пустых контейнеров в шаблоне HTML. Шаблоны HTML — это документы, в большей части которых отсутствует начальное содержимое, состоящие в основном из пустых контейнеров, размер и положение которых определяют структуру поступающего содержимого. Чтобы текст перетекал из одного столбца в другой, размеры и позиции которых явно заданы с помощью каскадных таблиц стилей (CSS), как в макете газеты или журнала, можно использовать области.

Дополнительные сведения см. в статье Области.

Практические лабораторные работы для Windows 8

Если вы хотите попробовать поработать с макетами приложения и прочими ключевыми функциями Windows 8, скачайте Практические лабораторные работы для Windows 8. Они предоставляют модульное, пошаговое введение в создание приложения Магазина Windows на языке программирования по вашему выбору (JavaScript и HTML или C# и XAML).

Связанные разделы

Создание макета пользовательского интерфейса

Создание макета страницы приложения

Руководство по взаимодействию с пользователями — макеты и масштабирование