Unterstütztes HTML zum Konfigurieren der Website

Wenn in Elementen des ArcGIS Enterprise-Portals, z. B. in den Elementseiten, Gruppenbeschreibungen, Karten-Pop-ups und konfigurierbaren Apps, ein Rich-Text-Editor enthalten ist, können Sie HTML-Code verwenden.

HTML-Tags und -Attribute

Die nachfolgende Tabelle führt die unterstützten HTML-Tags und -Attribute auf, die Sie verwenden können.

Tag	Attribut
a	href, style
abbr	title
article	style
aside	style
audio	autoplay, controls, loop, muted, preload
b, strong, i, em, u, ul, ol, li, tbody, br, hr
blockquote	style
code	style
dd, dl, dt	style
del	style
details	style, open
div	style, align, aria-label, aria-hidden
figcaption	style
figure	style
font	size, color, style
footer	style
h1, h2, h3, h4, h5, h6	style
header	style
img	src, width, height, border, alt, style
main	style
mark	style
nav	style
p	style
pre	style
section	style
source	media, src, type
span	style, aria-label, aria-hidden
sub	style
summary	style
sup	style
table	width, height, cellpadding, cellspacing, border, style
td, th	height, width, valign, align, colspan, rowspan, nowrap, style
time	style
tr	height, valign, align, style
video	autoplay, controls, height, loop, muted, poster, preload, width

Überlegungen zu HTML

Bedenken Sie Folgendes:

• HTML-Tags, die oben nicht aufgeführt sind, werden nicht unterstützt, sondern herausgefiltert.
• Zulässige Protokolle für href und src sind https, http, tel und mailto.
• Nicht geschlossene Tags werden automatisch geschlossen.
• <>&"s-Zeichen werden außerhalb zulässiger Tags mit Escape-Zeichen versehen, wenn sie nicht mithilfe von &lt;&gt;&amp;&quot mit Escape-Zeichen versehen wurden.
• UNC-Links werden nicht unterstützt.
• Wenn ein a-Tag verwendet wird, wird die href-Ziel-URL grundsätzlich in einer neuen Browser-Registerkarte geöffnet.

CSS-Eigenschaften

Nachfolgend finden Sie Tabellen mit den unterstützten CSS-Eigenschaften.

Hinweis:

ArcGIS Enterprise unterstützt nur Inline-CSS. CSS müssen innerhalb des Style-Attributs definiert werden.

Hintergrundeigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Hintergrundeigenschaften.

Eigenschaften
background	background-color	background-position
background-attachment	background-image	background-repeat
background-clip	background-origin	background-size

Rahmeneigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Rahmeneigenschaften.

Eigenschaften
border	border-image-repeat	border-right-style
border-bottom	border-image-slice	border-right-width
border-bottom-color	border-image-source	border-spacing
border-bottom-left-radius	border-image-width	border-style
border-bottom-right-radius	border-left	border-top
border-bottom-style	border-left-color	border-top-color
border-bottom-width	border-left-style	border-top-left-radius
border-collapse	border-left-width	border-top-right-radius
border-color	border-radius	border-top-style
border-image	border-right	border-top-width
border-image-outset	border-right-color	border-width

Boxeigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Boxeigenschaften.

Eigenschaften
box-decoration-break	box-sizing	box-suppress
box-shadow	box-snap

Eigenschaften von Pausenzeiten

Nachfolgend finden Sie eine Tabelle mit den unterstützten Umbrucheigenschaften.

Eigenschaften
break-after	break-before	break-inside

Anzeigeeigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Anzeigeeigenschaften.

Eigenschaften
display	display-inside	display-list	display-outside

Flex-Eigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Flex-Eigenschaften.

Eigenschaften
flex	flex-direction	flex-grow	flex-wrap
flex-basis	flex-flow	flex-shrink

Schriftarteigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Schriftarteigenschaften.

Eigenschaften
font	font-size-adjust	font-variant-caps
font-family	font-stretch	font-variant-east-asian
font-feature-settings	font-style	font-variant-ligatures
font-kerning	font-synthesis	font-variant-numeric
font-language-override	font-variant	font-variant-position
font-size	font-variant-alternates	font-weight

Rastereigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Rastereigenschaften.

Eigenschaften
grid	grid-column	grid-row-start
grid-area	grid-column-end	grid-template
grid-auto-columns	grid-column-start	grid-template-areas
grid-auto-flow	grid-row	grid-template-columns
grid-auto-rows	grid-row-end	grid-template-rows

Ausrichtungseigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Ausrichtungseigenschaften.

Eigenschaften
justify-content	justify-items	justify-self

Listeneigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Listeneigenschaften.

Eigenschaften
list-style	list-style-image	list-style-position	list-style-type

Randeigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Randeigenschaften.

Eigenschaften
margin	margin-left	margin-top
margin-bottom	margin-right

Innenabstandeigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Innenabstandeigenschaften.

