Menus personnalisés

Voir le sujet précédent Voir le sujet suivant Aller en bas

Menus personnalisés

Message par oroland le 10/6/2008, 19:29

Pourquoi un menu personnalisé?

-Meilleur référencement
-Moins d'erreur d' interprétation des navigateurs
-Adapter graphiquement le menu à votre site, votre style
-Sortir du menu type 'iWeb'
-Augmenter les possibilités techniques de votre menu

Pour se créer des menus personnalisés, la technique est simple: nous utiliserons du texte qui serviront de lien vers une autre page.





1/ Décocher la case "afficher le menu de navigation" dans l' inspecteur




Le menu type iWeb disparaît.


Imaginons que votre menu comporte trois liens "accueil" et "contact" et "tarifs". Deux cas se présentent:
-Vous pouvez créer une zone de texte par mot
-Vous pouvez créer une seule zone de texte et y placer les mots



Premier cas: une zone de texte par mot du menu:
Avantage: Vous pouvez facilement organiser vos menus sur votre page en les déplaçant.




Second cas: une zone de texte pour tous les mots du menu:
Aller à la ligne après chaque mot ou utiliser les "puces". (je vous laisse découvrir)




La suite du tutoriel est la même pour les deux cas.

1/ Créer ou non un cadre autour du menu, une couleur de fond ect..
(je vous conseille de commencer simplement...)





2/ Disposer les zones de texte comme vous le souhaitez (horizontal, vertical, diagonal...)

L'outil "disposition" et "répartir les objets" est utile pour conserver le même espace entre les zones de texte.




3/ Dupliquer la page en cours trois fois et re-nommer les "accueil", "contact" et "tarifs"




4/ Sélectionnez les mots (pas la zone de texte) et créer les liens vers les pages.




accueil --> Page "accueil"
tarif--> page "tarif"
contact--> Page "contact"

Appliquez sur les trois pages. (Copier/coller peut être utile...)

5/ Personnaliser le lien si vous le souhaitez (au passage du pointeur, au clic, la couleur ect...)

Sélectionnez le mot puis Inspecteur > Lien > Format
Le clic sur "usage des nouveaux liens de la page" appliquent votre modification à tous les futurs liens.




6/ Cocher la case "rendre les liens hypertexte actifs" si vous voulez tester vos liens dans iWeb et décochez là le reste du temps.


(cela ne change rien sur les liens lors de la mise en ligne de votre site web, mais uniquement dans iWeb)

Si vous souhaitez par exemple modifier la couleur du cadre ou le mot "accueil" ou que vous souhaitez re-organiser les menus, au moindre clic sur le mot, vous allez changer de page, cela peut vite être gênant....




7/ Publiez et vos menus sont actifs.

avatar
oroland
Simple Membre

Messages : 26
Inscription : 28/03/2008 Masculin Age : 51
Localisation : Namur (Belgique)
Version iWeb : A remplir!
Publication : MobileMe

http://www.oroland.eu

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par koeklin le 11/6/2008, 10:12

oroland a écrit:
Pour le css, je ne sais même pas ce que ça veut dire. Je vais créer mon menu manuellement.
1- Oublie le CSS trés happy , je ne suis pas favorable au bidouillage du code d'iWeb

2- pour faire un menu vertical le truc pratique c'est les listes
inspecteur > inspecteur de texte(T) > onglet "Listes"
on trouve aussi 4 types de listes dans les barres latérales des pages "fiches personnelles". De haut en bas on trouve:
  1. non numérotées sans puces (Nom : Olivier Martin) c'est bien une liste à part entière
  2. non numérotées avec des puces d'images (Mes albums photo)
  3. numérotées (Mes chansons préférées)
  4. non numérotées avec des puces de textes (Mes liens préférés)

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par oroland le 11/6/2008, 10:39

Merci, l'astuce des listes fait gagner un peu (beaucoup) de temps.

Je vais pouvoir refaire mes pages proprement et republier bientôt.
avatar
oroland
Simple Membre

