Добавление текста и изображений

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

• Карточка Строка – это "строительные блоки" вашего сайта. Каждая карточка должна быть вложена в карточку строки. Вы можете добавить изображения и цвета фона для карточек строк.
• Карточка Текст – добавьте текст в любое место на своем сайте, поместив эту карточку в карточку строки. Вы также можете использовать эту карточку, чтобы добавить кнопки, списки, таблицы и пользовательский код на ваш сайт.
• Карточка Изображение – добавляйте автономные изображения на любую карточку строки в любом месте вашего сайта.

Для начала работы войдите в ArcGIS Hub и выберите Сайты на странице Обзор, чтобы увидеть список своих сайтов. Если у вашей организации есть лицензия ArcGIS Hub Premium, вы можете найти свои сайты в списке Инициативы.

Подсказка:

Вы также можете редактировать сайт при просмотре в браузере. Войдите в ArcGIS Hub и найдите кнопку редактирования слева от вашего сайта.

Добавление и форматирование текста

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Текст в строку и введите текст.
3. Выберите любой текст, который необходимо отформатировать. Опции включают стиль (Нормальный, Код, Заголовки и т.д.), жирный шрифт, курсив и ссылки.
4. Чтобы изменить размер текста, выберите кнопку стилей и выберите размер заголовка.
5. Чтобы изменить выравнивание текста, выберите опции абзаца и укажите нужный вариант. Можно переместить строку текста, выбрав опцию абзаца и указав увеличение или уменьшение отступа.

   Подсказка:

   Если вы допустили ошибку, нажмите Command+Z или Ctrl + Z на клавиатуре, чтобы отменить изменения.

6. Выберите Сохранить.

Примечание:

Размер шрифта базового текста был увеличен на всех сайтах и страницах в 2021/2022 гг., чтобы улучшить читаемость и сделать веб-ресурсы доступными для людей с разными возможностями. Прочитайте FAQ: Предстоящие изменения базового размера шрифта и единиц rem на сайтах ArcGIS Hub для получения подробной информации.

Изменение цвета текста

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

1. Откройте сайт или страницу в режиме редактирования.
2. Чтобы установить цвет для всего текста на вашем сайте или странице, откройте боковую панель и раскройте меню Тема. Дополнительную информацию о темах см. в разделе Создание бренда сайта с использованием параметров заголовка и темы.
3. Чтобы задать цвет для нужной строки, выберите значок карандаша для строки.
4. Измените цвет, введя шестнадцатеричный код цвета или выбрав цвет.

   Подсказка:

   Коды Hex применяются для обеспечения согласованного брендинга ресурсов вашей организации. Если вы не уверены в специфике, связанной с брендингом вашей организации, посмотрите, предоставляет ли она какую-либо документацию или рекомендации по бренду.

5. Выберите Сохранить.

Изменение шрифтов

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

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

Создайте список, выполнив следующие действия.

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Текст в строку.
3. Добавьте текст или выберите существующий текст.
4. Выберите Неупорядоченный список, чтобы создать маркированный список, либо Упорядоченный список, чтобы создать нумерованный список.
5. Выберите Сохранить.

Добавление автономного изображения

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Изображение в строку.
3. Под Изображением выберите источник изображения. Оба варианта поддерживают JPG, JPEG PNG, и т.д.
   • Чтобы указать URL, выберите Image URL и вставьте поддерживаемую ссылку на изображение в поле URL.
   • Чтобы загрузить файл, выберите Загрузить изображение. Перетащите файл в окно, либо щелкните Обзор изображения, чтобы добавить свое изображение (максимальный размер 3 Мб).
4. Чтобы настроить выгруженное изображение, выберите кнопку Обрезать изображение и перетащите элемент управления для изменения размера фрейма вырезания. Чтобы изменить положение фрейма вырезания, выберите и перетащите пунктирную линию. Чтобы уточнить масштабирование, измените положение бегунка под изображением.
5. В меню Опции укажите изображение вместо текста, чтобы помочь пользователям с плохим зрением и улучшить доступность вашего сайта.
6. Если применимо, укажите гиперссылку изображения и задайте ссылку, которая откроется либо в той же, либо в новой вкладке.

   Примечание:

   Рекомендации по обеспечению доступности (на входе 3.2.2 и методике G201) рекомендуют избегать открытия ссылок на новых вкладках или окнах, если вы не предоставите расширенное предупреждение.

