Из данной статьи вы узнаете, как в Adobe Muse применить заливку браузера и фоновую заливку.

Примечание.

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

Заливка браузера и фоновые изображения в Adobe Muse

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

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

Из данной статьи вы узнаете, как в Adobe Muse применить фоновую заливку. Доступны следующие варианты: 

Заливка браузера цветом фона

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

    Страница «Шаблон-А» будет открыта на отдельной вкладке в верхней части рабочей среды.

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

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

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

  2. На панели управления выберите Заливка в браузере. В поле Цвет выберите нужный цвет. Выбрать цвет заливки фона можно одним из следующих способов:

    • Выберите цвет на палитре цветов.
    • Введите значение RGB.
    • Введите шестнадцатеричный код цвета в поле Hex#.
    • Нажмите и выделите цвет из уже сохраненных образцов.
    Выбор цвета в качестве заливки фона
    Выбор цвета в качестве заливки фона
  3. Чтобы применить сплошную или градиентную заливку цветом, на панели Заливка в браузере выберите Сплошная или Градиентная. Используйте переключатель для выбора между сплошной и градиентной заливкой цветом.

  4. Чтобы применить градиент, для параметра «Заливка» выберите опцию Градиентная. Выберите первый и последний цвет градиента из образцов цветов.

    Выбор градиентной заливки
    Выбор градиентной заливки
  5. Настройте ориентацию градиента, выбрав для параметра «Направление» значение «По горизонтали» или «По вертикали».

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

    Цвет заливки со значением «Нет» в Adobe Muse
    Цвет заливки со значением «Нет»

Заливка фона с помощью изображения

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

Ниже представлена информация о том, как использовать изображения в качестве заливки фона в Adobe Muse.

  1. Откройте страницу-шаблон для файла .muse. 

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

  2. На панели управления выберите «Заливка в браузере». Проверьте, что для параметра «Заливка» указано значение «Сплошная».

    Добавление фонового изображения, которое будет отображаться в окне браузера.
    Добавление фонового изображения, которое будет отображаться в окне браузера.

    Примечание.

    Если для параметра «Заливка» указать значение «Градиентная», то использовать изображение в качестве фоновой заливки будет невозможно.

  3. Чтобы выбрать изображение в качестве заливки фона, нажмите ссылку «Добавить». Перейдите к нужному файлу изображения на компьютере и выберите его. Нажмите кнопку «Открыть», чтобы выбрать изображение в качестве фона.

  4. Настройте подгонку фонового изображения. Можно выбрать одну из следующих опций:

    • Заполнение: фоновое изображение соответствует заданному размеру. Размер и расположение изображения соответствует заданным настройкам.
    • По размеру: изображение подгоняется, чтобы помещаться в указанном расположении.
    • Исходный размер: изображение используется в качестве заливки фона в его исходном размере.
    • Мозаика: изображение повторяется по всей площади фона. Параметр мозаики позволяет создавать небольшие изображения, которые повторяются в окне браузера независимо от размера монитора посетителя.
    • По горизонтали: изображения повторяются по горизонтали.
    • По вертикали: изображения повторяются по вертикали.

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

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

    Примечание.

    Для удаления заливки фона нажмите значок корзины у значка папки.

  6. Нажмите в любом месте за пределами панели «Заливка в браузере», чтобы закрыть ее.

  7. Для просмотра фонового изображения выполните предварительный просмотр сайта в Adobe Muse или в браузере.

Настройка ширины 100% для элементов страницы

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

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

  2. Не снимая выделения с прямоугольника, установите значение «0» для параметра Ширина обводки. На то, что прямоугольник выделен, указывает индикатор выделения в левом верхнем углу. На индикаторе должно отображаться слово «Прямоугольник».

    В поле «Обводка» укажите ширину обводки выбранного прямоугольника, равную 0.
    В поле «Обводка» укажите ширину обводки выбранного прямоугольника, равную 0.
  3. На панели управления выберите Заливка. Проверьте, что для меню «Заливка» выбрано значение «Нет». На это указывает образец белого цвета с красной диагональной линией.

    Использование меню «Заливка» для выбора заливки прямоугольника
    Использование меню «Заливка» для выбора заливки прямоугольника
  4. Нажмите ссылку Добавить на панели Заливка. Перейдите к нужному изображению, выделите его и нажмите Открыть.

  5. Из раскрывающего списка Подгонка выберите По горизонтали. При выборе этого параметра изображение будет повторяться в виде мозаики слева направо по оси X.

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

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

Настройка непрозрачности и прозрачности фоновых заливок

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

  1. На панели управления нажмите Заливка в браузере, чтобы раскрыть меню. Чтобы выбрать изображение и установить его в качестве заливки фона, нажмите ссылку Добавить.

  2. На панели управления нажмите Заливка, чтобы раскрыть меню «Заливка».

  3. Задайте для параметра Непрозрачность значение 80%. Это означает, что страница будет почти полностью непрозрачна (прозрачность будет составлять 20%). Кроме того, можно продолжить изменять страницу и добавить границу или применять дополнительные графические эффекты.

    Настройка непрозрачности заливки фона
    Настройка непрозрачности заливки фона

Заливка фона и эффекты прокрутки

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

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

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