Примечание.

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

Работа с иерархическими страницами-шаблонами

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

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

С помощью Muse версии 4.0 и более поздних можно создать страницу-шаблон A-Master, содержащую общие элементы, которые отображаются на нескольких страницах-шаблонах (например, добавить фон, верхний и нижний колонтитулы, как описано в предыдущих разделах), а затем создать дополнительные страницы-шаблоны, которые будут наследовать все элементы страницы-шаблона A-Master, а также содержать все уникальные элементы первого раздела сайта. Если имеется третья страница-шаблон, она может использовать элементы страницы-шаблона A-Master, а также все уникальные элементы второго раздела сайта.   

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

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

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

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

  1. При просмотре карты сайта в представлении План наведите указатель мыши на миниатюру страницы-шаблона A-Master. По обеим сторонам миниатюры появятся кнопки со знаком плюса (+). Нажмите значок плюса справа от страницы-шаблона A-Master, чтобы создать совершенно новую страницу-шаблон. По умолчанию новая страница-шаблон называется B-Master.
  2. Дважды нажмите текстовое поле под миниатюрой страницы B-Master и введите описательное имя новой страницы-шаблона: Основной.
  3. Нажмите правой кнопкой мыши миниатюру страницы-шаблона Основной и выберите в появившемся контекстном меню команду Шаблоны > A-Master.
Данное руководство предназначено для того, чтобы познакомить пользователя с рабочей средой приложения Adobe Muse, а также содержит сведения о том, как создать полнофункциональный веб-сайт без единой строчки кода. Вы также узнаете, как в приложении Muse создать карту сайта, научитесь работать со страницами-шаблонами и использовать параметры заливки в браузере.
Выберите в меню пункт «A-Master», чтобы применить его к странице-шаблону «Основной».

Обратите внимание, что после применения страницы-шаблона A-Master к странице Основной на ее миниатюре будет отображаться аналогичное оформление. Подпись A-Master синего цвета под миниатюрой страницы-шаблона «Главный» указывает на то, что к ней в действии 3 был применен шаблон A-Master.

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

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

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

  1. Нажмите страницу-шаблон Основной и перетащите ее на миниатюру страницы «food» в верхнем левом углу представления. Обратите внимание, что при перетаскивании миниатюры страницы-шаблона Основной на миниатюру страницы «food» подпись синего текста под последней меняется с [A-Master] на [Основная].

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

  1. Нажмите правой кнопкой мыши миниатюру страницы событий и выберите в появившемся контекстном меню пункт Шаблоны > Основной.
Данное руководство предназначено для того, чтобы познакомить пользователя с рабочей средой приложения Adobe Muse, а также содержит сведения о том, как создать полнофункциональный веб-сайт без единой строчки кода. Вы также узнаете, как в приложении Muse создать карту сайта, научитесь работать со страницами-шаблонами и использовать параметры заливки в браузере.
Использование контекстного меню для выбора шаблона «Основной» в качестве страницы-шаблона для страницы «events».

  1. Используя предпочтительный метод (как описано в действиях 4 и 5), выберите шаблон Основной в качестве страницы-шаблона для оставшихся трех страниц «home», «about» и «visit».

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

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

В этом примере иерархия одноуровневая. Другими словами, страница-шаблон Основной наследует содержимое страницы A-Master. Однако помните, что при необходимости можно создавать цепочку страниц-шаблонов. Например, можно создать страницу-шаблон с именем Верхний колонтитул, на которой будет находиться только содержимое верхнего колонтитула, потом создать страницу-шаблон с именем Нижний колонтитул, которая будет наследовать содержимое страницы-шаблона Верхний колонтитул, а затем создать другую страницу-шаблон Основной, который будет наследовать все содержимое страницы-шаблона Верхний колонтитул (включая сам верхний колонтитул). В зависимости от дизайна сайта и сведений о том, что некоторые элементы скорее всего будут изменены, можно создать несколько уровней наследования. Разделение дизайна таким образом немного похоже на создание символики, поскольку можно изолировать определенные части дизайна, а затем впоследствии с легкостью найти и изменить нужную часть.

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

