LES 1 | WEBONTWERP | INHOUD: INTRODUCTIE IN HTML

websites, interactiviteit en navigatie / W3C / cross-platform and crossbrowser / HTML (Hyper Text Markup Language) / webpagina structuur / tags en principes / hyperlinks (tekst en afbeeldingen)

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTEN 1. Verzin een opdracht voor een website. Bij het krijgen van een opdracht kan een ontwerper niet meteen beginnen met bouwen. De ontwerper zal eerst een paar stappen moeten ondernemen. Eerst zal hij of zij met de opdrachtgever moeten communiceren wat de wensen zijn, daarna kun je het traject doorlopen. Natuurlijk kun je als ontwerper alvast schetsen en ideeën vastleggen. / 3. Definieer je doelgroep. Het maken van een doelgroepanalyse is een hulpmiddel om inzicht te krijgen in de wensen en behoeften van de doelgroep. (doelgroepanalyse 1 en 2) / 4. Maak een moodboard. Wat is nou precies een moodboard? Een moodboard is een verzameling van afbeeldingen en materialen die een totaal beeld geven van de website of de doelgroep die de website wil aanspreken. Het is handig om een moodboard te maken, want dan kun je er later tijdens het ontwerpen op terugvallen.

DOWNLOADShtml.pdf

materiaal voor les 1

doelgroepanalyse 1

doelgroepanalyse 2

NUTTIGE LINKS

handleiding in HTML
web standaarden
oefenen? 

LES 2 | WEBONTWERP | INHOUD: INTRODUCTIE IN DRAMWEAVER

tags en principes / hyperlinks (absoluut/relatief) / introductie Dreamweaver  / WYSIWYG / consistentie / storyboard / rootfolder structuur

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTENMaak een storyboard en neem deze mee naar les 3.

Wat is een storyboard? Een goed uitgevoerde website storyboard bestaat uit drie delen:

BELANGRIJK Neem je materiaal altijd mee naar de les. Tijdens de les wordt er namelijk aan opdrachten gewerkt zodat je thuis verder aan de slag kunt.

DOWNLOADS

FTP manual

materiaal voor les 2

NUTTIGE LINKS

Jeroen Disch

(over internet, ontwerpers, oogsnoep en veel meer)

dreamweaver support

CBT dreamweaver lessen

drempelsvrij

(over gebruiksvriendelijkheid en meer)

w3schools over HTML

informatie over W3C

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTENOefenen maar.... en maak een begin met het webklaar maken van materiaal voor je website.

DOWNLOADS

materiaal voor les 4

NUTTIGE LINKS

kuler.adobe.com

(opzoek naar kleurencombinaties....) 

image-resolution (uitleg in het engels over resolutie en image size)

LES 5 | WEBONTWERP | INHOUD: PHOTOSHOP slicing techniek / tables

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTENMet behulp van de video tutorial (nuttige links) kun je thuis de slicing techniek oefenen.

DOWNLOADS

materiaal voor les 5

NUTTIGE LINKS

W3.org over tables

slicing video tutorial

(video in het engels over de slicing techniek)

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTENOpdracht folder les 6: Gebruik CSS om een stijl te geven aan de proeftekst.

DOWNLOADS

materiaal voor les 6

NUTTIGE LINKS

welke lettertypes kun je gebruiken in websites

CSS handleiding

uitleg over CSS

CSS voorbeelden

AANVULLINGVoordelen van CSS?

1. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle <h3> tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft.

2. CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is.

3. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden.

4. CSS code is browser-vriendelijk. Het wordt ondersteund door browsers Internet Explorer 3 en hoger en Netscape 4 (gedeeltelijk) en hoger. Lagere browsers negeren CSS waardoor het daar niet voor problemen zorgt.

bron:

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTEN

Opdracht folder les 7: Verzin een onderwerp. Voeg beeld en tekst toe. Verander de bestaande CSS en geef een eigen stijl aan de pagina's. Link alle pagina's aan elkaar.

DOWNLOADS

materiaal voor les 7

scannen.pdf

NUTTIGE LINKS

CSS eigenschappen

CLASS of ID

pseudo-classes

www.feng-gui.com(maak zelf een headmap van je ontwerp. Headmaps geven onderdelen aan die sterk de aandacht trekken)

sensorymetrics.com

AANVULLING

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTEN

Bouwen maar.... bouw verder aan je website. In de laatste les (over twee weken)  is er een mogelijkheid om je project te tonen aan de groep.

DOWNLOADS

NUTTIGE LINKS

