Le concept de cadre en HTML. Iframe et Frame - que sont-ils et comment utiliser au mieux les cadres en HTML L'affichage de la largeur de la bordure du cadre est contrôlé par l'attribut

Commençons par la structure du cadre. Quelle est son essence ? Nous avons la possibilité dans le document que nous chargeons dans le navigateur d'organiser des zones spéciales de type fenêtre. D'autres documents individuels (pages Web) peuvent être chargés dans ces zones.

Pourquoi est-ce nécessaire ? Étant donné que les documents sont chargés dans leurs propres zones distinctes, ils se comportent indépendamment. Autrement dit, vous pouvez faire quelque chose dans un document, tandis que les autres documents restent inchangés.

Où peut-on trouver de telles structures à ossature ? Ce sont des fichiers d'aide (avec l'extension .chm).

Voici un exemple simple de document avec des cadres :

Exemple de cadres Vous consultez cette page à l'aide d'un navigateur qui ne prend pas en charge les cadres.

L'élément frameset. Son rôle est de couvrir la zone de visualisation et de la diviser en zones distinctes. Ceux. indiquez au navigateur dans quel rapport et comment (horizontalement ou verticalement) nous divisons ces zones.

L'élément frame décrit chacune de ces zones individuelles. Balise unique. Il occupe les dimensions spécifiées dans le jeu de cadres.

L'élément noframes s'affiche si le navigateur ne prend pas en charge les frames.

Notez qu’il n’y a aucun élément body. L'élément frameset est utilisé à la place. C’est l’une des raisons pour lesquelles les frames ne sont plus utilisés sur les sites web.

Attributs des éléments du jeu de cadres

• cols - division verticale de la page en zones d'affichage.
• lignes - division horizontale de la page en zones de visualisation.

élément de cadre

Cet élément décrit une zone de fenêtre unique. Vous pouvez y charger n'importe quel document en utilisant l'attribut src. Exemples:

Attribut défilement- défilement (auto par défaut). Si le document dépasse la zone de visualisation de ce cadre, un défilement se produit. Si le document rentre entièrement dans le cadre, il n'y a pas de défilement. Le défilement peut être désactivé, mais il est préférable de le laisser sur automatique.

Attribut unique noredimensionner- interdit de modifier la taille du cadre dans le navigateur. Par défaut, cela est autorisé.

Attribut bordure de cadre- image par image. Valeur '1' - dessiner, valeur '0' - ne pas dessiner. Seules ces deux valeurs sont valables. Par défaut, le cadre est dessiné.

Attribut largeur de marge– indique la distance à laquelle le contenu d'une image donnée s'éloignera horizontalement des images de cette image.

Attribut hauteur de la marge– retrait vertical du contenu jusqu'aux bordures du cadre.

Iframe intégré

