Webmaster + Webdesigner + Créateur de projets

Voici une méthode de programmation que j’utilise pour organiser mes CSS dans un fichier externes. Cette méthode vous permettra de vous y retrouver très rapidement et vous fera gagner du temps.

Je suppose qu’un fichier xhtml à été créé ainsi qu’un fichier CSS et que celui-ci à été attaché de la manière d’un @import ou d’un link.

Commençons d’abord par le « body » de la page XHTML :

Premièrement, coder de manière claire et simple. Utilisez une structure en DIV. Voici à votre gauche un aperçu typique d’un site web très simple :

Le tout sera dans une div général nommé « container » et vous remarquerez que je n’utiliserai pas les majuscules pour nommer mes tags. Sur le plan, les majuscules ont été utilisées seulement pour une meilleure visibilité.

Bon maintenant voici le code XHTML de ce petit design :

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Bien entendu, ce code se retrouve dans la tag BODY. Ensuite commençons le truc que j’utilise pour accélérer votre travail. Copier le code à l’intérieur de votre tag body et collez-le dans votre fichier CSS. Voici ce que ça donne:

 
<div id="myContainer">
<div id="header"></div>
<div id="middle">
<div id="left"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
 

Maintenant (en utilisant Dreamweaver) utilisez la fonction de recherche (ou CTRL-F). Recherchez les codes suivants

 
<div id="
 

Et remplacez-les par les symboles #. Ensuite recherchez les codes suivants :

 
 
">
 

Et remplacez-les par les accolades ouvertes et fermé { }. Pour le reste vous pouvez rechercher les tags div de fermeture et les remplacer par rien. Cela vous donnera ceci :

 
 
#myContainer {}
 
   #header {}
 
   #middle {}
      #left {}
      #content {}
 
   #footer {}
 

Finalement, il ne vous reste qu’à mettre vos largeurs et hauteurs et autres propriétés de vos tags DIV. Personnellement, j’ajoute une ligne de commentaire au-dessus de chaque ligne concernant mes sections (header, middle, footer). Voici le code que vous obtiendrez :

 
 
#myContainer {
width:760px;
height:auto;
}
 
/* HEADER */
   #header {
   width:760px;
   height:250px;
   background-color:#666;
   }
 
/* MIDDLE */
   #middle {
   width:760px;
   height:500px;
   }
      #left {
	  width:160px;
	  height:500px;
	  background-color:#ccc;
	  float:left;
	  }
      #content {
	  width:600px;
	  height:500px;
	  background-color:#fff;
	  float:left;
	  }
 
/* FOOTER */
   #footer {
   width:760px;
   height:70px;
   background-color:#000;
   }
 

Pour le reste du code, vous l’insérer à l’intérieur de vos tags et indentez votre code comme celui de votre XHTML, vous verrez, ce truc accélèrera votre vitesse d’exécution.

Tags: Code, CSS, Intégration, Programmation, Web

Cet article a été publié le Vendredi 8 février 2008 à 8:00 et est classé dans Tutoriels. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.