TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

Transcription

1 TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec un contenu fixe. Pour cela nous allons : créer une page qui sera utilisée comme page d accueil du site, associer la page créée à un onglet Accueil dans le menu. Par défaut, la page d accueil affiche les 10 derniers articles publiés. Ajout d une image dans la bibliothèque Nous allons ajouter une image qui sera insérée dans la page d accueil. Récupérer l image «imageaccueil.jpg» se trouvant dans : et la télécharger dans votre répertoire GIT. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 1

2 Fichier à télécharger Upload de l image comme le drive de google Une image miniature a été générée 3 images sont créées automatiquement à partir de l image originale. Elles sont stockées dans un répertoire uploads / année / mois BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 2

3 Création de la page Accueil La page d accueil devrait ressembler à cela : Ajout d une page Il s agit du titre de la page, il sera affiché par défaut en haut de la page avec une balise <h1> BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 3

4 Insertion de l image «imageaccueil.jpg» à gauche et le texte à droite. Sélectionner la bibliothèque Sélectionner l image Cliquer sur le bouton pour insérer l image BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 4

5 L image a été ajoutée sans aucun attribut. Code html de l image Texte brut à insérer BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 5

6 Le texte se place en dessous de l image et non à sa droite. Il faut faire "flotter" l image à gauche et le texte à "droite". Pour cela il faut donner un attribut "gauche" à l image. Après avoir sélectionné l image, on peut cliquer sur l icône "modifier". BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 6

7 Flottement à gauche, le texte viendra se mettre sur la droite. Choix de la taille d affichage de l image Texte à afficher lors du survol de l image avec la souris. Lors du clic sur l image, celle-ci sera ouverte dans un nouvel onglet. Le texte s est placé à droite de l image. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 7

8 Mise en forme du texte : justifier, centrer, paragraphe. Publication de la page pour voir son affichage sur le site. Nous approchons du résultat souhaité. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 8

9 Copie du texte brut. Le texte s est inséré à la suite, ce qui n est pas voulu. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 9

10 Pour baisser le texte de 100 pixels, utiliser le style css padding. La solution est de casser le flux grâce à un style css "clear". Les sous titres sont en <h2> (titre 2) et le texte en paragraphe + justifié. Cela peut-être fait en mode visuel. Le titre n est pas centré BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 10

11 Il faut modifier les styles css du thème. Rajouter cette propriété à la balise <h1>. Ne pas oublier de cliquer sur le bouton en bas de page pour enregistrer la modification. Les titres <h1> seront centrés dans toutes les pages et tous les articles. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 11

12 Modification du menu Ajout de la page «Bienvenue» dans le menu. Changer l intitulé de l onglet qui apparaîtra dans le menu. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 12

13 Affichage du site avec le menu. BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 13

14 Configuration de la page d accueil en page statique Cette page va devenir l équivalent d une page index.php BTS Tourisme 2 ème année - GIT option multimédia - Wordpress TP n 4 - Page 14