Перейти к содержимому
  • Блок 3.7 - Создание меню для сайта

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

    4 занятий в этой категории

    1. Способы создания меню сайта

      44 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.8.1_Pochemu_dlya_menyu_luchshe_ispolzovat_vidzhet.mp4.38ed90a8afbcd0fa36ff355ebabd8737.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Обычным способом для создания мню нам нужно будет создать несколько текстовых фреймов и назначить на них ссылки на существующие странице. Давайте это сейчас и сделаем. Берем текстовый фрейм, создаем его, пишем название первой страницы "Главная". Заходим в режим "Редактирование текста", ставим текст по центру, стараемся выравнять по высоте. Далее выделим текст, сделаем размер 18, затем выходим из режима редактирования текста. Сделаем заливку оранжевого цвета. Итогом будет оранжевая кнопка для первой страницы сайта. Разместим ее в левом верхнем углу. Также нужно создать еще несколько таких же кнопок (по количеству пунктов в меню). Также для каждой кнопки нужно назначить несколько различных состояний.

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

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

      В дальнейшем при редактировании данного меню, если вы захотите что-то поменять, например, вы хотите сделать меню шире, вам можно будет лишь растянуть данное меню на нужную ширину, и автоматически все кнопки подравняются. То же самое вы можете делать и со шрифтами. Заходите в изменение шрифтов, выбираете нужный шрифт. Шрифт будет ровно расположен даже при изменении размера, а все остальные кнопки тут же будут подстраиваться. То есть при создании меню в ручную вы делаете очень много операций и очень долгое время, а при создании меню с помощью "Библиотеки мини-приложений" вы можете сделать все гораздо быстрее. Поэтому практически в 100% случаев мы рекомендуем использовать данный виджет программы Adobe Muse. На этом мы заканчиваем данный урок. Вам необходимо будет выполнить задание к данному уроку, ответить на вопросы и переходить к дальнейшему обчуению.

      • 3 комментария
      • 673 просмотра
    2. Созданию меню в автоматическом режиме

      45 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.8.2_Sozdanie_menyu_v_avtomaticheskom_rezhime.mp4.ee716eb63bda7a992621872c0903d033.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

      Далее есть настройка по размещению кнопок. Сейчас все кнопки размещены по горизонтали. Мы можем выбрать значение "По вертикали", и все кнопки автоматически разместятся по вертикали. Мы получаем быстрое вертикальное меню сайта. Далее мы можем поставить или убрать галочку "Редактировать вместе", и тогда при редактировании даже одной кнопки эти изменения применяются ко всем кнопкам меню. Если мы галочку уберем, то изменения на одной кнопке не будут распространяться на другие кнопки. Мы также можем изменять "Размеры элемента": выставляем либо "Равномерный размер", либо "Одинаковый интервал". Это больше нужно для горизонтального меню.

      Если мы вставляем "Равномерный размер", то все кнопки меню имеют одинаковый размер. Если же мы выставим "Одинаковый интервал", то в данном случае это не так заметно, но если уменьшить меню, то размер кнопок будет разным, но расстояние между названиями и границами кнопок одинаковые. Давайте снова зайдем в настройки этого приложения, и  далее идет блок "Составные элементы". Мы можем поставить флажок "Показывать значок слева", тогда в каждом из пунктов меню появляется квадратик, который мы можем редактировать (назначать туда картинку, цвет, заливку, обводку и все остальное). То есть все то, что мы можем делать с графическими блоками и обычными прямоугольниками.

      Далее мы можем "Убрать или Показывать подпись".  В  данном случае у нас просто исчезнут все названия кнопок, и мы получим меню, которое состоит из обычных цветных прямоугольников. Иногда эта функция бывает полезной, когда нам нужно создать быстро компактное меню. Вернем флажок обратно. "Показывать флажок справа" - аналогично предыдущему значку. Точно также мы можем выключить данную функцию, либо поставить ее для подменю - так стоит по умолчанию. Последний параметр - "Размещение текста кнопки внутри каждой кнопки". Мы можем выбрать из 4 предложенных вариантов: "По горизонтали, по по центру", "По горизонтали, по верхнему краю", "По вертикали, по центру" или "По вертикали, по левому краю".

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

      • 2 комментария
      • 584 просмотра
    3. Создание меню в ручном режиме

      46 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.8.3_Sozdanie_menyu_v_ruchnom_rezhime.mp4.a450edda6f1199dda09373aefa11d530.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этому уроке вы узнаете, как быстро и удобно создать свое собственное меню для сайта в программе Adobe Muse в ручном режиме. Мы будем использовать стандартный виджет программы для создания меню. Для этого заходим в программу, заходим в режим "Дизайн шаблона", чтобы создать меню для всех страниц сразу. Заходим в "Библиотеку мини-приложений" программы. Далее выбираем меню по горизонтали, перетягиваем его на страницу левой кнопкой мыши, и у нас автоматически создается 1 кнопка для одной домашней страницы, которая у нас есть на сайте. Для того, чтобы создавать меню в ручном режиме, нам необходимо выставить "Тип меню" -  "В ручную".

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

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

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

      • 0 комментариев
      • 486 просмотров
    4. Настройка выпадающих подменю

      47 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.8.4_Nastroyka_vyipadayushhih_spiskov.mp4.869162156c2eda014e16bdbb280dd5e0.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

      В этом роке мы рассмотрим создание выпадающих списков в меню для сайтов в программе Adobe Muse. Заходим в программу, у нас уже создан план сайта, где есть 4 страницы: "Главная", "О компании", "Продукты" и "Контакты". Давайте зайдем в режим "Дизайн шаблона А", чтобы создать меню на всех страницах сайта одновременно. Зайдем в "Библиотеку мини-приложений", выберем раздел "Меню", "По горизонтали". Далее перетягиваем данное меню на страницу, и автоматически у нас появились 4 кнопки. Сейчас мы видим, что в параметрах нашего приложения стоит "Тип меню" -  "Страницы верхнего уровня". Для того, чтобы увидеть все страницы сайта в данном меню, мы должны выбрать здесь "Тип меню" -  "Все страницы". Сейчас у нас ничего не изменилось, так и остались 4 кнопки меню.

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

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

      Для того,чтобы удалить 1 из кнопок списка, нам нужно зайти в режим "План сайта" и удалить ненужную страницу. Например, удалим страницу "Продукт 2", зайдем снова в режим дизайна шаблона А, и мы видим, что в выпадающем списке только 2 кнопки. Таким образом с помощью данного приложения "Библиотеки" программы мы можем настраивать выпадающие списки для своего сайта. При этом, если мы сейчас захотим создать дочернюю страницу для одной из этих дочерних страниц, например, нажимая на + снизу, мы создаем еще пару страниц для страницы "Продукты 3". Не будем сейчас называть эти страницы какими-то именами. Зайдем в режим дизайна шаблона А, и в данном случае мы увидим, что кнопки "Продукт 3" появился еще дополнительный выпадающий список "Без имени 6" и "Без имени 7".

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

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

      • 5 комментариев
      • 617 просмотров
×