Domaines d'application des cadres
Les développeurs de documents HTML disposent d'un choix assez large de formulaires pour afficher des informations sur les pages. Texte et informations graphiques peut être ordonné et organisé à l'aide de listes, de tableaux ou simplement en utilisant des options d'alignement, en définissant des lignes horizontales et en divisant en paragraphes. Parfois, ces fonctionnalités ne suffisent pas et vous devez alors diviser la fenêtre du navigateur en zones ou cadres distincts. Dans un certain nombre de descriptions en russe du langage HTML, le terme frames est utilisé à la place du terme frames. La fréquence d'utilisation des deux termes est à peu près la même.
Le choix d'une structure de trame pour l'affichage des informations sur le WWW se justifie dans les cas suivants :
- si nécessaire, gérer le chargement des documents dans une des sous-zones de la fenêtre de visualisation du navigateur tout en travaillant dans une autre sous-zone ;
- localiser des informations à un certain endroit de la fenêtre de visualisation qui doivent toujours être sur l'écran, quel que soit le contenu des autres sous-zones de l'écran ;
- pour présenter des informations commodément disposées dans plusieurs sous-zones adjacentes de la fenêtre, chacune pouvant être visualisée indépendamment.
La liste donnée n'épuise pas tous les cas possibles dans lesquels les cadres peuvent être appliqués, mais a un caractère de recommandation.
Considérons d'abord les utilisations typiques des cadres à l'aide d'exemples de documents HTML réels, puis passons aux règles de développement de documents contenant des cadres.
En figue. La figure 5.1 montre l'une des pages HTML de l'agence Finmarket, spécialisée dans la fourniture d'informations sur les marchés financiers et boursiers de Russie.
Riz. 5.1. Un document Web typique avec une structure de trame
Cette page divise la fenêtre du navigateur en trois cadres. La partie inférieure de la fenêtre occupe 20% de la hauteur de toute la fenêtre et contient des informations permanentes, qui dans ce cas est un menu graphique qui permet d'accéder à tout moment aux sections les plus importantes. Ce cadre ne peut pas modifier sa taille en fonction des commandes utilisateur et ne comporte pas de barres de défilement. La partie supérieure la fenêtre (80% de la hauteur) est divisée horizontalement en deux cadres. Le cadre de gauche contient la table des matières des documents consultables par l'utilisateur. Le cadre de droite, qui occupe la majeure partie de la fenêtre de visualisation, est destiné à afficher les documents eux-mêmes. Lors du chargement initial, ces deux cadres divisent la fenêtre du navigateur horizontalement dans un rapport de 15 % à 85 %. Ce rapport peut être modifié par l'utilisateur lors de la visualisation, ce qui permet de sélectionner les tailles d'image optimales en tenant compte du contenu des documents chargés. Chacun de ces cadres possède sa propre barre de défilement, vous permettant de visualiser l'intégralité du contenu du cadre, quelle que soit la taille du cadre lui-même, l'intégralité de la fenêtre du navigateur ou les polices utilisées. Lorsque vous sélectionnez un lien dans le cadre de gauche, le document correspondant sera chargé dans le cadre de droite. Cette structure permet de voir simultanément à l'écran à la fois la table des matières des documents et le contenu du document sélectionné.
Voici, sans explication, un fragment du code HTML utilisé pour construire un document avec cette structure :
Cet exemple montre l'utilisation la plus typique des structures de cadre, où un cadre sert de table des matières pour les documents et un autre est utilisé pour charger leur contenu. La résolution d'un tel problème sans utiliser de cadres se fait généralement comme suit. Sur l'une des pages se trouve une table des matières, composée de liens vers d'autres documents ou leurs fragments individuels. Lorsque vous cliquez sur un tel lien, la table des matières disparaît et le document requis est chargé à sa place, après lecture duquel vous devez généralement revenir à la table des matières. Lors de l'utilisation de frames, ce retour devient inutile, puisque la table des matières est toujours située sur une partie de l'écran.
Vous pouvez le trouver sur Internet
site Internet de l'édition électronique de l'annuaire téléphonique et d'adresses populaire "Tous les Pétersbourg" à Saint-Pétersbourg.
La version électronique de l'annuaire est disponible à http://www.allpetersburg.ru et vous permet de trouver les informations nécessaires en fonction des demandes des utilisateurs. Cette page Le document a également une structure de cadre et se compose de deux cadres, le premier ayant une largeur de 100 pixels et le second occupant toute la largeur restante de la fenêtre d'affichage. Le cadre situé sur le côté gauche est utilisé pour menu graphique, constamment présent à l'écran, et contient également le logo de la société Nevalink. Le deuxième cadre contient le document, qui est dans ce cas un formulaire de demande utilisateur. La structure de cette page est définie par le code HTML suivant :
Les cadres sont très similaires aux tableaux : ils divisent tous deux la fenêtre du navigateur en zones rectangulaires dans lesquelles se trouvent certaines informations. Cependant, à l'aide de cadres, vous pouvez non seulement résoudre le problème du formatage des pages du document, mais également organiser l'interaction entre elles. La différence fondamentale entre les cadres et les tableaux est que chaque cadre doit avoir son propre document HTML distinct, mais le contenu de toutes les cellules du tableau fait toujours partie du même document. De plus, la page affichée dans le cadre peut défiler lorsqu'elle est visualisée indépendamment des autres. Chaque cadre est essentiellement un « mini-navigateur » distinct. Contrairement aux cadres dont la structure entière est toujours présentée à l'écran, les tableaux peuvent ne pas tenir complètement dans la fenêtre et ne peuvent être visualisés que par parties. Il s'ensuit que si dans les tableaux HTML le nombre total de cellules est pratiquement illimité et peut atteindre plusieurs centaines, alors le nombre de cadres dans un document ne dépasse généralement pas plusieurs unités.
Conseil
Si vous avez uniquement besoin de formater un document, il suffit alors de vous limiter à l'utilisation de tableaux. Si vous devez résoudre des problèmes plus complexes, par exemple organiser l'interaction entre les sous-zones de la fenêtre ou créer des sous-zones situées en permanence sur l'écran, il est alors pratique d'utiliser des cadres.
En fin de compte, le choix de la structure du document - tabulaire ou encadré - dépend de nombreux facteurs et ne peut être prédéterminé sans ambiguïté.
Il y a aussides pages qui semblent être construites de la même manière que les précédentes. Par exemple, vous pouvez prendre page d'une collection mondiale très populaire de produits logiciels conçus principalement pour travailler avec Internet. Adresse du serveur http://www.tucows.com. Notez que le nom du serveur a été déterminé par une abréviation dérivée de l'abréviation nom et prénom collection - La collection ultime de logiciels Winsock. Étant donné que l'abréviation tucows s'est avérée être en accord avec l'expression deux vaches (deux vaches), des images de vaches se trouvent souvent sur les pages du serveur, et l'évaluation des produits logiciels est estimée en nombre de meuglements (« Moo ») et est représenté graphiquement comme une rangée du nombre correspondant de vaches. La plupart des pages du serveur sont construites de la même manière : sur le côté gauche de la fenêtre se trouve une liste des sections disponibles et sur le côté droit, une liste de produits logiciels pour la section sélectionnée. À première vue, la structure du document devrait être à peu près la même que dans les exemples précédents. Cependant, ce document n'utilise pas de frames ! Cette page est construite à l’aide d’un tableau composé d’une seule ligne avec deux cellules. Le tableau n'a pas de cadre et sert uniquement à formater la page. L'impression d'un écran divisé verticalement est créée en utilisant un graphique d'arrière-plan contenant ligne verticale, et pas du tout une grille de table. Vous pouvez le vérifier en visualisant la page sans charger d'images. L'utilisation d'un tableau ici est apparemment due à des considérations de plus grande accessibilité des documents, puisque les frames ne permettent pas l'affichage dans tous les navigateurs.
L'inconvénient de cette approche dans ce cas est la nécessité de répéter la liste complète des sections (côté gauche de la page) dans chaque document, ce qui augmente légèrement la taille du fichier.
Une comparaison des exemples ci-dessus montre que l'utilisation de tables et de cadres peut parfois être interchangeable et déterminée par les souhaits des développeurs. Notez que souvent, lorsque l'on regarde une page sur laquelle un document est affiché, il est impossible de déterminer comment il est construit. L'utilisateur final n'a pas besoin de connaître la structure interne du document, mais lors du développement de ses propres pages Web, une familiarisation avec le code source des documents existants serait extrêmement utile. Dans le premier exemple (voir Fig. 5.1), la structure des cadres du document est immédiatement visible - la présence de deux barres de défilement verticales détermine déjà la présence de cadres individuels. Les deux exemples suivants sont très similaires en apparence et il est impossible de déterminer que le premier d'entre eux est construit à l'aide de cadres et le second à l'aide de tableaux. Les différences n'apparaîtront qu'en travaillant avec eux. Dans l'exemple d'un annuaire téléphonique, lors du défilement d'un document, la partie gauche de la fenêtre restera en place, ce qui n'est possible que s'il existe une structure en frame. Dans l'exemple suivant (une collection de produits logiciels), le défilement déplacera tout le contenu de la fenêtre.
Vous pouvez afficher la structure du document lorsque vous travaillez avec le navigateur Netscape à l'aide de l'élément Page Info (dans les versions 3.x du navigateur Netscape, cet élément de menu s'appelait Informations sur le document) du menu Affichage (Fig. 5.2).
Riz. 5. 2
.
Menu Affichage du navigateur Netscape
De plus, vous pouvez toujours vérifier Code source HTML l'intégralité du document en utilisant l'élément Source de la page du menu Affichage (ou l'élément Afficher la source du cadre du menu contextuel du clic droit pour afficher le code HTML du document chargé dans le cadre sélectionné).
Conseil
Il ne faut pas abuser inutilement de l'utilisation des frames, et leur nombre ne doit pas dépasser trois ou quatre.
Souvent, sur de vraies pages sur Internet, vous pouvez voir les cas suivants d'utilisation de frames :deux cadres adjacents sont utilisés pour charger des documents faciles à visualiser simultanément et à comparer les uns avec les autres. Chacun des deux documents chargés dans les cadres utilise une forme tabulaire pour présenter les informations. Grâce à cette organisation des données, chacun des deux tableaux peut être consulté (ou imprimé) séparément, ou étudié en comparaison avec l'autre.
Tous les exemples donnés dans cette section sont tirés des pages de serveurs WWW populaires et peuvent peut-être servir d'exemples d'utilisation de cadres dans des documents HTML.
Les sections suivantes de ce chapitre couvrent les règles d'écriture de documents contenant des cadres.
Règles de description des cadres
Passons maintenant à l'examen des règles d'écriture des balises utilisées pour les documents comportant des structures de trame.
Examinons d'abord le code HTML complet qui crée un document avec des frames de complexité moyenne :
<![CDATA[
</p>
<p>]]>
Cet exemple crée la page encadrée illustrée dans la figure. 5.3. Comme vous pouvez le constater, ce code HTML définit quatre frames. Le cadre supérieur s'étend sur toute la largeur de la page et contient le titre. Viennent ensuite deux cadres centraux, dont l'un est situé sur le côté gauche et occupe 25 % de la largeur de l'écran, et le second occupe l'espace restant. La dernière et quatrième image occupe le quart inférieur de l'écran. Un document HTML distinct est chargé dans chaque cadre, dont le nom est déterminé par le paramètre SRC.
Comme le montre l'exemple, les balises sont utilisées pour décrire la structure des cadres
