Van Photoshop naar je site-editor

Info 
Door: Saiko Moeilijkheidsgraad: 1/3
Views:30.981Reacties: 20(Bekijken)
  Log in om zelf te reageren
 Waardering:8.4/10 (5 stemmen)



Nota: deze tutorial is gemaakt adhv Photoshop CS en Dreamweaver MX2004, maar met oudere versies van Photoshop en andere site-builders moet het ook lukken.

Stap 1

Je maakt dus je design in Photoshop, en dan slice je het. Klik hier voor een voorbeeld. Dan ga je je design exporteren. Dit doe je zo: File => Save for web. Dan opent er zich een nieuw scherm waar je nog vanalles kan instellen. Dan druk je op de knop Save, en zorg ervoor dat "opslaan als type" op html and images staat. Tot zover het werk met photoshop.


Stap 2

Nu gaan we het html bestand in dreamweaver(of een andere editor openen). Je ziet nu dat je design bestaat uit allemaal images. Klik hier voor een voorbeeld. We gaan de codes van de images zodanig veranderen dat het cellen worden waar je dan je inhoud in kan zetten. We hoeven dit alleen maar te doen bij de images waar inhoud komt te staan. Je gaat de code van de images zoeken die je moet veranderen. Ze zien er zo uit:

#Code
1
<td> <img src="[b]jouw afbeelding.jpg[/b]" width="187" height="97" alt=""> </td>

en je gaat hem veranderen naar :
#Code
1
<td style="background-image: url([b]jouw afbeelding[/b].jpg)" width="187" height="97" alt=""> </td>

De width en height parameters moet je laten zoals ze zijn. Ook ROWSPAN en COLSPAN moet je niet verwijderen, ik zet deze altijd achter de alt="" tag. Kijk hier hoe het voor en na uitziet. Nu heb je de images omgezet in cellen waar je dan je inhoud kan inzetten. Kijk hier voor het eindresultaat.

20 reacties
orpian Geplaatst op 23-02-2008 om 16:50
 

Regular
toch niet in tabellen..
tabellen zijn niet gemaakt voor layout.
use div's and css!
Lexn Geplaatst op 24-01-2008 om 21:59
 

Regular
wanneer ik mijn design maak in photoshop en exporteer en dan bekijk in FrontPage kan ik op geen aparte afbeeldingen klikken, het is 1 groote afbeelding
gloomy Geplaatst op 17-02-2007 om 20:44
 

Regular
als je wilt dat ie bovenaan gaat typen moet je effe in de td dit zetten : "valign="top" "
dan begint ie boven in de tabel :)

oja zorg altijd dat je script en design open heb staan in dreamweaver. ken je altijd kijken wat er aan het voetje is ;) nog meer vragen vraag maar... ik gebruik deze techniek supervaak :P


nog een tipje:

selecteer een achtergrond voor je body en zet in je table tag dit:

align="center"

maakt niet uit met welke resolutie de bezoeker dan kijkt. hij krijgt altijd een goed effect ( tenminste als zen resolutie groter of gelijk is aan de grote waarop jij je template hebt gemaakt in photoshop :P
bart_77 Geplaatst op 21-07-2006 om 15:10
 

Regular
ik heb dat ook maar dan zet ik hem aan het begin en druk op enter en dan kan ik wil een regel omhoog, ik ben nog maar net begonnen met dreamweaver :-)
Daaneo Geplaatst op 12-03-2006 om 19:03
 

Regular

Pagina 1 2 3 4 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder