Из этой статьи вы узнаете, как создавать веб-сайты для мобильных устройств и смартфонов.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

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

Необходимо определить ширину окна браузера, для которой разрабатывается сайт. Затем можно продолжить создание сайта. Дополнительные сведения о создании сайтов для мобильных устройств с помощью адаптивных макетов см. на странице Создание адаптивных веб-сайтов.

Рекомендуем ознакомиться с этой статьей, чтобы узнать о том, как создать альтернативные макеты для мобильных устройств.

Дизайн веб-сайтов для мобильных устройств

Adobe Muse позволяет создавать макеты сайтов для отображения веб-материалов на настольных компьютерах, смартфонах и планшетах. Функции разработки дизайна сайта для мобильных устройств позволяют создавать дополнительные макеты веб-сайта как для телефонов и планшетов, так и для настольных ПК.

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

Для создания альтернативного макета для мобильных устройств выполните следующие действия.

  1. Откройте Adobe Muse и выберите «Файл» > «Новый сайт».

    Выберите «Постоянная ширина», чтобы создать сайты для конкретных устройств.
    Выберите «Постоянная ширина», чтобы создать веб-сайты для мобильных устройств.

  2. Выберите «Постоянная ширина» и нажмите «Дополнительные настройки» в том же диалоговом окне.

    Дополнительные настройки для нового сайта
    Дополнительные настройки при создании нового сайта.

  3. Укажите максимальную ширину страницы.

    Определите подходящую ширину браузера для мобильных устройств и введите значение.

  4. Введите значения для параметров «Поля» и «Отступы» для сайта для мобильных устройств. Введите следующие сведения.

    • Ширина и высота страницы: позволяет задать исходные размеры страницы. Muse автоматически увеличивает высоту страницы по мере добавления на нее содержимого, поэтому максимальное значение высоты страницы не задается.
    • Столбцы и их ширина: столбцы визуально делят веб-страницу Muse на равные части, позволяя точно выравнивать элементы дизайна. Muse автоматически устанавливает ширину столбца в соответствии с указанным количеством столбцов и значением средника.
    • Поля и отступы: поля — это свободная область вокруг веб-страницы, за пределами области дизайна. Отступ позволяет очистить область в пределах периметра дизайна веб-страницы.

    Нажмите кнопку «ОК».

    Можно начинать работу над разработкой макетов для веб-сайтов для мобильных устройств.

Добавление макета «Телефон» для существующего сайта Adobe Muse

Создавая новый проект, можно разработать один макет, а затем с помощью того же самого файла MUSE создать альтернативные макеты сайта.  При публикации или экспорте сайта в Adobe Muse автоматически формируется файл с именем sitemap.xml, содержащий список всех страниц для всех макетов. Файл sitemap.xml загружается вместе с другими ресурсами сайта. Это позволяет улучшить оптимизацию сайта в поисковых системах, помогая поисковым системам индексировать сайт, чтобы страницы правильно классифицировались в результатах поиска.

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

  1. Откройте существующий файл MUSE, для которого нужно добавить альтернативный макет телефона.

  2. Откройте каждую страницу в проекте и выберите «Страница» > «Добавить альтернативный макет» > «Телефон».

    Параметры добавления макета «Телефон»
    Добавьте макет «Телефон», чтобы создать сайт для мобильных устройств.

  3. С помощью меню можно выбрать существующий макет, чтобы создать его копию. В нашем примере выберите макет Компьютер, чтобы на его основе создать макет для телефонов.

    Обратите внимание, что существует возможность копировать план сайта, атрибуты страницы и заливку браузера. Не меняйте настройки по умолчанию, чтобы скопировать существующие данные макета сайта для настольного ПК в макет «Телефон».

  4. Нажмите кнопку «ОК», чтобы закрыть диалоговое окно и добавить макет «Телефон».

    Приложение Muse создаст план сайта для макета «Телефон». В нем будут содержаться скопированные названия страниц, структура сайта и атрибуты страницы-шаблона. Рядом с названием кнопки макета «Телефон» теперь не отображается значок плюса (+), поскольку этот макет уже добавлен в проект Muse.

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

    Можно добавить новые страницы, щелкнув значок плюса (+) справа от миниатюры главной страницы. После настройки карты сайта можно приступить к дизайну мобильного решения.

    Сведения о настройке страниц-шаблонов для макета «Телефон» см. в следующем разделе.

    Создайте карту сайта для макета «Телефон», добавив новые страницы
    Создайте карту сайта для макета «Телефон», добавив новые страницы.

