Chemins et frames - BTS IG Voillaume

Chemins relatifs
Chemin relatif :
par rapport à la page qui contient le lien
Répertoire ‘monsite’
Sous-répertoire 1
‘img’
index.htm
page1.htm
Sous-répertoire 2
photo1.jpg
‘sousrubrique1’
photo2.jpg
srub1.htm
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
1
Ecriture des chemins
Même répertoire : <a href= ”nomfichier.ext” >
Répertoire inférieur :
<a href= ”sousrepertoire/nomfichier.ext” >
Répertoire supérieur : ../
<a href= ”../nomfichier.ext” >
Répertoire voisin : remonter puis redescendre
<a href= ”../sousrepertoire/monfichier.ext”>
• Noms de fichiers = Règles UNIX
• Différence MAJ / min ‘index.htm’ != ‘Index.HTM’
• Conseil : tout en minuscules, sans espaces
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
2
Les cadres <frame>
NB : Se prononce à l’anglaise, comme
« name », « fame », « shame »...
frame 2
frame 1
frame 3
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
3
Découpage vertical
<frameset cols="attributs">
Autant de colonnes que l’on veut
Largeur :
Pixels
Pourcentage
ou bien « * » : ce qui reste
<frameset cols="100,*">
<frameset cols="25%,*">
<frameset cols="100,*,10%">
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
4
Découpage vertical (2)
Immédiatement après <frameset>,
liste des colonnes et leur contenu :
<frame name= "colgauche" src="menug.htm ">
<frame name= "colmilieu" src="milieu.htm ">
<frame name= "coldroite" src="pub.htm ">
etc.
Fin de la liste :
</frameset>
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
5
Exemple : Menu gauche
<frameset cols= "200,* ">
<frame name= "gauche" src="menug.htm ">
<frame name= "principale" src="milieu.htm ">
</frameset>
frame
‘gauche’
Largeur 200
affichera
la page
menug.htm
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
frame
‘principale’
Largeur ‘*’ : le reste
affichera
la page
milieu.htm
6
Découpage horizontal
<frameset rows="attributs">
Autant de lignes que l’on veut
Hauteur :
Pixels
Pourcentage -> aléatoire
ou bien « * » : ce qui reste
<frameset rows="100,*">
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
7
Découpage horizontal (2)
Immédiatement après <frameset>,
liste des lignes et leur contenu :
<frame name= "haut" src="titres.htm ">
<frame name= "centrale" src="monchien.htm ">
<frame name= "bas" src="copyright.htm ">
etc.
indispensable !
Fin de la liste :
</frameset>
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
8
Exemple : Navigation haute
<frameset rows= "200,* ">
<frame name= "haut" src="menuhaut.htm ">
<frame name= "principale" src="medor.htm ">
</frameset>
frame
hauteur 200
‘haut’
frame
‘principale’
hauteur ‘*’
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
affichera la page
menuhaut.htm
affichera
la page
medor.htm
9
Découpage double
Deux étapes :
1. <frameset cols= "200,* ">
frame 1
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
frame 2
10
Découpage double (2)
1. <frameset cols= "200,* ">
frame 1
frame 2
2. <frameset rows= "100,* ">
frame 2 haut
frame 2 bas
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
11
Code du découpage double
<frameset cols="100,*">
<frame name="framegauche" src="menug.htm">
<frameset rows="100,*">
<frame name="droitehaut" src="titre.htm">
<frame name="droitebas" src="page1.htm">
</frameset>
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
12
Attributs à connaître
frameborder="Valeur"
détermine selon le choix l'affichage d'une bordure en trois
dimensions (1) ou standard (0).
border="Valeur en pixels"
définit la largeur de la bordure pour les cadres.
bordercolor="couleur"
définit une couleur de bordure.
noresize
spécifie que le cadre ne peut être redimensionné.
scrolling="yes/no/auto"
détermine la présence d'une barre de défilement.
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
13
Afficher dans une ‘frame’
L’ancre de lien doit préciser dans quelle
frame la page doit s’afficher
<a href="page3.htm" target="centre">lien 3</a>
frame
‘menu’
frame
‘centre’
lien1
nom déclaré
au moment du
<frameset>
lien2
lien3
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
14
Avantages et inconvénients
+ Mise en page
+ Stabilité d’affichage
- Erreur de liens avec « target »
- Indexation par les moteurs
- Mise en « favoris »
-
Exemple du « menu » mis en favoris
- Impression d’une page
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
15
Cadres
« inline »
<IFRAME src="ce qui doit apparaître" width="400"
height="500" scrolling="auto" frameborder="1">
Message d’erreur si pas supporté
</IFRAME>
Les « Inline frames » ne peuvent pas
être redimensionnés (pas d’attribut noresize).
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
16