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

Chargement en cours ...

Un cadre est une zone sur un site (fenêtre) dans laquelle une autre page Web est visible. Les webmasters utilisent cette opportunité 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 les cadres sont essentiellement utilisés pour créer de grands portails Web, où de nombreux éléments de menu et sous-menus sont requis. A propos de ceux-ci disent généralement: "site sur les cadres." Pour créer une telle ressource nécessite une bonne connaissance du langage HTML.

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

Dans certains concepteurs de site, la génération automatique d'un tel code est fournie. Habituellement, le bouton pour ajouter un cadre est dans le menu principal du programme. D'abord, vous devez placer le curseur à l'endroit désiré sur la page, puis cliquez sur le bouton, la 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 les cadres sont essentiellement utilisés pour créer de grands portails Web, où de nombreux éléments de menu et sous-menus sont requis. A propos de ceux-ci disent généralement: "site sur les cadres." Pour créer une telle ressource nécessite une bonne connaissance du langage HTML.

Encadrement

Avec l'aide de ce "service" il est possible de créer plusieurs cadres sur la page, c'est juste les éléments interconnectés pour que vous n'obteniez pas.

Cadres dans CMS

De nombreux programmes de création de sites offrent la possibilité d'installer le module approprié. Par exemple, pour le cadre Joomla, il s'agit du module "Wrapper".

cadrer cette

