Wat moet ik doen als ik een lay-out heb die ik als ik 'm slice met photoshop in allemaal kolommen en rijen komt met verschillende grootte? Kan ik dit beter laten staan in een tabel, of kan ik er ook gewoon css van maken. Als ik er ook gewoon css van kan maken is mijn vraag: is daar een goede tutorial voor?

Ben ik ook naar op zoek, een goede tut over het valid slicen van een layout..

Je hebt niet zoveel aan een tutorial. Het voornaamste is een goede kennis van html en css.

Een goed begin is om de teksten te lezen over html en css op http://www.w3schools.com en dat telkens proberen toe te passen op kleine, simpele layouts.

Na een tijdje zul je vloeken op de vele bugs in IE en beperkingen in CSS. Voor oplossingen vind je veel info op http://www.alistapart.com

Ik zou om te beginnen al aanraden om met Imageready te slicen, en niet met photoshop. Je hebt veel meer mogelijkheden met Imageready.

Daarbij moet je ook nog eens zorgen dat je export instellingen goed zijn. Je kan met IR en PS in verschillende manier export to html doen.

Voordat je begint in photoshop te rommelen, begin hier eerst es mee :
1. Een html document bestaat uit 2 delen, een body en een head. Wat is dat nu ? En waarvoor heb je het nodig ?
2. Leer dan eerst es de basis html tags zoals img, p, a, input, textarea, ... .
3. Leer dan welke attributen verplicht zijn bij bepaalde tags om aan de xhtml norm te voldoen. Bijvoorbeeld bij de img tag, is het alt attribuut een verplicht attribuut. Waarom ?
4. Hoe ga ik mijn websites bouwen ? In tabellen of in divs ?
Ikzelf ken enkel tabellen, dus leer een tabel maken. Wat is een tr tag, wat is een td tag en waarvoor dienen ze ?
Hoe overspan je andere cellen en waarom moet je andere cellen overspannen ?
5. Css wat is het, en waarvoor wordt het gebruikt ?
6. Ga op zoek naar een bestaande css file via de broncode van een bestaande site, het liefst bekende websites zoals skynet.be of telenet.be enzo. Kijk hoedat zij het gedaan hebben. Probeer de link te leggen, en probeer eruit te leren.
7. Wat ik gedaan heb, ik heb veel gekopieerd uit bestaande css files, en die zelfde codes gebruikt als hen. Na 10 websites gesliced te hebben, ken je alle css tags ook vanbuiten :)
8. Maak je ontwerp in photoshop, maar slice het met Imageready ! Neem het 'segmentenicon' en verdeel uw ganse website in segmenten. Om dit goed en correct te doen, moet je zowiezo de basis html kennen zodat je weet waar je rekening moet mee houden !!
9. In imageready heb je heel veel opties, zodat je ervoor kunt zorgen dat je weinig veranderingen moet doen in de codes zelf ! Bekijk zeker die opties, zo kan je onmiddellijk bepaalde cellen als tekst slicen, andere dan als een image. Typ ook al onmiddellijk de nodige informatie in het invulveld voor de alt tag ! Na het exporteren naar html, staat dit al mooi en netjes ingevuld in uw broncode.

Voila, dit is in grote lijnen hoedat je te werk moet gaan. Maar je leert het maar, door ermee bezig te zijn hoor !

Ik zet hier even kort neer hoe ik een website slice:

-> Eerst slice ik de site in een stuk of 3/4 logische delen.
-> Ik maak een basis xhtml-pagina en een basis css-pagina.
-> Ik maak daarna alle benodigde classes in de xhtml-pagina en vervolgens maak ik de daarbij passende css-classes, die maak ik op de gok. Ik geef alle classes in de css een border mee van 1px.
-> Ik ga de pagina bekijken en kijk welke classes fout zitten en welke niet en ik verander alle waardes tot de divs goed zijn gepositioneerd.
-> Ik check de site in andere browsers, (in ieder geval Internet Explorer en Firefox) en pas alles aan indien nodig.
-> Ik laat evt. de pagina nog valideren.

