构建站点

ArcGIS Hub 中,倡议是通过构建站点并嵌入其他元素(例如地图、应用程序、调查等)来组织的。 您将结合几个不同的组件,以创建一个有关公园改善倡议的引人入胜的网站。

创建倡议

您将首先创建一个倡议,该倡议将自动生成一个可以编辑和填充的网站。 ArcGIS Hub 包括针对不同网站组件的拖放功能,并允许您编辑 HTML 代码以进行进一步的自定义。

  1. 登录到您的 ArcGIS 组织帐户
    注:

    如果您没有组织帐户,请参阅软件访问权限选项

  2. 在功能区上,单击应用程序启动器并选择 Hub

    应用启动器中的 ArcGIS Hub

    ArcGIS Hub 主页提供几个关键工作流的访问权限:创建和管理倡议、添加内容和访问链接的社区组织以管理社区帐户和内容。 您可以随时通过单击编辑导航栏并选择概览来返回到概览。

  3. 倡议下,单击新建

    “新建”按钮

  4. 对于标题,键入 William Land Park Improvement Initiative
  5. 单击创建倡议

    创建倡议时,将在 ArcGIS Online 中为您创建一个站点项目和三个组。 这些组可用于管理倡议内容(内容组)、团队成员(核心团队组)和注册以接收有关倡议更新的人员(关注者组)。 该站点将自动共享给核心团队组,以便团队成员可以更新站点。

    创建倡议后,可能会出现一个入门窗口,其中包含有关 ArcGIS Hub 的信息。

  6. 如有必要,请关闭入门窗口。

添加标题部分

您站点的受众可能包括经常观光城市公园的任何人,这就是您的目标是要以清晰易用的方式共享内容的原因。 为此,您将使用高对比度的标题和背景图片来介绍该倡议。 首先,您将下载用于设计站点的图像。

  1. 下载 Images 压缩文件夹。
  2. 将已下载的文件夹解压缩到您容易记住的位置,例如 Documents 文件夹。

    接下来,您将上传此文件夹中的其中一个图像,以用作倡议顶部的通栏。 在 ArcGIS Hub 中,将按行组织内容。 通栏是倡议的第一行。

  3. ArcGIS Hub 中,指向第一行(带有图像背景和倡议标题的通栏)。 在通栏旁边显示的工具栏中,单击“编辑”按钮。

    通栏行的“编辑”按钮

    行外观侧面板随即显示。 在这里,您将专门为此行配置设计选项。

  4. 外观侧面板的背景图像下,单击上传。 单击浏览图像

    “浏览图像”按钮

  5. 浏览至已解压缩的 Images 文件夹。 双击 intro_image1

    随即上传该图像作为行的背景图像。 您还将更改行的透明背景颜色以提供过滤器,过滤器是对图像的一种补充。

  6. 对于背景颜色,键入 #6a9ab0

    “背景颜色”参数

    注:

    默认情况下,对于该行,其背景的图像透明度为 30%。 可以使用外观侧面板底部的图像透明度参数更改此值。

    接下来,您将编辑标题文本。

  7. 指向通栏行中的标题文本。 在文本上方的文本工具栏上,单击“编辑”按钮。

    标题卡片设置按钮

    文本将变为可编辑状态。

  8. 删除所有文本。

    在编辑文本时,可以使用文本格式工具,也可以插入自定义 HTML 和 CSS 代码。 在本例中,您将选择后者。

  9. 在行的底部,单击在 HTML 中编辑按钮。

    “在 HTML 中编辑”按钮

    HTML 编辑器随即出现。 您将添加 HTML 和 CSS,由此增大标题和通栏,从而给用户留下直接印象。

  10. HTML 窗口中,删除任何现有代码并粘贴以下代码:
    <div style="text-align: center;">
    </div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Initiative</strong></span></div>
    <h1 style="text-align: center; "><br></h1><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div>
  11. 单击应用。 在文本上方的文本工具栏上,单击“编辑”按钮保存编辑内容。

    新倡议站点显示了一些有关如何配置页面布局的示例。 由于要构建自定义站点,因此您将删除所有不会使用的模板信息。 在本例中,您将删除标题行和联系人行之间的 10 行内容。

  12. 向下滚动并指向到目前为止我们的进展行。 在该行旁边的工具栏上,单击“删除”按钮。

    “删除”按钮

    随即显示一个窗口,要求您确认是否要删除该行。

  13. 从布局中移除行窗口中,单击移除
  14. 删除以下行:
    • 通过结合现有应用程序和自定义站点来创建您自己的倡议
    • 立即参与社区!
    • 我们的行动目标
    • 请不要只讲故事,而是展示您的故事
    • 请参见参与行动的城市
    • 即将举行的事件列表
    • 注册并遵守该计划
  15. 在功能区,单击保存

    “保存”按钮

    更改已保存。

