Een website met smaak

Na 8 weken HTML krijg je in het tweede leerjaar aanvullende lessen om meer interessante en intelligente websites te bouwen. Hierbij horen zoals jQuery, javascript, mediaqueries voor mobiele website en gewoon leuke effectjes die we links en rechts tegenkomen. Dit zal ongeveer tussen de herfst- en de kerstvakantie plaatsvinden maar leuke effectjes zullen we het hele jaar door zo veel als mogelijk invoegen.

Jij gaat deze week oefenen met een paar van deze effectjes:

Kijk gewoon hoe ver je komt en maak er vooral iets moois van wat je op je Behance kunt zetten.

Er zijn zeer veel mooie effectjes te vinden voor websites. Het is niet te doen om deze effectjes allemaal uit je hoofd te kunnen maken. Echter, je zult wel moeten weten dat ze bestaan en -indien mogelijk- te kunnen implementeren. Mocht dat niet lukken dan zul je in ieder geval moeten kunnen inschatten of je dit gaat laten uitbesteden of dat je de klant iets anders wilt adviseren.

One page layout (bekijk de demo)

In de map one-page-easy vind je 4 bestandjes. Een HTML, een CSS, een AJAX en een afbeelding.

4 bestandjes gedownload

Je hebt 4 bestandjes in de map staan. Een HTML, een CSS en een afbeelding (die ken je al) maar nu staat er ook een javascriptje bij.

 

Zorg dat je dit mapje kopieert naar jouw studentenmap of USB stick maar laat het NIET op de desktop staan of in de download folder! In het voorbeeld hiernaast heb ik in mijn mapje KZP01 weer een heleboel submapjes gemaakt. Ik zorg er dus voor dat ik iedere opdracht in zijn eigen mapje zet en niet alles bij elkaar in 1 mapje.

Een nette mappenstructuur.

Een nette mappenstructuur.

 

Open nu index.html in Dreamweaver. Bovenin zie je automatisch de andere gekoppelde bestanden staan zoals style.css

In Dreamweaver zie je meteen alle bestanden die gekoppeld zijn aan het bestand wat je open hebt.

In Dreamweaver zie je meteen alle bestanden die gekoppeld zijn aan het bestand wat je open hebt.

Daar staat ook ineens het bestand jquery.min.js bij! Hoe kan dat? Dit staat niet in je mapje!

In je HTML bestand is een linkje opgenomen naar een bestand wat ergens bij Google op de server staat. Dit is een bestand wat door een programmeur is aangeleverd en waar wij verder niets mee doen maar jouw website wel zal gebruiken.

Bekijk eerst eens even wat je al hebt door je HTML pagina eens te bekijken in Firefox (of een andere browser).

Preview in browser

Bekijk je HTML pagina in een browser om het ‘echte’ werk te zien.

Klik in de pagina op het linkje ‘Button 2’ en je zult zien dat je pagina automatisch naar beneden scrolt. Het menu bovenin blijft netjes op zijn plaats.

 

Onepage lay-out

One page layout

kleuren en teksten aanpassen

Nu is het leuk om de kleuren aan te passen naar je eigen smaak of zelfs achtergrond plaatjes te plaatsen! Dit doe je in je CSS bestand.

Als je het bestand opent dan zul je veel code zien met daarachter in het grijs iets uitleg.

Notitietekst

De blauwe tekst kun je aanpassen. De grijze tekst vertelt je wat je kunt doen.

Probeer eens een aantal zaken aan te passen en zie waar het in het document verandert. Vergeet niet steeds even het resultaat in een gewone browser te bekijken.

Kijk ook eens in de HTML pagina. De code <div id=”page1”> correspondeert met #page1 in het CSS bestand. Als je dan bij #page1 de achtergrondkleur aanpast, dan heeft dat dus gevolgen voor het eerste vlak met tekst (de zogenaamde pagina 1).

