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
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).
<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> |
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> |
|
Ce qui nous donne le code un peu plus complet suivant:
et qui pourra être utilisé avec les fichiers suivants
<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> |
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.
|
Mais cette solution présente deux inconvénients importants:
|
|