Créer sa page
perso
|
|
Page -
25
|
Liens hypertexte et
Cadres invisibles
Bases de départ :
TARGET
Le cadre "gauche" reçoit en général le
Menu et le cadre "droite" reçoit souvent
Accueil au départ qui est ensuite remplacé
à la demande. Rien ne s'oppose à d'autres
dénominations, mais il faut encore poursuivre dans le cadre de
l'exemple choisi au départ.
Vous allez créer des liens hypertexte dont le début
du code est semblable à ceux utilisés dans les pages
ordinaires sans cadres, mais avec un attribut supplémentaire
TARGET=droite (ou gauche dans
notre exemple)
Cet attribut sert à indiquer au navigateur où il doit
ouvrir le fichier que vous venez de cliquer.
fig.1 
Dans une page entière qui remplace une autre page
entière, comme il arrive dans les sites ne comportant pas de
cadres, il y a simple substitution de fichier et pas de
problème de positionnement.
Or ici avec des Cadres, il n'existe pas de substitution
défini par le lien habituel et vous allez devoir
préciser le nom (NAME) du cadre où le fichier
appelé va devoir se loger.
Supposez que vous cliquez sur "lundi" dans dans le cadre gauche de
la fenêtre et vous avez ici deux possibilités :
1-
Vous choisissez
TARGET="gauche" et le fichier
"lundi.htm" vient remplacer le fichier "menu.htm", ce qui peut
exister si vous présentez un autre Menu différent tout
en n'oubliant pas alors de conserver la possibilité de revenir
en arrière à la première position.
2-
Plus fréquent, vous choisissez
TARGET="droite" et le
fichier "lundi.htm" vient remplacer le fichier "accueil.htm"
actuellement visible sur le schéma ci-dessus.
Voici le code qui va être placé sur le mot "lundi"
qui se trouve dans le fichier "menu.htm" :
<A HREF="lundi.htm"
TARGET="droite">lundi</A>
-lundi.htm : nom du
fichier appelé
- TARGET="droite" : cadre désigné
pour recevoir le fichier appelé
- lundi : nom
correspondant au fichier appelé et qui porte le lien (souvent
bleu et souligné)
Options de
l'Attribut
TARGET=
Vous abordez ici une particularité de désignation
des liens qui autorise plusieurs variantes d'affichage :
_blank = vous
ouvrez le fichier appelé dans une nouvelle fenêtre du
navigateur, et donc en pleine page, mais lien à
prévoir pour revenir sur votre Site sans perdre le
visiteur.
_self
= vous ouvrez le fichier appelé dans le
même cadre où est affiché le lien que vous
cliquez. C'est le cas expliqué dans le n°1
légèrement plus haut dans cette page et en fait vous
obtenez le même résultat sans ajouter de TARGET.
_parent = d'un emploi
assez rare avec affichage dans le cadre de second niveau.
L'utilisation de cette option n'est pas évidente et je propose
un exemple dans un Fichier à 4 Cadres. (Fin de page
suivante)
_top = vous ouvrez le
fichier appelé en pleine page dans la même
fenêtre du navigateur que vous visualisez à cet
instant. Prévoir lien pour revenir éventuellement page
avec frames.
exemple: Vous avez une page sans frames qui ouvre votre
Site et se nomme donc "index.htm". Puis de cette page vous avez un
lien qui ouvre un fichier
"programme.htm" par exemple, et qui
contient 2 frames.
Le fichier "menu.htm" à gauche, le fichier
"contenu.htm" à droite.
En supposant que vous vouliez revenir depuis
votre frame de droite dans le fichier initial "index.htm", vous allez
placer un lien hypertexte (par ex : Accueil) qui vise la page pleine
qui correspond ici au fichier "index.htm", et voici votre lien avec
le target_top
<A HREF="index.htm" TARGET="_top"><FONT
SIZE="+1"><B>Accueil</B></FONT></A>
Pour visualiser un exemple, cliquez
>>>>>
ici
....(retour assuré)
Instruction
BASE
TARGET=
Supposez maintenant que dans votre Site vous ayez tous les Noms de
votre menu situé dans le cadre "gauche" aient les liens qui
tendent vers le cadre "droite", ce qui est souvent le cas.
Au lieu de répéter sur chaque nom un lien avec
TARGET="droite", vous allez placer en haut de page entre les tags
HEAD, où se trouve aussi le Titre du fichier ou du Site entre
<title>et </title> :
<HEAD>
<BASE TARGET="droite">
</HEAD>
Dites...
ça va durer longtemps les TARGET ??
Cadres invisibles
Il est possible de présenter plusieurs pages ou tout le
Site à partir de cadres mais sans donner l'impression parfois
désagréable du partage de la fenêtre
visualisée. Votre goût et le contenu de vos pages sont
bien sûr des facteurs clés qui déterminent
l'utilisation de cet artifice :
-Il faut que les pages aient
toutes la même
couleur de fond.
-Il faut appliquer obligatoirement les cadres "jointifs" comme
présentés page précédente, avec le code
BORDER=0 FRAMEBORDER=0
framespacing=0
fig.2
Vous avez dans cet exemple trois cadres distincts qui sont
:
-le cadre "gauche" qui sert de
Menu
- le cadre "droite" qui
présente pour cet exemple le fichier Chiens
- ce cadre "droite" est en fait
un fichier divisé en deux cadres horizontaux
"haut" et
"bas".
Ainsi dans le cadre "haut" je
sélectionne suivant mon bon plaisir un des articles qui porte
un lien qui va faire ouvrir dans le cadre
"bas" le fichier correspondant : ici un
chien de garde de boîte aux lettres :-))))
Vous pouvez revenir sur le Menu Paris et si
vous le souhaitez présenter des vues de la capitale suivant le
même principe.
Voici les codes appropriés à cet exemple :
Cadre index.htm
<HTML>
<HEAD>
<TITLE>Exemple Cadres</TITLE>
</HEAD>
<FRAMESET COLS="15%,1*" border=0 frameborder=0
framespacing=0 bordercolor="#ff0000">
<FRAME SRC="menu.htm" NAME=gauche SCROLLING=no MARGINWIDTH=0
MARGINHEIGHT=0 frameborder=0>
<FRAME SRC="accueil.htm" NAME=droite SCROLLING=no MARGINWIDTH=0
MARGINHEIGHT=0 frameborder=0>
</FRAMESET>
</HTML>
Fichier menu.htm
<HTML>
<HEAD>
<TITLE>menu</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9966">
<P ALIGN=center><A HREF="menu.htm" TARGET=droite><FONT
SIZE="+2"><B>Menu</B></FONT></A>
<P ALIGN=center><A HREF="paris.htm"
TARGET=droite><FONT
SIZE="+1"><B>Paris</B></FONT></A>
<P ALIGN=center><A HREF="chiens.htm"
TARGET=droite><FONT
SIZE="+1"><B>Chiens</B></FONT></A>
</BODY>
</HTML>
Cadre chiens.htm
<HTML>
<HEAD>
<TITLE>Chiens</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%" border=0 frameborder=0
framespacing=0>
<FRAME SRC="races.htm" NAME=haut
MARGINWIDTH=0 MARGINHEIGHT=0 frameborder=0>
<FRAME SRC="bunny.htm" NAME=bas
MARGINWIDTH=0 MARGINHEIGHT=0 frameborder=0>
</FRAMESET>
</HTML>
Fichier
races.htm
<HTML>
<HEAD>
<TITLE>Races de chiens</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9966">
<P><FONT SIZE="+1" COLOR="#0000FF"></FONT><FONT
SIZE="+1"
COLOR="#330000"><B>Chiens</B></FONT>
<P><A HREF="chasse.htm"><FONT SIZE="+1"
COLOR="#0000FF"><B>-chasse</B></FONT></A>
<P><A HREF="garde.htm"><FONT SIZE="+1"
COLOR="#0000FF"><B>-garde</B></FONT></A>
<P>>A HREF="avalanche.htm" TARGET=bas><FONT SIZE="+1"
COLOR="#0000FF"><B>avalanche</B></FONT></A>
</BODY>
</HTML>
Fichier bunny.htm
<HTML>
<HEAD>
<TITLE>BUNNY </TITLE>
</HEAD>
<BODY BGCOLOR="#FF9966">
<P><FONT COLOR="#330000"><IMG SRC="bunny.gif"
WIDTH=150 HEIGHT=105 ALIGN=bottom><BR>
Bunny le voyou</FONT>
</BODY>
</HTML>
Il faut noter combien l'effet produit est saisissant et, cet
exemple utilisé parfois avec bonheur.
Sommaire Page perso
Tous
droits réservés © 1997-2002.
aidenet.com
|
