~ Dragon Age RPG
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Forum de jeu de rôle sur l'univers de Dragon Age, jeu du studio Bioware. Affilié à Mass Effect RPG
 
AccueilRechercherDernières imagesPortail Bioware RPGS'enregistrerConnexion
Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

 

 [Tuto] Un peu de mise en page

Aller en bas 
AuteurMessage
Le Maître du jeu
Personnage non-joueur / Le démon du jeu.
Personnage non-joueur / Le démon du jeu.
Le Maître du jeu


Messages : 128
Date d'inscription : 14/01/2011
Exprimez-vous! : Je suis la voix du destin

[Tuto] Un peu de mise en page Empty
MessageSujet: [Tuto] Un peu de mise en page   [Tuto] Un peu de mise en page I_icon_minitimeMar 18 Jan - 9:59

Merci à Koss'Mos Vas Jalin du forum MERPG pour ce tuto !

Comme maman Koss se fait un peu chier, elle a décidé de partager un peu ses connaissances du BBCode, HTML et CSS pour votre plus grand plaisir. Elle aurait bien balancé du javaScript avec, mais il semble que forumactif ait désactivé cette option.

C'est kwa le BBCode?
Le BBCode c'est ces balises bizarres avec des mots encapsulés dans des [][/] qui permettent d'égayer un peu vos messages en passant le texte en gras, en italique, en couleur, d'afficher des images, des URL... il faut savoir que ces balises ne sont qu'une traduction de l'HTML et que, par conséquent, on peut faire la même chose avec des balises HTML (qui elles entourent les mots de <>). Vous pouvez même faire plus de choses avec l'HTML mais attention, il faut décocher l'option "désactiver le HTML" dans votre profil/message pour que le code soit interprété correctement.

Les balises basiques en BBCode
Pour mettre du texte en gras:
Code:
[b][/b]
Pour mettre du texte en italique:
Code:
[i][/i]
Pour souligner du texte:
Code:
[u][/u]
Pour barrer du texte:
Code:
[strike][/strike]
Il existe d'autres balises notamment pour afficher du texte défilant :
Code:
[scroll][/scroll] et [updown][/updown]
Mais vous pouvez découvrir tout cela en testant les boutons étranges situés au-dessus de la division de texte, celle où vous saisissez vos messages.

La couleur
Pour colorer votre texte, il suffit de glisser les mots à colorer entre deux balises BBCode ou HTML en précisant la couleur au format souhaité. La couleur peut-être un mot-clef, un code hexadécimal ou un code rvb. Par exemple, pour la couleur rouge on aura soit le mot "red", soit "#F00" ou encore "rgb(255,0,0)", ce qui est interprété de manière identique par votre navigateur. Il existe différent mot-clefs en plus des couleurs traditionnelles, par exemple lightblue, aqua, silver... l'hexadécimal et le rvb offrent un plus grand choix de teintes que vous pouvez retrouver dans n'importe quel logiciel d'édition d'image ou sur un site nuancier.

Pour colorer un texte avec du BBCode, vous pouvez utiliser la balise:
Code:
[color=CODE_COULEUR][/color]
En HTML on utilisera plutôt :
Code:
<span style="color:CODE_COULEUR"></span>
<div style="color:CODE_COULEUR"></div>
La balise span étant utilisée pour une ligne de texte et div plutôt pour un paragraphe.

Alignement du texte
On peut faire à peu près tout et n'importe quoi avec du texte, le centrer, le justifier, ajouter une/plusieurs marge(s)...

En BBCode, on utilisera les balises suivantes pour changer l'alignement du texte :
Code:
[center]Mon texte est centré[/center]
[left]Mon texte est aligné à gauche[/left]
[right]Mon texte est aligné à droite[/right]
[justify]Mon texte est justifié[/justify]
La balise préférée de maman Koss étant bien sûr la balise justifiée, qui aligne tout comme dans un beau bouquin avec des vraies pages.

L'équivalent HTML maintenant:
Code:
<div style="text-align:center">Mon texte est centré</div>
<div style="text-align:left">Mon texte est aligné à gauche</div>
<div style="text-align:right">Mon texte est aligné à droite</div>
<div style="text-align:justify">Mon texte est justifié</div>
Pour aligner tout votre message, vous devrez enfermer le texte complet dans l'une des balises précédentes.

Ajout de marges
Si vous voulez ajouter une marge à votre message, il existe plusieurs techniques plus ou moins esthétiques. Par exemple, papa Ellhann triche (bouh le vilain) en utilisant une balise BBCode, la balise de listage. Cette balise est normalement faite pour faire une liste à puce, où chaque élément est décalé sur la droite, ce qui nous donne donc un alinéa sur tout le texte, comme ci-dessous:
    Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.

L'équivalent en BBCode est (sans la couleur):
Code:
[list]Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare  exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.[/list]
Note: Si vous choisissez cette méthode mais que vous cliquez sur le bouton "list" en haut, il vous ajoutera une puce symbolisée par la balise [*]. Vous pouvez l'enlever si vous ne voulez pas afficher le gros point noir.

Maman Koss préfère lorsqu'il y a une marge des deux côtés du texte, alors elle utilise une méthode barbare avec les tableaux, ou les divisions, la seconde option étant plus simple je vous épargnerai le bidouillage. Donc, pour avoir ça en HTML:

Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.


On utilise le code suivant:

Code:
<div style="margin-left:30px; margin-right:30px;">Mass Effect est un jeu de rôle (RPG) de Science-fiction développé par BioWare  exclusivement sur XBox360 et maintenant sur PC. La version du jeu PC est disponible depuis le 5 juin 2008 en Europe et en France. Le jeu démarre en l'an de grâce 2183 et vous incarnez un humain, soldat d'élite, nommé Commandant Shepard.</div>
Vous remarquerez le mot-clef "margin" qui indique le décalage de toute la division, "left" et "right" qui indiquent de quel côté décaler le texte et les chiffres qui représentent la valeur du décalage. Ici on décale le texte des deux côtés de 30 pixels. Vous pouvez modifier cette valeur pour diminuer/augmenter la marge ou utiliser des pourcentages. Vous pouvez aussi ajouter une marge en haut et en bas du message en ajoutant un "margin-top" et un "margin-bottom", dans ce cas n'oubliez pas les ";" qui séparent chacune de ces indications. Si vous assignez deux fois une valeur à un même mot-clef, seule la dernière valeur sera prise en compte.
Revenir en haut Aller en bas
https://dragon-age-rpg.forumsrpg.com
Le Maître du jeu
Personnage non-joueur / Le démon du jeu.
Personnage non-joueur / Le démon du jeu.
Le Maître du jeu


Messages : 128
Date d'inscription : 14/01/2011
Exprimez-vous! : Je suis la voix du destin

[Tuto] Un peu de mise en page Empty
MessageSujet: Re: [Tuto] Un peu de mise en page   [Tuto] Un peu de mise en page I_icon_minitimeMar 18 Jan - 10:00

Les fioritures qui servent à rien
L'avantage du CSS, c'est que vous pouvez faire à peu près tout et n'importe quoi, et à peu près n'importe comment. Je vais lister ci-dessous les balises qui peuvent vous être utiles pour donner de la gueule à vos messages, en montrant, comme auparavant, l'équivalent en BBCode et en CSS (s'il existe).

Vous pouvez changer la police du texte. Évidement, cela implique que vous connaissiez le nom de la police et que l'utilisateur l'ait installée sur sa machine. Quand vous cliquez sur le bouton [A] (au-dessus de la zone de saisie des messages) Forumactif vous propose les polices de base, qui sont normalement affichables par tous les forumeurs.

