Insertion d'un cadre (Iframe) dans une page

 

Pour commencer il est utile de savoir ce qu'est une Iframe, c'est un cadre, une sorte de fenêtre sur votre site qui affiche le contenu d'une autre page. Elles ont l'avantage d'alléger la page mais il est bon de savoir qu'elles ne sont pas encore supporter par tout les navigateurs, donc votre visiteur risque d'avoir une "vue" dénaturée de votre site, il est conseillé de ne pas en placer à tord et a travers, mais elle s'avère utile pour afficher des partenaires par exemple sur un site graphique


1/Pour la création de mon site j'utilise Front page (2003), je fais donc mes Iframes avec la barre d'outil sans me soucier de la source:

Içi je vais tacher de vous expliquer comment j'ai crée la Iframe que j'utilise pour mes tops sites

Au préalable, vous créez la page dans votre éditeur de texte que vous souhaitez voir apparaître dans votre cadre, mettez un arrière plan identique à la page ou vous souhaitez la voir apparaître, enregistrez la et lui donner un nom. Ma page pour l'exemple se trouve a l'url suivante http://www.l-atelier-de-louna.com/Pages/partenairesdefilants.htm

ouvrez maintenant la page web ou vous souhaitez voir apparaître la Iframe qui contiendra la page que vous venez de faire. A l'onglet création,  placez vous à l'endroit ou vous désirez placer votre Iframe, dans la barre d'outil cliquez "insertion" puis "cadre en ligne" vous verrez ceci, cliquez "choisir la page initiale"

trouver votre page dans le menu déroulant :

voici ma Iframe tel quel est sur mon site

A présent vous pouvez la personnaliser à volonté, toujours à l'onglet création cliquez 2fois rapidement sur un bord de votre Iframe, une fenêtre apparaît, ici vous pourrez modifiez votre cadre (bordure, défilement,etc), cliquer "style" pour personnaliser votre cadre à votre gout

vous pouvez faire apparaître d'autres pages dans votre cadre, seul le code du lien change, dans "insertion", "lien hypertexte",trouver l'adresse de la page a apparaître dans la Iframe, veillez a sélectionner comme cadre de destination le nom de votre Iframe, pour mon exemple "I1"

..\..\Pages\adresses.htm cliquez le lien et voyez comme la nouvelle page a remplacé l'ancienne dans la Iframe

Avec un autre éditeur de texte que front page ou ceux qui travaille directement dans la source si vous ne pouvez pas appliquer la méthode précedente voici le code de base à recopier  :

2/Code à insérer dans la source :
 

<iframe name="I1" src="../../Pages/partenairesdefilants.htm" width="300" height="150" style="border:1px dotted #800080; " border="0" frameborder="0"scrolling="yes">
Votre navigateur ne prend pas en charge les cadres insérés ou est actuellement configuré pour ne pas les afficher.</iframe>

 les attributs à changer sont en rouge :

Iframe name : nom donné au cadre
src : Adresse de la page sur le pc ou URL sur le site
width : largeur du cadre
height : hauteur du cadre
border px : taille de la bordure de décoration
(attributs pour différences bordures de décorations : dotted,dashed,double,groove,insert,solid,ridge,outset)
#***** : couleur de la bordure décoration
frameborder :taille de la bordure pleine
scrolling : "no" ou "yes" selon si vous souhaitez une barre de défilement
 

pour "appeler" une page dans ce cadre à l'aide d'un lien le code à copier est :

<a target="I1" href="Adresse de la page sur le pc ou URL sur le site .htm">
<font color="
#couleur du lien">
Liens</font></a> 

© l'atelier de Louna-2006- tout droits réservés- la reproduction partielle ou intégrale de ce tutorial est interdite

 Cliquez ici pour fermer