Перейти к содержимому
  • Инструмент выравнивания элементов

       (22 отзыва)

    Евгений Зубов
    • 23 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_02/3.3.4_Vyiravnivaneie_obektov.mp4.6bf487c7679d9d77b98b676b357a5c47.mp4 10 До 10 минут display: none; https://creatura.club/uploads/ Средняя сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом видео вы узнаете о выравнивании объектов на странице с помощью панели "Выравнивание" в программе Adobe Muse. Панель "Выравнивание" позволяет нам выравнять несколько элементов страницы сайта относительно друг друга или относительно области содержимого. Заходим в программу, открываем новый сайт, заходим в режим "Дизайн". Для того, чтобы открыть панель "Выравнивание", вам необходимо выбрать окно "Выравнивание". Сбоку у нас появляется дополнительная закладка, и сразу открывается панель "Выравнивание". Если панель "Выравнивание" у нас открыта, то в меню "Окно" напротив параметра "Выравнивание" стоит флажок, то это означает, что панель в данном случае активна. Рассмотрим небольшой пример. Сейчас я создам несколько объектов. У нас есть 3 объекта, я вставил картинку логотипа и 2 графических блока, закрашенных разными цветами. 

      Для начала рассмотрим из чего же состоит панель Выравнивание. Панель состоит из нескольких разделов: первый раздел - это выравнивание объектов (по левому, правому краю, по центру, по верхнему краю, по центру по вертикали и по нижнему краю). Второй раздел - это распределение объектов. Распределить мы можем их левые края, правые края, по центру по горизонтали, по центру по вертикали, верхние края, нижние края. Также доступны снизу еще две функции: функция "Интервала" между объектами по вертикали и горизонтали и выбор способа выравнивания. По способу мы можем выравнять: по выделенной области, по области содержимого или по ключевому объекту. Давайте посмотрим, как будет работать выравнивание для одного объекта.  Сейчас у нас выбрана функция выравнивания "По выделенной области". Таким образом программа будет выравнивать объекты по той области, которая очерчивается всеми выбранными объектами. Поэтому, если мы при выборе данной функции выделяем только один объект, то ни одна кнопка "Выравнивание" не будет на него работать, так как объект будет выравниваться по своим же собственным краям. Если же мы выбираем "Выравнять по области содержимого", то все объекты будут выравниваться по нашей области контента, причем, не учитывая поля. Давайте выделим один из объектов и попробуем применить к нему параметр "Выравнивание по левому краю". Вы видите, что объект перескочил и прилепился к границе области контента. Если мы нажмем "Выравнять по центру", то он у нас разместится ровно по центру области содержимого. Далее все аналогично.

      Точно также мы можем выравнивать два и более объекта. Допустим, сейчас наши объекты расположены хаотично на странице, и нам необходимо выравнять их по левому краю. Мы просто выделяем эти три объекта, зажав Shift, и нажимаем одну из кнопок выравнивания, например, "Выравнять по левому краю". Если мы нажимаем по центру, то наши объекты выравниваются по центру по области содержимого. То есть, они находятся в центре данной страницы. Если мы нажимаем "Выравнять по правому краю", то объекты прилипают к правому краю страницы. Далее давайте разместим их по центру и попробуем выравнять объекты по верхнему краю. Если мы сейчас нажмем данную кнопку при выделении всех объектов, то все они прилипнут к верхнему краю, учитывая отступ. И все они расположены как стопка объектов. Нам, конечно же, это не нужно, и мы их снова разделим. Давайте расположим их немного криво. Если мы выделим сразу три объекта и нажмем на эту кнопку, то все они снова собьются в стопку. Давайте снова их выделим и нажмем по нижнему краю. Теперь вся стопка прилипла по нижнему краю, и снова придется все объекты растаскивать. При использовании функции"Выравнивание" важно то, что вы выбрали в меню.

      Выделяем снова три объекта и попробуем распределить объекты с помощью функции "Распределение" Нажимаем "Распределить левые края" и видим,что наши объекты выравнялись по области содержимого, как мы и выбирали, и распределились их левые края, то есть между ними равномерные интервалы. Если мы сейчас их снова раскидаем, выделим и нажмем по горизонтали, то произойдет то же самое. Объекты выравниваются по области содержимого и между ними равномерные интервалы. Если мы выделим все три объекта и нажмем "Распределить верхние края", то все наши объекты распределились равномерно по вертикальной линии. То есть между ними теперь одинаковое расстояние.

      Давайте выравняем наши объекты по центру. Немного их раскидаем, выделим все объекты и выберем "Выравнять по ключевому объекту". Ключевой объект закрашивается жирной линией. Мы можем менять ключевой объект, нажав левую кнопку мыши. Давайте ключевым объектом сделаем логотип, и теперь стала доступна функция "Интервалы". Мы можем задать пиксели между распределяемыми объектами. Объекты будут распределяться относительно ключевого объекта. Если мы выберем и нажмем на кнопку "Распределить с равными интервалами по вертикали", то объекты распределились именно так. В данном случае стоит 0 пикселей и объекты прилипают друг к другу. Если мы нажмем с равными интервалами по горизонтали, то увидим то же самое. Если мы выставим какое-то значение, например, 30 пикселей, и нажмем на те же самые кнопки, то в первом случае наши объекты распределятся с равными интервалами по вертикали, и интервалы будут равны 30 пикселей. Если же мы нажмем при выделенных объектах "Выравнять по ключевому объекту", выберем логотип и нажмем "Распределить с равными интервалами по горизонтали", то наши объекты распределятся с равными интервалами по горизонтали, и эти интервалы в данном случае будут тоже по 30 пикселей.

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

    Что такое инструмент выравнивания в Adobe Muse. Примеры применения этой возможности. Как изменять режим работы выравнивания. Подробно о всей технологии.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Все понятно

    Поделиться отзывом


    Ссылка на отзыв
    Даниил Князев

    Спасибо, все понятно.

    Поделиться отзывом


    Ссылка на отзыв
    Руслан Гараев

    +пожалуй, один из самых крутых и полезных уроков!

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Увлекательно и познавательно

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    просмотрено.

    Поделиться отзывом


    Ссылка на отзыв
    Zhanibek_jez

    Понятно 

    Поделиться отзывом


    Ссылка на отзыв
    Екатерина Химич

    Очень подробно, отличные уроки!

    Поделиться отзывом


    Ссылка на отзыв
    Алексей

    Грамотно.

    Поделиться отзывом


    Ссылка на отзыв
    Анастасия Рябцева

    Пока еще не совсем понимаю, в какой момент мне это пригодится на практике, но буду иметь в виду))

    Поделиться отзывом


    Ссылка на отзыв
    Иван18

    ок, все понятно!

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Нужно попробовать, а то все быстро забуду

    Поделиться отзывом


    Ссылка на отзыв
    РЕКА ЧУ РЕКА ЧУ

    Все понятно. Хаосу-НЕТ!

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Все понятно.

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Долго не мог разобраться с выравниванием, а оказалось всё так просто. Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Всё понятно.

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    очень-очень-очень полезная функция с заданными интервалами по вертикали и горизонтали!!!

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Посмотрела видео. Повторила все действия с инструментом выравнивание. Понятно.

    Поделиться отзывом


    Ссылка на отзыв
    lukomorik

    Спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    zse777

    Полезная функция.

    Поделиться отзывом


    Ссылка на отзыв

×