Installé une interdiction sur l'affichage de la page dans le cadre: Que faire? Comment insérer dans HTML Iframe: Exemple d'utilisation

05.07.2019Titre: Littératie informatique

07.12.2015

pas encore

Bonjour à tous!
Nous continuons une étude diligente bases HTML. Je suis heureux que tu ne jettes pas de cours.

Dans cette leçon, nous analyserons qu'est-ce que Freuma Et comment ils sont créés en HTML.
Alors décidons quels cadres sont en HTML.
Froissement- Ceci est séparé de la fenêtre du navigateur en zones distinctes dans lesquelles des documents HTML individuels peuvent être téléchargés.

Je pense que vous vous êtes rendu compte que grâce aux cadres, vous pouvez afficher plusieurs pages Web dans une fenêtre de navigateur.

Par exemple, pour comprendre comment le cadre fonctionne dans la pratique, je propose de voir un exemple. Faire quelques transitions là-bas:

Alors qu'est-ce que tu en penses? Voulez-vous apprendre cela pour créer? Maintenant nous allons enseigner insérer des cadres dans le document HTML.

La création d'une image sur une page Web est effectuée par une telle mise en page:

Attention: La disposition de la trame est insérée dans le document HTML au lieu de la balise.

:

Froissement

○ tag Cadameset.

Il s'agit du conteneur principal de créer une image, à l'intérieur de laquelle d'autres éléments sont contenus.
L'étiquette de fermeture est obligatoire.

* Attributs de tag de FRAMESET:

Cols - Vertical
Rangées - horizontale

lignes - horizontal

cols. - vertical

Dans les attributs des cols et des lignes, il est indiqué comment partager la fenêtre du navigateur. Ici, par exemple, pour diviser la fenêtre du navigateur en deux parties verticales, vous devez vous enregistrer comme ceci:

La partie gauche de l'écran sera une taille de 30% et le plus à droite est de 70%.

Si vous souhaitez diviser le navigateur pour une autre pièce multiple, ajoutez des dimensions supplémentaires à travers la virgule, ici, par exemple:

En conséquence, le premier colonne verticale Il y aura une largeur de 30%, la seconde - 20%, la troisième - 10%, la quatrième - 40%.

Compris?

Aussi avec une ventilation horizontale:

La première colonne horizontale sera de 30% de largeur, la seconde est de 20%, le troisième est de 10%, le quatrième est de 40%.

○ Étiquette de cadre

L'étiquette de trame indique quel document HTML doit être chargé dans la fenêtre du navigateur.
Ici, par exemple, nous devons télécharger dans une fenêtre de navigateur trois pages différentes "1.html", "2.html", "3.html". L'étiquette de cadre ressemblera à ceci:

Résumons la connaissance des cadres. Donc, la tâche: vous devez diviser la fenêtre du navigateur en deux parties et télécharger deux pages Web à ces pièces - "1.html" de 30%, "2.html" de 70%.
Voici un code prêt:

Le résultat sera comme ceci:

* Attributs d'étiquette de cadre

sRC - adresse de page Web. src \u003d "1.html" ;
marginWidth - Indent à l'intérieur du cadre en largeur. Exemple: marginwidth \u003d "10" ;
marginhight - Indentation à l'intérieur du cadre en hauteur. Exemple: marginhight \u003d "10" ;
défilement - Cadre de défilement via le défilement.
- Oui, le défilement sera présent dans le cadre. Exemple: défilement \u003d "oui" ;
- Non - le défilement ne sera pas présent dans le cadre. Exemple: défilement \u003d "non" ;
- Le défilement automatique sera présent dans le cadre si nécessaire. Exemple: défilement \u003d "auto" ;
noresize - interdit de déplacer les cadres du cadre.
nom - Nom du cadre. Indique quelle fenêtre vous devez ouvrir d'autres cadres. Exemple: nom \u003d "Site" ;

Si la trame n'enregistre pas le nom de l'attribut "Nom", appuyez sur la touche où le lien ouvre un nouveau cadre dans la fenêtre où le lien était:

Mais un exemple, si vous enregistrez l'attribut "nom":

Vrai, c'est mieux?
Pour toute image, vous écrirez l'attribut "Nom" où vous souhaitez que d'autres documents HTML soient ouverts.

Le nom de l'attribut de nom peut être n'importe lequel. Mais à l'avenir, si vous donnez les noms et le reste des tags "Cadre", rappelez-vous que tout le monde devrait être unique:

Page 2 Page 3

"Page 1", "page 2" sera ouverte dans une fenêtre où vous avez indiqué le nom du cadre "Nom \u003d" site Internet ""Et" Page 3 "s'ouvrira dans un autre cadre, où le nom" Nom \u003d " bloggood-ru "»

ENTRAINE TOI

Tâche: Vous devez créer des cadres ici pour une telle mise en page:

Tout d'abord, créez trois cadres horizontaux:

