Bric à Brac informatique 

Encadrer un bloc de texte avec BlueGriffon

Lors d'insertion d'un contenu dans une page html, il est parfois intéressant d'encadrer ce contenu.

Nous proposons trois solutions différentes :

1. Utiliser l'outil Tableau (partie I)

2. Utiliser le Panneau CSS avec l'option "cet élément, via ses styles CSS embarqués" (partie II, Méthode A)

3. Créer une classe qui s'appliquera à l'encadrement du bloc de texte désigné (partie II, Méthode B).

I. Encadrer avec l'outil Tableau

Activer la commande : Tableau, Insérer, Tableau

Pointer sur la configuration 1x1 (1 seule colonne et une seule ligne). Cliquer.

L'encadrement est créé. Le contenu texte peut y être saisi au clavier

Par défaut, nous obtenons un style de bordures doubles.

 <table style="width: 100%" border="1">
      <tbody>
        <tr>
          <td><br>
            <br>
          </td>
        </tr>
      </tbody>
    </table>

Par défaut, l'encadrement obtenu occupe toute la largeur de la page. La bordure est double. Chaque cellule reçoit le même encadrement.

Exemple de l'encadrement obtenu par défaut :

BlueGriffon permet d'améliorer l'apparence de cet encadrement et propose plusieurs possibilités. Nous en détaillerons 3.

Sélectionner ce tableau (à 1 ligne et 1 colonne) par la commande : Tableau, Sélectionner, Tableau

1. Pour modifier la Largeur du cadre, sa  Couleur de fond et la Taille de la bordure et  on peut activer la commande : Tableau, Propriétés du tableau.

Dans l'onglet Tableau,

- pour modifier la Largeur voir en (1)

- pour modifier le Formatage du Cadre voir en (2).

Dans l'onglet Cellules,

- Choisir une Couleur de fond, au niveau de la propriété Style

Cliquer sur OK

2. Pour obtenir une bordure simple, alors qu'elle est double par défaut :

2.1. on peut activer l’Explorateur DOM

L'explorateur DOM permet d'insérer l'attribut "style= border-collapse:collapse;" à l'élément <table> de manière à fusionner les bordures de chaque cellule, ceci sans passer par le mode Code source.

Mode opératoire exemple pour modifier en bordure simple, la bordure double affichée, par défaut

Dans BlueGriffon, pour  ajouter l'attribut style= border-collapse:collapse, il est nécessaire de passer en mode Code Source  ou mieux utiliser l'Explorateur DOM.

Sélectionner le tableau et afficher  l'Explorateur DOM. Dans la partie haute du volet  Éléments, sélectionner table (1).

Dans la partie basse, sélectionner l'onglet Attributs

Cliquer sur l'icone + en bas de la fenêtre (2)

Dans la colonne Nom, saisir style dans l'encadré texte affiché (3)

Cliquer dans la colonne Valeur, puis taper border-collapse:collapse
dans l'encadré texte affiché (4)

Quitter l'Explorateur DOM

Après insertion de cet attribut, vous obtenez ceci, à comparer à l'encadrement obtenu par défaut (voir plus haut dans le document)

2.2. On peut activer le panneau Styles CSS 

Insérer le curseur dans l'encadrement obtenu

Sur la barre de structure sélectionner l'élément <table>

Sélectionner Appliquer les styles à cet élément, via ses styles embarqués

Activer la rubrique Tableaux

Dans l'option Cadre du tableau, sélectionner Replié

Le résultat est identique à celui obtenu dans la partie 2.1.

Avec l'une ou l'autre de ces deux méthodes, le code inséré dans le Code source se présente ainsi

 <table style="border-collapse:collapse" border="1" width="100%;">


L'encadrement étant créé, le texte à encadrer sera saisi, au clavier, à l'intérieur de celui-ci.

Note : il s'insère au niveau de la balise <td>

II. Encadrer en utilisant le panneau Styles CSS

METHODE A

Par cette méthode la mise en forme doit être effectuée à chaque encadrement

Mode opératoire exemple

Saisir le texte à encadrer au km. Penons comme exemple le texte ci-dessous.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.

1.  Sélectionner le texte saisi.

2. Sur la Barre d'outils, cliquer sur la flèche basse de l'encadré Choisir un format de paragraphe pour afficher la liste déroulante. Sélectionner le dernier choix 
   Conteneur générique (div) : <div> est affiché dans la barre de structure
   
   
