Fourni par Blogger.

vendredi 1 juin 2012

Les cadres (frames)


I. Généralités

1. Fonction

Les cadres (frames dans la terminologie anglo-saxonne) découpent la fenêtre principale en autant de petits cadres, chacun d'eux jouant le même rôle qu'une fenêtre : document HTMLpropre, barres de défilement indépendantes...
Ces frames peuvent être chargés de manière totalement indépendante : un cadre sera modifié et l'autre maintenu. Ils peuvent interargir entre eux : un choix dans un premier cadre pourra provoquer le chargement d'une nouvelle page dans un deuxième.
Examiner l'exemple au bout de ce lien.
Puis admirer la magnifique réalisation du Site officiel du musée du Louvre http://www.louvre.fr/ : Observer la navigation.
>Retour à la TdM

2. Avantages/Inconvénients

Les cadres permettent de créer rapidement une mise en page simple pour un site. L'utilisation classique consiste ainsi à présenter sur un cadre à gauche une liste de liens vers les différentes parties d'un site, qui s'affichent dans la fenêtre principale au centre. Cela facilite de plus la maintenance des différentes pages.
Cependant, les moteurs de recherche indexent les pages à l'intérieur des cadres autant que les autres. Il y a donc un risque pour qu'une page indexée de la sorte soit "orpheline", et ne donne pas accès au reste du site. Plus généralement, une telle page ne se suffit souvent pas à elle-même (il y manque parfois les outils de navigation à l'intérieur du site). Enfin, la présence de cadres s'accompagne souvent de celles de barres de défilement horizontales.
>Retour à la TdM

3. Structure de la page HTML

a. Un nouveau type de document
Nous avions déjà rencontré les déclarations de type de document suivantes :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
L'appel à des cadres ne peut se faire qu'à l'aide de balises qui nécessitent une troisième forme de déclaration :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Ce type de document étant une extension de la recommandation HTML Transitionnel, les balises de présentation sont également acceptées, même s'il vaut mieux éviter de faire appel à elles.
>Retour à la TdM
b. Le squelette d'une page-cadre
Une page destinée à recevoir plusieurs cadres a une structure légèrement différente d'une page "habituelle". Cette dernière, on s'en souvient, possède la structure suivante...
<html>
  <head>
    <title>Premiers pas</title>
  </head>
  <body>
(contenu de la page)  </body>
</html>
Cette fois-ci, la balise <body> est remplacée par la balise <frameset> :
<html>
  <head>
    <title>Premiers pas</title>
  </head>
  <frameset>
(déclaration des cadres)     <noframes>contenu alternatif pour les navigateurs ne supportant pas les cadres.</noframes>
  </frameset>
</html>
>Retour à la TdM
c. La balise <noframes>
L'objectif est d'avertir l'utilisateur d'une vieille version de navigateur (2), ou bien d'un navigateur ne supportant pas les cadres (navigateur texte ou PDA) qu'il n'a pas accès au contenu du document sous la forme de cadres. le contenu de cet élément doit fournir une méthode alternative d'accéder à l'intégralité des informations contenues dans les cadres.
La balise <noframes> est fille de la balise <frameset>. Un navigateur reconnaissant </frameset> ignore le contenu du conteneur <noframes>. Cette balise peut contenir un élément <body>. Réciproquement, un navigateur de vieille version sautera les balises dont il ne connaît pas la signification : <frameset>, <frame>, <noframes> et affichera la suite du document. Le cas est prévu dans l'exemple. Examiner son source.
>Retour à la TdM

II. La balise <frameset>

1. Définition du découpage de la page: les attributs rows et cols

Les attributs rows et cols définissent un quadrillage dont chaque élément sera un cadre (frame). rows définit le découpage horizontal et cols le découpage vertical. Exemples (l'illustration est au bout de chaque lien) :
>Retour à la TdM

2. Jeux de valeurs possibles

Les valeurs peuvent s'exprimer par :
  • Par un nombre entier de pixels (voir les exemples précédents).
  • Par un pourcentage (ex : 20%) de la fenêtre du navigateur : lorsque l'utilisateur modifie la taille de sa fenêtre, la taille du cadre se modifie en proportion. Exemple : <frameset cols="20%,50%,30%">
    Si la somme ne fait pas 100%, les pourcentages sont ajustés par règle de trois.
  • Par le caractère astérisque *. Deux usages sont possibles :
    • * peut signifier ce qui reste de libre. Exemple : <frameset rows="150,*,100">. Rendu à l'écran.
    • * peut signifier : le facteur multiplicatif nécessaire pour que l'ensemble soit à la taille de la fenêtre. Exemple : <frameset cols="2*,*,5*">. Rendu à l'écran.
De manière générale, si le jeu de paramètres est incohérent, le navigateur trouve toujours un moyen de les ajuster (ce qui peut produire une apparence parfois fluctuante au gré des interprétations !).
>Retour à la TdM

3. Découpage irrégulier

Le découpage peut ne pas être un quadrillage mais un simple pavage de rectangles. Ce pavage est obtenu en insérant une nouvelle fois la balise <frameset> à l'intérieur du conteneur<frameset></frameset>. La structure de l'exemple est la suivante :
<frameset cols="218,*">
  <frame name="menu" src="Cadre_ex11.htm"></frame>
  <frame name="bandeau" src="Cadre_ex12.htm"></frame>
  <frame name="principal" src="Cadre_ex13.htm"></frame>
</frameset>
>Retour à la TdM

III. La balise <frame>

1. Utilisation de la balise

Il doit y avoir autant de conteneurs <frame> qu'il y a de régions définies dans la balise <frameset>. L'ordre est imposé de gauche à droite, puis de haut en bas (voir les numérotations des régions dans les exemples précédents).
>Retour à la TdM

2. Les attributs

Attribut
Effet
Valeur(s)
src
URL du document à charger initialement dans le cadre.
Une URL. Facultatif, le chargement peut avoir lieu plus tard.
name
Nom du cadre.
Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut target de l'appel de lien <a>.
longdesc
Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre.
Une URL.
frameborder
Présence d'une bordure de séparation entre les cadres. Reprendre le premier exemple.
1 (présence) ou 0 (absence). Valeur par défaut 1.
marginwidth,marginheight
Marge entre le contenu et le bord du cadre.
Un nombre de pixels.
noresize
Gère le redimensionnement du cadre.
Si noresize="noresize", l'utilisateur ne peut pas redimensionner le cadre.
scrolling
Gère l'apparition des barres de défilement.
  • yes : le navigateur crée toujours des barres.
  • no : les barres sont interdites.
  • auto : le navigateur crée des barres si besoin. Valeur par défaut.
Table 1. Attributs de la balise <frame>.
>Retour à la TdM

IV. La balise <iframe>

1. Utilisation de la balise

Il ne s'agit plus du quadrillage de la fenêtre du navigateur de la balise <frameset> mais d'une petite lucarne insérée dans le document HTML. Le document lui-même garde la structure habituelle : entête (<head>) et corps (<body>).
>Retour à la TdM

2. Les attributs

Attribut
Effet
Valeur(s)
src
URL du document à charger initialement dans le cadre.
Une URL. Facultatif, le chargement peut avoir lieu plus tard.
name
Nom du cadre.
Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut target de l'appel de lien <a>.
longdesc
Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre.
Une URL.
frameborder
Présence d'un encadrement.
1 (présence) ou 0 (absence). Valeur par défaut 1.
marginwidth,marginheight
Marge entre le contenu et le bord du cadre.
Un nombre de pixels.
scrolling
Gère l'apparition des barres de défilement.
  • yes : le navigateur crée toujours des barres.
  • no : les barres sont interdites.
  • auto : le navigateur crée des barres si besoin. Valeur par défaut.
align
Détermine la position du cadre par rapport au texte qui l'entoure. Le cadre peut suivre le flot du texte ou être enveloppée par ce texte. Par défaut la valeur est à bottom.
  • left (valeur par défaut)
  • right
  • top : l'alignement se fait par rapport au sommet du cadre.
  • bottom : l'alignement se fait par rapport au bas du cadre.
  • middle : l'alignement se fait par rapport au centre du cadre.
width,height
Largeur et hauteur du cadre.
Un nombre de pixels ou un pourcentage.
Table 2. Attributs de la balise <iframe>.
>Retour à la TdM

V. L'attribut target

1. L'attribut target en HTML Transitionnel

La balise <a> permettant de créer un lien possède en HTML Transitionnel un attribut supplémentaire, target ("cible" en anglais), qui permet de spécifier la fenêtre dans laquelle le document lié doit s'ouvrir.
target ne peut prendre qu'une seule valeur pertinente possible en HTML Transitionnel, la valeur target="_blank". Cela permet d'ouvrir le lien dans une nouvelle fenêtre. Par exemple, <a href="http://dam.cicrp.jussieu.fr" target="_blank"> permet d'ouvrir une seconde fenêtre du navigateur, à l'intérieur de laquelle s'affiche le document spécifié par l'attribut href, ici la page d'accueil du DEUST.
>Retour à la TdM

2. L'attribut target avec des cadres

Par défaut, l'appel de lien par la balise <a href="url_du_source"> charge la fenêtre courante par le document désigné par href.
L'attribut target permet de spécifier dans quel cadre (au sens large) va se charger le document. Il peut prendre quatre valeurs prédéfinies, ou bien une valeur déterminée par l'auteur.
  • target="_self" : fenêtre ou cadre d'appel (valeur par défaut).
  • target="_parent" : fenêtre ouvrant le <frameset> du <frame>.
  • target="_top" : fenêtre entière du navigateur.
  • target="_blank" : nouvelle fenêtre.
  • Valeur de l'attribut name du cadre visé.
à 12:55
Tags :

0 commentaires

Enregistrer un commentaire

hi tech © Powered by Blogger Design by Blogger Templates Gallery