On utilisera les balises:
Code:
[font=NOM_DE_LA_POLICE]Mon texte en Comic Sans Ms[/font]
<span style="font-family:'NOM_DE_LA_POLICE'">Mon texte en Comic Sans Ms</span>
De la même manière, vous pouvez changer la taille du texte. Cette taille peut prendre différentes valeurs, généralement on utilise une taille en pixels, sinon en pourcentage.

Code:
[size=18]Mon texte en grand[/size]
<span style="font-size:18px">Mon texte en grand</span>
C'est tout ce qui me vient à l'esprit pour le BBCode. Mais le CSS offre bien d'autres possibilités...

Mon texte en majuscules: on utilisera "font-variant" avec le mot-clef "small-caps". Il y a d'autres manières de procéder, avec des rendus différents, mais c'est ma préférée. Ce qui nous donne en code:
Code:
<span style="font-variant:small-caps">Mon texte en majuscules</span>

Mon texte encadré: vous pouvez encadrer le texte, ce qui peut être utile pour un titre. Pour cela on utilise "border" en précisant la taille de la bordure (ici 1px, vous pouvez aussi utiliser un mot-clef: thin par exemple) et son type (solid pour un trait, dotted pour des points et dashed pour des pointillés). Vous pouvez aussi ajouter une couleur (en hexa, rvb ou avec un mot-clef comme pour la couleur du texte). Dans l'exemple j'ai utilisé le code suivant (notez l'utilisation d'un padding qui décale le texte pour que la bordure ne soit pas collée aux lettres) :
Code:
<span style="border:1px solid; padding:3px;">Mon texte encadré</span>

Mon texte souligné en pointillé: en fait, j'utilise juste un "border" mais en précisant le mot "bottom" pour n'afficher que le bord du dessous du texte.
Code:
<span style="border-bottom: 1px dotted">Mon texte souligné en pointillé</span>

Mon texte espacé: on utilise "letter-spacing" suivi d'une valeur en pixels ou en pourcentage. J'ai la flemme d'essayer mais "word-spacing" doit marcher aussi, pour espacer les mots et non les lettres.
Code:
<span style="letter-spacing:10px">Mon texte espacé</span>

Mon texte clignotant: on utilise "text-decoration" avec le mot-clef "blink". A noter que "text-decoration" peut servir à d'autre chose comme souligner, barrer du texte, etc.
Code:
<span style="text-decoration:blink">Mon texte clignotant</span>

Mon texte surligné: On ajoute un fond au texte avec "background-color" en précisant une couleur en hexa (comme pour la couleur du texte vous pouvez utiliser un mot-clef ou un code rvb). Il est aussi possible d'ajouter une image, mais je vais pas m'attarder là-dessus. Pour l'exemple j'ai écrit :
Code:
<span style="background-color:#000">Mon texte surligné</span>
Revenir en haut Aller en bas
https://dragon-age-rpg.forumsrpg.com
Le Maître du jeu
Personnage non-joueur / Le démon du jeu.
Personnage non-joueur / Le démon du jeu.
Le Maître du jeu


Messages : 128
Date d'inscription : 14/01/2011
Exprimez-vous! : Je suis la voix du destin

[Tuto] Un peu de mise en page Empty
MessageSujet: Re: [Tuto] Un peu de mise en page   [Tuto] Un peu de mise en page I_icon_minitimeMar 18 Jan - 10:01

Les tableaux
Les tableaux, ça n'a rien de compliqué une fois que c'est clair dans votre tête, même si à première vue on pensera souvent "OH PUTAIN C'TE BORDEL". Je vais aller au plus simple: le code ne sera pas toujours très rigoureux mais on s'en fou, l'objectif c'est que ça claque à l'écran. Résumé: un tableau contient des lignes. Une ligne contient une à plusieurs cellules. Il est possible de fusionner deux cellules ou plus entre elles, horizontalement ou verticalement. Il est possible de fixer une taille au tableau et aux cellules.

Voilà le tableau dit "de base" :

Ligne 1/Cellule 1L1/C2
L2/C1L2/C2

