een HTML5-pagina met CSS3 maken met Dreamweaver

Eerst wordt er een idee gemaakt. In de video zie je hoe het resultaat van deze training er uitziet. Je krijgt zo inzicht wat het resultaat zal worden.
Je ziet hier de opzet voor een webpagina gemaakt in HTML5 en CSS3.
Door in Safari via het Ontwikkeltool de Stijlen uit te zetten, kun je de pagina zelfs zien zonder de stijlopmaak. Alle tekst en illustratiemateriaal blijven dan in beeld.
Door de CSS3 zijn er achtergrondafbeeldingen geplaatst, ongebruikelijke lettertypes gemaakt, verlopen gemaakt (in Firefox gedeeltelijk te zien), slagschaduw toegevoegd en hoeken afgerond. Ook hebben vlakken een transparante achtergrondkleur waardoor je het beeld in de achtergrond ziet doorschijnen.
Ook wordt er in Illustrator via een klein Artboard het logo groot en klein opgeslagen.

stap 1: de inhoud indelen (00:12:29)

Dreamweaver CS5.5 ondersteunt HTML5.
Eerst wordt de site gedefinieerd, en vervolgens geef je bij de aanmaak van de eerste pagina aan, dat het een HTML5 document betreft. De HTML-code die Dreamweaver dan maakt voldoet dan aan de HTML5 standaarden.
HTML 5 heeft extra tags waardoor de semantiek van de pagina beter wordt.
De delen van de kop worden omringd door de header-tags. (Let wel: dat zijn dus NIET de head-tags!)
In de head is het menu opgenomen: de knoppen worden daarvan omringd door nav-tags.
De pagina heeft 3 kolommen: er zijn twee stukken tekst, die omringd worden door aside-tags en het hoofdartikel door de <article>-tags. Hetzelfde voor de footer.
In HTML4 zouden dit allemaal aparte DIV-tags worden, welke een ID meekrijgen. Door deze extra tags in HTML-5 krijgt de inhoud een betere semantiek mee. Er wordt betekenis meegegeven aan de inhoud.
Voor de latere opmaak is het eenvoudiger de inhoud van de <aside> en <article> nog te voorzien van een <div>-tag met een klasse, in dit geval tekst. Ook krijgt de kop natuurlijk een h1-tag mee en wordt de tagline een <div> met de ID: tagline.
De pagina is nu praktisch klaar om vormgegeven te worden.
De gobale pagina-opbouw kan bij HTML5 ook als volgt zijn:

<html>

    <head>

        <title>...</title> 

    </head>

    <body>

        <header>...</header>

        <nav>...</nav>

        <aside>...</aside>

        <article>....</article>

        <aside>...</aside>

        <footer>...</footer>

    </body>

</html>

stap 2: inhoud in het midden (00:07:29)

Om de inhoud en de opmaak optimaal te scheiden wordt een extern stijlbestand aangemaakt.
Hierin krijgt de tag html een achtergrondkleur en worden padding en marge 0 gemaakt.
Daarin zit de <body>, die een breedte en een marge links en rechts die 'auto' is. Hierdoor staat de pagina in het midden.
Het blijkt dat de pagina niet helemaal tegen de bovenzijde staat. Dit komt door de nog aanwezige marges van de <body>, <header> en vooral <h1> tags. Deze moeten ook op 0 gezet worden.

stap 3: dubbele achtergronden (00:09:02)

Met Dreamweaver kun je via de CSS prima een afbeelding opnemen.
Door in de codeweergave te werken, kun je de CSS beperken tot 1 regel. Die regel kun je uitbreiden voor een tweede afbeelding met een eigen positie. Je moet in dezelfde regel een komma toevoegen met dezelfde eigenschap:
background: url(afb/afbeelding1.png) no-repeat 40px,
url(afb/afbeelding2.jpg) no-repeat 467px;

stap 4: afgeronde hoeken en slagschaduw (00:04:07)

CSS3 biedt als optie dat vakken afgeronde hoeken krijgen.
Je kunt zelfs aangeven welke hoeken een bepaalde ronding meekrijgen:
border-radius:0 0 20px 20px;
Ook kun je een slagschaduw instellen, waarbij je goed gebruik kunt maken van de transparantie als je de rgba kleurmodus gebruikt:
box-shadow:0 0 20px rgba(0,0,0,0.7);

stap 5: kop positioneren (00:08:37)

Je kunt eenvoudig de kop in positie brengen, door de padding aan te passen.
in dit geval werkt de marge moeilijk, omdat je daarmee ook <header> naar beneden lijkt te drukken.
Door bij de positie van de achtergrond afbeelding 2 waarden in te voeren, kun je ook die zowel horizontaal als verticaal verschuiven. De eerste waarde is de hoeveelheid naar rechts.

stap 6: webfonts gebruiken (00:07:01)

Omdat je website op allerlei computers bekeken wordt, kon je tot voor kort maar van enkele standaardfonts gebruik maken. Ze moesten immers op elke computer aanwezig zijn.
Typografie was heel beperkt, tenzij je van plaatjes gebruik maakt. Dat gaat dan weer ten koste van de semantiek.
Nu is het mogelijk fonts te importeren en zo veel meer mogelijkheden voor je typografie te krijgen.
Hier wordt op 2 manieren gebruik gemaakt van de webfonts van Google.
De tweede manier verdient eigenlijk de voorkeur: via het stijlsheet word het font geladen:
@import url(http://fonts.googleapis.com/css?family=Marck+Script);
In de stijlregel zelf komt dan: font-family: 'Marck Script', alternatieven voor dat font;

stap 7: kolommen maken (00:07:14)

De inhoud bestaat hier uit 3 elementen: 2 <aside> en 1 <article>. Als ze smaller gemaakt zijn, staan ze nog niet naast elkaar, ondanks dat er ruimte is. Om dat dan te laten gebeuren krijgt ieder van hen een float:left; mee.
Om ze uit elkaar te plaatsen krijgen ze ook een margin-left mee. Een en ander wordt duidelijker als de elementen (tijdelijk) een rand meegegeven wordt.

stap 8: padding toevoegen (00:05:55)

Als we de elementen padding geven, blijken ze breder te worden, dan hun breedte, die we ze meegegeven hebben. Dit is een eigenschap van het boxmodel. De breedte die een element inneemt, is gelijk aan de opgegeven width + de opgegeven padding en zelfs de opgegeven randdikte komt er aan beide kanten bij. Dit strookt niet helemaal met het gevoel dat wij hebben.
Dit kun je oplossen door de width kleiner te maken als de padding of randdikte toeneemt, maar het is ook heel gebruikelijk om een extra <div> in het element op te nemen. Je geeft dan de breedte aan het element en de padding aan de ingesloten <div>.
Omdat bij ons meerdere elementen dezelfde padding krijgen, maken we een class aan en daarna kun je dan in de HTML-code snel de div's toevoegen en hen die class meegeven.

stap 9: footer opmaken (00:04:19)

De <footer> krijgt marge en padding mee.
Omdat de footer een clear: float; heeft meegekregen, werkt de marge aan de bovenzijde niet. Dit wordt dan opgelost door <article> en <aside>-elementen een ondermarge te geven.

stap 10: een kleurverloop maken (00:08:40)

In CSS3 is het mogelijk om kleurverlopen te maken.
De code verschilt nogal per browser en dat levert dan veel code op.
Op http://gradients.glrzad.com/ kun je de code zelf laten genereren.
In dit voorbeeld ontstaat er nogal een flinke reeks van kleuren: de code is dan:
background-image: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.5, rgb(255,0,0)),
color-stop(0.6, rgb(255,255,0)),
color-stop(0.7, rgb(0,255,0)),
color-stop(0.8, rgb(0,255,255)),
color-stop(0.9, rgb(0,0,255)),
color-stop(0.97, rgb(102,0,255)),
color-stop(1, rgb(0,0,0))
);

In de HTML-code wordt de regel nog een keer afgebroken en er wordt in de stylesheet nog wat hoekjes afgerond met de code uit stap 4: border-radius:0 0 20px 20px;

stap 11: het menu stijlen deel 1 (00:07:26)

Het menu is een opsomming.
In het stijlen halen we het list-style-type weg en zetten we de marges en de paddings op 0, zodat er van de opsomming niets meer te zien is: list-style-type:none;
Ook kunnen we het <nav> element padding geven, zodat de knoppen uitlijnen met de overige inhoud op de pagina.
De <li>-elementen van het menu kun je een breedte geven en als het menu horizontaal is, een float:left;. Hierdoor komen ze naast elkaar.
Deze float left zorgt er wel voor dat het <nav>-element geen hoogte meer lijkt te hebben, die moeten we dus in het nav element zelf meegeven.

stap 12: het menu stijlen deel 2 (00:09:38)

Het grootste deel van de vormgeving vindt plaats in de selector nav ul li a (nav a is trouwens ook toegestaan!). Je verzorgt hier de kleur van de tekst met color, het streepje haal je weg met text-decoration:none; met display:block maakt je het mogelijk de link binnen zijn vlakje te centreren en een eenvoudige roll-over te maken. Met text-align:center; centreer je dus. Om het vakje naar voren te laten komen, geef je de rechterzijde een randje mee: border-right:rgb(255,255,255) solid 1px; Verder is het verstandig de line-height gelijk te maken aan de hoogte van het hele menu (en de ingevoerde paddings te verwijderen).
Om ook aan de rechterkant een streepje te zetten maak je een aparte selector aan: nav ul li:first-child, die je de border-left vormgeeft.
Om ook de roll-over vorm te geven hoef je alleen de vormgeving te regelen in de selector nav ul li a:hover!

stap 13: elementen draaien (00:03:59)

Je kunt een element (<div> of een andere tag met inhoud) in CSS3 ook draaien.
Tot nu toe moet je voor elke browser specifiek stijl eigenschappen invoeren. In de video doen we dat voor Webkit (Safari, Chrome, iOS) en Mozilla (Firefox) browsers.
De volledige code is:
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
Als CSS3 volledig geaccepteerd is, zal alleen de laatste regel volstaan.

stap 14: publiceren (00:01:20)

De website zal als hij af is online moeten komen.
In deze video zie je hoe dit snel via Dropbox kan.
Je mag hem natuurlijk ook onder een andere host plaatsen.

Stuur de link naar t.denblanken@ma-web.nl.

Nawoord:

HTML5 en CSS3 worden nog lang niet door alle browsers ondersteund. Met Internet Explorer (IE) wordt de ondersteuning slechts in de laatste versie van de browser gedaan en dan nog met behulp van een JavaScript. Je kunt dat doen met de volgende toevoeging in de <head>-tag:

een webpagina in HTML5

stap 0: een voorbereiding voor de site (00:06:13)