Comment créer une belle page d'accueil

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

Résolu Comment créer une belle page d'accueil

Message par Mononoke Ryuu le Dim 7 Mar 2010 - 13:11

Bonjour,

Voilà je suis co-administrateur d'un forum RPG sur Bleach ( http://bleach-nstory.pro-forum.fr/forum.htm), j'utilise Mozilla et j'ai la version phpBB2 (subsilver). Après avoir vu de nombreux forum avec une page d'accueil ( exemple: http://www.stargate-of-aurora.com/forum.htm, http://sgu-rpg.bbactif.com/index.htm, ...) j'ai décidé d'en créer une. Le problème c'est que je ne connait rien en html et les tutos que j'ai vu ici pour faire les bases (3 colonnes, 2 lignes) m'aide pas, j'ai bidouillé à droite, à gauche mais je n'y arrive pas.

Voilà j'aimerai , si c'est possible que l'on me créé le code pour ma page (j'aimerais y mettre une image en fond dans la page, et qu'il n'y ait pas de trait séparateurs entre les différents sujets) et que l'on m'explique comment faire.

Merci d'avance de l'aide que vous pourrez m'apporter.


Plan: STAFF Personnages recherchés

Annonces
Contexte Partenaires


Si le code n'est pas possible à créer que l'on m'explique alors comment cela marche, merci.

Cordialement,

PS:si je respecte pas trop les règles, désolé je viens de les lire et je ne suis pas sur si je fais tout comme il faut (mon premier message)


Dernière édition par Mononoke Ryuu le Dim 7 Mar 2010 - 15:44, édité 1 fois

Mononoke Ryuu
Nouveau membre

Messages : 3
Inscrit(e) le : 07/03/2010

http://bleach-nstory.pro-forum.fr/forum.htm
Mononoke Ryuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une belle page d'accueil

Message par Shizuo Heiwajima le Dim 7 Mar 2010 - 14:55

Coucou !
Je peux essayer de vous aider si vous le souhaitez,

Donc en regardant sur votre forum je vois que vous êtes plutôt bien parti !
Vous voudriez donc deux colonnes en premier puis trois colonnes c'est cela ?

Est-ce que cela ressemblerait à cela : Test

Je veux bien soit faire votre code, soit vous aider avec des explications si vous avez des questions bien précise Smile

En espérant ne pas arriver trop tard et vous être utile !

Shizuo Heiwajima
**

Féminin
Messages : 53
Inscrit(e) le : 17/02/2010

http://durarara-rpg.forumactif.com/
Shizuo Heiwajima a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une belle page d'accueil

Message par Mononoke Ryuu le Dim 7 Mar 2010 - 15:01

J'aime beaucoup, merci, dis moi tu pourrais m'expliquer comment sa marche ?

Sinon, comment on fait un menu déroulant, par exemple pour les perso recherché et les partenaires j'aimerai qu'il se déroules comme dans les derniers sujet à gauche de ce forum.

Sinon encore merci.

Mononoke Ryuu
Nouveau membre

Messages : 3
Inscrit(e) le : 07/03/2010

http://bleach-nstory.pro-forum.fr/forum.htm
Mononoke Ryuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une belle page d'accueil

Message par Shizuo Heiwajima le Dim 7 Mar 2010 - 15:21

Alors je t'explique pas à pas :

Le premier tableau :
Code:

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Le Staff du forum</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Personnages recherchés</FONT></STRONG></TD>

</TR></TBODY></TABLE>

Tu vois que pour créer un tableau le code de départ est
Code:
<TABLE ><TBODY>
et le code de fin
Code:
</TBODY></TABLE>

Les code
Code:
<TR></TR>
correspondent à des lignes de tableau Smile
Et les code
Code:
<TD></TD>
à des colonnes.

