Basen met Shahiem

Voorwoord
Welkom bij Basen met Shahiem
Aangezien er de laatste tijd veel vragen komen , over hoe je een layout codeert. Het woord Slicen gebruikt men als het snijden van een layout in stukken.
En met Basen bedoelen we meestal het coderen van je layout. Ik ga jullie leren hoe je een .PSD layout kan slicen en basen.

Ik zou zeggen geniet ervan en veel leesplezier.
Indien je iets niet snapt. Vraagt me gerust.

Met vriendelijke groet,

Shahiem ~ Eigenaar Habboregio.nl & Hogwartscatle.nl
Yahoober

Waarschuwing:
Voor het slicen/basen gebruik ik Photoshop CS3 in het engels, indien je andere versies of talen gebruikt kan het iets afwijken!
Houd daar rekening mee.

Inhoudsopgave
1. Voorwoord
2. Benodigheden
3. De layout
4. Het begin (HTML)
5. Het begin (CSS)
6. Header
7. Menu
8. De content
9. Content en menu recht zetten

Benodigheden
Om te beginnen heb je een programma nodig om teksten te kunnen schrijven/bewerken.
Zelf raad ik Notepadd++ of Kladblok als je het gratis wilt houden.

Anders kan je ook Microsoft expression web, of Adobe Dreamweaver gebruiken.
Met deze programmas heb je maar 30 dagen proefperiode en daarna moet je uiteraard betalen.

We hebben ook een bewerkinsprogramma nodig voor ons .PSD bestand zoals: Adobe Photoshop of Paint.net of Gimp.

De layout
We gaan in deze les de volgende layout slicen:
Layout
Om te beginnen heb je natuurlijk de layout nodig in PSD formaat.
Die kan je hier onder downloaden:
http://html2basing.eu/tut/layout.psd
In de psd is het wat anders maar dat maakt niet veel uit!

Het begin (HTML)
Nu begint het echte werk. Als eerst gaan we een bestand maken met de naam index.html .

Vervolgens maak je nog een bestand met de naam style.css.
Daarna maak je een map waar je de afbeelding in stopt. Die noemen we img.
Vervolgens open je je html bestand en dan zet je de volgende code erin:

<!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>Basen met Shahiem</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>

Deze code is natuurlijk xHTML valid.

Het begin (CSS)

We gaan nu over naar ons CSS bestand en het slicen van ons background (achtergrond).
Open nu je PSD bestand. Nu zien we een grijze achtergrond, gebruik de Eyedropper Tool T.

Dan zie je dat er de code: #555555 staat. We gaan controleren of het een webkleur is want niet alle browser ondersteunen niet alle codes. Dat kan je doen door te klikken op: Only Web Colors. Als je nu weer naar de kleur code kijkt zie je dat die is veranderd naar #666666 ,
met andere woorden: de achtergrond is geen webkleur.

Hoe gaan we dit nu doen dan?
We doen het als volgt , je gebruikt een plaatje als achtergrond.
Pak de Slice tool(Uitsnijd tool) en zet de breedte en hoogte op 1 pixel(px).

Je hebt het vakje nu geselecteerd, nu ga je naar de bovenste tab: Edit.
Daar zie je de functie: Copy Merged. Klik daar op en nu heb je het gekopieert.
Plak het nu in een nieuwe bestand en sla het op als een PNG bestand genaamd bg.png.
En zet je background afbeelding dan in je map img.

Nu open je je CSS bestand en zet dit in je bestand:

body { background: url(img/bg.png); }

Open nu index.html met je browser, en je zult zien dat je een grijze achtergrond hebt.
Maar je moet altijd nog 2 extra regels hebben aangezien de browser het automatisch een margin en padding geeft.

Dit willen we juist niet, dus moeten we het als waarde 0 geven.

body { background: url(img/bg.png); margin: 0; padding: 0; }

Nu kan je opzoeken welke lettertype we gebruiken en dat is namelijk: Georgia.
En als lettertype groote doen we 11 pixels.
Als kleure gebruiken we de volgende kleurencode: #666666;
Nu hebben we dit:

body { background: url(img/bg.png); margin: 0; padding: 0; font: 11px Georgia; color: #666; 

}

Nu gaan we over naar het andere gedeelte.
Om te beginnen kijk je hoe groot ons layout is.
Je zult merken dat ons layout 800 pixels breed is.
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 800 pixels
Dit doe je door een div te maken met een id.

Je style.css ziet er als volg uit:

