Übung – Seiten bearbeiten

Der Zweck dieses praktischen Labors besteht darin, eine Webseite zu erstellen und Quellcode mithilfe des Power Pages-Entwurfsstudios zu bearbeiten.

Am Ende dieser Übungen können Sie:

• Öffnen Sie das Power Pages-Designstudio, um Ihr Portal zu bearbeiten.
• Erstellen Sie eine neue Seite, indem Sie eine Standardvorlage verwenden.
• Zeigen Sie den Quellcode der Seite an.
• Führen Sie benutzerdefinierten HTML-Code direkt hinzu.

Für diese Übung benötigen Sie die folgenden Elemente:

• Eine bereitgestellte Power Pages-Website in Ihrer Umgebung. Wenn Sie über keine Power Pages-Website verfügen, folgen Sie den Anweisungen zum Erstellen und Verwalten von Power Pages-Websites , um eine Website zu erstellen.

Szenario

Um die Websiteerfahrung für Besucher zu verbessern, müssen Sie manchmal benutzerdefinierte HTML-Inhalte zu einer Seite hinzufügen. In dieser Übung fügen Sie HTML-Code hinzu, der eine ausblendbare Benachrichtigung erstellt. Der Code enthält auch ein kleines Fragment in liquider Sprache , das eine dynamische Begrüßung für den Besucher erstellt.

Wesentliche Schritte

1. Öffnen Sie Ihr Portal im Power Pages-Designstudio.
2. Eine neue Zielwebseite erstellen
3. Bearbeiten Sie die Seite und fügen Sie einen Abstandshalter sowie einen Inhaltsplatzhalter und dann HTML-Code hinzu.
4. Speichern Sie die Seite und durchsuchen Sie die Website, um die Ergebnisse anzuzeigen.

Detaillierte Schritte

Starten des Power Pages-Entwurfsstudios

1. Melden Sie sich bei Power Pages an.

2. Wählen Sie mithilfe der Umgebungsauswahl oben rechts eine Zielumgebung aus.

3. Wählen Sie Ihre Website und dann "Bearbeiten" aus, um das Designstudio zu starten.

4. Stellen Sie sicher, dass der Arbeitsbereich Seiten ausgewählt ist.

   

Eine Webseite erstellen

1. Wählen Sie + Seite aus.
2. Geben Sie einen Seitennamen ein.
3. Wählen Sie das Standardlayout "Zielseite" und dann "Hinzufügen" aus.

Seite bearbeiten

1. Wählen Sie die erste Schaltfläche auf der Seite aus. Drücken Sie das Pluszeichen (+), und wählen Sie dann das Leerzeichen aus. Mit diesem Befehl wird vor dem benutzerdefinierten Inhalt ein kleiner Platz hinzugefügt.

2. Wählen Sie den Abstandshalter aus, drücken Sie auf das Pluszeichen (+), und wählen Sie dann das Textelement aus. Mit diesem Befehl wird ein Platzhalter für ihre benutzerdefinierten Inhalte hinzugefügt.

3. Die Seite sollte wie folgt aussehen:

   

4. Drücken Sie Code bearbeiten, um die Seite in Visual Studio Code im Web-Editor zu öffnen.

5. Wenn Sie dazu aufgefordert werden, wählen Sie "Visual Studio Code öffnen" aus:

6. Diese Auswahl öffnet ein neues Fenster oder eine Registerkarte mit Visual Studio Code für das Web. Suchen Sie das Textelement, das Sie zuvor erstellt haben, mit den Wörtern Enter text:

7. Kopieren Sie den folgenden Code, und fügen Sie ihn in die Seitenquelle ein, und ersetzen Sie den <p>Enter text</p> Inhalt:

   <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. Ihre Inhalte sollten nun wie folgt aussehen:

9. Drücken Sie STRG-S (⌘-S auf macOS), um die Datei zu speichern.

10. Wechseln Sie zum Designstudio-Fenster. Drücken Sie die Schaltfläche " Synchronisieren ", um die Editoren zu synchronisieren und den aktualisierten Inhalt auf der Canvas anzuzeigen:

11. Die Änderungen werden auf der Entwurfsstudio-Canvas angezeigt. Drücken Sie in der oberen rechten Ecke die Schaltfläche "Vorschau ", und wählen Sie dann "Desktop" aus.

12. Ihre benutzerdefinierte Seite mit einer ausblendbaren Benachrichtigung wird geöffnet.

13. Überprüfen Sie, ob die Begrüßung den aktuellen Monat umfasst.

14. Klicken Sie auf das Kreuzsymbol (x), um die Warnung zu schließen.