Полный обзор адаптивного дизайна в Adobe Muse

______________________________

В этом видео мы поговорим, про то как делать адаптивные сайты в Adobe Muse.

Когда мы создаем сайт, мы можем в окне настроек сразу выбрать гибкое значение ширины либо постоянную ширину.
Гибкое значение ширины - это значит, что ширина будет подстраиваться под различные разрешения экранов посетителей и в этом случаи сайт будет адаптивным. Если же мы выберем постоянную ширину, то ширина сайта будет та которую мы зададим и она не будет меняться.

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

Для того, чтобы сайт был адаптивным выбираем - гибкое значение ширины.

Если же у тебя уже сделан сайт.
Тогда заходим в свойства страницы и в настройках просто меняем постоянную ширину на гибкое значение ширины.

Также здесь должна быть фиолетовая полоса точки остановки, если ее нет, то заходим в ПАРАМЕТРЫ ПРОСМОТРА, вот сюда, и выбираем пункт ТОЧКИ ОСТАНОВКИ.
После, у нас появляется эта полоса.

И давай разберем как это работает и по какому принципу нужно подгонять сайты под адаптивный дизайн.

Берем за этот ползунок и начинаем тянуть, уменьшая размер сайта.
И как только видим, что элементы сайта стали друг другу мешать, отодвигаем немного назад, когда еще все хорошо смотрится и отпускаем мышь. После этого над полосой остановки появляется, в этом месте, знак плюс - нажав на который мы создаем точку остановки. И затем мы можем внести нужные правки. (вносим правки)
Соответственно в разных точках остановки, мы можем располагать элементы по разному. Таким образом, чтобы все хорошо смотрелось.

Ровно таким же образом нужно проходить до конца, до ширины 320 пикселей, она здесь установлена в качестве минимальной.

[bftrqoo]

Четко и по существу. Спасибо. Пишите видеокурсы по адаптивной верстке, вас приятно слышать и слушать.

[cnfspkv]

Хорошо чётко и по существу, но слишком громкая фоновая музыка.

[izobretateldobra]

Ваге! Громадное спасибо тебе, человечище ) Так быстро, чётко, без воды!

[messederien]

Спасибо огромное! Быстро и понятно, без утомительных лирических отступлений))
Всего наилучшего!

[IgorExSfera]

Зачет! Мне музыка вообще не мешала, даже веселее было запоминать) Все четко.

[baksamara]

Ваге, благодарю за прекрасную работу. Подача понятная и четкая. Кучу видео просмотрел, пока не наткнулся на твое. Лайк и подписка 100%!

[Burav]

Молодец, друг! Пересмотрел уйму видео по этой теме. Самое понятное оказалось у тебя! Моё уважение! Подписываюсь на твой канал.

[djbykov]

Ваге! Еще один большой респект! Снова искал ответ на наболевшее и снова помогают твои материалы!!!

[qjrxbfh]

Все четко и понятно, с правильной интонацией.
А по поводу фона сказать наверно и нужно, но без истерики.

Спасибо!

[lvtnnhj]

Самый лучший обзор по данной теме, что я видел. Всё по делу и без воды. Снимаю перед вами шляпу.

[sgvubln]

Благодарю! Очень хороший ликбез по адаптивному дизайну. Давно не работала с программой, это видео помогло восстановить пробелы в памяти)

[djtema]

Прекрасно просто!!!!Спасибо тебе большое, решил вопросы на которые искал ответы очень долго!

[oneonall]

красавчик, все хорошо, детально объяснил без лишней воды

[sharipov-denis]

искал информацию про адаптивный дизайн, и нашел все ответы в этом видео!!! Видео супер!!!

[fiyamiii]

молодец! Всё четко, понятно, без воды

[mishakel]

НАКОНЕЦ ТО! Хоть один нормальный чувак рассказал ВСЮ суть адаптивного сайта! КРАСАУЧЕГ!!!! ЛАЙК + ПОДПИСКА!

[TRAHAHINIK]

Крутой голос, очень понятное объяснение. Респект.

[a.d.]

ну отлично! дай бог здоровья дружище! видос отличный!

[ivankonov]

спасибо за урок) ясно, доходчиво и по делу)

[yjdbjlz]

Отличный видос, инфа собрана очень актуальная. Без лишнего говна. Посмотрел с удовольствием, делай еще.