Un élément iframe (« fenêtre de ligne »). Cet élément est apparié (il y a une balise d'ouverture et de fermeture). Cet élément a le même objectif : organiser un élément de fenêtre dans le document.

En quoi est-il différent des anciens cadres ? Il est autonome et ne nécessite aucun conteneur supplémentaire. Et il peut apparaître dans n’importe quel document, y compris là où il y a un élément body.

Un élément iframe est un élément en ligne avec un contenu remplaçable. Ceux. une zone de type ligne avec des dimensions abstraites est formée et le contenu d'un document externe (fichier html) est chargé dans cette zone.

Iframe a les mêmes attributs que les images (puisqu'elles sont du même type) : nom, largeur, hauteur, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.

3,8K

De nombreux sites Web modernes proposent des menus de navigation « collants » qui apparaissent soit dans la barre latérale, soit en haut lorsque vous faites défiler la page de haut en bas. Mais les propriétés CSS qui permettent de créer des menus collants ne sont pas toujours prises en charge par les navigateurs. Auparavant, les cadres HTML étaient utilisés pour implémenter des fonctionnalités similaires.

Différence entre les frames et les iframes

Lorsque vous utilisez un jeu de cadres, vous divisez la partie visible de la fenêtre du navigateur en plusieurs cadres. Chaque image a son propre contenu, qui n'affecte pas le contenu de la suivante. Les frames et les Iframes remplissent une fonction similaire : ils intègrent une ressource dans une page Web, mais ils sont fondamentalement différents les uns des autres :

• Les cadres sont les éléments qui définissent la mise en page ;
• Les iframes sont des éléments qui ajoutent du contenu.

Histoire et avenir des cadres

Les frames ont été dépréciés en HTML5 par le W3C. La raison de cette décision était que les cadres HTML avaient un impact négatif sur la convivialité et l'accessibilité. Voyons si ces affirmations sont justifiées.

Problèmes avec les cadres

• Problèmes d'utilisabilité : avec la popularité croissante des appareils mobiles dotés de petits écrans, les sites doivent offrir aux utilisateurs plusieurs vues qui changent en fonction de la taille de la fenêtre d'affichage. Bien que les frames puissent être manipulés pour offrir un certain degré de réactivité, ils ne sont pas très adaptés à la création de sites Web réactifs ;
• Accessibilité : les lecteurs d'écran et autres technologies d'assistance sont assez difficiles à lire et à interagir avec les sites qui utilisent des cadres.

Il existe actuellement une tendance mondiale dans le développement Web à séparer le contenu d'une page Web de sa présentation :

• Le contenu doit être ajouté et défini par balisage, par exemple via HTML ;
• La présentation est définie par des langages tels que CSS et JavaScript.

L'utilisation de frames implique initialement la création d'une apparence et d'une structure spécifiques, tandis que les tâches de présentation doivent être gérées à l'aide de CSS.

L'avenir des cadres

Bien que tous les navigateurs modernes prennent aujourd'hui en charge les frames, le W3C a explicitement déclaré que les frames « ne devraient pas être utilisés par les développeurs Web ». Si votre site utilise des frames, vous devriez envisager de passer à d’autres technologies. À un moment donné, les navigateurs ne prendront plus en charge les frames, et lorsque cela se produira, les sites qui les utilisent deviendront inutilisables.

Comment créer des cadres en HTML

Les cadres ne doivent pas être utilisés lors du développement de nouveaux sites, mais pour les webmasters qui gèrent d'anciennes ressources, savoir comment les utiliser peut être utile.

Concept de base des cadres

Le concept de base des frames est assez simple :

• Utilisez l'élément frameset à un emplacement spécifique dans l'élément body du document HTML ;
• Utilisez l'élément frame pour encadrer le contenu d'une page Web ;
• Utilisez l'attribut src pour identifier la ressource qui doit être chargée à l'intérieur du cadre ;
• Créez un fichier de contenu distinct pour chaque cadre HTML.

Examinons quelques exemples de la façon dont cela fonctionne. Nous devons d’abord créer des documents HTML avec lesquels nous travaillerons. Créons quatre documents HTML différents. Voici ce que contiendra le premier :

Cadre 1

Contenu du cadre 1

Nous enregistrerons le premier document sous le nom frame_1.html. Les trois documents restants auront un contenu similaire et seront nommés en conséquence.

Création de colonnes verticales

Pour créer un ensemble de quatre colonnes verticales, vous devez utiliser un élément frameset avec l'attribut cols. L'attribut cols est utilisé pour déterminer le nombre et la taille des colonnes que le frameset contiendra. Dans notre cas, nous avons quatre fichiers à afficher. Nous avons donc besoin de quatre cadres.

Pour les créer, nous devons définir l'attribut cols sur quatre valeurs, séparées par une virgule. Pour plus de simplicité, nous attribuerons à chacun des cadres une valeur de * , cela les définira sur une taille qui remplira automatiquement tout l'espace disponible. Voici à quoi ressemblera notre balisage HTML :

Et voici comment ce balisage sera affiché :

Création de lignes horizontales

Les lignes du cadre HTML peuvent être créées en utilisant l'attribut rows plutôt que l'attribut cols comme dans l'exemple précédent :

En effectuant cette modification, nous avons fait en sorte que les images soient désormais chargées sur quatre lignes, les unes au-dessus des autres :

Fusionner des colonnes et des lignes

Les colonnes et les rangées de cadres peuvent être affichées simultanément sur la même page. Vous pouvez imbriquer un cadre dans un autre. Pour ce faire, nous créons d’abord un jeu de cadres, puis nous imbriquons le jeu de cadres enfant à l’intérieur de l’élément parent. Voici un exemple de la façon dont vous pouvez imbriquer deux lignes dans un ensemble de trois colonnes :

jeu de cadres cols="*,*,*">

Exemple de cadre HTML :

Le jeu de cadres imbriqué est situé à l'intérieur de l'élément parent, le premier cadre. L'élément imbriqué peut être placé n'importe où. Par exemple, si nous voulons que l’élément imbriqué soit placé au centre, alors nous réorganisons simplement les éléments comme suit :

Voici comment les cadres apparaîtront désormais :

Vous pouvez créer d'autres cadres imbriqués :

Ce code crée un ensemble de deux colonnes de taille égale. Nous divisons ensuite la deuxième colonne en deux lignes. Et enfin, nous divisons la deuxième ligne en deux colonnes. Voici à quoi cela ressemblera :

Une autre façon de créer une combinaison de lignes et de colonnes consiste à définir une grille de colonnes et de lignes dans un seul cadre. Par exemple, si vous souhaitez créer une grille de quatre cadres de tailles égales, vous pouvez utiliser le code suivant :

La grille de lignes et de colonnes résultante ressemblera à ceci :

Comment styliser les cadres

Lorsqu'il s'agit de styliser une page Web utilisant des cadres en HTML, il existe deux manières d'attribuer des styles :

• Définir des styles au sein de chaque cadre ;
• Définition des styles pour le jeu de cadres.

La représentation de chaque image doit être définie dans le document source. La vue du jeu de cadres doit être définie dans le document parent contenant le jeu de cadres. Autrement dit, les styles de frame_1.html doivent être définis par les règles CSS contenues dans le fichier frame_1.html, ou dans la feuille de style associée au fichier frame_1.html.

Définir des styles de cadre dans le document source

Comme pour toute page Web, le contenu de chaque cadre peut être stylisé à l’aide de CSS. Pour styliser le contenu de chaque cadre, il doit être ajouté au document principal, soit en créant un lien vers un fichier de style externe, soit en ajoutant des styles internes ou en ligne. Étant donné que nous disposons de quatre documents sources, les styles CSS doivent être appliqués à chaque document séparément.

En appliquant des styles CSS à une page Web contenant un jeu de cadres, nous ne pourrons pas appliquer de styles à chaque cadre individuellement. Si nous voulons styliser frame_1.html, nous devons ajouter ces styles directement au document lui-même. Voici un exemple de la façon dont cela peut être fait :

corps (fond : gris ;) h1 (couleur : bleu ;) p (marge : 20px ;) Image 1

Contenu du cadre 1

Si nous revenons à notre exemple précédent de création de cadres en HTML avec quatre colonnes de taille égale et chargeons le jeu de cadres après avoir apporté ces modifications au fichier frame_1.html, nous obtenons ceci :

Définir des styles et formater des jeux de cadres

Comment influencer la présentation du frameset au-delà de la définition des styles des documents eux-mêmes :

• La taille de chaque cadre peut être définie ou fixe ;
• L'espace entre les images peut être modifié ;
• Le format de la bordure autour de chaque cadre peut être spécifié.

Ces modifications ne sont pas effectuées via CSS. Celles-ci se font en ajoutant des attributs et leurs valeurs à l'élément frame.

Dimensionnement du cadre

La taille des images peut être spécifiée en pixels, en pourcentages ou les images peuvent occuper automatiquement tout l'espace disponible. Pour spécifier la taille du cadre, insérez la valeur souhaitée dans l'attribut cols ou rows. Par défaut, si un cadre n'a pas l'attribut noresize spécifié, les visiteurs du site peuvent utiliser la souris pour faire glisser la bordure entre deux cadres et les redimensionner. Si cela n'est pas souhaité, l'attribut noresize peut alors être appliqué à l'élément frame et ne pourra pas être redimensionné. Combinons ces deux concepts dans la pratique.

Nous allons créer la mise en page suivante :

• Une ligne pleine largeur en haut de la page ;
• Trois colonnes sous la rangée supérieure ;
• Les première et troisième colonnes sont dimensionnées pour créer des barres latérales gauche et droite ;
• La colonne du milieu est dimensionnée pour représenter une zone de contenu plus grande.

Nous pouvons créer un cadre HTML en utilisant le code suivant :

Ce code crée un frameset de deux lignes :

• La première ligne fait 150 pixels de haut. L'attribut noresize spécifié pour la première image signifie que sa taille ne peut pas être modifiée ;
• Les styles que nous avons appliqués précédemment à frame_1.html sont conservés, mais ils n'affectent que le contenu de ce cadre ;
• La deuxième rangée s'agrandit pour remplir l'espace restant ;
• Le deuxième jeu de cadres est imbriqué dans la deuxième ligne et contient trois colonnes ;
• Les première et troisième colonnes remplissent chacune 20 % de l'espace disponible dans la fenêtre du navigateur ;
• La deuxième colonne s'agrandit pour remplir l'espace laissé entre la première et la troisième colonne ;
• Comme nous n'avons pas spécifié l'attribut noresize pour les colonnes, elles seront initialement affichées en fonction des tailles spécifiées dans le code.

Mais un visiteur du site pourra les redimensionner manuellement.

Ce code crée une page Web qui s'affiche comme ceci :

Formatage de la bordure et remplissage autour du cadre

Maintenant que nous avons défini la disposition, si nécessaire, nous pouvons augmenter ou diminuer le remplissage entre les images, ainsi que supprimer la bordure entre elles. En utilisant la mise en page que nous avons créée à l'étape précédente, supprimons les bordures entre les trois colonnes, mais laissons la bordure entre les lignes du haut et du bas. Ajoutons également un peu de remplissage autour du contenu du premier cadre HTML :

L'attribut marginheight appliqué à la première image ajoute 15 pixels de marge au-dessus et en dessous du contenu chargé dans la première image. Une valeur frameborder de 0 supprime les bordures des trois images inférieures. Voici à quoi cela ressemblera :

Spécification de cadres à l'aide de liens

L'une des utilisations les plus courantes des cadres consiste à créer un menu de navigation « collant » dans un cadre qui est toujours visible quelle que soit la position du contenu des autres cadres. Lorsqu'ils sont utilisés correctement, les liens du menu de navigation entraînent le chargement de nouvelles ressources dans le cadre tandis que le reste du cadre reste statique.

Vous pouvez formater les ancres pour cibler des cadres spécifiques en attribuant à l'élément de cadre souhaité un attribut name et en utilisant l'attribut target à l'intérieur de l'élément a pour charger le href dans le cadre spécifié. Si tout cela vous semble un peu déroutant, passons en revue le processus de création de cadres en HTML, étape par étape.

Tout d'abord, nous devons attribuer un nom au cadre dans lequel les liens doivent s'ouvrir. Dans la mise en page que nous avons créée précédemment, nous pouvons utiliser la colonne de gauche pour le menu de navigation et la colonne centrale comme cadre cible. Pour ce faire, vous devez attribuer un attribut name à l'élément cible :

Maintenant que nous avons défini name="mid_col" pour la colonne centrale, nous pouvons créer plusieurs liens dans le document source de notre colonne de gauche frame_2.html :

Cadre 2

Contenu du cadre 2

• Charger frame_1.html
• Charger frame_2.html
• Charger frame_3.html
• Charger frame_4.html

Désormais, lorsque nous chargerons la page Web, la barre latérale gauche hébergera quatre liens de navigation. Lorsque vous cliquez sur le lien, le contenu du fichier est chargé dans le cadre de la colonne du milieu avec l'attribut name="mid_col" . Voici ce que nous verrons au chargement de la page :

Si nous cliquons sur le lien Load frame_1.html, le contenu de ce fichier sera chargé dans la colonne centrale et nous obtiendrons ce qui suit :

Si nous cliquons sur le lien Load frame_2.html, nous verrons que la barre latérale de gauche et la colonne centrale afficheront des liens de navigation :

Cliquer sur les liens Load frame_3.html et Load frame_4.html dans la colonne centrale chargera le contenu de ces fichiers. Si nous avons oublié d'ajouter l'attribut target="mid_col" pour l'un des liens, alors lorsque vous cliquerez dessus, le fichier sera chargé dans le cadre qui contient le lien. Si nous voulons recharger la page entière, par exemple en suivant un lien vers un site externe, nous devons ajouter l'attribut target="_blank" ou target="_top". Fournir une solution de secours noframes

Dans le passé, l'élément noframes était utilisé pour fournir une solution de secours aux navigateurs qui ne prennent pas en charge les frames HTML. Actuellement, tous les navigateurs modernes prennent en charge les frames, mais les noframes ne sont pratiquement pas pris en charge. En conséquence, nous n'avons plus besoin de créer une solution de secours noframes lorsque nous travaillons avec des frames.

Comment rendre les cadres réactifs

Lors de l'utilisation de frames, il est assez difficile d'assurer une facilité d'utilisation pour les visiteurs accédant au site depuis des smartphones et des petites tablettes. Étant donné que les frames ont été complètement supprimés de HTML5 et sont considérés comme obsolètes, il est important que les propriétaires de sites construits à l'aide de frames prévoient de reconstruire leurs ressources et de migrer vers d'autres technologies.

Utiliser des lignes plutôt que des colonnes

Si possible, organisez les cadres en lignes plutôt qu'en colonnes. Sur un petit écran, il est beaucoup plus facile de naviguer dans le contenu verticalement qu'horizontalement. Les cadres HTML disposés en rangée sont beaucoup plus faciles à visualiser sur un petit écran. Si nous réduisons la largeur des mises en page contenant des lignes et des colonnes, en simulant l'écran de l'Apple iPhone 6, nous constatons que les lignes sont beaucoup plus faciles à visualiser que les colonnes :

Utiliser des pourcentages pour les largeurs de colonnes

Lorsque la taille des colonnes est définie en pourcentages plutôt qu'en pixels, elles seront automatiquement redimensionnées en fonction de la taille de l'écran de l'appareil. Bien que cela puisse créer certains problèmes dans la mesure où certaines images peuvent devenir trop petites, l'interaction globale et l'expérience de visualisation seront meilleures si la largeur globale des colonnes est définie en pourcentage plutôt qu'en pixels.

Comment passer des cadres à d'autres technologies

L'élément frameset et l'élément frame ont été supprimés de la dernière spécification HTML5. Les propriétaires de sites construits à l'aide de frames doivent reconstruire leurs actifs pour les supprimer de la mise en page. À un moment donné, les navigateurs cesseront de prendre en charge les frames. Ainsi, abandonner les frames n’est pas seulement souhaitable, cela doit être fait.

Évaluation du contenu contenu dans les frames

La première étape pour repenser un site utilisant des iframes HTML consiste à identifier les raisons pour lesquelles les frames sont utilisés :

• Des cadres ont-ils été utilisés pour créer une mise en page spécifique ? Si tel est le cas, CSS peut être utilisé pour créer une mise en page similaire ;
• Les cadres ont-ils été utilisés pour créer un conteneur publicitaire de taille spécifique ? Il existe de nombreuses façons de recréer cet effet en utilisant CSS ou des widgets conçus pour fonctionner avec CMS ;
• Des cadres ont-ils été utilisés pour créer des menus de navigation collants ? Encore une fois, le même effet peut être recréé en utilisant CSS ;
• Des frames ont-ils été utilisés pour charger du contenu à partir d’un site externe ? Si tel est le cas, l'élément iframe, qui fait partie de HTML5, peut être utilisé pour intégrer du contenu provenant d'un site externe.

Dans presque tous les cas, vous pouvez utiliser CSS pour recréer une mise en page conçue avec des frames, et les iframes peuvent être utilisées pour intégrer des ressources externes.

Stratégie pour votre nouveau site internet

Si votre site a été construit à l’aide de frames, il y a de fortes chances qu’il soit déjà très obsolète. Au lieu de simplement compiler tout le contenu de votre site dans un seul fichier HTML et de le styliser avec CSS, il est peut-être temps de penser à passer à un système de gestion de contenu.

Le passage à un CMS prendra plus de temps au début, mais à long terme, les avantages d'un site Web moderne l'emporteront sur les défis à court terme. Pour vous aider à choisir un système de gestion de contenu, nous vous recommandons de prêter attention aux trois plus populaires :

• WordPress ;
• Joomla! ;
• Drupal.

Ressources additionnelles

Si vous souhaitez en savoir plus sur les cadres HTML, la meilleure source d'informations est le World Wide Web Consortium (W3C). Voici quelques pages contenant des informations sur les cadres :

• Documentation HTML4 sur les cadres ;
• Fonctionnalités HTML5 obsolètes

Articles connexes

Nom de l'article	Les attributs	Description
sans cadres		L'élément a été utilisé à l'intérieur d'un élément parent pour fournir un contenu de secours aux utilisateurs dont les navigateurs ne prenaient pas en charge . À ce stade, les frames sont une technologie obsolète, l’élément ne doit donc pas être utilisé.
iframe	bac à sable	crée un cadre en ligne qui génère un document HTML indépendant dans le document actuel.
jeu de cadres	bordure de cadre	L'élément a été utilisé pour créer un groupe de cadres pouvant être manipulés et stylisés comme un seul. Les cadres HTML sont désormais obsolètes et ne doivent pas être utilisés.
cadre	SRC	L'élément était utilisé pour diviser la fenêtre du navigateur en plusieurs parties indépendantes. Les frames sont actuellement obsolètes et ne doivent pas être utilisés.

Cette publication est une traduction de l'article « Frames », préparé par l'équipe du projet amical.

453

Frameset est un moyen simple de créer plusieurs zones de défilement distinctes dans une fenêtre de navigateur, ainsi qu'un mécanisme pratique pour modifier le contenu d'un cadre.

Mais les cadres présentent également des inconvénients importants. C'est pourquoi leur utilisation n'est pas recommandée. Bien que les frames soient pris en charge dans HTML 4.01, ils ne le sont pas dans HTML 5. Ils ont été remplacés par des méthodes de formatage CSS riches en fonctionnalités. Les principaux inconvénients des cadres :

• Les moteurs de recherche ont du mal à travailler avec les frames ;
• Mauvaise compatibilité des URL ;
• Les cadres ne sont pas disponibles pour toutes les applications clientes ;
• Les pages affichées dans des cadres sont difficiles à mettre en signet ;
• Problèmes courants lors de l'impression de pages Web.

En règle générale, les cadres sont utilisés pour créer des zones de défilement distinctes dans une seule fenêtre. Cette approche est utilisée dans les applications pour plates-formes mobiles et de bureau. Un exemple d'une telle application est l'Explorateur Windows. La fenêtre Explorateur se compose de deux parties. Les dossiers et les « Favoris » sont affichés sur le côté gauche de la fenêtre, et le contenu du dossier sélectionné sur le côté gauche de la fenêtre est affiché sur le côté droit.

Jeux de cadres et documents cadres

Les cadres sont difficiles à utiliser car ils nécessitent la création d'un fichier HTML distinct qui définit l'emplacement des cadres. Ainsi que des fichiers HTML supplémentaires pour les utiliser.

Création d'un jeu de cadres

Vous trouverez ci-dessous un exemple de création d'un frameset HTML :

… …

Caractéristiques des codes :

• L'élément "body" est manquant. Son rôle est joué par le tag ;
• Les balises situées à l'intérieur définissent le contenu des cadres et leurs propriétés ;
• Sauf qu'il n'y a plus de contenu dans le document.

Étiqueter

La balise est responsable de l'emplacement du cadre dans le document. Les valeurs qui y sont spécifiées déterminent le nombre de lignes et de lignes du jeu de cadres, ainsi que la largeur des cadres. Le format de la balise ressemble à ceci :

La taille des colonnes ou des lignes peut être spécifiée en pixels, en pourcentages ou en "*". Dans ce dernier cas, le navigateur divisera le reste de la fenêtre en colonnes, où la valeur « * » indique leur largeur.

Les valeurs de l'attribut cols ou rows déterminent également le nombre de frames affichés sur la page. Chaque entrée (valeur) nécessite une balise à l'intérieur d'une balise.

Considérez les exemples suivants de création d'une balise :

Étiqueter

La balise est responsable des propriétés de chaque image du frameset inclus dans la balise frameset. Il a la syntaxe suivante :

L'attribut name donne au cadre un nom unique qui peut être référencé par des URL, des scripts, etc. Ceci est nécessaire pour contrôler le contenu du cadre. L'attribut src est utilisé pour spécifier l'URL du contenu qui doit être affiché dans le cadre.

La balise prend en charge un attribut supplémentaire : noresize. Par défaut, la taille du cadre est redimensionnable. Pour empêcher le redimensionnement, vous devez définir l'attribut noresize sur noresize .

Par exemple :

Définir des liens pour les cadres

Pour modifier le contenu d'un cadre, vous devez spécifier le cadre souhaité. L'attribut name est utilisé pour cela. Ces noms peuvent ensuite être utilisés dans des scripts et des balises de lien pour définir un nouveau contenu pour le cadre.

Vous pouvez modifier le contenu d'un cadre dans un frameset à l'aide de l'attribut target de la balise link. Les valeurs suivantes sont autorisées pour l'attribut cible :

Par exemple :

Alors les montures... à quoi servent-elles et quels avantages apportent-elles ? Je vais essayer d'en parler dans ce chapitre, et bien sûr de comment les mettre en œuvre et travailler avec eux.

Souvent, lors de la création d'un site Web, il devient nécessaire d'ouvrir plusieurs documents HTML en même temps dans une seule fenêtre de navigateur... des cadres ont donc été créés pour définir les zones de travail de chaque document. De plus, les cadres sont un bon outil avec lequel vous pouvez faire une mise en page ; ils servent d'« alternative » intéressante à la méthode tabulaire de mise en page... Je mets le mot « alternative » entre guillemets car c'est une manière complètement différente de créer un site Web avec ses propres avantages et inconvénients et il est assez difficile de le comparer avec la construction de site jusqu'à présent familière.. mais commençons par le commencement..

Commençons ? Supposons que nous devions ouvrir trois documents HTML à la fois dans une seule fenêtre de navigateur et les organiser, par exemple, de cette manière :

De quoi avons-nous besoin pour cela ? Pour commencer, bien sûr, nous devons créer trois documents HTML distincts que nous ouvrirons dans une seule fenêtre. Laissez le premier document contenir une image graphique et agir comme un logo, appelons-le logotype.html, le deuxième document sera. du contenu... appelons-le menu .html, et le troisième est un document avec beaucoup de texte. texte.html. Bien sûr, vous pouvez proposer vos propres noms, ainsi que le contenu des documents, mais pour l'instant il vaut mieux copier le mien... ce sera plus pratique pour moi et pour vous.

Il y a donc trois fichiers logotype.html, menu.html et text.html... que nous devons placer sous un même toit, mais nous n'avons pas encore de toit.

Nous écrivons « toit », le document principal auquel nous connecterons nos fichiers. Puisqu'il s'agira du principal, nous lui donnons le nom index.html.

cadres

Voici la structure du document qui nous est familière, que nous avons mâchée au tout début de notre formation. Les frames brisent les stéréotypes existants ! La structure du cadre du document ressemble à ceci :

cadres

L'absence de balise est compensée par une nouvelle balise - installez un cadre ou un ensemble de cadres... nous travaillerons en fait plus loin avec ce type.

La balise a des attributs rows et cols - ces attributs indiquent au navigateur comment placer les cadres dans la fenêtre du navigateur.

lignes - horizontalement colonnes - verticalement

Dans notre cas, nous avons besoin d'un placement horizontal des cadres... donc nous écrivons comme ceci :

cadres

Les pourcentages après le signe égal ne sont rien de plus que les tailles de nos fenêtres frame dans une grande fenêtre de navigateur ; nous sommes censés placer trois fenêtres - il y a donc également trois valeurs séparées par des virgules. Rappelez-vous comment nous définissons la taille des cellules du tableau, le même principe s'applique ici. Comme dans le cas des cellules du tableau, les tailles de cadre peuvent être spécifiées en pourcentage de la surface totale et en pixels.

Voici quelques exemples d’écriture :
- cette entrée indique qu'il y aura trois fenêtres horizontales où la dernière occupera 70 % de la surface de la fenêtre du navigateur, et les deux premières occuperont 15 %.
- ici trois fenêtres sont situées verticalement dont la largeur est indiquée en pixels.
- une telle entrée signifie que les première et troisième fenêtres auront respectivement une largeur de 100 et 180 pixels, et que le deuxième cadre occupera toute la zone restante.

Nous avons fini de placer les documents, il ne reste plus qu'à les connecter et à profiter du premier résultat.

La balise et son attribut src indiqueront au navigateur le chemin d'accès au document html qui devra être ouvert dans l'espace prévu à cet effet. Nous avons trois documents distincts logotype.html, menu.html et text.html, nous devons maintenant spécifier un chemin pour chacun, ce que nous faisons réellement. (Je suppose que les quatre fichiers se trouvent dans le même dossier et que leurs chemins d'accès ont la notation la plus simple comme : )

Fichier index.html


cadres







Fichier logotype.html


cadres





Menu Fichier.html


cadres


Menu:

Soupe aux champignons
Haricots en pot, à l'italienne
Salade d'été australienne
... ... ...



Fichier texte.html


cadres


Soupe aux champignons

beaucoup de texte..

Dans cet exemple, j'ai posté les quatre documents HTML, où index.html est le principal, et les trois autres sont des pages de plug-in, dont chacune, en principe, peut fonctionner de manière autonome et contenir n'importe quoi, des images, des tableaux, des textes, des liens. .. Je l'ai fait. C'est pour vous faire comprendre le principe du travail avec les frames. Dans d'autres exemples, je publierai uniquement le fichier principal avec les cadres (sinon ils prennent tous trop de place sur la page), et vous savez que j'ai « quelque part là-bas » tous les autres fichiers contenant des graphiques, des textes, peut-être quelque chose comme ça. sinon.. eh bien, ne restez pas derrière moi, éditez lentement vos propres pages pour le futur site de formation.. Je ne sais pas sur quoi vous allez écrire le vôtre, mais j'ai promis d'aider une fille à écrire un site Web dédié à la cuisine..)) alors j'ai décidé, pour ainsi dire, de faire d'une pierre deux coups.. la fille lapin et le site Internet..)) quelque chose comme ça..))

