mardi
19 novembre 2007

 

     / Exemples /w-decoupage

Découpage d'une page Web a posteriori

 

Découpage a posteri du code d'une page HTML en zones reflétant sa structure

Pour concevoir une page avec différentes zones dynamiques, c'est-à-dire dont les contenus sont générés dynamiquement par des scripts exécutés par le serveur de pages Web hébergeant le site, plusieurs moyens sont utilisables :

  • en récupérant une page qui plait sur Internet,
  • à partir de logiciels de mise en page comme QuarkXPress ou IDesign
  • à la main, avec l'aide de logiciels pour élaborer des feuilles de style (.css)

Dans ce dossier, nous mettrons plusieurs dossiers contenant les résultats de cette étape avec chacune de ces approches.

Le archives atteintes pourront être utilisées pour la suite des manipulation du cours.

Remarques :

  • Les logiciels de mise en page destinés à la création graphique pour la presse son utilisable pour créer une maquette en html. Par contre, par exemple QuarkXPress génère un code html contenant des directives de presentation en css qui positionnent tous les éléments html de façon absolue dans la page, ce qui ne s'adaptent très difficilement à l'ajustement dynamique de la mise en page.
  • Il est possible d'utiliser QuarkXPress pour générer un modèle de page de navigation automatique dans le site, mais il faudra récupérer les images et revoir complètement le code généré pour l'utiliser dans un moteur de sites Web dynamiques.

Objectif : Cette page retrace les manipulations qui ont été necessaires pour découper une page Web en morceaux de façon à pouvoir développer des petits programmes capable de calculer les même contenus à partir de la connaissance des fichiers et dossiers contenus dans des dossiers sur le serveur.

Depuis les fichiers d'origine récupérés sur Internet (amélioré en w-original/ parce qu'il manquait des images), ci-dessous est la liste de modifications effectuées :

  • changement du nom du fichier w-free/index.html en w-free/index.php
  • renommage du dossier des images image/ en _images/ et des images contenues dans ce dossier pour qu'elles ne contiennent pas le caractère blanc
  • mise à jour du fichier index.html de la racine du site ainsi que du fichier _style.css et index.php pour que les liens sur des images tiennent compte des modifications précédentes
  • passage de l'image de fond dans le fichier _style .css, à l'aide du code suivant :
    body {
            background : url(_images/DlaAsi2_56.png) center no-repeat white; 
            color:#393838;
    }
  • l'état atteint est alors : w-pre-decoup/
  • copie de tous les codes html repérés comme étant le menu horizontal et le menu vertical dans des fichiers séparés appelés respectivement _include/menuH.php et _include/menuV.php
  • l'état atteint est alors : w-decoup/

Ensuite, on a du modifier fondamentalement la feuille de style pour pallier au fait que quarkXpress génère des boites qu'il possitionne de façon absolue dans la page, alors que le site sera dynamique et qu'en conséquence, on ne peut savoir d'avance ni la place que prendra chaque item de menu, ni même le nombre d'item de menu à afficher dans la largeur de la page ou dans sa hauteur.

D'abord, pour le menu horizontal :

  • insertion d'une balise <style> (et son </style> associée) dans le fichier _include/menuH.php
  • déplacement de l'image utilisée dans le menu horizontal pour qu'elle soit l'image de fond de l'entête, même si on assimile dans cette présentation le menu horizontal avec l'entête. Pour cela, on insère une balise <table class="entete">, puis <tr class="entete"> (et leurs </tr> et </table> associées) afin que les liens du menu horizontal soient sur une seule ligne et que la classe .entete permette d'associer une image au fond de cette table.
  • dans index.php, inversion de la zone du menu horizontal avec celle du bas de page, parce que la présentation se décalle vers la droite
  • copie du style de la boite qui présente le bas de page en le prenant dans _style.css pour le mettre dans _include/basdepage.php. Il s'agit du sélecteur .box14, qu'on va renommer en .basdepage pour clarifier le code.
  • modification/ajustment du style .basdepage pour que l'affichage du bas de page ne décale plus le menu horizontal
  • supression des styles .box2, 3, 4, etc de quarkXpress pour que les éléments de positionnement dynamiquement les uns par rapport aux autres
LicPro - PAGORA