- Opdracht van CSS: 40 punten
- GIMP-opdrachten: Logo voor jaarprojectsite ontwerpen
Totaal: 40 punten
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.
Met een externe stylesheet zul je aantal webpagina's een uniforme lay-out moeten geven.
a. Werkmateriaal
Ga naar je webruimte die je gekregen hebt. Log daarvoor in met je FTP-account en download de bestanden op je computer die het mapje CSS zitten.
Je kunt deze bestanden ook in actie zien op http://www.projectx2002.org/seminaries/reserve/css/ en voor je eigen webruimte is dat http://www.projectx2002.org/seminaries/jouwvoornaam/css/. Klik eens op deze bestanden om te weten hoe ze eruit zien!
b. CSS-bestand als motor
Deze hele website draait op één externe stylesheet maken die lerenstuderen.css heet. De andere HTML-bestanden gehoorzamen dit CSS-bestand omdat er tussen hun <head> </head>-tags de volgende code staat:
<LINK REL=STYLESHEET HREF="lerenstuderen.css" TYPE="text/css">
Check die code eens in de index.html die je net gedownload hebt.
c. CSS in actie
Eventjes testen nu of alles werkt. Open het bestand lerenstuderen.css met het programma Expression Web. Je ziet dat dat een leeg bestand is. CSS is geen HTML-code! Dus je moet niet <html>, <head> of <Body>-tags toevoegen. Plak nu de onderstaande code in lerenstuderen.css:
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}
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}
Opdracht: Pas de kleuren nu eens aan naar andere kleuren en bekijk het effect. Maak gebruik van hexidecimale codes (bv. color: #33ffe4).
Op deze site vind je enkele voorbeelden van zulke codes: http://www.color-hex.com/.
d. Achtergrond (10 puntne)
Probeer nu eens zelf wat zaken uit te proberen in lerenstuderen.css.
(1.) Verander eens de lettergrootte van de titels (H1 en H2).
(2.) Voeg een lay-outregel toe voor het HTMLcode-element i. Geef alles wat schuin staat zo in de tekst een bepaalde kleur en lettertype. Bekijk steeds het effect van je codes.
(3.) Voeg een grote afbeelding toe als achtergrond.
body {
background-image: url("naambestand.jpg");
background-repeat: no-repeat;
}
(4.) Voeg een afbeelding toe die heel klein is een bekijk het effect daarvan. Haal daarna de regel "background-repeat: no-repeat;" weg en bekijk het effect nu.
(5.) De kleur van je achtergrond moet nu een zachte kleur worden en rechts moet als achtergrond superhelden01.jpg herhaald in een verticale kolom verschijnen.
Op o.a. https://www.w3schools.com/css/css_background.asp vind je de werkwijze hiervoor.
e. Dropdownmenu (15 punten)
Steek de vier links van index.html in een dropdown-menu. Alle uitleg hiervoor vind je op https://www.w3schools.com/css/css_dropdowns.asp.
f. Links (10 punten)
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.
Download hyperlinksmetCSSopmaken.ppt voor de uitleg hiervoor.
g. Laatste uitdaging (5 punten)
Verander hoe de cursor wordt weergegeven. Ga naar http://www.htmlhelp.com/reference/css/properties.html om daarvoor de code te laten zien. Laat me daarna alles zien.
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.
Je kunt een logo met silhouetten maken.
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 10.11.2017