Forum Heroes' Chronicles
http://forum.heroeschronicles.nainwak.org/phpbb3/

Embellir sa Fiche de personnage [Ancien tutorial]
http://forum.heroeschronicles.nainwak.org/phpbb3/viewtopic.php?f=5&t=10061		 Page 1 sur 2
Auteur:  [Vamps]Seytahn [ Mer 07 Déc, 2005 20:54 ]
Sujet du message:  Embellir sa Fiche de personnage [Ancien tutorial]
Edit : le HTLM ne fonctionnant plus depuis plusieurs mois pour les fiches de perso i-g, plus la peine d'essayer ces balizes. ;)

Suite à la proposition de Prince Noir (chéri de ces dames), voici quelques codes :



1- Pour inclure une calligraphie :

Exemple :

<font face="Lucida Calligraphy">Texte</font>

n.b. : "Lucida Calligraphy" est une "police" parmi tant d'autres, voici un site qui vous permet de télécharger des calligraphies médiévales sur votre ordinateur :
http://www.dafont.com/theme.php?cat=401

Une fois que c'est téléchargé, si ma mémoire est bonne, vous "copiez" la calligraphie qui se trouve dans la doc des fichiers téléchargés, vous allez à panneau de Configuration, >> police, et vous la "collez".
Ensuite, comme je viens de le faire pour tester, vous ouvrez votre fiche de perso i-g, et vous mettez le nom de la calligraphie choisie ( là j'ai mis "Porcelain", une calligraphie que j'avais téléchargé)
En fait, seuls ceux qui ont déjà téléchargé la même calligraphie que celle qui apparait dans votre fiche de perso, pourront la voir. :wink:

Pour mettre une calligraphie colorée, à caractère plus gros, avec gras :

- colorée : color="#CC9933"

- Caractères grossis : size="2"

- Gras : <b>texte</b>

Ce qui donne :

<font face="Lucida Calligraphy"size="2" color="#CC9933"><b>Texte</b></font>


2- Une image centrée :

<CENTER><IMG SRC="http:url de l'image.jpg"></CENTER>



3- Titres interactifs ( qui renvoient au titre de l'épisode édité plus loin dans le texte) :

(exemple : pour aller directement à l'épisode de votre choix, cliquer sur le titre, qui est un lien inter-actif ^ ^)


<A HREF="#Titre1">TITRe</A>

<A HREF="#Titre2">TITRE</A>




TITRE gras et coloré et interactif :
<A HREF="#Titre1"><b><font size=2 color="#CC0066"><b>TITRE</b></font></A>


Le Titre concerné qui réceptionne :
<A NAME="titre1">Titre</A>


4- Codes HTML :
Un site simple que m'avait donné Busard pour utiliser ces codes :

http://www.scriptzone-fr.com/cours/html/guidehtml.htm



5- Codes Couleurs :
Un site pour récupérer les codes de gammes de couleurs :
http://www.alaide.com/outils_gen_couleur.php#



6- Fond musical :
Pour héberger une musique, si une âme charitable pouvait donner une info ^^ :D
Auteur:  Whoami [ Mer 07 Déc, 2005 21:01 ]
Sujet du message: 
Aller pour la peine je te le lock et y met en post-it :D

Si tu veux délocker pour ajouter des trucs, préviens un modo ;)

Merci pour ce zoli petit tuto ;) :D


Ps : Pour la musique, j'ai un petit espace perso en bois sur un hébergeur tout pourri, mais si ça peut te dépanner en attendant ;)
Auteur:  [Vamps]Seytahn [ Sam 04 Fév, 2006 23:48 ]
Sujet du message: 
Je ne sais pas où le mettre donc je le mets là :*


Tout sur les bannières et avatars sur les forums :

http://forums.jeuxonline.info/showthrea ... adid=42492

( je voulais le mettre dans le topic d'Argowal sur les avatars mais il est fermé).
Auteur:  ShAoDuManOIr [ Dim 19 Mars, 2006 9:48 ]
Sujet du message: 
Coucou,

Pour ce qui est de la police ( ou calligraphie comme vous préférez ) je pense qu'il vaut mieux faire une image en mettant du texte dessus. Je m'explique : si tu mets ta police exemple : porcelain, seuls les personnes qui l'auront sur leurs pc dans le dossier c://windows/fonts pourront la voir comme telle. Sinon celle-ci sera remplacée par une police de base type arial. Par contre, si tu crées une image dans photoshop ou paintshop ou même paint et que tu mets ton texte dessus, tout le monde pourra reconnaître ton texte en tant qu'images. :D

Pour ce qui est d'inclure un fond musical : <embed src="ton_fichier.mp3 ou autre" autostart="true" loop="false" hidden="true"></embed>
Auteur:  chatissimus [ Dim 19 Mars, 2006 19:21 ]
Sujet du message: 
Je me permet de faire un petit tuto pour utiliser les css dans les fiche perso plutot que les element font :P

Généralité sur la mise en page.


1. Englobons la fiche.

On va utiliser un élément div elle ne fait rien , elle nous sert pour englober l'ensemble de la fiche (ce qui nous permettra d'y appliquer un style)

