Une image compartimentée.


VIDEO  1


9tpaysage.zip


Voici une leçon très intéressante.
Le principe est d'allouer à certaines parties d'une image, une fonction
spécifique, en occurrence : un lien.
Si vous connaissez Paint Shop Pro ou un autre logiciel de graphisme,
vous pourrez créer une image de toutes pièces.
Elle pourrait même servir de page index.

Ouvrir votre dossier Web. Ouvrir votre dossier travail.
Ajouter un dossier et le nommer : t1_paysage.
Enregistrer dans ce dossier l'image : 1paysage et l'image 2gif.
Vous les trouverez dans le fichier 9tpaysage.zip ci-haut.

L'image 1paysage fait 420 x 420 pixels.
Pour une meilleure compréhension, un texte est écrit sur différents
éléments. L'image 2gif est un GIF transparent de 40 x 30 pixels.
Ici l'apport des tableaux est très important et il faut un peu de patience.

Ouvrir Namo.
Ouvrir une nouvelle page.
Enregistrer la page Web dans le dossier t1_paysage du dossier travail
et nommez-la : paysage.
Enregistrer

Créer un tableau. 1x1
Un clic droit dans le tableau. Choisir Propriétés du tableau.
Dans taille, cocher Largeur et pixels et taper 420.
Cochez hauteur et pixels et tapez : 420.
Agencement, Alignement, Centre. (C'est la grandeur de l'image)
Bordures, Épaisseur : 0

En Arrière plan, Image, parcourir et sélectionner : 1paysage. Ouvrir.
Appliquer, OK.
Une petite barre clignote à l'intérieur du tableau.
Un clic gauche à l'extérieur gauche du tableau.
Une grande barre de la hauteur de l'image clignote.
Faire "Enter" sur le clavier, une fois.
Un clic gauche dans le tableau. Une petite barre clignote.

Créer un tableau de 1x3 cellule.
Un clic droit dans la première cellule. Choisir : Propriété du tableau.
Taille : Largeur et pixels cochés et tapez : 375.
Hauteur et pixels cochés et tapez : 386.
Alignement : Centre. Bordure : Épaisseur 2, Couleur : rouge.
Appliquer, OK.

Diminuer la première cellule à 80.
Diminuer la deuxième cellule à 100.
La troisième cellule devrait être à 171.

Un clic gauche dans la première cellule (arbre).
Créer un tableau de 1x1
Descendre le tableau par étape à 308 pour encadrer l'arbre.

Un clic gauche dans la deuxième cellule.
Créer un tableau de 3x1
Sélectionner le bas de la deuxième cellule et la descendre à 200.
Descendre la première cellule à 92.
Descendre la troisième cellule à 50

C'est ici qu'il faut avoir un peu de patience. Le but est d'encadrer
le soleil et la roche en déplaçant les cellules, sans dépasser les
bordures rouges du premier tableau.

Un clic gauche dans la troisième cellule.
Créer un tableau de 4 cellules. 4x1.
Ajuster les cellules pour encadrer l'avion, la maison et l'arobas.
Tenter de le faire sans voir les chiffres plus bas.
Première cellule (l'avion) : 50
Deuxième cellule : 50
Troisième cellule (la maison) : 180
Quatrième cellule (adresse électronique) : 72

Dans la première cellule (l'avion).
Créer deux tableaux 1x2.
Diminuer la première cellule à 40 et la deuxième à 86.
Agrandir un peu vers le bas.

Un clic dans la troisième cellule (la maison)
Créer un tableau 2x1.
Diminuer le tableau à 130. La largeur de la maison.
Agrandir vers le bas à 166 pour cadrer la maison.

Pour entourer la porte seulement.
Ajouter un autre tableau. 1x1
Un clic droit dans le tableau : Propriétés du tableau.
Alignement : centre. Le reste par défaut.
Appliquer, OK.

Diminuer la largeur du tableau à la largeur de la porte.
Un clic à gauche, à l'extérieur gauche du tableau.
La barre clignotante se placera avant le tableau.
Faire deux fois "Enter" sur le clavier pour descendre le tableau.
Agrandir le tableau vers le bas pour entourer la porte, sans dépasser
le tableau de la maison.

Dans la quatrième cellule (adresse électronique).
Créer un tableau de deux cellules. 1x2.
Augmenter la première cellule vers la droite et agrandir vers le bas
pour entourer l'adresse électronique.
Si tout est bien, faire un clic gauche dans l'espace vide du tableau
à bordure rouge.
Au-dessus du tableau de l'arbre.

Un clic droit au même endroit. Propriétés du tableau.
Changer l'épaisseur à : 0.
Appliquer, OK

Enregistrer le travail.

 


 

VIDEO  2


Pour vérifier les liens, il faut être branché.

Un clic dans le tableau de l'arbre. La barre clignote.
Insérer une image.
Image : Parcourir, sélectionner l'image 2gif transparente. OUVRIR

Dans la fenêtre : Propriétés de l'image. Créer un hyperlien.
Ici, nous pouvons choisir un lien interne (vers une page Web
de notre site) ou un lien extérieur (vers une URL) ou une adresse
électronique, un (mailto: )

Ici je place un lien URL qui parle d'arbres, en faisant un copier-coller
de ce lien :  http://www.domtar.com/arbre/album_photo.asp

Important : dans Bulle d'aide, écrire un texte d'explication.
Exemple : Les Arbres.
OK.
Appliquer, OK.

Une barre clignote.
Un clic devant cette barre pour sélectionner le GIF transparent.
Nous voyons un carré avec 8 noeuds.
Élargir et agrandir l'image (le GIF transparent) en restant à l'intérieur
du tableau qui l'entoure.
Nous ne devons pas modifier la grandeur du tableau qui entoure le GIF.

Voir en Aperçu.

En sélectionnant l'arbre, nous voyons le texte : "Les arbres"
Cliquer sur le lien. (petite main) Nous arrivons sur le site en question.

Revenir en Édition.

Un clic dans la cellule du soleil. Insérer une image.
Parcourir et sélectionner l'image 2gif. OUVRIR.

Créer un hyperlien.
Dans Adresse : taper un lien.
Ex. ici : http://system.solaire.free.fr/soleil.htm
Dans Bulle d'aide, écrire un texte.
Exemple : Le système solaire.
OK

Appliquer, OK.

Un clic avant la barre pour retrouver le GIF transparent.
Élargir et agrandir l'image.

Voir en Aperçu. Vérifier le lien.

Revenir en Édition .

Enregistrer le travail

Refaire le même exercice pour les autres éléments.
roche :  http://ecbaill.free.fr/dossiers/roches/roches.html
avion :   http://chezlorry.ca/Bricolages/Avions/Avions.htm
porte :  http://www.portesanciennes.com/

Note :
Toutes les adresses inscrites seront retenues.
Nous pourrons donc (après) les sélectionner d'un simple clic.

Pour l'adresse électronique.
Dans : Créer un hyperlien, choisir le mailto:
Surligner le texte s'il y en a un et taper la lettre (m) pour voir la
commande "mailto:"

Un clic sur mailto:
Si mailto n'apparait pas (ce qui arrive parfois), inscrivez : mailto:
suivie de votre adresse électronique. (sans espace)

Dans bulle d'aide un texte. Ex. : Pour me joindre.
Sélectionnez l'icône : Email.
Inscrire un terme dans le sujet du courriel. Ex. : Bonjour!
Faire OK à cette fenêtre et  faire OK à la fenêtre hyperlien.
Appliquer, OK.

Élargir et agrandir l'image.
Vérifier en Aperçu.

Revenir en Édition.

Enlever la bordure des tableaux.

Vérifier le tout en Aperçu.

Revenir en Édition.

Enregistrer.

 

 

Accueil

Suite : Une image compartimentée, Les fleurs.
Hyperliens dans une nouvelle fenêtre.