Menus personnalisés
4 participants
Page 1 sur 1
Menus personnalisés
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.
-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.
Re: Menus personnalisés
1- Oublie le CSS , je ne suis pas favorable au bidouillage du code d'iWeboroland a écrit:
Pour le css, je ne sais même pas ce que ça veut dire. Je vais créer mon menu manuellement.
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:
- non numérotées sans puces (Nom : Olivier Martin) c'est bien une liste à part entière
- non numérotées avec des puces d'images (Mes albums photo)
- numérotées (Mes chansons préférées)
- non numérotées avec des puces de textes (Mes liens préférés)
Re: Menus personnalisés
Merci, l'astuce des listes fait gagner un peu (beaucoup) de temps.
Je vais pouvoir refaire mes pages proprement et republier bientôt.
Je vais pouvoir refaire mes pages proprement et republier bientôt.
Re: Menus personnalisés
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é
Re: Menus personnalisés
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...
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...
DrOSX- Administrateur
- Messages : 1338
Inscription : 15/10/2007 Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale
Re: Menus personnalisés
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".
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".
Re: Menus personnalisés
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.
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
DrOSX- Administrateur
- Messages : 1338
Inscription : 15/10/2007 Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale
Re: Menus personnalisés
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.
Sujets similaires
» Fond de page personnalisés
» Problèmes de menus!!!
» Des menus déroulants
» Menus Déroulants
» menus iweb predefinis
» Problèmes de menus!!!
» Des menus déroulants
» Menus Déroulants
» menus iweb predefinis
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|