Et le code associé :
Code:
[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td]L2/C1[/td][td]L2/C2[/td][/tr][/table]
Comme vous pouvez le constater, un tableau est représenté par une balise "table", il comprend plusieurs lignes (ici deux), les balises "tr". Les lignes ont dans l'exemple chacune deux cellules, les balises "td". Vous pouvez ajouter autant de cellules et de lignes que vous le désirez mais attention, s'il n'y a pas le même nombre de cellules dans chaque ligne, vous obtiendrez un tableau déformé comme ci-dessous :

Ligne 1/Cellule 1L1/C2
L2/C1
Pour y remédier, il faut fusionner les cellules à l'aide des mot-clefs "rowspan" (fusion verticale) et "colspan" (fusion horizontale). Il faut les ajouter dans la cellule (balise "td") que vous voulez élargir, en précisant de combien de cellules. Par exemple pour élargir la cellule L2/C1 d'une cellule horizontalement on écrira :

Code:
[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td colspan="2"]L2/C1[/td][/tr][/table]
Ligne 1/Cellule 1L1/C2
L2/C1
Pour une fois, le code HTML est exactement le même (remplacez juste les [] par <>). Dans sa grande mansuétude, Forumactif met à disposition un bouton "Insérez un tableau" (toujours dans la barre d'édition de message) qui vous évitera le casse tête du débutant. Mais avec l'explication ci-dessus, j'espère que vous comprendrez mieux le code généré.

Taille des tableaux
Dans les exemples ci-dessus, j'ai mis une taille fixe au tableau qui dans le cas contraire prend la largeur du texte. C'est possible soit en ajoutant un paramètre "width" au tableau comme dans l'exemple, soit en ajoutant un style comme dans le tuto précédent. Par exemple pour que votre tableau prennent la largeur du message on écrira :
Code:
[table border=1 style="width:100%;"]...[/table]
Ce qui donnera :
Cellule 1Cellule 2
Pour qu'il prenne la moitié de la largeur du message, ce sera :
Code:
[table border=1 style="width:50%;"]...[/table]
Ce qui donnera :
Cellule 1Cellule 2
...et là, c'est la panique, le tableau n'est pas centréééé.

Pour centrer un tableau, il suffit d'ajouter une marge automatique de chaque côté du tableau en utilisant le paramètre "margin" vu précédemment.
Code:
[table border=1 style="margin-left:auto; margin-right:auto;"]...[/table]
Cellule 1Cellule 2
Évidemment vous pouvez déterminer la longueur du tableau avec le paramètre "height". Vous pouvez aussi, en plaçant les paramètres dans une balise td, modifier la taille d'une cellule. Si je veux que la première colonne de mon tableau fasse presque toute la page et laisser une cellule riquiqui sur le côté, j'écrirai le code suivant :
Code:
[table width=100% border=1][tr][td style="width:95%"]Cellule 1[/td][td style="width:5%"]C2[/td][/tr][/table]
Cellule 1C2
Important: pour la taille des cellules d'un tableau, il suffit de paramétrer celles de la première ligne pour que les suivantes prennent la même largeur. Si je mets une largeur de 50px à la première cellule du tableau, toutes les cellules de cette colonne feront 50px. Donc dans l'exemple précédent, si je rajoute une ligne toute bête (sans préciser la taille) j'obtiendrai le tableau suivant :

Cellule 1C2
Cellule 1'C2'
Revenir en haut Aller en bas
https://dragon-age-rpg.forumsrpg.com
Contenu sponsorisé





[Tuto] Un peu de mise en page Empty
MessageSujet: Re: [Tuto] Un peu de mise en page   [Tuto] Un peu de mise en page I_icon_minitime

Revenir en haut Aller en bas
 
[Tuto] Un peu de mise en page
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
~ Dragon Age RPG :: Archives de la chantrie :: ◄ Antre des Maitres de Jeu-
Sauter vers: