构建站点
在 ArcGIS Hub 中，您可以轻松构建交互式站点，并无缝嵌入地图、应用程序和调查问卷等多种动态元素。 通过组合多种组件，您将创建一个以公园改善为主题，极具吸引力的网站。
开始创建站点
首先，您需要创建一个可供编辑和填充内容的站点。 ArcGIS Hub 包括针对不同网站组件的拖放功能，并允许您编辑 HTML 代码以进行进一步的自定义。
- 登录到您的 ArcGIS 组织账户。
注：
如果您没有组织账户，请参阅软件访问权限选项。
- 在功能区上，单击应用程序启动器并选择 Hub。
ArcGIS Hub 随即打开。
- 如果出现欢迎使用工作空间窗口，请单击使用工作空间。
ArcGIS Hub 工作空间概览页面提供了几个关键工作流的访问权限，例如创建和管理站点以及添加内容。
- 单击创建，然后选择站点。
随即显示创建站点窗口。
- 对于标题，键入 William Land Park Improvement Plan。
您还将添加一个子域，它将出现在站点的 URL 中。
- 对于子域，键入 william-land-park-improvement。
接下来，您将选择默认目录和站点布局。 目录包含站点内容，并可自定义以包含您希望用户通过站点搜索栏发现的内容项目。 在本教程中，您将使用快速启动目录，它会自动为您生成一个基本目录。
对于布局，您将使用简单布局，其中包含一些可供编辑的示例元素，以便您创建自己的站点。
- 对于目录，选择快速启动目录。 对于站点布局，选择简单。
- 单击下一步。
您可以选择与 ArcGIS Online 上的群组共享您的站点。 目前，您不会与任何群组共享该站点。
- 单击创建。
随即创建站点。 当您选择快速启动目录选项后创建站点项目时，ArcGIS Online 中将为您创建一个群组。 该群组可用于管理站点内容，但您无需用它来编辑站点布局。
- 在确认消息下方，对于您的站点，单击编辑布局。
您的站点将以可编辑的形式显示。 由于您选择了简单站点布局，因此它已经包含一些默认内容。
添加标题部分
您站点的受众可能包括经常观光城市公园的任何人，这就是您的目标是要以清晰易用的方式共享内容的原因。 为此，您将使用高对比度的标题和背景图片来介绍该站点。 首先，您将下载用于设计站点的图像。
- 下载 Images 压缩文件夹。
- 将已下载的文件夹解压缩到您容易记住的位置，例如 Documents 文件夹。
接下来，您将上传此文件夹中的其中一个图像，以用作站点顶部的通栏。 在 ArcGIS Hub 中，将按行组织内容。 通栏是站点的第一行。
- 在 ArcGIS Hub 中，指向第一行（带有图像背景的通栏）。 在通栏侧面的工具栏中，单击编辑按钮。
行侧面板随即出现。 在这里，您将专门为此行配置设计选项。
- 在行侧面板的背景图像下，单击上传。 单击浏览图像。
- 浏览至已解压缩的 Images 文件夹。 双击 intro_image1。
随即上传该图像作为行的背景图像。 您还将更改行的透明背景颜色以提供过滤器，过滤器是对图像的一种补充。
- 对于背景颜色，键入 #6a9ab0。
- 对于图像透明度，输入 30%。
接下来，您将编辑标题文本。
- 指向 Hero section 文本。 在文本工具栏上，单击编辑按钮。
文本将变为可编辑状态。 在编辑文本时，可以使用文本格式工具，也可以插入自定义 HTML 和 CSS 代码。 在本例中，您将选择后者。
- 在文本编辑器的底部，单击在 HTML 中编辑。
HTML 编辑器随即出现。 您将添加 HTML 和 CSS，由此增大标题和通栏，从而给用户留下直接印象。
- 在 HTML 窗口中，删除现有代码并粘贴以下代码：
<div class="banner-heading" style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Plan</strong></span></div> - 单击应用。
您将删除该行中的另一个文本卡片，它提供了一些本站点不需要的额外背景信息。
- 指向以 This hero section is a row 开头的文本。 在文本工具栏中，单击删除按钮。
- 在从布局中移除卡片窗口中，单击移除。
已移除文本。 现在，该行仅包含站点的标题。
- 在功能区，单击保存布局。
更改已保存。
定义目的
接下来，您将通过文本形式添加信息，以定义站点的目的，说明公众如何参与公园共建。 您选择的站点布局在标题行下方包含一个行，可用于定义站点的目的。
- 单击标题为 Section 的文本卡片进行编辑。
- 在文本编辑器中，删除所有现有文本。 复制粘贴以下文本：We want your insight on how we can make William Land Park a cleaner, more beautiful space.
提示：
要粘贴无格式文本，请右键单击要粘贴的位置并选择粘贴为纯文本，或按 Ctrl+Shift+V 进行粘贴。
- 高亮显示该文本。 单击样式按钮并选择页眉 2。
- 取消选择文本。 将光标置于 We 之前，按 Enter 键在文本前添加一个换行符。
- 将光标置于句号后，按 Enter 键在文本后添加一个换行符。
- 在自定义侧面板中，将图像卡片拖动到文本卡片左侧，并将其放置在从左侧插入放置区中。
图像侧面板随即出现。 您将从 Images 文件夹中上传一张图像。
- 在图像侧面板中，单击上传。 单击浏览图像。
- 上传 park_image2。
随即将该图像添加到行。 您将调整其大小，使其更好地与文本对齐。
- 指向图像卡片的右侧并单击箭头。
图像大小随即缩小。 您还将向图像添加替换文本以改善可访问性。
- 在图像侧面板中，展开选项。 对于图像替换文本，输入 People enjoying their park。
最后，您将移除文本和图片上方及下方添加了不必要空白区域的分隔条。
- 指向文本和图片上方的空白区域。 在分隔条工具栏上，单击删除按钮。
- 在从布局中移除卡片窗口中，单击移除。
- 同样，移除文本和图片下方的分隔条卡片。
- 在功能区，单击保存布局。
配置页眉
页眉显示在站点每个页面的顶部，是进行品牌展示的理想位置。 您将添加您组织的徽标以及链接，其中包含有关公园和开放空间的详细信息。
- 在自定义侧面板中，单击页眉。
- 在页眉侧面板中，打开徽标。
- 对于徽标，单击上传。 单击浏览图像。
- 浏览至已解压缩的 Images 文件夹并上传 cpp-logo 图像。
随即将徽标添加到站点顶部第一行上方。 您还可以在页眉中添加站点名称，但由于站点名称已出现在标题行中，这样做会显得重复。 您将完全从页眉中移除名称。
- 关闭名称。
您还将添加指向站点的链接，其中包含有关开放空间的详细信息。
- 展开菜单。 单击添加链接，然后选择至链接。
添加链接窗口随即出现。
- 对于链接名称，键入 What is Open Space?
- 对于链接目标，请复制并粘贴以下 URL：https://www.epa.gov/G3/green-streets-and-community-open-space
- 单击保存。
您添加的链接将显示在页眉中，徽标旁边。
- 在功能区，单击保存布局。
配置页脚
页脚显示在站点的底部，为重要信息提供了空间，例如服务条款、行动号召以及页面中任何图像的署名。 首先，您将删除模板页脚。 然后，您将设计一个简单的自定义页脚，用于鸣谢所有非原创内容，并声明此站点仅用于教学目的。
- 在侧面板中，单击自定义以返回到自定义侧面板。
- 单击页脚。
- 在页脚侧面板上，单击无。
将移除默认页脚。 接下来，您将创建一个新行来包含您想要的信息。
- 在页脚侧面板中，单击自定义。 单击布局。
- 在布局侧面板中，将一个行卡片拖到站点底部，并放入在下方插入放置区。
您将为该行设置不同的文本和背景颜色，以区别于站点的其余内容。
- 在行侧面板中，对于文本颜色，键入 #ffffff。 对于背景颜色，键入 #32444d。
接下来，您将添加文本。
- 在行侧面板中，单击布局以返回布局侧面板。
- 将文本卡片拖动到空行中，然后将其放置在添加到行放置区中。
- 在文本编辑器中，复制并粘贴以下无格式文本：
致谢
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.
© 自定义站点模板。 本站点使用的所有照片均来自 iStock 和 Esri。
- 删除文本行之间的任何空换行符。
- 突出显示所有文本。 单击段落按钮，然后选择居中对齐。
- 突出显示鸣谢。 单击样式按钮并选择页眉 1。
Acknowledgements 部分即已完成。
- 在功能区，单击保存布局。
添加说明
清楚地传达您的目标以及社区的帮助方式对于吸引受众的注意力至关重要。 接下来，您将介绍调查，并使用实时显示结果的 web 地图向人们展示他们的响应是如何产生影响的。 您将描述人们共享其见解的方式，并描述 web 地图将如何根据其响应进行更新。
- 在“简介”行和“页脚”行之间，添加另一个行卡片。
- 在行侧面板中，对于文本颜色，键入 #ffffff。 对于背景颜色，键入 #6a9ab0。
- 单击布局以返回到自定义侧面板。 将文本卡片添加到空行中。
- 在文本卡片中，键入（或复制粘贴）以下文本：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.
- 将光标置于适当位置并按 Enter 键，在文本前后各添加一个空行。
- 突出显示所有文本。 单击样式按钮并选择页眉 2。
- 在文本右侧添加一个图像卡片。
- 在图像侧面板中，单击上传，然后单击浏览图像。 上传 map_image4。
- 指向图像的左侧并单击箭头以缩小图像尺寸。 继续缩小图像尺寸，直到图像的高度与文本段落的高度大致相同。
- 在功能区，单击保存布局。
现在，您的站点已包含说明，这将更有助于用户了解其目的以及与您接下来将添加的地图和调查交互的方法。
收集社区反馈
与静态网站相比，ArcGIS Hub 能集成 ArcGIS 地图和调查等内容，显著提升用户互动体验。 现在您已创建了包含基础信息和品牌标识的站点，接下来将添加交互式元素，邀请社区参与公园改善计划。
添加调查
您将创建一个新行，并用预配置的地图和调查对其进行填充。 该调查旨在收集有关公园的反馈。 调查结果将直接添加到 Web 地图中，该 Web 地图会立即更新以显示响应。
- 在图像侧面板中，单击布局。 在说明行和致谢行之间添加一个行卡片。
- 在行侧面板中，对于背景颜色，键入 #f5fcfc。
您将添加一个分隔条卡片以在行中创建额外空间。
- 在行侧面板中，单击布局。
- 向行中添加分隔条卡片。
接下来，您将添加调查。 该调查已通过 ArcGIS Survey123 为您创建完毕。
注：
Survey123 是一个基于表单的数据收集平台，可与 ArcGIS 地图和应用程序相集成。 本教程不涵盖如何创建调查的相关内容。 如需学习，请尝试教程 ArcGIS Survey123 Web 设计器入门。
- 在分隔条侧面板中，单击布局。
- 在分隔条卡片下，添加一个调查卡片。
调查侧面板随即显示。
- 单击选择调查。
随即显示选择一个调查窗口。 您可以选择您或其他人创建的调查。
- 在来源下，选择世界（公共）。
- 搜索 William Land Park Improvements Feedback (Esri Tutorials)。 在搜索结果列表中，选择 William Land Parks Improvements Feedback (Esri Tutorials)。
- 单击保存。
- 在调查侧面板中，单击嵌入。
调查现在将嵌入到站点。 用户无需在另一个窗口中将其打开。
您将增加调查高度，让用户无需滚动即可查看大部分问题。
- 在调查侧面板的选项下，对于高度，键入 945。
- 在功能区，单击保存布局。
添加 web 地图
您还将向调查添加一个 Web 地图，该地图已预配置为实时显示调查提交内容。 当用户填写调查时，地图将自动添加一个标记点，并关联其调查答案。
注：
与本教程使用的调查相同，该地图也已预先创建。 如需学习如何制作 Web 地图，请尝试教程 ArcGIS Online 入门。
- 在调查侧面板中，单击布局。
- 在调查右侧，添加一个地图卡片。
地图侧面板随即显示。
- 单击选择地图。
- 在选择一个地图窗口中，对于来源下，选择世界（公共）。
- 搜索 Community Feedback for William Land Park (Esri Tutorials)。 在结果列表中，选中 Community Feedback for William Land Park (Esri Tutorials)。
地图已添加。
- 单击保存。
- 在地图侧面板的选项下，将标题更改为 Community Feedback for William Land Park。
- 对于高度 (px)，输入 900。
- 打开启用地图图例。
将在站点中配置嵌入式地图。 地图将显示在调查表单旁。
- 在地图侧面板中，单击布局。
- 在调查和地图下方添加一个分隔条卡片。
- 在功能区，单击保存布局。
发布站点
您已完成站点。 您会将其发布以便其他人可以查看。
- 在功能区，单击发布布局。
站点已发布。 目前站点尚未共享，仅您本人可查看。 共享前，建议先预览确认显示内容是否正确。
- 在功能区，单击查看并选择查看已发布的内容。
您将转至该站点的已发布版本。 通过查看站点，您可以查看站点对用户的显示方式。
- 浏览已发布的站点。 确保站点的所有元素正常显示和运行。
- （可选）如果发现任何问题或需进一步编辑，单击编辑按钮即可。
- （可选）您可以进行任何更改。 保存布局并返回查看站点的已发布版本。
对站点满意后，即可将其共享给所有人查看。
- 在查看已发布站点时，单击管理站点按钮。
返回到您的工作空间。
- 如果出现欢迎使用工作空间窗口，请单击使用工作空间。
- 在功能区，单击共享。
- 对于共享级别，选择公众。
现在，任何持有链接的用户均可查看您的站点。
提示：
若要返回已发布的站点，单击查看站点即可。
在本教程中，您使用 ArcGIS Hub 创建了一个站点。 您添加了标题、修改了页眉页脚，并创建了包含站点说明的信息行。 此外，您还嵌入了调查和 Web 地图，提供了交互式元素以促进社区参与。
现在，您已经创建了第一个站点，并且可以与合适的受众共享它。 您的站点可以作为您使用社交媒体宣传的内容而独立存在，也可以嵌入组织的其他网站和页面中。
您可以在教程库中找到更多教程。
