Exercice : modifier des pages

L’objectif de ce laboratoire pratique est de créer une page web et de modifier le code source à l’aide de Power Pages design Studio.

À la fin de ces exercices, vous pouvez :

• Ouvrez Power Pages design Studio pour modifier votre portail.
• créer une page à l’aide d’un modèle standard ;
• afficher le code source de la page ;
• ajouter directement du code HTML personnalisé.

Pour cet exercice, vous avez besoin des éléments suivants :

• Un site Power Pages provisionné dans votre environnement. Si vous n’avez pas de site Power Pages disponible, suivez les instructions de création et de gestion des sites Power Pages pour en créer un.

Scénario

Pour améliorer l’expérience du site web pour les visiteurs, vous devez parfois ajouter du contenu HTML personnalisé à une page. Dans cet exercice, vous ajoutez du code HTML qui crée une alerte ignorée. Le code inclut également un petit fragment dans le langage Liquid créant un message d’accueil dynamique pour le visiteur.

Étapes générales

1. Ouvrez votre portail dans Power Pages design Studio.
2. Créez une page web de destination.
3. Modifiez la page, ajoutez un espacement et un espace réservé de contenu, puis ajoutez du code HTML.
4. Enregistrez la page et parcourez le site pour afficher les résultats.

Étapes détaillées

Lancer le studio de conception Power Pages

1. Connectez-vous à Power Pages.

2. Sélectionnez un environnement cible à l’aide du sélecteur d’environnement situé dans le coin supérieur droit.

3. Sélectionnez votre site, puis sélectionnez Modifier pour lancer le studio de conception.

4. Vérifiez que l’espace de travail Pages est sélectionné.

   

Créer une page web

1. Cliquez sur + Page.
2. Saisissez un nom de page.
3. Sélectionnez La mise en page d’accueil standard, puis sélectionnez Ajouter.

Modifier la page

1. Cliquez sur le premier bouton de la page. Appuyez sur le signe plus (+), puis sélectionnez l’élément Spacer . Cette commande ajoute un petit espace avant votre contenu personnalisé.

2. Sélectionnez l’espaceur, appuyez sur le signe plus (+), puis sélectionnez Élément Text . Cette commande ajoute un espace réservé pour votre contenu personnalisé.

3. Votre page devrait ressembler à ceci :

   

4. Appuyez sur Modifier le code pour ouvrir la page dans Visual Studio Code pour l’éditeur web.

5. Lorsque vous y êtes invité, sélectionnez Ouvrir Visual Studio Code :

6. Cette sélection ouvre une nouvelle fenêtre ou un onglet avec Visual Studio Code pour le web. Recherchez l’élément de texte que vous avez créé précédemment avec les mots Enter text:

7. Copiez le code suivant et collez-le dans la source de page, en remplaçant le <p>Enter text</p> contenu :

   <div role="alert" class="alert alert-info alert-dismissible">
     <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
     <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong>
     Get your unlimited free education at 
     <a href="https://learn.microsoft.com/">Microsoft Learn</a>
   </div>
   

8. Votre contenu doit maintenant ressembler à ceci :

9. Appuyez sur Ctrl-S (⌘-S sur macOS) pour enregistrer le fichier.

10. Basculez vers la fenêtre du studio de conception. Appuyez sur Le bouton Synchroniser pour synchroniser les éditeurs et afficher le contenu mis à jour sur le canevas :

11. Les modifications s’affichent sur le canevas du studio de conception. Appuyez sur Le bouton Aperçu dans le coin supérieur droit, puis sélectionnez Bureau.

12. Votre page personnalisée avec une alerte ignorée s’ouvre.

13. Vérifiez que le message de salutation comprend le mois en cours.

14. Appuyez sur l’icône représentant une croix (x) pour ignorer l’alerte.