Méthode 1 : en utilisant les fragments HTML


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:

<div></div>

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


Méthode 2 : en utilisant les zones de textes


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)


  1. Oui mais...


  2. 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.


Méthode 3 : en utilisant l’entête, la zone de navigation, le contenu et le pied de page


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.




  1. un menu , dans le code HTML : nav_layer

  2. une entête , dans le code HTML : header_layer

  3. un contenu , dans le code HTML : body_layer

  4. 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 :

  1. #body_content (le corps de votre page)

  2. #nav_layer  si la zone de menu  est la plus haute de votre site (que le menu soit affiché ou non).

  3. #header_layer  si la zone d’entête  est la plus haute de votre site

  4. #top  la plus simple à retenir mais #top est  incompatible avec certains versions anciennes de navigateurs 

  5. # 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