Header
Partagez | 

[Truc] Faire un message d'en-tête en tableau/html/css

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [Truc] Faire un message d'en-tête en tableau/html/css   Lun 1 Mar - 21:35

Bonjour les p’tits loups !

Aujourd’hui, occupons nous de la « beauté » de vos forums Smile Prêt ? Partez !




Nous allons donc parler ici des messages d’en-tête en tableau et html. Cela se fait de plus en plus sur les forums et beaucoup veulent faire la même chose sur le leur mais ne savent pas comment faire. Voici donc quelques conseils et explications.

1/ Réfléchir à ce que l’on veut


Oui, avant de commencer, il faut réfléchir à ce que l’on va afficher sur son message d’accueil. Pour cela, munissez vous d’un papier et d’un crayon et faites une liste rapide des élements que vous allez placer sur votre message d’en-tête.

* Exemple (il nous servira pour tout le reste du tuto ^^)
Citation :
  • Message d’accueil
  • Navigation rapide
  • Le staff
  • Les infos du forum
  • L’offre du moment
  • Les partenaires privilégiés du forum
  • Les news


2/ Où va être chaque élement ?


Avant de vous lancer, prenez votre temps. Toujours avec votre papier et stylo, faites un croquis rapide de l’endroit où vous allez placer chaque élément. Cela vous permettra de faire plusieurs essais sans perdre de temps (un tableau ça va vite à faire sur une feuille), et vous pourrez voir si la structure vous convient.

* Exemple :
Spoiler:
 

3/ Un premier essai (facultatif)


Si vous maitrisez (ou savez utiliser) un logiciel de graphisme, je vous conseille de faire une première mise en page de votre en-tête.
De cette façon vous pourrez avoir un aperçu du rendu final, choisir rapidement les couleurs et taille, les polices, etc… (là aussi faire des essaies) et vous gagnerez du temps pour la suite.

* Exemple :
Spoiler:
 

4/ Le code


Ahh l’étape finale ! Vous savez ce que vous voulez, il n’y a plus qu’à le faire !

a) La partie html
*** Commencez par réaliser le tableau (nombre de colonne et de ligne). Dans mon exemple, j’ai 2 tableaux différents : un tableau du haut qui contient 3 colonne et 1 seule ligne (colonne de gauche = navigation + infos du forum ; colonne du milieu = message d’accueil ; colonne de droite = les news + les partenaires) et un tableau du bas à 2 colonnes et une ligne.
Remarque : toutes vos colonnes doivent avoir le même nombre de lignes.

* Exemple :
Code:
 <div class="en_tete">

<table>
   <tr>
       <td id="tab1_col1">Nav + infos du forum</td>
        <td id="tab1_col2">Message d'accueil</td>
        <td id="tab1_col3">News + partenaires</td>
    </tr>
</table>

<table>
   <tr>
       <td id="tab2_col1">Offre du moment</td>
        <td id="tab2_col2">Le staff</td>
    </tr>
</table>

</div>

*** Ensuite, intégrer chaque élément « brut » (c'est-à-dire le texte tel quel, sans mise en page). Pour vous faciliter le travail de mise en page, ajouter des id ou classe (=nom) aux éléments qui auront les mêmes propriétés.

* Exemple :
Code:
 <div class="en_tete">

<table>
   <tr>
       <td id="tab1_col1">
           <h1 id="titre_en_tete">Navigation rapide</h1>
           <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 1</a></p>
            <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 2</a></p>
            <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 3</a></p>
            <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 4</a></p>
            <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 5</a></p>           
           

            <h1 id="titre_en_tete">Les infos du forum</h1>
            <p id="en_tete_infos_forum">Le forum a été créé le N Mois 2010.</p>
            <p id="en_tete_infos_forum">Les administrateurs sont <a href="#" id="vers_profil">Pseudo</a>, <a href="#" id="vers_profil">Pseudo</a>, <a href="#" id="vers_profil">Pseudo</a> et <a href="#" id="vers_profil">Pseudo</a></p>
            <p id="en_tete_infos_forum">Design créé par <a href="#" id="vers_profil">Pseudo</a></p>
        </td>
        <td id="tab1_col2">
           <h1 id="titre_en_tete">Bienvenue sur le forum pseudo !</h1>
           <p id="contenu_en_tete">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo. </p>       
        </td>
        <td id="tab1_col3">
           <h1 id="titre_en_tete">Les news</h1>
            <p id="en_tete_news">* News 1 : blablablablablablab</p>
            <p id="en_tete_news">* News 2 : blablabla blablabla</a></p>
         
       
            <h1 id="titre_en_tete">Partenaires</h1>
           <p id="logo_en_tete"><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a></p>
        </td>
    </tr>
</table>

<table>
   <tr>
       <td id="tab2_col1">
           <h1 id="titre_en_tete">Offre du moment</h1>
           <p id="logo_en_tete"><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a><a href="#"><img src="logo.png" alt="nom du forum"  /></a></p>
        </td>
        <td id="tab2_col2">
           <h1 id="titre_en_tete">Le staff</h1>
           <p id="staff_en_tete"><a href="#"><img src="staff.png" alt="pseudo"  /></a><a href="#"><img src="staff.png" alt="pseudo"  /></a><a href="#"><img src="staff.png" alt="pseudo"  /></a><a href="#"><img src="staff.png" alt="pseudo"  /></a><a href="#"><img src="staff.png" alt="pseudo"  /></a><a href="#"><img src="staff.png" alt="pseudo"  /></a></p>     
       
        </td>
    </tr>
</table>

</div>

Spoiler:
 

b) La partie CSS
Il ne vous reste plus qu’à y mettre du style. Pour cela, je vous renvoie à ce tuto : [Les propriétés les plus utilisées en CSS].

Et voilà le résultat de mon exemple :
* Le code html est exactement le même que précédemment.

* Le code css
Code:
 .en_tete{
   width:700px;
   min-height:400px;
   height:auto;
   background-color:#FFFFFF;
   background-image:url('http://i226.photobucket.com/albums/dd220/MissMiet/tutos/fd_tab.png');
   background-repeat:no-repeat;
   margin:auto;
   border:solid 1px #CCCCCC;   
   }

/****** Mise en page des colonnes ******/

table tr{
   vertical-align:top;
   }

#tab1_col1{
   width: 200px;
   padding:12px;
   }

#tab1_col2{
   width: 350px;
   padding:12px;
   }

#tab1_col3{
   width: 150px;
   padding:12px;
   }

#tab2_col1{
   width: 450px;
   padding:12px;
   }

#tab2_col2{
   width: 250px;
   padding:12px;
   }
   
/****** Mise en page des titres ******/

#titre_en_tete{
   background-color:#68a4a9;
   border:1px dashed #ffffff;
   height: 24px;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color:#ffffff;
   text-align:center;
   padding: 4px;
   }
   
/****** Mise en page du texte ******/

#en_tete_nav{
   font-family:Tahoma;
   font-size:16px;
   color:#0d1128;
   margin-left:35px;
   margin-bottom:-4px;
   }
   
#contenu_en_tete{
   font-family:Tahoma;
   font-size:14px;
   color:#0d1128;
   text-align:justify;
   text-indent:12px;
   padding-left:8px;
   padding-right:8px;
   margin-bottom:-4px;
   }

#en_tete_infos_forum{
   font-family:Tahoma;
   font-size:12px;
   color:#0d1128;
   text-align:justify;
   text-indent:12px;
   padding-left:8px;
   padding-right:8px;
   margin-bottom:-4px;
   }
   
#en_tete_news{
   font-family:Tahoma;
   font-size:16px;
   color:#0d1128;
   margin-left:12px;
   margin-bottom:-4px;
   }

#logo_en_tete, #staff_en_tete{
   text-align:center;
   }

#logo_en_tete a, #staff_en_tete{
   text-decoration:none;
   }

#logo_en_tete img{
   padding-bottom:4px;
   }

#staff_en_tete img{
   padding-left:6px;
   }
      
/****** Mise en page des liens ******/

#lien_en_tete{
   color:#0d1128;
   text-decoration:none;
   }

#lien_en_tete:hover{
   border-bottom:dotted 1px #0d1128;
   font-weight:bold;
   }

#vers_profil{
   color:#0d1128;
   text-decoration:none;
   font-style:italic;
   }
   
#vers_profil:hover{
   border-bottom:dotted 1px #0d1128;
   }

* rendu

Spoiler:
 


Remarques :
* Pour les utilisateurs de FA, il vous suffit de copier coller le code CSS dans la feuille de style CSS (PA >> Affichage >> couleurs >> CSS).
* Pour les utilisateurs de xooit : attention, si vous faites des espaces ou des retours à la ligne (entrée), xooit les prendra en compte. Si vous voulez un message d’en-tête qui respecte vos attentes, le code doit être en un seul bloc.





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].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire un message d'en-tête en tableau/html/css" tel que je l'ai rédigé.


Dernière édition par Miettes le Sam 15 Mai - 11:37, édité 2 fois
Revenir en haut Aller en bas


[Truc] Faire un message d'en-tête en tableau/html/css
Page 1 sur 1
 Sujets similaires
-
» Garmin express erreur
» [Résolu] Problème pour faire un copier/coller (suite post sur yahoo)
» que dois-je faire apres avoir fait un scan avec hijckthis
» comment faire avec la carte sd
» [Résolu] Message avec musique sous outlook
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+