Il peut être trouvé et créé dans le panneau de configuration CMS Jumla: "Extensions" - "Modules Manager" - "Créer" (bouton rond orange avec un signe plus à l'intérieur). Dans la fenêtre pop-up, dans la liste, vous verrez le module "Wrapper".

S'il n'est pas là, alors 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 devrait être une icône verte avec une coche à l'intérieur. Un cercle rouge avec un point à l'intérieur indiquera que le plugin est éteint.

Chargement ...

Après cette procédure, vous pouvez revenir au "Gestionnaire de modules", créer un cadre et définir ses paramètres.

qu'est-ce qu'un cadre

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 lequel il sera affiché. Et aussi ajuster la largeur, la hauteur; ajouter un cadre et le lien réel à la page Web. Si dans le cadre vous voulez afficher la page principale de n'importe quel site à pleine largeur, alors 100%, installé par défaut, ne sera pas suffisant. Vous pouvez immédiatement définir 400%. Les hauteurs 200 sont généralement suffisantes pour afficher le menu de la première 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.

exemples de cadres

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éation de sites à partir de trames, cette balise (son application) est depuis longtemps devenue secondaire. Ils ont été en mesure de remplacer les modules, les paramètres dans les programmes de conception qui génèrent du code pour la page Web sans la participation du constructeur du site. Cependant, dans certains cas, cela ne suffit pas. Par exemple, lorsqu'un cadre 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 ne sont que dans les cas extrêmes, car les sites de Framey sont créés exclusivement à l'aide de tags spécialisés.

Sites structurés complexes

Pour eux, la création de plusieurs cadres interreliés est la solution optimale pour organiser le contenu sur les pages de la ressource. Ceci, en règle générale, de grands portails, croissant chaque année de plus en plus.

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

structure de cadre

Comment écrire un cadre dans le code de la page

Les images en HTML sont ajoutées en utilisant des tags:

  • cadre (pour une fenêtre séparée);
  • frameset (il crée une structure entière avec l'aide de celui-ci);
  • iframe (cadre "flottant");
  • noframes (au cas où le cadre ne serait pas affiché dans le navigateur de l'utilisateur).

Le premier tag spécifié correspond toujours à la paire и . Et il remplace и . Et avec 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 bordure (border), 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

Droit

Cette structure (appelée imbriquée) peut être obtenue en définissant l'attribut cols à l'intérieur de l'étiquette, indiquant la position horizontale de l'image, 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 d'aspect en pixels. La taille de l'un des cadres ne peut pas être définie (il sera installé par défaut). Pour ce faire, vous devez spécifier un * après la virgule ou après.

Au sein de cette paire, frameset enregistre chaque trame avec les paramètres: src =, puis entre guillemets un lien est donné à la page web et name = avec l'en-tête (par exemple, le Frame 1).

L'imbrication de chaque nouvelle zone est indiquée par le nouveau jeu de cadres.

Exemple de code:

Notez que dans notre exemple, pour les cadres des deuxième et troisième dimensions, une seule heure est écrite.

Beaucoup de zadumok vous permettent d'exécuter des cadres. Des exemples de leur emplacement dans la fenêtre du navigateur peuvent être apportés sans fin (en changeant le code en conséquence). Cependant, cette information ne trouve pas d'application pratique depuis longtemps. Cadres, si utilisés aujourd'hui lors de la création de sites, alors uniquement sous la forme de modules en CMS libre ou sous la forme d'iframe.

Cadre flottant

site sur les cadres

C'est étrange pourquoi il a eu ce nom, le mot "intégré" est plus approprié ici. Ce cadre est créé 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 enregistrer le chemin d'accès - et les visiteurs verront le texte du fichier (vidéo ou image). Malheureusement, les navigateurs n'affichent pas toujours le contenu. Pour ce faire, les développeurs Web entrent la phrase entre les balises d'ouverture et de fermeture: "Votre navigateur n'affiche pas le contenu."

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

  • Instruction
  • . Où tag

  • Créé pour définir un élément de liste. Soutenu par 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 principaux sites pour regarder des films et des publications en série sont créés à l'aide d'ayframes (par exemple, "Imhonet"), ainsi que des réseaux sociaux. Même la page principale de "Yandex" contient cette étiquette, et pas une paire.

    Comment prescrire 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

    и

    , comme indiqué dans l'exemple ci-dessus, une balise de liste peut également être utilisée -

  • .

    Les attributs sont ajoutés à l'attribut:

    • largeur (largeur) et hauteur (hauteur =);
    • aligner sur l'alignement des bords;
    • indentation, que vous ne pouvez pas prescrire: la valeur par défaut est 6 - cela suffit amplement;
    • 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à scr familier, nom, défilement, frontière.

    Navigation avec l'aide d'une cellule

    La compétence la plus intéressante dans la création de cadres est l'écriture de code qui permet d'ouvrir du contenu dans une fenêtre par référence, ce que font les fabricants du miroir Seopult, avec seulement quelques liens (disponibles simultanément sur une page).

    A cet effet, une ayframe est prise, elle est en outre enregistrée avec un nom à travers name =. Par exemple, zagolovok. Suivant avant dans les balises и les liens sont assignés par un HREF = avec l'indication obligatoire après eux de l'attribut target = zagolovok. Avant d'utiliser l'étiquette de fermeture, une inscription est indiquée, qui servira de lien-bouton. Les étiquettes "a" sont ouvertes et fermées dans l'étiquette p.

    Il y a plusieurs lignes dans le code qui peuvent être utilisées pour obtenir plusieurs boutons d'affilée sur le site, en cliquant sur le contenu différent qui sera affiché dans la fenêtre du bas.

    Le code ressemblera à ceci:

    Déposer une annonce

    Voir les annonces

    Comment cela va apparaître sur le site:

    cadre flottant

    Comment insérer un iframe dans le site de Jumla

    Normalement, dans le panneau de commande Jumla, il y a un module "code HTML" inclus (c'est-à-dire prêt à l'emploi). Avec lui, vous pouvez insérer n'importe quel code n'importe où sur le site. Cependant, le code associé à la balise ayfrem est systématiquement ignoré. Nous allons donc utiliser le module spécial Jumi.

    Tout d'abord, vous devez le télécharger sur Internet et l'installer dans le panneau d'administration de Jumla: "Extensions" - "Extension Manager" - "Sélectionner un 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, allez dans le "Gestionnaire de modules" et créez-en un nouveau. Sélectionnez le type Jumi. Dans la fenêtre qui s'ouvre, dans le champ "Code personnalisé", tapez
    ayfrem, comme il a été montré dans le paragraphe précédent de l'article. Donnez un titre au module, spécifiez la position du 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 des fenêtres: Chrome, Safari, Firefox, Android, iOS. Particulièrement élevé à cet égard sont Internet Explorer et Opera. Et encore il n'y a aucune garantie que le visiteur de votre site verra le contenu de toutes les fenêtres. Dans ce cas, vous devriez laisser un message avec la balise noframe (ouverture et fermeture). Dans celui-ci, vous pouvez entrer ce qui suit: "Votre navigateur est obsolète." Pour afficher le contenu du site, mettre à jour la version ". Si le navigateur de l'utilisateur affiche correctement les cadres, ce message ne sera pas affiché.

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

    Print Friendly, PDF & Email
  • Chargement ...

    Ajouter un commentaire

    Votre e-mail ne sera pas publiée. Обязательные поля помечены *