BASIS CSS

Workshop week 4

In deze workshop gaan we met CSS een HTML pagina op drie verschillende manieren opmaken, Hierbij richten we ons in het bijzonder op typografie en kleur.

Voor deze workshop kan je natuurlijk weer gebruik maken van de lesbrief.

Gebruik in eerste instantie de HTML ‘tag’ namen om stijlen toe te kennen
<p> </p> ( p { background: lime;} )
Gebruik classes als uitzondering op de regel!
<p class=”geel”> </p> ( .geel { background: yellow;} )
Maak nuttig gebruik van overerving

Opdracht

Carl Cox en Michel de Hey treden op in Rotterdam. Aan jou de taak een opvallende online flyer te maken aan de hand van een aangeleverd HTML bestand. Je moet hiervoor drie verschillende versies opleveren.
De HTML mag alleen aangepast worden als het gaat om structuur en toevoeging van de style defenities en class attributes. Alle opmaak en vormgeving moet middels CSS worden toegevoegd, zodat opmaak en structuur strikt gescheiden worden.

Het HTML bestand met de content: Hey.html

De beschikbare tijd zal als volgt worden ingedeeld:

±10min – Maak drie visuele ontwerpen (op papier of computer)
±30min – Maak de CSS voor het eerste ontwerp
±10min – Maak de CSS voor het tweede ontwerp
±10min – Maak de CSS voor het derde ontwerp
±20min – Werk bespreken

1. Ontwerpen

Voor dat je kunt beginnen met het toevoegen van style definities is het van belang dat je weet welke elementen je wilt aanpassen. Om hier achter te komen is het nodig dat je een ontwerp maakt.
Bedenk dat je bij je ontwerp gebruik kunt maken van typografische wijzigingen zoals bv; lettertype, lettergrote, letterdikte, letterstijl, woord spaties, letter spaties, regel afstand, letterkleur, achtergrondkleur om maar eens wat te noemen.
Maak drie versies!

Zie deze CSS Font and Text wizard http://www.somacon.com/p334.php

2.3.4 Maak de CSS

Probeer in eerste instantie zoveel mogelijk op te lossen met het koppelen van stijl definities aan de basis html tags, uitgaande van 1 van de 3 ontwerpen. Als je Dreamweaver hebt of een andere editor met CSS ondersteunig, zal dit zeker helpen bij het vinden van de juiste manier van notatie. Maak ook gebruik van het internet en je boeken, om helder te krijgen welke notatie gewenst is.

Maak niet voor iedere stijl een nieuwe class aan, maar gebruik deze als uitzondering op de basis stijl definities!

5. Werk bespreken

Om het werk klassikaal te kunnen bespreken moet het op de server staan.
http://student.cmd.hro.nl/0123456/jaar1/herfst/mme/workshop4/...
Upload alle mappen en documenten die van belang zijn en test online of alles werkt!