Van Fireworks naar HTML

Je kan nu in HTML en CSS de structuur wrapper – container – footer maken.

Verder kan je in Fireworks een lay-out maken en deze slicen. Nu moeten we de geslicete figuren in Dreamweaver invoegen.

Hiervoor moet je elke figuur als achtergrond voor een div zetten. Let op dat de herhalende figuur altijd als achtergrond van de wrapper wordt gezet!

Indien één div meerdere achtergrondfiguren moet krijgen, dan plaats je meerdere divs rond mekaar.

Bv de rechterdiv krijgt een achtergrondfiguur aan de boven- en onderkant:

<div id=”rechtsbuiten”> <div id=”rechtsbinnen”>dit is rechts</div></div>

In de CSS kan je nu rechtsbuiten de bovenste figuur geven en rechtsbinnen de onderste. Vergeet niet dat deze onderste figuur ook naar linksonder uitgelijnd moet worden. In dit voorbeeld wordt een figuur naar linksonder uitgelijnd:

Voeg nooit een figuur in. Stel ALTIJD in als achtergrond via CSS.

Enkel de figuur van de wrapper wordt herhaald. De andere figuren worden niet herhaald.

In dit voorbeeld wordt de achtergrondfiguur enkel naar onder herhaald (Y):

In dit voorbeeld wordt de achtergrondfiguur niet herhaald: