Opdracht 2: Een kale XHTML pagina vormgeven met CSS

Achtergrond

Afgelopen zomer is de website van de vakgroep FED vernieuwd. Zoals je hebt kunnen merken ziet het er nog vrij kaal uit. Niemand heeft nog de tijd gevonden het echt vorm te geven. De vakgroepwebsite bestaat grofweg uit 4 verschillende XHTML-pagina's.

Het idee voor deze opdracht is afgeleid van de website: http://www.csszengarden.com/. Deze website heeft als ondertitel: 'the beauty of CSS design' en is bedoeld om te laten zien hoeveel (moois) (verschillende dingen) je met CSS kunt bereiken. Iedereen wordt op deze website uitgedaagd een eigen vormgeving te maken op basis van dezelfde HTML en zo vormgevingsideeen en CSS technieken uit te wisselen. Ga er vooral 's kijken.

Opdracht

Bekijk de content van de FED vakgroepwebsite en bedenk hoe deze er uit zou kunnen of volgens jou zou moeten zien. De vormgeving moet bijdragen aan:

de overzichtelijkheid: Studenten moeten in een oogopslag de informatie kunnen vinden die ze nodig hebben
een goede uitstraling voor het vak FED: 'Met FED kun je je ideeen gaan realiseren, en daar is niets saais aan'

Maak schetsen van je ontwerp en werk deze uit in CSS.

Werkwijze

Bekijk de opbouw van de XHTML in de verschillende bestanden.
Download alle bestanden en maak voor je zelf een ontwikkelomgeving waarbij de bestanden in dezelfde mappenstructuur staan als op de server.
Maak schetsen
onderzoek wat voor CSS je nodig hebt om jouw ideeen te kunnen realiseren
schrijf de CSS

Tip

Alle XHTML bestanden <link>en in de <head> naar hetzelfde basic.css bestand. Om je CSS code overzichtelijk te houden kun je wel vanuit deze basic.css verschillende css bestanden includen. bijvoorbeeld:

typography.css: voor alles wat met tekst en fonts te maken heeft

color.css: voor alles wat met kleur en achtergronden en afbeeldingen te maken heeft

layout.css: voor alles wat met positionering te maken heeft

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Lever niet alleen je CSS bestand(en) in, maar schrijf ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk, zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
Hoeveel tijd je hieraan gespendeerd hebt,
Hoeveel tijd je hebt besteed aan het maken van de opdracht,
Hoe je de opdracht hebt aangepakt
Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar1/herfst/fed/opdracht2/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument bij voorkeur in XHTML en link daarin naar je werk.

Houd rekening met de deadline voor deze opdracht: zondagavond 19 oktober om 24:00. Zie voor meer informatie de modulewijzer

Beoordelingscriteria

Je bent begonnen met ontwerpschetsen om te bepalen hoe je de content er uit zou moeten zien.
Je hebt verschillende mogelijkheden van CSS onderzocht en gebruikt de opties die het best passen in jouw ontwerp
Je gebruikt verschillende text/font en color/background properties
Je maakt gebruik van het principe van overerving (inheritance) om alleen de algemene vormgeving en de uitzonderingen daarop te hoeven definieren
Je gebruikt descendant selectors, classes en pseudo classes om een zelfde element in verschillende context verschillend vorm te geven
Je hebt een horizontaal hoofdmenu (en een vertikaal submenu), waarbij de links er uit zien als (vormgegeven) buttons
Je hebt XHTML elementen op verschillende manieren ten opzichte van elkaar gepositioneerd
Je begrijpt de CSS die je schrijft. Je neemt CSS nooit klakkeloos over. Je voorziet je CSS code uitgebreid van commentaar om de werking ervan te duiden.

Het is de bedoeling dat de beste uitwerkingen gebruikt gaan worden op de vakgroepwebsite - bijvoorbeeld door regelmatig werk van een andere student te laten zien. Succes.