2ème étape: Ajouter la photo aux archives photos du site web

Centre d’échange d’informations sur la
Convention sur la Diversité Biologique
Bienvenue dans le cours sur l’ajout
de photos sur un site web développé
avec le PTK
Objectifs de ce manuel :
• Savoir redimensionner une photo avant de la
mettre en ligne sur le PTK
• Etre capable d’ajouter une photo aux « Archives
photos » du site PTK
• Pouvoir insérer une photo sur une page web du
site PTK
2
Prérequis avant de lire ce manuel :
Avoir pris connaissance des manuels suivants :
- « Introduction et connexion au PTK »
- « Métadonnées »
- « Editer du texte »
3
De nos jours, il est possible de faire des photos
numériques de très bonne qualité, avec une
résolution allant jusqu’à 15 millions de pixels. Ces
photos sont très lourdes (plusieurs Mo). Il est
impossible de mettre des photos d’une telle taille
sur un site web car il faudrait trop de temps pour
les afficher. C’est pourquoi nous vous conseillons de
toujours modifier la taille des photos avant de les
ajouter au site PTK.
4
1ère étape: Redimensionner la photo
• Dans un premier temps, il faut ouvrir la photo
avec le logiciel Microsoft Office Picture Manager.
C’est un logiciel qui est installé sur tous les
ordinateurs disposant du pack Office de
Microsoft. Il est gratuit et très facile d’utilisation.
5
Pour rendre le cours plus explicite, nous
utiliserons en exemple la photo « baobabs.jpg »
que vous pouvez télécharger ici.
6
Une fois sur la page, vous devez cliquer sur la
photo à l’aide du bouton droit de votre souris et
sélectionner « Save image as… » / « Enregistrer
image sous… ».
7
Sauvegardez la photo dans votre dossier « My
pictures » / « Mes images ». Vous pourrez ainsi
faire l’exercice en même temps que vous
découvrirez le cours.
8
Vous devez ensuite ouvrir le logiciel Microsoft
Office Picture Manager (MOPM).
Le chemin d’accès est: Démarrer \ Tous les
programmes \ Microsoft Office \ Outils Microsoft
Office \ Microsoft Office Picture Manager.
9
Une fois le logiciel ouvert, vous devrez retrouver
la photo dans l’ordinateur.
Pour cela, vous avez deux possibilités :
10
Aller dans « Fichier » puis sélectionner « Ajouter un
raccourci vers des images… ».
11
Dans la fenêtre « Accueil », aller dans la section
« Parcourir », et cliquer sur « Ajouter un nouveau
raccourci vers des images ».
12
Une nouvelle fenêtre s’est ouverte : « Ajouter un
raccourci vers des images ».
13
Il faut maintenant sélectionner le dossier « My pictures »/
«Mes images » puis cliquer sur « Ajouter » pour afficher
les images contenues dans le répertoire.
14
On peut observer la seule photo contenue dans le
dossier « My pictures » (« Mes images ») qui est celle
téléchargée plus tôt « Baobabs.jpg ».
15
Vous devez ensuite cliquer sur la photo pour la
retravailler.
16
Sélectionnez « Modifier les images… » dans la barre
de menu supérieure.
17
La fenêtre « Modifier les images » s’est ouverte à
droite de votre écran.
18
Vous devez ensuite cliquer sur « Redimensionner » situé
dans la section « Modifiez la taille des images ».
19
La fenêtre « Redimensionner » s’est ouverte à droite de
votre écran. Vous allez pouvoir fixer la taille de l’image.
20
Vous allez choisir « Rapport largeur x hauteur prédéfini »
pour que toutes les images aient la même taille sur le site
web.
21
Pour faciliter la navigation sur le site PTK, il convient de
mettre les photos qui y sont destinées au format «Webpetit», qui est un format allégé.
22
Après avoir choisi « Web - Petit (448 x 336 px) » dans le
menu déroulant, vous constaterez que la nouvelle taille de
l’image est « 405 x 336 px ».
23
Vous devez maintenant cliquer sur le bouton «OK» pour
valider le changement de taille.
24
La photo a bien été modifiée, une étoile apparaît devant
son nom. Vous devez maintenant la sauvegarder.
25
La première étape est d’aller dans « Fichier ».
26
Vous devez ensuite cliquer sur « Enregistrer sous… ».
et enregistrer votre photo avec un autre nom que
baobabs.jpg. Vous devez TOUJOURS utiliser cette option
afin de renommer la photo que vous venez de retoucher.
27
N’utilisez jamais l’option « Enregistrer » car dans ce cas, la
photo modifiée remplacera la photo d’origine. La photo
d’origine sera perdue et vous ne pourrez pas la récupérer
par la suite !
28
Vous pouvez par exemple renommer la photo ainsi :
« baobabs-reduite.jpg ».
29
La photo de taille réduite a bien été sauvegardée dans le
dossier « My pictures » avec l’image d’origine.
30
Quittez maintenant le logiciel Microsoft Office Picture
Manager, pour cela, il faut aller dans « Fichier » puis
cliquer sur « Quitter ».
31
Un message automatique vous indique que « Certaines
modifications n’ont pas été enregistrées », vous devez
cliquer sur le bouton « Ne pas enregistrer » afin d’éviter
d’écraser la photo d’origine.
32
La première étape de ce manuel est terminée.
33
2ème étape: Ajouter la photo aux
archives photos du site web
Sur un site web PTK, toutes les photos doivent
être sauvegardées dans un même répertoire, il
peut être appelé « Archives photos » ou
autrement selon le choix du gestionnaire du site
web.
34
Pour accéder aux archives photos du site PTK training,
vous devez vous enregistrer sur le site et cliquer sur
«Photos» dans la barre supérieure de navigation.
35
Vous voilà arrivé dans les « Archives photos » du site PTK.
36
Pour importer la photo sauvegardée précédemment,
vous devez vous rendre dans l’encart «Ajouter des
photos» situé en bas à droite de l’écran, puis cliquer
37
sur «Télécharger des photos ».
Le formulaire « Soumettre une photo » est ouvert.
38
Vous devez cliquer sur le bouton «Browse…» pour
retrouver l’emplacement de la photo réduite de baobabs
enregistrée précédemment.
39
Une fois dans le dossier «My picture », cliquez sur la
photo puis sur le bouton «Open».
40
De retour au formulaire, vous constaterez que le chemin
vers la photo s’est inscrit dans le champ.
41
Il ne vous reste plus qu’à remplir les champs de
métadonnées de la photo.
42
Voilà à quoi ressemble le formulaire avec les champs de
métadonnées remplis.
43
Il ne vous reste qu’à cliquer sur le bouton «Upload» en bas
du formulaire pour télécharger la photo sur le PTK.
44
Vous voilà de retour dans le répertoire « Archives photos ».
Un message vous informe que l’ajout a été sauvegardé.
45
La photo est maintenant intégrée dans les archives
photos du site web. Vous pouvez cliquer dessus…
46
3ème étape: Ajouter des informations
sur la photo
47
Vous voilà sur la page donnant toutes les informations relatives à la photo.
48
Vous pouvoir choisir de visionner la photo en différentes tailles.
49
Des boutons pour naviguer dans les archives photos et modifier
rapidement l’apparence des photos.
50
Deux boutons pour naviguer dans les archives photos :
- Bouton de navigation arrière : permet d’aller à la
photo précédente de l’album
51
Deux boutons pour naviguer dans les archives photos :
- Bouton de navigation avant : permet d’aller à la photo
suivante de l’album
52
Deux boutons pour faire pivoter la photo à l ’écran :
- Bouton pour faire pivoter la photo de 90° dans le sens
anti-horaire
53
Deux boutons pour faire pivoter la photo à l ’écran :
- Bouton pour faire pivoter la photo de 90° dans le sens
horaire
54
Un bouton pour faire défiler les photos en mode diaporama.
55
Deux boutons pour retourner la photo à l ’écran :
- Bouton pour retourner la photo selon un axe vertical
56
Deux boutons pour retourner la photo à l ’écran :
- Bouton pour retourner la photo selon un axe horizontal
57
Vous pouvez aussi lire le titre de la photo.
58
L’adresse URL de la photo sur le site est également visible.
59
Enfin, toutes les métadonnées de la photo figurent en bas
à gauche de la page.
60
Vous pouvez éditer la photo en cliquant sur le bouton « Editer »
61
en haut à gauche de la page.
Cela ouvre le formulaire d’Edition de la photo.
62
Vous pouvez remplir ou modifier les traditionnels
champs de métadonnées de la photo.
63
Vous pouvez également remplacer la photo.
64
N’oubliez pas de cliquer sur « Enregistrer les
changements » avant de quitter le formulaire.
65
Un message vous informe que les changements ont bien
été sauvegardés.
66
Il vous reste à cliquer sur le bouton « Retour à l’index »
pour quitter le formulaire.
P.S.: On vous rappelle de ne jamais utiliser les flèches de
navigation dans le PTK!
67
Vous voilà de retour à l’archive photos du site PTK. La
photo est maintenant disponible pour être ajoutée à
68
n’importe quelle page du site.
4ème étape: Insérer la photo dans une
page web du site PTK
Dans un premier temps, il faut créer la page web
« Baobab africain » en téléchargeant l’exercice qui se
trouve ici.
Si vous ne savez pas comment procéder ou si vous avez
oublié comment faire, allez lire le cours approprié.
69
Voilà à quoi ressemble la page web « Baobab africain ». Entrez dans le
formulaire d’édition de la page web en cliquant sur le bouton « Editer ».
70
Une fois dans le formulaire, allez dans le champ ‘Corps
(HTML)’ de la page web.
71
Cliquez sur l’icône « Insérer/ Modifier une image »
(symbolisé par un arbre).
72
La fenêtre « Select image » s’est ouverte.
73
Maintenant, vous pouvez récupérer la photo de
baobabs dans « Archives photos ».
74
Vous devez cliquer sur « Archives photos ».
75
Une fois dans les « Archives photos », descendez
jusqu’à la photo voulue grâce à la barre de droite.
76
Arrivé à la photo de baobabs, vous devez cliquer
dessus pour la sélectionner.
77
Vous avez sélectionné la photo de baobabs. Vous pouvez
choisir la taille d’affichage de la photo dans le texte. On
vous conseille de choisir « Small » soit 320 px.
78
Vous pouvez constater que la photo a bien été réduite.
79
Il ne vous reste qu’à cliquer sur le bouton « Save size »
pour enregistrer la taille de la photo.
80
La fenêtre « Prepare image » est maintenant ouverte.
Elle vous permet d’ajuster les paramètres d’affichage de
la photo vis-à-vis du texte.
81
Par défaut, le nom de la photo a été rempli avec toutes
les métadonnées renseignées précédemment. Inutile de
tout laisser. Gardez juste « Baobabs ».
82
Après avoir changé le nom de la photo, vous pourrez
ajuster plusieurs paramètres d’affichage de la photo
83
vis-à-vis du texte.
Le 1er paramètre est l’alignement de la photo par rapport
au texte. Par défaut, c’est un alignement «Baseline» ou
84
ligne de base qui est appliqué.
On vous conseille de fixer un alignement à Gauche «Left»
ou à Droite «Right». On vous déconseille vivement de
85
choisir toute autre possibilité !
Ici, nous avons fixé l’alignement à Droite «Right», la
photo apparait donc à droite du texte.
86
Le paramètre « dimensions » ne doit pas être modifié.
La case pour que la photo reste proportionnelle doit
aussi rester cochée.
87
Aucun espacement vertical ne doit être fixé, veuillez
laisser la case vide.
88
Un espacement horizontal peut être fixé. Cela évitera
que le texte ne soit collé à la photo.
89
On vous conseille de le fixer à 20.
90
Vous pouvez constater que l’espace s’ajoute directement
autour de la photo (à droite et à gauche de celle-ci).
91
Le dernier champ vous permet d’ajouter une bordure
autour de la photo. Ce n’est pas très esthétique donc on
92
vous déconseille de le faire !
Il ne vous reste plus qu’à cliquer sur le bouton «Insert»
pour finaliser l’insertion de la photo dans le texte !
93
Vous voilà de retour dans le formulaire d’édition de la
page web. La photo a bien été ajoutée dans le champ
« Corps ».
94
Il ne vous reste plus qu’à cliquer sur le bouton
« Enregistrer les changements ».
95
Un message automatique vous confirme que les
changements ont bien été enregistrés.
96
Vous pouvez cliquer sur le bouton « Retour à l’index »
pour quitter le formulaire d’édition de la page web.
97
Vous voilà de retour sur la page web dédiée au baobab
africain, la photo a bien été insérée à droite du texte.98
Si vous souhaitez modifier la photo ou la
supprimer, il vous suffit de retourner au
formulaire d’édition de la page web !
99
Bravo, vous êtes arrivé au bout de ce manuel !
100