Comment utiliser le panneau de texte dans le panneau de propriétés CSS de Dreamweaver - dummies

Le panneau de texte de Dreamweaver contient un ensemble d'options qui contrôlent l'affichage du texte dans vos pages. Vous pouvez accéder aux options du panneau de texte en faisant défiler le panneau des propriétés jusqu'à ce que vous obteniez les options de mise en page ou en cliquant sur l'icône T en haut du panneau.

Le panneau Texte comprend les options de formatage suivantes:

• Couleur: Définit la couleur du texte. Vous pouvez bien cliquer sur la couleur et choisir une couleur, utiliser la pipette pour échantillonner n'importe quelle couleur sur l'écran ou entrer un code de couleur hexadécimal dans le champ de couleur. Si vous entrez un code de couleur hexadécimal, incluez le signe dièse (#).

• Font-Family: Définir une famille de polices ou une série de familles. Vous pouvez ajouter des polices à partir de votre disque dur local ou d'Adobe TypeKit en choisissant Gérer les polices au bas de la liste déroulante et en lançant la boîte de dialogue Gérer les polices.

  

• Style de police: Entrer Normal, Italique ou Oblique. Cependant, italique et oblique sont rarement différents dans un navigateur Web, alors restez en italique sauf si vous avez une raison spécifique de ne pas le faire.

• Police-Variant: Change le texte en petites majuscules. Testez vos conceptions attentivement car cet attribut n'est pas pris en charge par tous les navigateurs.

• Police-Poids: Rendre le texte affiché en gras en sélectionnant Gras ou Bolder dans la liste déroulante. Vous pouvez également entrer un nombre entre 100 et 900 pour contrôler plus précisément l'affichage du texte en caractères gras. Pour supprimer le formatage en gras, choisissez Normal ou Plus clair.

• Taille de la police: Définit la taille du texte. Vous pouvez choisir une taille numérique spécifique ou une taille relative. Les options de taille sont les suivantes: pixel (px), point (pt), pica (pc), pourcentage (%), em, rem, ex et ch. Les pixels, les ems et les pourcentages sont les options les plus couramment utilisées pour les tailles de texte.

• Line-Height: Spécifie la hauteur de la ligne sur laquelle le texte est placé. Tout comme la taille du texte, vous pouvez spécifier la hauteur de la ligne de plusieurs façons, y compris les pixels, les ems et les pourcentages. Il est recommandé d'ajouter une hauteur de ligne sur le Web car l'augmentation de l'espace autour de votre texte facilite la lecture sur un écran d'ordinateur.

• Alignement du texte: Alignez à gauche, alignez à droite, centrez ou justifiez votre texte en cliquant sur l'icône correspondante. La première icône, pour Hériter, est la valeur par défaut. Par exemple, vous pouvez centrer le texte dans le pied de page de votre page Web en incluant Texte-Aligner défini sur Centre dans la définition d'un style que vous appliquez à la balise en bas de la page.

• Text-Decoration: Spécifie si le texte est souligné, surligné, barré ou affiché avec l'effet de clignotement.Vous pouvez également choisir Aucun, ce qui est fréquemment utilisé pour supprimer le soulignement du texte lié.

• Retrait de texte: Spécifiez la quantité de texte à mettre en retrait du côté gauche de la page en entrant un nombre dans l'une des options de taille, telles que pixels, ems ou pourcentages.

Pourquoi tant de polices?

Vous avez peut-être entendu dire que vous pouvez désormais utiliser n'importe quelle police de caractères sur vos pages Web, grâce à la dernière version de Cascading Style Sheets, CSS3. Cette affirmation est vraie mais avec certaines limitations: Vous devez avoir le droit légal de publier la police, et la police doit être hébergée sur un serveur Web.

Pour vous assurer que votre texte s'affiche comme vous le souhaitez, Dreamweaver inclut des collections des polices les plus courantes sur les ordinateurs Windows et Macintosh. Ces polices sont regroupées dans des familles, telles que

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

• Cambria, Texte Hoefler, Libération Serif, Times, Times New Roman, Times, et serif

Vous pouvez créer vos propres collections de polices à l'aide de la boîte de dialogue Gérer les polices, accessible en sélectionnant l'option Gérer les polices au bas de la liste déroulante Famille de polices du panneau Texte du panneau Concepteur CSS.

La section Text-Shadow du panneau Text

La section Text-Shadow du panneau Text fournit des outils pour ajouter des ombres de texte, une des propriétés CSS les plus récentes incluses dans la définition CSS3. Les options les plus populaires sont les suivantes:

• H-ombre: Ajoute une ombre à votre texte sur l'axe horizontal. Choisissez d'abord une option de taille, puis entrez un nombre dans le champ. Par exemple, entrez 2px pour ajouter une ombre horizontale de 2 pixels de large.

• V-ombre: Ajoute une ombre à votre texte sur l'axe vertical. Choisissez d'abord une option de taille, puis entrez un nombre dans le champ.

• Flou: Contrôle la quantité de flou dans l'ombre. Plus le nombre est grand, plus l'ombre est étendue ou floue.

• Couleur: Entrez un code de couleur hexadécimal pour spécifier la couleur de l'ombre ou utilisez la pipette pour échantillonner n'importe quelle couleur à l'écran.

  

Les fonctionnalités situées en bas du panneau Texte, qui ne sont pas aussi communes que les autres options du panneau Texte, sont les suivantes:

• Transformation de texte: Changez la casse de votre texte. Les options sont les suivantes: majuscule, majuscule et minuscule. Cliquez sur l'icône correspondante pour définir cette propriété.

• Espacement des lettres: Définit la quantité d'espace blanc inséré entre les lettres. Les options de taille sont les suivantes: pixel (px), point (pt), pica (pc), pourcentage (%), em, rem, ex et ch.

• Espacement des mots: Définit la quantité d'espace blanc inséré entre les mots. Les options de taille sont les suivantes: pixel (px), point (pt), pica (pc), pourcentage (%), em, rem, ex et ch. (Voir la barre latérale précédente "Comparaison des options de taille CSS.")

• Espace blanc: Dites au navigateur comment gérer les sauts de ligne et les espaces dans un bloc de texte. Vos options sont Inherit, Normal, Nowrap, Pre, Pre-line ou Pre-wrap. Nowrap est particulièrement utile car il empêche les éléments d'être séparés s'ils doivent être intégrés dans une fenêtre de navigateur ou dans un autre conteneur.

• Alignement vertical: Aligne les éléments en ligne, tels que le texte et les images, par rapport aux éléments qui les entourent. Vous pouvez définir une valeur numérique ou choisir Baseline, Sub, Super, Haut, Text-Top, Middle, Bottom et Text-Bottom.