Dans l'exemple ci-dessus, nous avons disposé toutes les fenêtres horizontalement ; en changeant l'attribut rows en cols, vous pouvez les disposer dans un ordre vertical. Mais que se passe-t-il si vous devez placer nos fenêtres ?

comme ça ? : ou comme ça ? : ou même comme ça ? :

Il y a une sortie. Regardons des exemples.

Commençons par le premier cas... que voit-on ? Et nous voyons deux lignes, où la seconde est divisée en deux colonnes.

Et maintenant, dans l'ordre :

- diviser la fenêtre du navigateur en deux lignes
- chargez notre logo en première ligne
- et divisez la deuxième ligne en deux colonnes
- dans le premier il y aura un menu
- et dans le second il y a beaucoup de texte
- fermer la balise de division de colonne
- fermez la balise de division de ligne

En général, il est incorrect de dire des colonnes et des lignes, puisque les cadres n'ont rien à voir avec les tableaux autre que la similitude visuelle ; il est correct de dire des cadres horizontaux et verticaux... eh bien, je le dis de cette façon pour que ce soit le cas. plus clair pour toi..

Bon, regardons un exemple :

cadres

Dans le deuxième cas, nous avons deux colonnes dans lesquelles la seconde est divisée en deux lignes, nous écrirons donc ainsi :

