Recherche
Publicités
Question aléatoire
Comment mettre un document en lecture seule ?

Publicités
Qui est en ligne
10 Personne(s) en ligne (4 Personne(s) connectée(s) sur Articles)

Utilisateurs: 0
Invités: 10

plus...
Tutorial : HTML 6 : Les frames.
Publié par Stéphane le 30/03/2005 16:40:00 (21549 lectures)
Tutorial

Le sixième tutorial html, il concerne les frames ^^
Et il m'a prit beaucoup de temps mais je l'ai eu

Bonne lecture.


  1. Découpage de l'écran


    1. Vertical

    2. Horizontal


  2. Les attributs de la balise <frame>

    1. src

    2. noresize

    3. frameborder

    4. scrolling

    5. marginwidth et marginheight

    6. name



  3. Les attributs de la balise <frameset>

    1. framesapcing


  4. La balise <noframes>






Les cadres sont maintenant remplacés par le php mais avant leurs utilisations etaient très répendu.
Les cadres sont des fenetres qui permet de visualer plusieurs chose en même temps sur une même page,
comme placer un sommaire dans un cadre et le contenu dans l'autre a visualiser.





Découpage de l'écran


Pour utiliser les frames, il faut savoir où chaque cadre se situera dans la fenêtre du navigateur.
Pour définir un ensemble de cadre, on va utiliser la balise du type conteneur <frameset>.
Il faut alors spécifier un attribut pour la découpe de la fenêtre, entre découper la fenêtre dans le sens horizontal, ou dans le sens vertical.
Les deux attributs :

  • rows pour spécifier le nombres de lignes

  • cols pour spécifier le nombres de colonnes




On peut bien sur utiliser ces deux attributs en même temps, mais cela peut vite donner de multiples fenêtre assez brouillon.

On doit ensuite indiquer les largeurs des colonnes (ou lignes) séparées par des virgules, par nombres de cadre utiliser.
Les dimensions peuvent être exprimées en pixels et dnonc les cadres gardent les même dimensions quelque soit la dimension de la fenêtre ou bien en pourcentage % à la fin de la valeur, avec le pourcentage la largeur (ou hauteur) du cadre sera calculé en fonction de la taille de la
fenêtre du navigateur.

On va utiliser la balise du type marqueur dans pour plus de fonction, elle posséde de nombreux attributs que nous détaillerons plus tard.
Il faut une balise par cadre.


Exemple pour un découpage vertical :


<html>
<head>
<title>Exemple de frame vertical</title>
</head>

<frameset cols="50%,*">
<frame>
<frame>
</frameset>

<body>
</body>
</html>




Résultat





La portion qui définit les cadres n'est pas écrite la partie d'en-tête <head></head>, ni dans le corps du document
<body></body>; mais entre la balise <frameset> qui est une nouvelle section.




Exemple pour un découpage horizontal :


<html>
<head>
<title>Exemple de frame horizontal</title>
</head>

<frameset rows="50%,*">
<frame>
<frame>
</frameset>

<body>
</body>
</html>



Résultat





On peut inclure des ensembles de cadres les uns dans les autres et mêler les découpages horizontaux et verticaux :

<html>
<head>
<title>Exemple de frame mêler</title>
</head>

<frameset rows="50%,*">
<frame>
<frameset cols="50%,*">
<frame>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
</frameset>
</frameset>

<body>
</body>
</html>



Résultat

Autre Résultat