MAINTENANT AJOUTER "TOP.HTML" et "FOOTER.HTML"

Le résultat est jusqu'à présent:

Maintenant entre "top.html" et "piedocher.html" ajoutez "menu.html" et "content.html":

Code prêt:

Froissement

Enregistrez le fichier comme «index.html»

Créer une page "Top.html", "Footefer.html", "Menu.html" et "Content.html":

Code de fichier "top.html"

en-tête de site

site Internet

Code de fichier "Foote-html"

Fichier footère.html Stepkinblog.com © 2015.

Code de fichier "MENU.HTML"

Menu de fichier.html - menu du site

Page d'accueil
A propos de l'auteur

Code de fichier "content.html":

<a href="https://crabo.ru/fr/useful-programs/prosmotret-skrytyi-telefon-glavnoi-stranicy-v-kontakte-prosmotr-zakrytyh.html">Page d'accueil</a>

Page d'accueil

Contenu du site - "Page d'accueil (content.html)"

Code de fichier "AUTOR.HTML":

Ici, j'ai reçu ce résultat:

Nous utilisons les attributs "image" et interdisons manuellement des cadres et supprimons le défilement dans le fichier "index.html".

○ Et si les cadres ne sont pas pris en charge par le navigateur?

Vous pouvez afficher le message à l'utilisateur que son navigateur ne prend pas en charge les cadres. Pour ce faire, insérer la balise

○ Cadre flottant

Si vous devez insérer une fenêtre de cadre directement sur la page dans laquelle il n'y a pas de structure de cadre, car il existe une étiquette "iframe"

* Attributs d'étiquette "iframe"

sRC - chemin vers la page ouverte
largeur - largeur de cadre flottante
hauteur - Hauteur de cadre flottante
défilement - Barre de défilement
- Non - NE JAMAIS Afficher la barre de défilement
- Oui - Montrez toujours
- auto - montre si nécessaire
aligner - Alignement de la trame flottante
- gauche - gauche
- droite - droite
- top - ci-dessus
- bas - ci-dessous
cadreforder - cadre autour du cadre flottant
- 1 - Allumer le cadre
- 0 - éteindre le cadre

Cela ressemblera à la balise iframe avec des attributs:

Si le navigateur ne prend pas en charge les cadres, vous pouvez insérer le texte » Oops! Votre navigateur ne supporte pas les cadres. »Entre les étiquettes .
Il ressemblera à ceci:

Oops! Votre navigateur ne supporte pas les cadres.

Par exemple, ajoutons un cadre flottant au fichier "content.html":

Page d'accueil

Page d'accueil

Le contenu de la page Site - "Page d'accueil (contenu! Votre navigateur ne prend pas en charge les cadres.

Post précédent
Prochain article

Les cadres sont des éléments HTML qui vous permettent de diviser la fenêtre du navigateur Web en plusieurs fenêtres indépendantes, chacune pouvant être téléchargée un document HTML distinct. Chacune de ces fenêtres (cadre) peut avoir ses propres granges de défilement et fonctionner de manière indépendante d'autres fenêtres indépendantes ou inversement pour contrôler leur contenu. Ils peuvent être appliqués à l'organisation constamment située dans une fenêtre de menu, tandis que les informations elles-mêmes sont situées dans une autre fenêtre. Les utilisateurs peuvent accéder au menu à tout moment et ils n'ont pas besoin de retourner à page précédenteSélectionner un autre élément de menu. L'utilisation de cadres vous permettra de "attacher" dans la fenêtre du navigateur d'image ou d'autres éléments fixes de l'interface, tandis que le reste de la page fera défiler dans le cadre.
Cependant, il convient de noter qu'aujourd'hui, les cadres sont considérés comme des outils obsolètes et des sites avec des cadres sont désormais considérés comme non corrocivés, car les webmasters professionnels n'utilisent jamais de cadres dans leurs projets. Cadres associés à un certain nombre de tristes problèmes célèbres. Ils confondent par exemple moteurs de rechercheParce que sur les pages contenant du contenu, il n'y a pas de références à d'autres documents. Si vous voulez recevoir des visiteurs avec moteurs de rechercheOublier les cadres. L'utilisateur que vous aimiez que l'utilisateur ne puisse pas être placé dans la section Bookmark du navigateur, car les cadres masquent l'adresse de la page sur laquelle il se trouve et ne montre toujours que l'adresse du site Web. Pour cette raison, ils créent des problèmes pour les navigateurs lors du suivi de la chronologie et ne sont pas trop adaptés pour différentes tailles d'écrans et appareils mobiles.
Malgré le fait que des projets avec des cadres se trouvent dans internet Tous moins souvent, l'étude de HTML serait incomplète sans envisager le sujet des cadres. Des cadres, ainsi que des inconvénients, certains avantages ne vous permettent pas de supprimer cette technologie en tant que sans valeur.

Création de cadres

