Un cadre est une zone d'un site (fenêtre) dans laquelle une autre page Web est visible. Les webmasters en profitent pour mettre en valeur la page d'accueil des sites de leurs amis ou partenaires. La même technique est utilisée pour afficher le formulaire de recherche dans les cases avec le résultat à côté, etc.
Mais la plupart des cadres sont utilisés dans la création de grands portails Web, où un nombre considérable d'éléments de menu et de sous-menus sont nécessaires. Ils disent généralement à propos de ces personnes: "site Web sur cadres". Une bonne connaissance du HTML est nécessaire pour créer une telle ressource.
Créer des cadres dans le constructeur de site Web
Certains créateurs de sites Web proposent la génération automatique de ce code. Habituellement, le bouton d'ajout de cadre se trouve dans le menu principal du programme. Vous devez d'abord placer le curseur au bon endroit sur la page, puis cliquer sur le bouton, une fenêtre s'ouvrira (comme indiqué sur la capture d'écran). Dans celui-ci, vous pouvez définir l'adresse de la page qui s'ouvrira dans le cadre et ajuster les dimensions: largeur et hauteur.
Mais la plupart des cadres sont utilisés dans la création de grands portails Web, où un nombre considérable d'éléments de menu et de sous-menus sont nécessaires. Ils disent généralement à propos de ces personnes: "site Web sur cadres". Créer une telle ressource nécessite de bonnes connaissancesLangage HTML.
Avec l'aide de ce "service", il est possible de créer plusieurs cadres sur la page, mais vous n'obtiendrez pas d'éléments interconnectés de cette manière.
Frames dans CMS
Dans de nombreux programmes de création de sites Web, il est possible d'installer le module correspondant. Par exemple, pour Joomla, un cadre est un module "Wrapper".
Il peut être trouvé et créé dans le panneau de configuration du CMS Joomla: "Extensions" - "Gestionnaire de modules" - "Créer" (un bouton rond orange avec un signe plus à l'intérieur). Dans la fenêtre pop-up, dans la liste, vous verrez le module "Wrapper".
Si ce n'est pas ici, c'est qu'il n'est pas inclus. Pour l'utiliser, vous devez d'abord l'activer ici: onglet "Extensions", puis "Gestionnaire d'extensions", puis l'onglet "Gestion". Et nous recherchons dans la liste qui s'ouvre, pour une recherche rapide dans le champ "Filtre", entrez le mot: Wrapper. En face de ce module, il devrait y avoir une icône verte avec une coche à l'intérieur. Un cercle rouge avec un point à l'intérieur signifiera que ce plugin est désactivé.
Après cette procédure, vous pouvez retourner dans le "Module Manager", créer un cadre et définir ses paramètres.
Comme vous pouvez le voir sur la photo, le module permet de paramétrer: le titre au dessus du cadre, la position du module, sélectionner les pages du site sur lesquelles il sera affiché. Et ajustez également la largeur, la hauteur; ajouter un cadre et en faitlien vers une page Web. Si dans un cadre vous souhaitez afficher la page principale d'un site en pleine largeur, alors 100%, défini par défaut, ne suffira pas. Vous pouvez immédiatement mettre 400% en toute sécurité. Une hauteur de 200 est généralement suffisante pour afficher le menu du haut de la page. Tous les autres contenus seront visibles si l'utilisateur (visiteur du site Web) utilise la barre de défilement.
Voici un exemple de ce qu'est un cadre dans Joomla.
Le module Jumla pour créer un cadre est très pratique et facile à utiliser. Cependant, ses capacités sont limitées, tout comme les capacités du constructeur.
Histoire et réalités
Dans la pratique consistant à créer des sites à partir de cadres, cette balise (son application) est depuis longtemps passée au second plan. Ils ont pu être remplacés par des modules, des paramètres dans des programmes constructeurs qui génèrent du code pour une page Web sans la participation d'un constructeur de site. Cependant, dans certains cas, cela ne suffit pas. Par exemple, lorsqu'un cadre est une structure complexe holistique de zones affichées dans le navigateur. C'est ainsi que les propriétaires de sites à structure complexe le voient. Sa création n'est utilisée que dans des cas extrêmes, car les sites de cadres sont créés exclusivement à l'aide de balises spécialisées.
Sites à structure complexe
Pour eux, créer plusieurs cadres interconnectés est la meilleure solution pour organiser le contenu des pages ressources. Ce sont, en règle générale, de grands portails, qui se renforcent chaque année.
Comment arriver au même résultat ? Comment la structure du cadre est-elle créée ?
Commentinsérer un cadre dans le code de la page
Les cadres en HTML sont ajoutés à l'aide de balises:
- frame (pour une fenêtre séparée);
- frameset (l'utiliser pour créer une structure entière);
- iframe (cadre "flottant"));
- noframes (si le cadre n'est pas affiché dans le navigateur de l'utilisateur).
La première balise spécifiée tient toujours dans une paire de et. Et il remplace et. Et à l'aide des attributs appropriés, vous pouvez ajuster les caractéristiques de chaque élément: le nom (name=), la taille (cols=et rows=), la présence d'une bordure (border), l'apparence de l'ascenseur et, bien sûr, le lien vers la page web à afficher.
Variantes de conception
La page entière du site peut être divisée en zones. Par exemple, comme ceci:
| Gauche | Cadre supérieur |
| Droit |
Une telle structure (appelée imbriquée) peut être obtenue en écrivant l'attribut cols à l'intérieur de la balise, ce qui signifie l'emplacement du cadre horizontalement, et les lignes - verticalement. Ensuite, le signe=est mis et les dimensions sont prescrites. Par exemple, 60%, 40% - pourcentage (une fenêtre occupera 60% de l'espace du navigateur, l'autre, respectivement, 40%). Ou 100, 200 - format d'image en pixels. La taille de l'un des cadres ne peut pas être définie du tout (elle sera définie par défaut). Pour ce faire, après ou avant la virgule, vous devez spécifier le symbole.
Imbricationchaque nouvelle zone est désignée par un nouveau jeu de cadres.
Exemple de code:
Notez que dans notre exemple, pour les deuxième et troisième images, les tailles ne sont spécifiées qu'une seule fois.
De nombreuses idées permettent de compléter les cadres. Des exemples de leur emplacement dans la fenêtre du navigateur peuvent être donnés à l'infini (en modifiant le code en conséquence). Cependant, ces informations n'ont pas trouvé d'application pratique depuis longtemps. Les cadres, s'ils sont utilisés aujourd'hui lors de la création de sites, ne le sont que sous la forme de modules dans les CMS gratuits ou sous la forme d'une iframe.
Cadre flottant
C'est étrange pourquoi il a un tel nom, le mot "intégré" est plus approprié ici. Ce cadre est créé pour afficher le contenu d'un fichier. Vous téléchargez n'importe quel document ou fichier dans la base de données, écrivez le chemin d'accès à celui-ci à l'aide de balises iframe - et les visiteurs verront le texte du fichier (vidéo ou image). Malheureusement, les navigateurs ne restituent pas toujours le contenu. Pour ce faire, les créateurs de sites Web saisissent la phrase entre les balises d'ouverture et de fermeture: "Votre navigateur n'affiche pas de contenu."
Par exemple, Seopult.ru est un service bien connu pour les maîtres de la promotion. Seulement pas son site principal, mais un miroir I.seopult.pro, créé pour les clients du portail. Le code iframe s'écrit ici comme suit:
Instructions
. Où est la balise
-
a été créé pour définir un élément de liste. Pris en charge par tous les navigateurs.
Sur la page miroir elle-même, vous pouvez voir le mot "Instruction" sous la forme d'un bouton. Cliquer dessus au centre de la fenêtre du navigateur ouvre la présentation.
Tous grosles sites de visionnage de films et de séries sont créés à l'aide d'iframes (par exemple, "Imhonet"), ainsi que de réseaux sociaux. Même la page principale de "Yandex" contient cette balise, et plus d'une paire.
Comment écrire une iframe
Vous pouvez télécharger un document sous la forme d'une fenêtre avec une barre de défilement à n'importe quel endroit du site. Habituellement, les balises sont placées à l'intérieur du corps. Au-delà de la norme
et, comme indiqué dans l'exemple ci-dessus, la balise list peut également être utilisée -
-
Les attributs sont ajoutés à l'iframe:
- largeur (largeur) et hauteur (hauteur=);
- aligner l'alignement des bords;
- indentations qui peuvent ou non être spécifiées: la valeur par défaut est 6 - c'est largement suffisant;
- en utilisant allowtransparency, vous pouvez définir la transparence de la zone de cadre afin que l'arrière-plan de la page soit visible;
- plus le familier scr, name, scrolling, border.
Naviguer avec une iframe
La compétence de cadrage la plus intéressante est d'écrire du code qui permet d'ouvrir du contenu dans une fenêtre par un lien, ce qu'ont fait les créateurs du miroir Seopult, uniquement avec plusieurs liens à la fois (disponibles simultanément pour l'utilisateur sur la même page).
Pour cela, une iframe est prise, le nom y est également écrit via name=. Par exemple, en-tête. De plus, avant cela dans les balises et les liens sont écrits via un HREF=avec l'indication obligatoire de l'attribut après eux Avant d'utiliser la balise de fermeture a, une inscription est indiquée qui servira de bouton de lien. Balises "a" ouverture et fermeturesont inclus dans la balise p.
Vous pouvez écrire plusieurs lignes de ce type dans le code afin d'obtenir éventuellement plusieurs boutons de lien sur une même ligne sur le site, en cliquant sur les différents contenus qui seront affichés dans la fenêtre ci-dessous.
Le code ressemblera à ceci:
Publier une annonce
Voir les annonces
Image À quoi cela ressemblera sur le site:
Comment insérer une iframe dans un site Joomla
En standard, le panneau de contrôle Joomla dispose d'un module "code HTML" activé (prêt à l'emploi). Avec lui, vous pouvez insérer n'importe quel code n'importe où sur le site. Cependant, il ignore obstinément le code avec la balise iFrem. Par conséquent, nous utiliserons un module Jumi spécial.
Tout d'abord, vous devez le télécharger depuis Internet et l'installer via le panneau d'administration de Joomla: "Extensions" - "Extension Manager" - "Select File". Spécifiez le chemin d'accès à l'archive téléchargée et cliquez sur "Télécharger".
Une fois l'installation réussie, accédez au "Gestionnaire de modules" et créez-en un nouveau. Sélectionnez le type de Jumi. Dans la fenêtre qui s'ouvre, dans le champ "Code personnalisé", entrez l'iFrem préparé, comme indiqué dans le paragraphe précédent de l'article. Donnez un titre au module, spécifiez la position de placement et les pages du site. Cliquez sur Enregistrer et vérifiez-le.
Navigateurs et cadres
Tous les navigateurs populaires affichent bien le contenu des fenêtres frame: Chrome, Safari, Firefox, Android, iOS. Internet Explorer et Opera ont un taux particulièrement élevé à cet égard. Et pourtant il n'y a aucune garantieque le visiteur de votre site verra le contenu de toutes les fenêtres. Dans ce cas, vous devez laisser un message en utilisant la balise noframe (ouverture et fermeture). Vous pouvez y saisir: "Votre navigateur n'est pas à jour. Mettez à jour la version pour afficher le contenu du site." Si le navigateur de l'utilisateur affiche correctement les cadres, il ne verra pas ce message.
Ainsi, un cadre est une zone ou une fenêtre d'un site qui a sa propre URL. Utilisé pour afficher plusieurs pages Web ou documents indépendants dans un champ de navigateur à la fois, ayant également leur propre URL. Malgré le fait que les frames permettent de bien organiser un site complexe, ils ne sont plus utilisés depuis longtemps, à l'exception de l'iframe. L'utilisation de cette balise est toujours d'actualité pour charger des présentations, un lecteur vidéo, des documents texte dans une fenêtre spécifique. Il est activement utilisé par de grandes ressources Web bien connues.
-