DIV en positie

AANVULLING 1

Naam layer ID: Naam van de layer. Belangrijk omdat je er later naar kunt gaan verwijzen.

L (verticale afstand): De afstand van de linkerbovenhoek van de layer tot aan de bovenrand van de pagina.
T (horizontale afstand): De afstand van de linkerbovenhoek van de layer tot aan de zijrand van de pagina.
W (breedte): De breedte van de layer.
H (hoogte): De hoogte van de layer.
Z-Index: De volgorde waarin de layers op elkaar liggen. Hoe lager het cijfer, hoe dieper de layer in de pagina ligt. Layers met een hogere waarde voor de z-index liggen over layers met een lagere waarde.

BG Image: Achtergrond plaatje.
BG Color: Achtergrondkleur.
Clipping: Hiermee kun je een gebied binnen de layer aangeven dat zichtbaar moet zijn. L (left), T (top), R (Right) en B (Bottom) worden gebruikt om de coördinaten aan te geven en de grote van het zichtbare vierkant.
Overflow: Hiermee geef je aan wat er moet gebeuren als de inhoud van de layer groter is als het opgegeven gebied.
Visible: geeft aan dat de layer zo groot moet worden als de inhoud, zodat alles zichtbaar is.
Hidden: zegt dat het te grote gedeelte onzichtbaar moet zijn.
Scroll: geeft aan dat er scrollbalken moeten komen om naar de inhoud te scrollen.
Auto: geeft aan dat er pas scrollbalken moeten komen als de inhoud buiten het aangegeven gebied valt.
VIS: Hiermee geef je aan of de layer zichtbaar is in de browser. Je kunt de layer later weer zichtbaar maken met behaviours. Zo kun je verassende effecten creëren.
Inherit: geeft aan dat de layer de zichtbaarheid overerft van de moederlayer (waarin hij zich bevindt).
Visible: geeft aan dat hij zichtbaar is.
Invisible: geeft aan dat hij onzichtbaar is.
Default: is de standaardwaarde zichtbaar. 

AANVULLING 2

Eén van de moeilijke dingen in CSS is het volledig centreren van een DIV. Om te kunnen beginnen moeten we een DIV absoluut positioneren. Zo kunnen we de DIV plaatsen waar we willen met behulp van coördinaten. Daarna geven we de DIV een hoogte/breedte en tenslotte ook zijn positie.

#container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:#FFFF00;

}

Als je dit toepast zie je dat de DIV niet echt in het midden staat. Nu staat de DIV 50% weg van de bovenkant en 50% weg van de linker zijde. Als je goed kijkt kun je ook zien dat de linker bovenhoek van de DIV in het midden staat van de pagina. Wat wij willen is dat de DIV in het midden staat, en niet die hoek. Daarom gaan we de DIV met de helft van zijn lengte naar boven trekken, en met de helft van zijn breedte naar links. Zo dus.

#container {
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
background-color:#FFFF00;
margin-left:-250px;
margin-top:-150px;
}

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTEN

Bouwen maar.... bouw verder aan je website. In de laatste les is er een mogelijkheid om je project te tonen aan de groep.

DOWNLOADS

NUTTIGE LINKS

floating?

DIV layouts

multimedia embedden

embedding media uitgelegd door Quicktime zelf

javascripts nodig?

AANVULLINGEmbedding Quicktime files and the parameters:

controller - sets whether the quicktime controls are shown or not :  true / false
autostart -  sets to auto play your movie : true / false
loop - sets to continuously loop your movie : true / false

MATERIAAL pen / papier / computer / usb stick

LEERPUNTEN

In dit blok van tien lessen worden de basisprincipes van HTML uitgelegd en bouw je een website met het progamma Dreamweaver. Belangrijke onderwerpen daarbij zijn stappen in het ontwerpproces, webrichtlijnen en gebruiksvriendelijkheid. We gaan aan de slag met hyperlinks, CSS, tables en divisions. Termen die misschien nu niet zoveel zeggen maar gaande weg duidelijk worden. Je werkt tijdens de lessen aan diverse opdrachten. Door je ontwerpproces regelmatig te tonen aan de groep en de docent krijg je inzicht in hoe je te werk gaat en wat je sterke en zwakke punten zijn.

OPDRACHTEN

Geen opdracht voor deze les.

BELANGRIJK Geen nieuwe technieken. Tijdens de laatste les krijg je de mogelijkheid om vragen te stellen. Meer weten over: rollover, tables, div, embedden, javascript?

DOWNLOADS

NUTTIGE LINKS