Introduction à la conception de pages à l'aide de balises frameset

Important : Vous ne pouvez pas placer la balise set> Et HTML5 ne prend plus en charge l'utilisation des balises frameset ! ! !

1. L'élément frameset peut définir un ensemble frame, qui est utilisé pour organiser plusieurs fenêtres (frames). Chaque framework a une documentation distincte. Avec l'utilisation du cadre , nous pouvons diviser la page et l'actualiser partiellement. Une utilisation raisonnable apportera une très bonne expérience aux utilisateurs.

2. Plusieurs attributs du frameset :

①, cols :définissent le nombre et la taille des colonnes dans le ensemble de cadres. Coupez l'écran verticalement (par exemple, en deux écrans gauche et droit), acceptez entier valeur, pourcentage, * signifie occuper l'espace restant. Le nombre de valeurs représente le nombre de fenêtres divisées et est séparé par des virgules. Par exemple, COLS="30,*,50%" peut être divisé en trois fenêtres. La première fenêtre a une largeur de 30 pixels et constitue une division absolue. La deuxième fenêtre est ce qui reste après l'allocation des première et troisième fenêtres. L'espace en dessous, la troisième fenêtre occupe 50 % de l'ensemble de l'écran de la fenêtre et la largeur est une division relative. Vous pouvez ajuster les chiffres vous-même.

②, lignes :Définissez le nombre et la taille des lignes dans le jeu de cadres. Il s'agit d'une coupe horizontale qui sépare le haut et le bas de l'écran. Les paramètres de valeur sont les mêmes que ci-dessus. Essayez de ne pas mettre les paramètres COLS et ROWS dans la même balise, car Netacape ne peut parfois pas afficher ce type de frame, essayez donc d'utiliser plusieurs fractionnements.

③, frameborder : définit la bordure du cadre, sa valeur est seulement 0 et 1, 0 signifie pas de bordure, 1 signifie afficher la bordure .

④, border: Définissez l'épaisseur de la bordure du cadre.

⑤, bordercolor : Définissez la couleur de la bordure du cadre.

⑥, framespacing : représente la distance entre les images et l'espace laissé entre les images.

3. Attributs de la balise frame :

①, name : Définissez le nom du cadre. Cette propriété doit être définie.

②, src : Définissez le nom ou le chemin de la page Web à afficher par ce cadre. Cette propriété doit être définie.

③, défilement : Définissez s'il faut afficher les barres de défilement. Les valeurs de réglage sont automatiques, oui, non.

④, bordercolor : Définissez la couleur de la bordure du cadre.

⑤, frameborder : Définissez s'il faut afficher la bordure du cadre. Les valeurs de réglage sont uniquement 0 et 1 ; 0 signifie aucune bordure, 1 signifie afficher la bordure.

⑥, noresize : Définissez si la taille du cadre peut être ajustée manuellement.

⑦, margelargeur : Définissez la largeur entre la limite du cadre et le contenu à l'intérieur.

⑧, marginhight : Définissez la hauteur entre la limite du cadre et le contenu qu'il contient.

⑨, largeur : Définissez la largeur du cadre.

⑩, hauteur : Définissez la hauteur du cadre.

4. Exemple d'utilisation du Frameset :

Si vous souhaitez obtenir l'effet suivant

La page est divisée en trois parties, en haut, à gauche et à droite. Cliquez sur le lien hypertexte à gauche et la page du cadre à droite changera en conséquence.

Page globale : main.html

<frameset rows="11%,*" border="1px" framespacing="0">
        <frame src="top.html" name="top" frameborder="0" />
        <frameset cols="12%,*"   framespacing="0" framespacing="0">
            <frame src="left.html" name="left" scrolling="auto"/>
            <frame src="right.html" name="right" scrolling="auto"/>
        </frameset>
</frameset>

top.html, right.html est une page vide, left.html est la suivante :

<!-- 左边菜单栏显示-->
    <div >
        <ul >
            <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li>
            <li ><a href="taskManage.html" target="right">任务管理</a></li>
            <li ><a href="#" target="right" >数据集管理</a></li>
            <li ><a href="#" target="right" >模型管理</a></li>
        </ul>
    </div>

L'affichage hiérarchique de la page est principalement l'utilisation de colonnes et de lignes dans la balise frameset, combinée à l'imbrication de la balise frame. Si vous souhaitez cliquer sur la barre de menu de gauche et que le cadre de droite change en conséquence, vous devez connaître l'attribut

target : précise où ouvrir le document lié. Le navigateur chargera et affichera le document dans le cadre ou la fenêtre nommée avec l'attribut href de cette balise et dont le nom correspond à cette cible. Autrement dit, dans main.html, , quelle est la valeur de l'attribut name ici dans , puis dans left.html, ici Soyez égal.

5. Comment obtenir les éléments dans autres frames dans le frameset où se trouve la page parent dans la page enfant ?

C'est-à-dire comment obtenir la valeur d'attribut de la balise dans left.html dans right.html, etc.

$(parent.parent. mainFrame. document).contents().find("body").html(); //manFrame fait référence à l'identifiant du cadre que vous souhaitez afficher

, tel que le page left.html ci-dessus, l'ID de création de tâche est taskCreat, alors nous pouvons l'obtenir comme ceci : et changer son attribut class.

$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");

6. Avantages et inconvénients du frameset

Nous savons que le standard HTML5 actuel ne supporte plus le frameset, bien qu'il soit utilisé pour recharger le page. Il n'est pas nécessaire de recharger la page entière, une seule page de cadre dans la page doit être rechargée (réduisant la transmission de données et accélérant le téléchargement de la page Web). Mais il présente aussi de nombreux défauts. Par exemple, le bouton retour du navigateur est inutile ; il générera beaucoup de pages, ce qui est difficile à gérer ; le code est complexe et ne peut pas être facilement recherché par . moteurs de recherche ; il est affiché sur les petits appareils mobiles. Non complet ; les pages multi-frames augmenteront les requêtes http du serveur et ainsi de suite. Par conséquent, nous devons être prudents quant à l'utilisation du frameset, et le p CSS actuel peut également être utilisé pour implémenter cette fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!