HTML .. le Langage des Navigateurs.. 
INTERNET .. Construction de Pages WEB
Les FRAMES [Page_4]
Conseil habituel : Expérimentez
en même temps..en ajoutant à votre listing HTML précédent.
Les Frames sont en fait des fenêtres
découpées dans la fenêtre du Navigateur.
En général leur contenu est une
page HTML.
Remarque importante:
Pour utiliser les Frames leur déclaration
doit se trouver en dehors de la balise BODY. ( sinon , certains
navigateurs ne les reconnaîtront pas ).
<frameset cols=« 30%,70%
»> On déclare un découpage en 2 colonnes
en fixant des proportions.
ou <frameset rows=«50%,20%,30%
»> On déclare un découpage en 3 rangées.
ou <frameset rows=«20%,80%»
cols=« 50%,50%> On déclare un découpage en 4 frames.
Attention toute structure frameset doit être
refermée par la balise : </frameset>
Pour définir le contenu et autres paramètres
de chaque frame :
<frame src=« exo4.html
» name=« ex4 »>
<frame src=« exo5.html
» name=« ex5 »>
<frame src=« exo6.html
» name=« ex6 »>
ces Balises frame se trouve au
sein d’une structure frameset . Elles sont déclarées
dans l’ordre gauche-droite et haut-bas
Les Frames peuvent être dimensionnées
en valeurs absolues ou en pourcentages :
<frameset cols=«
200,200 »> 2 fenêtres de 200
pixels de largeur..
<frameset cols=« 40%,60% »>
2 fenêtres de 40% et 60% de largeur par rapport à
la fenêtre Navigateur.
Les Structures Frameset peuvent
être imbriquées :
Par exemple :
<html>
<frameset rows=« 50%,50%
»> 1er Frameset ouvert
<frame src=«
exo4.html » name=« ex4 »> affectation du
contenu et du nom à la fenêtre du haut
<frameset cols=«
40%,60% »> 2ème
Frameset ouvert à l’intérieur du 1er
<frame src=« exo5.html » name=« ex5 »>
affectation contenu et nom
<frame src=« exo6.html » name=« exo6 »>
affectation contenu et nom
</frameset>
2ème Frameset refermé
</frameset>
1er Frameset refermé
</html>
Une possibilté intéressante
pour dimensionner les Frames
Conseil habituel: Expérimentez
en même temps ..en ajoutant à votre listing HTML précédent.
<frameset cols=« 20%
, * , 20% »> L’étoile permet de laisser le
Navigateur dimensionner!!
Il
est même possible de mixer pixels et %ages soit:
<frameset rows="48,50%,*">
Il
est même possible de créer des Frames de surface nulle ...mais
à quoi cela peut-il servir ?
Cette possibilté est très
intéressante lorsqu'on utilise JavaScript ...à suivre..!
<frameset rows="10%,90%,*"> 3
frames , la 3ème sans dimension ..les 100% par les 2 autres ..!
Comment empêcher l’utilisateur
de redimensionner une Frame ?
Par défaut , les Frames sont redimensionnables
par l’utilisateur avec la souris . Or pour l’en empêcher :
<frame src=« bidon.html
» name=« bid » noresize>
Comment créer un lien sur
une Frame ?
Nous allons écrire ensemble 4 Fichiers
HTML .
1. le fichier principal appelons-le exoFbase.html
: il créera le frameset (le découpage en 3 fenêtres).
2. le 1er fichier de la 1ère frame(fenêtre).appelons-le:
exoF1.html
3. le 2ème.................2ème..........................................exoF2.html
4. le 3ème.................3ème..........................................exoF3.html
|
ce contenu est exoF1.html
|
<--fen1(25%) |
|
ce contenu
est
exoF2.html
|
<--fen2(50%) |
|
ce contenu est exoF3.html
|
<--fen3(25%) |
Le dessin ci-dessus montre comment se
présente la fenêtre du Navigateur
après avoir été découpée
par ce Frameset..
<html>
<head>
<title>Fichier de Base</title>
</head>
<!-- Attention un Frameset ne doit pas se trouver
à l'intérieur d'une structure BODY !! -->
<frameset rows=« 25% , * ,
25% »>
<frame src=«
exoF1.html » name=« fen1 »> Les 3 contenus
de Base..
<frame src=«
exoF2.html » name=« fen2 »>
<frame src=«
exoF3.html » name=« fen3 »>
</frameset>
</html>
L'attribut TARGET
permet de définir dans quelle FRAME sera chargée la Page
pointée par le LIEN.
-
Contenu de exoF1.html On
va ici créer 2 Liens en utilisant l’attribut target (
cible ).
<html>
<head>
<title>Fichier de Fenetre1</title>
</head>
<body><h2>Frame n°1 </h2>
<a href=« exo4.html »
target =« fen2 »>Mon exo n°4 en Zone 2</a>
<a href=« exo5.html »
target =« fen3 »>Mon exo n°5 en zone 3</a>
</body>
</html>
-
Contenu de exoF2.html On
va ici créer 2 Liens en utilisant l’attribut target
( cible ).
<html>
<head>
<title>Fichier de Fenetre2</title>
</head>
<body><h2>Frame n°2</h2>
<a href=« exo4.html »
target =« fen1 »>Mon exo n°4 en Zone 1</a>
<a href=« exo5.html »
target =« fen3 »>Mon exo n°5 en Zone 3</a>
</body>
</html>
-
Contenu de exoF3.html
On va ici créer 2 Liens en utilisant l’attribut target
( cible ).
<html>
<head>
<title>Fichier de Fenetre3</title>
</head>
<body><h2>Frame n°3</h2>
<a href=« exoF1.html »
target =« fen2 »>Mon exo n°6 en Zone 1</a>
<a href=« exoF2.html »
target =« fen1 »>RAZ de la ZONE 2</a>
</body>
</html>
Principe de Fonctionnement
La Page principale ( exoFbase.html )
découpe la fenêtre du Navigateur en 3 Zones Horizontales.
Dans chacune des Zones apparait un Titre et
quelques liens qui vont permettre de charger des contenus divers dans
chacune d’elles ou de réinitialiser leur contenu comme au départ.
Vous pouvez créer des liens avec ancre
de la même manière .
Conseil : Continuez à
expérimenter les Liens et et les Frames ...Vérifiez le fonctionnement
sous plusieurs Navigateurs, au moins Netscape et Iexplorer.
Remarque: Le Navigateur Netscape
permet:
<a href=« ???.html »
target=« fen2 »>Contenu du dossier</a>
<a href=« ../???.html »
target=« fen3 »>Contenu du Dossier Parent</a>
Si vous expérimentez cela vous constaterez
que vous pouvez naviguer dans l’arborescence du disque local !!..
Les Frames sont très souvent utilisées
pour afficher une fenêtre comportant les Index d’une liste
de pages et dans la fenêtre principale le contenu de la Page appelée.
Pour en savoir plus..vous pouvez visiter la page BALISES
de ce cours en ce qui concerne :
FRAME et FRAMESET et leurs
attributs.
EXERCICE n° 7
-
Ecrire les Listings HTML permettant
d’obtenir le résultat ci-dessous
-
La Page du Navigateur est divisée en
2 Frames.
-
La Frame de gauche comporte une liste "index"
comportant 4 Liens .
-
Chaque lien charge une page HTML différente
dans la Frame de droite..
Vous pouvez recevoir le corrigé
de cet exercice (comme pour les autres) en me le demandant.
[Retour
à la Table des Matières]
INTERNET
.. Construction de Pages WEB Extensions
de Connaissances
Images de Fond de Page
Il est possible de remplir un fond de Page
HTML avec une image de type GIF ou JPG .
Si elle est plus petite que la Page elle
sera automatiquement multipliée.
Donc on choisit souvent une petite Image de
Pattern.
Pour cela on utilise la Balise BODY
..par ex:
<body background=« pic.gif
»>
Extension de connaissance :
l'attribut BGPROPERTIES n'est reconnu que
par IExplorer mais il permet de conserver
fixe le fond de page alors que l'utilisateur en fait glisser le contenu
avec l'ascenseur.
<BODY background="fond.jpg" bgproperties="fixed">
Images "Réactives" ou "Sensibles"
Il est possible de "découper"
une image en différentes zones et de créer un Lien
sur chacune des Zones "sensibles".
De plus, chaque zone peut avoir une forme géomètrique
différente :
-
Rectangulaire
-
Circulaire
-
Polygonale
Le principe de définition de cette structure
est le suivant :
-
définition d'une ancre de début de
structure grâce à la balise <MAP ...>
-
définition de chaque Zone ( forme,coordonnées,Lien...)
grâce à la balise <AREA...>
-
définition de l'Image à découpée
et association avec l'ancre définie ci-dessus grâce à
la balise <IMG..>
Exemple de structure :
<MAP
name="navig">
<AREA shape="rect"
coords="0,0,24,30"
href="info1.htm"
target="fen_info">
<AREA shape="circle"
coords="30,60,30"
href="info2.htm"
target="fen_info">
<AREA shape="poly"
coords="0,95,40,110,80,140,0,140,0,95"
href="info3.htm"target="fen_info">
</MAP>
<IMG
src="carte.gif" width=100 height=142 USEMAP="#navig">
Les attributs de AREA :
-
shape : pour
définir la forme de la Zone ( rect ou circle ou poly ).
-
coords : pour
définir les coordonnées des formes ( en pixels )..si
-
shape=rect ..coords=X,Y (du coin haut gauche ) ,X,Y
(du coin bas droit ).
-
shape=circle..cords=X,Y ( du centre ),R ( rayon ).
-
shape=poly..coords=X,Y(du 1er sommet),X,Y(du 2ème
sommet),X,Y(du 3ème sommet),etc...
L'attribut USEMAP
de la balise IMG permet de définir où se trouve la structure
MAP.
La Balise marquee
Pour l’instant, seul
InternetExplorer de MicroSoft
la propose ..
Elle permet de faire défiler
un texte horizontalement.
Par ex:
<marquee>Oh..lala je glisse..</marquee>
<marquee left>je cours de gauche
à droite..!</marquee> Bien sûr, right fait le contraire
..
<marquee behavior=alternate height=15
width=350 bgcolor=green>Alors là !...</marquee>
La
possibilité de choisir plusieurs Polices au sein d’une Page:
Grâce à la balise font ..par
ex:
<font face=« Comic Sans
MS » color=yellow size=5>
........
</font> Mais ,
attention, n'oubliez pas, en choisissant une police, que le client qui
lira votre page doit la posséder lui aussi!!
Il est possible de cliquer sur une
Image pour Emettre un Formulaire:
C’est la Balise input qui permet de choisir
un type image.
<input type=image src=«
dessin.gif »>
Les Images de type GIF pésentent
,entre autres, l’avantage de pouvoir être transparentes.
Ce qui permet de les poser sur un fond coloré
afin qu ’elles apparaissent avec leur propre fond de la couleur du
Fond de Page.
Ceci est très important pour réaliser
des animations ou , plus simplement pour poser une image sur
un fond de page comportant une image de fond.
On connaissait cette propriété
pour les icônes de Windows , mais ceci est possible avec les images
GIF.
Pour rendre une image GIF transparente
il faut utiliser un éditeur d’image possédant cette fonctionnalité.
Lorsque votre image GIF sera
devenue transparente , les Navigateurs sauront l’utiliser ainsi
..!
Une Image GIF peuvent être de type Entrelacée
ou Non ..Si elle est entrelacée elle sera chargée par
le Navigateur par
couches successives ( effet de rideau..l'image se précise
petit à petit au fur et à mesure du chargement !)
Les fichiers Images GIF peuvent être de type:
| 87 |
Image GIF non transparente et non entrelacée |
| 87A |
Image GIF non transparente et entrelacée |
| 89 |
Image GIF transparente et non entrelacée |
| 89A |
Image GIF transparente et entrelacée |
Elles peuvent être animées..
Grâce à des Editeurs d'Images GIF
de bonne facture il est possible de construire de petites séquences
d'Animation avec les Images de type GIF.Donc les Images de
type GIF peuvent être Transparentes et Animées..
Voir en fin de cours les URL du WEB
où trouver les principaux Logiciels de Construction d'Images
GIF..
PaintshopPro est le logiciel
d'édition d'images WEB le plus prisé..!
Astuce pour retrouver certaines
erreurs de syntaxe :
HTML n’est pas bavard ..Il ne se plaint
jamais d’une mauvaise syntaxe .Ceci parceque tous les Navigateurs ne
sont pas forcément capables d’interprêter certaines commandes
HTML . Donc le Navigateur les ignore ..sans rien dire!
Vous pouvez utiliser Netscape pour observer
votre Source HTML ..car il colore les mots clés reconnus.
Donc si certains mots apparaissent comme des commentaires , il y a
peut-être une erreur de syntaxe.
N'hésitez pas à consulter la
Page 'BALISES et ATTRIBUTS' de ce cours..!
Comment centrer un ou plusieurs
objets
<center>
............ Autres Balises.....
</center>
Comment Aligner un ou plusieurs
objets
<DIV align=right>
( left,center,right )
......
......
</DIV>
[Retour
à la Table des Matières]
Les URL où trouver quelques
Outils Logiciels :
-
LView Pro ( GIF Transparentes )
http://lview.com
-
GifConstruction Set ( GIF Transparentes,Animées )
: http://www.mindworkshop.com
-
Pour MAC :
GifBuilder : http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder-F.html
-
Textures de fond de Page :
http://home.ch/ex/textures/index.html
-
PaintshopPro :
http://www.wska.com
FIN du COURS HTML sur le Web [
mBollard ]