Esercizio - Modifica di pagine

Lo scopo di questo lab pratico è creare una pagina Web e modificare il codice sorgente usando Power Pages Design Studio.

Al termine di questi esercizi, è possibile:

• Aprire Power Pages Design Studio per modificare il portale.
• Creare una nuova pagina usando un modello standard.
• Visualizzare il codice sorgente della pagina.
• Aggiungere direttamente codice HTML personalizzato.

Per questo esercizio sono necessari gli elementi seguenti:

• Un sito di Power Pages predisposto nel tuo ambiente. Se non si dispone di un sito Power Pages disponibile, seguire le istruzioni Creare e gestire siti Power Pages per crearne uno.

Scenario

Per migliorare l'esperienza del sito Web per i visitatori, a volte è necessario aggiungere contenuto HTML personalizzato a una pagina. In questo esercizio si aggiunge codice HTML che crea un avviso non consentito. Il codice include anche un piccolo frammento in linguaggio Liquid che crea un messaggio di saluto dinamico per il visitatore.

Procedura generale

1. Apri il tuo portale nel design studio di Power Pages.
2. Creare una nuova pagina Web di destinazione.
3. Modificare la pagina, aggiungere uno spaziatore e un segnaposto per il contenuto, quindi aggiungere il codice HTML.
4. Salvare la pagina ed esplorare il sito per visualizzare i risultati.

Procedura dettagliata

Avvia Power Pages studio di progettazione

1. Accedere a Power Pages.

2. Selezionare un ambiente di destinazione usando il selettore dell'ambiente nell'angolo in alto a destra.

3. Selezionare il sito e quindi selezionare Modifica per avviare lo studio di progettazione.

4. Assicurarsi che l'area di lavoro Pagine sia selezionata.

   

Creazione di una pagina Web

1. Selezionare + Pagina.
2. Immettere un nome per la pagina.
3. Selezionare il layout standard pagina di destinazione e quindi selezionare Aggiungi.

Modifica della pagina

1. Selezionare il primo pulsante nella pagina. Premere il segno più (+) e quindi selezionare Elemento Spacer . Questo comando aggiunge uno spazio ridotto prima del contenuto personalizzato.

2. Selezionare lo spaziatore, premere il segno più (+) e quindi selezionare Elemento Text . Questo comando aggiunge un segnaposto per il contenuto personalizzato.

3. La pagina avrà il seguente aspetto:

   

4. Premere Modifica codice per aprire la pagina in Visual Studio Code per l'editor Web.

5. Quando richiesto, selezionare Apri Visual Studio Code:

6. Questa selezione apre una nuova finestra o una scheda con Visual Studio Code per il Web. Individuare l'elemento di testo creato in precedenza con le parole Enter text:

7. Copiare il codice seguente e incollarlo nell'origine della pagina, sostituendo il <p>Enter text</p> contenuto:

   <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. Ora il tuo contenuto dovrebbe apparire così:

9. Premere CTRL-S (⌘-S su macOS) per salvare il file.

10. Passare alla finestra di progettazione. Premere il pulsante Sincronizza per sincronizzare gli editor e visualizzare il contenuto aggiornato nell'area di disegno:

11. Le modifiche vengono visualizzate nel canvas della finestra di progettazione. Premere il pulsante Anteprima nell'angolo in alto a destra e quindi selezionare Desktop.

12. La tua pagina personalizzata con un avviso rimovibile si apre.

13. Verificare che il messaggio di saluto includa il mese corrente.

14. Premere l'icona con la croce (x) per ignorare l'avviso.