Адоб мьюз – Начало работы с Adobe Muse

Создание веб-сайтов для мобильных устройств с помощью Adobe Muse

Затем добавим содержимое на страницу Section 01.

  1. Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, и три текстовых фрейма, расположенных во второй области слева. Эти три текстовых фрейма включают круг с номером 01, замещающий текст для этого раздела и оранжевую кнопку Телефон. Скопируйте выбранные элементы.
  2. Нажмите клавиши Command+J (Mac) или Control+J (Windows) и введите первые несколько букв названия раздела Section 01. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 01, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
  3. Вставьте скопированные элементы на страницу Section 01 макета «Телефон». С помощью инструмента Выделение выровняйте их по центру страницы с помощью направляющих, которые отобразятся на некоторое время.

На странице Section 01 будет размещаться краткая информация о компании, а также элемент, с помощью которого пользователи мобильных устройств смогут с легкостью позвонить в компанию. При разработке веб-сайтов для мобильных устройств можно добавить новый тип ссылки, с помощью которого посетители могут прикоснуться к экрану смартфона и вызвать окно для набора номера. Это выгодно отличает мобильную версию сайта от обычной, поскольку потенциальные клиенты могут достаточно просто обратиться в компанию по телефону.

Чтобы добавить в макет «Телефон» ссылку для набора телефонного номера, выполните указанные ниже действия.

  1. С помощью инструмента Выделение выделите кнопку Телефон.
  2. В текстовом поле меню Ссылки введите «tel:+1», а затем введите следующий текст:
    tel:+14155551234

Это формат, который браузеры мобильных устройств распознают как ссылку на номер телефона.

  1. Нажмите клавишу Return или Enter, чтобы сохранить ссылку.

Примечание. Если требуется создать ссылку на адрес электронной почты, в текстовом поле меню Ссылки введите следующий текст:
mailto:[email protected]

После добавления ссылки для кнопки Телефон дизайн страницы Section 01 можно считать завершенным.

  1. Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, зеленый круг с номером 02, текстовый фрейм Section 02, встроенную карту и зеленую кнопку Карта. Скопируйте выбранные элементы.
  2. Нажмите клавиши Command+J (Mac) или Control+J (Windows), а затем введите первые несколько букв названия страницы Section 02. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 02, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
  3. Вставьте элементы, скопированные в действии 1, на страницу Section 02 макета «Телефон». С помощью инструмента Выделение выровняйте их по центру страницы с помощью направляющих.

Страница Section 02 содержит встроенный код HTML интерактивной карты, созданный веб-сайтом Google Карты.

В руководстве «Начало работы с Muse» подробно рассматривается процесс использования функции Muse для работы со встраиваемыми HTML-элементами, чтобы скопировать исходный код с веб-сайта Google Карты и вставить его на страницу.

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

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

helpx.adobe.com

Заметки о выпуске Adobe Muse

Интеграция с Adobe Animate CC

Размещение композиции Adobe Animate CC непосредственно в режиме просмотра «Дизайн» из CC Library.

Усовершенствования Creative Cloud Assets

Можно архивировать и восстанавливать ресурсы, сохраненные в Creative Cloud, Creative Cloud Libraries, созданные с помощью приложений CC для настольных компьютеров, а также мобильные проекты.

Интеграция с магазином Typekit Marketplace

Приобретайте шрифты для использования в проектах Adobe Muse CC, используя технологии Typekit для синхронизации шрифтов и работы в Интернете.

Инструмент масштабирования

Экономьте времяпри поискесодержимого на веб-сайте с помощью инструмента «Рука», который позволяет выполнять масштабирование, панорамирование и прокрутку определенных областей.

Элементы библиотеки сохраняют точки остановки

Элементы библиотеки, содержащие точки остановки, теперь сохраняют их при перетаскивании на страницу «Дизайн». Это обеспечивает быструю интеграцию виджета с веб-сайтами Muse.

Кнопка «Общий доступ»

После публикации веб-сайта Adobe Muse CC нажмите кнопку «Общий доступ» для отображения параметров общего доступа к URL-адресу веб-сайта и ссылке на редактирование сайта с помощью функции In-Browser Editing.

Диалоговое окно «Объединение» In-Browser Editing

Полностью обновленное диалоговое окно «Объединение» позволяет просмотреть изменения непосредственно в проекте. Кроме того, синхронизировать изменения с помощью In-Browser Editing стало проще.

Усовершенствования работы с формами

reCAPTCHA v2

Muse CC 2017 поддерживает новый экземпляр reCAPTCHA, который содержит поле «Я не робот». Корпорация Google в недавнем времени изменила создаваемые ключи, поэтому новые ключи будут поддерживать только новую версию reCAPTCHA. Ключи, созданные до августа, поддерживаются обеими версиями reCAPTCHA. Проверьте эту функцию и сообщите нам, удалось ли инструменту Google определить, что вы не робот!

Кнопка «Отправить»

В Adobe Muse CC 2017 кнопка «Отправить» в форме теперь визуализируется с помощью HTML и CSS. Это обеспечивает качественное отображение на любом экране при любом уровне масштабирования. 

Улучшения производительности и исправление ошибок

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

helpx.adobe.com

Настройка свойств и значка веб-сайта в Adobe Muse

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

Если при создании нового сайта в приложении Adobe Muse нажать «Файл» > «Сохранить», создается один файл .muse. Это похоже на создание файла PSD в Photoshop, который может содержать любое количество слоев, графических элементов и связанных ресурсов. Этот файл .muse — единственный файл, который вам потребуется для разработки сайта, поскольку он содержит все изображения, ссылки, код и файлы сайта. При совместной работе над проектом сайта вы можете отправить коллеге копию файла .muse. Он в свою очередь сможет открыть ее, внести в нее изменения и опубликовать эти изменения.

Обычно не рекомендуется, чтобы с файлом .muse одновременно работали два или более человек. Закончив добавление содержимого на сайт, вы можете опубликовать его и отправить коллегам файл .muse для дальнейшего редактирования и добавления дополнительного содержимого. По окончании они могут отправить вам обновленный файл .muse (содержащий их изменения). Это позволит избежать перезаписи работы друг друга.

Также можно создать файл .muse и опубликовать временный сайт. А затем предоставить коллегам общий доступ к файлу .muse. Они могут открыть его, выбрав меню «Файл» > «Сохранить как», и вносить изменения в свою копию, в то время как вы будете продолжать работать со своей копией. При этом изменения коллег будут сохраняться в новом опубликованном ими временном сайте. Однако при таком рабочем процессе две версии сайта не будут синхронизированы — ваша версия файла .muse не будет обновляться изменениями, внесенными коллегами, и наоборот.

При каждом внесении значительных изменений в существующий веб-сайт рекомендуется всегда сохранять копию файла .muse с помощью меню «Файл» > «Сохранить как». При создании нового файла .muse немного измените его имя и храните все копии файла .muse в одной папке на компьютере. Таким образом, если клиенту больше понравится первоначальная версия сайта, вы всегда сможете открыть соответствующий файл .muse с предыдущим дизайном и опубликовать его, чтобы вернуть сайт к прежнему виду.

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

Большинство веб-дизайнеров предпочитают сохранять файлы .muse с описательными именами, например my_site_v1.muse и my_site_v2.muse. Также в имя файла .muse можно добавить дату его создания, чтобы было легче найти более старую версию, например my_site_2012-4-13.muse и my_site_2012-4-30.muse. Называть файлы можно любым удобным для вас способом.

helpx.adobe.com

Отправить ответ

avatar
  Подписаться  
Уведомление о