649 Shares 9442 views

Un cadre est quoi? Structure et création de cadres

Un cadre est une zone sur un site (fenêtre) dans laquelle une autre page Web est visible. Les webmasters utilisent cette occasion pour présenter la page principale du site de leurs amis ou partenaires. La même technique est utilisée pour afficher le formulaire de recherche dans les fenêtres et son résultat, et ainsi de suite.

Mais, fondamentalement, les images sont utilisées pour créer de grands portails Web, où beaucoup d'éléments de menus et de sous-menus sont requis. À propos de ces disent habituellement: "site sur les cadres". Créer une telle ressource nécessite une bonne connaissance de la langue HTML.

Création de cadres dans le générateur de site

Certains concepteurs de sites fournissent la génération automatique de ce code. Habituellement, le bouton pour ajouter une image se trouve dans le menu principal du programme. D'abord, vous devez placer le curseur au bon endroit sur la page, puis cliquez sur le bouton, la fenêtre s'ouvrira (comme indiqué dans la capture d'écran). Dans celui-ci, vous pouvez définir l'adresse de la page qui s'ouvre dans le cadre et ajuster les dimensions: largeur et hauteur.

Mais, fondamentalement, les images sont utilisées pour créer de grands portails Web, où beaucoup d'éléments de menus et de sous-menus sont requis. À propos de ces disent habituellement: "site sur les cadres". Créer une telle ressource nécessite une bonne connaissance de la langue HTML.

Avec l'aide de ce «service», il est possible de créer plusieurs images sur la page, ce sont simplement les éléments interconnectés afin que vous ne receviez pas.

Cadres dans CMS

Dans de nombreux programmes de création de sites, il est possible d'installer le module correspondant. Par exemple, pour le cadre Joomla, il s'agit du module "Wrapper".

Il peut être trouvé et créé dans le panneau de contrôle de CMS Jumla: "Extensions" – "Gestionnaire de module" – "Créer" (un bouton rond de couleur orange avec un signe plus à l'intérieur). Dans la fenêtre contextuelle, dans la liste, vous verrez le module "wrapper".

S'il n'est pas là, il n'est pas inclus. Pour l'utiliser, vous devez d'abord l'activer ici: l'onglet "Extensions", puis "Extension Manager", puis l'onglet "Gérer". Et regardez dans la liste qui s'ouvre, vous pouvez entrer le mot: Wrapper pour une recherche rapide dans le champ "Filtre". En face de ce module, il faut utiliser une icône verte avec une coque à l'intérieur. Un cercle rouge avec un point à l'intérieur indiquera que ce plugin est désactivé.

Après cette procédure, vous pouvez retourner au «Gestionnaire de module», créer un cadre et définir ses paramètres.

Comme vous pouvez le voir sur l'image, le module vous permet de définir: l'en-tête au-dessus du cadre, la position du module, sélectionnez les pages du site sur lesquelles il sera affiché. Et ajustez également la largeur, la hauteur; Ajoutez un cadre et le lien réel à la page Web. Si vous souhaitez afficher la page principale d'un site en pleine largeur dans un cadre, alors 100%, par défaut, ne suffira pas. Vous pouvez immédiatement le mettre en sécurité de 400%. Les altitudes de 200 sont généralement suffisantes pour afficher le menu principal de la page. Tout le reste du contenu sera visible si l'utilisateur (le visiteur du site) utilise la barre de défilement.

Voici un exemple de ce qu'est un cadre dans Jumla.

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 concepteur.

Histoire et réalité

Dans la pratique de créer des sites à partir de cadres, cette balise (son application) est depuis longtemps décalée en arrière-plan. Ils ont pu remplacer les modules, les paramètres dans les programmes constructeurs qui génèrent un code pour la page Web sans la participation du constructeur du site. Cependant, dans certains cas, cela ne suffit pas. Par exemple, lorsqu'une image est une structure complexe intégrale des zones affichées dans le navigateur. C'est ainsi que ses propriétaires voient la complexité des sites structurés. Sur sa création, ce n'est que dans des cas extrêmes, car les sites de Framey sont créés exclusivement à l'aide de balises spécialisées.

Sites structurés complexes

Pour eux, la création de plusieurs images interdépendantes est la solution optimale pour organiser le contenu sur les pages de la ressource. En règle générale, les grands portails, qui augmentent chaque année de plus en plus.

Comment obtenir le même résultat? Comment créer une structure de trame?

Comment écrire un cadre dans le code de la page

Les cadres en HTML sont ajoutés à l'aide de balises:

  • Cadre (pour une seule fenêtre);
  • Frameset (à l'aide de lui, une structure entière est créée);
  • Iframe (cadre "flottant");
  • Noframes (si la trame n'est pas affichée dans le navigateur de l'utilisateur).

La première étiquette spécifiée correspond toujours à la paire et . Et il remplace et . Et avec l'aide des attributs appropriés, vous pouvez ajuster les caractéristiques de chaque élément: le nom (nom =), la taille (cols = et les lignes =), la bordure (bordure), la barre de défilement et, bien sûr, le lien vers la page Web à afficher.

Variations de conception

Toute la page du site peut être divisée en zones. Par exemple, ceci:

À gauche

Cadre supérieur

À droite

Cette structure (appelée imbriquée) peut être obtenue en définissant l'attribut cols à l'intérieur de la balise, indiquant la position horizontale du cadre et les lignes verticalement. Le suivant est le signe = et les dimensions sont écrites. Par exemple, 60%, 40% – pourcentage (une fenêtre prendra 60% de l'espace du navigateur, l'autre, respectivement, 40%). Ou 100, 200 – le ratio des tailles en pixels. La taille d'une des images ne peut pas être définie (elle sera installée par défaut). Pour ce faire, vous devez spécifier un * après la virgule ou après la virgule.

Dans cette paire, le jeu de cadres enregistre chaque image avec les paramètres: src = http: // site / article / 143778 /% 2C, puis entre guillemets, un lien est donné à la page Web et name = avec l'en-tête (par exemple Frame 1).

La nidification de chaque nouvelle zone est désignée par le nouveau jeu de cadres.

Exemple de code:

Notez que dans notre exemple, pour les cadres 2 et 3, les tailles sont écrites une seule fois.

Beaucoup de zadumok vous permettent d'exécuter des cadres. Des exemples de leur emplacement dans la fenêtre du navigateur peuvent être mis en évidence (en modifiant le code en conséquence). Cependant, cette information n'a pas été utilisée depuis longtemps. Les cadres, s'ils sont utilisés aujourd'hui lors de la création de sites, ne sont que des modules en CMS gratuit ou sous forme d'iframe.

Cadre flottant

C'est étrange, pourquoi il a obtenu ce nom, le mot «intégré» est plus approprié ici. Cette image est créée pour afficher le contenu d'un fichier. Vous chargez dans la base de données tout document ou fichier, utilisez les balises de l'ayframe pour y enregistrer le chemin – et les visiteurs verront le texte du fichier (vidéo ou image). Malheureusement, les navigateurs ne affichent pas toujours le contenu. Pour ce faire, les constructeurs Web entrent la phrase entre la balise d'ouverture et de fermeture: "Votre navigateur ne affiche pas de contenu".

Par exemple, Seopult.ru est un service bien connu pour les maîtres de promotion. Ce n'est pas son site principal, mais le miroir I.seopult.pro, créé pour les clients du portail. Le code de l'ayframe est écrit ici:

  • Instructions
  • . Lorsque la balise

  • est créée pour définir un élément de liste. Prise en charge de tous les navigateurs.

    Sur la page du miroir, vous pouvez voir le mot «Instruction» sous la forme d'un bouton. Lorsque vous cliquez dessus, une présentation s'ouvre au centre de la fenêtre du navigateur.

    Tous les sites principaux pour regarder des films et des séries sont créés avec l'aide d'ayframes (par exemple, "Imhonet"), ainsi que de réseaux sociaux. Même la page principale de "Yandex" contient cette balise, et pas une seule paire.

    Comment prescrire l'iframe

    Télécharger sur le site un document sous la forme d'une fenêtre avec une barre de défilement peut être n'importe où. Habituellement, les étiquettes sont placées à l'intérieur du corps. En plus de la norme

    et

    , comme indiqué dans l'exemple ci-dessus, la balise de liste

  • peut également être utilisée.

    Les attributs sont ajoutés à l'attribut:

    • Largeur (largeur) et hauteur (hauteur =);
    • Aligner sur le bord aligné;
    • Indentation, que vous ne pouvez pas prescrire: la valeur par défaut est 6 – c'est assez;
    • Avec allowtransparency, vous pouvez définir la transparence de la zone du cadre afin que l'arrière-plan de la page soit visible;
    • Plus déjà familier scr, nom, défilement, bordure.

    Navigation à l'aide d'une cellule

    La compétence la plus intéressante dans la création de trames est l'écriture de code qui vous permet d'ouvrir le contenu dans une fenêtre par référence, ce que les créateurs du miroir Seopult ont fait tout de suite avec plusieurs liens (simultanément disponibles pour l'utilisateur sur une seule page).

    À cette fin, l'ayframe est pris, le nom par name = est en outre enregistré. Par exemple, zagolovok. Suivant avant sur les étiquettes et , les liens via HREF = http: // site / article / 143778 /% D1% 81 sont spécifiés, suivis de l'attribut target = zagolovok. Avant d'utiliser la balise de fermeture, une inscription sera indiquée, qui servira de lien. Les balises "a" sont ouvertes et fermées dans la balise p.

    Il existe plusieurs lignes dans le code qui peuvent être utilisées pour obtenir plusieurs boutons d'une ligne sur le site, en cliquant sur quel contenu différent sera affiché dans la fenêtre inférieure.

    Le code ressemblera à ceci:

    Publiez votre annonce

    Voir les annonces

    Comment ça se passera sur le site:

    Comment insérer un iframe dans le site de Jumla

    De manière standard, dans le panneau de commande Jumla, il existe un module inclus (c.-à-d., Prêt à l'emploi) "code HTML". Avec cela, vous pouvez insérer n'importe quel code n'importe où sur le site. Cependant, le code avec la balise ayfrem est systématiquement ignoré. Par conséquent, nous utiliserons le module spécial Jumi.

    Tout d'abord, vous devez le télécharger à partir d'Internet et l'installer par le biais du panneau administratif de Jumla: "Extensions" – "Extension Manager" – "Sélectionner le fichier". Spécifiez le chemin d'accès à l'archive téléchargée et cliquez sur "Télécharger".

    Après une installation réussie, accédez au «Gestionnaire de modules» et créez un nouveau. Sélectionnez le type Jumi. Dans la fenêtre qui s'ouvre, dans le champ "Code personnalisé", entrez l'ayfrem préparé, comme cela a été indiqué dans le paragraphe précédent de l'article. Donnez un titre au module, spécifiez la position de placement et la page du site. Cliquez sur Enregistrer et vérifiez ce qui s'est passé.

    Navigateurs et cadres

    Tous les navigateurs populaires affichent bien le contenu du cadre Windows: Chrome, Safari, Firefox, Android, iOS. Particulièrement élevé à cet égard est Internet Explorer et Opera. Et il n'y a aucune garantie que le visiteur de votre site affiche le contenu de toutes les fenêtres. Dans ce cas, vous devez laisser un message en utilisant la balise noframe (ouverture et fermeture). Dans ce cas, vous pouvez entrer les éléments suivants: "Votre navigateur est obsolète." Pour afficher le contenu du site, mettez à jour la version ". Si le navigateur de l'utilisateur affiche les trames correctement, ce message ne sera pas affiché.

    Ainsi, un cadre est une zone ou une fenêtre d'un site qui possède sa propre URL. Il est utilisé pour afficher dans un champ du navigateur plusieurs pages Web ou des documents indépendants qui ont également leur propre URL. Malgré le fait que les cadres vous permettent d'organiser un site complexe structurellement bien, ils n'ont pas été utilisés pendant longtemps, à l'exception de l'iframe. L'application de cette balise est toujours pertinente pour télécharger des présentations, un lecteur vidéo, des documents texte dans une certaine fenêtre. Il est utilisé activement par de vastes ressources Web connues.