添加文本和图像

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

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

要开始执行操作,请登录到 ArcGIS Hub 并选择概览页面上的站点以查看站点列表。 如果您的组织具有 ArcGIS Hub Premium 许可,则可以找到在倡议下列出的站点。

提示:

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

添加和格式化文本

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

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

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

  6. 选择保存
注:

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

更改文本颜色

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

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

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

  5. 选择保存

更改字体

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

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

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

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

添加独立图像

可以将独立图像添加至任意行卡片。 内部共享图像仅可供已登录且属于核心团队或组织的用户查看。

  1. 以编辑模式打开站点或页面。
  2. 图像卡片添加到行中。
  3. 图像下,选择图像源。 两个选项均支持 JPG、JPEG、PNG 等。
    • 要提供 URL,请选择图像 URL,然后在 URL 字段中粘贴一个支持的图像链接。
    • 要上传文件,选择上传图像。 将文件拖动到框上或选择浏览图像以添加图像(文件大小不超过 3 MB)。
  4. 要自定义上传的图像,请选择裁剪图像按钮,然后拖动控点以调整裁剪框的大小。 要重新定位裁剪框,请选择虚线并在其上方拖动。 要调整缩放,使用图像下方的滑块。
  5. 选项菜单中,提供图像替代文本以帮助盲人用户并改善站点的可访问性。
  6. 如果适用,提供图像超链接,并设置链接是在同一选项卡中打开还是在新选项卡中打开。

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

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

添加背景图像和颜色

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

提示:

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

  1. 以编辑模式打开站点或页面。
  2. 向布局添加卡片,然后在外观下设置格式。
  3. 背景图像下,选择图像源。 两个选项均支持 JPG、JPEG、PNG 等。
    • 要提供 URL,请选择图像 URL,然后在 URL 字段中粘贴一个支持的图像链接。
    • 要上传文件,选择上传图像。 将文件拖动到框上或选择浏览图像以添加图像(文件大小不超过 3 MB)。
  4. 通过输入十六进制代码或选择一种颜色来选择背景颜色
    注:

    仅行卡片支持背景颜色。

  5. 要调整图像透明度,请使用滑块或在百分比字段中输入一个值。 此举会使背景颜色变亮或变暗并有助于确保盲人用户可以无障碍访问图像和文本。
  6. 选择保存

在行卡片上选择图像布局

每个行卡片均提供两个布局选项,用于设置图像的显示方式。

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

创建按钮

包含其他位置(例如,部分或页面)链接的按钮是十分有用的导航工具。 按钮还可以包含对操作的调用。

  1. 以编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择插入按钮,然后选择按钮
  4. 选择 </> 以 HTML 格式编辑
  5. 在 'href' 标签中,输入 URL 替换 '#',输入链接文本替换 'Button'(Calcite 组件指南
  6. 选择应用保存
  7. 有关按钮颜色的详细信息,请参阅创建主题

创建手风琴式菜单

如需添加常用问题,通常可以选择添加可折叠菜单。

  1. 编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择插入按钮,然后选择手风琴式
  4. 选择 </> 以 HTML 格式编辑以添加和格式化文本(Calcite 组件指南)。
  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'

使用 HTML 配置文本

使用以下元素和属性在 HTML 自定义文本。

  1. 以编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择 </> 以 HTML 格式编辑以添加和格式化文本(Calcite 组件指南)。
  4. 选择应用保存

警告:

出于安全目的,文本卡片不支持嵌入式 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'
  • 'image'
  • 'input'
  • 'ins'
  • 'kbd'
  • 'keygen'
  • 'li'
  • 'link'
  • 'main'
  • 'map'
  • 'mark'
  • 'menu'
  • 'meter'
  • 'nav'
  • 'ol'
  • 'optgroup'
  • 'option'
  • 'output'
  • 'br'
  • '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'

允许上述元素的以下属性。 所有受支持的 HTML 元素允许:['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']