定义倡议的目的

接下来,您将以说明文本和附加图像的形式添加信息以定义倡议的目的。 您将创建一个新行,然后添加和编辑文本卡片,其中包含有关公众如何参与改善公园的信息。

  1. 如有必要,在侧面板上,单击自定义

    返回到“自定义”侧面板

  2. 自定义侧面板中,单击布局

    “自定义”侧面板中的“布局”选项

  3. 布局侧面板中,拖动标题行下的卡片并将其放置在插入行放置区中。

    将“行”卡片拖动到“在下方插入”放置区

    将创建个空行。 您需要将文本卡片拖动到该行中。

  4. 行设置侧面板中,单击布局

    “布局”后退按钮

    您将返回到自定义窗格。

  5. 文本卡片拖动到空行中,然后将其放置在添加到行放置区中。

    将“文本”卡片拖动到“添加到行”放置区

    文本编辑器随即出现。

  6. 在文本编辑器中,复制粘贴以下文本:We want your insight on how we can make William Land Park a cleaner, more beautiful space.
  7. 突出显示该文本。 单击样式按钮并选择页眉 2

    “样式”菜单中的“页眉 2”选项

  8. 取消选择所有文本。
  9. Enter 键在句段前后输入一个空格。
  10. 自定义侧面板中,将图像卡片拖动到文本卡片左侧,并将其放置在从左侧插入放置区中。

    图像侧面板随即出现。 您将从 Images 文件夹中上传其中一张图像。

  11. 图像侧面板中,单击上传,然后单击浏览图像。 上传 park_image2

    随即将该图像添加到行。 您将调整其大小,使其更好地与文本对齐。

  12. 指向图像卡片的右侧并单击箭头。

    用于调整图像大小的箭头

    图像大小随即缩小。 您还将向图像添加替换文本以改善可访问性。

  13. 图像设置侧面板中,展开选项。 对于图像替换文本,输入 People enjoying their park

    “图像替换文本”参数

  14. 在功能区,单击保存

配置品牌和全球导航

您将添加与公园主题相关的组织徽标和品牌,以反映公园的美感。 然后,您将在站点顶部配置全球导航栏。 该栏允许 ArcGIS Hub 社区用户登录,管理其用户配置文件和通知,以及导航至 ArcGIS Hub 的其他部分。 将为所有新的倡议站点自动启用全球导航功能。

注:

有关详细信息,请参阅配置全球导航和菜单链接

  1. 图像设置侧面板中,单击布局,然后单击自定义

    您将返回到自定义侧面板。

  2. 自定义侧面板中,单击页眉

    “页眉”选项

  3. 页眉侧面板中,关闭名称

    已关闭“名称”参数

  4. 对于徽标,单击上传,然后单击浏览图像。 浏览至已解压缩的 Images 文件夹并上传 cpp-logo 图像。

    随即将徽标添加到倡议顶部第一行上方。 接下来,您将添加一个预配置的调查,该调查将允许用户提供有关公园状况的反馈,并选择是否愿意协助进行公园管理。

  5. 展开菜单。 单击添加链接,然后选择至现有内容

    “添加链接”按钮

  6. 添加内容窗口的来源下,单击世界(公共)。 在采集下,单击反馈

    “来源”和“采集”搜索选项

  7. 在搜索栏中,键入 Adopt a Park Form (Learn ArcGIS) 并按 Enter 键。
  8. 在结果列表中,选中 Adopt a Park Form (Learn ArcGIS) 的复选框。

    Adopt a Park Form (Learn ArcGIS) 调查

  9. 单击保存

    随即将调查添加到侧面板。

  10. 在侧面板中,对于 Adopt a Park Form (Learn ArcGIS),指向设置按钮并选择编辑

    Adopt a Park Form 调查的“编辑”按钮

    编辑链接窗口随即出现。

  11. 对于链接名称,删除 Learn ArcGIS 文本,以使链接名称仅为 Adopt a Park Form。 单击保存

    您还将添加指向站点的链接,其中包含有关开放空间的详细信息。

  12. 在侧面板中,单击添加链接,然后选择至链接
  13. 对于链接名称,键入 What is Open Space? 对于链接目标,请复制并粘贴以下 URL:https://www.epa.gov/G3/green-streets-and-community-open-space
  14. 单击保存

    您已添加的两个链接都将出现在第一行上方页眉的徽标旁边。

    具有徽标和链接的页眉

  15. 单击保存

