les cadres

Publié le par e-commerce

Imbrication de définitions de cadres

Les définitions de cadres peuvent s'imbriquer en principe à l'infini.

Dans l'exemple suivant, la définition de FRAMESET externe divise l'espace en trois colonnes d'égale largeur. La déclaration de FRAMESET intérieure découpe la colonne centrale horizontalement en deux zones de hauteurs différentes.

<FRAMESET cols="33%, 33%, 34%">

     ...contenu de la première vue...

     <FRAMESET rows="40%, 50%">

        ...contenu de la deuxième vue, premier rang...

        ...contenu de la deuxième vue, deuxième rang...

     </FRAMESET>

     ...contenu de la troisième vue...

</FRAMESET>

L'élément FRAME

L'élément FRAME définit le contenu et l'apparence d'un volet particulier d'une fenêtre multi-vues.

Définir le document initial d'un cadre

L'attribut src spécifie quel est le document initial qui doit être chargé dans le cadre. Il n'y a en effet aucune possibilité pour que le contenu d'un cadre soit défini dans le même document qui définit le découpage.

Voici un exemple avec des fichiers HTML :

<HTML>

<FRAMESET cols="33%,33%,33%">

  <FRAMESET rows="*,200">

      <FRAME src="contenu_du_cadre1.html">

      <FRAME src="contenu_du_cadre2.gif">

  </FRAMESET>

  <FRAME src="contenu_du_cadre3.html">

  <FRAME src="contenu_du_cadre4.html">

</FRAMESET>

</HTML>

 

 

 

créerait un dispositif de cadres à peu près similaire à :

 
 

 

 

 

 

 


et demanderait à l'agent utilisateur de charger chaque fichier dans un volet séparé.

Spécification de cadre destinataire

Définition des attributs

target = cdata

Cet attribut spécifie le nom d'un cadre cible où un document doit être ouvert.

Après avoir assigné un nom à un cadre via l'attribut name, les auteurs pourront par la suite s'y référer comme la "cible" de liens définis dans d'autres éléments. L'attribut target pourra être défini dans des éléments qui instaurent des liens (A, LINK), Imagemaps (AREA), et formulaires (FORM).

L'exemple suivant illustre comment les cibles permettent une modification dynamique du contenu du cadre. En premier lieu nous aurions défini un découpage primitif dans le document frameset.html, tel que montré ci-dessous :

<HTML>

<FRAMESET rows="50%,50%">

   <FRAME name="fixe" src="init_fixe.html">

   <FRAME name="dynamique" src="init_dynamique.html">

</FRAMESET>

</HTML>

Puis, dans un document init_dynamique.html, nous utiliserions des liens "ciblés" vers le cadre "dynamique".

<HTML>

<BODY>

...début du document...

Vous pouvez maintenant aller à la diapo 

    <A href="slide2.html" target="dynamique">slide 2.</A>

...suite du document...

C'était très bien. Maintenant continuez par la

    <A href="slide3.html" target="dynamique">slide 3.</A>

</BODY>

</HTML>

L'activation d'un de ces deux liens aurait ouvert un document dans le cadre nommé "dynamique" tandis que l'autre cadre, "fixe", aurait conservé son contenu initial.

Note : Une fois que le contenu d'un cadre est modifié dynamiquement, la définition de découpage originale ne reflète plus avec exactitude le véritable contenu de chaque cadre ; La définition du découpage, avec ses documents initiaux, est quant à elle invariante.

Il n'existe aucune méthode aujourd'hui pour encoder l'état complet d'un document multi-vues par une URL. C'est pourquoi de nombreux agents utilisateurs refusent de permettre aux utilisateurs d'enregistrer des signets pour une définition de découpage.

Le découpage en multi-vues peut rendre plus délicate la navigation "avant" et "arrière" dans l'historique de votre agent utilisateur.

Définir un destinataire par défaut pour les liens

Lorsque de nombreux liens du même document désignent la même cible, il est possible d'en alléger l'écriture en en définissant un une fois, puis en distribuant cette définition sur tous les attributs target de chaque élément. Ceci est réalisé en définissant l'attribut target au niveau de l'élément BASE.

Retournons à l'exemple précédent, mais cette fois en "factorisant" la définition de cible dans la déclaration de l'élément BASE, ce qui conduit à l'ôter des éléments A.

<HTML>

<HEAD>

<BASE target="dynamique">

</HEAD>

<BODY>

...début du document...

Vous pouvez maintenant aller à la diapo 

 <A href="slide2.html">slide 2.</A>

...suite du document...

C'est très bien. Maintenant continuez par la

       <A href="slide3.html">slide 3.</A>

</BODY>

</HTML>

Sémantique des cibles

Plusieurs méthodes existent qui conduisent à désigner un cadre comme étant la cible d'un lien. Nous en exposons ici les interactions.

Si l'attribut "target" d'un élément est défini comme désignant un cadre identifié, alors, lorsque cet élément est activé, le document pointé par le lien sera chargé dans le cadre désigné.

