FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Couches

Sauter la navigation

 

 
 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?

Question 1 Quel est l'intérêt d'une couche? Pouvez vous m'expliquer ce que c'est exactement?

Réponse 1 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">

Retour au début

2 - Les outils de FrontPage

Question 2 Avec FrontPage, quels sont les outils pour gérer les balises DIV?

Réponse 2 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.

Retour au début

3 - Options non disponibles dans FrontPage

Question 3 Au menu Insertion, l'option Couche est grisée (FrontPage 2003). Ou, dans le volet Comportements, le bouton Insérer est désactivé.

Réponse 3 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.

Retour au début

4 - Volet Couches et volet Comportements

Question 4 Lorsque j'affiche le volet du comportement, la liste de mes couches n'apparaît pas...

Réponse 4 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.

Retour au début

5 - Couche centrée et ajustable

Question 5 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?

Réponse 5 Voici un très bel exemple d'une couche centrée qui s'ajuste selon la taille de la fenêtre: http://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:
http://www.openweb.eu.org/articles/initiation_centrage/
http://edu.ca.edu/article207.html
http://www.alsacreations.com/astuce/lire/77-aligner-des-lments-horizontalement-sans-tableau.html

Retour au début