Université Paris Dauphine Outils de l Internet TP 5 : LES CADRES

Dimension: px

Commencer à balayer dès la page:

Download "Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES"

Aimé Legaré
il y a 7 ans
Total affichages :

1 TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La subdivision se fait à l'aide de la balise <FRAMESET>...</FRAMESET>, qui remplace la balise <BODY>...</BODY>, et précise la subdivision en termes de nombre de colonnes et nombre de lignes. Orientation et taille des cadres L attribut COLS a pour valeurs la liste des dimensions respectives en pourcentage ou en pixels des cadres (séparées par des virgules), la séparation des cadres se fera sur la verticale. L'attribut ROWS a pour valeurs la liste des dimensions respectives en pourcentage ou en pixels des cadres (séparées par des virgules), la séparation des cadres se fera sur l horizontale. Exemple : <FRAMESET COLS="20%, 80%"> pour deux cadres séparées verticalement <FRAMESET ROWS="200, 600, 350"> pour trois cadres séparées horizontalement <FRAMESET ROWS="30%, *"> l'astérix signifie que la dimension correspondante est automatiquement celle qui reste disponible dans la fenêtre du navigateur Définition individuelle des cadres La balise <FRAME> définit chaque cadre individuellement. Chaque cadre doit être associé à une page Web grâce à l'attribut SRC dont la valeur est une adresse absolue ou relative. Un nom est donné à chaque cadre par l'intermédiaire de l'attribut NAME. Exemples : <FRAME NAME="sommaire" SRC="sommaire.htm"> <FRAME NAME="article" SRC="article.htm"> Pour que les liens hypertextes de la page sommaire.htm s'affichent dans le cadre nommé article, il faudra mettre l'attribut TARGET de valeur "article" dans la balise <A> du lien. Cet attribut contient donc le nom du cadre de destination. Il peut aussi contenir d'autres noms, prédéfinis, comme le montre le tableau ci-dessous: Contenu de TARGET _blank _top _self _parent Action résultante ouvre une nouvelle fenêtre de navigateur affiche le document en pleine page du navigateur (et supprime donc la subdivision en cadres) affiche le document dans le cadre courant affiche le document dans le cadre englobant Imbrication des cadres Il est tout à fait possible d'imbriquer les cadres les uns dans les autres pour obtenir divers configurations 1

Orientation et taille des cadres L attribut COLS a pour valeurs la liste des dimensions respectives en pourcentage ou en pixels des cadres (séparées par des virgules), la séparation des cadres se

2 Les bordures On peut ou non donner une bordure à l'ensemble des cadres grâce à l'attribut FRAMEBORDER (valeur YES ou NO) de la balise <FRAMESET>. Par défaut, FRAMEBORDER="YES" Pour donner une taille spécifique à la bordure, utilisez l'attribut BORDER dont la valeur est la largeur en pixel de la bordure. Par défaut, BORDER=5. On peut aussi choisir la couleur de la bordure de l'ensemble des cadres à l'aide de l'attribut BORDERCOLOR dont la valeur est soit le nom normalisé de la couleur soit le code hexadécimal correspondant. Les marges internes aux cadres Comme il est très joli d écrire juste au bord d'un cadre, il faut mettre des marges sur les côtés gauche et droit du cadre avec l'attribut MARGINWIDTH de la balise <FRAME> et dont la valeur est le nombre de pixel en largeur de la marge de gauche et de la marge de droite. On peut faire la même chose pour les marges du haut et du bas avec MARGINHEIGHT. Les barres de défilement Il est possible d'interdire le redimentionnement des cadres par l'utilisation de l'attribut sans valeur NORESIZE de la balise <FRAME>. Par défaut, les cadres peuvent être redimensionnés. Il est également permit d'attribuer ou non des barres de défilement à un cadre grâce à l'attribut SCROLLING dont les valeurs sont : 1. YES : barres horizontale et verticale internes au cadre 2. NO : pas de barre de défilement, ATTENTION car si le contenu du cadre est plus grand que l'espace disponible, vous ne pourrez pas tout voir! 3. AUTO c'est le navigateur qui décide s'il est nécessaire d'insérer une barre horizontale et/ou verticale (valeur par défaut) Incompatibilité Si le navigateur ne supporte pas les cadres, il peut être intéressant de pouvoir afficher un message dans la fenêtre grâce à la balise <NOFRAME>. Exemple : <FRAMESET ROWS="30%,*"> <FRAME NAME="sommaire" SRC="somaire.htm"> <FRAME NAME="article" SRC="article1.htm"> </FRAMESET> <NOFRAME> <BODY> Votre navigateur ne supporte pas les cadres </BODY> </NOFRAME> Cadres locaux Il est possible de définir à l'intérieur d'une page HTML contenant du texte, des images... un ou plusieurs cadres locaux à l'intérieur desquels s'affichera le contenu d'une autre page HTML. La balise associée est <IFRAME>. 2

