Bonjour à tous,

Quelqu'un peut-il me dire si il a résussi à faire cde que Arnaud nous explique?

Je n'ai jamais réussi à refaire ceci. Te serais t'ilpossible Arnaud de m"envoyer une copie du projet car la je ne comprends vraiment rien.

Bien cordialement,

Marc.

Création d'un menu avec Website X5 V10 et V10 pro similaire à celui présent sur http://www.aito-studio.fr/test/index.html
Version Website X5 utilisée : WS X5 V10 PRO

Etape1 du logiciel :Nouveau modèle (modèle personnalisé vide)

• Modèle personnalisé : placer un arrière plan à l'aide d'un pattern avec une disposition "Mosaïque"
• Définissez la largeur et la hauteur des éléments en-tête, menu et contenu comme bon vous semble :
• dans l'exemple : largeur = 1000px et hauteur du menu = 72px

Rendez-vous dans un logiciel de traitement d'images
comme The Gimp par exemple (gratuit) et ouvrez une fenêtre de travail/Plan de travail qui a les mêmes dimensions que votre menu (environ 5px de plus en H et l si vous souhaitez placer une ombre).
Pour faire très simple, ouvrez un calque au-dessus de votre plan de travail de base et tracez y un rectangle, diminuez l'opacité de celui-ci en agissant sur le réglage d'opacité du calque (pour l'exemple j'ai reglé à 30 % l'opacité).
Sauvegardez le tout en .png (qui permet de sauvergarder la transparence des objets) et retour dans Website X5.

Retour dans Etape 1 du logiciel / modèle personnalisé / Menu / Propriétés graphiques, ajoutez l'image rectangle précédement créée dans le champ "Fichier image", Disposition = "Ne pas répéter", Alignement = "Centre" et couleur de fond = "Transparent".
Dans propriétés de contenu jouez avec les marges du menu pour le placement de ce dernier et faire coïncider les éléments Textes et mouseover du menu (ici j'ai 10,10,12,20) et définissez un alignement (ici j'ai selectionné "A gauche")

Rendez-vous à présent à l'Etape 4 du logiciel :Menu Principal

Définissez la largeur du menu (ici 120px) et réglage des marges (ici 10; 11), la distance entre les boutons (2px), puis sélectionnez une police de caractère originale, reglage de sa taille, et de sa position (centre), affichage : "Texte en tant qu'image antialias"
Allez dans l'onglet Eléments de menu et réglez les couleurs du menu survolé, à votre goût.
Allez dans l'onglet Style 3D et definissez une forme pour votre menu (rectangle, arrondis, etc ...)

Retour à l'Etape 4 du logiciel : Liste déroulante

• Onglet Général, définissez une largeur (ici 160px) et des marges, choix d'une police de caractères, alignement (gauche) et régler dans options : "rebond supérieur gauche", c'est en gros l'animation qu'aura le sous menu au passage du pointeur de la souris.
• Onglet Eléments de menu : définissez les couleurs du sous menu, et sur élements sur mouseover insérer une icône de puce (petit visuel créé en .png et de très petite taille genre 20px X 20px)
• Onglet Style 3D : réglez la forme du sous menu (ici Rectangle arrondi à droite) et cochez la case "fusionnez la forme des boutons"

Faire les réglages des marges pour que tous les éléments correspondent bien et validez.

Ci-joint une copie du fond du menu que j'ai créé ainsi que le bouton "puce", pour faire des essais 

La police de caractères utilisée est Christopherhand.ttf (voir lien ci-dessous)

http://www.dafont.com/fr/search.php?q=christopherhand

Bon courage pour les essais 

Cordialement,

Arnaud