login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Photoshop


Gegevens:
Geschreven door:
WimJ
Moeilijkheidsgraad:
Normaal
Hits:
7910
Punten:
Aantal punten:
 (2)
Aantal stemmen:
2
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (6)
 


Tutorial:

Slicen van een lay-out in (X)HTML

"Save for Web & Devices"
"Edit Output Settings"
"XHTML & Configuration"
Slot

"Save for Web & Devices"

Wanneer we onze lay-out af hebben, en hier een fantsoenlijke site van willen maken..
Doen we dit meestal met (X)HTML & CSS, Tables zijn al lang geschiedenis we spreken nu over Div's.
Div's met ID's of Classes, overzichtelijker n en makkelijker achteraf om iets aan/toe te passen!

En ook Adobe weet hoe belangerijk deze zijn voor ons, en heeft dus ook een optie!
Om je lay-out's wanneer deze gesliced zijn.. Op te slagen met Div's, ID's, of Classes.
Alleen zit deze 'vrij verstopt' en maken de meeste mensen de fout om nog op te slagen met tables
Ik leg je graag uit hoe dit in te stellen, en hoe makkelijk het is!

We starten met onze net geslice'de lay-out.



Dan ga je naar File, daar selecteer je "Save for Web & Devices".




pijl top
"Edit Output Settings"

Als het goed is dan heeft er zich een venster geopend, met de preview van jou lay en slices.
Op het eerste zicht niets te zien van XHTML of Output Settings..
Maar rechts boven in de hoek van het venster dat zich geopend heeft.
Vindt je 3 streepje's en een pijltje terug, dit klik je aan.
En hier selecteer je "Edit Output Settings".





pijl top
"XHTML & Configuration"

Hier heb je weer een nieuw venster gekregen, en hier zit de trick.
Links boven heb je een dropdown menu'tje, standaard staat deze op "HTML".
Selecteer hier "XHTML".
Je hebt hier recht onder een 2de drop down menu, met hier in de volgende optie's
- HTML
- Slices
- Background
- Saving Files

Dit kan je allemaal naar hartelust doornemen en eens bekijken.
Maar voor ons telt de optie "Slices", Klik deze aan en selecteer hier "Generate CSS".
Dan kan je in het dropdown menu naast Referenced kiezen uit Inline CSS, By ID, of By Classes.
Kies hier welke je wilt, "OK" >> "Save" >> Done.




pijl top
Slot

Hoop dat deze tutorial jou heeft verder geholpen, en dat je nu zult afleren 'Tables' te gebruiken.
Deze zijn niet alleen immens oud, maar ook nog eens heel lelijk, en steek je vaak meer tijd in dan bij CSS.
Moest er iets niet duidelijk zijn, kan je altijd een topic openen op Sitemasters in de juiste categorie.


pijl top


« Vorige tutorial : Water Volgende tutorial : Frozen gradient »

© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.015s