Si l'attribut target d'un élément n'est pas défini, mais celui de l'élément BASE l'est, alors le contenu de l'attribut "target" de l'élément BASE détermine la cible effective pour ce lien, et le chargement répond à la même sémantique qu'en 1.

Si aucune définition de cible n'est donnée, ni dans l'élément local, ni dans un éventuel élément BASE, le document désigné par l'élément sera chargé dans le même cadre où il se situe.

Si aucune des définitions de cible présentes ne se referents à un cadre identifié, mais plutôt à un cadre non défini F, l'agent utilisateur créera une nouvelle fenêtre et un cadre principal dans cette fenêtre, lequel deviendra le cadre nommé F, et dans lequel pourra être chargé le nouveau document.

Les agents utilisateurs pourront le cas échéant fournir aux utilisateurs un mécanisme qui permet d'outrepasser l'attribut target.

Noms de cibles

A l'exception des noms réservés cités ci-dessous, les noms de cadres doivent commencer par une lettre alphabétique (a-zA-Z). Les agents utilisateurs devraient ignorer toute autre syntaxe.

Les noms de cadres suivants sont réservés et ont une signification particulière.

_blank

L'agent utilisateur chargera le nouveau document dans une nouvelle fenêtre non nommée.

_self

L'agent utilisateur chargera le document dans le même cadre que là où est placé l'élément qui l'appelle (équivalent au fonctionnement par défaut).

_parent

L'agent utilisateur chargera le document à la place du FRAMESET de rang immédiatement supérieur (découpage père) dans le découpage dont le document qui contient le lien fait partie. Cette valeur équivaut à _self si le cadre courant n'a pas de père.

_top

L'agent utilisateur chargera le document dans la fenêtre complète et originale (et donc en déchargeant tous les autres cables). Cette valeur équivaut à _self si le cadre courant n'a pas de père.

L'élément NOFRAMES

L'élément NOFRAMES spécifie un contenu qui ne doit être affiché que si les cadres ne doivent pas l'être. Les agents utilisateurs qui supportent habituellement les cadres n'afficheront donc le contenu de la section NOFRAMES que lorsqu'ils sont configurés pour ignorer les découpages. Les agents utilisateurs ne supprotant pas les cadres afficheront le contenu d'une déclaration NOFRAMES en toutes circonstances.

Supposez que nous ayons un découapge exemple défini dans un fichier "top.html" qui désigne un document principal ("main.html") et une table des matières particulière ("table_des_matières.html") liée à ce document. Voici l'expression de "top.html" :

<HTML>

<FRAMESET cols="50%, 50%">

   <FRAME src="main.html">

   <FRAME src="table_des_matières.html">

</FRAMESET>

</HTML>

Que se passe t-il lors du chargement de "top.html" si l'agent utilisateur n'est pas configuré pour accepter les cadres ? L'utilisateur ne verrait absolument rien du fait qu'aucune alternative de contenu n'est spécifiée dans le BODY de "top.html". Si nous insérons "table_des_matières.html" et "main.html" directement dans la section BODY, nous solutionnons le problème de l'association des deux documents, mais obligerait les agents utilisateurs à récupérer les mêmes données deux fois : une copie associée aux cadres et une copie inserée dans la section BODY.

Il sera nettement plus économique d'inclure la table des matières en tête du fichier "main.html" dans un élément NOFRAMES :

<!-- main.html -->

<HTML>

<BODY>

<NOFRAMES>

...la table des matières, ici...

</NOFRAMES>

...le reste du document...

</BODY>

</HTML>

et de lier "main.html" à partir de "top.html" au cas où les cadres ne seraient pas affichés :

<!-- top.html -->

<HTML>

<FRAMESET cols="50%, 50%">

   <FRAME src="main.html">

   <FRAME src="table_des_matières.html">

</FRAMESET>

<BODY>

Cliquez <A href="main.html">ici</A> pour la version sans cadres.

</BODY>

</HTML>

Cadres en ligne : L'élément IFRAME

L'élément IFRAME permet d'insérer un cadre à l'intérieur d'un bloc de texte. L'insertion d'un cadre en ligne dans un paragraphe est similaire à l'insertion d'un objet via l'élément OBJECT : Ils vous permettent tous deux d'insérer un document HTML en plein milieu d'un autre, et peuvent être tous deux alignés sur le texte les contenant, etc.

Le document devant être inséré "en ligne" est désigné par l'attribut src de cet élément. Le contenu de l'élément IFRAME lui-même, ne devra être affiché que si l'agent utilisateur ne supporte pas le cadre ou n'est pas configuré pour le faire.

Pour tout agent utilisateur qui supporte les cadres, l'exemple suivant placerait un cadre en ligne entouré d'une bordure dans le texte du document.

  <IFRAME src="foo.html" width="400" height="500"

             scrolling="auto" frameborder="1">

  [votre agent utilisateur ne supporte pas les cadres ou n'est pas configuré pour les afficher

. Cliquez pour récupérer

  <A href="foo.html">le document associé.</A>]

  </IFRAME>

Les cadres en ligne ne peuvent être redimensionnés (et de ce fait, ne comportent pas d'attribut noresize).

Publié dans l'informatique

Commenter cet article