Créer une page en HTML (3)

• Divers...
• Créer une icône personnalisée
• Créer une fenêtre popup
• Insérer un son dans une page web
• Insérer une image à agrandir
• Créer un site avec des cadres

 

 

Divers...

 

Créer une icône personnalisée :

Lorsqu'on ajoute certaines pages web à ses favoris, on remarque qu'elles se distinguent des autres favoris par une icône spécifique.

C'est très simple à réaliser :

Il faudra :
- créer un fichier *.ico (avec IconArt) que l'on nommera favicon.ico
- placer favicon.ico à la racine du site,
- ajouter une ligne de code dans la page index du site.

Préparation :

- télécharger et installer le programme IconArt (freeware) :
http://www.conware-pro.com/products/ia/about.php

 

Création du fichier *.ico :

Cela se fait en 2 temps :

1 Création d'une image avec un logiciel de dessin :

2 Enregistrement de l'image en format *.ico :

 

Code à ajouter :

 

Liens :

Xhtml.net - Icônes de pages web, la favicon.ico

 

 

Créer une fenêtre popup :

But : ouvrir une nouvelle fenêtre de dimension fixe quand on clique sur un lien. A l'intérieur de cette nouvelle fenêtre, on dispose d'un bouton permettant de la refermer.

Moyen : Cela se fait avec des instructions en JavaScript.

Cela se fait en 2 étapes :
1 - créer le lien dans la première page,
2 - créer la deuxième page (que je nomme popup.htm pour l'exemple).

 

1 - création du lien dans la première page  :

copier-coller le code HTML suivant dans la partie BODY :
(pour les utilisateurs de Dreamweaver :
- menu Edition, Copier comme texte)

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 :

Résultat :

Fenêtre popup

 

 

Insérer un son dans une page web :

 

Avec Dewplayer :

http://www.alsacreations.fr/dewplayer
Dewplayer un lecteur mp3 pour le web
Intégrez des sons, mp3 et podcasts à vos pages web. Outre sa légèreté, ce lecteur mp3 en flash télécharge le contenu du son à la demande lorsque l'utilisateur clique sur le bouton. Il est aussi possible de se déplacer lors de la lecture du son.
http://www.estvideo.com/dew/index/2005/12/03/603-dewplayer-reloaded
http://www.estvideo.com/dew/index/2005/02/16/370
-player-flash-mp3-leger-comme-une-plume

Voir aussi :
http://www.schillmania.com/projects/soundmanager/

 

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://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">

 

PS : Je ne recommande pas l'utilisation "intempestive" d'un fond sonore sur une page web, car beaucoup d'internautes y sont réticents. Car si, à la premier écoute, l'effet peut être plaisant... les fois suivantes, il risque fort de lasser.
Considérer également les internautes qui surfent le soir.

 

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 :

Jouer un son avec un bouton d'arrêt :

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 :

height et width correspondent à la taille de l'image réduite.

Sur Dreamweaver (voir) :

 

 

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://pagesperso-orange.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énients :
- les sites avec cadres sont plus difficiles à référencer.
- il est difficile d'accéder à une page isolément,
- etc.
voir :
http://www.openweb.eu.org/articles/finir_cadres/

 

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.

Pour télécharger ces pages :
- cliquer ici
Pour télécharger un modèle de page avec tableaux :
- cliquer ici

0 index.htm

<a href="cadre.htm">Cliquez-ici</a> pointe sur cadre.htm entrée du site.

1 cadre.htm :

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

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

Première page du site.

4 page1.htm

Pages suivantes :

Il faudra ensuite :
- rajouter des pages sur le modèle de la page1.htm,
- rajouter un lien pour chaque page ajoutée dans menu.htm
(ex : <p><a href="page2.htm">page 2 </a></p>)