打开体验
首先，您将打开在之前教程中创建的体验。
- 如果您已完成前一教程使用两张地图创建 web 体验，请重新打开 American River Marine Estuary 体验并跳至下一节。
注：
如果不知道如何查找体验，请打开 ArcGIS Experience Builder 并使用 ArcGIS 帐户登录。 您的体验将列在最近体验页面上。
- 如果没有完成前面的教程，请打开 ArcGIS Experience Builder 并登录 ArcGIS 帐户。
注：
如果您没有 ArcGIS 账户，请参阅软件访问权限选项。
出现最近体验页面。
- 单击新建按钮。
- 单击 ArcGIS Online 选项卡。
- 在搜索栏中，键入 estuary template 1。
- 在 American River Marine Estuary 模板 1 卡片上，单击创建按钮。
出现画布，显示到目前为止创建的体验。 它包括一个可在两个地图之间切换的地图微件，以及一个带标题的页眉。
- 在构建工具栏上，单击标题并将其重命名为 American River Marine Estuary。
添加图例和列微件
并非所有地图都需要图例。 例如，如果地图上所有可见物都已标注，或以其他方式显而易见，那么图例就是多余的。 不过，该 web 应用程序中的两幅地图确实需要图例。 您将通过图例微件把它们添加到布局中，以便用户正确理解地图。 您还将添加另一个布局微件，在本情况下是一个列。
- 如果插入微件窗格不可见，请在工具栏上单击插入按钮。
- 在插入微件窗格中的以地图为中心部分，将图例微件拖到行微件的空白部分。
新的微件占满了整个空间，没有空间放置更多的微件。 您曾希望在这个空间里垂直堆放几个微件。 为此，您必须首先添加一个列微件。
- 在工具栏上单击撤消按钮。
- 在插入微件窗格中，单击搜索按钮。 键入 column。
- 在窗格中，将列微件拖到行微件的空白部分。
列可以垂直组织内容。
- 在插入微件窗格中，清除搜索栏。 将图例微件拖动到列上。
图例微件不再占据整个空间。
- 在图例窗格中，对于选择地图微件，选择地图。
该微件会填充与当前地图匹配的图例。
- 在构建器工具栏上，单击实时视图，这样就可以与地图和其他微件进行交互。
- 在地图的左下角，单击“切换地图”按钮。
图例更新后会显示另一张地图的图例。
添加书签微件
接下来，您将通过书签微件为 web 应用程序添加更多的互动性。 该微件可让用户放大地图上的每种覆盖类型。
- 在构建器工具栏上，关闭实时视图。
在实时视图中无法添加微件。
- 在侧边工具栏上，单击插入按钮，重新打开插入微件窗格。
- 搜索书签。 将书签微件拖到画布上，并将其放置在图例下方的列中。
- 在书签窗格的选择模板中，在简单下选择第四个选项幻灯片 1（指向模板查看其名称）。
- 单击开始。
- 对于选择地图微件，选择地图。
接下来，您可以选择添加书签。 您可以为地图的任何部分手动定义书签。 然而，您的两个地图都已经定义了一组书签，所以您可以使用这些书签。
- 选中显示 web 地图的书签复选框。
书签微件弹出第一个书签海草。
您将更改排列设置，以便用户可以滚动浏览书签。
- 在书签窗格中，展开排列部分。
- 对于分页样式，选择滚动。 对于方向，选择向下。
微件上会出现箭头。
- 对于项目高度 (px)，键入 200。
接下来，更改微件的背景颜色为白色，与图例一致。 一致性是良好布局设计的一个重要方面。
- 在窗格顶部，单击样式选项卡。
- 在背景旁边，单击快速样式按钮。
快速样式菜单中没有白色选项。
- 单击自定义。
更多样式选项出现在背景部分。
- 单击填充颜色按钮。 在标准颜色下，单击白色框。
现在书签微件的背景与图例微件一致。
接下来，您将测试书签微件。
- 打开实时视图。
- 滚动书签微件，然后单击其中一个书签。
地图即会缩放到书签的位置。
- 单击切换地图按钮，查看另一张地图并放大到另一个书签。
两张 web 地图都配置了相同的书签集，这样微件就能以相同的方式在两张地图上运行。 如果只有其中一张地图有书签，那么在选择另一张地图时，微件就会显示为空。
注：
您可以在文档中了解如何在 web 地图中配置书签。
添加卷帘微件
目前，用户可以在两个地图之间切换。 然而，您希望用户能够同时查看两张地图，以便更好地了解每种土地覆盖类型在地面上的样子。 为此，您将添加一个卷帘微件。
- 关闭实时视图。
- 在侧面工具栏上，单击插入按钮。 在插入微件窗格中，搜索卷帘。
注：
如果您使用的是 ArcGIS Enterprise，则可能无法使用卷帘微件。 您可以跳到下一节。
- 将卷帘微件拖到画布上，并将其放置在图例上方的列中。
- 在卷帘窗格中，单击内容选项卡。 在选择模板中，确保选择水平（简单）。
- 单击开始。
- 对于选择地图微件，选择地图。
在画布上，卷帘微件弹出一个切换按钮和两个可扩展部分。
您希望用户能够在两张地图之间而不是在地图图层之间进行卷帘操作。
- 在卷帘窗格中，选择卷帘模式，选择在 web 地图或 web 场景之间进行卷帘操作。
- 在常规设置下，为滑块初始位置键入 50。
这将把滚动条置于微件的中间位置。 现在您可以测试卷帘微件了。
- 打开实时视图。 在卷帘微件上，单击卷帘切换按钮。
- 在地图上缩放和平移，移动卷帘条来测试该要素。
两张地图同步移动，让您可以同时探索两张地图。 图例更新后会显示最后点击的地图。
- 在该列中，向下滚动并单击其中一个书签。
两张地图都会放大到书签位置。 卷帘功能可以让用户更加容易地看到植被类型在地形中逐渐变化的情况，而不是仅凭 Cover type 地图建议的硬性界限。
调整微件高度设置
接下来，您将调整列中每个微件的高度。 有三种方法可以确定微件的大小：自动、拉伸和自定义。 每个微件使用不同的方法。
- 关闭实时视图。 单击选择卷帘微件。
注：
如果没有卷帘微件，请跳至步骤 4。
卷帘微件占用的空间超出了所需。 它所显示的信息也超出了必要的范围。 布局设计的一个重要部分是决定需要包含哪些内容，不需要包含哪些内容。 剔除不需要包含的内容，使布局更清晰，更容易让受众理解。 您将缩短卷帘微件的高度，这样只能看见切换按钮，而隐藏地图名称。
- 在卷帘窗格中，单击样式选项卡。 在高度旁边，单击箭头按钮。
高度有三种选项：
- 自动确保微件的高度足以容纳其内容，但不超出容纳内容所需的高度。
- 拉伸会调整微件的高度，使其填满容器内的可用空间。
- 自定义允许您以像素或容器高度百分比为单位自定义高度。
您想通过缩短卷帘微件隐藏它的一部分。 唯一允许微件高度短于其内容的高度选项是自定义。 该选项已处于选中状态。
您可以通过键入数字或拖动微件来调整自定义高度。
- 在画布上，单击并向上拖动微件底部的手柄以缩短微件的高度。 拖动至隐藏地图名称，只有卷帘字样和切换按钮可见。
在卷帘窗格中，高度参数更新为约 50 像素。 接下来，您将设置图例微件的高度。
- 单击图例微件
由于其中一个图例比另一个高，因此当用户在两个地图之间切换时，需要改变该微件的高度。
- 在图例窗格的样式选项卡上，对于高度，选择自动。
注：
如果高度已设置为自动，请确保保持横纵比按钮已解锁。
图例窗格缩短，其高度刚好能显示整个图例。
- 单击书签微件。 在书签窗格的高度中，选择拉伸。
书签微件会拉伸以填充列的剩余高度。
- 打开实时视图。
- 单击或在两张地图之间切换，观察列中微件是如何变化的。
卷帘微件采用自定义高度方法，因此不会发生变化：始终保持相同的高度。 图例微件采用自动方法，因此其高度的变化取决于活动图例的高度。 书签微件采用拉伸方法，因此它会根据列中可用空间的大小改变高度。
查看大纲
在 ArcGIS Experience Builder 中设计布局时，请经常查看大纲部分，以了解微件是如何排列和嵌套的。 由于刚刚添加了五个微件，现在是您查看大纲的好时机，以确保体验结构符合预期。
- 在页面窗格的大纲部分，确保正文、行和列都已展开。
提示：
如果页面窗格没有打开，请在侧边工具栏上单击页面按钮。
大纲部分列出了页面中的全部微件，并解释了它们之间如何相互嵌套。 该页面由一个行微件组成。 行内有一个列微件和一个地图微件。 列内有三个微件：卷帘、图例和书签。
您还可以使用大纲部分选择微件并修改其属性。
- 在大纲部分中，单击行。
行窗格随即显示。
- 在行窗格中，单击内容选项卡。
- 对于间隙和填充，键入 0。
在画布上，列和地图之间的灰色间隙消失了。 除页眉外，所有内容周围的灰色边距也是如此。
额外的衬垫和间隙对布局来说并无必要。 去掉它们消除了多余的视觉杂乱感，从而简化了设计。 如果看不到行微件剩余的空白部分，就无法再在画布上选择该行，但仍可在大纲部分进行选择。
- 在构建器工具栏上，关闭实时视图，然后单击保存按钮。
在本教程中，您在 ArcGIS Experience Builder 中的 web 应用程序中添加了五个微件。 您已经了解了布局微件、调整大小的方法和大纲部分。 请参阅本系列的下一个教程：向 web 应用程序添加窗口，学习如何添加窗口和按钮，以及如何将它们连接在一起。