Les attributs de la balise <frame>



  • src


  • La valeur src va permettre de remplir les cadres.


    <html>
    <head>
    <title>Exemple de frame avec src</title>
    </head>

    <frameset rows="94, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_du_haut.html">
    <frameset cols="625, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_gauche.html">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_droite.html">
    </frameset>
    </frameset>

    <body>
    </body>
    </html>

    Résultat






  • noresize


  • On peut tout à fait empêcher le redimensionnement en placant l'attribut noresize dans la balise
    <frame> du cadre choisi.

    Cette attribut n'a pas besoin de valeur.

    Exemple :

    <html>
    <head>
    <title>Exemple de frame avec noresize</title>
    </head>

    <frameset rows="50%,*">
    <frame noresize>
    <frameset rows="50%,*">
    <frame noresize>
    <frameset cols="50%,*">
    <frame noresize>
    <frame noresize>
    </frameset>
    </frameset>
    </frameset>

    <body>
    </body>
    </html>

    Résultat





  • frameborder


  • Cet attribut permet d'afficher une bordure (ou pas) autour du cadre. La valeur est :

    • 0 Aucune bordure

    • 1 Bordure


    Exemple :

    <html>
    <head>
    <title>Exemple de frame sans bordure</title>
    </head>

    <frameset rows="50%,*">
    <frame frameborder="0">
    <frame frameborder="0">
    </frameset>

    <body>
    </body>
    </html>

    Résultat

    Résultat





  • Scrolling


  • On peut choisir de faire apparaître une barre de défilement sur les cotés du cadres avec l'attribut
    scrolling. Les valeurs :

    • auto laisse le choix au navigateur, option par défaut.

    • yes en affiche quoi qu'il arrive.

    • no n'en affiche pas, même si c'est nécessaire.


    Reprenons l'exemple de la page d'index du site et completons avec ces nouveaux attributs :

    <html>
    <head>
    <title>Exemple de frame avec scrolling</title>
    </head>
    <frameset rows="94, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_du_haut.html" noresize frameborder="0" scrolling="no">
    <frameset cols="625, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_gauche.html" noresize frameborder="0" scrolling="auto">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_droite.html" noresize frameborder="0" scrolling="auto">
    </frameset>
    </frameset>

    <body>
    </body>
    </html>

    Résultat






  • marginwidth et marginheight


  • Ces deux attributs définissent les marges à laisser entre les bords du cadre et le début du document.
    Les valeurs sont à fournir en pixels.

    Complétons encore l'index :

    <html>
    <head>
    <title>Exemple de frame avec marginwidth et marginheight</title>
    </head>

    <frameset rows="94, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_du_haut.html" noresize frameborder="0" scrolling="nono" marginwidth="10" marginheight="10">
    <frameset cols="625, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_gauche.html" noresize frameborder="0" scrolling="no">
    <frameset cols="260, *">
    <frame src="https://www.astucesinternet.com/data/tutorial/cadre_de_droite.html" noresize frameborder="0" scrolling="no" marginwidth="30" marginheight="10">
    <frame src="https://www.astucesinternet.com/data/tutorial/vide.html" noresize frameborder="0" scrolling="no">
    </frameset>
    </frameset>
    </frameset>

    <body>
    </body>
    </html>

    Résultat






  • name


  • L'attribut name sert a nommer un cadre, le lier, sinon on ne pourra pas afficher un document là où on le veut.

    Dans l'exemple suivant, le lien est ouvert dans le même cadre :


    Code du document du cadre de Gauche(il se nomme "fond") :


    <html>
    <head>
    </head>

    <body>
    <a href="https://www.astucesinternet.com/data/tutorial/art-17.jpg">
    Cliquez-ici</a>
    </body>
    </html>


    Code du document créant les cadre :


    <html>
    <head>
    </head>

    <frameset cols="60%,*">
    <frame src="https://www.astucesinternet.com/data/tutorial/fond.html">
    <frame>
    </frameset>

    <body>
    </body>
    </html>



    Résultat



    L'image est bien ouverte dans le même cadre. Maintenant nous allons la faire s'ouvrir dans un autre cadre en attribuant un nom à ces deux cadres avec l'attribut name.
    Le cadre gauche, et celui de droite.

    Il va falloir utiliser ce nom dans lier l'image en utilisant l'attributtarget.
    C'est lui qui va contenir le nom du cadre où ouvrir le lien.



    Code du document du cadre de Gauche(il se nomme "fond2") :


    <html>
    <head>
    </head>

    <body>
    <a href="https://www.astucesinternet.com/data/tutorial/art-17.jpg" target="droite">
    Cliquez-ici</a>
    </body>
    </html>


    Code du document créant les cadre :


    <html>
    <head>
    </head>

    <frameset cols="40%,*">
    <frame name="https://www.astucesinternet.com/data/tutorial/fond2.html">
    <frame name="droite">
    </frameset>

    <body>
    </body>
    </html>



    Résultat



    On peut diriger les liens vers une meme fenetre sans devoir préciser a chaque fois, on utilise alors la balise de type marqeur <base>. Et donc définir une cible commune à tout les liens d'un document. Et là encore la balise target sera utilisée. La balise <base> doit se situer dans
    la section d'en-tête du document (entre <head> et </head>).

    On pourrait donc modifier le code du document de gauche ainsi ("fond3"):




    <html>
    <head>
    <base target="droite"</base>
    </head>

    <body>
    <a href="https://www.astucesinternet.com/data/tutorial/art-17.jpg">
    Cliquez-ici</a>
    <a href="http://http://www.astucesinternet.com/uploads/smil42627db1937c4.gif">
    Cliquez-la</a>
    <a href="http://www.astucesinternet.com/uploads/smil42627f3f542b2.gif">
    Ou ici</a>
    <a href="http://www.astucesinternet.com/uploads/smil4262817187d45.gif">
    Ou la</a>
    </body>
    </html>


    Code du document créant les cadre :


    <html>
    <head>
    </head>

    <frameset cols="40%,*">
    <frame name="gauche" src="https://www.astucesinternet.com/data/tutorial/fond3.html">
    <frame name="droite">
    </frameset>

    <body>
    </body>
    </html>



    Résultat




    Vous pouvez attribuer n'importe quel nom à un cadre, pour peu qu'il n'appartienne pas au 4 noms
    ci-dessous. Les noms ci-dessous ont des fonctions particulières :

    • _parent désigne la fenêtre (ou le cadre) directement supérieur.

    • _top désigne la fenêtre de départ.

    • _self désigne le propre cadre. Utile avec la balise <base>.

    • _blank créer une nouvelle fenêtre pour le document.






    Les attributs de la balise <frameset>



  • framespacing

  • la balise <frame> ne possede qu'un seul attribut: framespacing. Il reçoit une valeur en pixels qui définit l'espacement à maintenir
    entre les différents cadres.




    La balise <noframes>


    Certains navigateurs sont incapable d'utiliser les cadres. Pour que la personne ne se retrouve pas devant une page blanche, il faut utiliser
    la balise du type conteneur <noframes>. Le contenu de cette balise n'est affiché
    que si le navigateur ne reconnait pas les cadres. Sinon, il est ignoré.

    Il doit entourer la balise <body>, comme dans
    l'exemple suivant :


    <html>
    <head>
    <title>Navigateur noframes</title>
    </head>

    <frameset cols="40%,*">
    <frame>
    <frame>
    </frameset>

    <noframes>
    <body>
    </body>
    </noframes>
    </html>




    Autres articles
    01/01/2016 20:06:26 - Bonne année 2016
    07/09/2015 16:32:01 - 7-Zip : Découvrez nos fiches pratiques
    04/03/2015 20:22:21 - Google Chrome disponible en version 41
    28/02/2015 14:50:21 - Firefox 36 disponible en téléchargement
    11/02/2015 19:59:00 - Mise à jour des produits Microsoft (Février 2015)
    25/01/2015 16:09:20 - Google Chrome disponible en version 40
    18/01/2015 15:49:18 - Firefox 35 disponible en téléchargement
    15/01/2015 19:45:28 - Mise à jour des produits Microsoft (Janvier 2015)
    01/01/2015 00:31:27 - Bonne année 2015
    12/12/2014 19:16:16 - Mise à jour des produits Microsoft (Décembre 2014)

    Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
    Posté Commentaire en débat
    Publicités
    Rejoignez nos forums
    Forums de discussionRejoignez notre communauté en vous inscrivant gratuitement sur notre forum de discussion. Vous pourrez participer à la vie du forum et aider les autres membres en répondant à leurs questions.Toute contribution est la bienvenue !
    Posez vos questions
    Logo entraide informatiqueVous avez une question concernant l'un de nos articles ? Vous avez un problème informatique à nous soumettre ? Rendez-vous dans notre forum de discussion, rubrique Entraide Informatique.

    Lien direct : Forum d'entraide informatique