body { background: url(img/bg.png); margin: 0; padding: 0; font: 11px Georgia; color: #666; 

}
#container { width: 800px; margin: 0 auto; }

Nu moeten we in ons html code tussen de body tags de volgende code plaatsen:

<div id="container"><div>

Header

Nu ga we over naar het css gedeelte van de header.
Als eerste moet je weten wat de Hoogte en de Breedte van de header is. Dat kun je doen door

de header te selecteren met de slice tool.
Vervolgens kopieer je h, druk op File => Dan op New => Onthoud de afmeting die er staan je

ziet dan dat de breedte: 800px is.
En de hoogte 145px is. Sla de header op als PNG en zet h in je map met afbeeldingen , en zet

het volgende in je html bestand:

<div id="header"><div>

Zet dit dan in je CSS bestand:

#header { width: 800px; height: 145px; background: url(img/header.php); }

Dan weet je dat alvast.

Bekijk je resultaat:

Menu

Zo we zijn nu bij het menu , nu ga je met de Slice tool de hele menu kopieren.
Je moet wel de tekst weghalen voor dat je de menu kopieert.
Als je het dan hebt geselecteerd ga dan naar Edit -> Copy Merged en dan zet je hem in een

nieuw bestand en slaat hem op als menu.png.

We gaan nu over naar ons html gedeelte.

<div id="menu">
    <h1>Menu</h1>
    
    - <a href="">Home</a><br />
    - <a href="">Forum</a><br />
    - <a href="">Inloggen</a><br />
    - <a href="">Registreren</a><br />
    - <a href="">Info</a><br />
    - <a href="">Contact</a>
    
    <h1>Login</h1>
        </div>

We gaan nu over naar ons css gedeelte.

We weten inmiddels dat de breedte van de menu 173 pixels is.
Zet dan dit in je css code:

#menu { width: 173px; }

Nu zetten we ook de achtergrond erin:
background: url(img/menu.png);

Maar onze menu staat nu een beetje scheef en hij moet vlak onder de header staan dan zetten

we het volgende in ons code:

float: left; padding-left: 5px; margin-left: 100px; margin-top: 20px;

Nu staat onze menu goed maar we moeten nu ons tekstopmaak mooi maken (Zoals ik dat noem )
Omdat de lijn onder de links weg moeten zetten we deze css in ons css bestand:

#menu a { text-decoration: none; }

Nu moeten we het ook een kleur en een lettertype groote geven:

#menu a { text-decoration: none; font-size: 15px; color: #666; }

De content
Nu zijn we aangekomen op het laatste deel De content maar ook het belangerijkst.
We gaan met de slice tool het hele contentvlak uitknippen.
Daarna kopieer je het en slaat het op als content.png.

Nu gaan we over naar de html gedeelte.
We gebruiken nu een class omdat we het meerdere malen gaan gebruiken.
De code ziet er als volgt uit:

<div class="content">
        <h1>Menu</h1>
        Sed pellentesque pharetra diam, at eleifend nulla consectetur vitae. Proin 

mollis ultricies eros sed semper. Etiam vitae nisi velit. Duis nisl nunc, malesuada a dapibus 

at, luctus quis neque. Duis pellentesque, lorem in pulvinar pretium, nisl justo tincidunt 

est, id mollis elit ligula sed mauris. Morbi auctor, nisl in rhoncus sagittis, odio tellus 

gravida velit, at egestas tortor erat in lectus. Praesent et quam et enim convallis tempus.
        </div>
        
        <div class="content">
        <h1>Menu</h1>
        Sed pellentesque pharetra diam, at eleifend nulla consectetur vitae. Proin 

mollis ultricies eros sed semper. Etiam vitae nisi velit. Duis nisl nunc, malesuada a dapibus 

at, luctus quis neque. Duis pellentesque, lorem in pulvinar pretium, nisl justo tincidunt 

est, id mollis elit ligula sed mauris. Morbi auctor, nisl in rhoncus sagittis, odio tellus 

gravida velit, at egestas tortor erat in lectus. Praesent et quam et enim convallis tempus.
        </div>

Nu gaan we over naar het CSS gedeelte:
De content breedte is 583 pixels. Dus dan zetten we dit in ons code:

.content { width: 583px; }

Nu zie je dat er niet zo een teken in staat # maar een punt omdat het een class is en niet

een ID.

Maar, als je nu je site bekijkt zie je dat beide kolommen érg ver naar beneden lopen. Dat

klopt natuurlijk ook niet dus doen we bij de de div.content dit erbij:

