Publicité
Forum
Posez vos questions, ici

15.Mise en page et navigation

15.3.Mise en page

15.3.3.Avec iframe

Il est possible en HTML, de définir une zone (rectangulaire) comme étant un espace destiné à afficher le contenu d'un fichier HTML. Ceci se fait via la balise iframe.
Puisque dans notre cas, nous considérons que seule la partie "contenu" doit changer. Nous pouvons définir cette zone comme étant un iframe. Ce qui donne
<table>
  <tr>
    <td colspan="2">Entête</td>
  </tr>
  <tr>
    <td>Menu gauche</td>
    <td><iframe name="contenu" src="contenu1.html"></iframe></td>
  </tr>
  <tr>
    <td colspan="2">Pied de page</td>
  </tr>
</table>
Afficher cette page reviendra à afficher page1.html du chapitre précédent dans l'hypothèse où vous avez créé un fichier contenu1.html ne contenant que la partie "contenu" de page1.html (i.e. page1.html sans la mise en page).
Pour afficher la page 2, ou plus exactement pour remplacer l'iframe "contenu" par le contenu de la page 2, il suffira de proposer un lien de type
<a href="contenu2.html" target="contenu">Page 2</a>
  • l'attribut target précise le nom de l'iframe concernée. Nom qui a été précisé par l'attribut name de la balise iframe.
Ce qui nous donne le code un peu plus complet suivant:
<table>
  <tr>
    <td colspan="2">Entête</td>
  </tr>
  <tr>
    <td>
       <a href="contenu1.html" target="contenu">Page 1</a><br />
       <a href="contenu2.html" target="contenu">Page 2</a><br />
    </td>
    <td><iframe name="contenu" src="contenu1.html"></iframe></td>
  </tr>
  <tr>
    <td colspan="2">Pied de page</td>
  </tr>
</table>
et qui pourra être utilisé avec les fichiers suivants

15.3.3.1.Analyse

Avec cette implémentation, nous avons bel et bien trouvé une solution répondant au problème de copie massive de code soulevé dans le chapitre précédent.
  • Ne mettre à jour qu'une partie de la page (ici, l'iframe) consiste également un avantage en terme de performance en limitant la quantité de donnée échangée entre le serveur et le client (le navigateur).
Mais cette solution présente deux inconvénients importants:
  • Quelque soit le contenu consulté, l'URL reste celle de la page contenant l'iframe (ici, accueil.html). Vous pouvez vous en convaincre en consultant la barre de navigation de votre browser et en cliquant sur les différents liens. Il n'est donc pas possible, en l'état de stocker, dans vos favoris une URL correspondant à un contenu donné.
  • Les pages de contenu (ex: contenu1.html ici) sont des pages comme les autres, qui peuvent être collectées par les moteurs de recherche par exemple. Mais si vous accèdez directement à ces pages de contenu (typiquement via un résultat dans un moteur de recherche) vous perdez toute la mise en page et surtout le menu de navigation.
  • Il est possible de faire en sorte que les moteurs de recherche n'indexent pas les pages de contenu. Mais cela va nuir au bon référencement du site (puisque la majeure partie du contenu du site est alors ignorée).
  • Il est possible de faire en sorte que l'accès direct à une page de contenu redirige vers la page d'accueil (et ainsi retrouver la mise en page, les menus, etc.). Cela implique l'utilisation de code javascript [c'est quoi?] et il ne s'agit que d'une solution de contournement.