3. Laisser le curseur de la souris dans le paragraphe à encadrer
   
   
4. Dans la barre de structure cliquer sur <div> pour sélectionner tout le bloc
   
   
5. Afficher le panneau Styles CSS
   
   
   
   

   

6. Afficher le panneau Styles CSS
   
   
7. Sélectionner "cet élément, via ses styles CSS embarqués" dans la rubrique Appliquer les styles à :
   
   
8. Sélectionner la section Cadres
   
   Choisir la couleur de l'encadré
   (sur notre exemple la couleur Rouge a été sélectionnée)
   
   Cliquer sur la flèche basse de l'encadré texte suivant (à droite) pour choisir une épaisseur de trait
   
   Cliquer sur la flèche basse du deuxième encadré texte (à droite) pour choisir le style  de trait
   
   
   
   Le texte est encadré, mais il occupe toute la largeur de la page
   
   
9. Dans le panneau Styles CSS, activer la section Géométrie
   
   
   
   
10. Modifier la Largeur (A)
    

    

    
    Dans notre exemple nous avons choisi 75 % (de la largeur de la page).
    Note : On peut aussi choisir d'indiquer la largeur en pixels. (A)
    
    
11. En bas de la section Géométrie, décocher Marges identiques (B)
    
    
    
12. Sélectionner Automatique dans la liste déroulante pour les marges Gauche et Droite (C) et (D)
    
13. Dans l'encadré gris réservé aux Marges internes, décocher Marges internes identiques (E).
    
    Dans notre exemple nous avons choisi 10px de marges internes pour les marges Gauche et Droite et 5px pour les marges Haute et Basse
    

Vous pouvez obtenir ceci :

METHODE B

Créer une classe qui sera affectée au bloc de texte contenant le texte à encadrer. Les encadrements seront tous identiques lorsque un bloc de texte sera affecté de cette classe.

Par cette méthode la mise en forme sera exécutée automatiquement sur le même modèle

Mode opératoire exemple

Saisir le texte à encadrer au km. Penons comme exemple le texte utilisé pour la méthode A 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.

1. Sélectionner le texte à encadrer

2. Sur la Barre d'outils, cliquer sur la flèche basse de l'encadré Choisir un format de paragraphe pour afficher la liste déroulante. Sélectionner le dernier choix 
   Conteneur générique (div) : <div> est affiché dans la barre de structure
   
   
3. Laisser le curseur de la souris dans le paragraphe à encadrer
   
   
4. Afficher le panneau Styles CSS
   
   
5. Dans la rubrique Appliquer les styles à ouvrir la liste de choix et sélectionner tous les éléments de la classe
   
   
   

   

6. Saisir au clavier un nom pour cette nouvelle classe. Nous avons choisi "encadremt"
   
   
7. Dans le panneau Styles CSS, activer la section Cadre
   
   
8. Conserver Cadres similaires sur les 4 côtés coché (On peut choisir de le décocher ... cette éventualité n'est pas développée dans ce document).
   
   
9. Cliquer dans l'icone Couleur de la bordure pour modifier éventuellement la couleur imposée par défaut pour ce document
   

   

   
   Dans notre exemple nous avons choisi 
   
   • une couleur de trait Rouge
     
   • 3px pour l'épaisseur du trait et le style Solide.
     Note : d'autres choix sont possibles en activant les listes déroulantes liées
     
   • Si vous souhaitez des bords arrondis, entrer une valeur pour les quatre coins (en dessous de la rubrique Les quatre coins sont similaires).
     Dans notre exemple nous avons choisi 10px pour les deux valeurs à renseiseigner

Le texte est encadré, mais il occupe toute la largeur de la page

11. Dans le panneau Styles CSS, activer la section Géométrie
    
12. Modifier la largeur.
    Dans notre exemple nous avons choisi 75 % (de la largeur de la page). On peut aussi choisir d'indiquer la largeur en pixels. (A)
    
13. En bas de la section Géométrie, décocher Marges identiques (B)
    
14. Sélectionner Automatique dans la liste déroulante pour les marges Gauche et Droite (C) et (D)
    
15. Dans l'encadré Marges internes, décocher Marges internes identiques (E).
    Dans notre exemple nous avons choisi 10px de marges internes pour les marges Gauche et Droite et 5px pour les marges Haute et Basse

Résultat :

Le texte est encadré et centré sur la page

Vous pouvez maintenant mettre en forme ce texte, au niveau du choix de police, de la taille de sa couleur etc. en affectant une des classes existantes à chaque paragraphe sinon en la créant suivant la mise en forme souhaitée.

Dernière mise à jour : le 17/03/16