Débuter sur iWeb : des ancres sur un site iWeb

Ancres sur un site iWeb

22 févr. 10

Une ancre est lien vers un endroit précis d’une page Vous pouvez voir un ex. d’ancres sur cette page , ancres faites avec les méthodes décrites ci-dessous.

J’avais proposé une première méthode trop compliquée sur ce blog iWeb il y a un an. Mais depuis plusieurs mois, j’ai découvert une méthode plus facile utilisant des widgets fragments HTML sur un site anglophone : «How to use Anchors in iWeb»

Pour ceux qui ne comprendraient pas l’anglais, je propose une courte VF (dans la méthode 1). Je propose en fin d’article, une deuxième méthode utilisant uniquement des zones de textes

Menu :

Méthode 1 (fragment HTML) - Méthode 2 (zones de textes) - Méthode 3 (zones de pages)

1) Publiez une première fois votre page et récupérez son adresse web.

genre http://www.nomdedomaine.com/nomdusite/nomdelapage.html

2) Revenez dans iWeb et ajouter un widget fragment HTML en lieu et place de l'ancre réduisez sa taille au minimum en hauteur comme en largeur (soit 18px x 75 px)

3) Dans ce fragment HTML ajouter le code suivant :

Code:

Le code à l'intérieur de ce fragment n'a que peu d'importance, c'est juste que je ne peux pas me permettre de rien mettre

mettez le widget fragment HTML là où vous voulez votre ancre.

4) Selectionnez un mot, un groupe de mot ou une image pour faire un lien vers votre ancre

et dans l'inspecteur > inspecteur de lien > lier vers ... une page externe

mettez l'adresse de la page que vous avez récupérez plus haut :

http://www.nomdedomaine.com/nomdusite/nomdelapage.html et ajouter #widget0 s'il s'agit du premier widget fragment html mis sur cette page, #widget 1 s'il s'agit du 2e, #widget2 s'il s'agit du 3e etc.

vous obtenez par ex. :

http://www.nomdedomaine.com/nomdusite/nomdelapage.html#widget0

Pour l’anecdote, sachez qu’il est possible de faire des ancres sans utiliser de fragment HTML, uniquement avec des zones de textes, parce que comme les widgets fragments HTML, iWeb a la bonne idée de les identifier et de les numéroter, si vous n’avez pas eu la mauvaise idée de transformer cette zone de texte en dessin de texte.

Dans ce cas il faut rajouter #id1, #id2 etc. à la fin des adresses de pages (à priori il n’y a pas de #id0 , on commence à 1 (#id1 qui doit correspondre à la zone du titre de la page).

vous obtenez une adresse du type :

http://www.nomdedomaine.com/nomdusite/nomdelapage.html#id0

Voyons cela avec la zone de texte «id10» qui correspond au texte Metropolitan sur ma page d’exemple :

http://iweb.debutersurmac.com/siteiweb/ancre.html#id10

Malheureusement iWeb ne fournit pas le n° d’identification de ses zones de texte

Pour identifier ce numéro :

1. soit vous identifiez vos zones de textes en rajoutant «au petit bonheur la chance» des #id1 #id2 etc. à la fin de vos adresses de pages dans votre navigateur pour identifier le bon numéro.

2. soit vous fouillez le code source de votre page publiée : Il faut donc publier et récupérer dans le code source de la page, par ex. : avec Safari je suis aller sur la page en question , clic droit sur l’arrière-plan du navigateur > Code source

Sur la fenêtre du code source cmd F pour afficher la recherche de mots (ici Metropolitan)

Chaque code de zone de texte est compris dans un paragraphe de lignes commençant par <div id="id+un n°" etc. ici <div id="id10" etc. ajouter #id10 à la fin de l'adresse de votre page html.

Cette méthode d’identification n'est pas possible si votre zone de texte a été transformée en dessin de texte ( voir page «des textes en images» pour plus de détails)

Oui mais...
Le problème posées par ces identification de zones de textes, c’est que leur numérotation change si il vous venaient l’idée d’enlever une ou plusieurs zones plus anciennes. Admettons que vous ayez 10 zones de textes et que vous effaciez la zone «id5», ça ne changera rien pour la numérotaion des 4 premières («id1» à «id4») par contre la «id6» devient la nouvelle «id5», id7 devient «id6» etc.

Les corps des pages d’iWeb (body_content) sont constituées de 4 parties que vous pouvez distinguer si vous afficher la disposition (iWeb > barre de menu > Présentation > Afficher la disposition). ces 4 parties sont identifiée dans le code HTML de votre page publiée.

•un menu , dans le code HTML : nav_layer
•une entête , dans le code HTML : header_layer
•un contenu , dans le code HTML : body_layer
•un pied de page (dans le code HTML : footer_layer

Vous pouvez donc faire une ancre vers le menu, l’entête, le contenu, ou le pied de page en rajoutant respectivement à votre URL de page #nav_layer, #header_layer, #body_layer, #footer_layer,

Par ex.

1. vous pouvez faire une lien vers le haut de votre page en ajoutant à son URL , au choix :

•#body_content (le corps de votre page)
•#nav_layer si la zone de menu est la plus haute de votre site (que le menu soit affiché ou non).
•#header_layer si la zone d’entête est la plus haute de votre site
•#top la plus simple à retenir mais #top est incompatible avec certains versions anciennes de navigateurs
•# parfois.... incompatible avec le navigateur Opera et déconseillé sur les pages de modèle "Photos" qui utilisent "#" pour activer la présentation des images en "grand" format.

Faîtes simples, retenez #top .

Inspecteur > Inspecteur de liens > Lien > Activer comme lien > Lier vers une page externe

Voici un lien possible vers le haut de cette page

http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/2/22_Des_ancres_sur_un_site_iWeb.html#top

2. Un lien vers mon module de commentaires en bas de page

Ce site n’étant pas hébergé sur MobileMe, je ne bénéficie pas de la solution intégré de commentaires qu’offre ce service, j’ai opté pour une solution avec IntenseDebate nécessitant l’ajout d’un code dans un fragment HTML. J’ai déposé ce fragment HTML dans mon pied de page, on accède donc directement au module de commentaires en ajoutant #footer_layer à l’url d’une mes pages. Vous trouverez un lien vers le pied de page (et donc les commentaires) dans le menu en haut de mes pages.

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

Liens :