Réaliser une lettrine // rédigé par bugalood // 15-02-2003
// Création de l'image.
Rien de plus simple! Ouvre votre programme de graphisme favoris ( j'utilise photoshop, que je conseille vivement ) et créez une lettre assez grande ( une image de 35 px * 35 px environ) de la police et de la couleur de votre choix, sur fond blanc. Sauvegardez de préférence au format "gif", car c'est celui-la que nous utiliserons tout au long de ce tutorial.
Voici un exemple de lettrine, n'hésitez pas à apporter votre touche personnelle, effet garanti !
// Insertion de la lettrine dans un tableau html.
Maintenant que vous avez crée votre image, il va falloir l'introduire dans un tableau html contenant du texte, de manière à ce qu'elle soit placée en haut à gauche du texte.
Voici le code html à insérer dans votre page ( modifiez le à votre guise pour l'introduire au mieux dans votre page web ), ne faites pas de copier/coller car vous pauriez avoir une mauvaise surprise : / .
<img src="lettrine.gif" align="left">onjour
et bienvenue dans notre tableau avec lettrine. Comme vous pouvez le constater
tout c'est bien passé et l'image s'affiche en haut à gauche du tableau. |
- Explications : Ce code représente un tableau tout à fait ordinaire, dont la largeur fait 30% de la page. Jettez un oeil à la ligne contenant <img src="lettrine.gif" align="left"> . C'est la balise html chargée d'afficher la lettrine. Elle alignera l'image a"gauche" ( align="left" ) pour qu'elle soit bien alignée au texte du tableau.
Voici à quoi devrait ressembler votre tableau html ! Sympa non ? N'oubliez pas que vous pouvez toujours décorer ou animer vos lettrines, les agrandir et les rétrécir pour les rendre plus attractive et les assortir au look de votre page.
onjour et bienvenue dans notre tableau avec lettrine. Comme vous pouvez le constater tout c'est bien passé et l'image s'affiche en haut à gauche du tableau.
source:
http://www.bugalood.be/zoom_tutorials.php?rub=webdesign&tuto=lettrine
Accueil 
Portail 
