Slicen

[deagle]

Hoi .

Welkom op m'n 2detut hier die gaat over slicen.

De tut is onderverdeeld in 3 stukken :

/*De layout in PS slicen

/*Het codering gedeelte in Dreamweaver.

We gaan dadelijk van start met deel1.

Het principe van Slicen

Wat is slicen?

Slicen is een layout die je gemaakt heb in Photoshop in stukjes verdelen die je dan later opvult met scripts (PHP,ASP) en gewone tekst(HTML,CSS).

Hoe verdelen we mn lay in stukken?

We beginnen met een lay te maken.

Dan selecteren we de "SliceTool" .

Met die slicetool verdelen we de lay in vlakken waar tekst in moet.

Zoals dit :

Voila ,

de lay is nu in stukken verdeeld.

Hoe slaan we op als .html bestand?

Nadat je alles hebt gedaan wat hierboven staat , ga je naar File>Save For Web...(of druk :Alt+Shift+Ctrl+S).

Dan krijg je dit :

Dit doe je :

1. Druk op saven

2. Geef je naam in

3. Druk op de andere save.

Je sluit PS af.

En opent je DreamWeaver (of andere .html editor).

Deel 2.

Open DreamWeaver en de layout.html.

Tussen de HEAD-tags plak je dit :

<style> 
BODY 
{ 
 background-color: #FFFFFF; 
 margin-top: 0; 
 margin-left: 0; 
} 
</style>

---

Nu gaan we naar een image (de code ziet er zo uit :

<td rowspan="3"><img src="images/img.jpg" width="#" height="#" alt=" "></td>

.

Die code veranderen we in dit :

<td rowspan="3" style="background: url('images/img.jpg'); width:#px; height:#px;" valign="top"> Uw Tekst </td>

---

Et voila ,

kijk nu maar en dit zie je :

LET OP :

Als je die layot online will zetten moet je je map "images" en de html pagina uploaden.

----------------------------------------------------------

Bewerkt: 7 juli 2006 door Nicsan

[Nemean^inf]

Maak van die plaatjes thumbnails, werkt beter.

Tis nou een beetje groot.

Goed uitgelegd maar ik wist dit al.

[deagle]

Ja sorry dat het grote pics zijn maar dit komt omdat de tut al lang bestaat , en ik weet die tumblinks niet meer + de images zijn al van mn HD (kwestie dat ik mr een HD van 40 GB heb )

[Froodooo]

Ja sorry dat het grote pics zijn maar dit komt omdat de tut al lang bestaat , en ik weet die tumblinks niet meer + de images zijn al van mn HD (kwestie dat ik mr een HD van 40 GB heb )

Als je met je rechtermuisknop op een plaatje drukt, en dan op Eigenschappen, dan zie je de link van het plaatje.

Deze link kun je met ImageShack opnieuw uploaden (zorg wel dat het vinkje bij 'URL' staat, en dan kun je nu voor Thumbnail kiezen.

[Edit] De URL van het eerste plaatje is 'http://img198.imageshack.us/img198/1044/laybegin9ju.jpg'. Deze kun je dus opnieuw uploaden,

en dan voor Thumbnail kiezen, dan krijg je dus gewoon dit:

Bewerkt: 7 juli 2006 door Froodooo

[deagle]

Bedankt!

Hij is veranderd .

[BigT]

Hij is bij mij te klein.

Het lijkt net of je gewoon naar een plaatje kijkt

Laatmaar..

Is al gelukt

Bewerkt: 24 maart 2007 door BigT

[NickyHendriks]

En wat nou als ik bijvoorbeeld een plaatje wil slicen voor Links erin te zetten in een BB-Code zoals bijvoorbeeld dat ik een afbeelding heb en die verdeeld is in meerdere links. Hoe werkt dit dan weer?

[-Matthijs-]

En wat nou als ik bijvoorbeeld een plaatje wil slicen voor Links erin te zetten in een BB-Code zoals bijvoorbeeld dat ik een afbeelding heb en die verdeeld is in meerdere links. Hoe werkt dit dan weer?

De onderstaande tutorial laat zien hoe je in één afbeelding meerdere links kunt zetten.

http://www.gtaforum.nl/index.php?showtopic=18486

[NickyHendriks]

En wat nou als ik bijvoorbeeld een plaatje wil slicen voor Links erin te zetten in een BB-Code zoals bijvoorbeeld dat ik een afbeelding heb en die verdeeld is in meerdere links. Hoe werkt dit dan weer?

De onderstaande tutorial laat zien hoe je in één afbeelding meerdere links kunt zetten.

http://www.gtaforum.nl/index.php?showtopic=18486

Bedankt voor de link

EDIT: Dit kon ik zelf ookal Maarja. Ka ik ook gewoon opslaan als JPG of PNG ofzo? Of moet persew GIF?

Bewerkt: 31 januari 2009 door zamg0d1

[NickyHendriks]

Erm... Ik ga dit nu echt gebruiken ergensvoor (nog tijdelijk geheim) maar moet ik nou in die layout.html alle tekst zetten of komt die weer in een appart bestand?

En welke maten heeft een Layout meestal?

Bewerkt: 2 februari 2009 door zamg0d1

[Venzio]

Hmm ik gebruik meestal 800x600.

Een vraagje rekt hij ook mee uit?

Na de codering?

[-Matthijs-]

Erm... Ik ga dit nu echt gebruiken ergensvoor (nog tijdelijk geheim) maar moet ik nou in die layout.html alle tekst zetten of komt die weer in een appart bestand?

Als je tekst in een geslicte lay-out wilt zetten, moet je gebruik maken van het DIV element of een Iframe (een verwijzing naar een andere pagina met je tekst). Mocht je daar vragen over hebben, dan kun je terecht in Webdesign & Programmeren.

En welke maten heeft een Layout meestal?

Dat is afhankelijk van de resolutie van de bezoeker en je eigen smaak. Ik raad je aan 800x600 of 1024x768 als standaard te nemen.