Добавление содержимого верхнего колонтитула на страницу-шаблон «Основной»

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

  1. В представлении «План» дважды нажмите миниатюру страницы-шаблона «Основной», чтобы открыть страницу и приступить к ее редактированию в представлении «Дизайн» (если она еще не открыта).
  2. С помощью инструмента «Прямоугольник» нарисуйте прямоугольник от верхнего левого угла видимой области браузера до верхнего правого (во всю ширину страницы). С помощью инструмента «Выделение» перетаскивайте манипуляторы прямоугольника вверх, налево и направо, пока на некоторое время не покажется граница красного цвета. Она указывает на то, что для прямоугольника задана ширина 100%, аналогично тому, как мы создавали область нижнего колонтитула ранее.
fig_30_building
Рисование прямоугольника в верхней части страницы во всю ширину окна браузера.

 

После перетаскивания маркеров размеры прямоугольника должны быть примерно 1160 пикселей в ширину и 253 пикселя в высоту. Значение положения по оси X равно -100. Это означает, что верхний левый угол прямоугольника находится на расстоянии 100 пикселей от верхнего левого угла страницы. Значение положения по оси Y равно 0 (верхний левый угол прямоугольника находится непосредственно в верхнем левом углу страницы по вертикали). Чтобы указать эти значения вручную, можно выделить прямоугольник и воспользоваться соответствующими полями на панели «Преобразование» или на панели управления.

  1. Задайте для обводки значение 0, а в меню «Заливка» выберите значение «Нет». Нажмите значок папки рядом с пунктом «Изображение» и выберите в появившемся диалоговом окне изображение tile-header.png. В раскрывающемся меню «Подгонка» выберите пункт «По горизонтали».
fig_31_building
Воспользуйтесь меню «Подгонка», чтобы расположить изображение в виде мозаики по горизонтали.

 

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

  1. Выберите Файл > Поместить или нажмите клавиши Command+D (Mac) или Control+D (Windows), чтобы открыть диалоговое окно «Импорт».
  2. Перейдите к папке с файлами примеров и выберите файл bg-ribbon.png. Нажмите кнопку «Открыть», чтобы выбрать его и закрыть диалоговое окно «Импорт».
  3. Нажмите один раз в центре прямоугольника верхнего колонтитула рядом с верхней частью страницы. Это позволит поместить один экземпляр изображения bg-ribbon.png с его исходными размерами.
  4. Используйте инструмент «Выделение» для выравнивания изображения оранжевой ленты так, чтобы она находилась по центру по вертикали в верхней части заголовка во всю ширину страницы.
fig_32_building
Оранжевая лента, выровненная по центру верхнего колонтитула.

 

Эта оранжевая лента будет служить фоном для меню верхнего уровня, порядок добавления которого рассматривается в следующем разделе.

Дублирование страницы-шаблона

Создание верхнего колонтитула страницы-шаблона «Основной» завершено. Такую страницу-шаблон можно применить для каждой страницы сайта, однако в нашем случае необходимо использовать две страницы-шаблона с разным дизайном. Страница-шаблона «Основной» в конечном итоге будет использоваться для страниц «home» и «visit». Для остальных страниц «food», «events» и «about» будет использоваться другая страница-шаблон.

Чтобы дублировать страницу-шаблон «Основной», выполните указанные ниже действия.

  1. В представлении «План» нажмите правой кнопкой мыши миниатюру страницы-шаблона «Основной».
  2. В появившемся контекстном меню выберите пункт «Дублировать страницу».
fig_38_building
Используйте контекстное меню, чтобы дублировать существующую страницу-шаблон «Основной».

 

Справа от страницы-шаблона «Основной» отобразится новая страница-шаблон с именем по умолчанию «Копия — Основной». Поскольку мы дублировали эту страницу-шаблон, основой нового шаблона так же является страница-шаблон A-Master.

  1. Дважды нажмите поле под новой страницей-шаблоном, чтобы переименовать ее в «Передний план».

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

  1. Выберите «Файл» > «Сохранить сайт».