Настройка страницы-шаблона и добавление общих элементов веб-страниц

  1. В режиме просмотра «План» дважды нажмите страницу «Шаблон-А» для телефонов A; страница открывается в режиме просмотра Дизайн.

  2. Откройте интерфейс Заливка в браузере для задания фонового изображения.

  3. В разделе «Изображение» нажмите Добавить изображения. Перейдите к файлу, который требуется задать в качестве фонового изображения, и выберите его.

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

  4. В раскрывающемся списке Подгонка выберите «Заполнение» и нажмите в центральном положении.

  5. Нажмите область серого цвета за пределами страницы или в любом месте на панели управления, чтобы закрыть панель Заливка в браузере.

Добавление гиперссылок для перемещения по сайту

Функция Гиперссылки в приложении Adobe Muse обеспечивает удобное создание ссылок на внешние страницы, загружаемые файлы, разделы в пределах той же страницы и другие объекты. Надлежащая настройка перемещения по веб-сайту обеспечивает удобство просмотра его страниц для посетителей. Кроме того, рациональная организация перемещения по сайту упрощает оптимизацию веб-сайта под системы поиска. Дополнительные сведения см. в разделе Создание гиперссылок.

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

Параметры «Гиперссылки»
Фильтрация ссылок в списке путем ввода первых нескольких букв в текстовом поле меню «Ссылки».

Добавление содержимого на страницы шаблона «Телефон»

Начнем с окончательного оформления домашней страницы.

  1. Перейдите на вкладку Внутренняя страница (телефон). Скопируйте группу из четырех кнопок.
  2. С помощью инструмента Перейти на страницу перейдите на страницу Домашняя страница (телефон) и вставьте группу скопированных объектов. Ссылки, добавленные в предыдущем разделе, сохраняются, поэтому теперь на домашней странице и на странице-шаблоне Внутренняя страница используются одинаковые элементы на навигации по сайту.
  3. С помощью элемента Выделение разместите кнопки по центру домашней страницы рядом с нижним колонтитулом.
  4. Нажмите на вкладку Черновик (компьютер) для перехода на страницу «Черновик». Скопируйте текстовый фрейм «There's more than one way to solve a problem» в области слева.
  5. Перейдите на вкладку Домашняя страница (телефон) и вставьте скопированный текст. С помощью инструмента Выделение разместите текстовый фрейм по центру страницы над кнопками навигации.
Дизайн готовой домашней страницы
Дизайн готовой домашней страницы.

Затем добавим содержимое на страницу 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:designers@design-is-fun.com

После добавления ссылки для кнопки Телефон дизайн страницы 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 в соответствующем окне. Можно изменить значения высоты и ширины в коде, чтобы изменить размеры карты в соответствии с размерами небольшого экрана устройства.

Изменение значений размеров встроенных HTML-элементов в коде
Если требуется изменить размеры встроенных HTML-элементов, можно обновить соответствующие значения в коде.

Если вы открыли окно Редактировать HTML, нажмите кнопку «ОК», чтобы закрыть его без внесения изменений.

  1. Выделите кнопку Карта.

На этот раз мы добавим ссылку на другой веб-сайт (Google Карты), чтобы посетители мобильной версии сайта могли просмотреть полную версию карты в новом окне браузера.

  1. Скопируйте приведенную ниже ссылку и вставьте ее в текстовое поле меню Ссылки.

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Нажмите слово «Ссылки» слева от меню Ссылки. В открывшемся диалоговом окне установите флажок Открывать ссылку в новом окне или новой вкладке. Кроме того, в поле Подсказка введите следующий текст: Map to Adobe Fremont.
Параметры «Гиперссылка»
Настройка ссылки для открытия в новом окне браузера и добавление подсказки.

  1. Нажмите в любом месте рабочей среды, чтобы закрыть диалоговое окно Ссылки.

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

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

Страница Section 03 содержит виджет формы контактной информации, которая для обработки отправляемых с ее помощью данных использует серверные сценарии и базу данных Business Catalyst. При нажатии кнопки Опубликовать и отправке файлов сайта из программы Muse эта форма будет функционировать автоматически.

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

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

На этом создание страницы Section 03 завершено. Для кнопки Отправить не требуется создавать ссылку, поскольку она уже задана в виджете формы контактной информации.

Последняя страница макета «Телефон», страница Section 04, содержит виджет Слайд-шоу. Виджеты в программе Muse совместимы со всеми современными браузерами для настольных ПК и мобильных устройств, поэтому нет необходимости вносить какие-либо изменения, чтобы слайд-шоу функционировало на сенсорном экране.

Выполните указанные ниже действия, чтобы скопировать содержимое страницы-черновика из макета для настольных ПК на страницу Section 04 в макете «Телефон».

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

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

В следующем разделе Разработка дизайна макета сайта для мобильных устройств в Muse рассматривается процесс обновления ресурсов для всех мобильных платформ, а также процедура публикации сайта, созданного в Muse, с помощью каждого из макетов для мобильных устройств.

Обновление и оптимизация ресурсов для веб-сайта для мобильных устройств

Планшеты и смартфоны значительно уступают настольным ПК в вычислительной мощности, скорости подключения и объеме памяти. Это значит, что при разработке дизайна сайта для мобильных устройств обязательно учитывать этот момент.

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

  1. Нажмите клавиши Command/Control+7, чтобы отобразить макет «Компьютер», а затем дважды нажмите файл шаблона-A макета на настольных ПК, чтобы открыть страницу «Шаблон-А» в представлении «Дизайн».
  2. На панели управления перейдите на вкладку «Ресурсы». Если она закрыта, выберите «Окно» > «Ресурсы».
  3. Выберите большое фоновое изображение с зелеными холмами. Выбранный ресурс будет выделен на панели «Ресурсы».
  4. Нажмите имя ресурса (background.jpg), чтобы развернуть список его экземпляров на сайте. Обратите внимание, что файл фонового изображения указан в списке три раза. При этом он обозначен двумя разными значками, указывающими на то, что это изображение используется и в макете «Телефон», и в макете «Компьютер».
Панель «Ресурсы»
Разверните ресурс background.jpg на панели «Ресурсы», чтобы узнать, где на сайте находятся его экземпляры.

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

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

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

Панель «Ресурсы»
Нажмите заголовок любого из столбцов на панели «Ресурсы», чтобы отсортировать элементы по выбранному типу.

Чтобы изменить графический объект и обновить все его экземпляры (во всех макетах), нажмите правой кнопкой мыши имя ресурса и в появившемся контекстном меню выберите команду «Редактировать оригинал».

Выбор команды «Редактировать оригинал» для обновления ресурса для всего сайта
Выберите команду «Редактировать оригинал», чтобы обновить ресурс для всего сайта.

Размещенный исходный файл будет открыт в приложении Photoshop, Fireworks или в программе для редактирования изображений, в котором он был создан, после чего в изображение можно быстро внести нужные изменения.

После сохранения измененного исходного файла и возврата в приложение Muse рядом с этим элементом на панели «Ресурсы» будет отображаться значок несоответствия, указывающий на то, что версия графического объекта на сайте больше не совпадает с исходным файлом. Снова нажмите файл правой кнопкой мыши и в появившемся контекстном меню выберите команду «Обновить ресурс», чтобы обновить все экземпляры этого графического объекта в соответствии с новой версией.

Используйте команду «Обновить ресурс», чтобы обновить все экземпляры ресурса, используемые на сайте
Используйте команду «Обновить ресурс», чтобы обновить все экземпляры ресурса, используемые на сайте.

Предварительный просмотр макетов для мобильных устройств

Существует несколько способов предварительного просмотра созданных макетов сайта.

В представлении «Дизайн» для макета «Компьютер», нажмите кнопку «Просмотр», чтобы отобразить встроенный эмулятор, использующий Webkit и позволяющий работать с кодом HTML, CSS и JavaScript. Перед тем как опубликовать сайт и просмотреть его на устройстве, в меню «Просмотр» можно выбрать нужный макет и просмотреть, как сайт будет отображаться в браузере.

В представлении «Дизайн» для макета «Телефон» нажмите кнопку «Просмотр», чтобы отобразить версию сайта для телефонов. В меню «Размер окна просмотра» выберите пункт «iPhone 4», «iPhone 5», «Samsung Galaxy S III» или «Nokia Lumia 920», чтобы просмотреть, как макет сайта будет отображаться на соответствующих устройствах и на экранах разных размеров.

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

Нажмите значок справа от раскрывающегося меню «Размер окна просмотра», чтобы просмотреть макет в альбомной или портретной ориентации.

В раскрывающемся меню «Размер окна просмотра» представлены соотношения высоты и ширины страницы для большинства экранов современных мобильных устройств.

Некоторые из смартфонов (например, Motorola Droid) оборудованы более широкими экранами. При просмотре сайта на таком устройстве функция Viewport приложения Muse автоматически масштабирует ширину макета для мобильных устройств в соответствии с фактическими размерами экрана устройства.

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