overflow: hidden;

Maar nu moeten we het nog een achtergrond geven:

background: url(img/content.png);

Nu gaan we de tekst 5 pixels naar links zetten zodat hij niet tegen de content rand aan zit.
Dat doen we met:

padding-left: 5px;

Maar nu moet je ook 5 pixels van de width afhalen , dan wordt de width:

width: 578px;

Dat is omdat de content gedeelte dan gaat herhalen en dat willen we niet.

Content en menu recht zetten
Nu kan het zijn dat je content en menud niet goed naast elkaar zitten.
Dat kan je makkelijk oplossen door bij de content en menu DIV dit bij de css code te zetten:

float: left;

Daarna maak je 2 divs:

#left { width: 300px; float: left; }
#right { width: 583px; float: left; }

Nu moeten we nog het html gedeelte.

Bij de menu gedeelte zet je dit:

<div id="left">
        <div id="menu">
    <h1>Menu</h1>
    
    - <a href="">Home</a><br />
    - <a href="">Forum</a><br />
    - <a href="">Inloggen</a><br />
    - <a href="">Registreren</a><br />
    - <a href="">Info</a><br />
    - <a href="">Contact</a>
    
    <h1>Login</h1>
        </div>
    </div>

En bij de content gedeelte dit:

<div id="right">
        <div class="content">
        <h1>Menu</h1>
        Sed pellentesque pharetra diam, at eleifend nulla consectetur vitae. Proin 

mollis ultricies eros sed semper. Etiam vitae nisi velit. Duis nisl nunc, malesuada a dapibus 

at, luctus quis neque. Duis pellentesque, lorem in pulvinar pretium, nisl justo tincidunt 

est, id mollis elit ligula sed mauris. Morbi auctor, nisl in rhoncus sagittis, odio tellus 

gravida velit, at egestas tortor erat in lectus. Praesent et quam et enim convallis tempus.
        </div>
        
        <div class="content">
        <h1>Menu</h1>
        Sed pellentesque pharetra diam, at eleifend nulla consectetur vitae. Proin 

mollis ultricies eros sed semper. Etiam vitae nisi velit. Duis nisl nunc, malesuada a dapibus 

at, luctus quis neque. Duis pellentesque, lorem in pulvinar pretium, nisl justo tincidunt 

est, id mollis elit ligula sed mauris. Morbi auctor, nisl in rhoncus sagittis, odio tellus 

gravida velit, at egestas tortor erat in lectus. Praesent et quam et enim convallis tempus.
        </div>
    </div>
    
    <div style="clear: both;"></div>

Einde
Ik hoop echt dat jullie nu de basis van het coderen van PSD layout snapt.
Je moet er niet van uitgaan dat je het binnen een week beheerst hebt.
Want dit vergt meer tijd.

Ik hoop dat jullie mijn tutorial leuk vonden, ik zal graag jullie mening horen en de verbeterpunten.

Met vriendelijke groet,
Shahiem

Tutorial kan je ook volgen op WMcity: http://www.wmcity.nl/artikelen.php?actie=bekijk&id=865

Ik bedank Josnl voor het maken van de Layout en Banner.
Shahiem ~ Eigenaar Habboregio.nl & Hogwartscatle.nl
Yahoober

leuk ga het misschien later leren

Bedankt Succes. Ik moet ook met li en ul werken.

Goede tutorial,
Alleen een tip:
gebruik niet te vaak H1
gebruik li in het menu

Mooi gemaakt, en t is gelukt!

Bedankt voor jullie reacties, hier word ik echt blij van als mensen wat van me leren

mooie tut mooi uitgebreid maar ik kan al basen maar voor beginnende is dit super handig

ik kan ook al basen maar wel nice hoor, mijn verouderde tut heeft ook zijn minpunten

Zeer goede tutorial Shahiem, een van de betere basing/slicing tutorials op one2xs.com!

Dankjewel Josje

Nu begint het echt werk. Als eerst gaan we een bestand maken met de naam index.html .

Daarna maak je een map waar je de afbeelding in stopt. Die noen we img.

Nice tut, soms wat spellingsfouten maar dat maakt niet uit.

Tja, iedereen maakt fouten hé. Zo zit de mens nou eenmaal in elkaar.

ik heb doorgelezen.
en dingen die ik niet wist bijgeleerd.
En ik kan trouwens nu ook basen.

Leuk om te horen

Heel handig. Nu hoef je minder te betalen om je layout te laten slicen.