7. Введите текст для Подпись изображения и выберите выравнивание текста.
8. Можно также выбрать Масштабировать изображение для заполнения, чтобы задать точку фокуса изображения. Точка фокуса позволяет убедиться в том, что изображение будет всегда выглядеть адекватно - независимо от размера дисплея.
9. Выберите Сохранить.

Добавить фоновые изображения и цвет

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

Подсказка:

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Строка в компоновку и формат в разделе Оформление.
3. Под Фоновым изображением выберите источник изображения. Оба варианта поддерживают JPG, JPEG PNG, и т.д.
   • Чтобы указать URL, выберите Image URL и вставьте поддерживаемую ссылку на изображение в поле URL.
   • Чтобы загрузить файл, выберите Загрузить изображение. Перетащите файл в окно, либо щелкните Обзор изображения, чтобы добавить свое изображение (максимальный размер 3 Мб).
4. Выберите Цвет фона, введя шестнадцатеричный код или выбрав цвет.

   Примечание:

   Только карточки строк поддерживают цвета фона.

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

Выберите макет изображения на карточке строки

Каждая карточка строки имеет два варианта компоновки, которые определяют способ отображения вашего изображения.

1. После добавления изображения на карточку строки можно выбрать широкую или фиксированную компоновку изображения и другого ресурса, отображаемого на этой карточке.
   • Выберите Рамка, если вы хотите, чтобы изображение оставалось неизменным.
   • Выберите Широкая, если хотите, чтобы изображение занимало всю ширину вашего сайта.
2. Задайте Точку фокуса изображения, чтобы быть уверенным, что изображение будет всегда выглядеть адекватно - независимо от размера дисплея.
3. Выберите Сохранить.

Создание кнопки

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Текст в компоновку
3. Выберите кнопку Вставить и выберите Кнопку.
4. Выберите </> Редактирование в HTML.
5. В теге 'href' введите URL вместо '#' и текст ссылки вместо 'Button' (Указание на компоненты calcite).
6. Щелкните Применить и Сохранить.
Информацию о цветах кнопок см. в разделе Создать тему.

Создание меню-гармошки

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Текст в компоновку
3. Выберите кнопку Вставка, а затем - Гармошкой.
4. Выберите </> Редактирование в HTML, чтобы добавить и отформатировать текст (Указание на компоненты calcite).
5. Щелкните Применить и Сохранить.

См. Поддерживаемые компоненты Calcite

Карточка Текст поддерживает следующие компоненты Calcite Design System. Ознакомьтесь с каталогом всех компонентов Calcite, который содержит описания, оптимальные варианты использования, примеры и многое другое.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Настройка текста с помощью HTML

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку Текст в компоновку
3. Выберите </> Редактирование в HTML, чтобы добавить и отформатировать текст (Указание на компоненты calcite).
4. Щелкните Применить и Сохранить.

Внимание:

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

Элементы HTML допускаются

'a' 'abbr' 'acronym' 'address' 'article' 'audio' 'b' 'bdi' 'bdo' 'big' 'blockquote' 'br' 'caption' 'center' 'cite' 'code' 'col'

'colgroup' 'datalist' 'dd' 'del' 'details' 'dfn' 'div' 'dl' 'dt' 'em' 'embed' 'fieldset' 'figcaption' 'figure' 'font' ''footer' 'frameset'

'h1' 'h2' 'h3' 'h4' 'h5' 'h6' ''head' ''header' 'hgroup' 'hr' 'i' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' 'p' 'param' 'pre' 'progress' 'q'

'rp' 'rt' 'ruby' 's' 'samp' 'section' 'small' 'source' 'span' 'strike' 'strong' 'style' 'sub' 'summary' 'sup' 'table' 'tbody'

'td' 'tfoot' 'textarea' 'th' 'thead' 'time' 'title' 'tr' 'track' 'tt' 'u' 'ul'

Для этих элементов разрешается использование следующих атрибутов. Все поддерживаемые элементы HTML позволяют : ['class', 'style'].

• 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
• 'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload']
• 'blockquote': ['cite']
• 'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
• 'col' : ['span', 'width']
• 'colgroup' : ['span', 'width']
• 'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
• 'font': ['size', 'color', 'style']
• 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
• 'ol' : ['align', 'start', 'type']
• 'p' : ['style']
• 'q' : ['cite']
• 'source' : ['media', 'src', 'type']
• 'span' : [style]
• 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
• 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'tr' : [alignt, 'height', style', valign']
• 'ul' : ['type']