Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

De bouw van deze site (2): structuur

Door Peter  —

Het idee voor een website komt meestal niet uit de lucht vallen, maar ik wil het hier niet hebben over alles wat voorafgaat aan de beslissing dat een website het juiste middel is om een marketing- of communicatiedoel te bereiken (en al die andere denkbare doelen). Toch zijn die doelen zelf wel belangrijk, want ze bepalen de inhoud van de website: teksten, afbeeldingen enzovoort. En die inhoud bepaalt weer met welke elementen de HTML-pagina kan worden gestructureerd. Dat staat dan nog los van de vormgeving, maar die komt er later natuurlijk ook bij.

Doelen

Om het concreet te maken kijken we naar de doelen van deze website.

Bij het Handboek HTML5 en CSS3 horen voorbeeldbestanden en die moeten ergens te downloaden zijn. Het aanbieden van downloadbare bestanden is dus een doel. Het is voor mij ook fijn als zo veel mogelijk mensen weten dat het boek bestaat, dus promotie is ook een doel. Omdat foutloze boeken niet bestaan, is het handig als er een plaats is om verbeteringen en aanvullingen te publiceren. Dat is nog een doel. Over HTML en CSS is ook regelmatig nieuws te melden en ook dat kan prima via een website. Bovendien het is leuk om tips te geven en over technieken te schrijven. Dat zijn twee doelen ineen. Tot slot is het handig als ik bereikbaar ben voor (toekomstige) lezers van boek. Een contactmogelijkheid is daarom ook een doel.

Al bij al levert dit het volgende rijtje doelen op:

  • downloads aanbieden;
  • boek promoten;
  • verbeteringen en aanvullingen publiceren;
  • nieuws en tips publiceren;
  • contactmogelijkheid aanbieden.

Sitestructuur

Vergelijk deze doelen met de pagina’s in de site en u ziet de overeenkomsten. Dat hoeft niet altijd zo te zijn, maar op deze eenvoudige site leveren de doelen eigenlijk vanzelf een logische sitestructuur op. Daarmee is de basis gelegd, maar we zijn er nog niet.

Content

De volgende stap is het schrijven en samenstellen van de inhoud van de pagina’s, de content. Voor deze site bestaat die uit tekst over het boek, pdf’en met voorbeelden uit het boek, een omslagafbeelding, een toelichting en een zipbestand met de codevoorbeelden uit het boek, tekst en afbeeldingen als er fouten worden ontdekt, een contactformulier en artikelen met nieuws en tips.

Ontwerp

De structuur en de content samen vormen de basis voor het ontwerp. Ik ben geen ontwerper en hou het daarom bij een eenvoudige opmaak en lay-out. In grote lijnen bestaat het ontwerp uit een header, een contentgebied en een footer. Op een klein scherm komen die onder elkaar te staan. Op een groot scherm komt de header aan de linkerkant met de content ernaast en de footer daaronder. Het contentgebied zelf (dat is de inhoud van .content-wrapper) zal bestaan uit drie kolommen, zodat kan worden gevarieerd met de plaatsing van artikelen en zijbalken.

Paginastructuur

Het HTML-geraamte ziet er nu zo uit:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
        <title>Voorbeeld</title>
</head>
<body>
    <header>
        ... 
    </header>
    <div class="content-wrapper">
        <aside class="side1">
            ...
        </aside>
        <main>
            ...
        </main>
        <aside class="side2">
            ...
        </aside>
    </div>
    <footer>
        ...
    </footer>
</body>
</html>

Het mooie is: standaard komen de blokken vanzelf onder elkaar te staan, daar komt geen CSS aan te pas. Op een klein scherm is dat precies de bedoeling. Omdat gebruik is gemaakt van de nieuwe HTML5-structuurelementen is de betekenis van de inhoud gelijk duidelijk: <header>, <main>, <aside> en <footer>. Bij die betekenis hoort het blokgedrag (block level) en vandaar dat de onderdelen netjes worden gestapeld. Natuurlijk is deze code niet compleet. In volgende artikelen wordt elk onderdeel verder ingevuld.

Lay-out

Nu nog de lay-out op grotere schermen, met de header naast de inhoud met de footer eronder. CSS Grid Layout is hiervoor het perfecte hulpmiddel. Daarmee worden in een handomdraai kolommen en rijen gedefinieerd. In dit voorbeeld zijn twee kolommen nodig (de header naast de .content-wrapper) en twee rijen (op de eerste rij de .content-wrapper, daaronder op de tweede rij de footer en links ernaast de header die beide rijen overspant).

Om een grid (raster) te kunnen gebruiken, moet met CSS een rastercontainer worden gemaakt met display: grid. In dit voorbeeld wordt <body> de container. De kinderen van body worden dan rasteritems. Vervolgens worden twee kolommen en twee rijen gedefinieerd. Het is belangrijk om te beseffen dat alleen header, .content-wrapper en footer rasteritems zijn. De kindelementen van .content-wrapper horen dus niet bij dit raster, maar volgen domweg hun ouder.

De rastercontainer wordt met een media query geactiveerd vanaf vensterbreedte 1024px. Er worden templates gedefinieerd voor de kolommen en de rijen. Van de rasteritems wordt hun start- en eindpositie in het raster vastgelegd. Merk op dat hier de rasterlijnen worden gebruikt: kolom/rij 1 loopt van 1 tot 2, kolom/rij 2 loopt van 2 tot 3.

@media screen and (min-width: 1024px) {
    body {
        display: grid;
        grid-template-columns: 30vw 1fr;
        grid-template-rows: 80vh 20vh;
    }
    header {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .content-wrapper {
        grid-column-start: 2;
        grid-column-end: 3
    }
    footer {
        grid-column-start: 2;
        grid-column-end: span 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
}

In het frame hieronder staat het resultaat van deze code (met als verschil dat de media query op min-width: 500px staat). Sleep de hoek rechtsonder om de indeling te zien veranderen. (Of maak het browservenster kleiner en groter.)

Er is uiteraard veel meer te vertellen over deze code en gridlay-out. Zo kan de CSS-code voor het raster korter en efficiënter en in een livepagina zullen de header en de footer meestal minder flexibele waarden voor de rijen en kolommen hebben. Bovendien doet Edge niet leuk mee met deze rasterdeclaraties. Daarvoor kan een oplossing met flexbox (of floats) worden gebruikt, maar in dit geval zou het ook kunnen met de ‘eigen’ Microsoft-implementatie van grid. En zo is er nog van alles te bespreken. Lees het boek en volg dit blog voor meer.

In het volgende artikel gaan we de header invullen met een titel een navigatiemenu.

Tags: html, css, algemeen


Reageer op dit artikel

* Vul a.u.b. alle velden in.