Portaldesigns

Abgeschlossen

Power Pages verwendet das Bootstrap-Front-End-Framework zum Steuern von Design und Layout der Website. Bootstrap ist ein Paket aus HTML‑ und Cascading Stylesheets (CSS)-Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Elemente, zusätzlich zu optionalen JavaScript-Erweiterungen. Eines der vielen ansprechenden Merkmale von Bootstrap besteht darin, dass es standardmäßig ein dynamisches Layout bereitstellt. Die Lösung passt Ihre Website automatisch an, damit sie auf allen Geräten – von kleinen Telefonen bis zu großen Desktops – ästhetisch ansprechend aussieht.

Designgrundlagen

Das Design bestimmt das Erscheinungsbild aller Webseiten auf Ihrer Website, um die visuelle Konsistenz sicherzustellen. Es steuert die Navigationsstruktur, das Banner, die Farben, die Schriftarten und andere visuelle Elemente einer Webseite.

Sie können die in Power Pages enthaltenen Webvorlagen mithilfe von Bootstrap-Standardkomponenten mit minimalen weiteren benutzerdefinierten Formaten implementieren. Daher können die auf diesen Vorlagen basierenden Websites die von Bootstrap bereitgestellten Anpassungsoptionen verwenden. Sie können das Design so anpassen, dass es konsistent auf die ganze Website angewendet wird.

CSS auf Webseiten

Cascading Stylesheets (CSS) ist eine Sprache, die den Stil einer Webseite festlegt, indem die Art der Anzeige ihrer HTML-Elemente beschrieben wird, einschließlich Text, Zeichensätzen, Farben, Hintergründen, Rahmen und Rändern.

Das Ändern des Stils der Seiten Ihr Website kann so einfach sein wie das Anwenden von CSS-Anweisungen auf eine Seite. Wenn Sie den Inhalt der Seite mit Visual Studio Code bearbeiten, ist CSS als separate Datei verfügbar. Der Inhalt dieser Datei wird dann in der Spalte Benutzerdefinierte CSS der Webseitenzeile gespeichert. CSS ist enthalten und Teil der Seite, und Stile werden automatisch angewendet. Wenn Sie beispielsweise die Höhe der Navigationsleiste oben auf einer Homepage vergrößern müssen, um sie an ein Logo anzupassen, können Sie einfach die CSS-Datei bearbeiten und eine benutzerdefinierte CSS-Anweisung hinzufügen.

.navbar-static-top.navbar { min-height: 100px; }

Hinweis

CSS-Anweisungen, die direkt zu einer Webseite hinzugefügt werden, gelten nur für diese Webseite.

Dieser Vorgang eignet sich für kleine Anpassungen auf einer einzelnen Seite oder wenn eine Seite ein einzigartiges Design erfordert, beispielsweise eine bestimmte Ereigniszielseite. Eine bessere und flexiblere Methode ist es jedoch, Anpassungen in einer oder mehreren CSS-Dateien aufzuzeichnen und sie auf die gesamte Website oder Teile davon anzuwenden.

Anpassungen anwenden

Power Pages bietet eine umfassende Sammlung von Designs und Tools zum Gestalten Ihrer Website. Wählen Sie aus mehreren Designs aus, die Sie auf Ihrer Website verwenden möchten, und personalisieren Sie sie mit den Gestaltungsoptionen weiter.

Der Arbeitsbereich Styling im Power Pages-Designstudio legt fest, welche CSS-Stile auf die Website angewendet werden, und ermöglicht Ihnen das universelle Implementieren von Websitedesigns. Sie können Änderungen am Branding für das Unternehmen einbinden und Änderungen in der Vorschau im rechten Bereich des App-Fensters anzeigen. Styling bietet mehrere vorgefertigte Designs, und für jedes können Sie das Farbschema, die Hintergrundfarbe, die Schriftarten, die Schaltflächendesigns und den Abschnittsabstand ändern.

Designs

Designs erstellen ein allgemeines Erscheinungsbild und Verhalten für die Website, indem sie Stile für verschiedene Textelemente, Schaltflächen, Links und Abschnittslayouts definieren. Wenn die Website weitere Anpassungen erfordert, können Sie die Funktion CSS verwalten verwenden.

Im Arbeitsbereich Styling können Sie aus den verfügbaren Designs auswählen. Nachdem Sie ein Design ausgewählt haben, können Sie einzelne Elemente weiter anpassen, um den gewünschten Stil zu erstellen.

CSS verwalten

Wählen Sie das Menü mit den Auslassungspunkten (...) aus, und klicken Sie dann im Designtitel auf die Option CSS verwalten, um auf CSS verwalten zuzugreifen.

Auf allen Power Pages-Websites sind folgende Dateien bereits auf allen Seiten enthalten: bootstrap.min.css, theme.css und portalbasictheme.css. Diese Dateien legen Stile für Ihre gesamte Website fest. Sie können weitere CSS-Dateien hochladen, indem Sie den Link Hochladen verwenden und diese dann im Visual Studio Code-Editor bearbeiten. Weitere Informationen finden Sie unter CSS-Dateien in Power Pages verwalten.

Sie müssen überlegen, welche Methode Sie für Formatänderungen für Ihre Website verwenden:

• Entwickeln Sie ein umfassendes Format für die gesamte Website und ersetzen Sie dann den Inhalt einer CSS-Datei. Dieser Prozess funktioniert gut, wenn Sie Zugriff auf gute Designer haben, die sicherstellen können, dass alle relevanten Elemente definiert sind. Dieser Ansatz führt zu einer zentral gesteuerten Formatierung und stellt die Konsistenz in der gesamten Website sicher.
• Erneutes Definieren der Elemente, die geändert werden müssen, z. B. Farben und Schriftgröße. Erstellen Sie eine CSS-Datei, die nur diese inkrementellen Anpassungen enthält, und laden Sie diese Datei hoch. Dieser Prozess funktioniert gut, wenn Ihr Zieldesign dem Design, das Teil der ausgewählten Vorlage ist, sehr ähnlich ist und nur geringfügige Formatierungsänderungen erforderlich sind. Dieser Ansatz ermöglicht inkrementelle Änderungen, die Sie rückgängig machen können.

Warnung

Wenn Sie die Dateien bootstrap.min.css oder theme.css überschreiben möchten, achten Sie darauf, eine Sicherungskopie dieser Dateien herunterzuladen, bevor Sie sie ersetzen. Wenn das Ersatz-CSS ungültig oder unvollständig ist, können Sie die Ersetzung nicht rückgängig machen. Folglich müssen Sie den Inhalt dieser Dateien wiederherstellen, wenn die Website nicht mehr funktioniert.

Lokalisierte CSS-Modifikationen

Anstatt CSS auf der gesamten Website anzuwenden, können Sie CSS als Webdateien mit der App „Portalverwaltung“ hochladen. Das CSS in der Webdatei gilt für die übergeordnete Seite der Datei und alle untergeordneten Seiten dieser Seite. Auf diese Weise können Sie vollständig angepasste Abschnitte Ihrer Site erstellen.

Wenn Sie beispielsweise verschiedene Formate auf den Bereich Nachrichten und alle Nachrichtenartikel in diesem Abschnitt anwenden möchten, wechseln Sie zu Nachrichten, erstellen eine untergeordnete Webdatei mit einer CSS-Erweiterung und laden die CSS-Datei hoch (der Name spielt keine Rolle). Anschließend wird der Stil ausschließlich auf den Bereich Nachrichten und dessen Inhalt angewendet.

Wichtig

Die Teil-URL für das Portal muss auf .css enden, damit die Website sie erkennt und auf die Webseite und ihre untergeordneten Seiten anwendet.

Bootstrap anpassen

Die Standardmethode zum Erstellen einer benutzerdefinierten Version von Bootstrap besteht in der Verwendung der offiziellen Bootstrap-Website. Aufgrund der Verbreitung von Bootstrap wurden jedoch auch viele andere Quellsites für diesen Zweck erstellt. Diese Websites bieten möglicherweise eine benutzerfreundlichere Oberfläche für die Anpassung von Bootstrap oder vordefinierte Versionen von Bootstrap, die Sie herunterladen können. Auf der offiziellen Bootstrap-Website für Anpassungen finden Sie weitere Informationen zur Anpassung von Bootstrap.

Tipp

Wählen Sie während der Anpassung von Bootstrap nur Elemente aus, die Änderungen erfordern. Wenn Sie z. B. nur die Schriften durch Ihre firmeneigenen Standardschriften ersetzen möchten, dann wählen Sie die Typografie-Komponenten von Bootstrap aus, wodurch die Wahrscheinlichkeit eines versehentlichen Umschreibens anderer CSS-Elemente verringert wird.

Nachdem Sie Bootstrap eingerichtet haben, generiert es eine oder mehrere Dateien, die Sie als Webdateien hochladen sollten. Achten Sie darauf, in den Teil-URLs nicht bootstrap.css, bootstrap.min.css, theme.css oder theme.min.css verwenden, es sei denn, Sie möchten das ursprüngliche Format vollständig ersetzen. Der Grund hierfür liegt darin, wie Power Pages mehrere CSS-Dateien verarbeitet.