Как создать мобильную версию сайта adobe muse
В этом видео показан пример работы будущей версии программы Adobe Muse. На официальном сайте компании находится пример резиновой верстки, которая будет реализована в следующей версии программы Adobe Muse, и благодаря которой Вы сможете создавать резиновые сайты в Adobe Muse, которые будут легко подстраиваться под различные размеры экранов от самых больших до самых малых.
Резиновые сайты в Adobe Muse. Вступление.
Сегодняшний видеоурок посвящен будет Adobe Muse CC 2016 (CC 2015.1). Многие спрашивают меня о том, где я взял информацию, о возможности создавать резиновые сайты в Adobe Muse, так сказать, респонсивные – responsive site. Я сейчас вам в этом видео покажу. Сама компания 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. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.
Адаптивный веб-дизайн — это подход к созданию веб-сайтов, которые можно просматривать на различных устройствах от настольных компьютеров до мобильных устройств. Adobe Muse позволяет создавать адаптивные веб-сайты для устройств с любым размером экрана, без написания кода. С помощью адаптивных макетов можно создавать веб-сайты с унифицированным дизайном.
В предыдущих версиях Adobe Muse для этих целей использовались альтернативные макеты. При работе с адаптивными макетами все, что нужно — это использовать один файл .muse для всех устройств.
Веб-сайты с мобильной версией и веб-сайты только для мобильных устройств становятся все более популярными, а адаптивные макеты позволяют сэкономить средства, время и усилия. Кроме того, они позволяют изменять дизайн страницы для определенных точек остановки. В будущем практически все веб-сайты станут мобильными. Позиции адаптивных веб-сайтов с мобильной версией в поисковых системах значительно выше. Такие веб-сайты обеспечивают более высокие результаты для SEO при поиске с мобильных устройств и настольных ПК.
По мере развития технологий и устройств спрос на адаптивные макеты значительно вырастет. Узнайте, как создавать и оформлять адаптивные веб-сайты и перейти с альтернативных макетов на адаптивные в Adobe Muse.
Начало работы с адаптивными макетами | Создание адаптивных веб-сайтов | Создание адаптивных веб-сайтов | Переход к адаптивным макетам |
Общие сведения о точках остановки
Точки остановки в адаптивном макете позволяют задать различные макеты для окон браузера разной ширины. Точки остановки представляют ширину браузера в пикселях и представлены минимальными, максимальными или минимальным и максимальным значениями. Внешний вид оформленной страницы в каждой точке остановки соответствует тому, что увидят пользователи при соответствующей ширине окна браузера. Точки остановки позволяют наглядно представить оформление страницы в окнах браузера разного размера, а также протестировать реакцию расположенных на странице объектов на изменение ширины окна браузера.
Обратите внимание на панель «Точки остановки» непосредственно под линейкой, на которой отображаются все точки остановки на странице.
Чтобы просмотреть связанные значения ширины браузера и размера страницы, наведите курсор мыши на панель точек остановки.
При щелчке по точке остановки активная точка выделяется цветом. Остальные точки остановки становятся неактивными. Просмотреть и изменить цвет точки остановки можно в разделе Свойства точки остановки (щелчок правой кнопкой мыши по точке остановки > Свойства точки остановки ).
Мобильное меню (раздвижная панель) в Adobe Muse
В этом видеоуроке мы научимся делать мобильное меню (раздвижная панель) для сайта с помощью стандартного мини-приложения (виджета) программы Adobe Muse – раздвижная панель. В последнее время многие задаются таким вопросом – как сделать мобильное меню для сайта.
Смотрите об этом в этом видео:
Мобильное меню (раздвижная панель)
В этом видео мы сделаем мобильное меню (раздвижная панель) для сайта, но оно будет отличаться от нашего предыдущего урока, поскольку мы будем делать это мобильное меню при помощи других стандартных мини-приложений или виджетов в программе Adobe Muse. Мы будем использовать раздвижную панель. Выглядеть это меню будет вот так. Допустим, у нас есть мобильная версия сайта, и меню будет выезжать и назад сворачиваться по клику на нем.
Подготовка основных блоков.
Давайте перейдем в режим «Дизайн». Я сделал это меню на обычной домашней странице версии «Компьютер». Выглядит оно вот так. Состоит из двух мини-приложений программы Adobe Muse. Первое мини-приложение – это мини-приложение из раздела «Панели» – называется «Раздвижная панель». Второе мини-приложение, которое я использовал – это мини-приложение «Меню», из которого выбираем «По вертикали». Из этих двух мини-приложений состоит все мобильное меню. Меню по вертикали находится внутри раздвижной панели. Если мы сейчас разберем данную структуру, то мы можем вытащить сейчас отдельно меню, и отдельно у нас находится вот такое мини-приложение, составленное из раздвижной панели.
Далее я создал альтернативный макет «Телефон» и перенес туда это меню. Давайте снова перейдем в режим «Домашний» и я снова буду работать здесь. Берем раздвижную панель и перетаскиваем на сайт. Берем также меню по-вертикали из «Библиотеки мини-приложений». И давайте будем делать мобильное меню (раздвижная панель).
Настройки приложения – Мобильное меню:
Настройки приложения – Раздвижная панель.
Меню у меня уже готово. Теперь поработаем с раздвижной панелью. Здесь в раздвижной панели уже есть какой-то контент, его здесь три штуки, они переключаются. Нажимаем здесь правую кнопку мыши и выбираем «Удалить содержимое мини-приложения». Таким образом, мы удаляем все, что находится внутри данного мини-приложения в области содержимого и две лишний раздвижные панели, которые нам не нужны. Также выбираем по правой кнопки мыши «Удалить все использованные стили». Выбираем сразу для текста «Open Sans». И давайте отредактируем эту верхнюю раздвижную панель. Здесь мы напишем: «Мобильное меню», текст у нас стоит «Arial», мы поставим «Open Sans» и немножко сдвинем его вниз, а также подвинем его вперед. Можно сделать еще буквы все заглавными и жирными. Я поставлю для букв цвет белый. Сейчас их не будет видно, но я для данной раздвижной панели сделаю заливку черным. Я немножко поспешил. Здесь нужно выставить сначала состояние «Стандартное», а потом сделать заливку черным. Почему я это делаю? Потому что при редактировании стандартного состояния, все остальные состояния этой кнопки будут автоматически подстраиваться под это первое.
Сборка мобильного меню и раздвижной панели.
Дальше, что нам нужно сделать – это просто переместить данное меню в область содержимого нашей раздвижной панели. Я размещаю его вот здесь, отпускаю, и оно подхватывается областью содержимого раздвижной панели. Можно немного ее уменьшить по размеру данного блока. И, в принципе, наше мобильное меню готово.
Осталось его немного настроить. Для этого мы заходим в настройки раздвижной панели и выставляем здесь галочки «Закрывать все» и «Перекрывать элементы ниже», чтобы наши элементы, которые расположены ниже данной раздвижной панели не уезжали вниз при раскрытии меню. Если мы уберем данную галочку, то наше меню при разворачивании будет смещать все элементы, которые расположены ниже.
Просмотр готового блока – Мобильное меню (раздвижная панель).
Давайте зайдем в режим «Просмотр» и посмотрим, что у нас получилось. В режиме «Просмотр» у нас есть вот такое меню, которое разворачивается и сворачивается при нажатии на него. Переходим назад в режим «Дизайн» (сейчас у нас данное меню развернуто), мы кликаем сюда левой кнопкой мыши, и меню сворачивается. Теперь при просмотре у нас будет показываться только меню – сама кнопка, и когда мы на нее нажимаем, у нас выдвигается остальное меню нашего сайта. При повторном нажатии меню сворачивается. Дальше я просто добавил альтернативный макет для сайта «Телефон», и у меня появились данные кнопки.
Размещение и меню в планшетной версии сайта.
Давайте создадим теперь версию не «Телефон», а «Планшет». Нажимаю «ОК» и у меня появляется версия для планшета. Перехожу в режим «Дизайн» в данной версии. У меня открывается дополнительное окошко «Домашняя [Планшет]», теперь перехожу в режим «Домашняя [Компьютер]» и выделаю мобильное меню, которое только что создал. Нажимаю клавиши «Ctr+C», чтобы скопировать либо нажимаю правую кнопку мыши и выбираю «Копировать». Перехожу в режим «Дизайн» в домашней странице «Планшет» и нажимаю здесь сочетания клавиш «Ctr+V» либо нажимаю правую кнопку мыши и выбираю «Вставить». Мобильное меню вставляется на домашнюю страницу в режиме «Планшет». Теперь я могу его разместить, где мне будет удобно. Могу растянуть его побольше, например, сделать во всю ширину планшетной версии.
Давайте зайдем в режим «Просмотр», у нас открывается режим «Просмотр» в планшетной версии, допустим, мы просматриваем на iPad в вертикальном расположении. И теперь при нажатии на мобильное меню у нас будут выезжать вот такие кнопки страниц нашего сайта. При повторном нажатии это меню сворачивается.
Таким образом, мы можем создать мобильное меню (раздвижная панель) из двух стандартных виджетов программы Adobe Muse – это виджет «Раздвижной панели» и виджет «Меню по вертикали».
На этом я заканчиваю данный урок. Обязательно ставьте лайки к этому видео, смотрите мои предыдущие и следующие видеоуроки, подписывайтесь на мой видеоканал. С вами был Дмитрий Шаповалов. До встречи в следующих видеоуроках!
Создание мобильной версии сайта в Adobe Muse.
В уроке рассказывается о создании мобильной и планшетной версии сайта в программе Adobe Muse. Создание мобильной версии сайта, а также планшетной версии не такая уж сложная задача, просто нужно быть особенно внимательным, иметь усидчивость и выполнять некоторые простые действия в программе.
Создание мобильной версии сайта. Вступление.
В этом видеоуроке я покажу, как сделать мобильную и планшетную версии сайта в программе Adobe Muse. Работать мы будем в программе Adobe Muse версии. Должен сказать, это у меня самая последняя версия стоит, но скоро должна выйти еще одна версия, которая будет позволять создавать резиновые сайты. Это будет очень интересно, так что будем ждать обновлений. Для того, чтобы сильно не затягивать начало, давайте сразу начинать. Я подготовил небольшой макет сайта на английском языке, чтобы вас не отвлекал сам текст или контент, который расположен на этой страничке.
Создание мобильной версии сайта. Добавление макета.
Я открываю свой файл. Допустим, у нас есть вот такая небольшая страничка, подписная, которую мы хотели бы перевести или создать из нее мобильную версию этой страницы. В принципе, создавать мобильную версию сайта или странички не так сложно. Для этого давайте перейдем в режим плана сайта и здесь мы увидим три кнопки: кнопка “Компьютер”, кнопка “+планшет” и “+телефон”. Сама программа подсказывает нам, что нужно сделать: нужно щелкнуть по данной кнопке, чтобы добавить оформление телефона на сайт. Давайте мы сразу это и сделаем.
Добавление макета Телефон и настройки.
Перед нами выскочило окошко “Добавить макет – телефон”. Здесь мы можем скопировать план сайта, атрибуты страницы, заливку браузера в новый макет. Я обычно выбираю здесь ту версию, которая у меня обычно существует. У нас существует версия “Компьютер”. Поэтому я выбираю здесь версию “Компьютер” и оставляю галочки “Копировать план сайта” и “Копировать атрибуты страницы”. Заливку браузера можно не ставить, поскольку у нас там заливки особо и нет на этой странице и заливка приведет к немного большей скорости загрузки страницы (несущественно).
Создание мобильной версии сайта. Копирование контента в макет “Телефон”
Давайте зайдем в наш макет с компьютера. Вот он. Нажимаю клавишу Ctrl+A, чтобы выделить все элементы на странице. Нажимаю клавиши Ctrl+C, чтобы скопировать в буфер обмена страницу, перехожу снова на дизайн для мобильного телефона, на закладку Домашняя -> Телефон. Нажимаю Ctrl+V, чтобы вставить все, что у меня находится в буфере обмена. Сейчас мы видим, что у нас тут полнейший разброд и шатание, я поставлю немножко меньше масштаб, чтобы вы увидели.
Редактирование контента в макете “Телефон”
То есть вот наша ширина макета для телефона, а наши элементы гораздо больше, чем нам бы хотелось. Не снимая никаких выделений, все это вместе перетаскиваем, чтобы наша картинка совпала с левым верхним углом. Вот так. Вот здесь. И теперь все, что нам остается делать – это подравнять все элементы под макет телефона. Я выделяю первые два текста, подгоняю их примерно вот так. Эта надпись нас вполне устраивает. Я немножко уменьшаю размер текстового блока. Эту надпись необходимо уменьшить в размерах, сделаю ее 36, и так же уменьшу размер текстового блока, подровняю немного. Это название нашего сайта, текст можно даже уменьшить немного (24, чтобы было пропорционально).
Берем нашу форму, перетаскиваем ее сюда же, расположим где-нибудь, вот так. Можем немного уменьшить размер картинки, поскольку у меня здесь сверху был затемняющий слой, я его тоже уменьшил. Уменьшил затемняющий слой, потом размер самой картинки. Далее переношу следующую надпись, так же уменьшаю ее под размер нашего макета для телефона. Теперь что же нам делать с этими текстовыми блоками?
Мы можем немного увеличить размер нашего шаблона, размер макета можем растянуть и увеличить, взять перенести это пониже, эти слои. Так, у нас где-то еще надпись «экстрим» – сразу его сюда переместим, чтобы он не потерялся. Сразу уменьшу. Можно теперь немного увеличить, чтобы вам было лучше видно. Перетаскиваем поэлементно каждый из элементов, центрируем его посередине и под ним оставляем текст, делаем это для каждого элемента. Уменьшаю. У нас осталось свободное поле. Давайте выделим снова все эти элементы и подвинем вверх. Немножко у нас съехало, сейчас верну все назад. Центрируем, переносим надпись последнего нашего блока и форму подписки. Вот, в принципе, и все. Наш макет для телефона уже готов.
Публикация и просмотр мобильной версии сайта.
Создание мобильной версии сайта. Макет “Планшет”.
Давайте пойдем дальше, я расскажу вам, как создать планшетную версию сайта. Для этого мы должны точно так же вернуться в режим плана сайта, например, в режим плана “Компьютер” или в режим плана “Телефон». Нажимаем точно так же “Создать планшетную версию”, уже можем выбрать либо с компьютера, либо с телефона мы можем экспортировать.
Давайте выберем, например, с телефона, нажимаем “Окей”, создается макет сайта, и здесь уже свойства страницы мы видим 768х1024 предлагает программа. Это свойства страницы для домашней для макета планшетного, для планшета. Нажимаем “Окей” и точно так же берем копируем, например, из версии сайта для телефона. Нажимаем Ctrl+A, Ctrl+C, переходим в режим дизайна для планшета и нажимаем Ctrl+V. Видим, что все блоки перенеслись. Я сейчас уменьшу масштаб. Подровняю по центру. Все должно совпадать. Вот так мы создали и планшетную версию сайта.
Публикация и просмотр планшетной версии сайта.
К сожалению, планшета у меня нет, чтобы проверить, но думаю, что вы опубликуете сайт на businesscatalyst точно так же. Здесь можете выбирать совершенно любое имя. Я просто уже публиковал, поэтому имя у меня выбралось автоматически. Можно выбрать новый сайт либо публиковать тот же самый. Нажимаю “Окей” и для предварительного просмотра вся моя эта страничка грузится в трех вариантах на сервер Adobe businesscatalyst для того, чтобы просмотреть сайт. Мы опять же видим нашу компьютерную версию сайта, но если мы залезем в планшет, то мы увидим планшетную версию. Если залезем в телефон, то у нас запустится версия сайта для телефона.
Создание мобильной версии сайта. Экспорт в HTML и просмотр структуры сайта.
Еще один интересный момент давайте я экспортирую из программы нашу страничку, как html. Заходим в меню File -> Экспортировать как html или нажимаем клавиши Ctrl+E. Здесь указываем доменное имя, выбираем путь, куда мы хотим сохранить на своем компьютере. Я создам здесь дополнительную папку, назову ее “Mount” и в эту папку у меня сохранится html-версия моей странички. Нажимаю “Окей”.
И давайте посмотрим, что же у нас теперь в этой папке. Вот эта папка, захожу в нее и здесь вы видите, что здесь есть папка “CSS” (здесь прописанные наши стили лежат, файлы css), здесь у нас лежат картинки, которые используются на сайте, здесь у нас скрипты в папке scripts и еще мы видим 2 папки: “Font” и “Tablet”, в которых сохранены стили и файл индекса html для телефона и здесь точно так же сохранены стили и файл html для планшетной версии сайта. Файл-индекс и файлы стилей скриптов и индекс-html находятся в папке для компьютерной версии сайта. И еще папки для мобильной и телефонной версии. Теперь, если вы загрузите эти файлы на ваш хостинг, ваша страничка будет адекватно открываться на всех трех устройствах: на компьютере, на планшете и на телефоне.
Вот так просто, дорогие друзья осуществляется создание мобильной версии сайта и планшетной версии сайта в программе Adobe Muse. На этом все. Я с вами прощаюсь. Смотрите мои видеоуроки по Adobe Muse, подписывайтесь на мой канал, оставляйте комментарии внизу. До встречи в следующих уроках.
В этом уроке вы научитесь настраивать SEO для вашего Landing Page, а так же создадим мобильную версию вашего одностраничника, чтобы ваши посетители могли комфортно смотреть ваш сайт через телефон.
Федор Васильев
Меня зовут Федор Васильев. Рад приветствовать вас на своем обучающем канале. Обучение – это непрерывный процесс, который никогда не заканчивается. Поэтому сам постоянно учусь и осваиваю новые технологии. Я накопил достаточно знаний в создании и настройке сайтов и скриптов, а так же различных программ, моя специализация Adobe Muse, Joomla, Wordpress, Edge Animate.
5 полезных сервисов для бесплатного образования и поиска работы
127 полезных и бесплатных онлайн академий
Ресурсы для objective-C программистов
' data-post_id="301308" data-user_id="0" data-is_need_logged="1" data-lang="en" data-decom_comment_single_translate=" комментарий" data-decom_comment_twice_translate=" комментария" data-decom_comment_plural_translate=" комментариев" data-multiple_vote="1" data-text_lang_comment_deleted='Комментарий удален' data-text_lang_edited="Отредактировано в" data-text_lang_delete="Удалить" data-text_lang_not_zero="Поле не NULL" data-text_lang_required="Это обязательное поле." data-text_lang_checked="Отметьте один из пунктов" data-text_lang_completed="Операция завершена" data-text_lang_items_deleted="Объекты были удалены" data-text_lang_close="Закрыть" data-text_lang_loading="Загрузка. ">
Читайте также: