Résolution fixe

Pour cela, nous allons reprendre la maquette que nous avons réalisée dans les rubriques précédentes. Pour illustrer l’explication, je vais utiliser les éléments de mon site. Il y a donc juste 2 éléments à placer : Le menu , et le contenu.

Maquette réalisée sous photoshop

Prenez votre maquette photoshop, et trouvez la position en pixel du coin haut gauche de votre menu. Dans mon cas, c est Gauche : 20px et haut : 310 px.
Notez ensuite la largeur et hauteur de votre menu. Ici c’est Largeur 130px et hauteur 300 px

Répétez l’opération avec le « contenu » du site. Dans mon cas c est Gauche : 315px et haut : 129 px.
La largeur du contenu est de 600 px

Sous photoshop, Fusionnez tous les calques visibles, et sauvegardez l’image dans un répertoire nommé « skin » à la racine de votre site. Nommez la fond.jpg

Ensuite, il faut sélectionner une partie de l’image qui servira de fond pour toutes les pages déroulantes, car sinon si la page est trop longue, le texte dépassera de l’image « fond » Pour cela, sélectionner une bande qui va faire toute la largeur de votre maquette, et une hauteur telle que l’image pourra se répéter en hauteur de manière indéfinie. Dans mon cas, il faut choisir une hauteur de 4 pixels pour que le liseré semble continuer à l’infini.

Enregistrez cette image dans le répertoire « skin » sous le nom fond-site.jpg

Voila, il ne reste plus qu’à créer le squelette

Squelette / Page principale du site

Créer un nouveau fichier appelé index.php. J’ai choisi de ne pas séparer le squelette du fichier principal du site comme le fond plusieurs CMS. Cette page contiendra donc le squelette et les appels aux différents modules du site.

Dans ce fichier, placez d’abord vos balises headers html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

Ici le fichier maquette.Css (Feuille de style du site) se trouve dans un sous répertoire $theme car plusieurs thèmes cohabitent. Vous pouvez en faire de même.
Dans ce répertoire $theme se trouve vos 2 photos de fond.

Revenons à notre fichier index.php. placez 3 <div> dans ce fichier qui serviront à positionner le menu, le fond, et le contenu de votre site :

<body>

< ? include("./menu.php") ?>

</div>

< ? include("./".$module."/index.php") ?>

</div>

</body>

</html>

Le fichier menu.php sert à générer votre menu, l’inclusion dans le Div Page sert à appeler le module en cours. Nous verrons plus tard comment programmer votre site en php

Il ne reste plus qu’à définir la feuille de style

Feuille de style du squelette

Éditez le fichier maquette.css situé dans votre répertoire de skin.

Mettez les lignes suivantes :

#menuLeft{

position:absolute;

top:310px; <- mettez votre valeur déterminée avec Photoshop

left:20px; <- mettez votre valeur déterminée avec Photoshop

width:130px; <- mettez votre valeur déterminée avec Photoshop

}

#background

{

background: url('./fond.jpg') no-repeat;

height:100%; <- mettez votre valeur déterminée avec Photoshop

padding-top:800px; <- mettez votre valeur déterminée avec Photoshop

}

#page{

position:absolute;

top:129px; <- mettez votre valeur déterminée avec Photoshop

left:375px; <- mettez votre valeur déterminée avec Photoshop

width:600px; <- mettez votre valeur déterminée avec Photoshop

}

Et voila, votre squelette xhtml à résolution fixe est terminé. Vous voyez que ce n’est pas sorcier.

Pour aller plus loin, vous pouvez maintenant voir comment créer un squelette multi-résolution (en cours de création)

Webmaster toulouse