Les 7

We hebben nu nog 6 lessen te gaan.

Les7
Nog wat CSS
En een Slice oefening

Les8
SEO
en terug naar Dreamweaver.

Les 9 t/m 12 werken aan de site
FTP



Nu hebben we een vormgeving wat doen we er nu mee:

-we gaan in Fireworks de boel slicen en/of indelen in rechthoeken.

Huh?

Ok.....in de laatste les hebben we gekeken naar de kracht van CSS en geleerd dat CSS tegenwoordig gewoon standaard is.

Wel nu......in CSS deel je je pagina's in rechthoekige containers genaamd DIV's.

Wat is een DIV?
Div staat voor de afkorting division, het is eigenlijk een bijzondere paragraaf.
Het is fijn om een pagina of textvlak precies te positioneren of bijvoorbeeld iets een bepaalde grote mee te geven.
Met div's kun je gedeeltes van je pagina namen geven, die je later kunt gebruiken in bijvoorbeeld CSS of JavaScript.

Vroeger werd een opmaak in tabellen gemaakt.....tegenwoordig dus met DIV's
Tabellen zijn namelijk bedoelt om Data mee weer te geven en niet als vormgevings gereedschap.

CSS wordt van boven naar beneden opgebouwd. Dus je begint bij de Header van de pagina en eindigt met de footer.

Om Fireworks te laten weten dat je een Div wil, plaats je om de desbetreffende ruimte een rechthoek (mag onzichtbaar)
Als je wilt dat Fireworks voor jou DIV’s aanmaakt, moet je die DIV markeren met behulp van een rechthoek. Deze rechthoek hoeft niet perse zichtbaar te zijn, hij moet wel een naam hebben. Deze naam wordt later namelijk de naam van de DIV.


Filmpje

Nog een tutorial:
http://www.adobe.com/devnet/fireworks/articles/smart_css.html

http://layersmagazine.com/fireworks-cs4-css-export.html

Regels:(plak word doc hier)

-Probeer je ontwerp zoveel mogelijk op te delen in rijen en colommen
-Zorg dat slices en DIVrechthoeken elkaar niet overlappen.
-In het filmpje zagen we dat het geven van namen aan de rechthoeken HEEL belangrijk is.
De rechthoeknamen worden namelijk netjes mee ge-exporteerd.
-Alle plaatjes dienen in slices te worden geplaatst.

Alle regels
Hieronder het een en ander nog eens heel duidelijk uitgelegd.

http://www.adobe.com/devnet/fireworks/articles/smart_css.html

Voor iedereen die zelf CSS coding wil leren, hier is een goede tutorial.
http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout

Resume van Adobe (BELANGRIJK)


Huiswerk: maak de vormgeving van je site af, dan kunnen we die gaan exporteren naar HTML en CSS. Daarna kunnen we ons bezig gaan houden met de inhoud van de site.