Skip To Content

添加文本和图像

    核心团队成员可以使用以下卡片将图像和文本添加到站点:

    • 卡片 - 站点的构建块。 所有卡片必须嵌套在行卡片内。 可以将图像和背景颜色添加到行卡片。 您也可以使用此卡片来创建视差效果。
    • 文本卡片 - 通过将此卡片拖动到行卡片,可以向站点的任意位置添加文本。 您也可以使用此卡片向您的站点添加按钮、列表、表格和自定义代码。
    • 图像卡片 - 将独立图像添加到站点上任何位置的任何行卡片。

    要开始执行操作,请登录到 ArcGIS Enterprise 并选择概览页面上的站点以查看站点列表。

    提示:

    在浏览器中查看站点时,也可以对其进行编辑。 确保您已登录,然后在站点左侧找到编辑按钮。

    添加和格式化文本

    可以将文本添加到站点中任意位置处的行卡片。

    1. 以编辑模式打开站点或页面。
    2. 文本卡片添加到行中。
    3. 添加文本。
    4. 选择要格式化的文本。 格式化选项包括样式(常规、代码、标题等)、粗体、斜体和链接。
    5. 要更改文本的大小,请选择样式按钮,然后选择标题大小。
    6. 要调整文本对齐方式,请选择段落选项,然后选择一个选项。 您也可以通过选择段落选项,然后选择缩进或减少缩进来移动一行文本。

      提示:
      如果操作错误,请按键盘上的 Command+Z 或 Ctrl+Z 来恢复更改。

    7. 选择保存
    注:

    2021/2022 年所有站点和页面上的基本字体文本的字体大小均有所增加,以提高可读性并允许具有不同能力的人员访问 Web 内容。有关详细信息,请阅读常见问题解答:ArcGIS Enterprise Sites 中基本字体大小和 rem 单位即将发生的变化帖子。

    更改文本颜色

    要对站点上的所有文本应用相同的颜色,请使用站点的主题设置更改文本颜色。 或者,您可以使用行设置调整文本颜色。

    1. 以编辑模式打开站点或页面。
    2. 要为站点或页面上的所有文本设置颜色,请打开侧面板并展开主题菜单。 有关主题的详细信息,请参阅使用页眉和主题选项来打造站点品牌
    3. 要设置指定行的颜色,请选择该行的编辑铅笔 编辑铅笔
    4. 可以通过输入十六进制颜色代码,或者从颜色选取器中选择颜色来更改颜色。

      提示:
      使用十六进制代码有助于确保组织资源的品牌一致性。 如果您不确定与组织品牌相关的详细信息,请查看组织是否提供了任何文档或品牌指南。

    5. 选择保存

    更改字体

    您可以使用 Google Fonts 来更改文本标题和基础文本的字体。 基础文本包括站点布局中的所有文本。 此字体还适用于已添加到您的站点的任何页面以及通过站点搜索访问的内容预览页面。

    有关详细信息,请参阅格式化 ArcGIS HubArcGIS 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,请选择图像 URL,然后在 URL 字段中粘贴一个支持的图像链接。
      • 要上传文件,请选择上传图像,然后将文件拖动到框上,或选择浏览图像以定位并添加文件。 最大文件大小为 3 MB。
    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,请选择图像 URL,然后在 URL 字段中粘贴一个支持的图像链接。
      • 要上传文件,请选择上传图像,然后将文件拖动到框上,或选择浏览图像以定位并添加文件。 最大文件大小为 3 MB。
    4. 添加图像后,通过输入十六进制代码或使用颜色选取器选择一个背景颜色
      注:

      仅行卡片支持背景颜色。

    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']