Partagez | 
 

 Signature codée

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Pain perdu tout chaud

Bons Points (BP) : 493

Voir le profil de l'utilisateur

MessageSujet: Signature codée   Dim 10 Juil - 19:01
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci



>> Les tutos indispensables :
Les bases du html
Les tableaux en html
Des notions de CSS
Faire défiler du texte
Utiliser les iframes

C'est partie ^^

La signature



Tout d'abord, ouvrez un éditeur de texte (type bloc-note ou notepad), et copiez-collez le code suivant

Code:
<html>
   <head>
      <title>Signature</title>
      
<style type="text/css">

le css sera ici
   
</style>

</head>

<body>

le code html de la sign' sera là

</body>
</html>

Enregistrez cette page en "sign.html" (attention à l'extension Wink)

La structure



Ma signature contient un tableau à 1 colonne et 3 lignes :
-> ligne 1 : les liens en haut
-> ligne 2 : l'image
-> ligne 3 : les liens en bas.

Commençons donc par coder ce tableau

Code:
<table>
   <tr>
      <td>La case du haut</td>
   </tr>
   <tr>
      <td>La case du milieu</td>
   </tr>
   <tr>
      <td>La case du bas</td>
   </tr>
</table>

On va ensuite donner à notre tableau un nom d'id et on va ajouter du cellspacing et cellpadding pour éviter d'avoir des espaces entre nos cellules

Code:
<table id="sign" cellpadding="0" cellspacing="0">

et on va donner un nom à chaque case

Code:
<table id="sign" cellpadding="0" cellspacing="0">
   <tr>
      <td id="case_haut">La case du haut</td>
   </tr>
   <tr>
      <td id="case_milieu">La case du milieu</td>
   </tr>
   <tr>
      <td id="case_bas">La case du bas</td>
   </tr>
</table>

Avant de commencer à coder chaque partie (que ce soit pour le contenu ou la mise en page), travaillons le rendu de notre tableau. Dans le css, on va donc indiquer

Code:
table#sign{propriétés;}

Ce code signifie : "voici le style du tableau (table) ayant pour nom d'id (#) 'sign' "

Moi, dans mon exemple, je veux que mon tableau :
-> fasse 400 px de large
Code:
width:400px;
-> ait une bordure marron en pointillé
Code:
border:1px dashed #96774a;
-> ait des coins arrondis
Code:
-moz-border-radius:12px;
   -webkit-border-radius:12px;
   border-radius:12px;
-> ait une couleur de fond beige/marron
Code:
background-color:#eacda3;
-> soit centré sur ma page
Code:
margin:auto;

ce qui me donne

Spoiler:
 

La base est faite. Travaillons maintenant chaque case.

La case du haut



Ici, avant de remplir le contenu de cette case, on va personnaliser sa mise en page. Pour cela, on va indiquer ceci dans le css

Code:
table#sign td#case_haut{propriétés;}

Libre à vous de mettre ce que vous voulez ^^ En ce qui me concerne, j'ai
-> imposer une hauteur de 20px
Code:
height:20px;
-> ajouter un peu de remplissage pour éviter que mon texte ne soit collé au bord
Code:
padding:4px;
-> centrer le texte
Code:
text-align:center;
-> donner une couleur à mon texte
Code:
color:#96774a;
-> ajouter une bordure un peu plus épaisse en bas de ma case
Code:
border-bottom:solid 2px #96774a;

ce qui me donne

Spoiler:
 

Passons maintenant au contenu. Ma case du haut va contenir 4 liens. Je vous rappelle qu'en html, les liens se codent de cette façon :

Code:
<a href="lien">Mon texte cliquable</a>

et si on veut que le lien s'ouvre dans un nouvel onglet, on ajoute target="_blank"

Je code donc mes 4 liens et je les mets dans ma case du haut

Code:
<td id="case_haut"><a href="#" target="_blank">Lien 1</a> - <a href="#" target="_blank">Lien 2</a> - <a href="#" target="_blank">Lien 3</a> - <a href="#" target="_blank">Lien 4</a></td>

Mettons un peu de mise en page sur ces liens. Dans le css il va falloir indiqué :

Code:
table#sign td#case_haut a{propriétés des liens;}

table#sign td#case_haut a:hover{propriétés des liens survolés;}

Et une fois de plus image tuto
Spoiler:
 

J'en ai fini avec cette case Smile

La case du milieu



Ici, j'ai décidé de mettre une image pour ma case du milieu. Ici, 2 solutions :

-> soit vous mettez votre image dans la case en utilisant ce code html
Code:
<img src="lien" alt="mon image" />
-> soit vous le mettez dans le CSS de votre tableau.

Personnellement, j'ai choisi de mettre mon image dans mon css et non directement dans mon tableau. Pourquoi ? De cette façon, je suis sure qu'elle ne va pas déformer mon tableau ^^ Nous allons donc voir ensemble cette solution ^^ On va donc travailler le CSS de la case du milieu

Code:
table#sign td#case_milieu{propriétés;}

J'ai choisi de mettre cette image en fond [clic]. Je vais imposer dans mon css une hauteur (height) ainsi qu'une largeur (width) et je vais aussi centrer en haut mon image.
Je vais aussi mettre un caractère vide dans ma case

Code:
<td id="case_milieu"> </td>

ce qui me donne pour le CSS et le rendu

Spoiler:
 

Si j'avais mis l'image directement j'aurai eu ceci :

Spoiler:
 

La case du bas



Point de vue mise en page, pas de prise de tête : je fais la même chose que ma case du haut, sauf que cette fois, je mets la bordure épaisse en haut.

Code:
table#sign td#case_bas{
   height:20px;
   padding:4px;
   text-align:center;
   color:#96774a;
   border-top:solid 2px #96774a;
   }

