Skip To Content

添加文本和图像

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

  • 卡片 - 站点的构建块。除了通栏卡片之外,其他所有卡片都必须嵌套在行卡片内。可以将图像和背景颜色添加到行卡片。您也可以使用此卡片来创建视差效果。
  • 文本卡片 - 通过将此卡片拖动到行卡片,可以向站点的任意位置添加文本。您也可以使用此卡片向您的站点添加按钮、列表、表格和自定义代码。
  • 通栏卡片 - 通过使用此卡片来分解站点元素以创建部分。此卡片还以可选的搜索栏为特征。
  • 图像卡片 - 将独立图像添加到站点上任何位置的任何行卡片。

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

    提示:

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

    添加和格式化文本

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

    1. 文本卡片拖动到现有行中。
    2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
    3. 添加文本。
    4. 选择要格式化的文本。格式化选项包括样式(添加标题、代码片段和引号)、粗体、斜体和链接。
    5. 要更改文本的大小,请单击样式按钮,然后选择标题大小。
    6. 要调整文本对齐方式,请单击段落选项,然后选择对齐方式。您也可以通过选择段落选项,然后选择任一选项来缩进或减少缩进一行文本。

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

    7. 单击保存

    更改文本颜色

    请按照以下步骤更改文本颜色。

    1. 将鼠标悬停在嵌套文本卡片的行卡片上,然后单击行卡片的设置按钮。
    2. 可以通过输入十六进制颜色代码,或者从颜色选取器中选择颜色来更改颜色。

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

    3. 单击保存

    更改字体

    您可以使用 Google Fonts 来更改文本标题和基础文本的字体。基础文本包括站点布局中的所有文本。该字体还适用于已添加到您的站点的任何页面、通过站点搜索访问的项目详细信息页面以及所有事件视图。

    有关详细信息,请参阅格式化 ArcGIS Hub 和 ArcGIS Enterprise 站点上的文本

    添加项目符号列表或编号列表

    请按照以下步骤创建列表。

    1. 添加文本或选择现有文本。
    2. 选择无序列表以创建项目符号列表。
    3. 选择有序列表以添加编号列表。
    4. 单击保存

    添加独立图像

    可通过从文件上传图像或提供托管图像 URL 来添加图像。内部共享图像仅供已登录且属于核心团队或组织的人员查看。

    1. 图像卡片拖动到现有行中。
    2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
    3. 选择图像源。您可以上传图像文件或提供图像 URL。两种方案均支持 JPG、JPEG 和 PNG。
      • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像以定位并添加文件。最大文件大小为 3 MB。
      • 或者,选择图像 URL 并在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
    4. 如果使用图像文件,您可以单击裁剪按钮并拖动控点来调整裁剪框的大小,以对已上传的图像进行自定义。裁剪框可通过单击并拖动虚线来重新定位。您还可以通过调整图像下方的滑块进行缩放,并通过在裁剪框内进行单击来进一步重新定位图像。
    5. 选项菜单中,提供图像替代文本以帮助盲人用户并改善站点的可访问性。
    6. 提供图像超链接,并选择在同一选项卡或新选项卡中打开链接。

      注:
      辅助功能指南(有关输入 3.2.2技术 G201)建议您避免在新选项卡或窗口中打开链接,除非您提供高级警告。

    7. 图像标题提供文本并选择文本对齐方式。
    8. 或者,单击缩放图像以进行填充设置图像焦点。焦点可确保在根据不同屏幕调整大小时,图像始终聚焦于所需位置。
    9. 单击保存

    添加背景图像和颜色

    可以使用行卡片和通栏卡片在其他卡片后面添加图像。为这些图像添加颜色可使文本更易于查看。

    提示:

    如果要在图像上显示文本或内容,请选择浅色或深色背景颜色。例如,如果您使用浅色文本或显示浅色地图,请选择深色背景颜色(例如黑色),以确保文本保持清晰。然后,调整颜色的透明度以使图像保持可见。

    1. 通栏卡片拖到您的站点上。
    2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
    3. 背景图像下,选择图像源。您可以上传图像文件或提供图像 URL。两种方案均支持 JPG、JPEG 和 PNG。
      • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像以定位并添加文件。最大文件大小为 3 MB。
      • 或者,选择图像 URL 并在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
    4. 添加图像后,可以通过输入十六进制代码或使用颜色选取器为行设置下的背景颜色选择颜色。
      注:

      仅行卡片支持背景颜色。

    5. 外观下,可以通过使用滑块或在百分比字段中输入一个值来调整图像的透明度。通过调整图像透明度,背景颜色将变亮或变暗,具体取决于您的调整方式。这是一种确保视力正常用户查看图像和文本的有效方法。
    6. 单击保存

    在行卡片上选择图像布局

    每个行卡片都有两个布局选项,允许您选择图像的显示方式。

    1. 将图像添加到行卡片后,可以选择针对卡片上显示的图像和任意内容使用宽布局或固定布局。
      • 如果您希望图像跨越站点宽度,请选择
      • 如果您希望图像保持固定,请选择固定
    2. 可以设置图像焦点以确保在根据不同屏幕调整图像大小时,图像始终聚焦于所需位置。
    3. 单击保存

    使用 HTML 配置文本

    如果您想要使用 HTML 来自定义文本,则可以使用以下 HTML 元素:

    1. 文本卡片拖动到现有行中。
    2. 将鼠标悬停在卡片上方,然后单击设置按钮切换到编辑模式。
    3. 单击代码视图选项。
    4. 输入代码。
    5. 单击保存

    警告:

    出于安全目的,文本卡片不支持嵌入式 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']