Одно из преимуществ дублирования страницы-шаблона заключается в возможности отображения определенного содержимого поверх другого содержимого этой страницы, почти так, как если бы вы выбрали команду «Упорядочить» > «На передний план». Вариант такого отображения содержимого необходим для страниц «food» и «events».

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

Настройка отображения элементов страниц-шаблонов на переднем плане

В приложении Muse в представлении «Дизайн» можно выделить элемент страницы и выбрать для него в меню «Объект» настройку «На передний план», «Переложить вперед», «На задний план» или «Переложить назад», чтобы поместить этот элемент поверх другого элемента или за ним. (Можно также щелкнуть правой кнопкой мыши элемент или группу элементов и выбрать «Упорядочить» > «На передний план», «Переложить вперед», «На задний план» или «Переложить назад», чтобы задать порядок наложения.)

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

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

Для этого используется новый параметр «Объект» > «Переместить» > «На передний план шаблона». Кроме того, при редактировании страницы-шаблона в представлении «Дизайн» можно щелкнуть любой элемент правой кнопкой мыши и в появившемся контекстном меню выбрать команду «Переместить» > «На передний план шаблона».

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

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

  1. В представлении «План» дважды нажмите миниатюру страницы-шаблона «Передний план», чтобы открыть страницу и приступить к ее редактированию в представлении «Дизайн» (если она еще не открыта).
  2. С помощью инструмента «Выделение» выделите верхний колонтитул полностью, включая прямоугольник с мозаичным фоновым изображением, оранжевую ленту, виджет «Меню» и анимированный логотип, расположенный по центру верхнего колонтитула.
  3. Выбрав все содержимое верхнего колонтитула, нажмите его правой кнопкой мыши и выберите в контекстном меню команду «Переместить» > «На передний план шаблона». Обратите внимание, что в отличие от обычного синего контура, который появляется для выделенных объектов, для элементов переднего плана отображается красная рамка.
fig_39_building
Перемещение содержимого верхнего колонтитула на передний план с помощью контекстного меню.

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

  1. Не снимая выделения со всего верхнего колонтитула, закрепите его в верхней части страницы, чтобы при прокрутке страницы он всегда оставался видимым. Более подробная информация о закреплении объектов представлена в части 7 данного руководства. На данном этапе выберите на панели управления закрепление вверху по центру, чтобы закрепить верхний колонтитул на месте.
fig_40_building
Закрепите выбранный верхний колонтитул, выбрав положение вверху по центру.

  1. Нажмите страницу-шаблон «Передний план» и перетащите ее на страницу «food», чтобы применить этот шаблон. Повторите это действие для страниц «events» и «about».

После внесения этого изменения в подписи синего цвета будут указаны слова [Передний план]. Это означает, что для страниц «food», «events» и «about» теперь используется страница-шаблон «Передний план». При наведении указателя мыши на подпись [Передний план] появляется подсказка со сведениями о том, что за основу страницы-шаблона переднего плана взята страница-шаблон A-Master.

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

В следующей части данного руководства, Создание первого веб-сайта с помощью Muse | Часть 4, рассматривается использование встроенных HTML-элементов для отображения кода, скопированного с других веб-сайтов. Также вы узнаете о том, как добавлять виджет композиции «Лайтбокс» для оформления главной страницы.

Использование нескольких страниц-шаблонов и добавление анимации

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

Редактирование содержимого страницы-шаблона

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

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

  1. Дважды нажмите миниатюру страницы-шаблона в представлении План и отредактируйте ее содержимое в представлении Дизайн.

  2. Дважды нажмите миниатюру страницы-шаблона в представлении План, чтобы открыть ее в режиме просмотра Дизайн. Выделите элементы, которые необходимо отредактировать (которые должны быть поверх остальных элементов после помещения их на страницу сайта), и выберите команду Редактировать > Вырезать или используйте комбинацию клавиш Command-X (для Mac) или Control-X (для Windows).

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

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

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

