Chargement en cours . . . 

Courrier PHILIA

 Philia [accueil]...    imprimer ce document...   fermer cette fenêtre...

COURRIER


 

Petits secrets du cahier...
26/02/2004

De Line le 25/02/2004 : "J'adore la présentation de votre site et aimerais bien possèder le même style de fond de page pour fabriquer des dossiers au sein de mon entreprise. Pourriez-vous m'indiquer comment faire ? Dans cette attente, cordialement."

=> 26/02/2004 : Merci de votre appréciation. Les pages Philia ne présentent pas de difficulté spéciale de construction au point de vue du "fond" (...de page !). Voici le code :

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Votre titre</title>

<Style type="text/css"><!--
#hautblc { position: absolute; z-index: 1; top: 0px; left: 0px; width: 745px; height: 18px; visibility: visible }
#hautdecahier { position: absolute; top: 17px; left: 29px; width: 705px; height: 3px; visibility: visible }
#hautdroitcoin { position: absolute; z-index: 1; top: 20px; left: 689px; width: 40px; height: 70px; visibility: visible }

--></Style>

</head>

<body background="../../img/copie_back2.gif">

<div id="hautblc">
<img src="../../img/ruban_blc.gif" width="745" height="18" border="0"></div>

<div id="hautdecahier">
<img src="../../img/bord_sup.gif" width="705" height="3" border="0"></div>

<div id="hautdroitcoin">
<img src="../../img/coin_droit2.jpg" width="40" height="70" border="0"></div>

</body>
</html>

Vous pouvez voir le résultat en cliquant ici (dans une nouvelle page). Il vous suffit ensuite d'enregistrer cette page (Fichier~Enregistrer sous... dans Internet Explorer) pour avoir le document et les images sur votre ordinateur. Vous pouvez utiliser ce modèle à votre guise.

Quelques commentaires sur ce code assez simple :

  • En bleu : la définition des "containers" <div>.
  • En rouge : les containers eux-mêmes.

Le premier <div> ici nommé hautdecahier contient une petite image de 1 X 3 pixels qui, étirée à 705 X 3 px va donner le bord supérieur du cahier. Le deuxième <div>, hautblc contient un simple point blanc de 1 X 1 px qui, une fois étiré à 745 X 18, va masquer la zone située en haut de la page, entre le bord supérieur déjà défini et le haut de l'écran. Pour le même prix, je vous ai indiqué comment est inséré (dans hautdroitcoin) le coin droit du cahier, qui est "corné" (et qui contiendra une petite flèche permettant de naviguer vers la page précédente).

Le plus délicat est de calculer correctement les coordonnées (top et left) des deux premiers containers, car même avec un éditeur réaliste (WYSIWYG), les images sont très petites et il n'est pas facile de les positionner comme il faut, c.-à-d. au pixel près. Les dimensions (width et height) posent moins de souci car les <div> s'adaptent aux dimensions des images.

Toutes les pages Philia sont construites sur ce modèle, avec toutefois des variantes. Ainsi, le cahier comporte des pages blanches dans 2 cas (accueil et recherche), et les extraits de textes sont incrustés sur un fond à grands carreaux qui comporte une image supplémentaire (= la marge supérieure des fameuses copies doubles à la française).

Pour en savoir plus, vous pouvez afficher la source des pages qui vous intéressent (ce que vous ne verrez pas, en revanche, c'est le code php qui envoie ces sources html, mais si j'ai bien compris, vous vous intéressez d'abord à l'esthétique et ce n'est donc pas important).

En espérant vous avoir été de quelque utilité, recevez, chère Line, mes...


-: Amitiés :- P h i l i a.

Référence du message : ID 026






            


 - Contrat Creative Commons (certains droits réservés) -