Tu peux vérifier dans le premier tableau il y a une ligne et deux colonnes.
Ensuite dans ce que tu peux customiser facilement il y a la largeur de tes colonnes ou la hauteur de tes lignes avec width et height, tu peux les exprimer en % ou en pixel ( px).
Il y a aussi l'image ou la couleur de fond :
Code:
background-image: url(http://hitskin.com/themes/12/68/38/i_background.png)
et la police et si tu mets en gras etc etc...
Sinon pour le fait de ne pas avoir d'encadrement, je n'en ai tout simplement pas défini et ait juste demandé d'écarter les différents cellules du tableau grâce au code :
Code:
PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
Logiquement le code va faire en sorte qu'on ait un espace de 10px à droite et à gauche.

Sinon par rapport au code, as-tu d'autres questions ?
Dis-moi si je ne suis pas claire hein ><

Le code qui est sur la page que je t'ai envoyée pour le moment est
Code:

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Le Staff du forum</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="50%">
<STRONG><FONT color=white >Personnages recherchés</FONT></STRONG></TD>

</TR></TBODY></TABLE>


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center; BACKGROUND-COLOR: white; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;  COLOR: #ffffff; " width="50%">
<img style="height:100px; width: 60px;" src="http://img297.imageshack.us/img297/4161/chibitsubakiadminstaff.png">
  <img style="height:100px; width: 60px;" src="http://img194.imageshack.us/img194/4503/chibikiamoadminstaff.png">
</FONT></STRONG></TD>


<TD style="TEXT-ALIGN: center; BACKGROUND-COLOR: white; PADDING-LEFT: 10px; PADDING-RIGHT: 10px;  COLOR: #000000; " width="50%">
<img src="http://i65.servimg.com/u/f65/14/95/86/09/byaku_10.jpg">  <img src="http://i65.servimg.com/u/f65/14/95/86/09/ichigo10.jpg"><br>
Mettez ici les images ou ce que vous souhaitez pour les persos recherchés !
  </FONT></STRONG>  </TD>
 

</TR></TBODY></TABLE>


<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">

<STRONG><FONT color=white>Annonces</font></FONT></STRONG></TD>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">
<STRONG><FONT color=white >Contexte</FONT></STRONG></TD>

<TD style="TEXT-ALIGN: center; background-image: url(http://hitskin.com/themes/12/68/38/i_background.png) ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #ffffff; " width="33%">
<STRONG><FONT color=white >Partenaires ?</FONT></STRONG></TD>

</TR>
</TBODY>
</TABLE>

<TABLE border=0 cellSpacing=3 cellPadding=0 width="100%" align=center >

<TBODY>
<TR>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%">
<br>
Faites vos annonces ici !</TD>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff;  PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%"> <br>
Expliquez le contexte à vos membres par là !</TD>

<TD style="TEXT-ALIGN: center; background-COLOR: #ffffff  ; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; 
COLOR: #000000; " width="33%"><br>
Tous vos partenaires peuvent aller là !</TD>

</TR></TBODY></TABLE>
 

Pour des annonces ou des partenaires ou autres déroulants, le code est assez simple à mettre mais comme on peut pas vraiment l'intuiter :
Il s'agit de la balise marquee
Code:
<marquee id="id1" direction="left" align="center" scrolldelay="2" scrollamount="2" >
<span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
ICI CE QUI DÉFILE !
</span></marquee>
Tu as simplement à changer la direction si tu veux que ça aille en haut tu mets "up" à la place de "left" Wink
( et la balise span c'est pour que cela s'arrête de défiler quand on met la souris dessus Wink )

Je te renvoies ici sinon :
http://www.csvt.qc.ca/patriotes/html/code_spec/xmpl_mrq.htm

Si tu as d'autres questions, n'hésite pas !

Shizuo Heiwajima
**

Féminin
Messages : 53
Inscrit(e) le : 17/02/2010

http://durarara-rpg.forumactif.com/
Shizuo Heiwajima a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une belle page d'accueil

Message par Mononoke Ryuu le Dim 7 Mar 2010 - 15:44

Je crois que j'ai compris le principe, après à moi de savoir à quoi correspond les différentes balises. Merci beaucoup de ton aide

Mononoke Ryuu
Nouveau membre

Messages : 3
Inscrit(e) le : 07/03/2010

http://bleach-nstory.pro-forum.fr/forum.htm
Mononoke Ryuu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum