En appliquant le logo et les couleurs de votre organisation à votre site, vous indiquez que le contenu est officiel et digne de confiance. Cela permet également d’incorporer à votre site d’autres contenus Web de votre organisation. Cette rubrique décrit la façon dont les administrateurs et les membres de l’équipe centrale prennent les mesures suivantes :
- Choisir un en-tête et un titre pour un site.
- Ajouter un logo à l’en-tête d’un site.
- Changer les couleurs de l’en-tête du site, des boutons, du texte et de l’arrière-plan.
Pour commencer, connectez-vous à Portal for ArcGIS et cliquez sur Sites dans la page Overview (Vue d’ensemble) pour afficher la liste de vos sites.
Astuce :
Vous pouvez également mettre à jour un site lorsque vous l’afficher dans un navigateur. Veillez à vous connecter et recherchez le bouton de mise à jour figurant à gauche du site.
Choisir un style d’en-tête
L’en-tête de votre site désigne l’emplacement où vous insérez un logo, créez une navigation pour accéder à d’autres ressources via des liens de menu et établissez des liens vers les comptes de réseaux sociaux.
- Cliquez sur Header (En-tête) dans la fenêtre de personnalisation.
- Cliquez sur le menu Appearance (Apparence) pour choisir un style pour votre en-tête. Les trois options suivantes sont disponibles :
- Standard : valeur par défaut de chaque nouveau site ; cette conception comporte une barre fine et compacte qui a un espace pour accueillir un logo (60 pixels), des liens renvoyant à un réseau social et des liens de menu.
- Prominent (Proéminent) : cette conception offre plus d’espace pour des logos de plus grande taille (120 pixels) et des liens de menu supplémentaires.
- Custom CSS/HTML (CSS/HTML personnalisés) : utilise un éditeur de code doté d’une fonction de syntaxe activée pour configurer un en-tête avec un code personnalisé. Pour en savoir plus, reportez-vous à la rubrique En-têtes et pieds de page personnalisés.
Remarque :
Pour ajouter un logo, appliquez les étapes de la section qui suit.
- Cliquez sur le menu Branding (Habillage). Tous les champs fournis dans le menu sont facultatifs.
- Name (Nom) : Saisissez le nom qui doit s’afficher dans l’en-tête du site. Le nom que vous indiquez dans ce champ est seulement visible dans l’en-tête et ne sera pas reproduit dans l’URL du site ni dans votre liste de sites.
- Short Name (Nom court) : Saisissez une version abrégée que vous avez ajoutée à votre en-tête. Ce nom ne s’affiche que si le nom initial de l’en-tête est trop long lorsqu’il est consulté sur des écrans de petites dimensions (sur un téléphone portable, par exemple).
Astuce :
Les utilisateurs naviguent de plus en plus sur Internet à partir de leur appareil mobile. Il est vivement conseillé d’ajouter un nom court pour assurer la qualité de votre site quel que soit l’appareil utilisé.
- Choisissez une option pour Layout (Mise en page) : Box (Boîte) ou Wide (Large).
- Si vous souhaitez attribuer une marque à l’en-tête de votre site avec un code HTML/CSS personnalisé, sélectionnez Use custom HTML/CSS (Utiliser un code HTML/CSS personnalisé).
Remarque :
L'en-tête HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.
- Modifiez la fenêtre CSS dans le panneau latéral et cliquez sur Apply Changes (Appliquer les changements)pour visualiser les effets sur votre code.
- Cliquez sur Save (Enregistrer).
Ajouter un logo à un en-tête
La taille et la position du logo de votre site dépend du style d’en-tête que vous choisissez.
- Cliquez sur Header (En-tête) dans la fenêtre de personnalisation.
- Cliquez dessus pour développer le menu Branding (Habillage).
- Cliquez sur le bouton à bascule Logo pour l’activer.
- Ajoutez une image en choisissant Image URL (URL d’image) ou en téléchargeant une image à partir d’un fichier.
Astuce :
Si vous téléchargez une image d’un fichier, notez qu’une image enregistrée au format PNG donne de meilleurs résultats. Vous pouvez découper et agrandir l’image dans la section Image settings (Paramètres d’image) de la fiche du volet Customize (Personnaliser). - Si vous utilisez l’en-tête Prominent (Proéminent), vous pouvez choisir un paramètre pour Image Alignment (Alignement de l’image).
- Pour Logo Alt Text (Texte alternatif du logo), fournissez le texte répondant aux normes d’accessibilité.
Astuce :
Si un logo inclut du texte, le texte alternatif peut correspondre au nom de la société. Si le logo est un logo image, vous pouvez le considérer comme étant un décor et saisir “”un texte alternatif. - Cliquez sur Save (Enregistrer).
Créer un thème
Définissez le thème de votre site en choisissant les couleurs de l’en-tête, du texte et des boutons de votre site.
Astuce :
Lorsque vous choisissez une couleur, passez en revue les directives concernant la charte graphique de votre organisation. De nombreuses directives spécifient les codes couleur applicables au contenu tel que les sites Web et les logos. En l’absence de directives, consultez votre équipe ou les parties concernées pour vous assurer que le thème de votre site reflète votre organisation.
- Pour sélectionner une couleur pour l’une des options suivantes, saisissez un code couleur ou choisissez une couleur dans le sélecteur de couleurs en regard du champ du code couleur.
- Le paramètre Global Nav Background Color (Couleur d’arrière-plan de la navigation globale) applique une couleur à la barre de navigation globale de votre site.
- Le paramètre Global Nav Text Color (Couleur de texte de la navigation globale) applique une couleur au texte de la barre de navigation globale.
Remarque :
Pour plus d’informations sur la navigation globale, reportez-vous à la rubrique Qu’est-ce que la navigation mondiale ?.
- Le champ Header Background Color (Couleur d’arrière-plan de l’en-tête) applique la couleur à l’en-tête de votre site.
- Le champ Header Text Color (Couleur du texte de l’en-tête) applique la couleur à tout le texte de l’en-tête.
- Le champ Body Background Color (Couleur d’arrière-plan du corps) applique la couleur aux lignes de votre site. Il est également possible de configurer la couleur de la ligne et la couleur du texte pour chaque ligne en procédant selon les étapes indiquées dans Ajouter votre première fiche à l’aide de la fiche ligne.
- Le champ Body Text Color (Couleur du corps de texte) applique la couleur au texte de l’ensemble de votre site.
- Le champ Body Link Color (Couleur du lien du corps) applique la couleur à tout lien fourni sur votre site.
- Le champ Button Background Color (Couleur d’arrière-plan des boutons) applique la couleur aux boutons de votre site.
- Le champ Button Text Color (Couleur de texte des boutons) applique la couleur au texte des boutons de votre site.
- Une fois que vous avez défini les couleurs, cliquez sur Apply Changes (Appliquer les changements).
- Vous pouvez également appliquer des polices au texte en en-tête et dans le corps de votre site.
- Pour choisir une police pour le corps de votre site, cliquez sur le bouton des paramètres Base Font (Police de base).
- Pour changer la police de l’en-tête de votre site, cliquez sur le bouton des paramètres Header Font (Police d’en-tête).
Remarque :
Pour recommencer ou revenir aux couleurs par défaut, sélectionnez Reset to Defaults (Rétablir les valeurs par défaut) en bas du menu Theme (Thème).
Créer un pied de page
Par défaut, l'éditeur de site (Site Editor) n'a pas de pied de page. Vous devez créer un pied de page personnalisé pour avoir un pied de page continu sur toutes les pages de votre site.
- Dans la section Footer (Pied de page), sélectionnez Custom (Personnaliser).
Un pied de page par défaut s'affiche sur la page et une fenêtre CSS apparaît dans le panneau latéral.
- Pour mettre à jour le code HTML, cliquez sur le bouton des paramètres dans l’angle inférieur droit du pied de page.
- Cliquez une nouvelle fois sur le bouton des paramètres pour afficher vos modifications.
- Modifiez la fenêtre CSS dans le panneau latéral et cliquez sur Apply Changes (Appliquer les changements)pour visualiser les effets sur votre HTML.
Astuce :
Le pied de page HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.
Étape suivantes
Pour configurer votre site avec d’autres options personnalisées, procédez comme suit :
- Ajoutez des liens de menu et assurez-vous que la navigation globale est activée. Pour plus d’informations, reportez-vous à la rubrique Configurer les liens de menu et la navigation globale.
- Chaque site comporte une URL (adresse Web). Si votre organisation possède son propre domaine, vous pouvez configurer cette URL pour personnaliser davantage votre site. Pour plus d’informations, reportez-vous à la rubrique Configurer une URL personnalisée.
Vous avez un commentaire à formuler concernant cette rubrique ?