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

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

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

Добавление элементов div в макет на основе сетки и их настройка

Теперь вы добавите div-элемент в свой макет сетки, а потом присвоите ему CSS-стиль ID.

  1. Убедитесь в том, что элемент div –ms-grid по-прежнему выбран в панели Динамическая DOM. В панели Активы (Assets) кликните подраздел Общие (Common) в разделе Элементы (Elements). Найдите объект <div> и дважды кликните его. В панели Динамическая DOM вы увидите, что он был добавлен в качестве дочернего элемента –ms-grid, хотя вы не заметите визуальных изменений в дизайне. Это потому, что элемент div сам по себе не имеет структуры. Обычно, когда вы добавляете div в HTML-документ, вы присваиваете ему либо класс, либо ID-стиль. Класс стиля используется, если вам нужно повторно задействовать стиль, т.е. более одного раза. ID стиля используется, если вы собираетесь задействовать стиль только один раз. В таких случаях вы будете пользоваться ID стиля.
  2. Нажмите на панель Атрибуты HTML (HTML Attributes) и кликните поле ID и введите tile (плитка). Таким образом вы присвоите ID в HTML, но теперь вы должны создать стиль в вашем CSS.
  3. Нажмите на панель Свойства CSS (CSS Properties), а затем нажмите на иконку меню в верхнем правом углу и выберите Создать правило стиля на основании ID элемента (Create Style Rule from Element ID). В панели предоставляется целый ряд категорий. Эти категории представляют весь набор CSS-свойств, который предоставляет Blend для любого стиля, определяемого ID или классом.
    Категории для вашего стиля ID представляют все CSS-свойства, предоставленные в Blend

    Категории для вашего стиля ID представляют все CSS-свойства, предоставленные в Blend
  4. Разверните категорию Изменение размера (Sizing) и задайте 310px в поле width (ширина), и 150px в поле height (высота). Теперь вы увидите вашу плитку, представленную элементом div, — она появилась в области конструктора.
  5. Сверните категорию Изменение размера и разверните категорию Background (Фон). Нажмите на кнопку с надписью Not set (Не указан) справа от свойства background-color (цвет фона) и в появившейся палитре цветов выберите синий среднего оттенка. Для задания не важно, какое значение вы выберете.
  6. Дважды щелкните внутри вашей плитки div и введите номер 1. Текущие свойства текста определены стандартным стилем, который был создан при создании проекта (именно поэтому текст белый). Для дальнейшей настройки этого текста вы должны вернуться к панели Свойства CSS (CSS properties).
  7. На панели Свойства CSS (CSS properties) разверните раздел Text (Текст) и задайте 42pt в поле font-size (размер шрифта), и ваш текст будет обновлен.
    Размер текста в элементе div, описывающем плитку, установлен на 42pt

    Размер текста в элементе div, описывающем плитку, установлен на 42pt

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

Деление сетки на строки и столбцы

В этом задании вы разделите сетку на строки и столбцы, а потом определите, задается ли размер строки или столбца фиксированным образом или выражен в долях.

  1. Поместите в конструкторе курсор мыши над верхней частью сетки, пока не появится выделенная синяя линия. Эта линия называется графическим элементом верхушки сетки, а появляющиеся оранжевая стрелка и линия называются графическим элементом вставки столбца.
  2. Наведите курсор примерно на 25% вдоль верхней части сетки и щелкните один раз, чтобы добавить столбец. Не беспокойтесь о точном месте расположения, у вас будет возможность переместить его в необходимое место.
    Добавьте столбец, кликнув на верхушке сетки

    Добавьте столбец, кликнув на верхушке сетки
  3. Теперь наведите курсор на 25% по левой стороне сетки и щелкните один раз, чтобы добавить строку. После деления сетки на две строки и два столбца вы увидите, что каждая строка и столбец имеют метку со значениями, установленными в долях (fr). Дробные размеры весьма удобны, но, как правило, есть такие области сетки, в которых вы должны будете исправить размер на пиксельный. Например, в стандартном оформлении WinRT-приложений заголовок всегда имеет размер в 80 пикселей от верхней части сетки. Теперь вы установите для верхней строки фиксированный размер, чтобы посмотреть, как это работает.
  4. Наведите курсор на метку верхней строки, слева появится выпадающее меню с указанным fr-значением. Нажмите на это меню и измените его на пиксели (px).
    Нажмите на метку первой строки и в выпадающем меню поменяйте Fraction на Pixel

    Нажмите на метку первой строки и в выпадающем меню поменяйте Fraction на Pixel
    Высота этой строки теперь выражена в пикселях; также вы можете вручную настроить размер строки, кликнув и перетаскивая графический элемент строки, но для того, чтобы точно установить размер, надо установить его в панели Свойства CSS.
  5. Ваша сетка должна быть выбрана, если это не так, сделайте это сейчас. В подразделе –ms-grid панели Свойства CSS найти свойства –ms-grid-rows. У вас здесь будет два значения: пиксельное значение и дробное значение. В нашем случае значения равны 190px и 1fr. Ваше значение в пикселях, вероятно, будет отличаться, так как оно зависит от того, где вы кликнули, чтобы создать строку.
  6. Сначала поменяйте значение в пикселях на 80px, а второе значение оставьте как 1fr. вы увидите передвижение графического элемента строки вверх. Эта строка всегда будет оставаться фиксированной при данных условиях, и не важно, на сколько изменяется в размерах экран.

    Теперь вы поменяете положение первой колонки.

  7. Поместите курсор над меткой первой колонки и в выпадающем меню измените дробное значение (fr) на пиксели (px). В панели Свойства CSS поменяйте первое значение для свойства ms-grid-columns на 120px, а второе значение оставьте установленным в 1fr.

    Теперь добавим еще одну строку.

  8. Кликните в любом месте ниже вашей первой строки, чтобы добавить вторую. Затем поместите курсор над меткой новой строки и в выпадающем меню поменяйте дробное значение (fr) на пиксельное (px).
  9. Обратите внимание, что в панели Свойства CSS добавилось новое значение — второе значение в пикселях, определяющее вторую строчку. Замените второе значение на 150px. В данный момент значение свойства –ms-grid-columns должно быть 120px 1fr и значение –ms-grid-rows должны быть 80px 150px 1fr.
    Конечные настройки ваших столбцов и строк

    Конечные настройки ваших столбцов и строк

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

< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Петр Василенко
Петр Василенко
Россия, Саратов, СГУ, 1973
Иван Пынин
Иван Пынин
Россия, Челябинск