使用 HTML 创建主页通栏
![订阅 订阅](rsrc/subscription.png)
为了创建主页通栏,您需要一个属于 ArcGIS Online 组织的帐户。有关详细信息,请参阅入门。
组织管理员可以自定义网站以展示组织的重要地理信息。其中包括使用 HTML 创建主页通栏的选项。有关网站其他配置选项的信息,请参阅关于配置网站。
关于通栏
主页在页面顶部含有一个宽 960 像素、高 180 像素的通栏。您可以为通栏区域选择图像,选择预定义的图像或从桌面上传文件,也可以使用 HTML 来创建通栏的内容。有关详细信息,请参阅配置网站的常规设置。
徽标将显示在通栏图像中。如果使用 HTML 设置主页通栏,则不会显示徽标(除非将其包括在 HTML 中)。
![提示 提示](rsrc/tip.png)
如果仅将贵组织设置为 SSL,为了在通栏上显示图像,需要通过 HTTPS 访问 HTML 中的所有图像参考。有关详细信息,请参阅配置安全性设置。
受支持的 HTML
下表列出了可用于创建自定义通栏的 HTML 标记。
标记 | 属性 |
---|---|
a | href、target、style |
img | src、width、height、border、alt、style |
span | style |
表 | width、height、cellpadding、cellspacing、border、style |
div | style |
字体 | size、color、style |
tr | height、valign、align、style |
td、th | height、width、valign、align、colspan、rowspan、nowrap、style |
b、strong、i、em、br、p、li、ul、tbody |
HTML 的使用提示
- 未在上表中列出的 HTML 标记不受支持,并将被过滤掉。
- href 和 src 允许的协议为 http 和 mailto。
- 未闭合的标记会自动闭合。
- 如果未使用 < > & " 进行转义,则 <>& 将在合法标记外部进行转义。
示例
以下为使用 HTML 创建通栏的示例。每个示例均包含了创建通栏时使用的代码。
![]() |
含有使用 HTML 创建的通栏的主页的示例 |
下列代码包含了用于创建“通用环境组织”通栏的 HTML 和 CSS:
<div style="width: 960px; font-family: futura, helvetica, arial;
background: url(http://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>
![]() |
含有使用 HTML 创建的通栏的主页的示例 |
下列代码包含用于创建“政府首页”通栏的 HTML 和 CSS:
<div style="width: 960px; font-family: futura;
background: url(http://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="http://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
color: white; font-size: 14px; vertical-align: middle;
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>
4/12/2013