on aura donc quelque chose du genre :

Code:
<div>

tout le texte de la fiche

</div>



2. Un titre.

il y a plusieur taille de titre

Code:
<h1>Grand titre</h1>
<h2>Titre un peu moins grand</h2>
<h3>Sous titre</h3>


3. La paragraphes.

pour définir un paragraphe on utilise la balise p

exemple

Code:
<p>

le paragraphe

</p>



Quelques balises suplémentaires.

1. Les listes.

pour définir une liste

exemple une liste non ordonée

Code:
<ul>
<li> premier élément</li>
<li> second élément</li>
<li> troisiemme élément</li>
</ul>


exemple une liste ordonée, les éléments serons numéroté de 1 à ...

Code:
<ol>
<li> premier élément</li>
<li> second élément</li>
<li> troisiemme élément</li>
</ol>


2. la balise span.

la balise span ne fait rien comme div :D elle permet d'appliquer un style a un ensemble de caractere (on le vera plutard)

exemble

Code:
blabla <span> blop blop </span> plop


Résumé.

la trame doit donc ressembler a ca

Code:
<div>
<h1>Mon titre</h1>
<h2>titre 1</h2>
<p>
paragraphe 1
</p>

<h2>titre 2</h2>
<p>
paragraphe 2
</p>

......

</div>




La mise en forme.


pour mettre en page nous utiliserons l'attribut style qui peut prendre un grand nombre de parametre

cette attribut peu etre mis dans toutes les balise vues si dessus

exemple :

Code:
<div style="text-align:center; color:#fff; font-style:italic;"> texte </div>




a. appliquer une police à la fiche

on va utiliser font-family, font family recoit les police dans l'ordre de préférence dans l'exemple si dessous le navigateur utilisera Time new roman, si elle n'est pas sur le PC il utilisera Time (version libre de time new roman) et si elle n'existe pas il utilisera la police par defaut en serif.

les police par defaut sont :
serif = une famille de police avec empattement, (time, geogia)
sans-serif = une famille de police sans empattement, (arial , bitstream)

Code:
<div style="font-family:'Times New Roman',Times,serif;">

tout le texte de la fiche

</div>


b. aligner le texte de la fiche

text-align

avec les attribut :
left = aligner à gauche
center = centrer.
right = aligner à droite.
justify = justifier.

exemple:


Code:
<p style="text-align:justify;">

un paragraphe

</p>


c. mettre en évidence des bouts de texte


la balise strong permet de mettre en évidence, en gras en général, un groupe de mot

la balise em permet de metre en style emphasé (italique) un groupe de mot

exemple
Code:
blabla <strong>coucou</strong>  plop <em>contreplop</em>


d. mettre en gras / fin un texte

font-weight

avec les attributs:
bold = gras.
bolder = très gras.
lighter = plus fin

exemple:
Code:
<p style="font-weight:bold"> paragraphe</p>


e. mettre en italique un texte

font-style:italic

exemple:
Code:
<p style="font-style:italic"> paragraphe</p>


f. mettre en couleur un texte

color

on peu lui mettre en attribut soit un des nom de couleur standard :
bleu , black , grey ...

soit le code hexadecimal de la couleur : #xxxxxx
si vous ne connaissez pas ce code un petit logiciel: la boite a couleur

exemple

Code:
plop <span style="color:blue">en bleu</span>  <span style="color:#ff0000">en rouge </span>plop


g. Taille du texte

font-size

avec un des parametre suivant:
xx-small =minuscule.
x-small = très petit.
small = petit.
medium = moyen.
large = grand.
x-large = très grand.
xx-large = géant.

exemple

Code:
plop <span style="font-size:large">en bleu</span>


g. Décoration du texte

text-decoration

avec les attributs :
underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant. (ne marche pas sous IE)

exemple