- diviser la fenêtre en deux colonnes
- le premier contiendra le contenu
- et divisez la seconde en deux lignes
-logo
- et le texte principal
- fermer la division de ligne
- fermer la division en colonnes

cadres

Le troisième cas est un peu plus compliqué, mais il ne faut pas en avoir peur... d'autant plus que j'ai personnellement choisi ce genre de construction pour un site sur l'art culinaire, je vous explique pourquoi ci-dessous ; Ce que nous avons? trois colonnes, et la deuxième colonne contient essentiellement notre premier cas.

- divisez la fenêtre en trois colonnes (notez que la deuxième colonne occupe exactement 800 pixels et que les deux extérieures n'ont pas de taille exacte et diviseront l'espace restant en deux)
-dans la première colonne on charge un document html qui remplira une fonction purement décorative

-
-
- Dans la deuxième colonne nous insérons notre « premier cas »
-
-
-
-

- dans la troisième colonne on charge le même fichier avec les décorations
- claquer

Regardez l'exemple, puis j'expliquerai pourquoi j'ai choisi la voie des cinq fenêtres

cadres

Alors pourquoi cinq fenêtres ? Je me souviens que j'ai déjà écrit sur le fait que différents utilisateurs d'Internet ont des résolutions différentes sur leurs moniteurs et, par conséquent, sur différents écrans, notre site sera différent... et s'il n'y a pas de tailles spécifiques, tous nos dessins, textes, tableaux le seront , comme on dit, « flotter » pour les utilisateurs dont les résolutions de moniteur sont différentes de la vôtre. Lorsque nous avons aménagé le site à l'aide d'un tableau, le problème des dimensions des pages a été résolu en attribuant une largeur et une hauteur spécifiques à ce tableau, malheureusement, cela ne peut pas être fait avec des cadres... même si vous spécifiez la largeur des cadres qui n'est pas indiquée ; pourcentages, mais en pixels, c'est toujours la dernière colonne qui s'étendra sur la largeur restante de la fenêtre du navigateur et la page, comme on dit, perdra son « aspect commercialisable ». Alors, que devrions-nous faire? Il faut recourir à des petites astuces... En définissant la colonne centrale (dans laquelle nous avons en fait la page entière) à une taille de 800 pixels, nous déterminons une fois pour toutes sa largeur, ainsi que les première et troisième colonnes sans dimension, dans en plus de la décoration, ils agissent comme une sorte de « ressorts » sur lesquels repose la colonne centrale. Ainsi, pour les personnes ayant une petite résolution d'écran, ces fenêtres/champs seront étroites, et pour les personnes ayant une haute résolution, elles seront larges, la colonne centrale ne sera donc en aucun cas affectée et nous pouvons désormais y placer n'importe quel objet en toute confiance, avec une référence précise localement, sans se soucier de son sort futur. Comparez le premier exemple, où il y a trois fenêtres, et le troisième, où il y en a déjà cinq, n'est-ce pas mieux ?

Nous terminerons par le placement et les tailles des cadres... et cela fait longtemps que nous sommes bloqués ici... passons à autre chose.

Nous donnons aux cadres un aspect soigné.

Dans notre dernier exemple, la première chose qui attire votre attention est tout un tas de barres de défilement, qui sont là où elles sont nécessaires et là où elles ne sont pas nécessaires.. Débarrassons-nous-en, eh bien, vous pouvez les laisser quelque part.. Cela se fait à l'aide de l'attribut de défilement - tag, il peut avoir l'une des trois significations suivantes :

• Non
• oui - montre toujours,
• auto

cadres

Les marges du cadre, ou autrement la distance entre les limites du cadre et le texte ou l'image, comme dans notre cas, sont définies en pixels à l'aide des attributs marginwidth et marginheight de la balise.

cadres

Parlons un peu du cadre autour de nos cadres.

Si vous avez remarqué, dans le dernier exemple, en passant le curseur sur la bordure du cadre, le curseur, c'est-à-dire, prend une apparence différente (saisir et déplacer) et maintenant cette bordure peut être déplacée dans n'importe quelle direction tout en maintenant la touche gauche bouton de la souris. Parfois, cette « mobilité » des bordures de frame fait le jeu du webmaster, mais le plus souvent elle gêne encore. Afin d'éviter que l'utilisateur ne joue avec les tailles de fenêtre pour le tag, l'attribut noresize a été inventé.

