Avant de commmencer à programmer en css et en html, je vous présente le design de votre futur site internet :
Ce site est composé de plusieurs partie : (pour distinguer, suivez les couleurs)
Maintenant que nous avons le contour de notre design, nous allons commencer à programmer en css. Nous allons commencer par la balise body. Cette balise définit les éléments principaux du site comme la taille, la police ...
|
body { width:1000px; margin:auto; margin-top:20px; font-family:Arial, Tahoma, "MS Sans Serif", "Times New Roman"; font-size:14px; background-color:#FFFFFF; text-align:right; } |
Pour la balise body, on définit :
Maintenant, nous allons créer, l'entête du site
|
#entete { /*Ajoutez un diese (#) cela permettra d'utiliser la balise <div>*/ width:1000px; margin:0px auto; } #entete_gauche { float:left; width:200px; height:100px; background-color:#FF00FF; text-align:center; } #entete_droite { float:right; width:730px; height:30px; text-align:center; background-color:#0000FF; padding:35px; } |
Lorsque nous passerons à la programmation en html, nous utiliserons les balises <div>. Cette balise s'écrit toujours avec un dièse (#). Nous verrons plus tard que les balises <class> s'écrivent toujours avec un point (.). Ici, nous allons donc créer 3 balises <div>. La première que j'ai appelé entete englobera les deux autres balises entete_gauche et entete_droite. J'ai définis pour la balise entete une largeur de 1000 pixels avec aucune marge externe. Maintenant, voyons les 2 autres balises
La balise entete_gauche
La balise entete_droite
REMARQUE : Je suis sur que vous êtes entrain de vous dire qu'il y a une erreur sur la largeur et la hauteur de la balise. Et bien non, il n'y en a pas. Il faut tenir compte du padding qui est de 35 pixels pour chaque côté. Horizontalement, nous avons 35x2 + 730 ce qui donne bien 800 pixels de largeur et verticalement nous avons 35x2 + 30 ce qui donne bien 100 pixels de hauteur.
Avec les balises <text-align> et <padding>, je vais pouvoir centrer horizontalement et verticalement une image qui fait 300 pixels de large et 30 pixels de haut.
Passons maintenant au corps du site, celui-ci, sera aussi composé de deux parties (le menu et le corps principal).
|
#corps { width:1000px; margin:0px auto; } #corps_gauche { float:left; width:250px; background-color:#99FFFF; min-height:400px; } #corps_droit { float:right; width:750px; min-height:400px; } |
Tout comme pour l'entête, je définit une largeur de corps à 1000 pixels. Maintenant, regardons les deux autres balises :
La balise corps_gauche :
La balise corps_droit :
Ici, vous voyez je n'ai pas définit de couleur de fond pour la balise corps_droit car cette balise est déclarée dans la balise body.
Et pour finir, finissons par la balise pied
|
#pied { width:1000px; margin:0px auto; font-size:10px; background-color:#FFCC00; text-align:center; } |
La balise Pied :
Et voici le reste de mon css. Cette partie du css crée un tableau avec bordure pour le menu. Pour chaque tableau, je crée une ligne d'entête que j'ai nommé td1 et une ligne de corps que j'ai nommé td2. Vous verrez dans le code html suivant, que j'ai utilisé des attributs id pour les tableaux et des attributs class pour les lignes du tableaux
|
#table_menu { border:1px solid 000000; width:95%; margin:auto; text-align:center; background-color:#FFFFFF; color:#000000; } .td1 { background-color:#CCFFCC; text-align:center; font-size:9px; } .td2 { background-color:#99FF99; } |
Pour le code HTML, j'ai utilisé le logiciel Dreamweaver car c'est avec ce logiciel que je travaille mais vous pouvez travailler avec Notepad++ qui fonctionne très bien.
Voici le code HTML que j'ai saisi pour faire le design de ma page HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Mon premier modele</title> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body> <div id="entete"> <div id="entete_gauche"> <p>ici, je peux rajouter l'image ou le texte que je veux.</p> <p>Mon texte est centré </p> </div> <div id="entete_droite"> <a href="http://www.helpclic.net"><img src="images/modele.jpg" border="0" width="300" height="30" alt="helpclic"></a> </div> </div> <div id="corps"> <div id="corps_gauche"> <table id="table_menu"> <tr> <td class="td1"> <p class="justifier">Menu 1</p> </td> </tr> <tr> <td class="td2"> <ul> <li><a href="#">Sous menu 1-1</a></li> <li><a href="#">Sous menu 1-2</a></li> <li><a href="#">Sous menu 1-3</a></li> </ul> </td> </tr> <tr> <td class="td1"> <p class="justifier">Menu 2</p> </td> </tr> <tr> <td class="td2"> <ul> <li><a href="#">Sous menu 2-1</a></li> <li><a href="#">Sous menu 2-2</a></li> <li><a href="#">Sous menu 2-3</a></li> <li><a href="#">Sous menu 2-4</a></li> </ul> </td> </tr> </table> </div> <div id="corps_droit"> <p>Comme vous avez pu le voir, dans le code css, dans la partie <b>body</b>, j'ai ajouté un alignement sur la droite pour le texte que je suis entrain de saisir. Et celui-ci s'aligne bien sur la partie droite.</p> <p>Pour cela, le css c'est génial, on fait ceux que l'on veut ...</p> </div> </div> <div id="pied"> <p>Ici, je vais mettre le copyright de mon site : 2007 - © helpclic.net</p> </div> </body> </html> |
Et voici le résultat de tout ces efforts :
