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

Примечание.

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

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

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

Добавление на страницу верхнего и нижнего колонтитула

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

Кроме того, можно воспользоваться меню «Просмотр» панели управления и включить отображение направляющих «Верхний и нижний колонтитулы».

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

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

Работа с направляющими и линейками

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

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

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

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

Примечание.

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

Определение элементов верхнего и нижнего колонтитула

Чтобы определить элементы верхнего и нижнего колонтитула, выполните следующие действия:

  1. Перетащите одновременно направляющие «Нижняя граница страницы» и «Нижняя граница браузера» в одно положение в нижней части страницы прямо по нижней границе прямоугольника нижнего колонтитула, как показано на рисунке ниже.
Определение верхнего и нижнего колонтитулов в Adobe Muse.
Определение верхнего и нижнего колонтитулов в Adobe Muse.

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

Содержимое верхнего колонтитула отображается в области между верхним краем страницы и направляющей Верхний колонтитул.

Перетаскивание направляющей верхнего колонтитула для определения области верхнего колонтитула.
Перетаскивание направляющей верхнего колонтитула для определения области верхнего колонтитула.

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

Чтобы вернуться к представлению План, нажмите ссылку План или вкладку «katiesCafe».

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

Верхний и нижний колонтитулы заданы для всех страниц, связанных со страницей «Шаблон-А»
Дизайн страницы «Шаблон-А», отображаемый на миниатюрах всех связанных страниц в представлении «План».

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

Размещение изображения в верхнем колонтитуле

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

  1. Выберите Файл > Поместить. При желании можно нажать клавиши Control+D (Windows) или Command+D (Mac), чтобы поместить изображение.

  2. В открывшемся диалоговом окне Импорт выберите файл с именем Logo.png, расположенный в папке Kevins_Koffee_Kart. Нажмите кнопку Выбрать.

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

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

  1. Выберите Файл > Поместить или нажмите клавиши Control+D (Windows) или Command+D (Mac).

  2. Перейдите к папке Kevins_Koffee_Kart и выберите файл top-nav.png.

  3. Нажмите один раз в месте в верхней части страницы в области, которая ранее была задана в качестве верхнего колонтитула. Разместите изображение над маркерами верхнего колонтитула, чтобы оно отображалось в одном и том же месте над основным содержимым на каждой странице.

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

  5. Выберите команду Файл > Поместить еще раз. Выберите файл thedrip.png. Нажмите один раз в месте рядом с нижней правой стороной коричневой ленты, чтобы поместить изображение в исходном размере.

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

    Содержимое верхнего колонтитула после добавления логотипа и фона для элементов навигации по сайту.
    Содержимое верхнего колонтитула после добавления логотипа и фона для элементов навигации по сайту.

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

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

Использование фиксированных нижних колонтитулов

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

Параметр «Фикс. нижний колонтитул» доступен в диалоговом окне Новый сайт (Файл > Новый сайт) при создании сайта в Muse. Кроме того, он также доступен в диалоговых окнах Свойства страницы (Страница > Свойства страницы) и Свойства сайта (Файл > Свойства сайта)

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

Чтобы отключить фиксированный колонтитул для всего сайта, можно снять этот флажок в диалоговом окне «Свойства сайта».

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

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