Спонсор: Microsoft
Опубликован: 26.12.2012 | Доступ: свободный | Студентов: 727 / 31 | Длительность: 06:22:00
Специальности: Программист
Лекция 2:

Создание макетов приложений и проектирование с использованием HTML5, CSS и JavaScript

< Лекция 1 || Лекция 2: 123 || Лекция 3 >

Выравнивание содержимого в сетке

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

  1. Кликните ваш элемент div, определяющий плитку, в панели Динамическая DOM, (Live DOM), чтобы выбрать ее.
  2. В панели Свойства CSS разверните раздел Сетка. Введите 2 в поле -ms-grid-column и нажмите Enter. Левый край div-плитки сейчас выровнен по второму столбцу.
    Содержание плитки сейчас выровнено по второму столбцу

    Содержание плитки сейчас выровнено по второму столбцу
  3. Введите 3 в поле –ms-grid-row, и верхний край div-плитки выровняется по третьей строке.

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

  4. Кликните меню свойства –ms-grid-column-align (выравнивание по столбцам), поменяйте значение на center (по центру). Теперь ваша плитка располагается в центре этого столбца.
  5. Кликните меню свойства –ms-grid-row-align (выравнивание по строкам), поменяйте значение на center (по центру). Теперь ваша плитка располагается в центре этой строки.
    Ваша div-плитка в центре второго столбца и третьей строки

    Ваша div-плитка в центре второго столбца и третьей строки
    Как видите, позиционирование контента в строке и/или столбце довольно логично. Теперь вы приведете эту плитку в исходное положение.
  6. Кликните меню свойства –ms-grid-column-align, поменяйте значение на начальное.

    Кликните меню свойства –ms-grid-row-align, поменяйте значение на начальное. Теперь ваша плитка в исходном положении, как и было в пункте 3.

Работа с сетками в Visual Studio

Несмотря на то, что Blend для Visual Studio очень помогает с визуальной разработкой макета, больше распространена работа в Visual Studio (если вы не дизайнер, который передает проект разработчику). Теперь вы узнаете, как запустить проект непосредственно в Visual Studio 2012.

  1. Перейдите на вкладку Проекты (Projects), щелкните правой кнопкой мыши по вашему приложению и выберите Изменить в Visual Studio (Edit in Visual Studio).
    Переход к редактированию приложения в Visual Studio посредством контекстного меню

    Переход к редактированию приложения в Visual Studio посредством контекстного меню
    Visual Studio будет запущено, решение вашего проекта и связанные с ним компоненты будут видны.
  2. Дважды щелкните документ default.html, и появится HTML-код для вашей страницы. В Visual Studio 2012 нет конструктора для WinRT-приложений, использующих JavaScript.
    Ваш HTML-код

    Ваш HTML-код
  3. В Обозревателе проектов (Solution Explorer) разверните папку CSS, а затем дважды щелкните на файле определения стилей default.css .
    Ваш CSS-код

    Ваш CSS-код
    Хотя у Visual Studio нет конструктора, вы можете использовать встроенный Имитатор (Simulator) для просмотра содержимого и испытаний свойств, таких, как расположение и разрешение экрана.
  4. Найдите меню Локальный компьютер (Local Machine) во второй строке Visual Studio, а затем кликните и выберите Имитатор (Simulator). Чтобы запустить приложение в имитаторе, нажмите на зеленую стрелку — будет запущен имитатор приложений для Магазина Windows с вашим приложением.
    Ваше приложение запущено в имитаторе

    Ваше приложение запущено в имитаторе
  5. Найдите иконку Монитор (Monitor) на правой стороне окна имитатора и нажмите на нее. Сейчас установленное разрешение 10,6" 1366 х 768. Выберите опцию 10,6" 1920 x1080, и имитатор обновится. Что примечательно здесь — как бы ни менялось разрешение, это существенно не влияет на макет. Ваша плитка имеет тот же объем пространства в верхней и левой частях. В правой части появляется дополнительное пространство, потому что плитка находится в пределах строки и столбца, которые заданы дробным размером. Это является ключевым преимуществом смешивания фиксированного и дробного размеров при создании макета на основе сетки.
  6. Нажмите на Поворот по часовой стрелке (90 градусов) (Rotate clockwise (90 degrees)), и повторится тот же сценарий: объем пространства сверху и слева от плитки точно такой же, но пространство справа от плитки зависит от доступного пространства. Мы еще раз видим ключевое преимущество смешивания фиксированного и дробного размеров макета на основе сетки.

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

  7. Вернитесь в Visual Studio и выберитеОтладка> Остановить отладку ( Debug > Stop Debugging). Выберите Файл> Закрыть решение (File > Close Solution). Вы завершили этот модуль.

Сравнение самостоятельно созданного макета с шаблоном Приложение таблицы (Grid App)

Прежде чем закончить, важно снова вспомнить цель данной главы. То, как вы изучали на предыдущих заданиях создание пользовательской сетки, — это отличный способ научиться основам работы сеток; однако, когда вы начинаете создавать полноценные WinRT-программы в JavaScript вы, скорее всего, начинаете с шаблона, и для приложений, макет которых основан на сетке, это будет будет шаблон Приложение таблицы (Grid App).

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

Итоги

В этом модуле вы узнали, как создавать и модифицировать макеты страниц WinRT-приложений. В частности, вы научились модифицированию строк и столбцов макета на основе сетки с помощью Blend и выравниванию содержимого по этим строкам и столбцам. Кроме того, вы потренировались обнаруживать этот код и работать с ним в Visual Studio, а также запускать приложение в имитаторе для WinRT-приложений.

Самостоятельная работа

В своем проекте создайте две новые div-плитки (tile2 и tile3), оформите их таким же образом, как и плитку 1, но сделайте их разных размеров и задайте им различные цвета фона. Добавьте числа "2" и "3" соответствующим плиткам и выровняйте их по разным строкам и столбцам.

Вопросы

  1. Насколько макет на основе CSS-сетки похож на макет на основе HTML-таблицы?
  2. Что такое дробное значение (fr) по отношению к сетке, и почему оно используется?
  3. Для чего используются свойства –ms-grid-column-align и –ms-grid-row-align в макетах на основе сетки?

Дополнительные ресурсы

вы можете узнать больше о макетах на основе сетки, а также о работе в Blend для Visual Studio по следующим ссылкам:

Ответы

  1. Обе модели макетов используют строки и столбцы.
  2. Значение fr определяется как "доля свободного пространства" в строке или столбце. При задании строкам или столбцам дробных единиц, вы можете создавать макеты, которые хорошо реагируют на изменение размера и хорошо адаптируются к различным размерам экрана.
  3. Свойства –ms-grid-column-align и –ms-grid-row-align позволяют расположить содержимое с помощью ключевых слов, таких, как start (начало), center (центр) и end (конец).
< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Петр Василенко
Петр Василенко
Россия, Саратов, СГУ, 1973
Иван Пынин
Иван Пынин
Россия, Челябинск