Commentaires   |   Accueil     Archives     Précédent     Suivant    Forum     Mon Twitter     Débuter sur Mac

Construction du menu en ligne :

Aller sur le site cssmenumaker

Choisissez un menu drop down parmi leur sélection

j'ai choisi le menu Massive Blue Drop Down comme exemple de ce tutoriel.

Appuyer sur le bouton customize puis le bouton Add Button sur la page suivante

Chaque ligne de cette page correspond à un bouton présent sur la ligne principale du menu

Pour chaque ligne, choissez un titre (Title), un lien (Link), l'option dans la colonne Cible (Target) n'a pas d'importance (le systeme bugue et revient à l'option "Same window" à chaque changement de page)

Pour les liens je vous conseille de mettre l'URL de vos pages : http://www.mondomaine.com.monsite/mapage.html




Apres plusieurs lignes voici ce que ça donne :




En appuyant sur  le bouton + à droite de chaque ligne, on accède au sous menu du bouton, c'est le même principe

 



Une fois le menu terminé vous pouvez le visualiser "Preview menu"  Profitez du moment que vous êtes sur cette page pour avoir une évaluation de la taille de menu une fois déployé (sa hauteur maximale et sa largeur) par ex. avec des captures d'écran.



Sa longueur maximale (une fois le dernier sousmenu déployé) est environ de 580 px, mon widget aura aura au moins 580 px de large, j'ai choisi 800 px utérieurement.



Sa hauteur maximale est de 180 px env, sa sera la hauteur de mon widget


et dans cette page de visualisation le télécharger "Step 3: download" puis "download now".


Dans votre finder renommez le dossier  téléchargé  dropdown ,

dans ce dossier  dropdown, il y a

  1. le dossier menu où se trouvet le dossier images et le fichier menu_style.css

  2. les fichiers installation_instruction.html et sample.html


une étape code HTML :


1. code à coller dans une page menu.html nouvellement créée :


Créez une page menu.html avec un editeur de texte pour le code HTML (Fraise, textWrangler, texteMate etc. , mais éviter TextEdit)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

<!--Collez ici le code  que vous avez copié sur la page installation_instruction.html-->

</body></html>



2. Coller le code donné dans la page nstallation_instruction.html :


Dans ce code remplacez la ligne <!--Collez ici le code  que vous avez copié sur la page installation_instruction.html--> par le code trouvé dans la page installation_instruction.html


3. Quelques modifications :


Dans ce code que vous venez de coller, certaines choses sont à modifier pour que vos iens s'ouvrent correctement dans iWeb sinon tous vos liens souvriront dans l'emplacement du widget

le menu sera dépourvu de style et se présentera sous forme d'une simple liste verticale


a. Crorrection de l'ouverture dans la fenêtre du navigateur :


chaque bouton est composé de la façon suivante :


<li><a href="http://iweb.debutersurmac.com/" target="_self" >Accueil</a>
</li>


remplacé target="_self" (ou target="_blank")

par target="_top"si vous voulez que les liens s'ouvrent dans la même fenêtre de navigateur.

par target="_blank" si vous voulez que les liens s'ouvrent dans une nouvelle fenêtre de navigateur.


<li><a href="http://iweb.debutersurmac.com/" target="_top" >Accueil</a>
</li>



b. Correction du chemin du fichier de style :

Dans le code , enlevez la première la première barre / avant menu/menu_style.css


<style media="all" type="text/css">@import "/menu/menu_style.css";</style>


Pour obtenir


<style media="all" type="text/css">@import "menu/menu_style.css";</style>



Sauvegardez votre page menu.html et placez là dans votre dossier dropdown


Upload de fichiers :


et télécharger ce dossier sur votre serveur dans le dossier Racine de votre FTP ou le dossier iDisk/Web/Sites de MobileMe

Pour cela, je vous laisse regarder la page consacrée à l'upload de fichier sur votre serveur ( 3. les méthodes traditionnelles)


Dans ce dossier dropdown se trouve la page menu.html que vous avez créée. Récuperez son URL

Par ex:

http://web.me.com/votrepseudo/dropdown/menu.html (MobileMe)
http://www.monsite.com/dropdown/menu.html (FTP avec nom de domaine)
http://votrepseudo.free.fr/dropdown/menu.html (Free)
http://pagesperso-orange.fr/dropdown/menu.html (Orange)


vérifier que le menu s'affiche bien à cette adresse... sinon ce n'est pas la peine de continuer


Iweb - faites une iframe de votre page menu.html:


Ouvrez iWeb

et glissez un widget fragment HTML sur votre page iWeb

Dans ce widget collez le code d'une iframe de la page menu.html


<iframe src="http://web.me.com/votrepseudo/dropdown/menu.html" frameborder="0" width="800" height="180" scrolling="no" allowTransparency="true"></iframe>



Remplacez http://web.me.com/votrepseudo/dropdown/menu.html par la vraie URL de votre page.

Remplacez la valeur de la hauteur (ici 180) par la hauteur maximale de votre menu une fois déployé (une fois le sous menu le haut déployé)

Remplacez la valeur de la hauteur (ici 800) par la largeur maximale (ou plus) de votre menu (une fois le sous menu de droite déployé)


Faites attention à l'endroit où vous placé ce widget : ne pas le placer dans une zone de texte qui contiendrait des liens à cet endroit sinon ceux-ci seront inactifs. une astuce consiste à le mettre au dessus d'une large image


Et publiez

Visitez votre site et vérifier le bon fonctionnement de votre menu.


Les plus , les moins et les alternatives:


Pour être franc, je ne suis pas emballé par cette méthode. J'aime peu les iframes ; elles s'affichent lentement laissant apparaitre un gros espace blanc au chargement du contenu du widget (dommage mon site n'est pas blanc, ça aurait été plus discret).

Les liens de vos zones de textes recouverts par le widgets sont inactifs

Ses avantages :

  1. c'est la méthode la plus simple, je pense.

  2. en cas de modification du menu sans modification de la taille widget, un seul fichier est à remplacer (menu.html).


Il existe des alternatives à cette méthode que vous retrouverez sur ce mini-site (en anglais).


La méthode de Wyodor est la plus intéressante, la plus compliquée aussi mais elle permet

  1. de se débarrasser du rectangle blanc au chargement du widget et

  2. d'avoir des liens dans des zones de textes  directement sous le menu