Message d'accueil

[Javarakita]

Bonsoir !

Il y a quelques temps, je faisais parti de la modération d'un forum. Ce dernier a coulé et je suis en train d'en refaire un.
Une des membres avait fait un message d'accueil (http://upz.fr/Z7bdj.png) et j'aimerais refaire un peu le même, mais sans savoir comment m'y prendre, comment changer la couleur, etc.
Donc en fait il faudrait m'expliquer ^^'

Merci

[Neptunia]

Bonjour

Un tableau de 4 colonnes et deux rangées

Code:

<table cellspacing="0" cellpadding="0" width="95%" border="2px solid">
<tr>
<td>Staff</td>
<td colspan="2">Contexte</td>
<td>New</td>
</tr>
<tr>
<td colspan="2">Partenaires</td>
<td colspan="2">Crédits</td>
</tr>
</table>

Plus qu'à remplir vos cellules et formater le tout à partir de ce squelette de base

[Javarakita]

Merci beaucoup, mais étant vraiment nulle en codage, que dois-je mettre, et où, pour que le message d'accueil soit comme je le veux ?

[Javarakita]

Up !

[Javarakita]

Up .. !

[Invité]

Bonsoir,

Le code donné par Neptune- donne ceci (hormis le fond rouge utilisé pour le test, ne pas faire attention):


Il s'agit de la structure HTML. Il vous reste à faire tout ce qui est esthétique, autrement dit la partie CSS. Ce forum n'a pas la vocation de fournir des codes tout faits, mais je peux vous donner des pistes.

Utiliser le CSS

Deux solutions :
- intégrer le CSS au HTML grâce à l'attribut style. Exemple :

Code:

<span style="CSS">Contexte</span>

- utiliser des classes (avec du CSS séparé). Exemple :
Dans le HTML :

Code:

<span class="titre1">Contexte</span>

Dans le CSS (affichage > couleurs > feuille de style CSS) :

Code:

.titre1{
  CSS
}

À noter que la deuxième solution est plus recommandée car :
- le HTML est moins lourd ;
- le HTML dépend du CSS et non l'inverse (pas besoin de tout modifier à la main) ;
- le CSS pourra être réutilisé à d'autres endroits du forum du moment qu'il soit conservé dans la feuille de style.

Quelques pistes pour votre réalisation

1) Balises HTML

Paragraphe

Code:

<p></p>

Titres

Code:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
...

-du plus grand au plus petit-

Lien

Code:

<a href="URL">Texte ou image</a>

Image

Code:

<img src="URL" />

"Bloc" (type block, assez compliqué à expliquer et je n'ai pas le temps de m'y attarder)

Code:

<div></div>

"Bloc texte" (type inline, idem)

Code:

<span></span>

2) CSS

Important : Les valeurs sont représentées par "X", si X n'est pas expliquée à la suite c'est qu'elle désigne un chiffre ou un nombre. Ces derniers peuvent être négatifs dans certains cas, je marquerai ces cas par *

a) pour le texte

Espacement des lettres

Code:

letter-spacing:Xpx;

*

Couleur

Code:

color:X;

Codes couleurs -> http://code-couleur.com/

Ombre

Code:

text-shadow:Xpx Xpx Xpx X

   La première valeur indique le décalage horizontal vers la droite *
   le deuxième correspond au décalage vertical vers le bas *
   le chiffre suivant indique la force du dégradé *
   et enfin, la couleur

Codes couleurs -> http://code-couleur.com/

Police

Code:

font-family:X;

Précisez la police en question à la place de X.

Taille de police

Code:

font-size:Xpx;

b) pour les blocs, colonnes, ...

Ici, j'adapte notamment à ce dont vous avez besoin.

Bordures

Code:

border:Xpx X X;

=> La première valeur correspond à l'épaisseur de la bordure.
=> La deuxième valeur correspond au style de la bordure.

dotted (pointillé)
   dashed (tirets)
   solid (solide)
   double (double)
   groove (rainurée)
   ridge (relief)
   inset (relief intérieur)
   outset (relief extérieur)

=> La dernière valeur correspond à la couleur.

Codes couleurs -> http://code-couleur.com/

Sélectionner une bordure en particulier :
Bordure droite

Code:

border-right:Xpx X X;

Bordure gauche

Code:

border-left:Xpx X X;

Bordure haute

Code:

border-top:Xpx X X;

Bordure basse

Code:

border-bottom:Xpx X X;

Couleur de fond

Code:

background-color:X;

Codes couleurs -> http://code-couleur.com/

Largeur

Code:

width:Xpx;

Hauteur

Code:

height:Xpx;

Alignement du texte

Code:

text-align:X;

- left, alignement du texte gauche,
- center, alignement du texte au milieu,
- right, alignement du texte à droite,
- justify, alignement du texte à droite et à gauche.
- chaîne, spécifie une chaîne sur laquelle les cellules d'un tableau vont s'aligner. Utilisée seulement pour le cellules d'un tableau (reconnue par aucun navigateur).
- inherit, hérite de la propriété du son parent(css2).

Voici, vous m'avez demandé des précisions et les voici. Je ne ferai pas davantage personnellement, je ne suis plus prof !...

Bon courage à vous et bonne soirée.

Cordialement.

[Javarakita]

Merci beaucoup !