Если вы читаете это, то вероятнее всего вы только начинаете своё знакомство с Adobe muse. В этой статье я расскажу вам как создать сайт в Adobe muse. Прошу обратить внимание на то, что в этом гайде я не буду учить вас дизайну, а лишь научу пользоваться базовым инструментарием Adobe muse. Для начала вам нужно перейти во вкладку "файл", что находится в левом верхнем углу программы. Далее выбираем "новый сайт" ставим постоянную ширину, макс. ширину страницы 1080, 8 столбцов и средник 20. В конечном итоге должно выйти вот так:
Ширина в 1080 пикселей нам понадобится для того, что бы создать "резиновый" сайт. Далее перейдём на домашнюю страницу. После создания сайта вас должно перекинуть на вкладку "План". Здесь вы можете увидеть "Домашнюю страницу" и шаблоны страниц. Давайте перейдём на домашнюю и рассмотрим инструменты.
1. Инструмент "выделение". Как понятно из названия, этот инструмент
нужен для того, что бы выделять. Я думаю более подробно
рассматривать его не потребуется. :)
Теперь давайте добавим любое изображение на ваш сайт. Для этого вам нужно открыть его в папке и перетащить в Adobe muse. После вы сможете разместить его на нужном вам месте, для этого просто нажмите ЛКМ для того, что бы вставить его в исходном размере или зажмите ЛКМ для того, что бы изменить его размер. Должно получиться как-то так:
2. Далее у нас инструмент рамка. Выберите его, наведите на ваше
изображение. Вы увидите как по центру изображения появились два
круга. Теперь наведитесь на них, зажмите ЛКМ и проведите мышкой в
любую из сторон. Вы увидите как изображение двигается внутри
"фрейма" (области внутри которой располагается изображение).
3. Инструмент "Текст". При помощи этого инструмента вы сможете
создать область внутри которой будет возможно напечатать этот самый
текст. Создайте текстовый фрейм и напечатайте в нём что-нибудь.
Теперь обратите своё внимание на верхнюю часть предложения. Там вы
можете увидеть шрифт (По умолч. Arial), размер текста, цвет и другое.
Здесь я не вижу смысла рассматривать каждый инструмент т.к. они все
довольно просты в использовании.
4. Теперь перейдём к инструментам "Прямоугольник" и "Фрейм". Я не
вижу в них значительной разницы, поэтому рассмотрим как их как 1
инструмент. При нажатии ЛКМ по любому из этих инструментов вы
сможете создать эллипс. Давайте создадим прямоугольник или эллипс.
Если вы создали треугольник, то вы сможете закруглить его края при
помощи инструмента "Радиус скругления". Находится он правее
обводки и толщины обводки.
Теперь снова обратите внимание на верхнюю часть программы.
Измените цвет вашей фигуры на чёрный или любой другой, который
отличается от фона и нажмите на оранжевую кнопку "Стандартное". В
выпадающем меню нажмите на "Курсор над кнопкой" и затем измените
цвет вашей фигуры на любой другой. Далее снова нажмите на
оранжевую кнопку состояния и раскройте пункт "Выцветание" (это
нужно для плавного перехода). Теперь откройте предпросмотр
страницы при помощи сочетания клавиш "ctrl + shift + e" и наведите
курсор на вашу фигуру. Это был простой пример анимации. Всё тоже
самое вы можете делать с "Эффектами" (Они правее), непрозрачностью
и, что самое главное с любыми другими фреймами. Вот несколько
примеров:
Так же для того, что бы переход из состояния "Курсор над кнопкой" в состояние "Стандартное" стал плавным вам нужно: снова перейти в настройку состояний, нажать на стандартное и уже там ещё раз поставить галочку на выцветание.
Так же обращу ваше внимание на то, что вы можете вы можете вставить любое изображение в любой фрейм. Для этого вам нужно нажать на оранжевую надпись "Заливка" и там выбрать пункт "Добавить". Настройки положения изображения находятся ниже.
5. Инструмент "Рука". Довольно прост в использовании, просто выберете
его, зажмите ЛКМ и проведите мышкой в любую из сторон.
6. Инструмент "Лупа". Нужен для того, что бы увеличивать. Зажмите ЛКМ
для выбора области, которую хотите увеличить, левый Alt для
уменьшения.
7. Инструмент "Якорь". Используется для того, что бы перебросить
посетителя сайта на нужное вам место при нажатии. Растяните свою
фигуру вниз для того, что бы страница увеличилась в высоте и где-
нибудь в нижней части создаёте якорь. Теперь давайте вернёмся к
нашему тексту, выделим его, а далее добавим "Гиперссылку". Для этого
нажмите на "Добавить или фильтровать", а далее выберите там ранее
созданный якорь. Должно выйти как-то так:
Правую часть меню мы рассмотрим в одной из следующих статей. Всем спасибо за прочтение!