Leren werken met CSS 1 en logo-opdracht

1 Evaluatie van vandaag

- Opdracht van CSS1: 15 punten

- Opdracht van CSS2: 10 punten (opdracht gedaan: 7 / met toeters en bellen: 10)

- GIMPopdrachten: 15 punten (10 punten indien technisch gedaan, de volgende 10 punten hangen af of het ook nog mooi is)

Totaal: 40 punten

 

2 Eerste lesuur: CSS

2.1 LESDOELSTELLINGEN

In deze les leren jullie werken met stylesheets. Het grote voordeel van stylesheets is dat je met één klein bestandje de opmaak voor een hele site kunt regelen. Dat wil zeggen dat als je iets in de opmaak van de hele site wilt veranderen, je dat niet meer in elke pagina apart moet doen maar enkel in de stylesheet. Bovendien heb je met CSS veel meer opmaakmogelijkheden. Zo kun je bijvoorbeeld de statusbalk van kleur laten veranderen.

 

2.2 OPDRACHT HERHALING

Ga naar https://www.codecademy.com/ en registreer je daar gratis.

Selecteer de cursus Learn HTML & CSS: Part ILearn HTML & CSS: Part I. Werk je doorheen de negen lessenreeksen. De eerste zullen snel gaan want die zijn een herhaling van wat je al gezien hebt.

 

2.3 OPDRACHT CSS 2

Met een externe stylesheet zul je aantal webpagina's een uniforme lay-out moeten geven.

a. Materiaal
Download eerste de volgende bestanden en sla die op binnen eenzelfde map. Dubbelklik daarna al eens op index.html in Windows Verkenner en volg eens alle links om te controleren om je alles wel goed gedownload hebt. Er steeds een Terug naar de homepage om de homepage terug te keren.

Te downloaden:

http://users.skynet.be/koenvancauwenberge/download/index.html

http://users.skynet.be/koenvancauwenberge/download/leerlingenbegeleiding.html

http://users.skynet.be/koenvancauwenberge/download/leesoefeningen.html

http://users.skynet.be/koenvancauwenberge/download/linkpagina.html

http://users.skynet.be/koenvancauwenberge/download/studietips.html

http://users.skynet.be/koenvancauwenberge/download/superheld01.jpg

http://users.skynet.be/koenvancauwenberge/download/superheld02.jpg

 

b. CSS invoegen

We gaan nu voor deze hele website één externe stylesheet maken die we lerenstuderen.css zullen noemen. Voeg in alle HTMLbestanden in de HEAD een stuk code toe zodat lerenstuderen.css als stylesheet gebruikt zal worden. Op de volgende webpagina kom je te weten hoe je dat kunt doen:
http://www.w3schools.com/tags/tag_link.asp. Vervang theme.css uit het voorbeeld op deze pagina wel door lerenstuderen.css.

 

c. CSS in actie

Eventjes testen nu of alles werkt. Open Kladblok en plak daarin de onderstaande code:

H1 {color: red; font-family: Arial; font-size: 20pt; font-style: italic}
H2 {color: darkblue; font-family: Arial; font-size: 16pt}
B {color: green; font-family: courier; font-size: 10pt}

Sla het bestand op als lerenstuderen.css (zeker niet als .txt) en sla het op in dezelfde map waarin de andere bestanden zitten. Bekijk nu even het effect van deze stylesheet op je HTMLbestanden.

Je ziet nu duidelijk de opmaak van CSS:
1.) Voorop zet je steeds het HTMLcode-element dat je wil lay-outen bv. H1.
2.) Spatie open en accolade open.
3.) Dan volgen de parameters en hun eigenschappen, steeds van elkaar gescheiden met :.
bv. color: green
4.) De parameters en hun eigenschappen worden van elkaar gescheiden door ;.
5.) Alles wordt afgesloten met een slotaccolade en dan kan het volgende HTMLelement gelay-out worden.
6.) Je kunt ook verschillende HTMLcode-elementen tegelijk lay-outen door ze van elkaar te scheiden met een komma.
bv.
H1, H2 {color: red}

 

d. Speeltijd

Probeer nu eens zelf wat zaken uit te proberen in lerenstuderen.css. Verander eens de kleurcodes, de lettergrootte van de titels (H1 en H2) en voeg een lay-outregel toe voor het HTMLcode-element i. Bekijk steeds direct je resultaten.

Ga naar de site http://www.quackit.com/css/properties/
en gebruik codes van die webpagina om uit te testen. Test daar minstens vijf nieuwe codes van uit.


e. Links

Tijd om nu eens te gaan spelen met de lay-out van links. Zorg er eens voor via CSS dat de links op je Leren studeren website niet onderstreept zijn, van kleur en grootte veranderen als je er met je muis overgaat. Zorg er wel voor dat de links op je index.html pagina op een andere manier veranderen dan ergens anders op je website.

Check out http://www.davesite.com/webstation/css/chap06.shtml om de antwoorden te vinden.

 

f. Background

De kleur van je achtergrond moet een zachte kleur zijn en rechts moet als achtergrond superhelden01.jpg herhaald in een verticale kolom verschijnen.

Check out http://www.davesite.com/webstation/css/chap04.shtml en Part 2.

 

g. Toeters en bellen

Probeer zo veel mogelijk toeters en bellen te gebruiken om te bewijzen wat je geleerd hebt. Experimenteer bijvoorbeeld eens met de weergave van de cursor.
Toon me dan het resultaat. Hoe meer toeters en bellen, hoe meer kans op een tien.
Zie hier nog een lijst met alle mogelijke parameters:
http://www.htmlhelp.com/reference/css/properties.html

3 Tweede lesuur: Dreamweaver deel 2 en GIMP 3

3.1 LESDOELSTELLINGEN

Je kunt een logo met silhouetten maken.

 

3.2 LOGO-OPDRACHT:

Ga naar http://www.projectx2002.org/html/silhouetten.html om te leren hoe je een logo maakt. Iedereen van jullie groep moet nu een logo voor jullie site ontwerpen. Het beste zal dan gekozen worden:
1.) Kies zelf een naam voor jullie brand. Vermeld de naam in jullie logo.
2.) Beperk je tot vier kleuren.
3.) Zorg dat je logo iets met het onderwerp van jullie site te maken heeft.
4.) Werk met silhouetten.

Stuur het resultaat door naar koenvancauwenberge AT skynet.be.


Last update 20.10.2016