Créer un site web XHTLM et CSS

Structure de la page

Nous devons d'abord créer et modifier une page modèle qui se trouve dans le dossier complet zip à télécharger à la fin de ce tutorial.

La page modèle comprend :

• Lignes 1 et 2 et 4, la déclaration "Doctype", nous avons choisi la version la plus récente c'est à dire la structure XHTLM 1.0 strict.

Puis nous avons la partie Head (Ligne de 6 à 16) qui englobe les informations de la page

• Ligne 7 Indiquez le titre de la page, il doit être à chaque fois différent c'est le titre qui apparaît dans les onglets du navigateur
• Ligne 8 Entrez le nom de l'auteur de la page.
• Ligne 9 Entrez la description de la page
• Ligne 12 Entre les mots clés du site, se sont les mots qui seront mémorisés par les moteurs de recherche.
• Ligne 14 Entrez le chemin de la feuille de style utilisée pour la page. Si la feuille de style est au même niveau que votre page se sera par exemple : style.css. Si vitre page se trouve à un niveau supérieur comme dans un dossier se sera : ../nom_du__dossier/style.css. Les ../Indiquent au navigateur que la feuille de style se trouve à un niveau inférieur.
• Lignes de 18 à 21 c'est le corps de la page de votre site web.
• La ligne 23 c'est la fermeture de la balise html (ligne 4)

Pour en savoir plus voir le site XHTLM

Définir le chemin relatif

Le chemin d'une page, d'une images etc. par rapport à votre page active est indiqué de la manière suivante :

• "../" : signifie que l'on remonte d'un niveau, on sort d'un dossier.
• "/": signifie que l'on descend d'un niveau.

Pour accéder à un dossier ou fichier de même niveau, le chemin est direct.

Exemples :

Un lien dans "index.htm" vers "autre_page.htm" : Il faut aller dans le dossier "pages" pour trouver le fichier, le lien sera donc : "pages/autre_page.htm"

Un lien de "autre_page.htm" vers "index.html" : Il faut sortir du dossier "pages" pour être à la même hauteur que le fichier, le chemin est donc : "../index.html"

Si vous avez plusieurs dossiers il faut mettre plusieurs "../" pour sortir des dossiers par exemple une image "bg.gif soit pour 2 niveaux :

"../../bg.gif"

Création de page

La figure ci-contre représente la partie XHTLM de la partie body et les boîtes sont visualisée avec des couleurs différentes.

La page est comprise dans la partie "body".

La mise en forme des éléments est réalisée par la feuille de style.

Ainsi nous allons toujours d'écrire la partie code XHTLM (dans la page) et la partie code CSS (dans la feuille de style).

Nous avons essentiellement des boîtes "div"

Le design de la page est dans la boîte "div" appelée "conteneur"

A l'intérieur de la boîte conteneur nous trouvons :

• La boîte "header" qui contiendra l'entête du site
• La boîte "haut" qui contiendra les onglets de navigation
• La boîte "centre" qui contiendra le contenu, textes et images du site
• La boîte "pied" généralement facultative pour le design et les informations annexes

‹div id="conteneur"›

     ‹div id="header"›

     ‹/div›

     ‹div id="haut"›
							
     ‹/div›

     ‹div id="centre"›
									
     ‹/div›
	  
     ‹div id="pied"›
												
     ‹/div›
	
‹/div›

Choix du design

Il faut d'abord choisir un modèle.

Soit le modèle suivant :

Ensuite à partir de ce modèle nous allons déterminer les images de fond.

Avec un logiciel comme Photoshop (personnellement j'utilise Photoshop Elements) nous allons découper les différentes parties pour réaliser les images de fond.

Les découpes seront alors :

Il faut ensuite placer les découpes dans la feuille de style et déterminer les valeurs des différentes boîtes.

Donc les codes CSS suivants :

#header {
height: 102px;
background-image: url(images/bgheader.png);
background-position: top left;
background-repeat: no-repeat;
}


#haut {
clear:both;
width:920px;
height:35px;
padding-left:25px;
background-image:url(images/bghaut.png);
background-repeat:no-repeat;
}

#conteneur {
position: relative;
width: 920px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px; 
background-color:#CCCCFF;
}
#centre {
background-color:#fffff0;
padding: 30px 30px 20px 30px;
background-image: url(images/bgconteneur.png);
background-repeat: x;
margin: 0;
}

#pied {
height: 30px;
background-image: url(images/bgfooter.png);
background-position: top left;
background-repeat: no-repeat;
margin: 0;
padding: 0 20px 0 0;
}

A ce stade nous n'avons que la forme nous allons voir comment réaliser une barre de navigation avec des onglets. C'est l'objet de notre prochaine étape

© 2008 André Willemijns