WebSite X5Help Center

 
Marc A.
Marc A.
User

Graphisme  fr

Auteur : Marc A.
Visité 1834, Followers 2, Partagé 0  

Bonjour à tous,

J'aimerais savoir si quelqu'un as une idée sur le menu de navigation de ce site http://www.arkline.com.co/index.html à savoir si il est possible de créer ce type de menu en partant d'un modèle personalisé et configurer à partir des paramètres avancer les eléménts de menu mais je ne vois pas comment ou bien ce menu est il fait à partir de page sans modèle.

CDLT,

Marc

Posté le
10 RéPONSES
S. Arnaud
S. Arnaud
User

Hello Marc,

Il est tout à fait possible de réaliser simplement ce type de menu à partir d'un modèle personnalisé (d'ailleurs celui présent sur le site a été réalisé avec Website X5 V9).

Je me suis livré très rapidement ("comprendre" sans vraiment m'appliquer , à la va-vite ) à cet exercice que l'on peut voir en live sur mon site de test :

http://www.aito-studio.fr/test/index.html

Je vais tâcher de faire un petit tuto pour expliquer tout ça ...

A suivre ...

Cordialement,

Arnaud

Lire plus
Posté le de S. Arnaud
Marc A.
Marc A.
User
Auteur

Bonjour Arnaud en effet j'aimerais comprendre car depuis le début moi j(utilise dreamwevaer pour mes menus que j'integre via html donc en fait je parts toujours de page sans modèle et je ne vois pas comment faire, aurais tu la possiblité de m'envoyer le projet par mail pour que que je comprenne à l'adresse suivante ***

Bien à toi

Marc

Lire plus
Posté le de Marc A.
S. Arnaud
S. Arnaud
User

"Je vais tâcher de faire un petit tuto pour expliquer tout ça ..."

Perso je part également à chaque fois d'une maquette vide (sans modèle) que j'adpate selon mes besoins via les paramètres.

Le tuto arrive sous peu ... patience ...

@+

Cordialement,

Arnaud

Lire plus
Posté le de S. Arnaud
Marc A.
Marc A.
User
Auteur

Merci encore car la je suis un perdu

@+

Marc

Lire plus
Posté le de Marc A.
Marc A.
Marc A.
User
Auteur

Par contre peux tu me dire la police de ton menu de navigation?

Marc

Lire plus
Posté le de Marc A.
S. Arnaud
S. Arnaud
User

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

Lire plus
Posté le de S. Arnaud
Marc A.
Marc A.
User
Auteur

Mille merci à toi je regarde tout ça dans la soirée.

Bonne journée,

Marc

Lire plus
Posté le de Marc A.
Marc A.
Marc A.
User
Auteur

Peux-tu me dire qu'est ce qu'un partten?

Lire plus
Posté le de Marc A.
Marc A.
Marc A.
User
Auteur

De plus je ne vois rien de tous ce que tu décrisà l'étape 1 : et notemment sur les propriétés graphique

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 men

Lire plus
Posté le de Marc A.
Marc A.
Marc A.
User
Auteur

Pire encore car je n'ai la fonctioninserrer un icone de puce  ma version est la suivante website evolution 10.1.10.54

Lire plus
Posté le de Marc A.