Hoofdstuk 19: Compositie en opmaak van een webpagina

19.1          Inleiding
19.2          Masterpage

19.3          Cascading Style Sheet
19.4          Theme

19.1         Inleiding Masterpage

Om van een website een consistent geheel te maken wat betreft structuur en layout van de verschillende webpagina’s, bestaan binnen ASP.NET een aantal mogelijkheden:

  • Masterpages: webpagina’s krijgen de opmaak van een vooraf ingestelde template;
  • CSS: de volledige website krijgt een consistente gebruikersinterface;
  • Themes: een collectie van bestanden bepalen de lay-out van een website. Themes zijn gebaseerd op de CSS-technologie.

Deze verschillende mogelijkheden worden in dit hoofdstuk uitgebreid besproken.
Top

19.2         Masterpage

De masterpage in ASP.NET is eigenlijk een sjabloon (apart bestand) waarnaar verwezen wordt vanuit een gewone ASP.NET pagina. Op de masterpage kunnen regio’s aangeduid worden waar een andere pagina inhoud kan plaatsen. Deze regio’s worden gemarkeerd met de PlaceHolder control.

De masterpage bevat de statische, onveranderlijke elementen die op elke pagina dezelfde opmaak hebben. Om een dynamische regio vorm te geven, waarin elke webpagina van de site zijn eigen inhoud plaatst, wordt de klasse ContentPlaceHolder aangesproken.

In de browser kan nooit een masterpage opgevraagd worden, maar enkel content pages.

Maak een nieuwe website “Hoofdstuk19” en voorzie deze website van een masterpage “mpeTest.master”.

Figuur 19.1 masterpage: Toevoegen masterpage "mpeTest.master"

Figuur 19.1: Toevoegen masterpage “mpeTest.master”

De masterpage bevat standaard één ContentPlaceHolder-object.

Figuur 19.2 masterpage: ContentPlaceHolder-object

Figuur 19.2: ContentPlaceHolder-object

In het tabblad Source is onderstaande code terug te vinden.

Figuur 19.3 masterpage: Code van de masterpage

Figuur 19.3: Code van de masterpage

Een masterpage wordt gekenmerkt door @Master directive.

Geef het document de titel “Sjabloon” en de ContentPlaceHolder de naam cphTest. De code ziet er nu als volgt uit.

Figuur 19.4 masterpage: Code na aanpassingen

Figuur 19.4: Code na aanpassingen

De meeste websites zijn opgebouwd volgens dezelfde structuur, namelijk Header, Navigation, Content en Footer. In HTML5 zijn daarom een aantal elementen voorzien (<Header>, <Footer>…) die hiervoor gebruikt kunnen worden. Geef in de Source weergave de onderstaande HTML-code in:

Figuur 19.5 masterpage: Html-code

Figuur 19.5: Html-code

Het resultaat in de design weergave ziet er als volgt uit:

Figuur 19.6 masterpage: Design-weergave

Figuur 19.6: Design-weergave

Voeg de map Images toe aan de website en plaats hierin een afbeelding. Voeg deze afbeelding toe aan de Header. Voorzie ook de footer van een passende tekst. Ziehier het resultaat in de design-weergave:

Figuur 19.7 masterpage: Design-weergave van het resultaat

Figuur 19.7: Design-weergave van het resultaat

Op basis van de ontworpen masterpage wordt nu een webpagina gemaakt. Voeg de webpagina’s Default.aspx, Info.aspx en Contact.aspx toe aan de website. Vergeet niet “Select master page” aan te vinken.

Figuur 19.8 masterpage: Webpagina aanmaken op basis van masterpage

Figuur 19.8: Webpagina aanmaken op basis van masterpage

In het volgende venster kan de gewenste masterpage geselecteerd worden.

Figuur 19.9 masterpage: Masterpage selecteren

Figuur 19.9: Masterpage selecteren

Stel de paginatitels in voor de toegevoegde webpagina’s.

Figuur 19.10 masterpage: HTML-code webpagina

Figuur 19.10: HTML-code webpagina

Enkel in de ContentPlaceHolder van de afzonderlijke webpagina kan inhoud toegevoegd worden. De rest van de webpagina is statisch en moet aangepast worden in het sjabloon “mpeTest.master”.

Figuur 19.11 masterpage: Voorbeeld masterpage

Figuur 19.11: Voorbeeld masterpage

Vertrekkende vanuit de masterpage mpeTest.master in de solution explorer kan meteen een webpagina “Default.aspx” aangemaakt worden met de opmaak van de masterpage. Indien een andere naam gewenst is dan kan dit manueel gewijzigd worden.

Figuur 19.12 masterpage: Webpagina aanmaken met opmaak masterpage

Figuur 19.12: Webpagina aanmaken met opmaak masterpage

Top

19.3         Cascading Style Sheet

In een CSS-bestand wordt de opmaak voor elk HTML-element bepaald.

Om een nieuw CSS-bestand toe te voegen maak je in menu Website de selectie Add en dan Add New Item.

Figuur19.13 masterpage: Style sheet toevoegen

Figuur19.13: Style sheet toevoegen

Via de selectie Add en dan Add Existing Item kan een bestaand CSS-bestand toegevoegd worden aan de Solution Explorer. Dit CSS-bestand dient dan gekoppeld te worden aan iedere webpagina waarop de CSS van toepassing is. Het koppelen kan eenvoudigweg door de CSS vanuit de Solution Explorer op de pagina te slepen.

Meer uitleg over CSS is terug te vinden in de cursus CSS.
Top

19.4         Theme

Een theme is een verzameling van layout-bestanden die de opmaak van de volledige site bepalen. Hierbij kan CSS gebruikt worden. Daarnaast is er het skin-bestand dat speciaal ontworpen is voor de bepaling van de lay-out van servercontrols. Ten slotte kan een theme ook een verzameling afbeeldingen bevatten.

Via Add, Add ASP.NET Folder en vervolgens Theme wordt in de Solution Explorer de map App-Themes toegevoegd.

Figuur 19.14 masterpage: Theme toevoegen

Figuur 19.14: Theme toevoegen

Er wordt hierbij ook een submap aangemaakt. Alle bestanden, skins, style sheets en figuren voor dit thema worden in deze map geplaatst.

Figuur 19.15 masterpage: Submap van theme

Figuur 19.15: Submap van theme

De opmaak van besturingselementen worden in een afzonderlijk bestand bewaard, namelijk een skin-bestand. Via Add en dan Skin File in het snelmenu van de map ThemeCSharp kan een skinbestand toegevoegd worden. In dit bestand wordt de algemene opmaak bepaald voor een labelobject. De extensie van dit bestand is skin.

Figuur 19.16 masterpage: Skin File toevoegen

Figuur 19.16: Skin File toevoegen

Figuur 19.17 masterpage: Skin File aanmaken

Figuur 19.17: Skin File aanmaken

In de commentaar is bijkomende uitleg terug te vinden betreffende Default skin en Named control skin.

Figuur 19.18 masterpage: Commentaar Skin File

Figuur 19.18: Commentaar Skin File

Geef het labelobject in een webpagina de volgende opmaak:

Figuur 19.19 masterpage: Opmaak label

Figuur 19.19: Opmaak label

Om een theme op de volledige site toe te passen moet het configuratiebestand web.config de onderstaande code toegevoegd worden:

Figuur 19.20 masterpage: Code bestand web.config

Figuur 19.20: Code bestand web.config

Op de webpagina is de opmaak van het label is duidelijk zichtbaar.

Figuur 19.21 masterpage: Resultaat op webpagina

Figuur 19.21: Resultaat op webpagina

Top

Vorige          Volgende