Навигация по каталогу при помощи Adobe Muse - Блог MuseMaster - Все, что необходимо знать по работе с программой Adobe Muse })

Навигация по каталогу при помощи Adobe Muse

Навигация по сайту

Навигация по каталогу при помощи Adobe Muse

962
Наши спонсоры

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

Прежде чем начать, рекомендуем вам ознакомиться с итогом этого урока.

Не секрет, что Adobe Muse — одно из лучших приложений, позволяющее создавать сайты без написания кода.Оно разработано для дизайнеров, которые хотели бы работать с веб-проектами, но мало что знают о HTML, JavaScript или CSS. Благодаря обширной библиотеке мини-приложений теперь это не проблема.

Комбинируем мини-приложения

Следующий вариант размещения контента является довольно привычным, так как применяется на многих сайтах:

По горизонтали — для размещения главных разделов. В примере используется мини-приложение Меню – По горизонтали.
По вертикали — для подразделов. Выберите мини-приложение Композиции – Пустая. Это предоставит вам возможность скомбинировать несколько композиций наиболее удобным для вас образом.
Миниатюры и информация для каждого продукта (в данном случае Композиция 2 помещена внутрь Композиции 1).

Abobe Muse widgets

Параметры композиции помогут вам настроить процесс перехода от одного раздела к другому. К примеру, для перехода от Футболок к Свитерам в Композиции 1 используется Переход – По вертикали, а в Композиции 2 применен  классический Переход – Затухание.

Навигация по сайтуИспользуйте лайтбокс для миниатюр

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

Интернет-магазин миниатюры

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

www.manufacturedessai.it

Если вы хотите, чтобы при наведении на миниатюру появлялось сообщение “Нажмите для увеличения”, можете поверх миниатюры добавить прозрачный PNG слой. Adobe Muse предлагает следующие состояния, позволяющие применять стиль и изменять оформление объектов в зависимости от действий пользователя: Стандартное, Курсор над кнопкой, Нажата кнопка мыши, Активное. В данном примере выбрано Стандартное состояние, параметр Непрозрачность установлен на 0%.

Затем было использовано мини-приложение Композиции – Лайтбокс. Давайте посмотрим как это выглядит на практике:

museshopping.businesscatalyst.com

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

Статья подготовлена по материалами сайта Сreativedroplets

comments powered by HyperComments
Наши спонсоры
Материалы подобранные специально для вас

РЕКОМЕНДУЕМЫЕ МАТЕРИАЛЫ