将 Web 地图转换为 Web 应用程序
您的团队一致认为以地图为中心的 Web 应用程序是故事的最佳传播媒介。 您将找到并修改 Web 地图，根据地图创建新的 Web 应用程序并配置其基本布局结构。
查找包含住房数据的地图
您将修改现有地图，而不是从空白 Web 地图开始。 ArcGIS Living Atlas of the World 是地理数据和地图的精选集合。 其中包括 Esri Maps for Public Policy 这一致力于提高公共政策空间和数据知识水平的站点。 您将在该站点上搜索与住房政策相关的数据和地图。
- 转至 Esri Maps for Public Policy 站点。
在此，您可以搜索与各种公共政策主题相关的数据资源。 在本教程中，您将搜索与住房相关的 Web 地图。
- 单击问题选项卡。
- 单击经济机会选项卡。 在搜索栏中，输入 vacant housing，然后按 Enter 键。
- 在搜索结果中，单击名为 Owned, Rented, or Vacant Housing Units（作者为 lisa_ berry）的 Web 地图标题。
地图的项目页面随即显示，您可以在其中阅读有关地图及所含数据的信息。 此地图显示自住房、租赁住房或空置住房更为普遍的位置。 地图中的数据来自美国人口普查局进行的美国社区调查 (ACS)。 此地图对您的应用程序而言是很好的起点。
注：
ACS 五年估计值通常用于公共政策决策，涵盖诸如贫困、收入、住房等各种各样的主题。 要了解有关 ArcGIS Living Atlas 中提供的 ACS 图层的详细信息，请参阅使用 Living Atlas 中的人口普查 ACS 图层了解您的社区路径。
您要在面向公众的 Web 应用程序中使用此地图，因此在继续操作之前，将检查针对内容的使用是否存在特殊限制。
- 滚动到项目页面的底部并找到使用条款部分。
- 向上滚动并找到制作者名单（属性）部分。
这是您正确标明数据提供者所需的信息。 稍后，您将使用此信息。
配置 Web 地图
目前，您已找到关于住房占用情况的 Web 地图，可以将其用作 Web 应用程序的主要内容，并且已验证您有权将其用于特定工程。 接下来，您将保存 Web 地图的副本并重新配置其图层，以使其更适用于 Web 应用程序。
- 滚动到项目页面的顶部，然后单击登录。 登录到 ArcGIS 组织账户。
注：
如果您没有组织账户，请参阅软件访问权限选项。
- 在项目页面顶部，单击在 Map Viewer 中打开按钮。
注：
如果未看到在 Map Viewer 中打开按钮，请单击在 Map Viewer Classic 中打开旁边的箭头，然后选择在 Map Viewer 中打开。
随即显示该地图。
- 在内容（深色）工具栏上，单击图层按钮。
提示：
如果未看到内容工具栏，请单击页面顶部的在新 Map Viewer 中打开。
随即显示图层窗格。 其中列出三个图层，包含州、县和人口普查区域级别的住房数据。 每个图层都配置为以不同的比例显示，因此当前只有 Tract 图层可见。
您的倡导群组专注于地方级别的住房问题，因此您仅对人口普查区域级别的数据感兴趣。 您将保存一份仅包含 Tract 图层的 Web 地图副本。
- 在图层窗格中的 State 图层中，单击选项按钮。 单击移除。
- 同时移除 County 图层。
仅保留与 Web 应用程序相关的数据。 接下来，您将确保图层在所有比例下均可见。
- 单击 Tract 图层。
属性窗格将显示在地图的另一侧。
提示：
如果属性窗格不可见，在设置（浅色）工具栏上，单击属性按钮。
- 在属性窗格中向下滚动。 调整可见范围滑块，直到其范围为从世界到房间。
- 在内容工具栏上，单击保存并打开按钮，然后单击另存为。
- 在保存窗口中，对于标题，输入 Housing map。 在摘要框中，将现有文本替换为以下内容：
此地图显示自住房、租赁住房或空置住房在某个区域是否更为普遍。 此国家数据来自最新的美国社区调查 (ACS) 估计人口普查区域。 此为以下位置 Web 地图的副本：https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23
- 单击保存。
创建 Web 应用程序
现在，您已根据需要配置了一个 Web 地图。 您将使用 ArcGIS Experience Builder 根据此地图创建 Web 应用程序。 您将使用地图和列设计应用程序的布局。
- 在内容工具栏上，单击创建应用程序按钮。
随即显示选项列表。 您可使用多种 ArcGIS 产品通过 Web 地图创建 Web 应用程序。 每个产品都提供不同的工具，适用于不同的情况。 对于此工程，您希望对应用程序的外观进行大量控制，使其与 Web 地图和组织的样式相匹配。 您将选择 ArcGIS Experience Builder，因为它提供的自定义控件最多。
- 单击 Experience Builder。
随即显示模板库。 对于未来的工程，这些模板可以通过预先配置布局来节省您的时间，但在本教程中，您将从空白画布开始，以便更直接地学习如何构建布局。
- 在空白全屏卡片上，单击创建。
- 如果出现启动窗口，请单击跳过。
随即出现 ArcGIS Experience Builder，在画布中心显示地图。 您将使用更有意义的标题重命名体验。
- 在顶部功能区上，单击无标题体验并输入 Housing Availability。
接下来，您将确保可以看到整个画布。
- 在屏幕的右下角，单击调整宽度适应当前窗口按钮。
- 如果插入微件窗格尚不可见，请在侧工具栏上单击插入按钮。
- 滚动到插入微件窗格的底部并找到布局部分。
布局微件可帮助您排列应用程序中的微件组。当微件位于布局微件中时，通常更易于整齐地调整其大小和位置。
- 将列微件拖动到画布上。
- 在列微件的工具栏上，单击位置按钮，然后单击完整高度。
- 再次单击位置按钮，然后单击捕捉到左侧。
现在，列已就位，您将调整地图的大小。 工程的目标之一是地图应为应用程序的主要焦点，因此您将使地图填充整个画布。
- 单击地图微件将其选中。 在地图的工具栏上，单击位置按钮，然后单击全尺寸。
地图将展开并填满整个画布，其中一部分隐藏在列后面。 接下来，您将在地图的属性设置中定义地图的默认范围。
- 在地图窗格中的初始视图下，单击自定义，然后单击修改。
随即显示修改初始视图窗口。
- 放大到您感兴趣的社区或美国其他地区，例如纽约市的曼哈顿岛。
- 单击确定。
您将对地图微件进行更多配置。
- 在地图窗格中的工具下，关闭搜索。
稍后，您将添加一个可以进行更多控制的搜索微件。
- 在地图窗格底部附近工具布局下的大中型下方，选择第二个选项。
地图导航控件移动至地图的右下角。 之前，它们隐藏在列后面。
最后，您将禁用弹出窗口。 在本教程的后续部分，您将添加微件以显示每个区域中每种类型的住房单元数量的信息。 此信息使得弹出窗口不再必要。
- 在地图窗格底部的选项下，打开启用弹出窗口。
- 在构建器工具栏上，单击保存按钮。
- 关闭 Map Viewer 浏览器选项卡和 Esri Maps for Public Policy 浏览器选项卡。
到本教程的当前部分为止，您已经找到了一个 Web 地图，根据需要进行了修改，并在 ArcGIS Experience Builder 中将其转换为 Web 地图。
添加并配置微件
现在，您已配置地图，可以添加一些微件以帮助用户理解和浏览数据。 您将添加图表、文本、搜索和菜单微件。
添加图表微件
您将向空列添加一个饼图。 您需将图表连接到地图中的数据，使其显示所选人口普查区域的住房组成。
- 如有必要，在 ArcGIS Experience Builder 中重新打开 Housing Availability 应用程序。
- 在插入微件窗格中，单击搜索按钮，然后输入 chart。
- 在搜索结果中，将图表微件拖动到列上。
空白图表微件随即显示在列中。 列的其余部分显示为透明，因为列在默认情况下无背景颜色。
接下来，您将配置图表，使其显示地图中的住房信息。
- 在图表窗格中，单击选择数据。
- 在选择数据窗格中，展开 Housing map，然后单击 Tract。
- 在图表窗格中的 Tract 下，单击默认，然后选择所选要素。
- 在图表类型下，单击选择图表，然后在图表类型窗格中，选择饼图。
饼图适用于此数据，因为数据分为三类（自住、租赁和空置），这三个类别相加到一起占住房单元的 100%。
- 在图表窗格中的数据下，设置以下参数：
- 对于类别类型，选择按字段。
- 对于统计数据，选择总和。
- 对于数值字段，选中 Vacant Housing Units、Owner-Occupied Housing Units 和 Renter-Occupied Housing Units。
- 对于排序方式，选择类别轴。
图表显示找不到数据警告。 出现此警告是因为您选择在图表上显示已选择的要素，而当前没有已选要素。
- 在构建器工具栏上，单击实时视图。
在实时视图模式下，您可以像用户一样与 Web 应用程序交互。 您无法选择微件并进行移动。
- 在地图上，单击任意人口普查区域。
现在已选择一个人口普查区域，饼图变为蓝色并且警告消失。 您将退出实时视图模式，以继续配置图表微件。
- 关闭实时视图。 单击图表微件。
图表窗格再次显示。
- 在图表窗格中的常规旁边，单击箭头以展开此部分。
- 打开图例。 对于图例位置，选择底部。 对于最大宽度，输入 300。
接下来，您要将颜色添加到图表，以使其与地图上的颜色相匹配。
- 展开切片部分。 在切片颜色窗格中，单击 B25002_003E。 在颜色模式下，选择按类别，然后单击设置按钮。
- 清除现有文本并键入 Vacant housing units。
- 将 B25003_002E 重命名为 Owner-Occupied housing units，将 B25003_003E 重命名为 Renter-Occupied housing units。
标注在图表图例上更新。
- 在切片颜色窗格中，单击 空置住房单元旁边的颜色，然后单击更多。
- 对于十六进制，输入 #aa7b7b，然后按 Enter 键。
颜色更新为柔和的红色。
- 将房主自用住宅单元的颜色更改为 #d3c268（黄色）。 将 租赁住宅单元的颜色更改为 #6b99b5（蓝色）。
图表及其图例现在与地图的颜色相匹配。 如果所选人口普查区域为黄色，则饼图中最大的切片也为黄色。
将图表颜色配置为与地图颜色匹配可以使图表易于阅读，并且可使图表兼做地图的图例。
- 打开实时视图，然后单击不同的区域以观察图表中的变化。
注：
一些人口普查区域仅显示一个或两个切片，因为它们仅具有一个或两个住房类型。
配置空选择视图
在某些情况下，图表微件仍会显示未找到数据警告。 您将选择一个人口普查区域作为默认要素。 Web 应用程序第一次打开时，图表将显示默认要素的数据。
- 在地图上，单击没有人口普查区域的区域，例如中央公园或任意水域。
图表返回到未找到数据视图。 首次打开 Web 应用程序时，图表也会这样显示。 通过配置空选择视图，您可以修复此问题。
- 在侧工具栏上，单击数据按钮。 在数据窗格中，单击 Housing map 卡片。
- 在正在使用中下，单击 Tract 卡片。
- 在窗格底部，选中空选择视图复选框。
图表微件使用红色、蓝色和黄色切片填充。 此设置可确保在未选择要素时图表不会显示空白。
- 在复选框旁边，单击设置按钮。
随即显示空选择视图窗口。 在此处，您将选择在地图上未选择任何人口普查区域时将显示哪个人口普查区域。 在以下步骤中，您将选择纽约州纽约县的人口普查区域 94。 如果您选择将地图以另一个城市为中心，请改为从该地区选择一个人口普查区域。
- 在过滤器选项卡上，单击添加，然后单击子句。
随即显示一个空白子句。
- 再单击两次添加和子句。
现在有三个子句。 您将使用第一个子句以按州缩小数据范围。
- 对于第一个子句，单击 OBJECTID，然后选择 State。 对于第二个菜单，选择 is。
- 在第三个菜单旁，单击选择源类型按钮，然后选择唯一。
现在，您可以从 State 字段中的所有唯一值的列表中进行选择。
- 单击第三个菜单。 在搜索栏中，输入 new，然后选择New York，或选择您感兴趣的州。
- 配置第二个子句，使其内容为 County is New York County，或是您感兴趣的县。 如果县未显示在第三个菜单中，单击搜索更多以显示更多搜索结果。
提示：
请记得将源类型更改为唯一。
- 将第三个子句配置为 NAME is Census Tract 94，或感兴趣区中的其他人口普查区域。
- 确保子句上方的控件已设置为 And。
选择 And 时，要素必须满足全部三个子句。 该表显示了由三个子句选择的一个要素的一行。 当地图中未选择任何内容时，饼图将显示此人口普查区域的结果。
- 单击应用更改。
修改图表外观
您将通过调整一些外观属性来完成图表微件。 首先，您将移除微件顶部的按钮。 这些按钮提供应用程序中不需要的功能。您需将其移除，以免其分散用户对地图信息的注意力。
- 关闭实时视图并选择图表微件。
- 在图表窗格中，展开工具部分。 关闭选择。
其中两个按钮从图表微件中消失。
- 单击操作选项卡，然后单击数据操作选项卡。 关闭启用数据操作。
第三个按钮将从图表消失。 接下来，您将更改图表微件的背景颜色。
- 单击内容选项卡，然后展开外观部分。 单击背景颜色，然后单击更多。
- 对于十六进制，输入 #000000。 对于 A，输入 75。
A 表示 Alpha，控制颜色的不透明度。 现在，地图在图表微件后部分可见。 但是，文本几乎不可见。 您要将其更改为白色。
- 在文本元素旁边，单击设置按钮。
- 在文本元素窗格中的图例标注旁边，单击编辑按钮。
- 单击黑色方形。 在标准颜色下，选择白色。
- 在图表窗格中，展开切片部分。 将轮廓颜色更改为黑色。
完成的图表微件在深色背景上具有白色文本。
添加文本微件
接下来，您将添加一些文本来为地图提供上下文，包括标题和数据来源告知。 您将格式化文本的不同部分以使其更具可读性，并添加一些链接，使应用程序用户可以在其中找到有关地图上显示的数据的更多信息。
- 在侧面工具栏上，单击插入按钮。 在插入微件窗格中，清除搜索。 找到文本微件并将其拖动到图表下方的列上。
文本微件会将自身自动定位在图表微件下方，中间有一个小间隙。
- 双击文本微件，复制并粘贴以下文本：
自用、租赁还是空置？
单击一个人口普查区域以查看该区域上的住房信息。
州、县和区域内的住房。 租金中值为 $Rent。 房屋价值中值为 $Value。
地图由 Esri 的 Lisa Berry 制作。 数据来自美国人口普查局的美国社区调查 (ACS) 2015-2019 年 5 年评估，表 B25002。
在文本行之间加入间距。 稍后，当您添加动态元素时，第三行文本会更有意义。
提示：
使用 Ctrl+Shift+V 或 Command+Shift+V 可以在粘贴文本时不含任何格式。
接下来，您将更改文本微件的高度。
- 在文本窗格中，单击样式选项卡。 在高度旁边，单击箭头按钮，然后选择自动。
此设置将确保文本微件有足够高度显示其所有内容，并且永远不会过高。
接下来，您将选择与图表微件相同的文本和背景颜色。
- 在文本窗格中的背景下，单击自定义，然后单击填充颜色。 在最近的颜色下，选择您为饼图背景创建的半透明黑色。
- 单击内容选项卡。 在文本格式下，单击字体颜色按钮。 在标准颜色下，选择白色。
- 在文本格式下，单击中心按钮。
图表的文本现在是白色且居中对齐。 接下来，您将设置第一行文本（应用程序的标题）的格式，使其字体增大、加粗。
- 高亮显示第一行文本。 在文本工具栏上，单击粗体按钮，然后将大小更改为 25 px。
提示：
如果文本工具栏不可见，则可以在内容选项卡文本窗格中更改字体属性。
接下来，您将添加一个指向美国人口普查局资源的链接，供可能不了解人口普查区域的读者使用。
- 在文本的第二行，高亮显示文字人口普查区域。 在文本窗格中的内容选项卡上，在文本格式下单击链接按钮。
- 在设置链接窗格中，对于链接至，选择 URL。 对于 URL，复制并粘贴 https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf。
- 对于打开方式，选择新窗口。 单击确定。
- 将人口普查区域文本设置为粗体。
您还将链接到有关美国社区调查的更多信息。 如果您的数据可视化提供了有关数据采集方式和采集机构的信息，则会更值得信赖。
- 在文本的最后一行，高亮显示美国社区调查 (ACS) 文本并将其链接到以下 URL：https://www.census.gov/programs-surveys/acs/about.html。
- 将美国社区调查 (ACS) 文本设置为粗体。
由于文本微件包含地图标题，因此要将其放置在列的顶部。
- 将图表微件拖动到文本微件下方。
您还将移除列项目之间的间隙。
- 单击列底部的空白部分或文本和图表微件之间的间隙以选择列。
- 在列窗格中，对于间隙，输入 0 px。
文本和图表微件现在显示为一个项目。
添加动态文本
对于第三行文本，您将添加住房信息，这些信息将更新以反映在地图上的选择，就像图表一样。 配置饼图时，您看到了数据中可用的字段。 您将在文本微件中显示其中一些字段。
- 选择文本微件。 在文本窗格中，打开连接到数据。 单击选择数据。
- 在选择数据窗格中，展开 Housing map，然后单击 Tract。
现在，文本微件可以访问地图中的住房数据。
- 在文本微件中，高亮显示 Tract 一词。
您要将此文本替换为动态文本。
- 在文本微件的工具栏中，单击动态内容按钮。
- 在动态内容窗口中，单击 NAME 字段。
在文本微件中，高亮显示的文本已替换为 {NAME}。 在字段和逗号之间还添加了一个额外的空格。
- 移除额外的空格。
- 将以下文字替换为以下字段：
- 将文字县替换为 County 字段。
- 将文字州替换为 State 字段。
- 将文字租金替换为 Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent) 字段。
- 将文字值替换为 Median Home Value (for Owner-Occupied Housing Units) 字段。
提示：
要查看字段的全名，请指向该字段。
- 删除所有多余的空格。
- 将所有动态字段更改为粗体。
- 打开实时视图，然后在地图上单击不同的人口普查区域。
动态文本更新为反映所选区域的住房信息。
添加搜索微件
之前，您从地图微件中移除了搜索栏。 现在，您将使用搜索微件替代它。 此微件提供比内置工具更多的自定义控制功能。 例如，您可以将其放置在任何位置，也可以修改其外观。
- 关闭实时视图。 在插入微件窗格中，单击搜索微件并将其拖到地图上。
- 将搜索微件放置在地图右上角附近。
搜索微件的默认提示文本是查找地址或地点。 您将改写此文本。
- 在搜索窗格中，单击新搜索源，然后选择定位器源。
随即显示设置定位器源。
- 在设置定位器源窗格中，单击选择实用程序。
- 在选择实用程序窗格的组织选项卡中，选择地理编码下的 ArcGIS World Geocoding Service。
- 在设置定位器源窗格中的搜索选项下，对于提示，输入搜索您的区域。
搜索微件中的提示文本发生变化。
接下来，您将使用操作将搜索微件连接到地图微件。
- 在搜索窗格中，单击操作选项卡。 单击添加触发器。
- 在选择触发器窗格中，单击记录选择更改。
- 在微件下，单击地图。 在选择操作下，单击平移至。
- 关闭操作设置窗格。
您将测试搜索以确保操作设置正确。
- 打开实时视图。 在搜索微件中，输入地名。 在搜索结果中，单击其中一个地名。
地图将缩放到所选位置。
- 在地图上的缩放控件附近，单击主页按钮。
- 在构建器工具栏上，关闭实时视图，然后单击保存。
添加页面
您的数据可视化现已完成。 接下来，您将添加您的合作者撰写的相关文章。 可以在文本微件中添加故事的链接，但您更希望故事更加明显，就像是 Web 应用程序的一部分。您将向应用程序添加第二个页面并将故事嵌入其中。
- 在侧面工具栏上，单击页面按钮。
- 在页面窗格中，单击添加页面按钮，然后单击空白全屏选项。
随即显示一个新的空白画布。
- 在页面窗格中，指向页面 2，然后单击更多按钮。 单击重命名。
- 将页面 2 重命名为故事。 将页面重命名为地图。
- 从插入微件窗格中，将嵌入微件添加到画布。
- 在嵌入微件的工具栏上，单击位置按钮，然后单击全尺寸。
在本教程中，您将嵌入由 Esri’s Policy Maps 团队的 Steven Aviles 制作的故事 How the Age of Housing Impacts Affordability。
- 在嵌入窗格中，对于嵌入依据，选择 URL。
- 粘贴以下 URL：https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e。
故事随即显示在画布上。 此故事使用 ArcGIS StoryMaps 创建。
添加菜单微件
接下来，您将添加一个菜单微件。 此微件为用户提供在应用程序的两个页面之间切换的功能。为防止菜单遮挡故事的某些部分，您将先向页面添加页眉。
- 在侧面工具栏上，单击页面按钮。 在页面窗格中，单击故事页面。
- 在故事窗格中，打开页眉。
页面顶部会出现一个蓝色条。
- 对于高度，输入 60 px。
- 指向页眉，然后单击编辑页眉。
- 从插入微件窗格中，将菜单微件添加到页眉。
- 将菜单微件捕捉到右侧。
- 在菜单窗格中的内容选项卡上，对于样式，选择胶囊式。
页眉的蓝色和菜单微件与应用程序的其余部分不匹配。您无需在多个位置更改颜色，而是要更改应用程序的主题。
- 在侧面工具栏上，单击主题按钮。 在主题窗格中，单击墨迹。
页眉变为白色，菜单胶囊变为深灰色。
菜单微件允许用户从故事切换到地图。 您将向地图页面添加相同的菜单微件，使用户也可以切换到故事。
- 打开页面窗格，然后单击地图页面。
您无需向页面添加页眉，因为用户可以在地图上平移以查看被微件隐藏的区域。
- 从插入微件窗格中，将菜单微件添加到页面。
- 在菜单 2 窗格中，对于样式，选择胶囊式。
- 向下移动搜索微件并将其放在菜单微件下方。
- 打开实时视图。 单击菜单按钮以测试在两个页面之间切换。
- 在页面窗格中，确保创建主页按钮在地图页面旁边可见。
此按钮指示将哪个页面用作主页。 主页会在应用程序首次打开时显示。
- 单击保存。
您创建了一个包含两个页面的 Web 应用程序，其中包含一个地图和一个故事。 您配置了地图、列、图表、文本、搜索、嵌入和菜单微件。 您使用操作和动态内容连接了微件以帮助用户浏览住房可用性。
针对移动设备优化应用程序
目前为止，您已经实现了 web 应用程序的四个目标：
- 地图应为应用程序的主要焦点。
- 应用程序应允许用户搜索自己的地址或感兴趣区域。
- 应用程序应包含动态文本和图表，以允许用户浏览数据并与之交互。
- 地图应与新闻报道匹配。
还有一个目标：应用程序应能够在移动设备和桌面计算机屏幕上运行。
目前，您的 Web 应用程序仅在大屏幕上有较好的效果。 要完成工程，您将调整元素，直到在任何尺寸的屏幕效果都很好。
针对移动设备优化故事页面
为了使故事页面在不同的屏幕尺寸下正常运行，您需要将菜单微件的尺寸从相对尺寸（以百分比定义）调整为绝对尺寸（以像素定义）。
- 如有必要，在 ArcGIS Experience Builder 中重新打开 Housing Availability 应用程序。 打开实时视图。
- 如有必要，在应用程序菜单上，单击故事胶囊以查看故事页面。
- 在构建器工具栏上，单击编辑页面以适应小屏幕设备按钮以切换到小屏幕模式。
此视图可模拟您的应用程序在移动设备上的显示方式。
- 滚动浏览故事以确认没有任何文字或地图被截断。
ArcGIS StoryMaps 故事已配置为针对移动设备调整大小。 但是，页面页眉上的菜单微件过短，看不清楚。
您可以为小屏幕创建自定义布局，但在本例中，可以通过更改菜单微件在所有屏幕尺寸上的大小来解决此问题。 适用于所有屏幕尺寸的解决方案优于适用于不同屏幕尺寸的自定义解决方案，因为它们可使应用程序将来更易于编辑和维护。
- 在构建器工具栏上，单击编辑页面以适应大屏幕设备按钮。
需要切换到大屏模式以重新配置微件。
- 关闭实时视图。 单击编辑页眉，然后单击菜单微件。
- 在菜单窗格中，单击样式选项卡。 找到宽度属性。
宽度属性定义为屏幕宽度的百分比，此宽度在窄屏幕上变得过小。 您将改为以像素为单位定义宽度，因此无论屏幕大小如何，都可以确保其大小始终相同。
- 在宽度旁边，单击更改单位按钮并选择 px。
- 将宽度设置为 250.00 px。
- 切换到小屏幕模式。
菜单现在足够大，可以在小屏幕上阅读。
针对移动设备优化地图页面
接下来，您将调整地图页面，使其也适用于所有屏幕尺寸。 您会将一些元素更改为绝对大小。 还将为移动设备配置自定义布局。
- 在页面窗格中，单击地图页面。
此页面上的所有微件均过窄。 大部分文本无法阅读。
- 在构建器工具栏上，单击编辑页面以适应中等屏幕设备按钮以切换到中等屏幕模式。
此视图可模拟您的应用程序在平板电脑上的显示方式。 其显示效果不错，但图表的图例和菜单仍然被切断。 您要将其宽度调整为绝对大小。
- 切换到大屏幕模式。
- 选择菜单微件。 在菜单 2 窗格中的样式选项卡上，将宽度更改为 250.00 px。
- 选择搜索微件。 将其宽度更改为 250.00 px。
- 单击下方图表以选择列微件。 将其宽度设置为 300.00 px。
- 切换到中等屏幕模式。
布局更改在此屏幕尺寸上有效。
- 切换到小屏幕模式。
更改在此处无效。 地图几乎完全隐藏在文本和图表微件之后。 您与其他团队成员讨论后决定该图表对于 Web 应用程序的移动版本而言不是必需内容。当屏幕尺寸较小时，您要将其从视图中隐藏。 为此，您需要为小屏幕创建自定义布局。
- 在画布旁边，单击自定义。
- 在警告弹出窗口中，单击确定。
现在，您可以更改布局，仅当在小屏幕上查看时才会影响应用程序。 您将隐藏图表微件，使其在屏幕较大时显示，在屏幕较小时消失。
- 单击图表微件。 在其工具栏上，单击移至待定列表按钮。
图表微件随即消失。
一定不要删除图表微件。 即使您处于自定义模式，如果您删除微件，则会从应用程序的所有版本中将其删除。 可通过待定列表将微件从视图中移除而不删除微件。
提示：
如果您意外删除了图表微件，单击构建器工具栏上的撤消按钮。 如果您决定稍后再添加回图表，可以在插入微件窗格的待定选项卡上找到它。
接下来，您将更改文本微件的大小和位置，使其不再遮挡搜索和菜单微件。
- 单击文本微件。 将其拖动到列外部并放置在地图上。
- 将列微件移至待定列表。
- 将文本微件捕捉到左下角。
- 在文本窗格中，单击样式选项卡。 将宽度更改为 90.00%，将高度更改为 30.00%。
此大小可防止地图的导航控件遮挡任何文本。
注：
在自定义模式下，您可以更改微件的大小和位置，而不会影响其他屏幕尺寸。 但是，对其他属性的更改将在所有屏幕尺寸上可见。 例如，如果您为文本微件选择较小的字体大小，则它在所有屏幕尺寸上都会显得较小。 如果您仅想在小屏幕上使用较小的字体大小，则必须复制文本微件，将原始微件移动到待定列表，然后更改新微件中的字体大小。
完成并发布
要完成工程，您将预览、发布和共享 Web 应用程序。
- 在构建器工具栏上，单击保存按钮。
- 当出现已成功保存消息时，单击预览按钮。
随即出现一个新的浏览器窗口，其中包含您的应用程序。
- 通过浏览地图、图表和故事来测试应用程序。
- 调整浏览器窗口大小以测试应用程序在不同尺寸的屏幕上的布局。
- 返回到 Experience Builder 编辑选项卡。 在构建器工具栏中，单击发布。
您还将更新应用程序的共享设置，使其可供公众访问。
- 单击更多按钮，然后单击更改共享设置。
随即显示 Web 应用程序的项目页面。
- 单击共享。
- 单击所有人（公开），然后单击保存。
在本教程中，您构建了一个多页 Web 应用程序，其主要内容是美国住房占用情况的地图和故事。 您添加了交互式微件以增强读者对数据的理解。 最后，您更改了布局以确保适用于所有尺寸的屏幕。
现在，您和其他团队成员可以将您的工作成果嵌入住房倡导组织的网站，或在社交媒体上分享 Web 应用程序的链接。
您可以在 Learn ArcGIS 教程库中找到更多教程。