Ma case du bas va contenir des liens comme la case du haut ainsi qu'un texte défilant. Ce qui me donne

Code:
<td id="case_bas"><a href="#" target="_blank">Lien 1</a> - <a href="#" target="_blank">Lien 2</a> - <a href="#" target="_blank">Lien 3</a> - <a href="#" target="_blank">Lien 4</a>
<marquee direction="left" scrollamount="6" onMouseOver="this.stop()" onMouseOut="this.start()";>Mon texte qui défile</marquee></td>

Pour la mise en page, mes liens ont les mêmes propriétés que ceux de la case du haut, je les ajoute donc dans le css

Code:
table#sign td#case_haut a, table#sign td#case_bas a{
   text-decoration:none;
   color:#96774a;
   font-size:12px;
   font-variant:small-caps;
   font-weight:bold;
   }
   
table#sign td#case_haut a:hover, table#sign td#case_bas a:hover{
   color:#69563a;
   }

et voilà ! Ma sign est terminé ^^

Spoiler:
 


L'installer sur le forum



Vous allez voir, c'est très simple Smile

-> Enregistrez votre page html "sign.html".
-> Hébergez-là sur le net (par exemple sur Archive-host)

-> Mettez le code suivant dans votre sign' :

Code:
<iframe name="sign" src="lien_de_votre_page" scrolling="no" height="260px" width="420px" align="center" frameborder="0" ></iframe>

En remplaçant le lien par le lien de votre page html hébergée.

Exemple :

Code:
<iframe name="sign" src="http://www.archive-host.com/files/1107316/2ef84d7a72bd99d991bc3d94be669ebf11b18534/sign.html" scrolling="no" height="260px" width="420px" align="center" frameborder="0" ></iframe>




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
 

Signature codée

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Resolu] Bannière avec lien dans une signature
» signature musicale
» DEMANDEZ VOTRE SIGNATURE POUR LA PARTICIPATION AMICALE PSP "LE CYGNE"
» [Résolu]signature cliquable
» [Note la signature /20]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2018 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants