Animation de fond de page,  trois cadres, HTML, Outlook 

Bonjour !

Une animation de page peut dynamiser un site Web.
Voir un exemple d'un fond de page animé ainsi que   trois  cadres animés.  ici  
Vous trouverez ici le dossier zip :  fdan, contenant une page web avec les animations 
et 4 images en psp :  jaune, bleu, turquoise, rouge.

Explications, plus bas, du langage HTML en vue de le placer dans Outlook Express.

Il faut avoir une belle image et choisir des couleurs pour nos fonds animés en fonction de celle-ci.
Ceci dans le but d'harmoniser le tout.
Les animations sont petites, mais,  pour les 3 cadres, c'est excellent.

Important :
Ouvrir un nouveau dossier.
Le nommer d'un nom court, en minuscule, sans espace ou séparé par un trait en bas.
EX.: 1an, 1 pour : premier dossier, an pour animation.
Il faudra enregistrer toutes les images de votre travail dans ce nouveau dossier.
 Votre image principale doit s'y trouver. Ce qui facilitera les extensions dans Outlook !
Les images et les animations doivent avoir aussi,  un nom court,  en minuscule et sans espace ou séparé par un trait en bas :  _  (1_an)

 

Pour une meilleure compréhension, ouvrir les images du dossier zip fdan
associé à la couleur de l'exercice.  
Ces images sont en psp, elles comportent deux calques et elles sont prêtes
pour l'animation.

Comment faire vos images : Facile !

Ouvrir Paint Shop Pro

Paint Shop Pro

 

jaune

 

 

 

 

 

 

                                Image pour le fond de page.

Ouvrir une nouvelle image de 50 x 50 pixels. La nommer : jaune
Avec l'outil Zoom, grossir l'image à 250 %
Remplir le calque d'un jaune pâle. Renommer ce calque : fond1
Ouvrir un nouveau calque ordinaire, le nommer : a 
Avec le pinceau,  Largeur : 3, avec un jaune plus foncé que le fond :  faire des formes.
Ouvrir un nouveau calque ordinaire, le nommer : b 
Avec le pinceau, Largeur : 3, (le jaune foncé ) faire des formes à d'autres endroits
que les premiers.
Nous avons : 3 calques.
Dupliquer le calque fond1.  
Renommer la copie : fond2.
Nous avons : 4 calques.
Intercaler les calques pour avoir une forme au dessus et un fond en dessous.
Fusionner une forme et un fond.
Fusionner l'autre forme et son fond.
Il reste 2 calques,  prêts pour l'animation.
Enregistrer en psp dans votre nouveau dossier.

bleu

                                   Image pour le grand cadre

Ouvrir une nouvelle image de 50 x 50 pixels. La nommer : bleu
Suivre les mêmes étapes, en utilisant un fond bleu pâle et des formes bleu foncé.
Lorsqu'il reste deux calques à la fin,  appliquer sur chacun des calques un effet
de distorsion.
Enregistrer en psp dans votre nouveau dossier.

turquoise

                                   Image pour le cadre moyen

Ouvrir une nouvelle image de 50 x 50 pixels. La nommer : turquoise
Suivre les mêmes étapes, en utilisant un fond turquoise et des formes vertes
Enregistrer en psp dans votre nouveau dossier.

rose

                                   Image pour le petit cadre

Ouvrir une nouvelle image de 50 x 50 pixels. La nommer : rose
Comme pour le jaune, mais en utilisant un fond rose et des formes rouges.
Enregistrer en psp dans votre nouveau dossier.

 

Animation Shop

 

Ouvrir Animation Shop
Faire : File, (votre nouveau dossier) Open et chercher une de vos images que vous venez de sauvegarder en psp et  qui comporte 2 calques.
Élargir le cadre de l'image pour voir vos deux Frames.
Faire : View Animation.
Ici tout est par défaut
Faire : File, Save as et nommez votre animation avec un nom évocateur, dans le nouveau dossier.
Ex . : fdj   : fd pour fond et j pour jaune
Ex . : fdr   : fd pour fond et r pour rose

Vous aurez la Fenêtre :  Animation Quality Versus Output Size
Better Image Quality,
Use these settings when saving unoptimized files : Pas coché.
Faire : Suivant, Suivant, Suivant, Terminer

L'animation est prête.

Faire les autres animations de la même façon, en les enregistrant dans le nouveau dossier!

 

Explication du HTML  pour le tableau A

 

Examinons la parti BODY du langage HTML, ayant un fond animé ainsi que trois cadres animés.

1 : l'ouverture de la balise BODY
Nous pouvons voir ici que le background est de la couleur : (bgcolor="#F7E7AD" ) c'est un jaune pâle.   

2 : On peut changer  la couleur rgb  de la scroll bar. 
     (Quand  nous serons dans Outlook Express)

rgb (anglais) pour :  Red, Green, Blue  
ou  
rvb (français) pour : Rouge, Vert, Bleu

Ex : La couleur de cette police est :  CC0099
       la couleur rvb ou rgb est  R : 204,  V : 0,  B : 153

3 : nous voyons ici que : le background de la page,  se nomme: fdj.gif. (l'animation jaune)
4 : ici le background du premier cadre,  (balise  <table>)  se nomme:  fdb.gif  (bleu)
5 : ici le background du deuxième cadre se nomme: fdt.gif  (turquoise)
6 : ici le background du troisième  cadre se nomme: fdr.gif  (rouge)
7 : l'emplacement de votre image, qui viendra.
8 : la fin de la balise BODY :  </body>


Tableau  A


1
2
3


4

 

 

 

 

5

 

 

 

6

 

 

 

 

 

 

7

 

 

 

 

 

 

 

 

 

 

 

 

8

<body bgcolor="#F7E7AD" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:rgb(245,229,170); scrollbar-highlight-color:white; scrollbar-base-color:white; scrollbar-arrow-color:rgb(255,222,0); scrollbar-track-color:rgb(245,229,170);" background="fdj.gif">

<p>&nbsp;</p>

<table border="1" width="775" align="center" height="328" bgcolor="#B5D6FF" background="fdb.gif" bordercolor="#2645AB">

    <tr>

        <td width="765" height="322">

          

 

            <table border="1" width="698" align="center" height="242" bgcolor="#1AC9DA" background="fdt.gif" bordercolor="#00A429">

                <tr>

                    <td width="688" height="236">

                        <table border="1" width="637" height="149" align="center" bgcolor="#FF5FAD" background="fdr.gif" bordercolor="#F2066F">

                            <tr>

                                <td width="627" height="143">

                                    <table border="1" width="565" align="center" bordercolor="#F60676" height="79" bgcolor="#FF5FAD">

                                        <tr>

                                            <td width="555" height="73">

                                                <p align="center">image</p>

                                            </td>

                                        </tr>

                                    </table>

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

            </table>

        </td>

    </tr>

</table>


     </body>

 

Outlook Express.

 

Ouvrir Outlook,
Créer un nouveau message.
Vérifier dans Affichage que :  Barre d'état et Modifier la source sont cochés.

En bas du message il y a 3 onglets : Modifier, Source, Aperçu.

Sélectionner :  Source
Vous aurez ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<META content="MSHTML 6.00.2900.3059" name=GENERATOR>

<STYLE></STYLE>

</HEAD>

<BODY bgColor=#ffffff>

<DIV>&nbsp;</DIV></BODY></HTML>


Vert :      C'est une balise de Outlook Express
Fuchia :   Le début et la fin du : HTML
Bleu :      HEAD tout ce qui ce trouve dans cette balise sont des renseignements comme  les
               METAS  et STYLE pour le titre de la page. Je n'élabore pas ici.
Rouge :   BODY qui nous indique ici que bgColor=  (le background) est  blanc  #ffffff
Jaune :    DIV  qui est une balise à l'intérieur de BODY.
               Au centre de cette balise un signe : &nbsp; un espace, où tout se joue !

Dans la Source de votre message, entre :
</HEAD>    et   </HTML>
Sélectionner avec le curseur, la partie BODY
comme ici en noir dans le tableau à droite.

Faire : Édition, Couper


Vous aurez une petite barre clignotante, avant la fermeture du </HTML>   flèche rouge

Nous allons remplacer le BODY manquant du message, par le BODY du Tableau A  

Tableau A : Placer  votre curseur, juste avant la parenthèse  de body  <  et sélectionner tout le texte,
en incluant le body de la fin et la   parenthèse de fermeture >


Faire un copier-coller de ce texte, dans la source de votre message à l'endroit ou la barre clignote,
avant la fermeture du </HTML>

Sélectionner l'onglet :  Aperçu.
Vous ne pourrez voir les animations, car les extensions ne sont pas bonnes.
Vous verrez cependant les trois cadres en couleur.

Sélectionner l'onglet Modifier.
Faire:  Format,  Arrière plan, Image
La fenêtre :  Image d'Arière plan s'ouvre.
Dans Fichier,  l'image : fdj.gif est écrit, mais l'extension n'est pas la bonne.

Pour trouver votre extension :
Sélectionner :  Parcourir et aller chercher votre image (l'animation du fond de page) 
L'extension de votre image se trouvera dans Fichier.
Faire :  OK

Sélectionner l'onglet : Aperçu. Vous  verrez l'animation de votre fond de page.

Sélectionner l'onglet : Source et remarquer votre extension qui commence par des guillemets
et qui se termine par des guillemets.

Voici mon extension. 
"C:\Documents and Settings\Propriétaire\Bureau\mezam\public\ztut\11fdan\fdan\fdj.gif"  

On la retrouve dans le tableau en bas, ombragé en jaune.  L'extension commence par des guillemets , suivi de l'emplacement des différents dossiers et elle se termine par le nom de  l'image : fdj.gif, suivie
de guillemets.

Comme toutes les images sont dans le même dossier, nous venons de trouver notre extension principale.

En vert : les extensions à remplacer.
Ex. :   fdb.gif, le nom de la première image, souligné en vert.

Sélectionner fdb.gif  
Faire : Couper.

Sélectionner votre extension principale du début à la fin, incluant les guillemets et faire un copier-coller,
à l'endroit où a été coupée l'image :  fdb.gif

Voici mon résultat.

Comme nous avons fait un copier coller, c'est la même image que nous retrouvons à la fin.
Il faut Changer le nom de l'image.

Ex.  : le nom de l'image pour le premier cadre qui est bleu, se nomme : fdb.gif
Il faut donc remplacer fdj par fdb  Là où pointe la flèche verte.

Voir en Aperçu.

Charger les extensions des  autres gifs.

 

Pour placer votre grande image :
Sélectionner l'onglet : Modifier.
Avec le curseur, cliquer à droite du texte ou est écrit : image.
Faire : Insertion, Image et chercher votre grande image qui se trouve dans votre nouveau dossier.
Vous pouvez supprimer le texte.

Pour ajuster les cadres :  
Sélectionner l'onglet Modifier.

Avec le curseur : Cliquer sur le coin d'un cadre pour le sélectionner.
Vous verrez de petits carrés blancs aux 4 coins et sur les côtés.
Avec le curseur : Vous pouvez les éloigner pour élargir le cadre
ou les ramener vers le centre, pour le diminuer

Il reste à paramétrer les couleurs de la Scroll Bar pour l'agencer à la page en travaillant dans la Source
et en vérifiant en Aperçu.
Dans  Modifier : Vous pouvez ajouter un texte, avant les trois cadres, à l'intérieur de chacun d'eux
et après les trois cadres,  comme pour un courrier ordinaire.

 

Pour les BRAVES.
Vous pouvez modifier d'autres configurations dans la source du message.
Les trois cadres ont une bordure de 1 de largeur avec une couleur différente pour chacun.
Il vous est possible d'augmenter la largeur de la bordure et de changer sa couleur.
Il vous est possible de ne pas avoir de bordure.

 

Étudions la première table qui représente le grand cadre.

 

<P>&nbsp;</P>

<TABLE borderColor=#2645ab height=328 width=775 align=center bgColor=#b5d6ff

background="C:\Documents and Settings\Propriétaire\Bureau\mezam\public\ztut\11fdan\fdan\fdb.gif" border=1>

  <TBODY>

  <TR>

    <TD width=765 height=322>

 

<TABLE

Pour le début de la balise

borderColor=#2645ab

La bordure du cadre est bleu foncé :  #2645ab

height=328 width=775

 La hauteur du cadre est de :  328 et sa largeur  775.
Nous pouvons donc,   dans la source du message,  modifier la grandeur
du cadre en changeant les chiffres.

align=center

La disposition du cadre est : au centre.
Pour placer le cadre à gauche, il suffit d'écrire left à la place de center.
Pour placer le cadre à droite, il suffit d'écrire right à la place de center.

bgColor=#b5d6ff

Le fond de page est de la couleur :  #b5d6ff   C’est un bleu pâle.

background=

Comme Background vous avec l'extension de l'animation, qui débute
par des guillemets et qui se termine par des guillemets.

border=1>

Après l'extension vous avez border.
Ici la bordure du cadre est de : 1 de largeur.
Vous pouvez augmenter la largeur de la bordure en augmentant le chiffre.

 

Pour ne pas voir la bordure il suffit de mettre :  0 ( border=0>)

 <TD width=765 height=322>

La largeur du cadre  (sans la bordure) est de 765 et sa hauteur 322.

 

Maintenant, vous savez presque tout !  ;))) mezam


Galerie