Een onderdeel van de HTML pagina.

Een onderdeel van de HTML pagina.

CSS

En de bijbehorende CSS. Pas hierin de kleur eens aan.

Verder kun je in het CSS de onderdelen “.page”, “.page-padding” en “.page p” aanpassen om te zien wat er gebeurt.

Een pagina bij maken

De slimmerikken hebben wellicht al door dat in de HTML pagina het stukje tussen regel 17 en 22 pagina 1 is en het stukje tussen regel 24 en 30 pagina 2 is. Het enige verschil is de id (aan het begin van regel 17 en 24). id=page1 is pagina 1 en id=page2 is pagina 2.

Kopieer de HTML code van regel 17 tot en met regel 22. Zet je cursor op regel 31 en plak de gekopieerde code. Verander id=”page1” in id=”page3” en name=”btn1” in name=”btn3”.

Een pagina er bij maken.

Maak een pagina bij. Eerst in de HTML.

Ga nu naar het CSS bestand. Kopieer daar regel 54 tot en met 56. Zet je cursor vervolgens op regel 57 en plak de gekopieerde code.

En ook de CSS er bij maken.

En ook de CSS er bij maken.

Verander #page2 in #page3.

Als je nu je website bekijkt in de browser dan zie je wel dat de pagina bij gemaakt is maar er is nog geen linkje naar toe vanuit het menu. Ga dus terug naar je HTML pagina.

Kopieer van regel 11 het stukje :: <a href=”#btn2”>Button 2</a> (inclusief die dubbele punten!) en plak het er direct achter. Zorg dat je voor </div> blijft!

Een button er bij maken.

Tot slot nog een button bij maken zodat je vanuit het menu naar de pagina kunt ‘springen’.

De button is bij gemaakt.

De button is bij gemaakt.

Verander href=”#btn2” in href=”#btn3” en verander het woord Button 2 in Button 3. En dan opslaan en testen maar!

 

 

Parallax (bekijk de demo)

Dit is momenteel een behoorlijke hype. Dit is een techniek waarbij het lijkt alsof afbeeldingen / vlakken over elkaar heen schuiven. Ik heb een simpel documentje gemaakt waarin 3 afbeeldingen over elkaar heen kunnen schuiven.

Download parallax-easy.zip. In de code staat uitleg.

Zelf de afbeeldingen maken

Let er in de eerste plaats op dat je je afbeeldingen groot genoeg maakt. Ze worden automatisch horizontaal en verticaal gedupliceerd dus voor je het weet heb je te veel afbeeldingen in beeld.

Wat verder belangrijk is, is de naam van de afbeeldingen. In het voorbeeld heten de afbeeldingen ‘large_cloud.png’, ‘balloon.png’ en ‘small_cloud.png’. Op regel 16 in het script zie je deze namen terug komen.

Noem jouw files exact hetzelfde als in het script.

Noem jouw afbeeldingen EXACT hetzelfde als de afbeeldingen in het scriptje. Dus ook met liggend streepje (underscore).

Deze namen MOETEN exact hetzelfde zijn! Dus ook eventuele hoofdletters en streepjes.

Als je de regels 28 t/m 30 en 33 bekijkt dan zie je daar de getallen uit regel 18 terug. Hierin geef je aan wat de startpositie van de afbeeldingen is. Als je deze getallen verandert in regel 18 dan moet je ze ook veranderen op een van de andere regels. Zoek even goed welke getallen bij welk plaatje horen.

Typ hier ook de namen weer exact hetzelfde.

Pas hier de getallen aan zodat je afbeelding beter in de pagina staat.

Typ hier ook de namen weer exact hetzelfde.

En hier ook.

 

background-position: 50px 600px; hoort bijvoorbeeld bij large_cloud.png. Dit zijn beide de eerste waarden in de rijtjes.

Parallax voorbeeld

Parallax voorbeeld

Succes met het maken van iets moois!