Skip To Content

添加文本和图像

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

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

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

    提示:

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

    添加和格式化文本

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

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

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

    7. 单击保存

    更改文本颜色

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

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

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

    5. 单击保存

    更改字体

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

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

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

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

    1. 以编辑模式打开站点或页面。
    2. 文本添加到站点或页面布局中。
    3. 添加文本或选择现有文本。
    4. 单击无序列表以创建项目符号列表,或单击有序列表以添加编号列表。
    5. 单击保存

    创建手风琴式菜单

    如需添加常见问题,添加可折叠菜单是十分有用的选项。

    1. 编辑模式打开站点或页面。
    2. 向布局添加文本卡片。
    3. 单击“插入”按钮并选择手风琴式
    4. 添加格式文本。
    5. 单击保存

    添加独立图像

    可通过从文件上传图像或提供托管图像 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. 单击插入按钮并选择按钮
    4. 编辑按钮上的文本以包含您的行动号召。
    5. 单击刚刚添加的按钮,然后单击链接按钮。
    6. 要显示的文本文本框中,添加文本(如果尚未添加)。
    7. 在 URL 文本框中,粘贴您希望用户在单击按钮时将定向到的链接。
    8. 单击插入链接以确认您的更改。
    9. 单击保存
    10. 有关按钮颜色的详细信息,请参阅创建主题

    添加背景图像和颜色

    您可以使用卡片在其他卡片后面添加图像。

    提示:

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

    1. 以编辑模式打开站点或页面。
    2. 向布局添加卡片。
    3. 背景图像下,选择图像源。 您可以上传图像文件或提供图像 URL。 两种方案均支持 JPG、JPEG 和 PNG。
      • 要上传图像文件,请选择上传图像,然后将文件拖动至站点编辑器中的框内,或单击浏览图像以定位并添加文件。 最大文件大小为 3 MB。
      • 或者,选择图像 URL 并在 URL 字段中粘贴受支持的图像链接以提供图像 URL。
    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']