Top Banner
TP N°5 Page Galerie Wordpres s Objectifs Créer une page d’images Gérer les images Ajout des images dans la bibliothèque Nous allons ajouter toutes les images qui seront insérées dans la page galerie. Ajouter à la bibliothèque toutes les images de la maison, de la terrasse, de la mer et du port se trouvant dans votre répertoire GIT. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n° 5 - Page 1 Etat de la bibliothèque avec les images
8

Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Apr 24, 2018

Download

Documents

phamcong
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

TPN°5 Page Galerie Wordpres

sObjectifs

Créer une page d’images Gérer les images

Ajout des images dans la bibliothèque

Nous allons ajouter toutes les images qui seront insérées dans la page galerie.

Ajouter à la bibliothèque toutes les images de la maison, de la terrasse, de la mer et du port se trouvant dans votre répertoire GIT.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 1

Etat de la bibliothèque avec les images uploader.

Page 2: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Création de la page Galerie

La page d’accueil devrait ressembler à cela :

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 2

Il s’agit du titre de la page, il sera affiché par défaut en haut de la page avec une balise <h1>

Chaque image doit avoir un lien pour s’afficher à sa taille réelle.

Titre <h2>.

Page 3: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 3

Par défaut les images sont insérées à la suite (css float) avec une largeur de 300 pixels.

Largeur du bloc principal : 960 pixels

Saisie du titre avec une balise <h3>

Insérer les 3 photos de la maison

Aperçu de la page

Page 4: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Nous allons améliorer la présentation en mettant pour chaque image : une largeur de 296 pixels à chaque image afin de remplir le bloc, un lien hypertexte pour afficher l’image à sa taille réelle.

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 4

Sélectionner chaque image pour la modifier.

Mettre un alignement à « Gauche » pour que l’image suivante vienne se placer sur la gauche, c’est-à-dire un float left.

Mettre une taille personnalisée à 296 pixels de largeur.

Page 5: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Terminer la page

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 5

Pour afficher l’image lors du survol de l’image.

Publication de la page pour voir son affichage sur le site.

Page 6: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Affichage du rendu de la page Galerie photos

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 6

Page 7: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

Ajout de l’onglet Galerie dans le menu

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 7

Ajout de la page « Galerie photos » dans le menu.

Changer l’intitulé de l’onglet qui apparaîtra dans le menu.

Page 8: Modes opératoires - coursbts.feyder.netcoursbts.feyder.net/tp/wordpress/05.tp.wordpress.docx  · Web viewMettre une taille personnalisée à 296 pixels de largeur.Mettre un alignement

BTS Tourisme 2ème année - GIT option multimédia - Wordpress TP n° 5 - Page 8

Affichage du site avec le menu modifié.