Bric à Brac informatique 

Encadrer un bloc de texte avec BlueGriffon 2

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. Créer un encadrement VIDE 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. Voici  quelques possibilités, en détails.

A. Pour modifier par exemple la Largeur du cadre 

Sélectionner le tableau par la commande : Tableau, Sélectionner, Tableau

Activer la commande : Tableau, Propriétés du Tableau

Dans l'onglet Tableau voir en (1).

La Largeur par défaut est 100 %, saisir une autre valeur au clavier

B. Pour modifier par exemple la Taille de la bordure 

Sélectionner le tableau par la commande : Tableau, Sélectionner, Tableau

Activer la commande : Tableau, Propriétés du Tableau

Dans l'onglet Tableau,voir en (2).

La taille de la Bordure est 1 pixel(s) par défaut saisir une autre valeur au clavier

C. Pour modifier par exemple la Couleur de fond

Sélectionner le tableau par la commande : Tableau, Sélectionner, Tableau

Activer la commande : Tableau, Propriétés du Tableau

Dans l'onglet Cellules, 

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

Cliquer sur OK

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

On peut l’obtenir de deux manières :

D.1. Soit 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 (par la commande : Tableau, sélectionner, Tableau

Cocher Explorateur DOM dans la commande : Panneaux, Explorateur DOM pour afficher  le panneau Explorateur DOM 

Dans la partie haute du volet  Éléments de l’Explorateur DOM , 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 . Ceci en cliquant n'importe où dans le document

Après insertion de cet attribut (border-collapse:collapse), vous obtenez l'encadrement ci-dessous, à comparer avec l'encadrement obtenu par défaut (voir plus haut dans le document)

D.2.  Soit activer le panneau Styles CSS

Insérer le curseur dans l'encadrement obtenu

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

Afficher le panneau  Styles CSS par la commande : Panneaux,Styles CSS.

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 D.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%;">


CONCLUSION

L'encadrement obtenu est vide, le texte à encadrer doit être saisi, au clavier, à l'intérieur de celui-ci.

IMPORTANT: le texte encadré est saisi au niveau de la balise <td>

II. Créer un encadrement à un TEXTE EXISTANT avec le panneau Styles CSS

METHODE A

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

Mode opératoire par l'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é 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 par l'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. Cocher Style CSS dans la commande : Panneaux, Styles CSS, pour 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 Cadres
   
   
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 à renseigner

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 25/07/16