Messages : 26
Inscription : 28/03/2008 Masculin Age : 51
Localisation : Namur (Belgique)
Version iWeb : A remplir!
Publication : MobileMe

http://www.oroland.eu

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par Invité le 11/6/2008, 11:48

oroland a écrit:Merci, l'astuce des listes fait gagner un peu (beaucoup) de temps.

Je vais pouvoir refaire mes pages proprement et republier bientôt.

Tout dépend de l'aspect que tu veux donner à ton site, les zones "texte" et "figures" pouvant être personnalisées ce qui au final peut donner un certain "look" au site.

Invité
Invité


Revenir en haut Aller en bas

Re: Menus personnalisés

Message par DrOSX le 8/10/2010, 11:22

Parfois une zone de texte suffit... On lui applique une ligne et un lien sur le texte.
Comme le menu ci dessous par exemple.




Il est possible aussi de créer une figure avec une zone de texte à l'intérieur. Le lien pouvant être sur la figure ou la zone de texte. Attention, il faut vérifier l'affichage sur (Browershots), car ce genre de superpositions entraine souvent des erreurs.

Bientôt un tutoriel sur le sujet...

-------------------
Pas de support par M.P - Si vous avez des soucis de connexion, un POST est crée pour vous
avatar
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par Yanik le 8/10/2010, 13:27

Pour ceux qui débutent :
Méthode simple pour fabriquer un menu vertical. Pas besoin de créer plusieurs blocs texte, on tape et on va à la ligne avec la touche de validation, par exemple :
Accueil
Photos
Liens
Etc.
On obtient ainsi un menu avec un seul bloc texte qu'il suffit de personnaliser comme l'indique Koeklin avec l'inspecteur : Texte/liste/puces et numérotation.
Ensuite, il suffit de créer les liens sur chaque mot, ligne, selon le choix que vous avez fait.
Pour ne plus voir le menu du modèle iWeb, c'est dans l'inspecteur/page. Décochez : "afficher le menu de navigation".
avatar
Yanik
iWeb - Modo

Messages : 916
Inscription : 03/11/2007 Masculin Localisation : France, Banlieue Parisienne Est 94
Version iWeb : A remplir!
Publication : MobileMe

http://web.me.com/kereol2/Site/Bienvenue.html

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par DrOSX le 21/10/2010, 13:42

koeklin a écrit:C'est dommage de fermer le sujet parce que c'est aussi un moyen de disserter sur nos méthodes : par ex. les menus horizontaux je ne fais pas comme toi j'applique la règle du "une zone de texte, tous les liens dedans" mais je sépare chaque lien par plusieurs espaces inséquables ceci dans le but de limiter le nombre de zones de textes et de favoriser le copier coller des textes

Dans ce tutoriel, Koeklin, je parle des deux méthodes (en rouge) avec une seule zone de texte ou plusieurs. Wink
Une seule zone avec des espaces a souvent des mauvaises répercussions sur l'affichage selon les navigateurs...(à mon expérience.). j'opte maintenant pour une zone par mot.

De plus, je trouve comme prècisé dans le tuto que l'on peut plus facilement moduler les menus et les déplacer partout ou l'on veut. "qui peut le plus peut le moins..."



Dernière édition par jeancharleslast le 8/1/2011, 14:29, édité 1 fois
avatar
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par koeklin le 21/10/2010, 13:54

Ben en aparté, actuellement je suis très content de l'affichage de mon site sur IE8, ça n'a pas toujours été le cas. Par contre j'ai dû bazarder ma page d'accueil de blog à cause d'IE qui rencontrait d'énorme difficultés à l'afficher correctement (un problème avec le récapitulatif de blog). Elle est toujours là mais on ne peut plus accéder, redirigé vers l'actuelle page d'accueil (qui contient tous les liens du site : un super mega menu cela dit en passant) grâce à une redirection 301.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Menus personnalisés

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum