-
service-design
|
 23/07/2008, 21 09 10 (UTC)
Sujet du message: TUTORIEL POUR TEXTE DES BOÎTES DE DROITE, DES EXTRAS & A |
|
|
TUTORIEL POUR AGIR SUR LE TEXTE DES BOÎTES DE DROITE, DES EXTRAS ET AUTRES TEXTES
____________________________________________________________
D'abord, pourquoi ai-je créé ce tutoriel ? Parce que nombres de questions furent posées sur le forum (avant son gros bug) en ce qui a trait à la possibilité d'intervenir sur la couleur, la police, le style et autres attributs du texte des boîtes de droite et, finalement, de certaines pages au texte non
accessible via notre édireur de texte. Aucune réponse ne semble avoir été donnée à propos de certains designs... réponses que moi-même d'ailleurs je cherchais sur le forum. Et je suis même allée plus loin en intervenant sur le texte des extras.
Donc ce tutoriel s'adresse à tous ceux et celles étant désireux d'intervenir sur les codes déjà existants de fr.gd (attributs par défaut), et qui ne correspondent pas, ou plus du tout, à leurs attentes.
Après de nombreuses expériences et manipulations de codes, et autant de tests opérés sur deux designs, dont FLASH et COLOURFUL, j'ai enfin trouver réponses à ces questions. Et je veux vous les partager afin que vous aussi puissiez en profiter. Quand aux autres designs, je n'ai pu rien y faire puisque je ne les ai ni utilisés ni exploités. Il semble que chaque design réagisse différemment aux codes, certains ne réagissent pas du tout. Chose certaine, les codes agissent sur les boîtes de droite et sur les extras.
Ce tuto se subdivisera en trois parties distinctes: la première concernera l'INTERVENTION sur le design; la seconde, l'AGIR sur les boîtes de droite; finalement, la troisième, l'INTERVENTION sur les extras. Ceci, bien entendu, pour ceux qui n'ont pas de design CSS.
_______________________________
LISTE DES BALISES ESSENTIELLES POUR CE FAIRE :
<font> : cette balise est l'élément permettant de modifier les polices de caractères; elle a également un impact sur la taille et la couleur de la police ainsi que sur le style de caractères à utiliser. L'utilisation du tag de fermeture </font> remet par défaut les attributs de départ, la taille de la police à 3
Ses attributs spécifiques sont :
- face : avec cet attribut, on peut changer la police actuelle pour une autre
- color : indique la couleur à appliquer au texte (pour ce faire, on utilise les codes couleur hexadecimal)
- size : pour spécifier la taille de la police (valeur allant de 1 à 7); ces tailles peuvent varier suivant le navigateur web utilisé; il est possible de modifier ces valeurs de façon relative : la valeur "+1" indique une augmentation de la police actuelle à une taille supérieure; la valeur "-1" en indique sa réduction à une taille inférieure
Balises de styles:
<i> : balise affichant son contenu en italique; <em> met aussi les caractères en italique
<u> : balise soulignant son contenu
<strong> : balise concernant la mise en forme du texte à afficher; elle applique le même style que le
tag B (<b>); le texte encadré par ses balises s'affiche en gras
Autres balises :
<center> : permet de centrer les éléments et les contenus que l'éditeur de texte de fr.gd. ne contrôlent
pas. Par exemple, mon design, le texte "retour à l'aperçu" des pages des catégories de l'extra
"Galerie", et autre texte pouvant venir de l'extérieur, comme la pub et les titres des vidéos
placés sur notre site
<body> : l'élément <body> définit le corps du document HTML, c'est-à-dire tout le contenu effectif du
document (texte, images, sons, objets multimédias, etc.)
<bgcolor>: couleur qui sera utilisé pour l'arrière plan
link="couleur" : la couleur des liens
alink="couleur" : la couleur des liens déjà exploités
vlink="couleur" : la couleur des liens lors du clic
________________________________
PARTIE 1 : POUR INTERVENIR SUR LE TEXTE DE VOTRE SITE EN GÉNÉRAL
Ici nous parlons des textes hors du contrôle de notre éditeur de texte fournit par fr,gd. Par exemple, le texte de votre lien sous votre avatar (des extras "formulaire de contact" et "livre d'hôtes", le texte "retour à l'aperçu" des pages des catégories de l'extra "Galerie", les liens des pubs de l'extra "Liens",
et tout texte venant de l'extérieur, comme la pub et les titres des vidéos sur notre site.
Les attributs utilisés par fr.gd pour nos sites aux designs pré-établis : font-family : Arial, Helvetica, Verdana, sans-serif; la couleur du texte : #000000 = un noir assez pâle et difficile à lire lorsqu'on regarde sur nos pages; pour finir, une taille x-small, sinon xx-small par endroit.
Voici les 6 polices et ses 5 tailles disponibles dans notre éditeur de texte (sans mentionner les titres):
Exemple 1:
Le choix n'est pas très vaste. Mais vous pouvez intervenir sur tout cela, si vous désirez une police et une couleur à votre goût ainsi qu'une taille légèrement plud grande que celles données par défaut. C'est justement le but de ce tuto.
En premier lieu, aller dans la boîte de construction. Cliquer sur "ajouter un design", à réglage du design, cliquer sur "réglages avancés". Puis aller à "texte au-dessus du design". Là, on entre le code selon ses besoins, son soucis de lisibilité ou ses goûts... (pour ceux désirant intervenir sur le texte
par défaut, bien entendu). Il ne faut pas oublier de sauvegarder vos données.
Par exemple, pour mon site service-design (design FLASH), comme j'ai un background de couleur foncé, le texte en noir ne me convient pas du tout: il n'est pas très visible et encore moins lisible. Alors j'ai opté pour le blanc: blanc pour la couleur de la police, blanc pour les liens actifs et visités.
En voici le code :
<center><body bgcolor="#FFFFFF" text="#FFFFFF"link="#FFFFFF"vlink="#FFFFFF"alink="#FFFFFF">
Ce code me permet d'intervenir sur toutes les pages de mon site, à savoir sur les caractères de "retour à l'aperçu" inscrits en bas des pages des catégories de l'extra "Galerie", ou tout autre caractère n'entrant pas sous le contrôle de notre éditeur de texte. Il agit sur tous mes liens, tels que celui placé sous mon avatar dans les extras "Formulaire de contact" et "Livre d'hôtes" (je traiterai
la question des extras un par un, dans la troisième partie de ce tuto), sur tous les autres liens non créés avec l'éditeur = ceux venant de l'extérieur, tels que les liens sous les vidéos, les diaporamas, les liens de ma musique, ceux des pubs, etc.
Exemple 2 : mes liens de musique
Exemple 3 : liens-pub sous mes vidéos
Exemple 4 : liens sous mes avatars
Exemple 5 : lien du "retour à l'aperçu"
Exemple 6 : liens des pubs de mes partenaire (voir ici "toocharger")
En laissant la balise <center> ouverte, sans son tag de fermeture (</center>), je permets à tous mes éléments, présents et à venir, de rester centrer (ici je parle de mon design et des autres textes hors de portée de mon éditeur de texte). Autrement, en la fermant, mon design et tous les autres éléments se
décentreraient. Pour un exemple, voir l'exemple 6 ci-haut.
NOTE : Vous pouvez trouver le code des couleurs hexadécimales en cliquant sur l'image ci-après :
À propos des liens, vous pouvez choisir la couleur qui vous plaît. Pour ce faire, vous n'avez qu'à manipuler un peu les couleurs du code pour celles faisant votre affaire. Vous pouvez soit les changer toutes, ou juste la partie vlink, ou autre partie (pour un choix de couleur selon vos désirs. Voici quelques exemples, toujours avec le design FLASH.
Exemples de couleur de liens différentes :
Ici, pour le "retour à l'aperçu" :
Ici, pour les liens des pubs, des avatars, des vidéos et le contour de mon image qui est un lien :
Ici pour le lien des pubs de mes partenaires :
En ce qui a trait au design COLOURFUL, il ne se traite pas de la même manière. Ce design ne fonctionne pas avec le code du design FLASH, sauf pour le lien "retour à l'aperçu".
_____________________________________________________________
PARTIE 2 : POUR AGIR SUR LE TEXTE DES BOÎTES DE DROITE
La question du texte dans les boîtes de droite furent posées à maintes reprises. La raison de cette partie 2
de ce tutoriel est d'y répondre.
Oui, on peut intervenir sur la couleur et la dimension du texte ainsi que sur le style de police.
Regardez les exemples ci-dessous : dans la première image, les tests ont été faits sur le design COLOURFUL,
dans la seconde, sur le design FLASH.
Si vous ne voyez pas l'image, cliquez sur ce lien : www.gif-transparent.fr.gd/
Si vous ne voyez pas l'image, cliquez sur ce lien : www.service-design.fr.gd/
Dans les images, j'y ai insérer des dimensions et des couleurs variées.
Ne surtout pas oublier, lorsque vous entrez un code dans une boîte de droite, de sauvegarder vos données.
Pour changer le style : choisir un style qui vous convient. Pour ce faire, référez-vous à un éditeur de texte
autre que celui de fr.gd qui n'a qu'un choix très limité à 5 styles (nommés ci-haut dans la première partie de ce
tutoriel. Dans l'éditeur de texte que vous avez choisi, vous allez dans le menu déroulant et retenez votre choix.
Voici les codes:
<font color="#280E88" size=+1><strong>Bonjour ! Ici je teste les codes html pour les boîtes de droite. </br>
(texte en bleu royal, avec une valeur +1, en caractère gras)
<font color="#CC0000" size=+2><i>Bonjour !</br>
(pour le premier texte orange, avec une valeur +2, en italique)
<font color="#FF00FF" size=+3>Bonjour !</br>
(pour le texte en rose, avec une valeur +3)
<font color="#ff6600" size=+4><i>Bonjour !</br>
(pour le texte orange, en gros, avec une valeur +4, en italique)
<font color="#0066ff" size=-1><strong>Bonjour !</br>
(pour le texte bleu ciel, avec une valeur -1 et en caractère gras)
<font color="#00CCff" size=+1<i>; font face=2Comic Sans Ms">Bonjour !</br>
(pour le dernier texte en turquoise, une valeur +1, en italique et un face Comic Sans MS qui n'est pas dans l'éditeur
de fr.gd)
__________________________
Voici les codes du second exemple, avec mon design FLASH :
Pour la deuxième boîte de droite : texte en noir, en gras, sans valeur particuliere ajoutée :
<strong>Bonjour ! Ceci est un test pour le tuto que je suis en train de créer. (Notez que je ne ferme pas la balise
</strong> parce que je veux ma phrase suivante également en gras. Sinon, je devrais la fermer.)
Dans la seconde phrase, la valeur est de +1, caractères mis en italique et en gras :
<font size=+1><i>Ceci est un test pour le tuto que je suis en train de créer.</i> (Notez cette fois que j'ai fermé
la balise </i> pour que la phrase suivante, s'il y en avait une, ne soit pas en italique.)
Dans la troisième boîte de droite : texte de couleur différente et en gras, sans valeur particulière ajoutée :
<font color="#ff00ff"><strong>Test du code html
Dans la quatrième boîte : texte de couleur différente (en bleu), sans valeur particulière ajoutée :
<font color="#280E88">Test du code html
Dans la cinquième boîte : texte en gras, d'une valeur +4, en italique, et d'un face et d'une couleur différents :
<font face="Comic Sans MS" color="#cc0000" size=+4><strong><i>Test du code html
_________________________________________________________________
PARTIE 3 : POUR AGIR SUR LE TEXTE DES EXTRAS EN GÉNÉRAL
Les extras testés sont les suivants : formulaire de contact, livre d'hôte, compteur et galerie.
POUR L'EXTRA COMPTEUR :
Si vous désirez les caractères de votre compteur en gras ou une valeur supérieure à celle déjà en
place par défaut (ce qui est très petit et plus ou moins lisible), il faudra employer soit la balise de
style <b> (pour le gras), soit la balise et son attribut suivant <font size=+1>, avant d'y ajouter
votre texte dans la case où il y a écrit : "texte avant le compteur". Ne pas oublier la sauvegarde
de vos données.
Exemple 1 : <b>Nombre de visiteurs ("Nombre de visiteurs" est le texte que
j'ai choisi pour mon site.) :
Exemple 2 : <font size=+1>Nombre de visiteurs :
Prenez soin de ne pas fermer la balise <b> ou la balise <font> après votre texte (le mot "visiteurs"
pour mon exemple); car, autrement, l'utilisation du tag de fermeture </b> ou </font> remet par
défaut les attributs de départ, et que, par le fait même, la suite du texte (ex.: le nombre de visiteurs
et celui des hits que vous ne voyez pas dans cette case mais qui apparaît dès l'ouverture de votre
page d'accueil) serait de très mauvais goût. L'exemple suivant le démontre très bien.
Regardons maintenant comment l'on peut encore manipuler les codes. Dans l'exemple 4, avant même
d'insérer du texte dans la case où c'est écrit "texte après le compteur", là je peux fermer ma balise
</font> si je veux que la suite du texte de cette case revienne à la normale.
Exemple 4 :
Maintenant, à l'inverse, et toujours au début du texte de cette deuxième case, je peux ouvrir une balise
<font> si elle n'a pas été ouverte dans la première case. À noter que vous pouvez intervenir sur le size
et le face. L'exemple 5 démontre cette manipulation.
Exemple 5 :
Voir un exemple sur gif-transparent : www.gif-transparent.fr.gd (si vous ne voyez pas d'image)
________________________________
À présent, traitons de la page des statistiques, pour ceux qui ont choisi l'option de la montrer. Dans la
dernière case, en bas, où il est écrit "texte devant les statistiques", j'ai choisi d'entrer le code suivant,
dont vous aurez un aperçu dans l'exemple 6 :
<font face="Comic Sans MS" color="#0066ff" size=+2><b>Merci de votre passage.</font><font face="Arial" color="#ff00ff" size=+1><b>
Exemple 6 :
Si l'image n'apparaît pas et que vous voyez un x rouge, cliquez sur ce lien pour voir l'exemple : www.gif-transparent.fr.gd/statistiques.htm
À remarquer que j'ai fermé le tag </font> tout de suite après mon texte. Pourquoi ? Parce que j'ai ouvert une
autre balise <font>, avec un face et un size différents de mon texte pour le mot "Mois".
Dans l'image suivante, le tag de fermeture n'a pas été appliqué, et le code demeure le même pour le
texte devant les statistiques que pour le mot "Mois".
Exemple 7 :
Dans l'exemple 8, le tag de fermeture a été appliqué tout de suite après mon texte devant les statiques;
ce qui a pour effet que le mot "Mois" reprend son allure par défaut.
Exemple 8 :
Voici cet autre exemple, avec, cette fois, mon design FLASH de service-design. L'exemple 9 porte sur le
tag de fermeture </strong>. S'il est appliqué après avoir inséré mon code et mon texte devant les
statistiques, le mot "Mois" reprend son allure par défaut. S'il n'est pas appliqué, ce même mot garde la
même allure que mon texte devant les statistiques :
Exemple 9 :
Notez que le texte de mon compteur est centré parce que le code à cet effet a déjà été inséré sous
"texte au-dessus du design" dans mes réglages avancés (revoir la première partie de ce tuto). À souligner
aussi que les tests ont portés sur les designs FLASH et COLOURFUL. Je présume que ces codes doivent
également fonctionner sur les autres designs.
_______________________________________________________________________________
POUR L'EXTRA FORMULAIRE DE CONTACT
Prenons par exemple l'extra "Formulaire de contact", dont vous voulez changer la couleur du texte, sa
dimension et sa police. Ici l'exemple se porte sur le design COLOURFUL. Vous allez dans votre boîte de
construction, cliquez sur "éditer des extras", puis cliquer sur "Formulaire de contact". Allez à "Texte devant
le formulaire de contact".
Dans mon exemple, j'ai voulu un face Verdana, de couleur orangé, en gras et en italique, et un size
suffisamment grand, mais sans exagération. En voici le code:
<font face="Verdana" color="#ff6600" size=-1><strong><i>Votre texte ici.
Exemple 10 :
Notez que le code n'agit pas sur la suite du texte pour le design COLOURFUL, bien que j'aie laissé ouvert
le tag <font>. Ainsi donc, les mots placés devant l'avatar et les champs de saisi demeurent avec ses
attributs de départ.
Par ailleurs, avec le design FLASH, il n'en est pas de même. Dans l'exemple suivant, je suis intervenue sur la
couleur, le face, le size et le style de la police. Aussi, après mon texte, je n'ai fermé aucune balise. C'est
pourquoi les mots avant mon avatar et ceux devant les champs de saisi conservent la même allure que mon
texte devant le formulaire de contact.
Exemple 11 : (en vert fluo)
Dans l'exemple suivant, j'ai remis en blanc mon texte, car c'est le blanc qui domine dans mon design FLASH.
Voici donc le code que j'ai placé dans la case "Texte devant le formulaire de contact" :
<font face="Comic Sans MS" color="#ffffff" size=+1><strong>Prière d'inclure votre nom ainsi que votre
adresse email pour que l'on puisse vous rejoindre. Merci.</strong>
Exemple 12 : (en blanc)
À remarquer que la seule balise de fermeture est </strong>. Ainsi la suite du texte conserve la couleur,
le size et le face de mon code, mais sans le style gras. Avec mon size +1, j'ai jugé qu'il n'était pas nécessaire
de conserver les caractères en gras pour les mots devant l'avatar ainsi que devant les champs de saisi, car le
tout demeure très lisible.
NOTE : en insérant le tag de fermeture </font>, je remets la taille, la couleur et le face tels qu'ils étaient à
l'origine, pour la suite du texte de ma page.
___________________________________________________________________
POUR L'EXTRA LIVRE D'HÔTES
Pour intervenir sur le "Livre d'hôtes", vous allez dans votre boîte de construction, cliquez sur "éditer des
extras", puis cliquer sur "Livre d'hôtes" Allez à "Texte devant les commentaires".
Pour le design COLOURFUL, j'ai mis le code suivant afin d'intervenir sur le face, la couleur et le size.
Autrement, les attributs de départ affichent une police qui ne cadre pas avec celle de mes autres pages,
que la couleur noire initiale est très peu visible (qui fait comme gris pâle), par le fait même, presque
pas lisivle; que le size initial fait comme du très très small.
<font face="Comic Sans MS" color="#ff00ff" size=+1><strong>Votre visite est très appréciée, et nous
vous en remercions. Par ailleurs, il nous ferait plaisir de recevoir tout commentaire constructif à propos
de notre site. Cela aide à son amélioration, mais encore, encourage les créateurs d'aller encore plus en
avant. Merci de votre bienveillance et de votre coopération.
Notez que le fait de laisser le tag <font> ouvert, n'a aucun effet avec ce design, tout comme c'était le
cas avec l'extra "Formulaire de contact".
Exemple 13 :
Passons au design FLASH. Tout comme pour les autres extras. Dans le prochain exemple, j'ai choisi une
police de couleur blanche pour agencer cette page à mes autres pages. Comme balise de style, je n'ai
employé que <strong>, que j'ai d'ailleurs fermée après mon texte. Ce ayant pour effet que les mots
placés devant mon avatar et ceux devant les champs de saisi ne sont plus en gras, mais comme à leur
point de départ, quant au style. Voici le code:
<font color="#ffffff"><strong>Nous apprécions votre passage sur notre site et vous en remercions.
Vous avez des commentaires constructifs à formuler? Il ne faut surtout pas vous en priver.</strong>
Exemple 14 :
Dans le prochain exemple, je n'ai pas fermée la balise de style après mon code et mon texte. Ce qui a
pour effet que les mots placés devant mon avatar, ceux devant les champs de saisi ainsi que ceux à
l'intérieur du champ de saisi (dont les commentaires) demeurent en caractères gras.
<font color="#ffffff"><strong>Nous apprécions votre passage sur notre site et vous en remercions.
Vous avez des commentaires constructifs à formuler? Il ne faut surtout pas vous en priver.
Exemple 15 :
________________________________
POUR L'EXTRA GALERIE
Dans ce qui suit, je n'aborderai que le design FLASH, car les codes ne fonctionnent pas pour le COLOURFUL.
Dans l'extra "Galerie", à la case "texte d'explication sur les pages d'aperçu", j'ai inséré en haut de la page
le titre "Mes albums" et ce code devant, qui me permet d'avoir le même face que dans mes autres pages,
aux caractères de couleur blanche et un size d'une valeur supérieure à celui par défaut, et au style gras,
sans fermer aucune balise :
<font face="Comic Sans MS" color="#ffffff" size=+1><strong>Mes albums
Exemple 16 (s'il n'y a pas d'image, cliquer sur ce lien : www.service-design.fr.gd/Galerie/index-htm) :
Vous pouvez constater qu'aucun code ne fonctionne ici, dans "texte d'explications sur les pages d'aperçu.
Peut-être est-ce dû à cause que "Galerie" qui semble être à la fois une page dans mon navigateur et dans
mon menu, est inscrit comme une sous-page dans ma page de réglage de cet extra.
Par contre, il en est autrement dans "texte d'explication sur les pages des catégories". Comme titre, j'ai
"Mes photos" et ce code placé devant, qui me permet la même chose que dans l'exemple précédant, sauf
que j'ai ajouté le style italique, et que j'ai fermé les balises de styles </i></u> après mon texte, cela pour
que le texte des notes de bas de pages, les titres et l'explication de chaque image ne soient ni souligné ni en italique :
<font face="Comic Sans MS" color="#ffffff" size=+1><strong><i><u>Mes photos</i></u>
Exemple 17 :
Voici cet autre exemple. Dans ce qui suit, j'ai conservé le même face et la même couleur que l'exemple 17,
seul a changé le size qui en est nettement supérieur. J'ai fait ce test pour vous montrer que l'on peut manier
les codes selon ses goûts.
Exemple 18 :
L'exemple suivant montre un face différent pour les titres des photos et le reste du texte, comme l'explication
sous les photos et les notes de bas de page. Pour ce faire, il faut fermer le tag </font> juste après le titre du
haut de page, puis ouvrir à nouveau la balise <font> pour ainsi intervenir sur le reste du texte.
<font face="Comic Sans MS" color="#ffffff" size=+3><strong><i><u>Mes photos</font><font face="Arial" color="#ffffff" size=+1></i></u>
Exemple 19 :
Dans votre extra Galerie, sous l'onglet "éditer album", vous pouvez également intervenir en allant à "Données
générales de l'album" (si toutefois vous avez déjà créé un album). Dans la case "Titre de l'album", comme je
voulais mes titres en gras et en blanc, j'ai inséré ce code :
<font color="#ffffff"><strong>Ciel
Notez qu'il n'est pas nécessaire de fermer les balises.
À la case "Descrition de l'album", j'ai inséré le même code, afin que les descriptions aient la même apparence :
<font color="#ffffff"><strong>Voici divers cieux
Exemple 20 :
Dans cette même image, à droite, vous pouvez constater un petit changement dans mon second album, où j'ai
augmenté la valeur pour une qui soit supérieure, cela pour vous montrer différentes manipulations qu'on peut
y faire. J'ai donc inséré ce code :
<font color="#ffffff" size=+1><strong>Animaux (dans la case "Titre de l'album")
<font color="#ffffff" size=+1><strong>Voici divers animaux (dans la case "Description de l'album")
Finalement, pour ceux qui n'ont pas encore publié d'album et ayant l'intention d'en insérer une, vous allez plutôt
sous l'onglet "Nouvel album", et à l'étape 1 de 3, vous insérez votre code dans la case "Titre de l'album" plus le nom
de celui-ci. Et vous procédez de même pour la case "Description de l'album" (code+description).
_______________________________________
Notez qu'il est possible d'entrer un code unique (code CSS) dans la case "Ajouter au-dessus du design". Cela
fait en sorte que tous vos extras porteront le même font avec les attributs y étant rattachés dans votre code.
En agissant ainsi, vous ne pouvez plus intervenir sur les extras séparément. C'est pourquoi j'ai préféré les
traiter un à un, si l'on veut intervenir avec des fonts différents pour chacun d'eux.
______________________________ FIN____________________________
Dernière édition par service-design le 26.10.2008, 11:53; édité 29 fois
|
|