On peut aussi choisir la couleur de la bordure de l'ensemble des cadres à l'aide de l'attribut BORDERCOLOR dont la valeur est soit le nom normalisé de la couleur soit le code hexadécimal

3 Ces attributs sont FRAMEBORDER (dont la valeur YES ou NO autorise ou interdit le dessin d'une bordure autour du cadre local), MARGINHEIGHT, MARGINWIDTH (qui définissent réciproquement la marge interne sur la hauteur et la largeur), NAME (qui spécifie le nom du cadre), SCROLLING (YES, NO ou, AUTO), SRC (le plus important car spécifie l'adresse de la page à afficher dans le cadre local), HEIGHT, WIDTH (respectivement la hauteur et la largeur du cadre) et ALIGN (dont la valeur LEFT, RIGHT, CENTER, JUSTIFY permet d'aligner le cadre à gauche, à droite, au centre ou de le justifier). Exercice 5.1 : Diviser l écran en 8 zones pour obtenir la représentation suivante. Les spécifications de chaque division sont décrites dans la division. Exercice 5.2 : Avec la même structure de cadres que celle de l exercice précédent, effectuez les modifications pour avoir la représentation suivante : 3

HEIGHT, WIDTH (respectivement la hauteur et la largeur du cadre) et ALIGN (dont la valeur LEFT, RIGHT, CENTER, JUSTIFY permet d'aligner le cadre à gauche, à droite, au centre ou de le justifier).

4 Exercice 5.3 : Enlevez les bordures des cadres à la structure de cadre de l exercice précédent comme ciaprès : 4

5 Exercice 5.4 : Réaliser la présentation ci-dessous : 1. la zone de "pied de page" doit avoir 50 pixels de haut, et cette hauteur ne doit pas être modifiable; cette zone ne doit pas avoir d'ascenseurs 2. la zone de "navigation" doit avoir 200 pixels de large, et cette largeur doit pouvoir être modifiable 3. les zones de "navigation" et de page proprement dite doivent avoir des ascenseurs si nécessaire 4. les bordures entre les frmaes doivent avoir 2 pixels de large 5. donnez des couleurs de fond différentes à chacun de ces frames 6. lorsque l'on clique sur "Lien1" dans le frame de navigation, la page correspondante new.htm doit s'afficher dans la zone de page de droite 7. lorsque l'on clique sur "Lien2" dans le frame de navigation, la page correspondante new.htm doit s'afficher dans la zone de navigation de gauche 8. lorsque l'on clique sur "Lien3" dans le frame de navigation, la page correspondante new.htm doit s'afficher dans la fenêtre entière du site courant 9. lorsque l'on clique sur "Lien4" dans le frame de navigation, la page correspondante new.htm doit s'afficher dans une nouvelle fenêtre du navigateur 5

la zone de "navigation" doit avoir 200 pixels de large, et cette largeur doit pouvoir être modifiable 3.

6 Exercice 5.5 : Rajoutez un cadre flottant contenant lez fichier new.htm dans une page, comme ci-après. Le cadre n a pas de bordures et affiche toujours la barre de défilement. Exercice 5.6 : Concevez un tableau avec une couleur d arrière-plan bleue avec une cellule comportant une barre de défilement, comme ci-après : 6

Le cadre n a pas de bordures et affiche toujours la barre de défilement.

Documents pareils

Introduction à Expression Web 2

Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer