Categories

Как редактировать шаблоны Muse

Ryan DeWitt Октябрь 20, 2014
Rating: 3.5. From 2 votes.
Please wait...

Благодаря этому туториалу вы узнаете, как редактировать шаблоны Muse.

Как редактировать шаблоны Muse
  1. Разархивируйте шаблон и откройте папку sources/AdobeMuse. Откройте файл .muse с помощью редактора Adobe Muse:

    How to edit Muse templates-1
  2. Все страницы и подстраницы доступны к просмотру в режиме Plan (Plan mode). Для внесения изменений страницу можно открыть двойным щелчком мыши:

    How to edit Muse templates-2
  3. Выберите инструмент текста (text tool). Нажмите на нужном участке текста, чтобы его можно было изменить. Дважды нажмите курсором на стрелках слайдера для того, чтобы открыть следующий слайд и изменить его подписи:

    How to edit Muse templates-3
  4. Также можно изменить цвет текста, используя для этого Color Widget. Размер шрифта можно менять с помощью настроек инструмента текста (Text tool options):

    How to edit Muse templates-4
  5. Можно выделять и перемещать стрелки и различные другие элементы, используя инструмент выбора элемента (Selection Tool):

    How to edit Muse templates-5

Давайте рассмотрим пример добавления ссылки на кнопку «далее» (more button).

  1. Выберите текст. Нажмите на разделе Ссылки (Hyperlinks). Отметьте поле «Открывать ссылку в новом окне» (Open link in new window option), если вы хотите, чтоб после нажатия кнопки содержимое страницы открывалось в новом окне или вкладке браузера. Выберите «редактировать стили ссылок» (Edit Link Styles):

    How to edit Muse templates-6
  2. Определите для новой ссылки цвет и другие характеристики стилей. Выберите цвет ссылки при наведении на нее курсора, подчеркивание, и т. д.:

    How to edit Muse templates-7
  3. Добавьте ссылку и нажмите Ввод (Enter):

    How to edit Muse templates-8

Теперь давайте заменим картинку.

  1. Нажатием правой кнопки мыши на картинке можно ее заменить. Нажмите на поле «Заменить изображение» (Replace Image):

    How to edit Muse templates-9
  2. Выберите новую картинку:

    How to edit Muse templates-10
  3. Вы ее заменили:

    How to edit Muse templates-11
  4. В рассмотренном примере в шаблоне используется изображение-логотип. Его можно заменить любой другой картинкой тем же способом, что был указан ранее.

Замена видео.

  1. В рассмотренном шаблоне также есть встроенное видео. Нажмите правой кнопкой мыши на видео и выберите «Редактировать HTML» (Edit HTML):

    How to edit Muse templates-12
  2. Измените код вставленного видео:

    How to edit Muse templates-13

На следующем этапе рассмотрим, как изменять текст кнопок меню.

  1. У каждой страницы сайта есть заголовок, например, Домашняя страница, О нас, и т. д. Эти заголовки страниц используются в подписях кнопок меню. Текст кнопок меню изменяется автоматически, когда вы меняете заголовок страницы:

    How to edit Muse templates-14
  2. Перейдите в режим Plan (Plan mode), правой кнопкой мыши нажмите на странице и выберите «Переименовать страницу» (Rename Page):

    How to edit Muse templates-15
  3. Аналогично переименуйте другие страницы сайта:

    How to edit Muse templates-16
  4. Вы увидите, что подписи кнопок меню изменились автоматически:

    How to edit Muse templates-17

Сохранение в формате HTML.

  1. Сохраните файл с расширением .muse после внесения изменений.

  2. Перейдите в Файл (File) — Экспортировать в HTML (Export as HTML) для того, чтобы сохранить свой .muse файл для сайта на html:

  3. Выберите папку и укажите адрес сайта:

    How to edit Muse templates-18
  4. Экспортировав в HTML, вы получите файлы сайта. Загрузите их на сервер (или локальный клиент) для того, чтобы проверить, как сайт выглядит и работает. Пожалуйста, обратите внимание, что в случае работы с шаблоном на локальном сервере, некоторые элементы могут не отображаться (до тех пор, пока файлы сайта не будут загружены на действующий сервер):

    How to edit Muse templates-19
  5. Мы загрузили файлы сайта на сервер и открыли их. После внесения изменений шаблон выглядит следующим образом:

    How to edit Muse templates-20

Также воспользуйтесь детальной видео-инструкцией:

Как редактировать шаблоны Muse
Эта запись была размещена в Вопросы Оплаты, JS Animated туториалы и помечена как edit, muse, template. Добавьте в закладки постоянную ссылку.

Submit a ticket

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

Чат
We help you to choose the right product.