La structure du document HTML avec des cadres rappelle externe le format du document HTML habituel. Comme dans le document HTML habituel, le code complet est placé entre les étiquettes de paire. et , et dans le conteneur Il y a des titres. La principale différence d'un document avec des cadres du document HTML habituel - du document avec des cadres au lieu de la balise Étiquette de paire appliquée (De l'anglais. Ensemble de cadre - un ensemble de cadres).
L'exemple suivant montre la structure d'un document HTML avec des cadres:

Exemple: Structure de document HTML avec des cadres

Essayez-le vous-même »

cadre_top.
frame_left.	cadre_right

Document avec des cadres

Dans l'exemple ci-dessus, la page contient trois domaines, dans chacun desquels HTML Documents Cadre_top.html, cadre_left.html et cadre_right.html sont initialement chargés. En plus des documents HTML, le cadre peut contenir des graphiques. Pour ce faire, vous devez spécifier l'adresse de l'image correspondante dans l'attribut. src, par exemple src \u003d "image.gif". Notez que l'élément Utilisé sans étiquette de fermeture.
Conteneur intérieur Seules les balises peuvent être trouvées Ou un autre ensemble de cadres embrassés par des balises et .
Étiqueter Il a les attributs suivants:

lignes - décrit la partition de la page pour les lignes:
cols. - décrit la partition de la page aux colonnes:

Les zones obtenues à la suite d'une telle partitionnement de la page et seront des cadres. L'absence de ces attributs définit une image qui prendra toute la fenêtre du navigateur.

Dans la valeur des attributs lignes et cols. Il est nécessaire de spécifier le nombre de lignes ou de colonnes, mais la valeur de la largeur et de la hauteur des cadres. Toutes les valeurs de la liste sont séparées par des virgules. Les dimensions peuvent être indiquées dans des unités absolues (en pixels) ou en pourcentage:

cols \u003d "20%, 80%" - La fenêtre du navigateur est divisée en deux colonnes à l'aide de l'attribut. cols.La colonne de gauche prend 20% et la fenêtre droite de 80% de navigateur.
rangées \u003d "100, *" La fenêtre du navigateur est divisée en deux fenêtres horizontales à l'aide de l'attribut. lignesLa fenêtre supérieure prend 100 pixels et le fond est l'espace restant spécifié par l'astérisque.

Comme on peut le voir cet exemple, Récipient Avec un attribut lignes D'abord crée deux cadres horizontaux et au lieu de la deuxième image, une autre est définie qui scinde le cadre horizontal inférieur en deux colonnes à l'aide de l'attribut cols.La colonne de gauche occupe 20% et la fenêtre droite de 80% de navigateur.
Si le navigateur ne prend pas en charge les cadres, le texte sera affiché dans la fenêtre située entre les balises. . Tout ce qui est entre les tags , des navigateurs ignorés des cadres de soutien. Ainsi, le développeur doit écrire un code qui duplique le contenu des cadres par d'autres moyens et placer ce code dans le conteneur

Cadres flottants

