1 - Qu'est-ce qu'une couche?
2 - Les outils de FrontPage
3 - Options non disponibles dans FrontPage
4 - Volet Couches et volet Comportements
5 - Couche centrée et ajustable
1 - Qu'est-ce qu'une couche?
Quel est l'intérêt d'une couche? Pouvez vous m'expliquer ce que c'est
exactement?
Une couche, c'est comme un papier calque superposé au contenu d'une page
Web. Une couche peut contenir du texte, des images, des liens... et être
déplacée en la glissant avec la souris. Elle sert à empiler différents
éléments puis à les positionner de façon précise, indépendamment du
reste de la page car sa position est fixée selon un coin de la fenêtre
et non pas relativement aux autres éléments dans la page.
Au niveau du code HTML, une couche se définit avec la balise <div> et un
positionnement absolu, un peu comme ceci:
<div style="position: absolute; z-index: 1; left: 160px; top: 50px;
width: 250px; height: 130px" id="couche1">
2 - Les outils de FrontPage
Avec FrontPage, quels sont les outils pour gérer les balises DIV?
Voici d'abord un pré-requis (FrontPage 2002 et 2003): au menu Outils,
Options de page, onglet Général, cocher l'option "Utiliser les balises
DIV pour les opérations de positionnement". Ensuite, une façon simple
d'appliquer la balise DIV serait d'afficher la barre d'outils Position,
de sélectionner l'élément à encadrer (paragraphe, image, tableau...)
puis de cliquer sur le premier bouton de la barre d'outils Position
("Position absolue").
Par la suite, la barre d'outils Position permet de préciser
l'emplacement exact de la couche sélectionnée et de modifier son index-Z
(ici le plus grand chiffre indique la couche placée au-dessus des
autres).
Dans FrontPage 2003, une couche se prépare aussi avec le menu Insertion,
Couche. Puis, un double-clic sur la bordure affiche le volet Couches
pour:
- rendre une couche visible ou invisible en cliquant à gauche de son nom
pour obtenir un œil ouvert ou fermé dans la colonne Visibilité;
- définir l'ordre de plan (de superposition) d'une couche, en changeant
le chiffre inscrit dans la colonne de l'index Z, à gauche de son nom;
- choisir les traits et couleurs avec le lien Bordure et trame;
- définir l'emplacement, la taille et l'ordre de plan avec le lien
Positionnement (qui offre les mêmes options que la barre d'outils
Position);
- ouvrir le volet Comportements pour insérer des événements comme
onclick ou onmouseover.
3 - Options non disponibles dans FrontPage
Au menu Insertion, l'option Couche est grisée (FrontPage 2003). Ou, dans
le volet Comportements, le bouton Insérer est désactivé.
Pour autoriser la création des couches, au menu Outils, Options de page,
dans l'onglet Opérations d'auteur, cocher CSS 2.0 (positionnement). Pour
activer les comportements, dans le même menu, choisir la version du
schéma: Internet Explorer 5, puis cocher l'option JavaScript/JScript.
4 - Volet Couches et volet Comportements
Lorsque j'affiche le volet du comportement, la
liste de mes couches n'apparaît pas...
Ce volet Comportement permet d'insérer des instructions en JavaScript,
comme un texte apparaissant lors d'un clic de souris (ce qui ne
rencontre malheureusement pas les critères d'accessibilité...)
Les deux volets Comportements et Couches fonctionnent différemment. Avec
le premier, on voit les comportements appliqués à un seul élément à la
fois, celui qui est sélectionné dans la page. Tandis que le volet
Couches affiche la liste des couches dans la page, mais uniquement
celles avec une position absolue... (ce qui peut être modifié dans le
code HTML ou avec le premier bouton de la barre d'outils Position).
Pour réafficher ces volets au besoin, voir le menu Format - Couches, ou
Format - Comportements.
5 - Couche centrée et ajustable
Comment faire pour qu'une couche se trouve constamment au milieu de la
fenêtre du visiteur et ce peu importe la taille de la fenêtre?
Voici un très bel exemple d'une couche centrée qui s'ajuste selon la
taille de la fenêtre:
https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
Cet effet est obtenu en définissant les marges de la couche (div). Vous
pourriez faire un essai en copiant ceci dans le code Html d'une nouvelle
page, avant la balise </head>:
<style type="text/css">
<!--
div#content {margin: 5em 5em 10em 5em; border: solid #963;}
-->
</style>
Après la balise <body>, inscrivez une couche avec le même id:
<div id ="content">Test... </div>
Puis testez le tout en réduisant la taille de la fenêtre dans différents
navigateurs.
Pour compléter, voici d'autres articles:
https://www.openweb.eu.org/articles/initiation_centrage/
https://www.alsacreations.com/astuce/lire/77-aligner-des-lments-horizontalement-sans-tableau.html