Utilisation de HTML pour créer une bannière de page d'accueil
Abonnement :La création d'une bannière de page d'accueil nécessite un compte qui fait partie d'une organisation ArcGIS Online. Reportez-vous à la rubrique Découverte du site Web pour plus d'informations.
Les administrateurs d'une organisation peuvent personnaliser le site Web pour présenter les informations géographiques importantes pour leur organisation. A cette fin, il existe une option permettant de créer une bannière en langage HTML pour la page d'accueil. Pour plus d'informations sur les autres options de configuration du site Web, reportez-vous à la rubrique A propos de la configuration du site Web.
A propos de la bannière
En haut de la page d'accueil figure une bannière de 960 pixels de largeur et 180 pixels de hauteur. Vous pouvez sélectionner une image à placer dans la bannière. Il peut s'agir d'une image prédéfinie ou d'un fichier téléchargé à partir de votre bureau. Vous pouvez également créer le contenu de la bannière en langage HTML. Reportez-vous à la rubrique Configuration des paramètres généraux pour le site Web pour plus d'informations.
Votre logo apparaît dans l'image de la bannière. Si vous utilisez HTML pour définir la bannière de la page d'accueil, le logo n'y figure pas (sauf si vous l'incluez dans votre code HTML).
Astuce:Si votre organisation est définie comme étant SSL uniquement, toute référence aux images dans votre HTML doit être accessible par le biais de HTTPS pour que la ou les images apparaissent dans votre bannière. Reportez-vous à la rubrique Configuration des paramètres de sécurité pour plus d'informations.
Balises HTML prises en charge
Vous trouverez ci-après un tableau des balises HTML que vous pouvez utiliser pour créer une bannière personnalisée.
Tag | Attribut |
|---|---|
a | href, target, style |
img | src, width, height, border, alt, style |
span | style |
table | width, height, cellpadding, cellspacing, border, style |
div | style |
police | 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 |
Conseils pour l'utilisation de HTML
- Les balises HTML qui ne sont pas répertoriées dans le tableau ci-dessus ne sont pas prises en charge et sont éliminées.
- Les protocoles autorisés pour href et src sont http et mailto.
- Les balises de fermeture manquantes sont ajoutées automatiquement.
- Les caractères <>&'s sont désactivés des balises correctes s'ils ne sont pas désactivés comme suit : < > & ".
Exemples
Vous trouverez ci-dessous des exemples de bannières créées en langage HTML. Chaque exemple inclut le code utilisé pour créer la bannière.
 |
Exemple de page d'accueil incluant une bannière créée en langage HTML |
L'exemple de code ci-après inclut le langage HTML et les règles CSS utilisés pour créer la bannière d'un organisme appelé Generic Environment Organisation.
<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>
 |
Exemple de page d'accueil incluant une bannière créée en langage HTML |
L'exemple de code ci-après inclut le langage HTML et les règles CSS utilisés pour créer une bannière portant la mention Government Home.
<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>