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

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

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

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

Подсказка:

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

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

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

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

   Подсказка:

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

7. Щелкните Сохранить.

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

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

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

   Подсказка:

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

5. Щелкните Сохранить.

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

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

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

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

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

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

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

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

1. Откройте сайт или страницу в режиме редактирования.
2. Добавьте карточку текста в компоновку
3. Щелкните кнопку вставки и выберите Гармошкой.
4. Добавьте и отформатируйте текст.
5. Щелкните Сохранить.

Добавить автономное изображение

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

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

   Примечание:

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

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

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

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

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

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

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

Подсказка:

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

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

   Примечание:

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

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

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

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

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

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

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

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

Внимание:

В целях безопасности текстовые виджеты не поддерживают встроенный 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']