Comment faire un site Internet

Leçon 4

Explication : Autres trucs
Album photos

Objectif:

Une forme d'album photo est démontrée. Vous avez maintenant toutes les connaissances pour réaliser votre propre album photo en vous basant sur les exemples donnés.

Vous pouvez dès maintenant voir 2 exemples. Le premier est sur la page d'accueil "Australie 2004" et le second sous l'onglet "Exemple Album" dans le menu gauche.

Matériel :

Dans le répertoire /pagesdiapos/ vous avez tous les fichiers pour réaliser votre premier diaporama (tel que sous l'onglet "Exemple Album" dans le menu gauche)

Vous pouvez mettre vos propre photos numériques ; il vous faudra cependant produire des vignettes d'environ 75x56 pixels et des images à afficher d'environ 600x450 pixel. Utilisez l'outil image que vous connaissez le mieux; Adobe Photoshop est l'idéal mais tout autre programme que vous connaissez qui traite les images numériques fera l'affaire.

Remarque sur l'espace disque:

Souvenez-vous qu'une image numérique prend beaucoup de place et essayer de limiter à des images de 100k maximum (100x1024= 102400 octets) pour raison d'économie et de rapidité pour les visiteurs de votre site. La forme de fichier d'image ".jpg" donne de meilleurs résultats en apparence. La for .. .gif est aussi très répandue consomme moins d'espace.

Réalisation:

Copiez les répertoires pagesdiapos, images et icone dans un répertoire de même niveau s'appelant Mon album.

Composantes à créer:

Des pages photo
Une page icones(navigation)
Une page Index

Les pages photos:

Pour chaque photo, vous devez créer une page HTML. Vous placez l'image au centre et pouvez ajouter un texte, un titre, ou toute autre information qui vous intéresse. Vous pouvez utisiler les modeles de pages existantes et simplement les modifier pour pointer les bons noms d'images. Sauvegardez les avec un nom comportant le nom du fichier image.
(ex . : pour une image Nik00495 .jpg le nom de la page sera Nik00495.htm)

Recommandation : visionnez chaque page pour vous assurer qu'elle fonctionne avant de passer à une autre page.

Les pages html pour chaque photo

Dans chaque page, vers la ligne 78 , vous devez indiquer le nom de l'image à deux endroits :

1- Nik00496.jpg (avec l'extension .jpg)
2- Nik00496 (sans l'extension .jpg)

<td align="center" valign="middle" bgcolor="#FFFFFF"><img src="../images/Nik00496.jpg" width="800" height="598" border=0 alt="Nik00496"></td>

De plus, la première et la dernière page doivent n'avoir qu'une flèche de navigation:

(première page : enlever ce qui est en gris i.d.
la balise <td> et </td> et son contenu dela flèche previousArrow )

(dernière page : enlever ce qui est en mauve i.d.
.la balise <td> et </td> et son contenu dela flèche nextArrow

<tr>
<td>
<a href="ModelNik00495.htm" onMouseOver="changeImages('previousArrow', '../images/previousArrowover.gif'); return true;" onMouseOut="changeImages('previousArrow', '../images/previousArrow.gif'); return true;">

<img name="previousArrow" src="../images/previousArrow.gif" width=54 height=31 border=0 alt=""></a>
</td>

<td>
<a href="ModelNik00497.htm" onMouseOver="changeImages('nextArrow', '../images/nextArrowover.gif'); return true;" onMouseOut="changeImages('nextArrow', '../images/nextArrow.gif'); return true;">
<img name="nextArrow" src="../images/nextArrow.gif" width=54 height=31 border=0 alt=""></a>

</td>
</tr>

Dans la flèche conservée ou pour les deux (pour une page en édition qui n'est pas la première ou la dernière vous devez indiquer quel les la page qui précède et laa page qui suit

page précédante.html

Page Image
en édition.

Page suivante.html

La page navigation(Icones)

Cette page contiendra les vignettes pour la navigation.
modelicones.html
Principalement, cette page comporte une table où sont alignés les icônes(vignettes) une à coté des autres.

Dans la page en forme HTML voici ce que cela donne :
<table border="2" align="center">
<tr>
<td><a href="modelNik00495.htm"><img src="../icones/Nik00495.jpg" border="0" width="75" height="56" alt=""</a></td>
<td><a href="modelNik00496.htm"><img src="../icones/Nik00496.jpg" border="0" width="75" height="56" alt=""</a></td>
<td><a href="modelNik00497.htm"><img src="../icones/Nik00497.jpg" border="0" width="75" height="56" alt=""</a></td>
<td><a href="modelNik00498.htm"><img src="../icones/Nik00498.jpg" border="0" width="75" height="56" alt=""</a></td>
<td><a href="modelNik00499.htm"><img src="../icones/Nik00499.jpg" border="0" width="75" height="56" alt=""</a></td>
</tr>
</table>

Ça donne ceci en apparence sur la page de navigation:

Examinons cette commande

<td><a href="modelNik00495.htm"><img src="../icones/Nik00495.jpg" border="0" width="75" height="56" alt=""</a></td>

la balise <td> et </td> indique le début et la fin d'une cellule du tableau (<table>)

modelicones.html

<frame name="Haut"
"modelNik00495.htm

<frame name="icones"
src="modelicones.html"

./icones/Nik00495.jpg (vignette)

<a href="modelNik00495.htm"
cette commande demande d'afficher la page modelNik00495.htm
dans le cadre du "Haut"
sur un click gauche de la
souris

etc... etc...
.............et ainsi de suite pour chaque photo
que l'on insère dans le site.

Dans l'exemple du répertoire /pagesdiapos/ il y a 5 pages(5 photos).
mais on peut en mettre autant qu'on le désire 10, 20, 50 ou 100 et plus,
mais il est préférable de se liviter ou de faire plusieurs albums; c'est
moins fastidieux à faire et à regarder...

La page index
modeldiapoindex.html
L'album comporte deux cadres horizontaux

Notez : que le cadre du haut doit avoir le nom de la première page
qui apparaîtra quand on ouvre l'album. Si vous changez ces noms
ne pas oublier de les remplacer dans la page index( page de cadres)

<frameset rows="90%,*">
<frame name="Haut" src="modelNik00495.htm" scrolling="auto" marginwidth="0" marginheight="0" noresize>
<frame name="icones" src="modelicones.html" scrolling="no" marginwidth="0" marginheight="0" noresize target="Haut">
</frameset>

Page des cadres (index)

<frame name="Haut"
src="modelNik00495.htm"

<frame name="icones"

Pour visionner, nous ajoutons un lien la flèche qui suit. Pour cela, le nom du lien
que nous avons utilisé est : Mon album / index.html . Renommez la page
des cadres à : index.html (originalement :modeldiapoindex.html)

Mais aussi , assurez-vous d'avoir bien sauvegardé tous vos fichiers dans le bon répertoire.

Voir mon album : (si une page manquante apparaît, c'est que tu n'a pas créé Mon album au bon endroit; vérifier aussi l'orthographe, les majuscules comptent (href="Mon album/index.html)