Exercice : modifier des pages

  • 15 minutes

L’objectif de cet exercice pratique est la création d’une page web et la modification du code source à l’aide du studio de conception Power Pages.

À la fin de ces exercices, vous pourrez :

  • ouvrir le studio de conception Power Pages 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 devez disposer des éléments suivants :

  • Un site Power Pages approvisionné dans votre environnement. Si vous ne disposez d’aucun site Power Pages, suivez les instructions Créer et gérer des sites Power Pages pour en créer un.

Scénario

Pour améliorer l’expérience des visiteurs sur le site web, il est parfois nécessaire d’ajouter du contenu HTML personnalisé à une page. Dans cet exercice, vous allez ajouter du code HTML qui crée une alerte pouvant être ignorée. Le code va également comprendre un petit fragment en langage Liquid créant un message de salutation dynamique pour le visiteur.

Étapes générales

  1. Ouvrez votre portail dans le studio de conception Power Pages.
  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 cliquez sur Modifier pour lancer le studio de conception.

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

    Capture d’écran du studio de conception Power Pages avec un site en mode d’édition et l’espace de travail Pages sélectionné.

Créer une page web

  1. Cliquez sur le bouton + Page.
  2. Saisissez un nom de page.
  3. Sélectionnez la disposition standard Page d’arrivée, puis appuyez sur Ajouter. Capture d’écran de la page créée avec la disposition de la page d’arrivée.

Modifier la page

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

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

  3. Votre page devrait ressembler à ceci :

    Capture d’écran du texte de l’espace réservé pour le contenu personnalisé.

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

  5. Lorsque vous y êtes invité, sélectionnez Ouvrir Visual Studio Code : Capture d’écran de la boîte de dialogue pour 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 créé précédemment avec les mots Enter text : Capture d’écran du contenu de la page ouverte dans l’éditeur Visual Studio Code pour le Web avec un paragraphe de texte en surbrillance.

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

    <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 devrait maintenant ressembler à ceci : Capture d’écran du contenu de la page ouverte dans l’éditeur Visual Studio Code pour le Web avec le nouveau contenu en surbrillance.

  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 : Capture d’écran d’une boîte de dialogue invitant à synchroniser le contenu de la page entre l’éditeur Visual Studio Code pour le Web et le canevas du studio de conception.

  11. Les modifications apparaîtront 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 pouvant être ignorée s’ouvre. Capture d’écran d’une page Power Pages présentant divers contenus d’amorçage.

  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.