cadres

Mais l'attribut border, qui nous est familier depuis longtemps, fixe la largeur en pixels de ces mêmes frames entre les frames... c'est écrit à l'intérieur de la balise. Comme auparavant, la valeur border="0" éliminera complètement les bordures.

cadres

Cadres et liens.

Le moment est venu de relancer notre site avec des liens, mais le problème est que le lien familier Beans in a pot en italien ouvrira ce document dans le même cadre où il se trouve, dans notre cas directement dans le cadre avec le contenu, et le contenu lui-même au moment de cliquer sur ces liens disparaîtra dans l'oubli.. vous pouvez regarder l'exemple maladroit.. cliquez sur n'importe quel lien qu'il contient.. Pour éviter que cela ne se produise à l'avenir, vous devez indiquer au navigateur de quel cadre ouvrir le document dont nous avons besoin, eh bien, à moins bien sûr que vous n'ayez vraiment pas besoin de l'ouvrir dans le même cadre.

Je me souviens que nous avons déjà fait connaissance, dans le chapitre dédié aux liens, avec les attributs name et target, ils sont également utilisés lorsqu'on travaille avec des frames, le mécanisme est légèrement modifié et c'est presque le même. Tout d'abord, le cadre dans lequel nous souhaitons ouvrir un document doit recevoir un nom individuel.

c'est écrit ainsi :

Vous pouvez trouver n’importe quel nom.. l’essentiel est de ne pas l’oublier..

C'est écrit ainsi :

Haricots en pot, à l'italienne

Bon, je pense qu'il n'est pas nécessaire de vous expliquer qu'avant de faire référence à des documents, vous devez les créer... dans mon cas, les fichiers (recettes) portent les noms text.html, text1.html, text2.html ...

Regardez l'exemple:

Fichier index.html


cadres













Menu Fichier.html


cadres


Menu:

Soupe aux champignons
Haricots en pot, à l'italienne
Salade d'été australienne
... ... ...

Comme auparavant, le document peut être ouvert dans une fenêtre séparée. Je vous rappelle qu'il s'écrit ainsi :

Haricots en pot, à l'italienne

Ou, en attribuant la valeur _top à l'attribut target, ouvrez-le dans la même fenêtre du navigateur, mais en plein écran.. « remettre à zéro » tout ce qui s'y trouve.. c'est écrit comme ceci :

Haricots en pot, à l'italienne

Voilà comment est devenu le site... bien sûr, il y a encore du travail dessus... d'ailleurs, selon mon idée, il aura une structure un peu différente au niveau de la navigation autour du site, il aura tout un tas de pages, un beau menu, mais quant à la structure du cadre, je pense qu'elle restera la même..

cadre flottant

Parfois, il est nécessaire d'insérer un autre document HTML ou même une série de tels documents dans une page contenant une structure non-frame dans une fenêtre séparée. Pour atteindre cet objectif, il existe une balise - ce qu'on appelle le cadre flottant.

Cette balise possède plusieurs attributs :

src - attribut obligatoire indiquant le chemin d'accès à la page à ouvrir
width - largeur du cadre flottant en pixels ou pourcentages
hauteur - hauteur du cadre flottant

défilement - afficher la barre de défilement

• non - ne jamais afficher la barre de défilement,
• oui - montre toujours,
• auto - afficher si cela est nécessaire.

aligner - alignement du cadre flottant

• gauche - gauche
• à droite - à droite
• haut - plus haut
• en bas - en dessous

frameborder - présence d'un cadre autour d'un cadre flottant

• 1 - activer le cadre
• 0 - éteignez le cadre

Dans l'ensemble, cela s'écrit ainsi :

Exemple de document avec cadre flottant :

cadre flottant


cadre flottant
Le soi-disant « cadre flottant » a été introduit dans cette page.
Dans une fenêtre séparée, il ouvre un autre document HTML à afficher.



… … …

Sans cadres

Certains navigateurs ne prennent pas en charge la structure du cadre de document ou ne l'interprètent pas correctement ; de plus, les utilisateurs désactivent souvent délibérément la prise en charge de la structure de cadre de document HTML dans les paramètres de leur navigateur. Et bien que le pourcentage de ces navigateurs et utilisateurs soit faible, ils existent néanmoins.

Imaginez maintenant que vous avez construit votre site Web à l'aide d'une structure de cadre et que certains visiteurs, peut-être sans savoir quel est le problème, essaient d'ouvrir votre site Web et que leur navigateur affiche une erreur ! Que penseront-ils de votre site ? Je pense à quelque chose comme : « Ugh… une sorte de bêtise… je ne reviendrai plus ici !

Afin de faire comprendre à l'utilisateur que son navigateur/les paramètres de son navigateur ne prennent pas en charge les frames, il existe une balise.

La balise affiche le texte qu'elle contient si le navigateur de l'utilisateur ne prend pas en charge les cadres ou s'ils sont désactivés de force dans ses paramètres. Si les frames sont pris en charge par le navigateur de l'utilisateur, alors cette balise est simplement ignorée.

cadres


Désolé, mais votre navigateur ne prend pas en charge les frames.

Le résultat de l'exemple sera perceptible si votre navigateur ne prend vraiment pas en charge les frames (ici, j'y ai pensé pendant longtemps... :) si tel est le cas, alors pourquoi lire ce chapitre ?) ou si vous avez désactivé la prise en charge des frames dans votre navigateur à titre expérimental.

Le tag doit être situé à l'intérieur d'un tag

Avec un cadre flottant, tout est encore plus simple : il suffit d'écrire le texte souhaité entre et ce texte s'affichera à l'écran si le navigateur ne prend pas en charge les cadres.

Désolé, mais votre navigateur ne prend pas en charge les frames.

Avant de commencer à créer une page à l'aide d'une structure de cadres, analysez sa disposition, la taille de chaque fenêtre, la présence ou l'absence de barres de défilement dans celles-ci, etc. Après cela, vous pouvez créer des fichiers HTML de plug-in sans vous soucier particulièrement de leur relative position les uns par rapport aux autres.

Utilisez la balise. N'oubliez pas que si dans votre navigateur le site fonctionne et s'affiche comme vous le souhaitez, alors pour les autres utilisateurs, les choses peuvent être différentes !

Les cadres sont des zones rectangulaires de l'écran, chacune contenant son propre document HTML. Les cadres sont parfaits pour formater les documents suivants :

Table des matières. Si vous placez une table des matières dans une colonne verticale sur une page Web, l'utilisateur peut s'y référer à tout moment sans avoir à cliquer constamment sur le bouton de retour à la page précédente. Étant donné que la table des matières sera toujours à portée de main dans le cadre, l'utilisateur devra simplement sélectionner un autre élément et obtenir immédiatement les informations dont il a besoin.

Éléments d'interface fixes. Vous pouvez figer un graphique à l'écran, tel qu'un logo d'entreprise, pendant que le reste de la page défile dans un autre cadre.

Formulaires et résultats. Vous pouvez créer un formulaire dans un cadre et afficher les résultats de la requête dans un autre.

Les frames standards sont actuellement considérés comme une technologie obsolète et ne sont pas pris en charge en HTML5. N'utilisez pas de cadres ordinaires dans vos projets ! En HTML5, les balises frame , frameset et noframes n'existent tout simplement plus ; à la place, une seule balise iframe (cadre en ligne ou flottant) est fournie.

Étiqueter

Tag - remplace la balise et est utilisé pour diviser l'écran. A une balise de fermeture.

Les attributs

COLL. Divise l'écran verticalement. Accepte les valeurs en pixels, en pourcentages ou simplement *. La valeur * indique que la colonne particulière occupera le reste de l'écran

LIGNES. Divise l'écran horizontalement. Accepte les valeurs en pixels, en pourcentages ou simplement *. La valeur * indique qu'une ligne particulière occupera le reste de l'écran

BORDURE DE CADRE. Détermine la présence de frames, c'est-à-dire limites du cadre. Accepte les valeurs "oui" ou "non".

FRONTIÈRE. Spécifie la largeur du cadre en pixels.

COULEUR DE LA BORDURE. Définit la couleur des cadres. Par défaut (si la palette de couleurs standard de Windows est utilisée), les bordures du cadre sont d'une teinte grise terne. Mais si vous le souhaitez, vous pouvez choisir n'importe quelle autre couleur. Lors de la définition d'une couleur, vous pouvez choisir à la fois son nom et son équivalent numérique dans le système RVB. Par exemple, BLEU ou #0000FF.

Dans une balise distincte, il est logique d'utiliser un seul des attributs – COLS ou ROWS. Cela signifie que la structure du cadre sera composée soit uniquement de colonnes, soit uniquement de lignes. Pour créer des lignes dans des colonnes ou des colonnes dans des lignes, vous aurez besoin de conteneurs imbriqués....

Exemple

Résultat:

Notez également la différence dans l’ordre de numérotation des images.

Étiqueter

La balise placée dans le conteneur ... détermine exactement ce qui doit être affiché dans un cadre particulier. N'a pas de balise de fermeture.

Les attributs

SRC. Définit l'URL associée à un cadre spécifique.

LARGEUR DE MARGE. Spécifie la distance entre le contenu du cadre et ses bordures gauche et droite.

HAUTEUR DE MARGE. Spécifie la distance entre le contenu du cadre et ses bordures supérieure et inférieure.

DÉFILEMENT. Détermine si une barre de défilement est présente dans une fenêtre frame. Peut prendre les valeurs "oui", "non" et "auto" (par défaut).

NORESIZE. Définit les bordures du cadre comme « fixes » et empêche l'utilisateur de redimensionner la fenêtre du cadre. De plus, les tailles de tous les cadres ayant une bordure commune avec celle fixe sont enregistrées.

BORDURE DE CADRE, BORDURE, COULEUR DE BORDURE. Ces attributs sont associés aux cadres et sont similaires à ceux du .

NOM. Spécifie le nom de la fenêtre frame. Le seul attribut qui n'affecte pas l'apparence du cadre. Vous permet de contrôler le processus de chargement du cadre. Si une fenêtre frame a un nom unique, elle est directement accessible à partir d’autres frames. Lorsque vous nommez des fenêtres frame, il y a une limitation à garder à l'esprit : le nom ne doit pas commencer par un caractère de soulignement "_", sinon il sera ignoré. Puisque certains noms de services commencent par ce caractère. Exemple

Utilisation de la balise A pour charger dans le cadre Attributs

HREF. Spécifie l'URL ou le nom du nouveau document que vous souhaitez charger dans une fenêtre frame spécifique.

CIBLE. Spécifie le nom du cadre dans lequel le nouveau document sera chargé. Ce nom doit être attribué au cadre par l'attribut NAME dans le .

L'exemple suivant divise l'écran en deux zones verticales. Le petit côté gauche contient la table des matières et le côté droit chargera tous les autres documents HTML. Le fichier de table des matières contient des hyperliens textuels simples vers les sections pertinentes. Pour que tout fonctionne, vous devez créer des documents HTML dans les fichiers cosm.htm, eat.htm, perf.htm, massage.htm et manic.htm.

Exemple de contenu

• Marchandises
  • Produits de beauté
  • Compléments alimentaires
  • Parfumerie
• Prestations de service
  • Massage
  • Manucure

Bonjour! Étiqueter

La balise vous évitera d'avoir à répéter l'attribut TARGET sur chaque lien hypertexte s'ils pointent tous vers la même fenêtre frame. Pour ce faire, vous devez placer une balise avec l'attribut TARGET dans le conteneur....

L'utilisation de la balise permettra de réduire la taille du fichier de table des matières left.htm de l'exemple précédent.

Exemple de contenu

• Marchandises
  • Produits de beauté
  • Compléments alimentaires
  • Parfumerie
• Prestations de service
  • Massage
  • Manucure

L'attribut TARGET de chaque lien spécifique remplace l'attribut tag du même nom.

Exemple de contenu

• Marchandises
  • Produits de beauté
  • Compléments alimentaires
  • Parfumerie
• Prestations de service
  • Massage
  • Manucure

Voici la marchandise ! Voici les prestations ! Effets spéciaux obtenus à l'aide de l'attribut TARGET

Comme déjà mentionné, les noms de trames ne peuvent pas commencer par un trait de soulignement, car ils commencent par des noms de services qui transmettent des informations spéciales au navigateur. Voici des noms spéciaux, chacun étant utilisé pour obtenir un effet spécifique.

CIBLE=”_blank” . Le document est chargé dans une nouvelle fenêtre de navigateur.

CIBLE=”_self” . Le document est chargé dans la fenêtre actuelle.

CIBLE=”_parent” . Le document est chargé dans le cadre parent. Il s'agit généralement d'un cadre placé dans un conteneur... devant celui actuel. S'il n'y a pas de cadre parent, alors la valeur de "_parent" devient identique à "_self".

CIBLE=”_top” . Le document est chargé dans le cadre le plus haut.

Fondamentalement, ces noms de services sont destinés à « sortir » de la structure de trame actuelle d’une manière ou d’une autre. Expérimentez-les pour voir comment charger des documents dans différentes fenêtres.

Étiqueter

HTML 4.0 a introduit les frames flottants (ou en ligne). À l'aide de la balise, vous pouvez placer un seul cadre dans un document HTML standard. De plus, un conteneur... n'est pas nécessaire ici.

La balise fermante est obligatoire !

Les attributs

ALING. Détermine le type d'alignement. Accepte les valeurs "gauche", "centre", "droite".

HAUTEUR. Spécifie la hauteur du cadre en pixels

LARGEUR. Spécifie la largeur du cadre en pixels.

SRC, MARGINWIDTH, MARGINHEIGHT, DÉFILEMENT, FRAMEBORDER, BORDER, BORDERCOLOR, NOM . Semblable à ceux évoqués précédemment.

vsespace. Définit les marges en haut et en bas à l'extérieur de l'iframe

espace h. Définit les marges sur les côtés en dehors de l'iframe

largeur de marge. Détermine la quantité de remplissage le long des bords gauche et droit à l'intérieur de l'iframe ; doit être égal ou supérieur à 1.

hauteur de marge. Détermine la quantité de remplissage le long des bords supérieur et inférieur à l'intérieur de l'iframe ; doit être égal ou supérieur à 1.

défilement. Spécifie si une barre de défilement sera affichée dans l'iframe ; la valeur peut être « oui », « non » ou « auto ». La valeur par défaut pour les documents ordinaires est auto.

titre. Texte de l'info-bulle. Étiqueter

Détermine ce qui sera affiché dans la fenêtre du navigateur si elle ne prend pas en charge les frames.

Votre navigateur ne prend pas en charge les iframes !

Comment charger un cadre sans fichiers supplémentaires ?

Pour charger un cadre sans utiliser de fichiers externes, vous devez mettre le code HTML du cadre dans une variable, puis spécifier "javascript:parent" comme balise SRC. Nom de variable".

var varFrame = "Code HTML"; ...

Problème de barre d'adresse avec une structure de site frame

Lors de l'utilisation de cadres, un site utilise une page qui indique l'emplacement des cadres.

Voici un exemple d'une telle page :

...

Après avoir chargé cette page, les informations sont chargées dans des cadres. Toutes les transitions des utilisateurs entre les pages du site se produisent dans ces cadres. La barre d'adresse affiche toujours uniquement le chemin d'accès à la page d'accueil, qui ne change pas au fil de votre navigation. Le visiteur ne sait pas où il se trouve pour le moment.

Si un visiteur n'arrive pas immédiatement sur la page principale du site (par exemple, depuis un moteur de recherche), cela n'entraîne pas la reconstruction de la structure générale des frames. C'est la raison pour laquelle le propriétaire du site ne peut pas fournir d'adresse vers la page interne du site.

Il existe plusieurs solutions à ce problème

Auparavant, un exemple de structure de charpente a été considéré. Nous examinerons différentes manières de résoudre ce problème en l'utilisant.

L'idée est la suivante : lors du chargement d'une page contenant une partie informationnelle, nous vérifierons l'environnement de la page et, s'il manque la structure de frame requise, nous la créerons à l'aide d'un script.

Trois cas sont possibles :

le visiteur a visité une page contenant une structure de cadre ;

le visiteur a visité l'une des pages d'information ;

le visiteur arrive sur une page avec un menu de navigation.

Dans le premier cas, aucune action n'est requise une fois le contrôle terminé. Les deuxième et troisième sont presque identiques, nous ne considérerons donc plus loin que le deuxième cas.

Et ainsi, le visiteur se retrouve « là où il ne devrait pas ». Au tout début de la page, nous insérons un script qui créera une structure de cadre.

La solution peut être implémentée aussi bien côté client que côté serveur. Le principal inconvénient de la mise en œuvre côté client est évident : la dépendance aux capacités et aux paramètres du client. Par exemple, l'exécution de scripts sur l'ordinateur de l'utilisateur est interdite. La deuxième option ne fonctionnera pas si le serveur ne prend pas en charge PHP.

Solution Javascript.

Cette approche présente une limite : tous les navigateurs ne prennent pas en charge JavaScript et, dans certains cas, les utilisateurs désactivent eux-mêmes les scripts.

Tout d’abord, nous vérifions l’environnement de la page, puis, si la structure de frame requise n’existe pas, nous la créons.

Créons un fichier cadre.js :

Si (window.name != "main") ( window.name="root"; document.write(""); document.write(""); document.write(""); document.write("" ; )

Nous vérifions d'abord le nom de la fenêtre dans laquelle la page est chargée : if (window.name != "main"). Si le nom de la fenêtre et le nom du cadre ne correspondent pas, vous devez alors créer une structure de cadre. Cela se fait dynamiquement à l'aide de la méthode d'écriture de l'objet document.

Nous connectons un fichier à chaque page du site cadre.js. Désormais, les pages du site auront la structure suivante :

... ...

Avec cette approche pour résoudre ce problème, le besoin d'un fichier contenant la structure du cadre disparaît.

Solution PHP

Avec cette approche, le site deviendra accessible à un plus grand nombre de visiteurs.

Nous vérifierons l'environnement de la page différemment (pas de la même manière que lors de l'utilisation de JavaScript). Nous allons charger le document dans un frame avec le paramètre frames=yes. A l'ouverture de la page, nous vérifions ce paramètre et, si nécessaire, créons dynamiquement une structure de cadre. Vous trouverez ci-dessous le code responsable de cela.

Mettre le code dans un fichier frames.php. Vous devez maintenant le connecter à chaque page du site. Vous trouverez ci-dessous un exemple d'une telle page.

cadres...

Dans ce cas, comme pour l'implémentation côté client, il n'est pas nécessaire de créer séparément un document HTML décrivant la structure du cadre.

.

 

Il pourrait être utile de lire :

• Nettoyage des fichiers de candidature;
• Examen approfondi de Photos pour Mac : tout ce que vous devez savoir sur le remplacement d'iPhoto et d'Aperture;
• Émulateur de changeur de CD - pouvez-vous le fabriquer vous-même ?;
• Comment puis-je changer mon nom de famille dans un contact ?;
• Désactivation du service « Easy Payment » de MTS;
• Créer des sondages dans Telegram Comment aimer dans Telegram;
• Ingénieur caméra principal pour Sony Xperia sur le développement de la photographie mobile, les technologies Sony et l'avenir;
• Comment transférer des sauvegardes de jeux mobiles vers un autre appareil ?;