向页脚添加属性

页脚为重要信息提供了空间,例如联系人、服务条款、行动号召以及页面上任何图像的属性。 首先,您将删除模板页脚,然后设计一个自定义的简单页脚,以用于确保任何非原创内容,并指示此站点仅用于指导目的。

  1. 滚动到倡议底部。
  2. 在侧面板中,单击自定义以返回到自定义侧面板。 单击页脚

    “页脚”选项

    页脚侧面板随即显示。

  3. 在侧面板上,单击

    页脚的“无”选项

    将移除默认页脚。 接下来,您将编辑联系人行以包含致谢。

  4. 指向联系人行。 在行侧面的工具栏中,单击编辑按钮。

    “联系人”行的“编辑”按钮

  5. 在侧面板中,对于背景颜色,键入 #32444d
  6. 联系人行中,单击文本以对其进行编辑。 删除现有文本,包括行动号召按钮,然后键入 Acknowledgements
    提示:

    要粘贴不带格式的文本,在粘贴时按 Ctrl+Shift+V

  7. Enter 键。 复制并粘贴以下文本:

    This is not an official website of Sacramento and is used for demonstration purposes only.

    Sacramento Parks data was provided by Sacramento County Open Data.

    © Custom Initiative Template. 本站点使用的所有照片均来自 Unsplash, unDraw 和 Pexels。

  8. 删除每行文本之间的任何换行符。
  9. 突出显示所有文本。 单击段落按钮,然后选择居中对齐

    “居中对齐”按钮

  10. 突出显示鸣谢。 单击样式按钮并选择页眉 1

    Acknowledgements 部分即已完成。

    已完成 Acknowledgements 部分

  11. 在功能区,单击保存

添加倡议说明

清楚地传达您的目标以及社区的帮助方式对于吸引受众的注意力至关重要。 接下来,您将介绍调查,并使用实时显示结果的 web 地图向人们展示他们的响应是如何产生影响的。 您将描述人们共享其见解的方式,并描述 web 地图将如何根据其响应进行更新。

  1. 在“简介”行和“页脚”行之间,添加另一个卡片。

    在“简介”行和“页脚”行之间插入的行

    侧面板随即出现。

  2. 对于文本颜色,输入 #ffffff。 对于背景颜色,键入 #6a9ab0
  3. 单击布局以返回到自定义侧面板。 将文本卡片添加到空行中。
  4. 在文本卡片中,键入以下文本:Please take the survey below to add your insight to the map. Your responses will help us to identify what and where improvements can be made.
  5. Enter 键以在文本的前后各添加一行。
  6. 突出显示所有文本。 单击样式按钮并选择页眉 2

    参与说明

  7. 在文本右侧添加一个图像卡片。

    图像侧面板随即出现。

  8. 单击上传,然后单击浏览图像。 上传 map_image4
  9. 缩小图像卡片的大小,以使图像高度大约与文本段落的高度相同。

    说明和地图图片

  10. 在功能区,单击保存

现在,您的站点已包含说明,这将更有助于用户了解其目的以及与地图和调查交互的方法。


收集社区反馈

接下来,您将创建一个新行,并用预配置的地图和调查对其进行填充。 该调查旨在收集有意愿提供有关公园的反馈的用户相关信息。 调查结果将直接添加到 Web 地图中,该 Web 地图会立即更新以显示响应。

添加调查

调查问题将询问用户所发生的事件及其地点。

  1. 1. 使用所学内容在说明行的下方添加卡片。
  2. 侧面板中,对于背景颜色,键入 #f5fcfc

    您将添加一个分隔条卡片以在行中创建额外空格。

  3. 向行中添加分隔条卡片。
  4. 分隔条卡片下,添加一个调查卡片。

    调查侧面板随即显示。

  5. 单击选择调查

    “选择调查”按钮

    随即显示选择一个调查窗口。 您可以选择您或组织中其他人创建的调查。

  6. 来源下,选择世界(公共)
  7. 搜索 William Land Parks Improvements Feedback (Learn ArcGIS)。 在搜索结果列表中,单击按钮以选择 William Land Parks Improvements Feedback (Learn ArcGIS)

    在“选择一个调查”窗口中选择 William Land Park Improvements Feedback (Learn ArcGIS)

  8. 单击保存
  9. 调查侧面板中,单击嵌入

    “嵌入”按钮

    现在,该调查已嵌入站点,用户无需在另一个窗口中将其打开。

    嵌入式调查

  10. 调查侧面板的选项下,对于高度,键入 945
  11. 在功能区,单击保存

添加反馈 Web 地图

您将在调查旁边添加一个 Web 地图,该地图已预配置为实时显示调查提交内容。

  1. 调查卡片右侧,添加一个地图卡片。

    地图侧面板随即显示。

  2. 单击选择地图
  3. 选择一个地图窗口中,对于来源下,选择世界(公共)。 搜索 Community Feedback for William Land Park (Learn ArcGIS) 并将其选中。
  4. 单击保存
  5. 地图侧面板的选项下,将标题更改为 Community Feedback for William Land Park
  6. 对于高度 (px),输入 900
  7. 打开启用地图图例

    “启用地图图例”选项已打开

    将在倡议中配置嵌入式地图。

    嵌入式地图

  8. 调查地图卡片下,添加一个分隔条卡片。
  9. 在功能区,单击保存

创建行动号召

您的倡议网站结尾处的行动号召会提示公众成员注册一个社区帐户,以接收与您的倡议有关的电子邮件。 按照行动号召操作的社区成员将添加到您倡议的关注者组中,以便您可以向他们发送电子邮件。

  1. 在调查行和页脚行之间添加一个卡片。
  2. 侧面板中,对于文本颜色,键入 #32444d
  3. 文本卡片添加到该行中。 在文本卡片中,输入以下文本:

    Follow us!

    We'll reach out about once a month to share the following:

  4. 使用页眉 1 样式设置 Follow us! 的样式。 将使用页眉 2 样式设置 We'll reach out about once a month to share the following: 的样式。

    使用“页眉 1”和“页眉 2”样式格式化的文本

  5. 在第二行下,添加一个换行符并键入以下文本:

    Project updates

    New ways to get involved

    即将举行的活动

    More feedback and opportunities

  6. 突出显示您在先前步骤中输入的文本,然后单击无序列表按钮。

    无序列表格式

  7. 使用页眉 3 样式设置列表的样式。
  8. 文本卡片右侧,添加一个图像卡片并上传 mailbox_image5
  9. 缩小两次图像大小。

    接下来,您将添加一个按钮,用户可以单击此按钮以关注倡议。

  10. 文本卡片下,添加一个关注倡议卡片。

    随即添加用于关注或取消关注倡议的按钮。 该按钮还具有一些说明文本。 由于您已添加的文本卡片包含有关关注倡议的信息,因此可以删除按钮随附的文本。

  11. 关注设置侧面板中,删除行动号召字段中的文本。

    已移除文本的“行动号召”字段

    已移除文本。 接下来,您将更改按钮的颜色。

  12. 单击布局,然后单击自定义以返回到自定义侧面板。
  13. 单击主题。 对于按钮背景颜色,输入 #6a9ab0
  14. 在功能区,单击保存

    您已完成倡议。 现在,即可共享倡议以供其他人查看。

  15. 在功能区上,单击具有访问权限的群组可以查看此 Hub 站点应用程序按钮。

    “具有访问权限的群组可以查看此 Hub 站点应用程序”按钮

  16. 共享侧面板中,对于共享级别,选择公众

    您的站点现在可供公众访问。 接下来,您将发布该倡议。

  17. 在功能区上,指向保存箭头,然后单击发布草稿

    “发布草稿”选项

    随即发布该倡议。 您现在可以查看已发布的站点。

  18. 在功能区上,指向保存箭头,然后单击查看已发布的内容

    “查看已发布的内容”选项

    您将转至该站点的已发布版本,任何人都可以查看该版本的站点。 通过查看站点,您可以查看站点对用户的显示方式。 您还可以浏览调查和地图的功能。

  19. 单击编辑按钮可以返回到编辑模式。

    编辑按钮

    成员开始关注您的倡议后,您可以通过社区选项卡对其进行管理。

  20. 在功能区中,单击 William Land Park Improvement Initiative,然后选择社区

    “社区”选项

    社区页面随即显示。 在此页面上,您可以查看倡议的关注者列表,管理所有关注者,以及将有关倡议进度的更新发送给关注者。

现在,您已经创建了第一个站点,并且可以与合适的受众共享它。 您的站点可以作为您使用社交媒体宣传的内容而独立存在,也可以嵌入组织的其他网站和页面中。

您可以在教程库中找到更多教程。