резиновые сайты в 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. Хорошо выкрутились с верхним горизонтальным меню. Просто сделали его маленьким и чтоб плавало.
    На самом деле с горизонтальным меню в Мьюзе гигантский косяк. Его нельзя сделать разного размера под разные разрешения монитора.

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

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

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