+ webdesign portfolio
+ designer's boutique
+ poserstudios
+ artworks
+ tutorials & articles
     
 
Iframes, comprendre et apprendre

Tutoriel réalisé le 30 décembre 2003.
Niveau de connaissance requis : débutants, avec connaissance des frames.
Outils nécessaires : éditeur HTML ou bloc-notes, selon la facilité.


 
00. Introduction

Une Iframe, c'est un cadre (frame) que vous pouvez placer à l'intérieur de vos pages, avec le contenu de votre choix. Contrairement à la frame normale, l'Iframe, grâce aux tableaux, peut se placer n'importe où sur la page de manière totalement indépendante.
L'Iframe conserve les propriétés des frames simples : vous pouvez en faire changer le contenu grâce aux liens externes et aux attributs "target".
Ce tutoriel va vous apprendre à les comprendre et à les utiliser.





01. comprendre et visualiser

< Voici une Iframe.

C'est une page totalement indépendante (appelée cadre.htm) qui a ses propriétés propres (fonds, couleurs, images, textes, etc). Sa taille peut être définie.

1. Elle peut bien sûr contenir des liens, mais attention : ceux-ci se chargent à l'intérieur de l'Iframe. Essayez de cliquer sur le lien à l'intérieur de l'Iframe en jaune.
Il y a bien sûr un moyen d'ouvrir un lien interne à une Iframe à l'extérieur de celle-ci.

2. Vous pouvez aussi influencer le contenu de cette Iframe par des liens extérieurs. Cliquez ici pour voir.






02. créer l'iframe et la placer

Pour créer une Iframe, rien de plus simple. Vous allez simplement commencer une nouvelle page HTML et inclure tout ce que vous souhaitez voir apparaître dans votre fenêtre. N'hésitez pas à personnaliser le fond, les couleurs... tout ! Et conservez la structure de base HTML (avec les balises head et body).
Ne vous inquiétez pas pour la largeur du texte, il s'alignera plus tard à la largeur de votre Iframe.

Ensuite, prenez la page qui va contenir l'Iframe (votre page principale) préparez l'emplacez de l'Iframe et placez-y le code qui se trouve à gauche.

Vous pouvez bien évidemment changer la largeur de votre Iframe (attribut width) ainsi que sa longueur (attribut height). Et remplacez bien sûr "cadre.htm" par l'adresse de votre propre page, si vous l'avez appelée d'une manière différente.

Notez que si vous souhaitez inclure plusieurs Iframes dans une même page, il vous faudra leur donner un nom différent (attribut name) pour éviter les conflits de liens.

 






03. gérer le contenu par des liens externes

Pour créer des liens externes qui vont influencer le contenu de l'Iframe (comme celui de la phase 1, point 2) faites comme suit.

Tout d'abord assurez-vous que la balise iframe contienne bien l'attribut name (dans mon code disponible plus haut, il y est, avec la valeur "iframe".

Créez votre lien, et ajoutez à l'intérieur de la balise <a> l'attribut target, avec pour valeur le nom que vous avez donné à votre Iframe (chez moi : "iframe").

Un lien donnera ceci, par exemple (voir à gauche).

 


01


02
04. liens internes qui s'ouvrent à l'extérieur

Vous pouvez placer, à l'intérieur de votre Iframe, des liens qui vont agir sur votre page principale et la remplacer, si vos le souhaitez.

Pour ce faire, lorsque vous créez un lien à l'intérieur de votre Iframe, ajoutez à la balise <a> l'attribut target avec pour valeur "_parent", si vous souhaitez que votre page principale soit entièrement remplacée par une autre (voir 01).

Ou alors, si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, au-dessus de votre page principale, ajoutez à la balise <a> l'attribut targer avec pour valeur "_blank" (voir 02).


Haut de la page

 
(c) Corinne Stoppelli - ExileDesigns 2004 . Toute copie, entière ou partielle, est interdite sans l'autorisation expresse de l'auteur.