В этом примере сайта логотип Kevin's Koffee Kart (красный велосипед с флагом) отображается поверх строки навигации сайта в верхнем колонтитуле. Содержимое верхнего и нижнего колонтитулов автоматически отображается на каждой странице, поскольку главная страница (и все другие созданные страницы) по умолчанию связана со страницей A-Master, на которой находится это содержимое. В большинстве случаев можно создать веб-сайт, все страницы которого будут использовать одну страницу-шаблон для обеспечения целостности сайта.

Однако данный сайт содержит уникальный анимированный логотип, который отображается только на главной странице. Если посмотреть образец сайта Kevin's Koffee Kart в Интернете, то можно заметить, что при загрузке главной страницы изображение красного велосипеда анимируется, создавая впечатление, будто он въезжает на страницу с левой стороны. Перейдите на другие страницы сайта и обратите внимание, что логотип анимирован только на главной странице; на остальных страницах он неподвижен.

В следующем подразделе вы узнаете, как создать дубликат страницы-шаблона и как назначить страницам определенную страницу-шаблон в представлении План.

Дублирование и удаление страниц-шаблонов

  1. Нажмите страницу План, чтобы открыть режим просмотра План. В нижней части представления План найдите миниатюру A-Master.

  2. Наведите курсор на миниатюру A-Master, при этом отобразится такой же знак плюса (+), как при добавлении новых страниц на карту сайта. Нажмите значок плюса (+) справа от миниатюры A-master. Этот прием можно использовать всегда, когда необходимо создать новую страницу-шаблон с нуля. Обратите внимание, что миниатюра пуста. Это означает, что на ней отсутствует содержимое, добавленное на страницу A-Master. Новая страница-шаблон по умолчанию имеет имя B-Master, однако можно щелкнуть в поле под миниатюрой и ввести новое имя.

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

  3. Нажмите крестик (X) в правом верхнем углу страницы B-Master, чтобы удалить ее (если таким образом вы случайно удалили существующую страницу-шаблон, выберите Редактировать > Отменить удаление страницы-шаблона, чтобы восстановить ее).

  4. Правой кнопкой мыши нажмите миниатюру страницы A-Master и выберите в контекстном меню команду Дублировать страницу. Появится новая миниатюра, отображающая дублированную страницу-шаблон, с именем «Копия A-Master».

    fig_59_getting
    Дублирование страницы A-Master в представлении «План».

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

  6. Правой кнопкой мыши нажмите миниатюру главной страницы. В открывшемся меню выберите Шаблоны > MasterFlash. Это действие свяжет страницу-шаблон MasterFlash с главной страницей.

    Примечание.

    Или можно перетащить миниатюру MasterFlash на миниатюру страницы «HOME», чтобы применить ее.

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

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

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

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

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

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

Деконструирование макетов сайтов

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

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

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

  • Настройка свойств сайта для определения размеров всех страниц
  • Использование направляющих для определения областей верхнего и нижнего колонтитулов на странице-шаблоне
  • Закрепление объектов в окне браузера с целью их размещения за пределами макета страницы
  • Настройка прокрутки или фиксированного положения заливки фонового изображения для создания интересных эффектов
  • Растягивание прямоугольников для отображения с шириной 100% для заполнения ширины окна браузера
  • Добавление виджетов «Раздвижная панель» и «Слайд-шоу» для отображения интерактивного содержимого страницы
  • Настройка и оформление виджетов «Меню» для создания навигации сайта
  • Создание ссылок привязки для перехода к определенным разделам страницы по вертикали или горизонтали
  • Вставка кода со сторонних сайтов (встроенный HTML-элемент) для добавления на страницы новых элементов

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

Пример 1: Happy Valley Adventure

fig01.master.b720

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

