24
avr
2007
Création, mise en forme d'une IFRAME (html/CSS) |
|
|
|
| Écrit par flo0726 | ||||||||||
| 24-04-2007 | ||||||||||
|
I. Code de base d'un iframe:
Champs à remplacer: name: nom du iframe, par habitude on met "I1" ,I2.. avec le numéro de l'iframe quand il y en a plusieurs. Mais ceci n'est rien d'obligatoire. Cette étape est indispensable si vous voulez ouvrir un une page dedans, on verra comment faire par la suite. src: url de la page qui se chargera par défaut dans le cadre. width: largeur en pixels du cadre. heigh: hauteur en pixels du cadre. Entre <iframe> et </iframe>: Mettre une phrase que les visiteurs auront si leur navigateur n'est pas compatible avec les iframes. Je vous rassure, la plupart des navigateurs le sont.
II. Code pour améliorer l'iframe:
(Se place entre <iframe et >.) Bordure: insérer frameborder="**" border="**" où ** représente l'épaisseur désirée. Mettre la valeur 0 permet de masquer l'existence d'une IFRAME à condition de mettre la même couleur de fond sur la page contenant l'IFRAME et celle contenue à l'intérieur. Alignement: Pour placer une iframe, il est quelquefois utile de lui donner un alignement. Pour cela, il suffit de rajouter align="**" où ** peut prendre la valeur de top, middle, left, center, right, etc... Barres de défilement: Quand la page insérée dans l'iframe est plus grande que l'iframe lui-même, on pourrait croire que cela pose problème. En réalité, le navigateur rajoute une barre de défilement automatiquement, comme sur une page quelconque. Mais on peut contrôler cette barre en ajoutant scrolling="**" où ** vaut "no" pour mettre aucune barre de défilement, attention, seulement une partie de la page sera visible, il faudra alors cliquer dedans et bouger la souris vers le haut, le bas, la droite ou la gauche, c'est donc à proscrire. Si on remplace "**" par "yes", la barre de défilement sera toujours présente, même si la page contenue dans le cadre est inférieure au cadre.
III. Utilisation:
Maintenant nous savons comment utiliser les iframes. Certes c'est bien, mais nous ne savons pas à quoi ils servent et ce que nous pouvons en faire. L'utilisation la plus courante est de faire un cadre et de faire charger une page dedans. En effet, il est pratique quand un site comporte de nombreuses pages et qu'on veut que toutes les rubriques du site s'affichent sur une partie de la page, lorsqu'on modifie un lien, nous devons le faire sur chaque page? Grace aux iframes, une seule fois suffit. En effet, il suffit de faire une page qui contiendra le menu des rubriques là où on le désire, un header, un footer et placer un iframe où on veut que le contenu de la page change. Une fois l'iframe placé, il faut faire les liens. Mais alors, comment faire ouvrir un lien dans l'iframe? C'est très simple, il suffit de mettre, pour chaque lien à ouvrir dans l'iframe, le code suivant:
C'est ici que le nom du iframe s'avère important, vous savez, on a pour habitude de le nommer I1, I2.... Et ben voila à quoi sert le nom du cadre, ce qui permet d'avoir plusieurs cadres sur la même page. Par contre, la page à charger dans le cadre ne doit que le contenu de la page en question, elle ne doit absolument pas contenir les menus etc. Ce qui permet de modifier seulement la page contenant le cadre pour apporter une modification au menu et aux headers et footers. Le problème est qu'avec cette utilisation, si on met un compteur de visiteurs en ligne, il sera affiché une fois, mais une seule fois. En effet, si vous restez plusieurs heures sur un site, le compteur est en évolution permanente, mais il ne sera pas mis à jour puisque la page contenant le cadre n'a pas été actualisée depuis le début de la visite. Une des solutions est d'ajouter un autre iframe contenant seulement le compteur en masquat la bordure et les barres de défilement qui va s'autoactualiser toutes les minutes par exemple pour qu'il soit en permanence à jour. Dans ce cas, il faut placer un iframe de la taille du compteur et le faire actualiser automatiquement en plaçant ce code entre <head> et </head>.
Où 60 représente l'intervalle des autoactualisations en secondes. Le compteur de visiteurs en ligne sera alors en permanence mis à jour pendant la visite. Attention cependant à ne pas mettre un compteur de visites sans cookies, dans ce cas, cela rajouterait une visite à chaque actualisation, ce qui fausserait les statistiques.
IV. Limites des iframes:
Certes les iframes sont très pratiques, mais ils ont quand même quelques défauts non négligeables. Le premier et principal se trouve au niveau du référencement. En effet, vous ne pourrez pas référencer les pages contenues à l'intérieur du cadre, puisque celles ci ne comportent plus les menus, headers et footers. Il faut donc se débrouiller d'empêcher le référencement de ces pages par les robots des moteurs de recherche. Il existe cependant une alternative, pour ne pas qu'une page s'ouvre sans le frame en contour. Il suffit d'inserer dans les <head> de chaque page le script java ci-dessous:
Cela résoud alors le problème du référencement. Autre petit inconvénient, on ne peut pas avoir l'url de la page où on se trouve. En effet, celle qui s'affiche dans la barre d'adresses est celle contenant le header, le cadre etc..., et si on clique sur cette url on retombera à nouveau sur la page chargée par défaut. Le même problème se pose au niveau de l'actualisation. En effet, la solution est de cliquer avec le bouton de droite de la souris et de sélectionner actualiser, cela actualisera la page contenue dans le cadre. Il existe une alternative aux cadres n'ayant pas ces problèmes, ce sont les includes en php, mais elles nécessitent des connaissances en php, alors que les iframes sont très simples à utiliser. Article par ben.popeye Commenter
 Recommandez (31) |  Citez cet article sur votre site | Pages vues: 1176
|
||||||||||
Scoopeo
Blog Memes
Fuzz
Niouze
Tape Moi!
Delicious
