Узнайте все о работе с текстом в Adobe Muse. Изменение форматирования текста, добавление отступов, установка значений отступа и другие возможности панели «Текст».

Примечание.

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

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

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

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

Создание и оформление текстовых фреймов

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

  1. Редактируя страницу в представлении «Дизайн», создайте текстовый фрейм с помощью инструмента «Текст». Если требуется скопировать текст из другого исходного файла, скопируйте текст и нажмите внутри текстового фрейма Adobe Muse инструментом «Текст». Вставьте скопированное содержимое в текстовый фрейм.

  2. С помощью инструмента «Текст» выделите любую строку текста.

  3. На панели «Текст» выберите одну из следующих настроек для форматирования текста:

    • Шрифт: Droid Serif Bold (или другой шрифт семейства serif)
    • Размер шрифта: 14
    • Стиль: полужирный
    • Цвет: #A6342A (красный)
    • Выравнивание: слева
    • Интерлиньяж: 120%
  4. Форматирование текста с использованием следующих дополнительных параметров форматирования текста:

    • Надстрочный индекс
    • Подстрочный индекс
    • Верхний регистр
    • Нижний регистр
  5. Не снимая выделения с текста, нажмите кнопку «Новый стиль» в нижней части панели «Стили абзаца» («Окно» > «Стили абзаца»). Дважды нажмите новый стиль абзаца и переименуйте его в «food-header».

    Это упростит повторное применение данного форматирования к другим заголовкам меню.

  6. Выберите следующий пункт меню завтрака с помощью инструмента «Текст»: Croissants $3.

  7. Нажмите стиль абзаца с именем «food-header», чтобы применить ко второму пункту меню завтрака такое же форматирование.

  8. Повторите шаги 7 и 8, чтобы применить стиль абзаца «food-header» к остальным пунктам меню завтрака в текстовом фрейме (все строки со знаком доллара).

  9. Начиная сверху, выберите с помощью инструмента «Текст» описание первого пункта меню завтрака: Bananas, mandarin oranges, red delicious apples, mixed berry cup.

  10. Нажмите стиль абзаца «body» на панели «Стили абзаца», чтобы применить форматирование к строке текста.

  11. По очереди выделите оставшиеся описания пунктов меню завтрака и примените к ним стиль абзаца «body».

fig_66_building
Применение форматирования для оформления меню с помощью стилей абзаца.

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

Дополнительную информацию по работе с текстом см. в статье Шрифтовое оформление в Adobe Muse.

Использование встроенного средства проверки орфографии

Adobe Muse содержит средство проверки орфографии, которое упрощает поиск и исправление типографских ошибок в текстовых фреймах. Средство проверки орфографии всегда включено. Оно подчеркивает красной волнистой линией все слова, которые отсутствуют в его словаре.

fig_67_building
Подчеркивание красной линией слов с орфографическими ошибками.

fig_68_building

Если одно из предлагаемых слов подходит, то выделите его с помощью мыши или клавиши со стрелкой вниз и нажмите клавишу Return/Enter, чтобы вставить его. Если вы ошиблись и выбрали не то слово, просто отмените изменение (меню «Редактировать» > «Отменить») и выберите другое слово из списка или отредактируйте слово с помощью инструмента «Текст».

Если слово, помеченное как ошибка, используется только один раз (например, имя человека или название места) и вы уверены в его правильном написании, исправлять его не требуется. Красные линии подчеркивания, видимые в представлении «Дизайн», не отображаются при предварительном просмотре, публикации или экспорте сайта.

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

Используя инструмент «Текст», нажмите правой кнопкой мыши слово, которое необходимо добавить в словарь, и выберите в контекстном меню пункт «Добавить в словарь».

Вы можете настроить предпочитаемый язык (который в свою очередь задает язык словаря средства проверки орфографии) для всего сайта и для каждого отдельного текстового фрейма.

Чтобы настроить словарь средства проверки орфографии для всего сайта, выберите «Файл» > «Свойства сайта». Откройте вкладку «Текст», выберите необходимый язык в меню «Язык» и нажмите кнопку «ОК».

fig_69_building
Настройка языка для всего сайта в диалоговом окне «Свойства сайта».

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

Чтобы настроить словарь средства проверки орфографии для текстового фрейма, выделите текстовый фрейм с помощью инструмента «Выделение». Нажмите правой кнопкой мыши и выберите в контекстном меню пункт «Язык» > (необходимый язык).

fig_70_building
Выбор языка для выбранного текстового фрейма в контекстном меню.

Далее перейдем к оформлению внешнего вида текстовых фреймов. Текстовые фреймы можно оформлять так же, как прямоугольники и фреймы изображений, настраивая для них обводку, заливку и фоновые изображения.

