FAQ Expression Web, SharePoint Designer et FrontPage

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

Menus

Sauter la navigation

 

 

 1 - Créer un menu déroulant
 2 - Les menus formatés avec des styles

1 - Créer un menu déroulant

Question 1 Dans mes pages Web, le menu est assez long. Comment faire pour n'afficher que les titres, puis obtenir les items du menu en cliquant sur les titres? Autrement dit, est-il possible de créer un menu déroulant avec FrontPage?

Réponse 1 Il n'y a pas de menu déroulant tout fait dans FrontPage. Le JavaScript, autrefois utilisé pour créer ce type de menu, est de plus en plus souvent remplacé par des blocs de liens colorés à l'aide de feuilles de style, ce qui donne toujours un résultat accessible pour tous.

Voici une page détaillant fort bien les commandes à utiliser pour créer différents modèles de menus, tout en conservant l'accessibilité même lorsque le JavaScript est désactivé:
http://www.pompage.net/pompe/deroulants/
http://www.cireasy.com/menu-deroulant-en-css/

Et les règles à suivre pour conserver l'accessibilité dans les menus:
http://www.alsacreations.com/article/lire/571-accessibilite-des-menus-de-navigation-en-cascade.html

Retour au début

2 - Les menus formatés avec des styles

Question 2  Comment faire personnaliser un menu de liens hypertexte tout en conservant leur accessibilité?

Réponse 2 Actuellement, les menus sont souvent préparés en créant d'abord une liste avec des puces. Ensuite des formats y sont appliqués à l'aide de styles CSS pour masquer les puces, colorer l'arrière-plan, placer le tout à l'horizontal ou non... Dans ce cas, le menu devient vraiment accessible pour tous car il peut s'afficher dans tous les navigateurs.

Par exemple, si vous créez un site à partir des modèles fournis par Expression Web, vous verrez que le modèle suit ce principe. Pour repérer les commandes utilisées, affichez d'abord le Sélecteur de balise rapide (au besoin, voir au menu Affichage), puis cliquez dans la barre de navigation. Les balises utilisées à cet endroit s'inscrivent dans la barre d'outils du Sélecteur, juste au-dessus de l'espace de travail:
    <div#navigation> <ul> <li> <a>

Dans la feuille style2.css, voyez ensuite quelles sont les instructions relatives à cette division nommée #navigation, comme celles-ci:

    #navigation li {
    float: left;
    }
    #navigation a {
    display: block;
    }

Vérifiez ensuite le résultat dans différents navigateurs, en désactivant au besoin les images et le JavaScript. Normalement, les liens doivent être fonctionnels quand même.


Pour compléter, voici des tutoriels utilisant des styles:
http://www.alsacreations.com/page/modelesmenus/
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
http://ressources.mediabox.fr/tutoriaux/expression/expression_ web/menu_horizontal
http://ressources.mediabox.fr/tutoriaux/expression/expression_ web/menu_bouton

Retour au début