1) Header tekst invoegen en
stijlen
In de PSD staat
de tekt in 2 verschillende kleuren, dus we moeten de tekst verdelen over 2
elementen zodat we elk element z’n eigen tekstkleur kunnen geven. Daarnaast
moet er rechts een menu worden geplaatst, dus gaan we er voor zorgen dat het
blok waarin de tekst komt naar links “float” en een vaste breedte heeft.
Daarnaast zullen we het tekstblok ook nog goed moeten positioneren in de header
div.
1)
HTML
– Maak een div voor de tekst en geef hem een logische class naam bv header_text
2)
HTML -
Zet de “zwarte” tekst in een H1 element en de “blauwe” tekst in een ander h1
element.
(omdat dit kopteksten zijn, gebruiken we H1 om dit aan te geven in de html,
verder zal het zelfde resultaat ook met een div of p elemente kunnen)
3)
CSS –
maak een styleblok aan voor de header-text div
a.
Kijk
in de psd om te zien hoeveel pixels ruimte de div boven en links moet hebben en
positioneer het blok met margin.
b.
Kijk in
de psd hoe breed het tekstblok moet zijn en gebruik dit als width in de css.
c.
Geef
de div ook een float: left; zodat
het navigatie menu er later naast kan worden geplaatst.
4)
CSS –
maak een styleblok aan voor header_txt
h1
(hiermee worden alle h1 elementen in de header_txt div geselcteerd)
a.
Zet in
het styleblok het juiste font-family in en de juiste font-grootte en de
font-dikte.
b.
De
letterspacing is lastig over te nemen als die in photoshop niet in pixels is
ingevoerd. Door te testen met verschillende waarden en te kijken of de
tekstblok breedte net zo breed wordt als in de PSD, kun je goed in de buurt
komen. (in dit geval letter-spacing: -3px;)
2) Tekst kleuren zetten
In de PSD wordt
voor voornamelijk dezelfde tekstkleur gebruikt (zwart-grijs, kleurcode
#585858). Deze kunnen we dus als standaard kleur gebruiken door hem in het body
style-blok te zetten. Daarna kunnen we uitzonderingen maken voor stukken tekst
die een andere kleur moeten krijgen.
1)
CSS -
Zet de standaard kleur voor de tekst in het body style-blok.
2)
HTML
– Ga naar het H1 element met de tekst “WEB DESIGNER” en geef het element een class=”text_blue”.
3)
CSS –
maak een styleblok aan voor de class text_blue.
4)
CSS –
Set in dit styleblok de color: #5fbecc;
3) Header navigatie titel
1)
PSD –
Stel de positie en de breedte van het navigatie blok vast
a.
Bepaal
de ruimte/marge van boven en van rechts
b.
Bepaal
wat de breedte van het navigatie blok is
2)
HTML
- Maak een div voor de navigatie
a.
Deze
zetten we in de bg_header div na de header_text div
b.
Geef
de div een logische class (b.v. nav)
3)
CSS -
Geef de div de juiste grootte en float hem naar rechts.
a.
Maak
een style-blok voor de nav div aan
b.
Zet
hier in de margin waarden (zie punt 1.a)
c.
Zet
hier in de breedte (zie punt 1.b)
d.
Zet
hier in een float: right;
4)
Maak
een p voor de “titel” navigation en geef hem een border bottom met de juiste
kleur.
a.
HTML
– plaats een p element met de tekst “navigation” als inhoud.
b.
HTML
– geef het p element een class met een logische naam (b.v. nav_title)
c.
CSS –
maak een style blok aan voor de
nav_title
d.
CSS –
plaats hierin: border-bottom: 1px solid
#c6c6c6;
e.
CSS –
plaats hierin een hoogte van 15px
f.
CSS –
plaats hierin de juiste font-size (zie PSD)
5)
Zet
de standaard font-family. Omdat alles Arial is, kunnen we in het body
style-blok font-family: Arial;
plaatsen.
a.
Verwijder
eventueel in het style blok .header_text
h1 de font-family: Arial; omdat die daar niet meer nodig is.
4) Header navigatie links
1)
HTML
– Maak een P voor de 3 links in de nav div
a.
Maak
een p element in de nav div na de nav_title p
b.
Geef
het p element een logisch class naam (bv. nav_links)
2)
HTML
– Plaats de 3 links in het p element
a.
Voorbeeld:
<a href="/about">about</a>
3)
CSS –
Maak een style blok voor alle (a) links in het p element nav_links
a.
Tip:
eerst de class gevolgd door het element (weet je deze nog?: http://youtu.be/Q-EMDv-zbYY)
4)
CSS –
Plaats in het style blok de linktekst styles zoals aangegeven in de PSD
a.
Zet
de kleur van de tekst
b.
Zet
de lettergrote
c.
Zet
de onderstreping uit (text-decoration)
d.
Plaats
ook de volgende style regel: display: inline-block;
Hiermee kun je het a element (de link) stylen als een blok element (afmetingen, paddings etc), maar komen ze wel als tekst naast elkaar te staan.
Hiermee kun je het a element (de link) stylen als een blok element (afmetingen, paddings etc), maar komen ze wel als tekst naast elkaar te staan.
e.
Zet
de volgende padding waarden:
i. Boven en onder: 12px
ii. Links en rechts: 35px;
5)
CSS –
Maak een style blok voor alle (a) links in het p element nav_links zoals in punt 3 alleen dan met :hover erachter (zonder spatie)
Hiermee kun je de links stylen voor de status waarbij de muis op de link
staat (hovert).
6)
CSS –
plaats in dit style blok de styling zoals in de PSD bij de link work staat
opgemaakt.
a.
Zet
de tekst kleur op wit
b.
Zet
de achtergrond kleur
c.
Zet
een border-radius van 25px;
5) Navigatie links beter
positioneren
1)
Maak
een styleblok voor de nav_links p
2)
plaats
hierin een top margin van 12pixels
3)
plaats
hierin een text uitlijning gecentreerd in.
6) Eindresultaat
Het eindresultaat zal er als volgt uit moeten zien:
