Skip To Content

使用页眉和主题选项来打造站点品牌

可以使用组织的徽标和颜色来打造站点的品牌,从而使您的内容具有可信性和权威性。这也有助于将您的站点与组织的其他 web 内容混合。本主题将介绍管理员和核心团队成员如何执行以下操作:

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

提示:

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

选择页眉样式

在站点的页眉处,可以使用徽标来打造站点的品牌,使用菜单链接创建到其他资源的导航,并链接到社交媒体帐户。

  1. 单击自定义面板中的页眉
  2. 单击外观菜单以选择页眉的样式。以下三个选项可供选择:
      • 标准 - 每个新站点的默认设置,该设计具有一个细而紧凑的栏,包含用于放置徽标(60 像素)、社交媒体和菜单链接的空间。
      • 突出 - 该设计将提供较大空间,用于放置大尺寸徽标(120 像素)和额外的菜单链接。
      • 自定义 CSS/HTML - 使用启用了语法的代码编辑器来配置带有自定义代码的页眉。有关详细信息,请参阅自定义页眉和页脚
      注:

      要添加徽标,请遵循下一部分中提供的步骤。

  3. 单击品牌菜单。菜单中提供的所有字段均为可选字段。
    • 名称 - 输入要在站点页眉中显示的名称。您在此字段中提供的名称仅在页眉中显示,将不会反映在站点的 URL 或站点列表中。
    • 简称 - 输入您已添加到页眉的简化版本名称。如果页眉的原始名称过长,则仅当在较小尺寸的屏幕(例如手机)上进行查看时,才会显示此名称。
      提示:

      人们越来越多地使用移动设备来访问互联网。强烈建议您添加一个简称,确保站点在任何设备上的质量。

  4. 针对布局选择选项:
  5. 如果您想使用自定义 HTML 或 CSS 标记站点页眉,请选择使用自定义 HTML/CSS

    注:

    页眉 HTML 不支持嵌入式 JavaScript。脚本标记将被忽略。

  6. 修改侧面板中的 CSS 框,然后单击应用更改查看您的代码是否产生影响。
  7. 单击保存

向页眉添加徽标

站点徽标的大小和位置取决于您选择的页眉样式。

  1. 单击自定义面板中的页眉
  2. 单击以展开品牌菜单。
  3. 单击徽标切换按钮将其打开。
  4. 可以通过选择图像 URL 或者通过从文件上传图像来添加图像。

    提示:
    如果要从文件上传图像,则另存为 PNG 文件的图像效果最佳。可以在自定义面板上卡片的图像设置部分中裁剪并缩放图像。

  5. 如果您使用的是突出页眉,则可以选择图像对齐设置。
  6. 对于 徽标替代文本,请提供符合可用性标准的文本。

    提示:
    如果徽标上包含文本,则替代文本可以为公司名称。如果徽标为字体标志设计,则可以将其视为装饰性文本,并键入“”替代文本。

  7. 单击保存

创建主题

通过选择站点的页眉、文本和按钮的颜色来创建站点的主题。

提示:

选择颜色时,请查看组织的品牌指南。许多品牌指南均为诸如网站和徽标等内容提供准确的颜色代码。如果您没有品牌指南,请咨询您的团队或利益相关者,以确保站点的主题能够正确反映您的组织。

  1. 要为以下任何选项选择颜色,请输入颜色代码,或从颜色代码字段旁边的颜色选取器中选择颜色。
    • 全球导航背景颜色将颜色应用于站点的全球导航栏。
    • 全球导航文本颜色将颜色应用于全球导航栏中的文本。
      注:

      有关全球导航的详细信息,请参阅什么是全球导航?

    • 页眉背景颜色将颜色应用于您站点的页眉。
    • 页眉文本颜色将颜色应用于页眉中的所有文本。
    • 正文背景颜色将颜色应用于您站点的各行。还可以按照使用行卡片添加第一张卡片中提供的步骤为每行配置行颜色和文本颜色。
    • 正文文本颜色应用于您站点上的文本。
    • 正文链接颜色将颜色应用于您站点上提供的任何链接。
    • 按钮背景颜色将颜色应用于您站点上提供的按钮。
    • 按钮文本颜色应用于您站点上提供的任何按钮上的文本。
  2. 设置颜色后,单击应用更改
  3. 您还可以将字体应用于页眉和站点正文中的文本。
    • 要为站点的正文选择字体,请单击基本字体设置按钮。
    • 要更改站点页眉的字体,请单击页眉字体设置按钮。
注:

要重新开始或返回默认颜色,请选择主题菜单底部的重置为默认值

创建页脚

站点编辑器的默认设置不包含页脚。您必须创建自定义页脚,才能使站点中所有页面的页脚保持一致。

  1. 页脚部分中,选择自定义

    页面上将显示默认页脚,侧面板上将显示 CSS 框。

  2. 单击页脚右下角的设置按钮可以编辑 HTML。
  3. 再次单击设置按钮可以查看更改。
  4. 修改侧面板中的 CSS 框,然后单击应用更改可以查看对 HTML 的影响。
提示:

页脚 HTML 不支持嵌入式 JavaScript。脚本标记将被忽略。

接下来的步骤

要为您的站点配置更多品牌信息,可执行以下操作:

  • 添加菜单链接,并确保已启用全球导航。有关详细信息,请参阅配置菜单链接和全球导航
  • 每个站点都包含一个 URL(web 地址)。如果您的组织具有自定义域,则可以配置此 URL 来进一步打造站点的品牌。有关详细信息,请参阅配置自定义 URL