|
|
|
| <p><a href="popup.htm" target="wclose" onclick="window.open('popup.htm','wclose', 'width=380,height=350,toolbar=no,status=no,left=20,top=30')"> Fenêtre popup</A></p> |
PS : les dimensions sont modifiables (width=380,height=350),
de même que l'emplacement de la fenêtre (left=20,top=30).
2 création de la page popup.htm :
- créer une nouvelle page que l'on nomme popup.htm
- copier-coller le code HTML suivant dans la partie BODY :
| <p>Essai de fenêtre popup :-)</p> <form method="post"> <p align="center"><input type="button" name="B1" value="Fermer la fenêtre" onClick="window.close()"></p> </form> |
Résultat :
Insérer un son dans une page web :
But : Diffuser un fond sonore à l'ouverture d'une page web. Disposer d'un bouton permettant au visiteur de couper le son.
Moyen : utilisation d'un fichier musical midi (*.mid)
Les fichiers midi sont les plus petits fichiers
disponibles pour diffuser un fond musical. Ils sont donc particulièrement
adaptés afin d'être intégrés dans une page
web.
La qualité est cependant fonction de la taille... donc pas très
bonne.
Pour télécharger des fichiers midi :
- faire une recherche sur http://www.google.fr
- taper "le nom de l'artiste" mid
ou :
- consulter les sites suivants :
http://zap.to/jukebox
http://guitaremidi.citeglobe.com/Midi.htm
http://www.chez.com/ahb/musmidi.htm
Différence entre Internet Explorer et Netscape :
Internet Explorer est le seul à reconnaître
la balise BGSOUND :
ex : <BGSOUND SRC="monfichier.mid" loop="infinite">
Netscape et Internet Explorer 4 et suivant, reconnaissent
la balise EMBED :
ex : <EMBED SRC="monfichier.mid" loop="infinite">
En pratique...
Il faut tout d'abord :
- placer le fichier son dans le dossier du site, ou dans un sous-dossier.
Jouer un son en boucle sans bouton d'arrêt :
| - insérer le code HTML suivant dans la partie
HEAD de la page web : <EMBED SRC="monfichier.mid" loop="infinite"> monfichier.mid : nom du fichier midi à exécuter.
|
Jouer un son avec un bouton d'arrêt :
| - insérer le code HTML suivant dans la partie
BODY de la page web : <EMBED SRC="monfichier.mid" WIDTH=145 HEIGHT=45 controls=console loop=0 autostart=true> monfichier.mid : nom du fichier midi à exécuter. |
Sur Dreamweaver :
1 Dans la fenêtre Objets :
- cliquer sur le bouton "Insérer un plug-in",
Dans la fenêtre de dialogue :
- sélectionner le fichier son dans le dossier du site.
2 Ensuite, dans la fenêtre Propriétés :
- régler la taille de la fenêtre de contrôle, suivant la taille désirée
:
de L = 145 H = 45 à L = 300 H = 150
- cliquer sur Paramètres...
- rentrer les valeurs suivantes :
| Paramètre | Valeur |
| Controls | console |
| Loop | 0 |
| autostart | true |
(les paramètres sont au choix évidemment)
Exemple :
- cliquer sur le bouton de lecture.
Insérer une image à agrandir :
Au lieu d'insérer une image grandeur réelle
sur une page web, on peut mettre l'image en réduction (vignette),
accompagnée d'un lien hypertexte.
Il suffira de cliquer sur la vignette, pour afficher l'image en grandeur
réelle.
Exemple :
Il faudra utiliser deux images :
- une de taille réelle (photo.jpg)
- une de taille réduite (miniature.jpg)
Ces images seront placées dans le dossier "images" du site.
Pour réaliser l'image de taille réduite :
- dupliquer l'image de taille réelle,
- redimensionner l'image à l'aide d'un logiciel graphique (voir).
Il faudra créer un lien hypertexte sur l'image de taille réduite, pour afficher l'image de taille réelle.
En HTML :
- copier le texte suivant :
| <a href="images/photo.jpg"> <img src="images/miniature.jpg" border=0 height=XX width=XX> </a> |
height et width correspondent à la taille de l'image réduite.
Sur Dreamweaver (voir) :
| - insérer l'image de taille réduite
dans la page web, - cliquer dessus pour afficher la fenêtre Propriétés, Dans la case Lien : - sélectionner l'image de taille réelle. |
Créer un site avec des cadres :
Un site avec des cadres (ou frames) est composé
d'au moins deux fenêtres (cadres) dans la même page. En
général, on a :
- une fenêtre à gauche, contenant le menu,
- une fenêtre à droite, contenant le texte.
Mon premier site http://perso.wanadoo.fr/mest/
est réalisé selon ce principe :
le menu de gauche permet d'accéder à l'ensemble des pages
du site.
Avantages :
- la navigation est plus aisée, car le menu est toujours disponible
et ne bouge pas.
- un site avec cadre est (relativement) plus facile à réaliser.
- il est plus facile de rajouter des pages.
Inconvénient :
- les sites avec cadres sont plus difficiles à référencer.
- il est difficile d'accéder à une page isolément.
Bases d'un site avec cadres :
Je présente ici uniquement l'armature d'un site avec cadre, sans le moindre enrichissement. Ceci, afin d'en expliquer le fonctionnement.
Il est préférable de créer tout
d'abord une page que l'on nommera index.htm
Cette page sera la page d'accueil. Elle contiendra un lien hypertexte,
pointant vers la page cadre.htm, permettant d'accéder
au site.
Trois pages seront ensuite nécessaires :
- cadre.htm : la page contenant les cadres,
- menu.htm : la page contenant le menu,
- intro.htm : la première page du site.
Une quatrième page pour constater le fonctionnement
des cadres :
- page1.htm : la deuxième page du site.
Pour réaliser ces pages :
- copier-coller les textes suivants dans des fichiers bloc-notes,
- les enregistrer sous leurs noms respectifs, dans le même dossier.
- double-cliquer sur le fichier index.htm pour visualiser le résultat.
0 index.htm
|
<html> <body bgcolor="#FFFFFF"> <center><a href="cadre.htm">Cliquez-ici</a></center> </body> </html> |
<a href="cadre.htm">Cliquez-ici</a> pointe sur cadre.htm entrée du site.
1 cadre.htm :
| <html> <head> <title>Cadre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset cols="100,*"> <noframes> </html> |
Remarquer :
la balise frameset permet de définir
les cadres.
cols permet de spécifier
la largeur de chaque cadre.
Ici, le cadre gauche fait 100 pixels (100), le cadre droite occupant
la partie restante de la fenêtre (*).
<frame src="intro.htm" name="page">
va avec <base target=page> dans menu.htm.
2 menu.htm
| <html> <head> <title>Menu</title> <base target=page> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> |
Remarquer :
<base target=page> qui permet de
définir la page à afficher dans le cadre de droite.
les liens hypertexte qui permettent d'afficher les deux pages (intro.htm
et page1.htm).
On pourra rajouter des liens ensuite... et les pages correspondantes.
3 intro.htm
| <html> <head> <title>Intro</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> Intro </body> |
Première page du site.
4 page1.htm
| <html> <head> <title>Page 1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> Page 1 </body> |
Deuxième page du site.
A suivre (15/10/01 01:00)
|