Élément </b> (Réduction du terme anglais «Frame flottant») vous permet d'intégrer un document HTML distinct ou une autre ressource dans n'importe quel endroit une page Web. Le cadre floteux (intégré) calculable peut être n'importe quelle page NTML, à la fois de votre ressource et d'un autre site Web. Comme vous avez déjà compris, des cadres flottants sont créés à l'aide d'un élément <b><iframe> </b> qui, contrairement à la balise <b><frame> </b> inséré pas entre les étiquettes <b><frameset> </b> et <b></frameset> </b> et entre les tags <b><body> </b> et <b><br> <br> </body> </b> .<br> En éléments <b><iframe> </b> Vous pouvez utiliser les mêmes attributs que pour le cadre <b></frame> </b> , sauf pour l'attribut <b>norésiser</b> - Contrairement aux cadres classiques, pour les cadres embarqués, la possibilité de modifier la taille de l'écran n'est pas fournie:</p> <table class="table table-bordered"><tr><th>Attribut</th><th>La description</th> </tr><tr><td>src</td><td>utilisé pour spécifier la page ADPECA URL affichée dans le cadre</td> </tr><tr><td>hauteur</td><td>définit la hauteur des fenêtres d'un cadre flottant en pixels ou%</td> </tr><tr><td>largeur</td><td>définit la largeur des fenêtres d'un cadre flottant en pixels ou%</td> </tr><tr><td>nom.</td><td>le nom du cadre, selon lequel il sera possible de se référer dans des liens</td> </tr><tr><td>bordure de cadre.</td><td>spécifie la cadrage des cadres, peut prendre des valeurs 1 (il y a un cadrage) ou 0 (pas évident) ( <b>HTML5 n'est pas supporté</b>) </td> </tr><tr><td>marginWidthe.</td><td>retraite à gauche et à droite du bord du cadre ( <b>HTML5 n'est pas supporté</b>) </td> </tr><tr><td>marginheight</td><td>une empreinte d'en haut et du bas du bord du cadre ( <b>HTML5 n'est pas supporté</b>) </td> </tr><tr><td>défilement</td><td>détermine la vue de la barre de défilement dans le cadre et accepte les valeurs de YES (il y a des bandes), non (pas de bandes) et Auto (les bandes apparaissent si nécessaire) ( <b>HTML5 n'est pas supporté</b>) </td> </tr><tr><td>autorapeur.</td><td>permet le mode plein écran pour le cadre</td> </tr><tr><td>hspace.</td><td>Indentement horizontal de l'image au contenu environnant</td> </tr><tr><td>vspace.</td><td>indent vertical du cadre à la teneur environnante</td> </tr><tr><td>aligner.</td><td>détermine l'alignement du cadre</td> </tr></table><p>Dans l'exemple suivant, les tailles de la trame flottante sont définies en pixels, mais vous pouvez les définir en%:</p><p> <iframe src="demo_iframe.htm" width="200" height="200">

À l'aube, le site Web des ressources Web sont des cadres largement utilisés pour afficher des parties individuelles des pages. Mais avec l'arrivée nouvelle version HTML 5 a tout changé. Éléments de marquage<cadre.>, <cadameet.\u003e I.<noframes.\u003e Décidé dépassé. La balise unique a été remplacée -<iframe.\u003e. Comment ajouter au HTML ? Un exemple ci-dessous sera compris même un nouveau venu dans la programmation.</p><h2>Qu'est-ce que les cadres?</h2><p>Cadre - la base de la plupart des premières pages Web. Si vous traduisez littéralement, ce mot signifie «cadre», c'est-à-dire que le cadre est une petite partie de la page dans le navigateur. L'utilisation généralisée des cadres dans le passé peut être expliquée par une trafic Internet à faible coût et à haut coût. En règle générale, le site était divisé en 3-5 parties, dont chacun effectué un certain but:</p><ul><li>"CAP" (cadre supérieur sur la largeur de la page) - affiche le nom de la ressource;</li><li>"verre" gauche / droite - affichage du menu;</li><li>cadre central - Affichage du contenu du site.</li> </ul><p>Fragment de la page sur la pièce ne permettait qu'une partie lors de la mise à jour. Par exemple, l'utilisateur a appuyé sur l'élément de menu et un nouveau contenu a été injecté dans le cadre central.</p><h2>Cadres modernes en HTML 5</h2><p>Pourquoi est nécessaire dans html<<i>iframe.</i>\u003e? Un exemple est l'insertion du contenu de la ressource tiers. Le classique est la situation lorsque le développeur Web souhaite montrer la position de l'objet sur la carte. Comment être? Plan de zone de réblèque à partir de zéro? Non - Il y a une solution plus simple: construit l'élément Google Map, les cartes Yandex ou la page 2Gis. La tâche est résolue dans quatre actions.</p><ol><li>Vous devez aller sur le site de tout service cartographique.</li><li>Trouver l'objet souhaité. Connaissance <a href="https://crabo.ru/fr/configuring-wi-fi/podklyuchenie-k-chuzhoi-kamere-cherez-internet-videonablyudenie-cherez-internet-s.html">l'adresse exacte</a>Vous pouvez entrer dans la zone de recherche.</li><li>En utilisant le "code de sauvegarde" (pour "yandex.cart") ou "prêt" (pour <a href="https://crabo.ru/fr/solving-problems/kak-samomu-prodvinut-sebya-v-yandekse-prodvizhenie-v-yandeks-kartah-i-google-maps-kak.html">google Maps</a>) Obtenez le code pour insérer.</li><li>Il reste à entrer dans les balises de marquage générées par page.</li> </ol><p>De plus, vous pouvez sélectionner la taille de la carte et configurer d'autres options d'affichage.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/47242/1650473.jpg' width="100%" loading=lazy loading=lazy></p><p>Comment pouvez-vous utiliser sinon dans html<<i>iframe\u003e</i>? Exemple - Insertion de documents vidéo de la ressource YouTube. La technologie multimédia attire les internautes, donc le contenu vidéo est si populaire. Avec l'installation du rouleau, le développeur va faire face rapidement.</p><ol><li>Vous devez télécharger sur youtube <a href="https://crabo.ru/fr/configuring-windows/kak-sdelat-sobstvennyi-vpn-video-nastroika-vpn-sredstvami-sistemy-chto.html">propre vidéo</a> Ou trouver un fichier tiers à diffuser.</li><li>Obtenez une balise en sélectionnant le bouton "code html"</li><li>Action finale - Insérer dans <iframe>. Un exemple du contenu reçu par la balise sera discuté ci-dessous.</li> </ol><p>Dans les deux exemples, une formation automatique de code a été utilisée, mais les développeurs professionnels devraient pouvoir le composer. Premièrement, cela leur permettra de comprendre la mise en page de la page et, si nécessaire, de le modifier. Deuxièmement, pas toujours le marquage des éléments du site (même s'ils appartiennent à la ressource externe), formés sans la participation d'un maître Web. Ici et la haute qualification du développeur se manifeste.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/47242/1650474.jpg' width="100%" loading=lazy loading=lazy></p><h2>Syntaxe</h2><p>Donc, avant de procéder à la disposition de la page, il est nécessaire de considérer la balise iframe (HTML): ce que c'est et comment l'utiliser correctement.</p><p>Tout d'abord, il convient de noter que la balise est paire. Entre les éléments d'ouverture et de fermeture indiquent le contenu qui sera affiché dans les navigateurs qui ne supportent pas <a href="https://crabo.ru/fr/computer-literacy/o-setyah-hraneniya-dannyh-strukturnye-elementy-san-protokol-fibre.html">cet élément</a> Marquage. Attributs principaux Tag:</p><ul><li>largeur (largeur);</li><li>hauteur (hauteur);</li><li>src (adresse de la ressource téléchargeable);</li><li>alignement (méthode d'alignement);</li><li>bordure de cadre;</li><li>autorapeur.</li> </ul><p>Ainsi, le code reçu pour <iframe>. L'exemple HTML est complètement démontré ci-dessous:</p><p><i><iframe width="560" height="315" src= "https://someserver.com/" frameborder="0" allowfullscreen>
Dans le balisage ci-dessus, il suffit de remplacer l'adresse du site à tout autre et, si nécessaire, ajustez la taille du cadre.
01/31/17 3.5K
De nombreux sites modernes sont un menu de navigation "coller", qui sont affichés dans la barre latérale ou en haut lorsque vous faites défiler la page de haut en bas. Mais les propriétés CSS qui vous permettent de créer un menu "coller", n'est pas toujours prise en charge par des navigateurs. Auparavant, les cadres en HTML ont été utilisés pour mettre en œuvre une telle fonctionnalité.

La différence entre les cadres et les iframes

Lorsque vous utilisez FRAMESET, vous partagez la partie visible de la fenêtre du navigateur pour plusieurs cadres. Chaque image a son propre contenu qui n'affecte pas le contenu des éléments suivants. Les cadres et les iframes effectuent une fonction similaire - incorporer une ressource dans une page Web, mais elles sont fondamentalement différentes les unes des autres:

Les cadres sont des éléments définissant la mise en page;

Iframes - éléments ajoutant du contenu.

Histoire et cadres futurs

W3C a reconnu les cadres obsolètes en HTML5. Cette solution Il a été soutenu par le fait que les cadres HTML affectent négativement la convivialité et l'accessibilité. Trouvons-la, si ces réclamations sont justifiées.

Problèmes avec des cadres

Problèmes de convivialité: Avec une popularité croissante des appareils mobiles avec de petits écrans, des sites offrent aux utilisateurs de nombreuses vues qui changent en fonction de la taille de la fenêtre de visualisation. Bien que les cadres puissent être manipulés pour assurer un certain degré d'adaptabilité, mais ils ne sont pas très bons pour créer des sites d'adaptation;

Disponibilité: conférenciers à écran Et d'autres technologies auxiliaires sont assez mal lues et interagissent avec des sites utilisés par des cadres.

Actuellement, la tendance mondiale à diviser le contenu de la page Web de sa présentation est traçée dans le développement Web.

Le contenu doit être ajouté et déterminé par balise, par exemple, via HTML;

La présentation est déterminée par des langues telles que CSS et JavaScript.

L'utilisation de cadres implique initialement la création d'un spécifique vue externe et des structures, tandis que les tâches de la présentation doivent être traitées avec utiliser CSS..

Future Freimov

Bien que aujourd'hui tous les navigateurs modernes soutiennent des cadres, W3C non équivoque déclaréces cadres " ne devrait pas être utilisé par les développeurs Web". Si vous avez un site Web utilisant des cadres, vous devez penser à la transition vers d'autres technologies. À un moment donné, les navigateurs arrêtent de supporter des cadres et, lorsqu'il se produit, les sites qui les utilisent deviendront inappropriés pour une utilisation.

Comment faire des cadres en HTML

Dans le développement de nouveaux cadres, les cadres ne doivent pas être utilisés, mais pour les webmasters qui sont engagés dans le soutien des anciennes ressources, la capacité de les appliquer peut être utile.

Concept principal de Fraims

Le concept principal des cadres est assez simple:

Utilisez l'élément de cadreset dans un endroit spécifique de l'élément. corps dans le document HTML;

Utilisez l'élément de cadre pour créer des cadres pour le contenu de la page Web;

Utilisez l'attribut SRC pour identifier la ressource qui doit être chargée à l'intérieur du cadre;

Créer pour chaque cadre HTML fichier séparé. avec contenu.

Considérez plusieurs exemples de la façon dont cela fonctionne. Vous devez d'abord créer plusieurs documents HTML avec lesquels nous allons travailler. Créons quatre documents HTML différents. Voici ce qui va contenir le premier:

Cadre 1.

Contenu du cadre 1

Le premier document que nous enregistrons en tant que cadre_1.html. Les trois documents restants auront un contenu similaire et seront appelés respectivement.

Création de colonnes verticales

Pour créer un ensemble de quatre colonnes verticalesVous devez utiliser l'élément de cadreset avec l'attribut COLS. L'attribut COLS est utilisé pour déterminer le nombre et la taille des colonnes qui contiendront. Dans notre cas, nous avons quatre fichiers à afficher. Par conséquent, nous avons besoin de quatre cadres.

Pour les créer, nous devons définir quatre valeurs dans l'attribut COLS, séparées par la virgule. Pour la simplicité, nous attribuons la valeur à chacun des cadres *, c'est une taille pour eux, dans laquelle ils rempliront automatiquement tout l'espace libre. Voici comment notre balisage HTML ressemblera à:

Mais comment ce marquage sera affiché:

Créer une chaîne horizontale

Les lignes de cadre HTML peuvent être créées à l'aide de l'attribut des lignes et non de l'attribut COLS, comme dans l'exemple précédent:

En faisant ce changement, nous l'avons fait pour que les cadres soient maintenant chargés en quatre rangées, les uns des autres:

Combiner des colonnes et des lignes

Les colonnes de cadre et les lignes peuvent être affichées simultanément sur la même page. Vous pouvez mettre un cadre à l'intérieur de l'autre. Pour ce faire, nous créons d'abord des cadreset, puis investissons votre filet de fille à l'intérieur de l'élément parent. Voici un exemple de la façon dont vous pouvez investir deux lignes dans un ensemble de trois colonnes:

frameet Cols \u003d "*, *, *"\u003e

Cadre en HTML Exemple:

Cadreset imbriqué est situé à l'intérieur de l'élément parent, la première image. L'élément imbriqué peut être placé n'importe où. Par exemple, si nous voulons que l'élément intégré au centre, réorganisez simplement les éléments comme suit:

Ici, comme les cadres seront affichés maintenant:

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

Ce code crée un ensemble de deux colonnes identiques. Ensuite, nous avons divisé la deuxième colonne pour deux lignes. Et enfin, nous avons divisé la deuxième chaîne en deux colonnes. Voici comment ça va ressembler:

Une autre façon de créer une combinaison de chaînes et de colonnes est de déterminer la grille de colonne et les lignes dans une image. Par exemple, si vous souhaitez créer une grille de quatre images de la même taille, vous pouvez utiliser le code suivant:

La rangée et les colonnes résultantes ressembleront à ceci:

Comment demander des styles pour les cadres

Lorsqu'il s'agit de déterminer les styles de page Web utilisant des cadres dans HTML, il existe deux façons d'attribuer des styles:

Déterminer des styles à l'intérieur de chaque image;

Définition de style pour cadreset.

La représentation de chaque image doit être déterminée dans le document source. La vue de Cadreset doit être déterminée dans le document parent contenant des cadreset. En d'autres termes, les styles de cadre_1.html doivent être définis par les règles CSS contenues dans le fichier image_1.html ou dans la table de style associée au fichier image_1.html.

Définition des styles de cadre dans le document source

Comme avec n'importe quelle page Web, les styles du contenu de chaque image peuvent être définis à l'aide de CSS. Pour définir les styles du contenu de chaque image, ils doivent être ajoutés au document principal ou à travers le lien vers fichier externe. Styles, ou par l'ajout de styles internes ou intégrés. Prendre en compte le fait que nous avons quatre documents sources, styles CSS. Doit être appliqué à chaque document séparément.

Appliquer des styles CSS sur une page Web contenant des cadreset, nous ne pourrons pas appliquer des styles à chaque image séparément. Si nous voulons définir des styles pour frame_1.html, nous devons ajouter ces styles directement dans le document lui-même. Voici un exemple de la façon dont cela peut être fait:

Cadre 1.

Contenu du cadre 1

Si nous revenons à notre précédent exemple de création de cadres dans HTML avec quatre colonnes de même taille et téléchargez FrameSet après avoir apporté ces modifications au fichier image_1.html, nous obtiendrons les éléments suivants:

Définition de style et mode de mise en forme

Comment influencer le cadre d'affichage en plus de la définition des styles des documents eux-mêmes:

La taille de chaque image peut être définie ou enregistrée;

Une indentation entre les cadres peut être changée;

Le format de cadre peut être réglé autour de chaque image.

Ces changements ne sont pas faits à travers le CSS. Ils sont effectués en ajoutant des attributs et leurs valeurs pour l'élément de cadre.

Détermination des cadres des cadres

Les tailles de cadre peuvent être définies en pixels, pourcentages ou cadres peuvent occuper automatiquement tout espace libre. Pour spécifier la taille du cadre, insérez la valeur souhaitée sur l'attribut COLS ou lignes. Par défaut, si l'attribut NORESIZE n'est pas spécifié pour le cadre, les visiteurs du site peuvent faire glisser la limite entre deux images à l'aide de la souris, en changeant leur taille. S'il est indésirable, l'attribut Noresize peut être appliqué à l'élément de cadre et le changement de taille sera impossible. Combinez les deux concepts dans la pratique.

Nous allons créer la mise en page suivante:

Une rangée sur toute la largeur en haut de la page;

Trois colonnes sous la rangée supérieure;

Les tailles de la première et de la troisième colonne sont définies pour créer les barres latérales gauche et droite;

Les dimensions de la colonne du milieu sont définies de manière à ce qu'elle représente une grande surface de contenu.

Nous pouvons créer un cadre HTML à l'aide du code suivant:

Ce code crée un cadre de cadres à partir de deux rangées:

La première rangée de 150 pixels hauteur. L'attribut noréseize spécifié pour la première image signifie que ses dimensions ne peuvent pas être modifiées;

Les styles que nous avons utilisés plus tôt vers Frame_1.HTML sont enregistrés, mais ils n'affectent que le contenu de ce cadre;

La deuxième ligne se développe pour remplir l'espace restant;

Le deuxième cadreset est investi dans la deuxième rangée et contient trois colonnes;

Les première et troisième colonnes remplissent 20% espace abordable Windows de navigateur;

La deuxième colonne est en expansion de telle manière de remplir l'espace restant entre la première et la troisième colonne;

Étant donné que nous n'avions pas indiqué que les colonnes Attribut Noresize, elles seront initialement affichées, en fonction de la taille spécifiée dans le code.

Mais le visiteur du site sera capable de changer manuellement leur taille.

Ce code crée une page Web affichée comme suit:

Formatage du cadre et des trindages autour du cadre

Maintenant que nous avons défini la mise en page si nous avons besoin, nous pouvons augmenter ou diminuer les trindux entre les cadres, ainsi que pour éliminer le cadre entre eux. En utilisant la mise en page que nous avons créée dans le paragraphe précédent, retirons le cadre entre les trois colonnes, mais laissez le cadre entre les rangées supérieure et inférieure. Ajoutons également un tiret autour du contenu du premier cadre HTML:

L'attribut marginheight appliqué à la première image ajoute de l'indent à 15 pixels au-dessus et au-dessous du contenu chargé dans la première image. Valeur de cadre égale à 0, supprime le cadre pour les trois cadres inférieurs. C'est comme ça que ça va ressembler:

Spécifiez les cadres à l'aide des liens

L'un des cas de cadres les plus courants est la création d'un menu de navigation dans le cadre "adhésif", qui est toujours visible, quelle que soit la position du contenu des autres cadres. Avec une utilisation correcte, les liens du menu de navigation mènent au téléchargement de nouvelles ressources dans le cadre, tandis que les cadres restants restent statiques.

Vous pouvez formater l'ancrage pour spécifier des cadres spécifiques via l'attribution de l'attribut de nom à l'élément de trame souhaité et à l'aide de l'attribut cible à l'intérieur de l'élément A pour charger le HREF dans le cadre spécifié. Si tout cela vous confond avec un sens, comprenons le processus de création de cadres en HTML étape par étape.

Tout d'abord, nous devons attribuer un nom pour un cadre dans lequel des liens doivent être ouverts. Dans le balisage, que nous avons créé un peu plus tôt, vous pouvez utiliser la colonne de gauche pour le menu de navigation et la colonne centrale comme cadre cible. Pour ce faire, attribuez l'attribut Nom à l'élément cible:

Maintenant, lorsque nous sommes définis pour le nom de la colonne centrale \u003d "MID_COL", vous pouvez créer dans le document original de notre colonne de gauche Frame_2.html plusieurs liens:

Cadre 2.

Contenu du cadre 2

Chargez le cadre_1.html.

Chargez le cadre_2.html.

Chargez le cadre_3.html.

Chargez le cadre_4.html.

Maintenant que nous téléchargerons la page Web, quatre liaisons de navigation seront placées dans la barre latérale gauche. Lorsque vous cliquez sur le lien, le contenu du fichier est chargé dans la trame du milieu de la colonne avec le nom \u003d "Attribut Mid_Col". C'est ce que nous verrons lors du téléchargement de la page:

Si vous cliquez sur le lien Charge-cadre_1.html, le contenu de ce fichier démarrera dans la colonne centrale et nous obtiendrons les éléments suivants:

Si vous cliquez sur le lien Charger image_2.html, nous verrons que les liens de navigation seront affichés au centre du panneau latéral gauche et les liens de navigation seront affichés dans la colonne centrale:

Lorsque vous cliquez sur Load Frame_3.html et chargez le cadre_4.html, le contenu de ces fichiers sera téléchargé dans la colonne centrale. Si nous avons oublié d'ajouter à la cible \u003d »Mid_Col Attribut Link pour l'un des liens, alors lorsque vous cliquez dessus, le fichier sera chargé dans le cadre contenant un lien. Si nous voulons redémarrer la page entière, par exemple, lors de la mise sous tension du site externe, nous devons ajouter la cible \u003d "_ vide" ou cible \u003d "_ top".
Fournir une version de sauvegarde de Noframes

Dans le passé, l'élément NoFrames a été utilisé pour créer une option de sauvegarde pour les navigateurs qui ne prennent pas en charge les cadres HTML. Actuellement, tous les navigateurs modernes appuient les cadres et NOFWAMES n'est pratiquement pas pris en charge. En conséquence, nous n'avons plus besoin de créer une version de sauvegarde de Nframes lorsque vous travaillez avec des cadres.

Comment faire des cadres adaptatifs

Lorsque vous utilisez des cadres, il est assez difficile de fournir une facilité d'utilisation pour les visiteurs situés sur le site de smartphones et de petites tablettes. Étant donné que les cadres étaient complètement retirés de HTML5 et sont considérés comme obsolètes, il est important que les propriétaires de sites créés à l'aide de cadres ont planifié la restructuration de leurs ressources et la transition vers d'autres technologies.

Utilisation de lignes, pas de colonnes

Si possible, organisez des cadres dans les rangs et non des colonnes. Sur un petit écran, il est beaucoup plus facile de se déplacer sur le contenu par vertical que horizontalement. Cadres HTML, qui sont situés dans une rangée, beaucoup plus facile à parcourir sur un petit écran. Si nous réduisons la largeur des mises en page contenant des lignes et des colonnes, imiter l'écran Iphone Apple. 6, nous verrons que les chaînes sont beaucoup plus pratiques à voir que les colonnes:

Utilisez des intérêts pour les largeurs de colonne

Lorsque les tailles de colonnes sont spécifiées en pourcentage et non en pixels, elles changeront automatiquement en fonction de la taille de l'écran de périphérique. Bien que cela puisse créer certains problèmes liés au fait que certains cadres peuvent devenir trop petits, mais en général, l'expérience d'interaction et de visualisation sera meilleure si la largeur totale de colonne est définie comme un pourcentage et non en pixels.

Comment aller des cadres à d'autres technologies

L'élément de cadreset et l'élément de cadre ont été supprimés de la dernière spécification HTML5. Les propriétaires de sites créés à l'aide de cadres doivent faire la restructuration de leurs ressources pour les exclure de la mise en page. À un moment donné, les navigateurs refuseront de soutenir des cadres. Ainsi, refuser les cadres - ce n'est pas seulement souhaitable, cela doit être fait.

Évaluation du contenu contenue dans des cadres

La première étape vers la réorganisation du site qui utilise le cadre floteux HTML devrait être de déterminer les raisons pour lesquelles les cadres sont utilisés:

Y avait-il des cadres 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;

Y avait-il des cadres utilisés pour créer un conteneur avec des tailles de publicité? Il existe de nombreuses façons de recréer cet effet à l'aide de CSS ou de widgets conçus pour travailler avec CMS;

Y avait-il des cadres utilisés pour créer un menu de navigation "collant"? Encore une fois, avec CSS, le même effet peut être recréé;

Y avait-il des cadres utilisés pour charger le contenu d'un site externe? Si oui, l'élément iframe, qui fait partie de HTML5, peut être utilisé pour incorporer du contenu à partir d'un site externe.

Dans presque tous les cas, vous pouvez utiliser CSS pour recréer la mise en page développée à l'aide de cadres et que IFrame peut être utilisé pour intégrer des ressources externes.

Stratégie pour votre nouveau site

Si votre site est créé avec l'utilisation des cadres, il existe une forte probabilité qu'il soit déjà très obsolète. Au lieu de simplement collecter tout le contenu du site dans un fichier HTML et définir des styles à l'aide de CSS, il peut être temps de réfléchir à la mise à niveau et à la passation du système de gestion de contenu.

La transition vers la CMS à l'étape initiale nécessitera plus de temps, mais à long terme, les avantages du lancement du site moderne traduiront une complexité à court terme. Pour vous aider à décider du système de gestion de contenu, nous vous recommandons de faire attention aux trois les plus populaires:

Wordpress;

Joomla! ;

Drupal.

Ressources supplémentaires

Si vous voulez apprendre davantage de cadres HTML, meilleure source pour obtenir pour plus d'informations est un À L'ÉCHELLE MONDIALE. Consortium Web ( W3c.). Voici quelques-unes des pages d'informations de page:

Documentation HTML4 sur les cadres;

Fonctions HTML5 obsolètes

Éléments connexes

Nom de l'élément Les attributs La description
noframes. Élément