July 7, 200619 yr 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. ---------------------------------------------------------- Edited July 7, 200619 yr by Nicsan
July 7, 200619 yr Maak van die plaatjes thumbnails, werkt beter. Tis nou een beetje groot. Goed uitgelegd maar ik wist dit al.
July 7, 200619 yr Author 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 )
July 7, 200619 yr 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: Edited July 7, 200619 yr by Froodooo
March 10, 200719 yr Hij is bij mij te klein. Het lijkt net of je gewoon naar een plaatje kijkt Laatmaar.. Is al gelukt Edited March 24, 200719 yr by BigT
January 30, 200917 yr 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?
January 31, 200917 yr 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
January 31, 200917 yr 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? Edited January 31, 200917 yr by zamg0d1
February 2, 200917 yr 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? Edited February 2, 200917 yr by zamg0d1
February 3, 200917 yr Hmm ik gebruik meestal 800x600. Een vraagje rekt hij ook mee uit? Na de codering?
February 3, 200917 yr 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.
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 :
.
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.
----------------------------------------------------------
Edited by Nicsan