Skip To Content

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

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

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

    Для начала работы войдите в ArcGIS Enterprise и выберите Сайты на странице Обзор, чтобы увидеть список своих сайтов.

    Подсказка:

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

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

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

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

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

    7. Выберите Сохранить.
    Примечание:

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

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

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

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

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

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

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

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

    Дополнительные сведения см. в разделе Форматирование текста на ArcGIS Hub и ArcGIS Enterprise Sites.

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

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

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

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

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

    1. Откройте сайт или страницу в режиме редактирования.
    2. Добавьте карточку Текст в компоновку
    3. Выберите кнопку Вставка, а затем - Гармошкой.
    4. Добавьте и отформатируйте текст.
    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'

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

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

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

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

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

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

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

    1. Откройте сайт или страницу в режиме редактирования.
    2. Добавьте карточку Текст в компоновку
    3. Выберите кнопку Вставить и выберите Кнопку.
    4. Отредактируйте текст на кнопке, чтобы включить ваш призыв к действию.
    5. Выберите кнопку, которую вы только что добавили, и выберите кнопку ссылки.
    6. В поле Текст для отображения добавьте текст, если вы этого еще не сделали.
    7. В поле URL вставьте ссылку, на которую хотите перенаправить пользователей, когда они нажмут кнопку.
    8. Выберите Вставить ссылку, чтобы подтвердить изменения.
    9. Выберите Сохранить.
    10. Информацию о цветах кнопок см. в разделе Создать тему.

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

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

    Подсказка:

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

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

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

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

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

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

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

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

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

    1. Откройте сайт или страницу в режиме редактирования.
    2. Добавьте карточку Текст в компоновку и щелкните </> Редактировать в HTML.
    3. Введите код и выберите Сохранить.

    Внимание:

    В целях безопасности Текстовые карточки не поддерживают встроенный 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', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
    	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', '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',

    Для этих элементов разрешается использование следующих атрибутов:

    
     All supported HTML elements allow : ['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']