Dit gaan we doen door het maken van een staande, smalle web pagina.
We gaan ongeveer de website http://explore-the-north.nl/ na maken.
Wanneer je deze website opent en het venster smal maakt, zie je dat de website mee schaalt en ook voor kleinere schermen erg goed ontworpen is.
1. Opstarten
- Maak een kopie van de map "website_basis" die je in de vorige opdracht hebt gemaakt.
- Hernoem de kopie naar: "website_mobile"
- Vervolgens download je dit zip bestand: img.zip
- Pak het bestand uit (meestal door dubbel te klikken) en je zult een map met de naam "img" zien.
- Plaats deze "img" map in de map "website_mobile".
- Open het programma Edge Code (of Brackets) en open de map "website_mobile"
Let goed op dat je de juiste map in Edge Code hebt geopend. Als je het goed hebt gedaan, ziet de linker zijbalk in Edge Code er als volgt uit:
2. Ontdek de hoofd verdeling
Wanneer je de website van explore-the-north bekijkt in een smal venster, kun je de website van boven naar beneden in 5 hoofdblokken verdelen (het menu niet meegeteld).
Deze verdeling kun je maken door te kijken naar de inhoud en achtergronden:
- blok1) Intro (Logo en 2 kopteksten) / gekleurde achtergrond
- blok2) Nieuws (3 nieuws items) / witte achtergrond
- blok3) Opsomming van acts / gekleurde achtergrond
- blok4) Over explore the north (plaatje en tekst) / witte achtergrond
- blok5) Informatie / social media links / zwarte achtergrond
3. Maak de hoofd verdeling in html
Hoe? Het verdelen van een website in onderdelen of blokken doe je het meest met div elementen.
Waar? Dit is niet voor algemene instelling van de site, maar voor de zichtbare onderdelen van de site, dus plaats je de div elementen in het body element van het html bestand.
- Plaats 5 div elementen en geef ze een class "blok1", "blok2"... tot en met "blok5"
Je zult nog geen visuele resultaten zien, want daarvoor moeten de divs eerst inhoud krijgen.
4. Stel de algemene achtergrond in
Dit stellen we in op de body. Maak dus een stijlblok voor de body in de css.
Dit kan je doen door met de cursor op het body (open) element te staan en dan op cmd+e te drukken.
Klik op "new rule" als er nog geen stijl blok voor de body is.
Plak daarin de volgende stijl regels:
Tussen de /* */ staan aantekeningen die uitleggen wat welke stijlregel doet.background-image: url(img/totale_achtergrond.jpg); /* geef het element een achtergrond afbeelding */background-attachment: fixed; /* achtergrond blijft altijd staan ookal wordt er gescrolled */background-size: cover; /* maak de afbeelding zo groot als het venster*/font-family: 'TrendSansOne', sans-serif; /* lettertype instellen */line-height: 1.25; /* zet de regel hoogte op 1/4 groter dan de letter grootte */
Als het goed is, heb je nu een achtergrond afbeelding die mee groeit met de maat van het venster.
5. Blok1 - Intro blok
Het intro blok bestaat uit een logo, een titel (korte uitleg) en een iets kleiner titel (datum).
Plaats in de div met class="blok1" de volgende elementen:
- een afbeelding met het het logo bestand: "img/logo.svg"
- een h1 element met de class: "kop1"
en plaats in dit h1 element de volgende tekst: "Festival voor muziek en verhalen op onvermoede plekken"
- Plaats nog een h1 element maar dan met de class: "kop2"
plaats in dit h1 element de tekst: "28 en 29 November 2014 Leeuwarden"
Stijl het blok element
- Maak in de css een stijl blok aan voor de div met de class "blok1" (of gebruik de cmd+e truuk)
- Centreer het logo en de 2 kopteksten. PLaats hierin een stijlregel "text-align" en zet de waarde op "center".
- stel voor dit blok ook de binnenruimtes in (padding): zorg ervoor dat er links en rechts een ruimte van 40 pixels komt en boven en onder 30 pixels komt.
- zorg dat de tekst die binnen die div een witte kleur heeft.
Stijl de 2 koppen
- Maak in de css een stijl blok aan voor de twee h1 elementen (of gebruik de cmd+e truuk)
Zet bij de eerste h1 de lettergrootte op 24px en de letter afstand op "1.8" (let op de punt!)
Zet bij de tweede h1 de lettergrootte 20px en de letter afstand op "1.4" (let op de punt!)
- Zorg er voor dat er boven beide koppen een boven marge komt van 40 pixels
Het resultaat, moet er ongeveer als volgt uit zien:
6. Blok2 - Maak de structuur van het nieuws blok
In het nieuws blok staan 3 nieuws artikelen, we maken hier dus 3 div's voor met dezelfde class, want de structuur van elk nieuws artikel is hetzelfde
A) Maak in de div met class blok2 3 div's met als class: "artikel"
Omdat de artikelen qua structuur precies hetzelfde zijn, maken we eerst de inhoud van 1 artikel en vervolgens kopiëren we deze in de twee andere artikel div's.
Structuur van een artikel
Als we naar een nieuws artikel kijken, zien we dat deze uit de volgende blokken bestaan:
- Titel
- Afbeelding
- Tekst
- Lees meer link
B) Plaats deze elementen in de eerste artikel div en geef ze de juiste classnaam. (zie schema hieronder):
- Titel | h1 element | class "artikelkop"
- Afbeelding | img element | class "artikelfoto"
- Tekst | p element (paragraaf) | class "artikeltekst"
- Lees meer link | a element | class "artikellink"
7. Blok2 - Geef het nieuws artikel inhoud
a) Geef de elementen inhoud (knippen/plakken wat er tussen de aanhalingstekens staat):
- Titel: "Grote IJslandse belofte naar #ETN14"
- Afbeelding: "img/artikel_foto1.png"
- Tekst: "Ze werden deze week aangekondigd in de eerste ronde namen van Eurosonic: Samaris. En Eurosonic is zo ongeveer het belangrijkste showcasefestival van Europa. Maar voordat de rest van ons continent met de IJslandse band wegloopt, en dat gaat gebeuren, speelt het jonge trio op Explore the North. Dat is goed nieuws."
- Lees meer link: " > Lees meer"
b) Kopieer/plak de inhoud van het eerste artikel in de andere twee artikel div's, zodat je drie keer dezelfde artikel onder elkaar krijgt.
8. Blok2 - Stijl de nieuws artikelen
A) Geef het nieuws artikelen blok (blok2) een witte achtergrond en zorg voor een binnen ruimte, zodat de inhoud niet helemaal tot aan de randen loopt.
- Maak een stijlblok voor de div met als class "blok2".
- Plaats in dit stijlblok een stijlregel die de achtergrond wit maakt
- Plaats in dit stijlblok ook regels voor de binnen ruimte (padding), zorg dat deze links en rechts 40px is en boven en onder 20px;
B) Zorg er voor dat de artikelen onderling wat ruimte tussen elkaar krijgen.
- Maak een stijlblok voor de div met als class "artikel".
- Plaats in dit stijlblok een stijlregel die een boven marge van 30px maakt
C) Stijl de artikel koptekst en zorg voor wat ruimte tussen de koptekst en de afbeelding
- Maak een stijlblok voor de h1 met als class "artikelkop".
- Plaats in dit stijlblok een stijlregel die een onder marge van 20px maakt
- Plaats in dit stijlblok de volgende stijlregels:
D) Zorg ervoor dat alle afbeeldingen meeschalen met de grootte van het vensterfont-size: 22px; /* letter grootte */font-weight: normal; /* letter dikte */color: #eb0f65; /* letter kleur */
- Maak hiervoor een stijl blok die alle img elementen selecteerd:
img {
}
- plaats hierin de volgende stijlregels:
De hele foto moet nu altijd te zien zijn, hoe smal je het venster ook is.max-width: 100%; /* laat de afbeelding meeschalen, maar niet groter worden dan die zelf is. */height: auto; /* houd de afbeeldings verhouding, zoals die moet zijn */
E) Zorg ervoor dat er een ruimte is tussen de artikel foto en de artikel tekst
- Maak een stijlblok voor de img met als class "artikelfoto".
- Plaats in dit stijlblok een stijlregel die een onder marge van 15px maakt
F) Stijl de artikel tekst
- Maak een stijlblok voor de p (paragraaf) met als class "artikeltekst".
- Plaats in dit stijlblok een stijlregel die een onder marge van 10px maakt, zodat de link daar onder een kleine afstand krijgt t.o.v. de teskt
- Plaats in dit stijlblok ook de volgende stijlregels:
font-family: "times new roman"; /* letter type */font-size: 14px; /* letter grootte */line-height: 1.6; /* regel hoogte */
G) Stijl de artikel link
- Maak een stijlblok voor het a element met als class "artikellink".
- Plaats in dit stijlblok ook de volgende stijlregels:
H) Controleer het resultaatcolor: #eb0f65; /* tekst kleur */font-size: 14px; /* tekst grootte */text-decoration: none; /* geen onderstreping meer */
Dit moet er als volgt uit zien:
9. Blok 3 - Opsomming van acts
a) Plaats de links naar de act's
- Plak in de div met class blok3 de volgende html:
<a href="">Samaris</a>
<a href="">Thus Owls</a>
<a href="">Sekuoia</a>
<a href="">GusGus</a>
<a href="">Sleep Party People</a>
<a href="">Faust in Leeuwarden</a>
<a href="">Intergalactic Lovers</a>
<a href="">My Bubba</a>
<a href="">Wolves Dressed in Sheep</a>
b) Stijl de act/band links
- Maak een stijl blok die alle a elementen selecteerd in de div met class blok3( Hoe doe je dit? Zie: http://youtu.be/Q-EMDv-zbYY)
- Stijl hierin de links als volgt:
- zet de letter-grootte op 32px
- zorg dat de tekst gecentreerd staat
- maak de tekst kleur wit
- maak de boven marge 30 pixels
- zorg dat de links geen onderstreping hebben
- Voeg ook deze style regel toe, zodat de links onder elkaar komen te staan:
display: block; /* zorg er voor dat het element als een block element wordt weergegeven */
c) zorg er voor dat de laatste link ook een beneden marge krijt
- Maak nu een nieuw stijl blok met dezelfde selector en typ in plaats van alleen een "a":
"a:last-child"De ":last-child" toevoeging, zorgt er voor dat je alleen het laatste a element selecteert.
- Voeg hier een stijlregel aan toe voor een onder marge van 30px
Blok 4
Blok 4 lijkt erg op de artikelen:
- Ook een witte achtergrond
- dezelfde koptekst
- een (gecentreerde) afbeelding
- tekst (met dezelfde lettertype)
Probeer blok 4 nu zelf op te bouwen door te kijken hoe je dit bij de artikelen hebt gemaakt. De ruimtes (margins of paddings) tussen de verschillende elementen staan in de afbeelding. (klik op de afbeelding voor een grootte weergave)
Blok 5
Blok 5
Het laatste blok heeft een zwarte achtergrond met roze tekst. (zie afbeelding rechts)
- Maak voor blok 5 de achtergrond zwart en zorg er voor dat de inhoud gecentreerd staat.
Blok indeling
Dit blok bestaat weer uit 2 blokken:
a) blok met 2 linkjes met een tekst er in
b) blok met 2 linkjes met een afbeelding er in
- Maak in de HTML deze 2 blokken en geef ze de class: "blok5a" en "blok5b"
blok5a
- Plaats hierin de 2 linkjes met de tekst er in:
- "Algemene informatie"
- "Contact opnemen"
- zorg dat er boven, onder en tussen de links wat marge zit.
blok5b
- Plaats hierin de 2 linkjes met de afbeeldingen er in:
- "icon-facebook.png"
- "icon-twitter.png"
- zorg dat er boven, onder en tussen de links wat marge zit.
- Maak voor blok 5 de achtergrond zwart en zorg er voor dat de inhoud gecentreerd staat.
Blok indeling
Dit blok bestaat weer uit 2 blokken:
a) blok met 2 linkjes met een tekst er in
b) blok met 2 linkjes met een afbeelding er in
- Maak in de HTML deze 2 blokken en geef ze de class: "blok5a" en "blok5b"
blok5a
- Plaats hierin de 2 linkjes met de tekst er in:
- "Algemene informatie"
- "Contact opnemen"
- zorg dat er boven, onder en tussen de links wat marge zit.
blok5b
- Plaats hierin de 2 linkjes met de afbeeldingen er in:
- "icon-facebook.png"
- "icon-twitter.png"
- zorg dat er boven, onder en tussen de links wat marge zit.
