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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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