Misschien heb je er wat aan, misschien niet.... ;)

Origineel gepost door Joeri P

Ik zou om te beginnen al aanraden om met Imageready te slicen, en niet met photoshop. Je hebt veel meer mogelijkheden met Imageready.

Daarbij moet je ook nog eens zorgen dat je export instellingen goed zijn. Je kan met IR en PS in verschillende manier export to html doen.

Voordat je begint in photoshop te rommelen, begin hier eerst es mee :
1. Een html document bestaat uit 2 delen, een body en een head. Wat is dat nu ? En waarvoor heb je het nodig ?
2. Leer dan eerst es de basis html tags zoals img, p, a, input, textarea, ... .
3. Leer dan welke attributen verplicht zijn bij bepaalde tags om aan de xhtml norm te voldoen. Bijvoorbeeld bij de img tag, is het alt attribuut een verplicht attribuut. Waarom ?
4. Hoe ga ik mijn websites bouwen ? In tabellen of in divs ?
Ikzelf ken enkel tabellen, dus leer een tabel maken. Wat is een tr tag, wat is een td tag en waarvoor dienen ze ?
Hoe overspan je andere cellen en waarom moet je andere cellen overspannen ?
5. Css wat is het, en waarvoor wordt het gebruikt ?
6. Ga op zoek naar een bestaande css file via de broncode van een bestaande site, het liefst bekende websites zoals skynet.be of telenet.be enzo. Kijk hoedat zij het gedaan hebben. Probeer de link te leggen, en probeer eruit te leren.
7. Wat ik gedaan heb, ik heb veel gekopieerd uit bestaande css files, en die zelfde codes gebruikt als hen. Na 10 websites gesliced te hebben, ken je alle css tags ook vanbuiten :)
8. Maak je ontwerp in photoshop, maar slice het met Imageready ! Neem het 'segmentenicon' en verdeel uw ganse website in segmenten. Om dit goed en correct te doen, moet je zowiezo de basis html kennen zodat je weet waar je rekening moet mee houden !!
9. In imageready heb je heel veel opties, zodat je ervoor kunt zorgen dat je weinig veranderingen moet doen in de codes zelf ! Bekijk zeker die opties, zo kan je onmiddellijk bepaalde cellen als tekst slicen, andere dan als een image. Typ ook al onmiddellijk de nodige informatie in het invulveld voor de alt tag ! Na het exporteren naar html, staat dit al mooi en netjes ingevuld in uw broncode.

Voila, dit is in grote lijnen hoedat je te werk moet gaan. Maar je leert het maar, door ermee bezig te zijn hoor !

1. Weet ik ja
2. Ik ken al een hoop php dus html zal ik ook best wel kennen
3. Weet ik ook al, veel div tags, <br /> etc.
4. Ik wil het juist niet in tabellen, want dat werkt niet altijd lekker
5. Css heb ik al behoorlijk goed geleerd
6. Dat heb ik ook gedaan
7. Dat doe ik niet...
8. Goede tip over dat imageready
9. In photoshop cs3 is dit volgens mij wel allemaal standaard inbegrepen...

Maar ik denk niet dat professionele scripters/designers hun layouts in imageready slicen?

Origineel gepost door Sam Renders

Maar ik denk niet dat professionele scripters/designers hun layouts in imageready slicen?

tuurlijk wel.

Het slicen gaat eigenlijk meer om het inzicht. Ik maak een lay-out volledig in photoshop. Daarna kijk ik welke elementen ik niet kan bekomen met standaard css (overgangen, effecten, logo's ed) deze ga ik dan slicen, zodat ik hier de images van heb. Voor de rest werk ik met borders, background colors, noem maar op, css is een krachig instrument. Je moet van tevoren goed weten hoe je je site gaat opbouwen, en hoe je dit in de praktijk gaat omzetten. Een goede voorbereiding halveert het werk.