Адаптивные картинки в Adobe Muse

Адаптивные картинки по ширине браузера

Адаптивные картинки по ширине браузера в Adobe Muse.

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

В этом видеоуроке мы рассмотрим одну очень интересную функцию в программе Adobe Muse версии 2015.1. Она касается гибкой части программы. Все инструменты гибкой верстки упакованы в мой курс «Гибкая верстка. Точки остановки.»

Адаптивные картинки. Пример.

И давайте сразу приступим к примеру. Допустим, у вас на странице есть 3 картинки и вы хотите разместить их во всю ширину окна браузера. Вы размещаете их последовательно друг за другом впритык к области границы браузера. Но при просмотре вы видите следующую картину. Эти 3 адаптивные картинки ограничены вот этой данной областью, и они работают только при уменьшении просмотра в браузере. Как только мы увеличиваем размер браузера до больших значений, чем занимают данные картинки, то они остаются у нас на месте, и по бокам появляются два таких белых поля.

Но мы хотим, например, чтобы эти картинки растягивались также до границ браузера при увеличении ширины браузера. Давайте зайдем снова на домашнюю страницу. Для каждой из картинок в разделе «Перспектива» установлено «Гибкое значение ширины и высоты». Это гибкая версия сайта, поэтому наши картинки уменьшаются при уменьшении ширины браузера. Если мы увеличиваем ширину браузера, то видите, даже здесь в режиме «Просмотр» увеличение картинок не происходит. Что же нам нужно сделать?

Адаптивные картинки. Убираем фиксацию ширины страницы.

Для того, чтобы эти адаптивные картинки растягивались на всю ширину браузера независимо от его ширины, нам необходимо убрать фиксации ширины страницы сайта. Делается это с помощью вот этих стрелочек, которые есть в программе. Эта настройка позволяет нам как раз убрать фиксацию ширины и позволить страницы расширяться при увеличении ширины браузера. Если мы нажмем на данную стрелочку, они повернуться обе в другую сторону. И таким образом, при просмотре теперь страницы в режиме «Просмотр» мы увидим, что данные 3 картинки занимают уже всю область между левой и правой границами браузера. Если начнем сейчас уменьшать, они будут уменьшаться. Если мы увеличиваем браузер и даже увеличиваем больше, чем эти 3 картинки занимают место, то они пропорционально увеличиваются размеру окна браузера. Давайте я верну все на место.

Адаптивные картинки. Про инструмент фиксации ширины.

Вот такая вот настройка есть в программе Adobe Muse в версии СС 2015.1. Если вы наводите курсор мыши на данные стрелочки, то сама программа вам подсказывает: нажмите, чтобы зафиксировать ширину страницы. Таким образом, мы фиксируем ширину страницы, и данные стрелочки это показывают. Наша ширина страницы зафиксирована и в режиме «Просмотр» мы снова будем видеть вот такую картину с белыми полями по бокам.

Если же нам все-таки не нужна функция «Фиксация ширины страницы», мы нажимаем на данные стрелочки, чтобы вновь расширить нашу страницу. Таким образом, весь контент к которому применены функции в «Перспективе» растяжение по ширине и высоте, будут растягиваться пропорционально ширине браузера. Даже если картинка будет у нас расположена где-то отдельно, то в режиме «Просмотр», мы увидим, что она будет уменьшаться и увеличиваться в зависимости от ширины браузера пропорционально его ширине.

Вот такая интересная функция есть в программе Adobe Muse в версии CC 2015.1 по работе с адаптивными картинками.

Смотрите и подписывайтесь! Мой видеоканал YouTube — Adobe Muse Уроки

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

4 комментария к “Адаптивные картинки по ширине браузера

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

    • Для прямоугольных блоков с заливкой картинкой приходится только выбирать либо использовать его на всю ширину браузера, либо с гибкой шириной и высотой (в настройках «Перспектива»). При использовании прямоугольника с гибкой шириной и высотой есть возможность отключить фиксирование ширины страницы («< << >>>»), тогда он будет все время растягиваться по ширине браузера вместе со всей страницей.

      Возможно Вам будет полезен виджет «Полноэкранный блок» — четвертый по счету в таблице. Скоро и по нему будет видеоурок.
      А по работе с инструментами гибкой верстки и точками остановки есть отдельный курс (смотрите в разделе КУРСЫ).

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

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