Eigenschaften
padding	padding-left	padding-top
padding-bottom	padding-right

Texteigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Texteigenschaften.

Eigenschaften
text-align	text-emphasis-style
text-align-last	text-height
text-combine-upright	text-indent
text-decoration	text-justify
text-decoration-color	text-orientation
text-decoration-line	text-overflow
text-decoration-skip	text-shadow
text-decoration-style	text-space-collapse
text-emphasis	text-transform
text-emphasis-color	text-underline-position
text-emphasis-position	text-wrap

Worteigenschaften

Nachfolgend finden Sie eine Tabelle mit den unterstützten Worteigenschaften.

Eigenschaften
word-break	word-spacing	word-wrap

Weitere Eigenschaften

Nachfolgend finden Sie eine Tabelle mit anderen unterstützten CSS-Eigenschaften.

Eigenschaften
align-items	gap	max-width
align-self	height	min-height
clear	letter-spacing	min-width
color	lighting-color	overflow
color-interpolation-filters	line-height	width
float	max-height

Legacy-Banner

ArcGIS Enterprise-Organisationen, für die ein Upgrade von einer früheren Version auf Version 10.9 durchgeführt wurde, weisen standardmäßig eine Legacy-Startseitenkonfiguration auf.

Hinweis:

Die Unterstützung für die Legacy-Startseiteneinstellungen wird in zukünftigen Upgrades eingestellt. Daher wird empfohlen, vorhandene Organisationen baldmöglichst auf die neue Startseitenumgebung umzustellen.

Die Legacy-Startseite enthält oben auf der Seite ein Banner mit 960 Pixel Breite und 180 Pixel Höhe. Sie können ein Bild für den Bannerbereich auswählen, indem Sie ein vordefiniertes Bild verwenden oder eine Datei vom Desktop hochladen. Alternativ können Sie mit Rich Text oder HTML ein benutzerdefiniertes Design erstellen. Konfigurieren Sie das Banner als Teil der Einstellungen für die Legacy-Startseite.

Wenn Sie die Option Benutzerdefiniertes Design auswählen, wird ein Rich-Text-Editor angezeigt, in dem Sie Grafiken und Text im Format "What You See Is What You Get" (WYSIWYG) positionieren können. Löschen Sie den vorhandenen Bannerinhalt, und ersetzen Sie ihn durch einen eigenen. Für zusätzliche Flexibilität klicken Sie im Editor auf die Schaltfläche HTML-Quelle, wodurch Sie eigenen HTML-Code eingeben bzw. hineinkopieren können.

Wenn Sie nur ein Bild für das Banner auswählen, wird das Logo im Bannerbild angezeigt. Wenn Sie das benutzerdefinierte Design des Startseiten-Banners verwenden, wird das Logo nicht angezeigt (es sei denn, Sie schließen es in das Design ein).

Tipp:

Wenn für Ihre Organisation "Nur HTTPS" festgelegt ist, müssen Sie auf alle Bildreferenzen in Ihrem Design über HTTPS zugreifen, damit das Bild oder die Bilder in Ihrem Banner angezeigt werden.

Beispiele

Beispiele für Banner, die mit HTML erstellt wurden, finden Sie unten. Für jedes Beispiel ist der Code angegeben, der zur Erstellung des Banners verwendet wurde. Sie können Bild-URLs durch eigene ersetzen.

Das Beispiel dieser Startseite, die ein mit HTML erstelltes Banner enthält

Der unten stehende Code enthält die zur Erstellung des Banners für die "Generic Environment Organization" verwendeten HTML- und CSS-Elemente.

<div style="width: 960px; font-family: futura, helvetica, arial; 
background: url(https://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>

Dies ist ein Beispiel für eine Startseite, die ein mit HTML erstelltes Banner enthält.

Der unten stehende Code enthält die zur Erstellung des Banners für "Government Home" verwendeten HTML- und CSS-Elemente.

<div style="width: 960px; font-family: futura;
 background: url(https://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="https://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>

Dies ist ein Beispiel für eine Startseite, die ein mit HTML erstelltes Banner enthält.

Sie können ein Banner verwenden, das größer ist als der empfohlene Bannerbereich von 960 Pixel Breite auf 180 Pixel Höhe. Beachten Sie dabei jedoch, dass das Bild bestimmte Bereiche der Startseite, z. B. den Namen der dargestellten Inhalte, verdecken kann. Um den Text besser sichtbar zu machen, wählen Sie für den unteren Bereich des Banners eine Komplementärfarbe aus, die Standardblau entspricht. Sie können die Farben am unteren Rand auch ineinander übergehen lassen.

<div id="banner-html" style="left: 0px; top: 0px; position: absolute;"><div>
<img src="https://downloads.esri.com/Blogs/learn-arcgis/ago-banner/cartography-banner.png?" 
style="-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; 
border-radius:0 0 10px 10px; margin-top:0; width:960px; height:470px;"></div></div>