Code:
plop <span style="text-decoration:overline"> texte surligné</span>
Auteur:  chatissimus [ Dim 19 Mars, 2006 19:22 ]
Sujet du message: 
suite ...
[size=0]reservé[/size]
Auteur:  chatissimus [ Dim 19 Mars, 2006 19:22 ]
Sujet du message: 
[size=0]reservé[/size]
Auteur:  ShAoDuManOIr [ Sam 25 Mars, 2006 11:57 ]
Sujet du message: 
Personnelement, je préfère l'utilisation du html basique quand tu es débutant le css paraît peut être un peu complexe ( voir inutile dans les fiches de perso ) après c'est mon avis mais bon le but c'est d'avoir un résultat graphiquement agréable et pas avoir un code hyper-structuré oO d'ailleurs je ne sais pas si les balises span et div sont acceptées dans les fiches persos :?
Auteur:  chatissimus [ Sam 25 Mars, 2006 20:57 ]
Sujet du message: 
ShAoDuManOIr a écrit:
Personnelement, je préfère l'utilisation du html basique quand tu es débutant le css paraît peut être un peu complexe ( voir inutile dans les fiches de perso ) après c'est mon avis mais bon le but c'est d'avoir un résultat graphiquement agréable et pas avoir un code hyper-structuré oO d'ailleurs je ne sais pas si les balises span et div sont acceptées dans les fiches persos :?


pour le moment tu met ce que tu veux dans la fiche ce n'est pas analysé

apres tu fais comme tu veux, je force personne, mais structurer un code ca fais jamais de mal


au passage le CSS est tres basique dans le HTML ... :P
Auteur:  Lord_Nashyx [ Sam 25 Mars, 2006 21:02 ]
Sujet du message: 
Comment fait-on pour mettre un texte et quand on clique dessus, on va plus loin dans le texte ( ou inversément ) ?
Auteur:  Mc Doul [ Mer 05 Avr, 2006 13:49 ]
Sujet du message: 
Lord_Nashyx a écrit:
Comment fait-on pour mettre un texte et quand on clique dessus, on va plus loin dans le texte ( ou inversément ) ?


Cherche des renseignements du coté des ancres (nommées).

Si tu choisis la méthode css (que je recommande):

<a href="#divtest">Texte sur lequel le lien est appliqué</a>

<div id="divtest">Blablabla</div>
Auteur:  fireball951 [ Ven 07 Avr, 2006 11:42 ]
Sujet du message: 
Salut,

Dites, maintenant que le HTML ne marche plus, vous pouvez expliquer comment embellir sa fiche de perso avec du BBcode, svp ? Car ma fiche de perso ne ressemble plus à rien maintenant ! :evil:
Merci.

Au fait, la moitié de la fiche reste normale (la description de la monture) alors que la description du perso montre la liste sans fin de codes utilisés. Est-ce normal ou est-ce un bug ? :?

Merci
Auteur:  Highlander [ Ven 07 Avr, 2006 14:00 ]
Sujet du message: 
*Mettre une image :

[img]url image[/img]


*Mettre de la couleur :

[color=nom_de_la_couleur_comme_avec_html]ton texte[/color]


*Transformer la sélection en lien :

[url=ton_lien]La phrase[/url]


*Juste faire en sorte que l'adresse soit cliquable :

[url]http://ton_url[/url]


*Mettre en italique: [i]phrase[/i]

*Mettre en grase : [b]phrase[/b]

*Mettre en soulignement : [u]phrase[/u]


*Faire apparaitre une image et faire en sorte qu'on puisse cliquer dessus et qu'elle nous amene à un lien choisi :

[url=l'url][img]adresse de l'image[/img][/url]


*Faire une citation :

[quote="nom de celui a cité"]Citation[/quote]
Auteur:  ZigEnfruke [ Ven 07 Avr, 2006 19:56 ]
Sujet du message: 
Y'a moyen de changer la poice d'écriture avec du bbcode ?
Auteur:  Mc Doul [ Sam 08 Avr, 2006 20:14 ]
Sujet du message: 
Pour ceux qui sont intérrésés, j'ai développé un gestionnaire de fiche de perso cet aprem. En effet, nombre d'entres vous devaient être déçu de voir leur fiche de personnage se retrouver sens dessus dessous. Ils vont pouvoir la recréer.

Le html est supporté et j'ai ajouté la possibilité de faire une feuille de style. Beaucoup d'amélioration sont à venir avec notamment l'intégration par défaut d'une feuille de style assez complète pour les mises en forme simples (on peut déjà utiliser les classes "rouge","bleu","vert" par exemple,pour mettre en couleur simplement).

L'interface est encore assez rudimentaire (ainsi que le design, quelques boutons qui se baladent, etc).

Une première version est disponible ici: http://sekikator.free.fr/Crapoutam/

Un exemple: http://sekikator.free.fr/Crapoutam/inde ... udo=McDoul

PS: Comme vous le verrez dans la news, cet outils a été d'abord pensé pour mon clan (la Horde Lettrée, [EwiG]) car nous organisons notre propre concours de fiche de personnage. Mais au vu de la news d'avant hier, il allait être compromis.

S'il s'avère être suffisament plébiscité, peut être pourra-t-il revétir un aspect officiel un jour.
Page 1 sur 2 Heures au format UTC + 1 heure
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/