CMD 2 | Herfst 08 | CCS en HTML

Leerdoelen

Opdracht

Wanneer je in een ontwerpstudio aan het werk bent als ontwerper, is het tegenwoordig niet meer dan normaal dat je ook de css en de html voor de pagina maakt. Vaak wordt een internetpagina in firefox, photoshop of illustrator ontworpen. Het is een beetje afhankelijk van welk programma de ontwerper het prettigst vind werken. Hieronder drie ontwerpen van drie verschillende ontwerpers. Waar je hieronder ziet zijn tumbnails, met een klik kom je bij het grote origineel. De komende periode heb je de tijd een ontwerp naar keuze te realiseren. De opdracht krijg je al aan het einde van deze periode, zodat je de tijd hebt om hier mee bezig te zijn. De bedoeling is dat de uiteindelijke website zoveel mogelijk lijkt op het orgineel. De website moet werken in firefox en in internetexplorer 6.0.

1. Nieuws-site

Deze website bestaat uit:

  • menu
  • banner met titel en afbeelding
  • Daarna volgt de content met 3 kolomen.
  • Links korte nieuwsberichten + afbeelding en een tekstlink naar meer informatie. Deze colom bevat subtitels.
  • Midden een uitgebreid nieuwsbericht , grote foto en de tekst in twee kolomen. Deze colom bevat hoofdtitels. Denk aan onderschrift foto.
  • Links een menu naar de belangrijkste catagorieen op de website, koppen en twee afbeeldingen. Deze colom bevat subtitels.

2. Portfolio / Blog

Deze website bestaat uit:

  • top met titel een soort sierbanner
  • Daaronder drie collomen.
  • De linker kolom bevat een afbeelding en twee tekstblokken. De midden colom bevat 3 keer een nieuws bericht. De rechter colom bevat fotos met links.

3. Community - site

Deze website bestaat uit:

  • top en een inlogevenste
  • Hieronder een menubalk. De menuitems zijn geen afbeeldingen maar tekstlinks.
  • Hieronde een banner met logo
  • Hieronder bevinden zich 3 collomen.
  • Kolom 1 bevat een menu en de koppen zijn gemaakt met CSS, hieronder een winkelmandje
  • Kolom 2 bevat een afbeelding en tekst. Daaronder is ruimte voor vier berichten met een foto bij elk bericht. Elke bericht heeft zijn eigen kader met een grijslijntje.
  • Kolom 3: Bevat twee informatieve blokken en een contact formulier.

4. Zakelijk - site

Deze website bestaat uit:

  • topbanner met logo
  • Illustratie aan de zijkant
  • Informatie over de pagina. Met afbeedingen in een kader.
  • Rechts is een buttonmenu dat bestaat uit afbeelddingen, maak hier een rollover voor.
  • Er zitten een paar slordigheden in het ontwerp. De vierkanten in de achtergrond lopen niet overal door, je mag er vanuit gaan dat dit een herhalend vierkant is dat continue doorloopt in de achtergrond.
  • tweede slordigheid is dat er dubbele lijnen zitten in het menu onderin. Deze lijnen horen er niet te zijn. Zelfde geldt voor het randje langs de foto.

Je hoeft van deze websites alleen de hoofdpagina te realiseren. Het is heel erg verleidelijk bij dit soort opdrachten om van elkaar te kopieren. Dit is niet de bedoeling. Het is erg belangrijk dat je hierzelf met worsteld. Alleen door dit een paar keer te doen, krijg je echt inzicht in waar je rekening mee moet houden als je een website bouwt.

Werkwijze

Tip: Maak een printje van dit ontwerp en teken met een linaal hoe je denkt dat de informatie in blokken is verdeeld. Schrijf bij elk blok de maten. Dus hoeveel pixels is de linker colom breed en hoeveel de rechter collom?

Alternatieve opdracht

Wanneer je zelf aan websites bouwt in je vrije tijd, is een dergelijke opdracht eventueel ook geschikt om te gebruiken ipv deze. Belangrijk is wel dat deze nog niet gebouwd is. Eerst moet je opbasis van het ontwerp bij je MME docent goedkeuring vragen om deze te gebruiken als vervangende opdracht. Wanneer de website te weinig complexiteit bevat, kan dit reden zijn om de opdracht niet goed te keuren.

Auteur: Roos Groenwegen
Seizoen: Herfst
Studiejaar: CMD1
Lesnummer: 01
Datum: 05-09-2005
Type les: MME