резиновые сайты в Adobe Muse

Резиновые сайты в Adobe Muse (СС 2016)

Резиновые сайты в Adobe Muse.

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

Резиновые сайты в Adobe Muse. Вступление.

Сегодняшний видеоурок посвящен будет Adobe Muse CC 2016 (CC 2015.1). Многие спрашивают меня о том, где я взял информацию, о возможности создавать резиновые сайты в Adobe Muse, так сказать, респонсивные — responsive site. Я сейчас вам в этом видео покажу. Сама компания Adobe Muse сделала специальный пример для того, чтобы будущие разработчики могли уже попробовать, как это все будет работать.

Итак, нужно просто зайти на сайт muse.adobe.com и тут же сразу мы видим вот такую страничку, вот такой сайт, где написано responsive web design и сразу стоит значок resize to preview. То есть нам компания Adobe предлагает попробовать изменить размер браузера, чтобы увидеть, как работает вот эта вот резиновость, которую они предлагают, как нововведение в следующих своих версиях Adobe Muse. Давайте же попробуем.

У меня браузер Mozilla Firefox. Он позволяет уменьшить размер браузера до размеров мобильного телефона и таким образом мы увидим все изменения, которые могут произойти на таком резиновом сайте и как это все изменяется. Сайт у нас состоит из вот такой надписи, потом здесь у нас web design, какие-то полосочки, 2 кнопки, 4 вот таких блока и внизу footer. Видите, написано «Made with Adobe Muse CC», то есть эта страничка сделана именно в Adobe Muse.

Резиновые сайты в Adobe Muse. Просмотр резинового примера сайта. Стягивание.

Итак, просто берем за краешек браузера и начинаем тянуть. Сейчас у нас, как вы видите, версия для компьютера. Я смотрю на ноутбуке, поэтому буквально сразу чуть-чуть потянул и сразу значок меняется на ноутбук, то есть при достижении какого-то разрешения, он сразу автоматически меняет разметку сайта на ноутбучную. Что у нас поменялось? Стало 4 квадратика вместо 4 полосок и блоки сдвинулись вот в таком порядке, footer остался точно таким же, как и был. Двигаем дальше. Раз — у нас изменился значок на планшет, который находится в горизонтальном положении, и опять же немного изменился размер надписи, наши квадратики превратились в полоски горизонтальные, 2 кнопки (как и было), 4 блока и теперь в футере уже 3 блока и надпись «Made with Adobe Muse» сместилась по центру вниз. Вот так изменилась версия для планшета в горизонтальном положении.

Двигаем дальше. Следующая версия — это версия для планшета в вертикальном положении. Опять же немного изменились надписи, вертикальные полосы переместились вдоль, блоки поменялись с квадратных на прямоугольные и расположились одни под одним, footer тоже, ссылки тоже одна под одной и footer теперь состоит из двух колонок.

Если мы сдвинем еще немного дальше, то увидим версию сайта для телефона, который расположен в горизонтальном положении. Опять же все поменялось: здесь полоски разместились одна под одной, блоки остались такими же и в footer уже 1 колонка.

И изменяем до (я сейчас вам покажу). Здесь у нас была версия для горизонтального положения телефона и (двигаем, двигаем) для вертикального положения телефонов — самая мелкая версия, выглядит вот так. Все точно так же, только теперь надпись одна под одной, все блоки один под одним, и эта версия у нас для самого маленького мобильного телефончика, и меню у нас теперь находится вот здесь.

Резиновые сайты в Adobe Muse. Просмотр резинового примера сайта. Растягивание.

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

Давайте еще раз я вам растяну до максимальной версии, покажу, что у нас было в самом начале по 4 блока, и вот так вот изменяю — раз, два, три, четыре и до самого маленького. Самая маленькая версия для мобильного телефона. Нельзя сказать, что это полностью резиновость какая-то, но если в прошлой версии Adobe Muse у нас была возможность сделать только три версии, то есть это версия для планшета, для мобильного телефона, для компьютера, то здесь уже, как минимум, получается 6 версий. В 2 раза больше версий можно сделать будет в Adobe Muse CC 2016. Мы еще ждем, конечно, обновлений. Обновления еще не вышли, но мы уже можем попробовать в действии увидеть на примере, как работает responsive web design / резиновость. Мы можем делать сайты, которые легко будут подстраиваться под любые версии стационарных компьютеров и мобильных гаджетов.

Резиновые сайты в Adobe Muse. Вывод и дополнительные обзоры.

Еще я советую вам посмотреть видео. Забейте в поиске responsive Adobe Muse 2016 presentation и пролистайте до того места, где видео, и нажмите на responsive Adobe Muse 2016 presentation и (я уже открывал эту страничку) и посмотрите обязательно это видео. Здесь происходит сама презентация именно Adobe Muse 2016. Очень интересно человек рассказывает и показывает, как он сверстал респонсивный резиновый сайт в Adobe Muse, и что в результате получилось. Это презентация самой компании версии Adobe Muse CC 2016.

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

Смотрите обзор уже обновленной версии программы:

Резиновая версия Adobe Muse CC 2015.1 — самое долгожданное обновление программыСоздание мобильной версии сайтаРезиновая верстка или параллакс эффект? (CC 2015.1)Мини-курс Adobe Muse — Гибкая верстка. Точки остановки

Автор видеоурока —
Дмитрий Шаповалов.

4 комментария к “Резиновые сайты в Adobe Muse (СС 2016)

  1. Странно, видео по запросу Responsive Adobe Muse 2016 presentation уже нигде не доступно. Очень странно. Как будто везде следы подчистили.

  2. Хорошо выкрутились с верхним горизонтальным меню. Просто сделали его маленьким и чтоб плавало.
    На самом деле с горизонтальным меню в Мьюзе гигантский косяк. Его нельзя сделать разного размера под разные разрешения монитора.

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

Подтвердите, что Вы не бот — выберите самый большой кружок: