Bric à Brac informatique 

Les ID avec BlueGriffon 3.01

Rappels :

• Pour personnaliser les propriétés d'un élément comme un paragraphe, une image, une liste, un lien etc. BlueGriffon donne la possibilité d'introduire  l'attribut id
• L'attribut id est utilisé pour personnaliser un bloc unique d'une page HTML  
• Un ID ne peut être utilisé qu’une seule fois dans la page (contrairement à une class, voir la fiche Les classes)

Créer un ID

La création d'un ID implique de le nommer donc de lui affecter un nom. 

Il existe plusieurs méthodes pour affecter un ID d'un nom  avec BlueGriffon

Méthode la plus simple :

• Placer le curseur dans l'élément qui sera affecté de cet ID
  
• Sélectionner l'élément donné dans la barre de structure
  
• Cliquer sur le bouton ID de la Barre d'outils qui se présente comme ci-dessous (dans le thème Black ) dans la version BlueGriffon 3. Il s'agit du bouton (2)   (pas d'ID)  
  
   
  
• Le point d'insertion clignote. Taper le nom que vous souhaitez donner à cet ID (sans espace, sans accent) et
  
  
• Appuyer sur la touche Entrée.
  

Le nom de l'ID est enregistré.

ATTENTION : l'ID a été créé. Il est affecté à l'élément que vous avez choisi. Son nom  s'affiche dans la barre de structure avec un #(appelé dièse en français ou hashtag pour les anglophones) devant son nom, associé à l’élément désigné. Mais et il n'a aucune propriété. Il n'existe pas pour la Feuille de Styles.

Méthode à l'aide du panneau Styles CSS :

ATTENTION : l'utilisation de cette méthode implique qu'il n'y ait pas eu de modifications effectuées au niveau des Préférences, onglet Styles. Manuel dans l'encadré Politique CSS doit rester coché.

• Placer le curseur dans l'élément qui contiendra cet id
  
  
• Sélectionner l’élément dans la barre de structure. Le contenu de l'élément est sélectionné.
  
  
• Activer la commande : Panneaux, Styles CSS pour afficher le panneau Styles CSS. Celui-ci contient 19 sections différentes pour la version 3
  
  




• Dans l'encadré Appliquer les styles à (1) garder le choix affiché par défaut indiquant uniquement cet élément via son ID (en haut du panneau) (2)
  
  
• A partir de maintenant, n'importe quel choix effectué dans le panneau CSS provoquera l'affichage d'un encadré texte de couleur jaune pour permettre d'attribuer un nom à l'ID.

Exemple : choisir un style de police (3) et choisir une taille de 16px  (4)

Saisir un nom au clavier (sans accent, sans espace) dans l'encadré texte du message affiché en jaune.

Cliquer sur le bouton OK

Le choix de propriétés effectué dans le Panneau CSS est automatiquement répercuté dans le document. Le nom de l'ID  associé à l’élément désigné s'affiche dans la barre de structure avec un # (dièse ou hashtag) devant son nom,

Contrairement à la méthode précédente, l'id est enregistré dans la feuille de styles interne ou dans la feuille de styles externe liée (si elle existe).

Attribuer un ID existant à un élément donné

Rappel : un ID ne peut être utilisé qu'une seule fois dans la page

Pour affecter un élément d'un ID existant (non utilisé), dans votre document :

• Placer le curseur dans l'élément
• Activer l'icône ID de la barre d'outils et



• Cliquer sur la tête de flèche à droite de l'encadré texte. Si votre document contient des IDs, la totalité des id enregistrés dans la feuille de style (interne ou externe) s'affiche en liste déroulante.
• Sélectionner le nom de l'ID
• Appuyer sur la touche Entrée : l'ID est affecté à l'élément désigné
  

Supprimer un ID lié à un élément

Pour supprimer un ID lié à un élément :

• Placer le curseur dans l'élément : le nom de l'ID s'affiche dans l'encadré texte de l'icône ID
• Effacer le nom de l'ID affiché
• Appuyer sur la touche Entrée

Note : L'ID n'est plus affecté à l'élément mais il n'est pas supprimé de la Feuille de Styles

Modifier l'attribution d'un ID lié à un élément

Sur une même page le même ID ne peut être utilisé plusieurs fois.

Il est possible de transférer un ID d'un élément à un autre.

Exemple : Si un ID est affecté à un élément A et que vous souhaitez qu'il le soit à l'élément B

• Placer le curseur dans l'élément B

  

• Sélectionner l'ID dans la liste déroulante de l'icône ID
• Appuyer sur la touche Entrée

Une boite de dialogue s'affiche pour donner le choix entre le fait de supprimer l'ID dans l'élément A ou d'annuler cette action. Effectuer le choix : Supprimer l'ID

Ajouter, supprimer et/ou modifier les propriétés d'un  ID 

Les propriétés peuvent être gérées dans BlueGriffon à partir du Panneau Styles CSS

Le panneau Styles CSS contient 19 sections différentes, effectuer vos choix.

Voir la fiche Styles CSS

Dernière mise à jour : le 31/07/18