Inleiding
Aangezien ik de laatste tijd veel vragen krijg over slicen of simpele dingetjes veranderen heb ik besloten er een tut over te schrijven.
Hiervoor gebruik ik wss 5 lessen indien het in de smaak valt.
Bij weinig tot geen interesse zal ik wss stoppen.
Ik ga jullie proberen te leren slicen door het oefenen op simpele layouts, die met elke les iets moeilijker worden
Ga er niet vanuit dat je binnen een maand goed kan slicen, dat zou ik erg knap vinden.
Zelf Slice ik nu al meer dan 8 maanden, en ik loop nog steeds soms op problemen.
De layouts die ik voor deze lessen gebruik zijn uitsluitend bedoeld als oefenmateriaal.
Gebruiken voor eigen gebruik of commerciele doeleinden is verboden!
Al zou ik niet snappen als iemand dit zou willen, aangezien ze best wel lelijk zijn.
LET OP! voor het slicen gebruik ik Photoshop CS4 in het nederlands, indien je andere versies of talen hebt kan het iets afwijken!
Het begin
Om te beginnen heb je iniedergeval een programma nodig om teksten te kunnen schrijven.
Ik raad zelf notepad++ aan, indien je het gratis wilt houden.
Anders vind ik zelf Microsoft expression web, of Adobe Dreamweaver.
Van deze zijn beide demos te verkrijgen, dus dat je het 30 dagen gratis kan proberen!
Expression web: http://www.microsoft.com/Expression/pro ... rview.aspx klik op Try It
Dreamweaver: http://www.adobe.com/products/dreamweav ... moid=BPDEC en klik op Try
Les
We gaan in deze les de volgende layout slicen:
http://www.eleky.nl/tutorial/1
Om te beginnen heb je natuurlijk de layout nodig in PSD formaat.
Die is hier te downloaden:
http://www.eleky.nl/tutorial/1/1.psd
Nu kunnen we dan beginnen!
Om te beginnen zijn er een paar regels, die de meeste wel zullen kennen:
De openingspagina van een site moet index. heten, daarom is het handig om te slicen op index.html
Begin nu dus met ergens een map te maken, dit is het handigst.
Maak hierin 3 dingen: index.html , Style.css en een map images.
index.html en Style.css kan je gewoon maken via rechtermuisknop, nieuw, textbestand en dan de naam en extensie veranderen!
Nu moeten er eerst de basis dingen in je index.html komen te staan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<title>Leren Slicen | Les 1 | Made By Eleky</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
Zoals sommige nu misschien al hebben gezien gaan we gebruikmaken van een extern styleblad gebruiken, Style.css.
Dit is netter in de code, en daarom aan te bevelen.
Nu heb je alle basisdingen klaarstaan om te beginnen.
Hoe begin je nu.
Open nu eerst de PSD, index.html en Style.css met kladblok of wat je ook gebruikt.
Wat je altijd eerst moet doen is zorgen dat je de achtergrond goed hebt.
Je ziet dat dit een raar gele kleur is.
Hoe geef je een achtergrond een kleur, door in Style.css hetvolgende te zetten:
- Code: Alles selecteren
body{
background-color:#code;
}
de body betekent dus het hele gedeelte, en dat geef je een achtergrond kleur met de tag background-color.
Maar let hiermee op!
Niet alle codes worden door alle browsers onderstuent!
Dus moet je altijd controleren of de kleur een webkleur is.
Dit kan heel makkelijk met photoshop.
Klik op de Pipet, en klik op de achtergrond, het gele.
Klik nu op de kleur die je net hebt toegevoegd(links onderin)
Er verschijnt nu het kleuern scherm.
Je ziet onderin ergens de kleurcode staan (f6f662).
Er zit een checkbox in dit scherm, met daarachter: Alleen webkleuren.
Klik dit aan, en je ziet blokjes achtige dingen verschijnen bij de kleuren, dit zijn alle webkleuren.
Als je nu weer naar de kleur code kijkt zie je dat die is veranderd (ffff66), met andere woorden: de achtergrond is geen webkleur!
Hoe doe je dit nu?
Je gebruikt nu een plaatje als achtergrond.
Pak de uitsnijden tool in photoshop, en zet de breedte en hoogte op 1 px.
selecteer nu een stukje achtergrond, en snij het bij.
Nu blijft er een stukje van 1X1 px over met de juiste kleur.
Sla dit op als een .png in de map images als bg, dus bg.png .
Maar nu moet ook de code anders:
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
}
Open nu index.html met een browser, en je zult zien dat je een geele achtergrond hebt!
Maar je moet altijd nog 2 extra regels bij aangezien de browser het automatisch een margin en padding geeft.
Dit willen we niet, dus moet dit op 0:
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
}
Nu staat de achtergrond goed!
Alleen zie je, of kan je uitvinden, dat het lettertype Tahoma is, die moeten we dus ook instellen.
dit kan met: font-family:Tahoma;
Dus nu beginnen we met de rest.
Om te beginnen kijk je hoe groot de pagina is.
Dit kan op veschillende manieren, als bijv. het breedste stuk eruit snijden of iets dergelijks.
Je zal er dan achterkomen dat de layout 900px breed is (als hij prof was gemaakt, deze afmetingen verschillen een beetje).
De layout staat mooi in het midden, en je moet er dus voor zorgen dat er een ruimte komt in het midden van het scherm met een breedte van 900px
Dit doe je door een simpele div met een class!
Zet dit in Style.css:
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
font-family:Tahoma;
}
.houder{
width:900px;
margin-left:auto;
margin-right:auto;
}
Okay, wat gebeurt hier precies: om te beginnen heeft het een naam, in dit geval houder.
Omdat het om een class gaat moet er een punt voor, dus .houder
Vervolgens hadden we gezegd dat de layout 900px breed is, vandaar dus width:900px;
Ook moest het blok in het midden.
Daarvoor zijn de codes margin-left:auto; en margin-right:auto;
Als je deze 2 codes erbij hebt word het gecentreerd!
LET OP! dit werkt alleen als er een width is meegegeven, en werkt helemaal niet op images!
Nu moet dit natuurlijk nog wel op de pagina komen, dus zet je dit in je index.html:
<div class="houder"></div>
Waarom dit, divs zijn het handigst om te gebruiken bij het slicen, en de class="houder" is om ervoor te zorgen dat hij de class houder krijgt.
Je hebt nu dit (let op, ik laat steeds alleen de body code zien, aangezien de rest niet meer veranderd:
- Code: Alles selecteren
<body>
<div class="houder">
</div>
</body>
Nu je een mooi vlak in het midden hebt kan je beginnen met de header.
In dit geval bestaat de heder uit 2 delen: De achtergrond en het logo.
NU kan je de header in 1 keer zo slicen en erin zetten.
MAAR, het is beter om deze 2 apart te doen.
Als je dan het logo wil veranderen gaat dit veel makkelijker.
Dus moeten we eerst de achtergrond Slicen.
Hoe doe je dit nou goed, je klikt op vorm 1 en vorm 2 (zodat ze allebei geselecteerd zijn).
Klik nu op de rechtermuisknop, en dan lagen dupliceren.
Dupliceer beide lagen naar een nieuwe pagina.
Nu heb je een pagina met alleen maar de header achtergrond!
Snij deze mooi uit doormiddel van de uitsnijd tool.
LET OP! het kan zijn dat je uit snij tool nop op 1X1 px staat, haal dit dan eerst weg.
Nu moet je het logo nog hebben, dit gaat bijna hetzelfde.
Zoek de laag op met het logo (de tekst Layout 1) en dupliceer deze.
Knip hem vervolgens uit.
Sla beide dingen (de achtergrond en het logo) op als een .png bestand.
Dus header.png en logo.png
Nu gaan we ze plaatsen in de layout
Om te beginnen hebben we een class nodig voor de header, die gaan we eerst maken.
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
font-family:Tahoma;
}
.houder{
width:900px;
margin-left:auto;
margin-right:auto;
}
/***** Header *****/
.header{
}
Hij moet natuurlijk de achtergrond als achtergrond hebben, en dus gebruiken we hier weer background image voor:
.header{
background-image:url('images/header.png');
}
Nu moet hij een width en een height krijgen, omdat hij altijd gewoon een vaste vorm, hoogte en breedte heeft.
Kijk hiervoor hoe groot het plaatje is.
Je zult zien dat het plaatje van de header ongeveer 898X160 is.
Met andere woorden, de width is 898 en de height 160.
.header{
background-image:url('images/header.png');
width:898px;
height:160px;
}
Alleen is de header ietsjes korter dan de houder, 2px, dus om ook dit mooi in het midden te zetten gebruiken we margin-left.
Omdat het altijd een vaste breedte heeft (900px en 898px) kunnen we het een gewone waarde geven, namelijk 1px.
Dan staat hij precies in het midden.
.header{
background-image:url('images/header.png');
width:898px;
height:160px;
margin-left:1px;
}
En hij moet natuurlijk in de index komen te staan:
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header"></div>
</div>
</body>
Als je nu je browser refresht(F5) zul je zien dat de header verschijnt.
Alleen staat hij helemaal boven tegen de rand aan, niet echt mooi.
Dus moet hij iets naar beneden.
Hier gebruik je dan margin-top voor
.header{
background-image:url('images/header.png');
width:898px;
height:160px;
margin-left:1px;
margin-top:25px;
}
Als je nu weer op F5 drukt zal de header mooi iets eronder komen te staan.
Nu moet het logo erin.
Dit kan het beste gewoon als plaatje, en dus gebruiken we hiervoor de img tags:
<img src="images/logo.png" alt="Logo" class="logo" />
Die moet in de body komen.
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header">
<img src="images/logo.png" alt="Logo" class="logo" />
</div>
</div>
</body>
Druk op F5, en het logo verschijnt.
Alleen staat hij helemaal links bovenin.
Zoals ik al had vertelt werkt margin-left:auto niet op images, dus moeten we een andere manier vinden om hem mooi te centreren.
Om te beginnen maken we de class aan:
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
font-family:Tahoma;
}
.houder{
width:900px;
margin-left:auto;
margin-right:auto;
}
/***** Header *****/
.header{
background-image:url('images/header.png');
width:898px;
height:160px;
margin-left:1px;
margin-top:25px;
}
.logo{
}
Hoe positioneer je hem nu, door margin-left en margin-top te gebruiken.
Dit kan je op gevoel doen, dus door hem gewoon te blijven veranderen tot hij goed staat.
Of je kan het uitrekenen.
Kijk hoe wijd het logo is, in dit geval 230px.
Neem hier de helft van (115px).
Neem nu de helft van de header 898px (449px)
Doe nu 449 - 115 = 334
Als je nu dus een margin-left van 334 gebruikt staat hij precies in het midden.
Het werkt hetzelfde met de height en margin-top
80 - 23 = 57 px
Dus krijg je hetvolgende:
.logo{
margin-left:334px;
margin-right:57px;
}
Als je nu op F5 drukt staat het logo mooi in het midden.
Dan komt nu het menu!
Ook het menu heeft een achtergrond die eerst gesliced moet worden.
Doe dit eerst doromiddel van dupliceren.
Sla de afbeelding op als menu.png
En we moeten natuurlijk een nieuwe class aanmaken in de css:
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
font-family:Tahoma;
}
.houder{
width:900px;
margin-left:auto;
margin-right:auto;
}
/***** Header *****/
.header{
background-image:url('images/header.png');
width:898px;
height:160px;
margin-left:1px;
margin-top:25px;
}
.logo{
margin-left:334px;
margin-right:57px;
}
/***** Menu *****/
.menu{
}
Plaats dit in je index:
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header">
<img src="images/logo.png" alt="Logo" class="logo" />
</div>
<div class="menu">
</div>
</div>
</body>
Eerst moet hij een background image krijgen.
Geef hem dus de background-image menu.png.
Vervolgens moeten we weer kijken hoelang en hoog hij is:
893X57px
Ook dit is iets korter dan de 900px, en meot dus gecentreerd worden.
je ziet dat je 7 px te weinig hebt.
Om dit dan dus mooi te centreren moet je margin-left 3 of 4 doen.
ook staat hij nu strak op de header, wat lelijk is.
Hier is dus een margin-top nodig van zon 10px
Uiteindelijk zal je dit krijgen:
.menu{
background-image:url('images/menu.png');
height:57px;
width:893px;
margin-left:3px;
margin-top:10px;
}
Nu moeten de links erin.
De code voor een link is algemeen bekent, <a href="#"></a>
Plaats nu 5 As tussen de menu tags, zoeits dus:
<div class="menu">
<a href="#">Home</a>
<a href="#">En</a>
<a href="#">Andere</a>
<a href="#">Zinlose</a>
<a href="#">Dingen</a>
</div>
Als je nu op F5 drukt verschijnen ze, alleen staan ze verkeerd en zien ze er niet uit.
Zoals je ziet in de layout moet de teskt gecentreerd worden in het menu balkje.
Daarvoor is de code: text-align:center;
Plaats dit in .menu
Als je nu weer op F5 drukt staat de tekst in het midden.
Nu moeten we de linkjes dus mooi gaan maken.
Om te beginnen maken we een class voor ze:
.menu a{
}
Dit beteken dat alle As binnen de class menu deze opmaak krijgen, en hoef je ze dus geen class mee tegeven!
Om te beginnen moet het de jusite kleur krijgen, en moet het onderste lijntje weg.
De kleur van tekst kan je veranderen met: color:#code; in dit geval dus: color:#000; aangezien de tekst zwart moet worden.
Het lijntje eronder is een tex-decoration. alleen willen we dit niet, dus moet die weg.
Dit kan door text-decoration uit te zetten, dus text-decoration:none;
je krijgt dan dit:
.menu a{
text-decoration:none;
color:#000;
}
Als je op F5 drukt staat de tekst in het midden, en zijn alle andere dingen weg.
Alleen is de tekst te klein!
Verander dit door de font-size te veranderen.
Hier kan je gewoon verschillende formaten uitproberen, tot het ongeveer goed is.
uiteindelijk zal font-size:20px; het mooist staan.
Ook moet hier de tekst in het midden staan, qwa hoogte.
Dit is wat moeilijker om goed te krijgen, maar werkt gewoon via margin-top:;
Probeer wat uit tot het mooi staat.
Ik gebruik hier 15px
Nu staat de tekst mooi in het midden, alleen moet er nog ruimte tussen komen.
Dit kan je ook zo aanpassen door er margin-left en right mee te geven.
Knoei er even mee tot het mooi staat.
Ik gebruik aan beide kanten 25px
MAAR! als je nu op F5 drukt gebeurt er niks.
Dit komt omdat margins niet werken op teksten.
DAarom moeten we er een soort blok van maken.
Dit kan met de code display:block;
Alleen staan blocken standaard onder elkaar, en moeten ze hier naast elkaar.
Dus doet we: display:inline-block;
Als je nu op F5 drukt zal de tekst mooi staan zoals je het wilt.
Je hebt nu deze code:
.menu a{
display:inline-block;
margin-left:25px;
margin-right:25px;
margin-top:15px;
font-size:20px;
text-decoration:none;
color:#000;
}
Nu zijn we bij het content vlak aangekomen.
Het eerste wat je meteen ziet is dat het ronden hoeken heeft.
Aangezien alles in HTML vierkant is, kan dit dus niet zomaar.
Dit moet via een plaatje gebeuren (Dit kan ook via een code, maar dit is de beste manier)
Je moet dit slicen.
Dupliceer het hele vak (vorm 4) naar een nieuwe pagina.
Zoom in op het bovenste gedeelte.
Pak nu de uitsnijtool, en snij precies langs de randjes het bovenste stukje met de rondingen uit.
Het plaatje hoeft maar 10px hoog te zijn!
Sla dit op als contentb.png (de b staat voor boven)
Aangezien je nu toch bezig bent kan je net zo goed meteen de onderkant doen.
Dit kan je apart slicen, of gewoon contentb draaien.
DIt is de beste manier.
Klik op afbeelding, ga dan naar afbeelding roteren, en kies verticaal roteren.
Nu heb je een mooie onderkant.
Sla dit op als contento.png (de o van onderkant)
Controleer nu zelf of het contentvlak een web kleur heeft of niet.
Je zal zien dat dit een webkleur is, en kan het dus gewoon via background-color:;
Zoek de kleur code op via de Pipet.
Je zal zien dat de kleur #ff0000 is.
Nu heb je alles klaar om met het coderen te beginnen.
Om te beginnen moet je het bovenste rondje hebben.
maka hiervoor een class aan:
.contentb{
}
Zet hier het plaatje als background en voeg de hoogte en breedte toe.
De breedte is iets te kort, dus positioneer hem in het midden.
Zet nu de code in je body:
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header">
<img src="images/logo.png" alt="Logo" class="logo" />
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">En</a>
<a href="#">Andere</a>
<a href="#">Zinlose</a>
<a href="#">Dingen</a>
</div>
<div class="contentb"></div>
</div>
</body>
Je zult zien dat de bovenkant verschijnt.
Ook hiet staat hij er iets te strak op het menu, geef hem een margin-top van 10px;
Nu moet het content gedeelte komen.
Maak een nieuwe class aan
.content{
}
Geef hem dezelfde width als contentb, en height 300px.
Vergeet niet ook deze te centreren
Geef hem nu ook een background-color:
Plaats dit in je index
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header">
<img src="images/logo.png" alt="Logo" class="logo" />
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">En</a>
<a href="#">Andere</a>
<a href="#">Zinlose</a>
<a href="#">Dingen</a>
</div>
<div class="contentb"></div>
<div class="content"></div>
</div>
</body>
Druk op F5, en het content vlak verschijnt.
Nu moet alleen nog de onderkant.
Hoe doe je dit makkelijk??
Aangezien het plaatje exact dezelfde is als contentb, maar dan andersom, kan je gewoon die code gebruiken, en de Bs verwisselen met os
Alleen moet je niet vergeten de margin-top weg te halen!
.contento{
background-image:url('images/contento.png');
height:10px;
width:885px;
margin-left:auto;
margin-right:auto;
}
Plaats dit in je index
Je hebt nu hetvolgende:
index.html
- Code: Alles selecteren
<body>
<div class="houder">
<div class="header">
<img src="images/logo.png" alt="Logo" class="logo" />
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">En</a>
<a href="#">Andere</a>
<a href="#">Zinlose</a>
<a href="#">Dingen</a>
</div>
<div class="contentb"></div>
<div class="content"></div>
<div class="contento"></div>
</div>
</body>
Style.css
- Code: Alles selecteren
body{
background-image:url('images/bg.png');
margin:0;
padding:0;
font-family:Tahoma;
}
.houder{
width:900px;
margin-left:auto;
margin-right:auto;
}
/***** Header *****/
.header{
background-image:url('images/header.png');
background-repeat:no-repeat;
width:900px;
height:160px;
margin-top:25px;
}
.logo{
margin-top:57px;
margin-left:334px;
}
/***** Menu *****/
.menu{
background-image:url('images/menu.png');
height:57px;
width:893px;
margin-left:3px;
margin-top:10px;
text-align:center;
}
.menu a{
display:inline-block;
margin-left:25px;
margin-right:25px;
margin-top:15px;
font-size:20px;
text-decoration:none;
color:#000;
}
/***** Content *****/
.contentb{
background-image:url('images/contentb.png');
height:10px;
width:885px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
.content{
background-color:#ff0000;
height:300px;
width:880px;
margin-left:auto;
margin-right:auto;
padding-left:5px;
}
.contento{
background-image:url('images/contento.png');
height:10px;
width:885px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
Je bent nu klaar!
Alleen is het mooier als je het nog een beetje afwerkt.
Om te beginnen stopt de pagina direct naar het contenvlak, dit is niet zomooi.
Dus moet er een beetje ruimte onder.
Geef contento een margin-bottom om er ruimte onder te creeeren.
Ook moet je nog even de tekst uitproberen in het content vlak.
Dit kan met lorem ipsum of iets anders.
Je zal zien dat de tekst wel erg strak tegen de rand aanstaat!
Dit is lelijk, en moet dus iets anders.
je moet binnen in het vak een ruimte maken die hij automatisch overslaat.
Hiervoor is de code padding.
padding geeft een denkbeeldige ruimte in het vak waar geen tekst in komt.
maar let goed op als je padding gebruikt!
padding neemt dus ook een deel van de breedte weg.
Dus om het goed te houden moet dan de breedte minder worden.
Dit loopt gelijk aan de padding.
Dus in dit geval zetten we bij .content:
padding-left:5px;
Nu staat de tekst 5 px van de rand af, maar is hij wel 5px te breed geworden.
Verminder nu dus de width in .content met 5px.
Druk op F5, en de tekst staat mooi van de kant af, en de breedte klopt.
Nawoord
Ik hoop dat jullie nu de basis van het slicen begrijpen.
Ik weet dat het een erg lange tekst is, maar slicen vergt op het begin erg veel.
Ga er niet vanuit dat je dit binnen een maand allemaal goed beheerst!
hier heb je meer tijd voor nodig.
Dit was mijn eerste tutorial, dus ik zou ook graag eventuele tips horen over het verbeteren van het schrijven ervan!
Ik zal indien er interesse bij is zo snel mogelijk een nieuwe les schrijven met een moeilijkere layout.
MVG
Eleky
Gelieve niet kopieeren zonder toestemming
