Je veux utiliser le principe du canevas pour définir une partie entête de page, pied de page, etc. mais je veux que ces parties soient contenues dans des DIV. Comment dois-je faire ?
En terme de mise en page HTML, l'utilisation d'un canevas se traduit par l'insertion dans la maquette de la partie centrale d'une balise TABLE. Suivant la disposition voulue des parties les unes par rapport aux autres, certaines cellules (balise TD) de la balise TABLE contiennent les parties du canevas.
Il est possible, en utilisant du code Javascript, de déplacer les parties d'un canevas à une position donnée dans la page centrale lorsque la page Web se charge dans le navigateur.
Il est ainsi possible de passer d'une mise en page tabulaire des parties d'un canevas à une mise en page sous la forme de bloc (DIV) en utilisant des exemples de mise en page disponibles sur Internet. Des exemples de mise en page possible sont accessibles à l'adresse suivante :
http://www.alsacreations.com/static/gabarits/
Les parties (haute, basse, droite et gauche) peuvent être déplacées :
- soit dans une balise conteneur (un DIV par exemple) définie dans la partie centrale,
- soit avant une balise donnée définie dans la partie centrale,
- soit après une balise donnée définie dans la partie centrale.
Seules les maquettes de la partie centrale (programme affecté au canevas) doivent être modifiées. Aucune modification sur l'objet canevas et les programmes Adélia Web des parties haute, basse, droite et gauche n'est a fournir.
Soit un canevas CANEVAS_DIV contenant :
- un programme DIV_HAUT comme entête de page (nom d'objet classe DIVH),
- un programme DIV_BAS comme pied de page (nom d'objet classe DIVB),
- un programme DIV_GAUCHE comme partie gauche servant de menu de navigation dans le site (nom d'objet classe DIVG).
Ce canevas est associé à un programme DIV_CENTRE contenant la partie centrale du canevas.
Etape 1
Définir la nouvelle mise en page des parties (haute, basse, droite et gauche) du canevas dans la maquette de la partie centrale.
Dans la maquette du programme DIV_CENTRE, rajouter les balises DIV servant de réceptacle aux parties du canevas.
Exemple de mise en page :
<!-- DIV contenant le programme DIV_HAUT --> <div id="entete"></div> <!-- DIV contenant le programme DIV_GAUCHE --> <div id="navigation"></div> <!-- DIV contenant la partie centrale --> <div id="contenu"></div> <!-- DIV contenant le programme DIV_BAS --> <div id="pied"></div>
Chaque nouveau DIV des parties à déplacer (ici les parties haute, gauche et basse) doit avoir un attribut ID.
Etape 2
Ajouter la classe CSS :
#AdeliaLayout_CANEVAS_DIV {
display:none;
}
soit dans la maquette de la partie centrale (programme DIC_CENTRE), soit dans la feuille de style associée au canevas CANEVAS_DIV.
Etape 3
Dans la balise HEAD de la maquette de la partie centrale, inclure ce fichier Javascript.
Ce fichier contient les API à utiliser pour déplacer les parties du canevas.
Puis inclure une balise SCRIPT contenant le code Javascript permettant de déplacer vos parties :
<script>
function convertLayoutToDiv ()
{
var layoutName = arguments[0];
// Déplacement de la partie haute
moveLayoutTopPart (layoutName, arguments[1], arguments[2], arguments[3]);
// Déplacement de la partie basse
moveLayoutBottomPart (layoutName, arguments[4], arguments[5], arguments[6]);
// Déplacement de la partie gauche
moveLayoutLeftPart (layoutName, arguments[7], arguments[8], arguments[9]);
// Déplacement de la partie centrale et suppression de la balise TABLE servant d'implémentation au canevas
moveLayoutCentralPart (layoutName);
}
AWS.AWSGLOBALS.BodyLoaded.addExec(convertLayoutToDiv, window, ['CANEVAS_DIV', 'DIVH', 'entete', 0, 'DIVB', 'pied', 0, 'DIVG', 'navigation', 0]);
</script>
Etape 4
Si vous avez défini une couleur de fond ou une image de fond à une des parties du canevas alors rajouter la classe CSS suivante :
Exemple : Dans la partie haute, une couleur de fond "#00FF00" et une image de fond "../images/fondHaut.jpg" ont été définies dans les propriétés du canevas
#entete {
background-color:#00FF00;
background-image:URL(../images/fondHaut.jpg);
}
Si vous avez défini un nom de classe CSS à une des parties du canevas alors rajouter cette classe dans la déclaration de la balise DIV associée :
Exemple : Dans la partie haute, la classe header a été définie dans les propriétés du canevas
<div id="entete" class="header"></div>
Etape 5
Définir des classes CSS #entete, #navigation, #contenu et #pied et les enrichir des attributs de positionnement voulus pour positionner les parties du canevas les unes par rapport aux autres.
Articles connexes