Просматривая файл .muse этого сайта, обратите внимание на следующие моменты.

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

  • Главная страница содержит нижний колонтитул, фоновое изображение которого имеет мозаичную заливку по горизонтали, ширину 100%. Оно закреплено в нижней части окна браузера. Второй графический элемент колонтитула (вершина горы) расположен по центру и также закреплен в нижней части браузера. Кроме того, он отображается поверх остальных мозаичных графических элементов нижнего колонтитула («Упорядочить» > «На передний план»). Такой прием подходит для мониторов всех размеров.
  • Навигационные ссылки слева переходят к тегам привязки, добавленным на длинную страницу с вертикальной ориентацией. Когда посетители нажимают ссылку, страница прокручивается для перехода к соответствующему содержимому. По мере открытия новых разделов сайта дизайн выглядит хорошо организованным и унифицированным.
  • Раздел с контактной формой главной страницы содержит встроенный HTML-элемент, отображающий элементы контактной формы, которая упрощает взаимодействие с посетителями и планирование будущих заказов.

Пример 2: Kevin's Koffee Kart

fig02.master.b720
На этом многоуровневом сайте используется виджет «Меню» и встроенный HTML-элемент.

Главная страница сайта Kevin's Koffee Kart содержит Flash-анимацию в верхнем колонтитуле и закрепленное изображение облака. При прокручивании страницы обратите внимание, что фоновое изображение закреплено и не прокручивается, а содержимое страницы прокручивается поверх него. Слайд-шоу воспроизводится автоматически, переключая изображения под встроенным HTML-кодом канала Twitter.

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

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

Для создания сайта Kevin's Koffee Kart использовались следующие правила проектирования.

  • Этот сайт содержит две похожие страницы-шаблона: страница-шаблон без Flash-мультимедиа применена к большинству страниц сайта, а вторая страница-шаблон с Flash-анимацией применена только к главной странице. Обе страницы-шаблона имеют нижние колонтитулы с шириной 100% с прозрачными границами и используют одно и то же виджет «Меню» для единообразия. После создания первого шаблона его элементы были скопированы и вставлены в то же место на втором шаблоне, чтобы обеспечить идеальное выравнивание всех элементов.
  • Страницы были упорядочены в представлении «План» для создания разделов сайта верхнего уровня и подуровня, что отражено в раскрывающихся элементах виджета «Меню».
  • Фоновое изображение карты, используемое в качестве заливки в браузере, отображается в исходном размере, а не использует мозаику. Оно выровнено по центру и не прокручивается под содержимым страницы.
  • Заливка фона страницы имеет сплошной белый цвет с небольшой прозрачностью, чтобы через нее просвечивалось изображение карты.
  • Главная страница содержит два полупрозрачных изображения облака, закрепленных в браузере. Прокрутите страницу по вертикали и обратите внимание, что закрепленные элементы не двигаются и остаются на своем месте даже при изменении размера окна браузера.
  • На главной странице используется встроенный HTML-элемент для отображения опубликованного содержимого канала Twitter.
  • Страница «Koffee» содержит виджет «Раздвижная панель», которое разворачивает и сворачивает панели при их нажатии, позволяя отобразить больший объем содержимого на небольшой площади страницы.
  • Страница «Origins» содержит виджет «Слайд-шоу с миниатюрами» для отображения интерактивной фотогалереи. На странице «Preparation» используются теги привязки для перехода к каждому разделу страницы, а страница «Kart Map» содержит встроенный HTML-элемент для отображения карты Google Локатор на основе текущего местоположения сотового телефона, используемого для данной учетной записи.

Пример 3: More than Square

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

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

Содержимое страницы выровнено по центру, имеет полупрозрачный фон и скругленные углы со стороны изображений архитектуры. Содержимое страниц, имеющих разную высоту, прокручивается по вертикали. Ссылки на сайты социальных сетей (Twitter, Facebook и YouTube) постоянно расположены с левой стороны страницы для создания перекрестных связей и поддерживают единообразный ассиметричный дизайн сайта.

Главная страница содержит фотогалерею с кнопками навигации вперед и назад, которая также медленно сменяет слайды автоматически, если посетитель не нажимает кнопки. Страница «How to Get Here» содержит интерактивную карту, созданную с помощью встроенного HTML-кода, скопированного с Google Карты.

Просматривая исходный файл .muse этого сайта, обратите внимание на следующие моменты.

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

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

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

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

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

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

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