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
[(#REM) pour passer le layout dans l'url ]
[(#SET{layout,#ENV{layout,#CONFIG{escal/config/layout,PMP}}})]
[<link href="(#URL_PAGE{layout#GET{layout}.css}|direction_css)" rel="stylesheet" type="text/css" />]par
[<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
<INCLURE {fond=inclusions/inc-head, env}>par
<INCLURE {fond=inclusions/inc-head-sommaire, env}>et hop !