Изменение оформления текстовых фреймов

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

  1. Выделите текстовый фрейм с меню завтрака с помощью инструмента «Выделение».

  2. На панели элементов управления установите ширину обводки на 5 и выберите для нее черный цвет.

  3. В меню «Заливка» выберите для цвета заливки образец, переименованный в «cream-menu» (или введите значение цвета: #E9916F). Нажмите значок папки рядом с разделом «Изображение» и выберите в папке с файлами образцов файл «bg-texture.png». Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Импорт». Для параметра «Подгонка» установите значение «Мозаика» и нажмите в другом месте страницы, чтобы закрыть меню «Заливка».

  4. При необходимости измените размер текстового фрейма, перетащив его манипуляторы с помощью инструмента «Выделение», чтобы уместить в нем весь текст. Размеры меню завтрака на опубликованном образце сайта приблизительно составляют 800 пикселей в ширину и 440 пикселей в высоту.

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

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

  5. С помощью инструмента «Текст» создайте текстовый фрейм прямо над меню «Breakfast», выровняв его по левой стороне.

  6. Введите слово «Breakfast».

  7. На панели «Текст» выберите следующие настройки для форматирования текста:

    • Веб-шрифт: Kaushan Script (или любой другой шрифт)
    • Размер шрифта: 32Color: #70909D (в части 3 этот цвет был переименован в «blue-menu»)
    • Интерлиньяж: 120%
    • Выравнивание: по центру
  8. Не снимая выделения с текста, нажмите кнопку «Новый стиль» в нижней части панели «Стили абзаца», чтобы создать новый стиль абзаца. Дважды нажмите новый стиль абзаца и переименуйте его в «menu-label».

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

fig_71_building
Оформленное меню завтрака с отформатированным текстовым содержимым.

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

Дублирование текстовых фреймов

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

  1. С помощью инструмента «Выделение» выберите текстовый фрейм со словом «Breakfast» и текстовый фрейм с меню завтрака.

  2. Удерживая нажатой клавишу Option (Mac) или Alt (Windows), перетащите набор из двух текстовых фреймов ниже на страницу для создания дублирующейся копии. Перетащите копию вниз, сохранив выравнивание по вертикали с оригиналом (быстрые направляющие временно отображаются, когда стороны и центры выровнены). Дубликат набора текстовых фреймов должен находиться на расстоянии приблизительно 430 пикселей от исходного набора.

    fig_72_building
    Перетаскивание дубликата меню завтрака на странице вниз.

  3. С помощью инструмента «Текст» выберите подпись дублированного текстового поля. Замените слово «Breakfast» словом «Lunch».

  4. Временно перейдите из приложения Adobe Muse на рабочий стол. Откройте папку с файлами образцов и найдите файл с именем «text-food-lunch.txt». Дважды нажмите файл, чтобы открыть его в текстовом редакторе. Скопируйте первую строку текста: The JR $9

  5. Вернитесь в приложение Adobe Muse. При помощи инструмента «Текст» нажмите в текстовом фрейме меню обеда. Вставьте скопированное текстовое содержимое в текстовый фрейм, заменив существующий первый пункт списка: Croissants $3

  6. Повторите шаги 4 и 5, чтобы скопировать все строки со знаком доллара из файла «text-food-lunch.txt», заменяя пункты меню обеда.

  7. Продолжите заполнение меню обеда, по одному копируя описания из файла «text-food-lunch.txt» и вставляя их вместо существующих описаний в дублированном меню обеда. Такой подход обеспечивает сохранение примененных стилей к текстовому содержимому.

  8. Повторите шаги с 1 по 7. Выберите два текстовых фрейма меню обеда, создайте их дубликаты, перетащите их вниз приблизительно на 430 пикселей от существующего меню обеда, измените подпись на «Dinner» и скопируйте пункты из текстового файла «text-food-dinner.txt» для заполнения меню ужина.

  9. Повторите шаг 8 еще раз. На этот раз измените название дубликата подписи на «Dessert». Скопируйте строки текста из файла «text-food-dessert.txt», чтобы завершить создание меню десерта.

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

    fig_73_building
    Выравнивание четырех меню (завтрак, обед, ужин и десерт) по вертикали на странице «food».

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

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

Вставка стандартных и специальных символов

Панель «Глифы» позволяет вставлять такие символы, как ©, или специальные символы, например бета-версия (ᵝ), которые недоступны на стандартной клавиатуре. Панель «Глифы» позволяет вставить символы кодировки Юникод.

Типы знаков и символов, которые можно вставить, зависят от выбранного шрифта. Например, некоторые шрифты могут содержать международные символы (Ç, ë) и символы международных денежных единиц (£, ¥). Встроенный шрифт Symbol содержит стрелки, маркеры и научные символы.

Чтобы вставить символы с помощью палитры «Глифы», выполните описанные ниже действия.

  1. Если этого еще было не сделано, создайте на веб-странице текстовой фрейм, куда требуется вставить символ.

  2. Выберите «Окно» > «Глифы», чтобы открыть панель «Глифы».

  3. В раскрывающемся списке выберите категорию вставляемых символов.

  4. На панели «Глифы» отображаются все символы выбранной категории. Нажмите символ, который требуется вставить.

Редактирование оформления текстовых фреймов

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

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

Чтобы применить к текстовому фрейму определенный формат и стиль, выделите текстовый фрейм с помощью инструмента «Выделение» и измените его оформление необходимым образом.

Примечание. При выборе текста с помощью инструмента «Текст» можно настроить его стиль с помощью параметров форматирования на панели «Текст» или панели элементов управления.

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

fig_15_type
Изменение размера текстового фрейма путем перетаскивания манипуляторов.

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

Для изменения оформления текстового фрейма используются те же параметры форматирования, что и для редактирования прямоугольников. Можно установить цвет заливки и даже добавить фоновые изображения. Также можно добавить обводку и настроить ее ширину, цвет и выравнивание. С помощью меню «Углы» и «Эффекты» на панели элементов управления можно задать радиус скругления углов текстового фрейма и применить тени, скосы и свечение.

Чтобы придать текстовому фрейму прозрачность, измените значение непрозрачности с помощью ползунка «Непрозрачность».

С помощью меню и поля «Гиперссылка» добавьте к тексту заголовки и ссылки и укажите, должны ли они открываться в новом окне браузера.

Управление выравниванием текста и окружение изображения текстом

Текстовые фреймы крайне полезны при создании содержимого веб-страниц. Как видно из предыдущего раздела, текстовые фреймы могут содержать графические элементы и эффекты, а также текстовое содержимое.

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

Добавление к тексту отступа

По умолчанию текст, который вы вводите, помещаете или вставляете в текстовый фрейм, выравнивается по левому краю. Если посмотреть на параметры на панели «Интервалы», они всегда равны 0.

PaddingZero
Отступ по умолчанию, примененный к тексту в текстовом фрейме.

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

Создание отступа текста и управление значениями интерлиньяжа и трекинга

Форматирование текста в приложении Adobe Muse выполняется так же, как и в текстовых редакторах и большинстве других программ для обработки изображений. На панели «Текст» имеется много дополнительных параметров, некоторые из которых не отображаются на панели элементов управления при выделенном тексте.

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

  1. С помощью инструмента «Текст» выделите нужный текст.

  2. Задайте в параметре «Отступ» инструмента «Текст» необходимое значение в пикселях.

TypeToolIndent
Введите число в поле или измените значение с помощью стрелок вверх и вниз.

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

Настроить расстояние между знаками выделенного текста можно, введя необходимое значение в пикселях в поле «Пробел между знаками». Или изменяя значение с помощью стрелок вверх или вниз для получения желаемого эффекта.

TypeToolAddSpace
Введите число в поле «Пробел между знаками» или измените значение с помощью стрелок вверх и вниз.

Интерлиньяж — еще одна полезная функция, которую можно использовать для форматирования текста в абзаце. Интерлиньяж позволяет изменять расстояние между строк текста. Функция «Интерлиньяж» доступна как на панели элементов управления, так и на панели «Текст».

TypeToolLeading
Изменение значения интерлиньяжа для увеличения или уменьшения расстояния между строк.

На панели «Текст» доступны еще четыре элемента управления шрифтовым оформлением.

Левое и правое поля

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

Отступ перед и отступ после

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

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

Размещение текста из текстового файла на странице

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

  1. Выберите Файл > Поместить или воспользуйтесь клавишами быстрого вызова команды размещения: Command+D (Mac) или Control+D (Windows®) для запуска операции размещения. Эта же процедура применяется при размещении на странице файла изображения.

  2. В диалоговом окне Импорт перейдите к папке Kevins_Koffee_Kart и выберите текстовый файл с именем TextThreeSpeed.txt.

  3. Нажмите светло-серый контейнер большего размера в виджете Раздвижная панель под заголовком TASTING NOTES (ЗАМЕТКИ ДЕГУСТАТОРА) для размещения содержимого текстового файла на верхней панели виджета Раздвижная панель.

  4. После размещения нового текстового фрейма переместите его с помощью инструмента Выделение под заголовок TASTING NOTES (ЗАМЕТКИ ДЕГУСТАТОРА), затем путем перетаскивания маркеров на верхнем, нижнем и боковых краях текстового фрейма увеличьте размеры светло-серого контейнера да такой степени, чтобы в нем помещались как заголовок, так и текст под ним. При щелчке на только что размещенном тексте и его перетаскивании можно определить момент его выравнивания по левому краю текста заголовка, так как при выравнивании двух элементов временно отображается синяя направляющая. Обратите внимание на то, что помимо изменения размеров размещенного текста путем перетаскивания маркеров, можно щелкнуть на сером контейнере и перетащить маркеры на нижнем крае для увеличения его высоты.

  5. При выбранном светло-сером контейнере нажмите палитру цветов Заливка и выберите отсутствие цвета заливки фона панели.

    fig_40
    Размещение текстовых материалов на верхней серой вкладке и в соответствующем контейнере большего размера.

Работа с синхронизированным текстом

Для получения дополнительной информации о работе с синхронизированным текстом см. раздел Работа с синхронизированным текстом.

Работа с текстом в адаптивном макете

Для получения информации о способах форматирования текста в адаптивном макете см. раздел Форматирование текста в адаптивном веб-дизайне.

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

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