But :
Le but de ce TD est en quelque sorte de refaire le TD n°4 mais cette fois-ci, on utilsera les frames. C'est à dire qu'on aura le menu des planètes dans un cadre à gauche, puis les planètes et leur description dans un autre cadre, à droite de celui du menu, avec bien sûr des liens du menu vers ce que l'on appellera le corps de la page.
Quelques indications :
- Ne re-faites pas tout le code, servez-vous des morceaux de code des TD précédents pour faire les pages menu.html et corps.html (menu.html sera dans le cadre de gauche et corps.html dans le cadre de doite).
- N'oubliez pas les liens et le target !
| <frameset cols="20%,80%" > |
| <frame src="menu.html" name="menu" /> |
| <frame src="corps.html" name="corps" /> |
| </frameset > |
| <html> |
| <head> |
| <title>Le titre de votre page</title> |
| </head> |
| <body> |
| <p><em>Voici les planètes qui constituent notre système solaire. Pour en savoir plus cliquez sur le lien correspondant.</em></p> |
| <ul> |
| <li><a href="corps.html#mercure" target="corps"> Mercure </a></li> |
| <li><a href="corps.html#venus" target="corps">Vénus </a></li> |
| <li><a href="corps.html#laterre" target="corps"> La Terre </a></li> |
| <li><a href="corps.html#mars" target="corps"> Mars </a></li> |
| <li><a href="corps.html#jupiter" target="corps"> Jupiter </a></li> |
| <li><a href="corps.html#saturne" target="corps"> Saturne </a></li> |
| <li><a href="corps.html#uranus" target="corps"> Uranus </a></li> |
| <li><a href="corps.html#neptune" target="corps"> Neptune </a></li> |
| <li><a href="corps.html#pluton" target="corps"> Pluton </a></li> |
| </ul> |
| </body> |
| </html> |
| <html> |
| <head> |
| <title>Le titre de votre page</title> |
| </head> |
| <body> |
| <h1 align="center"><u>Le Système Solaire</u></h1> |
| <h3 align="center">Les Planètes :</h3> |
| <table> |
| <tr> |
| <td><img src="Images/Planetes/mercure.jpg" alt="Mercure" /></td> |
| <td><h3 id="mercure">Mercure</h3> |
| <p>De la taille de la lune, Mercure est la planète la plus proche du soleil.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/venus.jpg" alt="Vénus" /></td> |
| <td><h3 id="venus">Vénus</h3> |
| <p>Vénus est une planète tourmentée par des vents violents.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/terre.jpg" alt="La terre" /></td> |
| <td><h3 id="laterre">La Terre</h3> |
| <p>Notre belle planète !</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/mars.jpg" alt="Mars" /></td> |
| <td><h3 id="mars">Mars</h3> |
| <p>Mars est actuellement l'objet de nombreux programmes d'exploration.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/jupiter.jpg" alt="Jupiter" /></td> |
| <td><h3 id="jupiter">Jupiter</h3> |
| <p>C'est la plus grosse des planètes du système solaire.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/saturne.jpg" alt="Saturne" /></td> |
| <td><h3 id="saturne">Saturne</h3> |
| <p>La fameuse planète facilement reconnaissable à ses grands anneaux.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/uranus.jpg" alt="Uranus" /></td> |
| <td><h3 id="uranus">Uranus</h3> |
| <p>Une planète lointaine et mystérieuse.</p> |
| <p><a href="#" >Retour></a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/neptune.jpg" alt="Neptune" /></td> |
| <td><h3 id="neptune">Neptune</h3> |
| <p>La dernière des planètes géantes.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| <tr> |
| <td><img src="Images/Planetes/pluton.jpg" alt="Pluton" /></td> |
| <td><h3 id="pluton">Pluton</h3> |
| <p>Un astre éloigné, froid, accompagnée de son satellite Charon.</p> |
| <p><a href="#" >Retour</a></p></td> |
| </tr> |
| </table> |
| </body> |
| </html> |
On a donc créé deux cadres horizontaux, gràce à l'attribut cols de la balise <frameset>, on a définit une taille, 20% pour le premier 80% pour le second. Ensuite on a créé nos zones avec les deux balises <frame />.
En ce qui concerne les pages "menu.html" et "corps.html", rien de particulier, ce n'est que des morceaux de code qu'on a déjà vu.
