Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 449 sites
logo article ou rubrique
Mise en page générale
Article mis en ligne le 24 janvier 2009
dernière modification le 14 janvier 2019

par Jean Christophe Villeneuve

Avec Escal et sa page de configuration, le choix de la mise en page se fait en quelques clics. Et ce n’est pas moins de 13 mises en pages possibles qui sont proposées :

  • 5 mises en pages fixes (voir ci-dessous) avec paramétrage de la largeur totale et de celle des colonnes latérales
  • 3 mises en pages fluides, c’est à dire s’adaptant à la taille de l’écran
  • 5 mises en pages mixtes, c’est à dire avec une partie centrale fluide et les 2 colonnes latérales fixes. La largeur de ces colonnes étant paramétrable.


Chacun peut donc choisir sa mise en page mais je conseille d’utiliser une mise en page fluide en indiquant une largeur maximum. On profite ainsi du "Responsive Web Design" sans avoir un site trop large sur les grands écrans, ce qui peut gêner la lecture avec des lignes trop longues.

On peut aussi envisager des mises en page différentes selon la page sommaire, rubrique, article ou autre mais là il faut enlever cet appel du fichier inc-head et mettre celui qu’on veut dans le "head" de chaque page.

Exemple : Pour avoir une page d’accueil en 3 colonnes (layout PMP) et les autres avec 2 colonnes (layout PM), on va procéder ainsi :

  • on paramètre le layout PM dans la configuration d’Escal
  • on copie le fichier inc-head.html de /escal/inclusions vers /squelettes/inclusions et on le renomme inc-head-sommaire.html par exemple
  • dans cette copie, on modifie les lignes
  1. [(#REM) pour passer le layout dans l'url ]
  2.     [(#SET{layout,#ENV{layout,#CONFIG{escal/config/layout,PMP}}})]
  3.     [<link href="(#URL_PAGE{layout#GET{layout}.css}|direction_css)" rel="stylesheet" type="text/css" />]

Télécharger

par

  1. [<link href="(#URL_PAGE{layoutPMP.css}|direction_css)" rel="stylesheet" type="text/css" />]
  • on copie ensuite le fichier sommaire.html de /escal vers /squelettes
  • dans cette copie, on remplace
  1. <INCLURE {fond=inclusions/inc-head, env}>

par

  1. <INCLURE {fond=inclusions/inc-head-sommaire, env}>

et hop !

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article1

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.7