Создание веб-сайтов для мобильных устройств с помощью Adobe Muse
Затем добавим содержимое на страницу Section 01.
- Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, и три текстовых фрейма, расположенных во второй области слева. Эти три текстовых фрейма включают круг с номером 01, замещающий текст для этого раздела и оранжевую кнопку Телефон. Скопируйте выбранные элементы.
- Нажмите клавиши Command+J (Mac) или Control+J (Windows) и введите первые несколько букв названия раздела Section 01. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 01, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
- Вставьте скопированные элементы на страницу Section 01 макета «Телефон». С помощью инструмента Выделение выровняйте их по центру страницы с помощью направляющих, которые отобразятся на некоторое время.
На странице Section 01 будет размещаться краткая информация о компании, а также элемент, с помощью которого пользователи мобильных устройств смогут с легкостью позвонить в компанию. При разработке веб-сайтов для мобильных устройств можно добавить новый тип ссылки, с помощью которого посетители могут прикоснуться к экрану смартфона и вызвать окно для набора номера. Это выгодно отличает мобильную версию сайта от обычной, поскольку потенциальные клиенты могут достаточно просто обратиться в компанию по телефону.
Чтобы добавить в макет «Телефон» ссылку для набора телефонного номера, выполните указанные ниже действия.
- С помощью инструмента Выделение выделите кнопку Телефон.
- В текстовом поле меню Ссылки введите «tel:+1», а затем введите следующий текст:
tel:+14155551234
Это формат, который браузеры мобильных устройств распознают как ссылку на номер телефона.
- Нажмите клавишу Return или Enter, чтобы сохранить ссылку.
Примечание. Если требуется создать ссылку на адрес электронной почты, в текстовом поле меню Ссылки введите следующий текст:
mailto:[email protected]
После добавления ссылки для кнопки Телефон дизайн страницы Section 01 можно считать завершенным.
- Нажмите на вкладку Черновик (компьютер) для перехода на страницу Черновик. Выберите белый прямоугольник со скругленными краями, используемый в качестве фона, зеленый круг с номером 02, текстовый фрейм Section 02, встроенную карту и зеленую кнопку Карта. Скопируйте выбранные элементы.
- Нажмите клавиши Command+J (Mac) или Control+J (Windows), а затем введите первые несколько букв названия страницы Section 02. Нажмите клавишу стрелки вниз, чтобы выбрать страницу Section 02, а затем нажмите клавишу Enter или Return, чтобы открыть ее в представлении Дизайн.
- Вставьте элементы, скопированные в действии 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. Это обеспечивает качественное отображение на любом экране при любом уровне масштабирования.
Улучшения производительности и исправление ошибок
Улучшение производительности при рисовании, вводе текста и перемещении по содержимому позволяет эффективно работать со сложными страницами, содержащими несколько точек остановки.
Настройка свойств и значка веб-сайта в 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