Webpagina's maken – HTML-ontwerp met StyleVision

Het snelle tempo van het huidige zakelijke klimaat betekent dat informatie – en de manier waarop deze gepresenteerd moet worden – vaak verandert. Hoewel sommige webpagina's content bevatten die zelden verandert (bijvoorbeeld pagina's over "Over ons" en routebeschrijvingen), worden de meeste bedrijfswebsites tegenwoordig voortdurend bijgewerkt met nieuwe gegevens. Om deze reden kiezen veel organisaties ervoor om webcontent op te slaan in XML. Dit stelt organisaties in staat om content op een zeer efficiënte manier te ontwikkelen, omdat de informatie in het XML-bestand voor verschillende doeleinden en in verschillende uitvoerformaten kan worden gebruikt. Het XML-schema dat bij het XML-bestand hoort, beschrijft het contentmodel. StyleVision is een krachtige stylesheet- en rapportontwerper die u kan helpen om XML optimaal te benutten. Met StyleVision kunt u webpagina's maken met geavanceerde opmaak in een ontwerpvenster dat werkt op basis van templates en waarbij u elementen kunt slepen en neerzetten. StyleVision genereert automatisch XSLT-stylesheets, zodat u uw ontwerp kunt integreren in een nieuwe of bestaande website. U kunt zelfs ASPX-webapplicaties genereren, rechtstreeks vanuit het menu Bestand.

In dit artikel ontwerpen we een webpagina die enkele van de HTML-opmaakmogelijkheden van StyleVision laat zien. Hoewel de ingebouwde opmaakmogelijkheden van StyleVision u in staat stellen om verfijnde ontwerpen te creëren via eenvoudige drag-and-drop functionaliteit, gebruiken we in dit voorbeeld CSS3, afbeeldingen en andere standaard designelementen om een webpagina te maken die niet opnieuw opgemaakt hoeft te worden wanneer de inhoud verandert.

Ons eerste StyleVision-ontwerp was uiterst eenvoudig.

Zoals u kunt zien in het venster "Schema Tree" hieronder, is het bron-XML-schema ontworpen zodat de XML-gegevens in boekvorm kunnen worden gepubliceerd. Het schema bevat een overzicht, hoofdstuktitels, subhoofdstukken en de inhoud zelf. We hebben simpelweg de elementen die overeenkomen met deze secties naar het ontwerpvenster gesleept.

Zoals u hieronder kunt zien, wordt de XML-inhoud correct weergegeven – en we hoefden geen XSLT- of HTML-code handmatig te schrijven om dit te bereiken. Echter, het heeft een opmaak nodig voordat we het als een webpagina kunnen publiceren.

Hoewel vrijwel alle designelementen kunnen worden opgemaakt in de vensters "Stijlen" en "Eigenschappen" in de StyleVision-interface, gebruiken we in dit geval een CSS-bestand om de opmaak toe te passen. Op die manier kunnen we, als we de opmaak willen wijzigen, eenvoudigweg een nieuw CSS-bestand aanwijzen in de XSLT, in plaats van wijzigingen aan te brengen in het ontwerp zelf.

We zullen XMLSpy gebruiken, de XML-editor van Altova, met geïntegreerde mogelijkheden voor het bewerken en creëren van CSS2 en CSS3, om onze CSS-bestanden te maken.

De onderstaande screenshot toont een deel van het CSS-bestand dat we hebben gemaakt in XMLSpy. Het bevat de eigenschappen voor de h1-, h2- en h3-koppen. We definiëren deze elementen hier in het CSS-bestand. Vervolgens wijzen we ze toe aan elementen uit ons XML-bestand in StyleVision.

Let op dat we de CSS3-eigenschappen box-shadow in de h1-tag en box-sizing in de h3-tag hebben toegevoegd. Zowel XMLSpy als StyleVision ondersteunen HTML5 en CSS3.

Zodra we ons CSS-bestand hebben aangemaakt, keren we terug naar StyleVision en wijzen we het toe aan het ontwerp dat we hebben gemaakt. Om een CSS-bestand toe te wijzen aan een StyleVision-ontwerp, klikken we eenvoudigweg op de link "Nieuw CSS-bestand toevoegen" in het overzicht van het ontwerp en navigeren we naar het bestand.

Let op dat een StyleVision-ontwerp meerdere CSS-bestanden kan ondersteunen. We hebben onlangs een blogpost gepubliceerd over hoe u CSS-bestanden dynamisch kunt toewijzen aan een StyleVision-ontwerp. Nu kunnen we de selectoren die we in ons CSS-bestand hebben gemaakt, toewijzen aan de elementen in ons ontwerp. We beginnen met de titel van het hoofdstuk. We selecteren de placeholder voor de inhoud van het hoofdstuk en kiezen vervolgens "h1" uit het dropdownmenu in de menubalk.

In ons CSS-bestand hebben we het lettertype, de lettergrootte, de kleur en de uitlijning voor de h1-koptekst gedefinieerd. We hebben ook de CSS3-eigenschap "box-shadow" gebruikt.

Hieronder ziet u de HTML-weergave van ons ontwerp, waarbij de selector "h1" is toegewezen aan het element dat de hoofdstukkoppen bevat.

Evenzo zullen we de selectoren "h2" en "h3" toewijzen aan de elementen voor de overzichtstitel en de hoofdstukonderschriften. Ons ontwerp ziet er nu als volgt uit.

De HTML-weergave verschijnt hieronder. Let op dat we de CSS3-eigenschap "box-sizing" hebben gebruikt om de subkoppen (Creëer opvallende resultaten en ontwerp visuele stijlbladen) te positioneren en de tekst eromheen te laten lopen.

Tot slot voegen we een afbeelding toe aan de onderkant van de pagina, met behulp van een attribuut genaamd "coverimage" uit het bron-XML-bestand (zie afbeelding hieronder).

Om de afbeelding aan ons ontwerp toe te voegen, slepen we eenvoudig het element "coverimage" vanuit de Schema Tree naar het Ontwerpvenster en selecteren we "Afbeelding maken". Hierdoor wordt het dialoogvenster "Afbeelding invoegen" geopend. Vervolgens gaan we naar het tabblad "Dynamisch", klikken we op de knop "XPath bewerken" en selecteren we het "cover image"-element uit de Schema Tree.

Het dialoogvenster "Afbeelding invoegen" verschijnt hieronder.

We hebben ook enkele opmaakopties voor afbeeldingen toegevoegd aan ons CSS-bestand, met behulp van de CSS3-eigenschap border-radius, die afgeronde hoeken aan een element toevoegt.

Het gedeelte van ons CSS-bestand dat de opmaak van afbeeldingen definieert, is hieronder weergegeven – dit is een weergave vanuit XMLSpy.

Naast de opmaaktechnieken die we hier hebben gebruikt, kunnen we ook geavanceerde functionaliteit toevoegen met behulp van JavaScript-functies, voorwaardelijke templates, automatische berekeningen en meer – maar voor de eenvoud van dit voorbeeld houden we het simpel.

Ons ontwerp is nu klaar voor gebruik – de HTML-weergave is hieronder afgebeeld.

[Afbeelding van clip_image001[1]]

Nu we tevreden zijn met het ontwerp, kunnen we de automatisch gegenereerde XSLT-stijlvolblad opslaan via het menu Bestand.

We kunnen ook een ASPX-webapplicatie voor dit ontwerp genereren door de optie "Webontwerp" te selecteren, direct onder "Opgeslagen bestanden genereren". We kunnen kiezen om HTML 4- of HTML 5-uitvoer te genereren, en we kunnen zelfs de compatibiliteit met Internet Explorer selecteren via het dialoogvenster "Eigenschappen" (dat ook via het menu "Bestand" te openen is).

Nog beter is dat, als de brongegevens veranderen, dit automatisch wordt doorgevoerd in de HTML-output.

Als we bijvoorbeeld nieuwe inhoud aan ons XML-bestand toevoegen, dan wordt deze op dezelfde manier opgemaakt als de originele inhoud, en alle designelementen worden correct ten opzichte van elkaar weergegeven. Er is geen hercodering van de HTML nodig.

Hier hebben we een nieuwe hoofdstukonderschrift en de bijbehorende inhoud toegevoegd aan het onderliggende XML-bestand en dit in HTML weergegeven.

Zoals u kunt zien, biedt StyleVision het beste van beide werelden: u kunt een enkele, universele HTML-template maken met dynamische opmaakmogelijkheden. Met de uitgebreide opmaakcontrole die StyleVision biedt, kunt u webpagina's en ASPX-applicaties ontwerpen die uw visie weerspiegelen.