docIntérêts d`un iframe ? Création d`une iframe
download 
Plainte Transcription
Intérêts d`un iframe ? Création d`une iframe
SEANCE 8 : INSERER UNE IFRAME But : afficher à l'intérieur d'une page web ou d'un tableau une autre page web Intérêts d'un iframe ? L'iframe peut être utilisée par exemple : • • • • pour afficher une page d'actualitées ou un document à l'intérieur d'un tableau pour afficher une page web à l'intérieur d'une autre page web dans un encart Créer une mise en page avec une page principale dans laquelle il y a la barre de navigation et d'autres objets (musique, dessins...) et une partie de cette page où s'affiche les autres pages du site. On ne crée ainsi qu'une barre de navigation. Mettre une grande image non répétée en fond de page. Création d'une iframe Le plus souvent on insère l'iframe dans un tableau, elle prend l'emplacement d'une cellule. Exercice : on va créer une page web avec un entête personnalisé et une zone au centre dans laquelle s'affiche la page d'accueil de google. • • • • Etape 1 : Créer une nouvelle page Etape 2 : Ecrire ce que vous voulez sur les premières lignes Etape 3 : Inserer un tableau de une seule cellule de 600x500 centré sur la ligne Etape 4 : Insertion de l'iframe o Placer le curseur dans la cellule o Aller dans le code source o Recopier le code suivant <iframe src ="http://www.google.fr" width="100%" height="100%"> </iframe> Etape 5 : Enregistrer et verifier sur le navigateur Créer un site internet : Structure et liens • 1 8- Paramètre Valeur Description align left right top middle bottom Alignement allowtransparency True False s'utilise quand la couleur de fond de l'iframe est transparent (<BODY STYLE="background-color: transparent"> dans la page affichée dans l'iframe) pour spécifier si on accepte de la transparence ou la nouvelle couleur introduite dans la balise IFRAME par STYLE="background-color:green" frameborder 1 0 Affiche (1) ou non (O) la bordure height pixels % Hauteur hspace pixels % espace horizontal entre l'Iframe et ce qui l'entoure id frame_id permet d'identifier la balise iframe (comme name) marginheight pixels Marges du haut et du bas du contenu de l'iframe marginwidth pixels Marges de gauche et de droite du contenu de l'iframe name frame_name Nom de l'iframe (utile si on veut l'appeler dans un lien) scrolling yes no auto Barres de défilement (ascenceurs) src URL Adresse du document à afficher dans l'iframe width pixels % Largeur Créer un site internet : Structure et liens Paramètres possibles d'une iframe 2 8- Modifier le contenu d'une iframe par un lien On veut, en cliquant sur un lien, afficher une page web ou tout autre document (texte, pdf, video...) dans l'iframe précédente (google est remplacé par cette page) • Etape 1 : nommer l'iframe précédente "iframe1" en modifiant le code précédent par ce code <iframe name="iframe1" src ="http://www.google.fr" width="100%" height="100%"> </iframe> • • Etape 2 : Taper un texte qui servira de lien à l'extérieur de l'iframe (tableau). Par exemple "Aller à Wikipedia" Etape 3 : Définir le lien o Sélectionner le texte "Aller à Wikipedia" et inserer un lien o Dans la fenêtre de création de lien Choisir http://fr.wikipedia.org/ comme lien Selectionner "le lien doit s'ouvrir" "dans ce cadre :" Dans le code source compléter <a target="" href="http://fr.wikipedia.org"> par <a target="iframe1" href="http://fr.wikipedia.org"> o Enregistrer et verifier dans le navigateur Créer un site internet : Structure et liens Voilà ce que ça donne : 3 8-
