Obsługiwany język HTML do konfigurowania witryny internetowej

W portalu ArcGIS Enterprise można używać języka HTML, jeśli edytor tekstu formatowanego jest dostępny na stronach elementów, w opisach grup, oknach podręcznych map i aplikacjach konfigurowalnych.

Atrybuty i znaczniki HTML

Poniżej znajduje się tabela z obsługiwanymi atrybutami i znacznikami HTML.

Znacznik	Atrybut
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

Uwagi dotyczące języka HTML

Pamiętaj o następujących kwestiach:

• Znaczniki HTML, które nie zostały wymienione w powyższej tabeli, nie są obsługiwane i zostaną odfiltrowane.
• Dozwolone protokoły dla href i src to https, http, tel i mailto.
• Znaczniki są automatycznie zamykane, jeśli nie zostaną zamknięte.
• Znaki <>&"s służą do zmiany znaczenia poza poprawnymi znacznikami, o ile ich znaczenie nie zostanie zmienione za pomocą &lt;&gt;&amp;&quot.
• Łącza UNC nie są obsługiwane.
• Gdy używany jest znacznik a, docelowy adres URL w znaczniku href jest otwierany zawsze w nowej karcie przeglądarki.

Właściwości CSS

Poniższe tabele zawierają obsługiwane właściwości CSS.

Notatka:

Usługa ArcGIS Enterprise obsługuje tylko CSS w trybie inline. Definicja CSS musi być zdefiniowana w atrybucie style.

Właściwości tła

Poniżej znajduje się tabela obsługiwanych właściwości tła.

Właściwości
background	background-color	background-position
background-attachment	background-image	background-repeat
background-clip	background-origin	background-size

Właściwości ramki

Poniżej znajduje się tabela obsługiwanych właściwości ramek.

Właściwości
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

Właściwości pól

Poniżej znajduje się tabela obsługiwanych właściwości pól.

Właściwości
box-decoration-break	box-sizing	box-suppress
box-shadow	box-snap

Właściwości przerw

Poniżej znajduje się tabela obsługiwanych właściwości przerw.

Właściwości
break-after	break-before	break-inside

Właściwości wyświetlania

Poniżej znajduje się tabela obsługiwanych właściwości wyświetlania.

Właściwości
display	display-inside	display-list	display-outside

Właściwości elastyczności

Poniżej znajduje się tabela obsługiwanych właściwości elastyczności.

Właściwości
flex	flex-direction	flex-grow	flex-wrap
flex-basis	flex-flow	flex-shrink

Właściwości czcionki

Poniżej znajduje się tabela obsługiwanych właściwości czcionki.

Właściwości
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

Właściwości siatki

Poniżej znajduje się tabela obsługiwanych właściwości siatki.

Właściwości
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

Właściwości wyrównania

Poniżej znajduje się tabela obsługiwanych właściwości wyrównania.

Właściwości
justify-content	justify-items	justify-self

Właściwości listy

Poniżej znajduje się tabela obsługiwanych właściwości listy.

Właściwości
list-style	list-style-image	list-style-position	list-style-type

Właściwości marginesów

Poniżej znajduje się tabela obsługiwanych właściwości marginesów.

Właściwości
margin	margin-left	margin-top
margin-bottom	margin-right

Właściwości dopełniania

Poniżej znajduje się tabela obsługiwanych właściwości dopełniania.

Właściwości
padding	padding-left	padding-top
padding-bottom	padding-right

Właściwości tekstu

Poniżej znajduje się tabela obsługiwanych właściwości tekstu.

Właściwości
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

Właściwości słów

Poniżej znajduje się tabela obsługiwanych właściwości słów.

Właściwości
word-break	word-spacing	word-wrap

Inne właściwości

Poniżej znajduje się tabela innych obsługiwanych właściwości CSS.

Właściwości
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

Wcześniejszy baner

Domyślnie instytucje ArcGIS Enterprise, które zostały zaktualizowane do wersji 10.9 z wcześniejszej wersji, korzystają z wcześniejszej konfiguracji strony głównej.

Notatka:

Ustawienia wcześniejszej strony głównej nie będą obsługiwane w przyszłych aktualizacjach. Z tego względu zaleca się, aby istniejące instytucje jak najszybciej rozpoczęły korzystanie z nowej strony głównej.

Wcześniejsza strona główna zawiera baner u góry strony mający szerokość 960 pikseli i wysokość 180 pikseli. Dla obszaru banera można wybrać obraz, wybierając wstępnie zdefiniowany obraz lub przesyłając plik z komputera lub można utworzyć projekt niestandardowy za pomocą tekstu formatowanego lub HTML. Skonfiguruj baner w ramach ustawień wcześniejszej strony głównej.

W przypadku wyboru opcji Projekt niestandardowy pojawi się edytor tekstu, w którym można umieścić grafikę i tekst w formacie WYSIWYG. Usuń istniejącą treść baneru i zastąp ją własną. W celu zapewnienia jeszcze większej elastyczności kliknij w edytorze przycisk Wyświetl kod źródłowy HTML, który pozwala wprowadzić lub wkleić własny kod HTML.

W przypadku wybrania samego obrazka na obrazie banera pojawi się Twoje logo. Jeżeli przy tworzeniu banera strony głównej korzystasz z projektu niestandardowego, logo nie zostanie wyświetlone (chyba że zostało uwzględnione w projekcie).

Wskazówka:

Jeśli w instytucji skonfigurowany jest dostęp tylko za pośrednictwem protokołu HTTPS, wszelkie odniesienia do obrazów w projekcie muszą być realizowane za pomocą protokołu HTTPS, aby obraz lub obrazy mogły się pojawić na banerze.

Przykłady

Poniżej zostały pokazane przykłady banerów utworzonych za pomocą języka HTML. Każdy przykład zawiera kod użyty do utworzenia banera. Możesz zastąpić adresy URL obrazów swoimi własnymi.

Ta przykładowa strona główna z banerem utworzonym w języku HTML.

Poniższy kod obejmuje język HTML i arkusze CSS użyte do utworzenia banera instytucji Generic Environment Organization.

<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>

Przykład strony głównej zawierającej baner utworzony w języku HTML.

Poniższy kod obejmuje język HTML i arkusz CSS użyte do utworzenia banera na rządowej stronie głównej.

<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>

Przykład strony głównej zawierającej baner utworzony w języku HTML.

Można użyć banera większego niż zalecany rozmiar 960 na 180 pikseli, ale należy pamiętać, że obraz może nakładać się na pewne obszary strony głównej, na przykład nazwę promowanych zasobów. Aby zwiększyć widoczność tekstu, należy skonfigurować spód banera w kolorze uzupełniającym dopasowanym do domyślnego niebieskiego albo należy użyć efektu wygaszania u dołu.

<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>