Если в режиме предварительного просмотра нажать кнопку «i» рядом с меню «Размер окна просмотра», появится примечание со ссылкой на средство Adobe Edge Inspect. Средство Edge Inspect позволяет использовать расширение для браузера Chrome для подключения к компьютеру различных мобильных устройств, а затем синхронизировать просмотр содержимого в браузере Chrome для настольных ПК и на подключенных устройствах.

Приложение Edge Inspect позволяет использовать браузер Chrome и функцию «Предварительный просмотр сайта в браузере» программы Adobe Muse для автоматического просмотра одной и той же страницы одновременно на экране настольного ПК и на экранах подключенных устройств (Chrome должен быть выбран в качестве браузера по умолчанию).

При желании также можно приобрести инструмент Reflection стороннего разработчика, которое позволяет отобразить на экране компьютера эмулятор нужного мобильного устройства (подключенного с использованием того же сетевого подключения). При открытии сайта на смартфоне или планшете в эмуляторе будет отображаться сенсорный экран используемого устройства.

Дополнительные возможности, связанные с макетами для мобильных устройств

Фиксированные нижние колонтитулы

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

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

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

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

При создании новых сайтов в Muse можно заметить, что в диалоговом окне «Новый сайт» установлен флажок «Фикс. нижний колонтитул».

Параметры «Новый сайт»
При создании новых сайтов автоматически устанавливается флажок «Фикс. нижний колонтитул».

В целом, при создании сайтов всегда рекомендуется использовать функцию фиксированных нижних колонтитулов. Однако если длина страниц превышает желаемую (на странице мало содержимого и страницы достаточно короткие), можно всегда снять этот флажок в диалоговом окне «Свойства страницы».

Отключите «Фикс. нижний колонтитул» в окне «Свойства страницы».
Завершив создание сайта, обновите свойства страницы и снимите флажок «Фикс. нижний колонтитул».

Закрепленные элементы

Код, создаваемый Muse, проверен на соответствующее отображение и надлежащее функционирование на всех современных платформах и во всех существующих браузерах.

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

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

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

Параметры «Закрепленные элементы»
При разработке макетов сайта для мобильных устройств на панели управления недоступен параметр «Фикс.».

Публикация сайта с использованием макетов для мобильных устройств

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

Нажмите кнопку «Опубликовать» или выберите «Файл» > «Передача на FTP-сервер», чтобы передать файлы сайта на сервер размещения.

При публикации сайта Muse с несколькими макетами для доступа к нему используется один URL-адрес. Поэтому необходимо лишь зарегистрировать имя домена, например, как указано ниже:

http://www.my-site.com

При публикации сайта с двумя или тремя разными макетами приложение Muse создает код для сайта, который включает сценарии определения. Они служат для определения типа компьютера или устройства, а также типа браузера, которые посетитель использует для просмотра страницы.

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

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

Дополнительные сведения о работе с приложением Muse см. в статьях и руководствах, представленных на странице справочной информации Adobe Muse.

Использование инструмента «Перейти на страницу» для копирования содержимого сайта из одного макета в другой

Нажмите вкладку Шаблон (компьютер), чтобы открыть страницу-шаблон макета «Компьютер» в представлении Дизайн.

В приложении Muse можно с легкостью переключаться с одного макета на другой с помощью инструмента навигации Перейти на страницу. Эта кнопка отображается в представлении Дизайн для любого проекта с несколькими макетами.

  1. Нажмите кнопку Перейти на страницу.
Кнопка «Перейти на страницу»
Кнопка «Перейти на страницу» представляет собой значок со стрелкой, указывающей на страницу.

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

Примечание. Кроме нажатия кнопки Перейти на страницу, можно также воспользоваться сочетанием клавиш Command+J (Mac) или Control+J (Windows).

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

  1. Введите первые три буквы названия нужной страницы. В этом примере введите первые три буквы слова «Шаблон»: «шаб».

В списке под текстовым полем будут отображены все соответствующие запросу названия страниц.

  1. Нажмите клавишу стрелки вниз два раза, чтобы выбрать страницу Шаблон-A для макета «Телефон», а затем нажмите клавишу Enter или Return, чтобы открыть ее.

В представлении Дизайн откроется готовая для редактирования страница Шаблон (компьютер).

Другим удобным способом перехода между различными макетами сайта является использование новых сочетаний клавиш:

  • Command/Control+7 — открытие макета для настольных ПК
  • Command/Control+8 — открытие макета для планшетов
  • Command/Control+9 — открытие макета для телефонов

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

Далее мы создадим вторую страницу-шаблон для макета «Телефон» и добавим элементы дизайна.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет