Erstellung von Webseiten – HTML-Design mit StyleVision

Das rasante Tempo des heutigen Geschäftsumfelds bedeutet, dass Informationen – zusammen mit dem Format, in dem sie benötigt werden – sich häufig ändern. Obwohl einige Webseiten Inhalte enthalten, die sich nicht oft ändern (z. B. Seiten mit Informationen über das Unternehmen und Wegbeschreibungen), werden die meisten Unternehmenswebseiten heutzutage kontinuierlich mit neuen Daten aktualisiert. Aus diesem Grund entscheiden sich viele Organisationen dafür, Web-Inhalte in XML zu speichern. Dies ermöglicht es Organisationen, Inhalte auf sehr effiziente Weise zu erstellen, da die Informationen in der XML-Datei für verschiedene Zwecke und in verschiedenen Ausgabemedien verwendet werden können – das mit der XML-Datei verbundene XML-Schema beschreibt das Inhaltsmodell. StyleVision ist ein leistungsstarker Stylesheet- und Berichtsentwerfer, der Ihnen helfen kann, XML optimal zu nutzen. Mit StyleVision können Sie Webseiten mit anspruchsvoller Formatierung in einem fensterbasierten Designbereich erstellen, der auf Vorlagen basiert und Drag-and-Drop-Funktionen unterstützt. StyleVision erstellt automatisch XSLT-Stylesheets, sodass Sie Ihr Design in eine neue oder bestehende Website integrieren können – Sie können sogar ASPX-Webanwendungen direkt über das Menü "Datei" erstellen.

In diesem Beitrag werden wir eine Webseite gestalten, die einige der HTML-Formatierungsfunktionen von StyleVision demonstriert. Obwohl die integrierten Formatierungsfunktionen von StyleVision es Ihnen ermöglichen, mit einfachen Drag-and-Drop-Techniken anspruchsvolle Designs zu erstellen, werden wir für dieses Beispiel Folgendes verwenden: CSS3um eine Webseite zu erstellen, die keine Neugestaltung benötigt, wenn sich der Inhalt ändert. Dabei werden Bilder und andere gängige Designelemente verwendet.

Unser ursprüngliches StyleVision-Design war denkbar einfach gehalten.

Wie Sie im Fenster "Schema-Baum" unten sehen können, wurde das XML-Schema so gestaltet, dass das XML im Buchformat veröffentlicht werden kann und eine Übersicht, Kapitelüberschriften, Unterkapitelüberschriften und Inhalte enthält. Wir haben einfach die Elemente, die diesen Abschnitten entsprechen, in das Designfenster gezogen.

Wie Sie unten sehen können, wird der XML-Inhalt korrekt dargestellt – und wir mussten keine XSLT- oder HTML-Code manuell schreiben, um dies zu erreichen. Allerdings benötigt er noch eine stilistische Überarbeitung, bevor wir ihn als Webseite veröffentlichen können.

Obwohl fast alle Designelemente im StyleVision-Interface in den Bereichen "Stile" und "Eigenschaften" formatiert werden können, verwenden wir in diesem Fall eine CSS-Datei, um die Formatierung vorzunehmen. Auf diese Weise können wir, falls wir die Formatierung ändern möchten, einfach auf eine neue CSS-Datei im XSLT-Code verweisen, anstatt Änderungen direkt im Design vorzunehmen.

Wir werden XMLSpy verwenden, den XML-Editor von Altova, der integrierte Funktionen zur Bearbeitung und Erstellung von CSS2 und CSS3 bietet, um unsere CSS-Dateien zu erstellen.

Der Screenshot unten zeigt einen Ausschnitt der CSS-Datei, die wir in XMLSpy erstellt haben, und enthält die Eigenschaften für die Überschriften h1, h2 und h3. Wir werden diese Elemente hier in der CSS-Datei definieren. Anschließend werden wir sie in StyleVision den entsprechenden Elementen aus unserer XML-Datei zuordnen.

Bitte beachten Sie, dass wir die CSS3-Eigenschaften "box-shadow" für Überschriften der Ebene 1 (h1) und "box-sizing" für Überschriften der Ebene 3 (h3) verwendet haben – sowohl XMLSpy als auch StyleVision unterstützen HTML5 und CSS3.

Sobald wir unsere CSS-Datei erstellt haben, kehren wir zu StyleVision zurück und weisen sie dem von uns erstellten Design zu. Um einer StyleVision-Vorlage eine CSS-Datei zuzuweisen, klicken wir einfach auf den Link "Neue CSS-Datei hinzufügen" im Bereich "Designübersicht" und navigieren zur gewünschten Datei.

Bitte beachten Sie, dass ein StyleVision-Design mehrere CSS-Dateien unterstützen kann. Wir haben kürzlich in unserem Blog darüber geschrieben, wie man CSS-Dateien dynamisch einem StyleVision-Design zuweisen kann. Jetzt können wir beginnen, die Selektoren, die wir in unserer CSS-Datei erstellt haben, den Elementen in unserem Design zuzuweisen. Wir beginnen mit der Überschrift des Kapitels. Wir markieren den Platzhalter für den Inhalt des Kapiteltitels und wählen "h1" aus dem Dropdown-Menü in der Menüleiste aus.

In unserer CSS-Datei haben wir Schriftart, Schriftgröße, Farbe und Ausrichtung für Überschriften der Ebene h1 definiert. Außerdem haben wir die CSS3-Eigenschaft "box-shadow" verwendet.

Im Folgenden sehen Sie die HTML-Darstellung unseres Designs, wobei der Selektor "h1" dem Element für die Überschrift des Kapitels zugewiesen ist.

Ebenso werden wir die Selektoren "h2" und "h3" den Elementen für die Überschrift der Übersicht und den Unterüberschriften der Kapitel zuweisen. Unser Design sieht nun wie folgt aus.

Die HTML-Ansicht wird unten angezeigt – beachten Sie, dass wir die CSS3-Eigenschaft "box-sizing" verwendet haben, um die Unterüberschriften ("Beeindruckende Ergebnisse erstellen" und "Visuelles Stylesheet-Design") zu positionieren und den Text um sie herum anzuordnen.

Abschließend fügen wir ein Bild am unteren Rand der Seite hinzu, wobei wir dafür ein Attribut namens "coverimage" aus der Quelldatei im XML-Format verwenden (siehe Abbildung unten).

Um das Bild in unser Design einzufügen, ziehen wir einfach das Element "coverimage" von der Schema-Struktur in das Designfenster und wählen "Bild erstellen". Dadurch öffnet sich das Dialogfenster "Bild einfügen". Wir wechseln zur Registerkarte "Dynamisch", klicken auf die Schaltfläche "XPath bearbeiten" und wählen das Element "coverimage" aus der Schema-Struktur aus.

Das Dialogfenster "Bild einfügen" wird unten angezeigt.

Wir haben außerdem einige Formatierungen für Bilder in unserer CSS-Datei hinzugefügt, indem wir die CSS3-Eigenschaft "border-radius" verwendet haben, die Elementen abgerundete Ecken verleiht.

Der Abschnitt unserer CSS-Datei, der die Formatierung von Bildern definiert, ist unten dargestellt – diese Ansicht stammt aus XMLSpy.

Zusätzlich zu den Formatierungstechniken, die wir hier verwendet haben, könnten wir auch erweiterte Funktionen mithilfe von JavaScript-Funktionen, bedingten Vorlagen, automatischen Berechnungen und mehr hinzufügen – aber für die Zwecke dieses Beispiels halten wir es einfach.

Unser Design ist jetzt fertig und einsatzbereit – die HTML-Ansicht ist unten dargestellt.

[Bildbeschreibung: Ein Bild, dessen Inhalt hier nicht wiedergegeben werden kann.]

Jetzt, da wir mit dem Design zufrieden sind, können wir die automatisch generierte XSLT-Stylesheet-Datei über das Menü "Datei" speichern.

Wir können ebenfalls eine ASPX-Webanwendung für dieses Design erstellen, indem wir die Option "Webdesign" direkt unterhalb von "Generierte Dateien speichern" auswählen. Wir können wählen, ob die Ausgabe im HTML-Format 4 oder HTML 5 erfolgen soll, und sogar die Kompatibilität mit Internet Explorer im Eigenschaften-Dialogfeld festlegen (der auch über das Menü "Datei" aufgerufen werden kann).

Noch besser ist, dass Änderungen an den Quelldaten automatisch in der HTML-Ausgabe widergespiegelt werden.

Wenn wir beispielsweise neue Inhalte zu unserer XML-Datei hinzufügen, werden diese im gleichen Format wie der ursprüngliche Inhalt dargestellt, und alle Gestaltungselemente erscheinen in der richtigen Beziehung zueinander – eine Neukodierung des HTML-Codes ist nicht erforderlich.

Hier haben wir einen neuen Unterkapitelüberschrift und den dazugehörigen Inhalt zur zugrunde liegenden XML-Datei hinzugefügt und ihn in HTML angezeigt.

Wie Sie sehen können, bietet StyleVision das Beste aus beiden Welten: Sie können eine einzige, universelle HTML-Vorlage mit dynamischen Formatierungsfunktionen erstellen. Mit der umfassenden Formatierungssteuerung, die StyleVision bietet, können Sie Webseiten und ASPX-Anwendungen gestalten, die Ihre Vision widerspiegeln.