een webpagina maken met Dreamweaver

Je maakt hier een webpagina met Dreamweaver CS5.5.
De pagina bestaat uit 3 kolommen en heeft een extern stylesheet.
Het resultaat van de training zie je hier.

stap 1: de teksten plaatsen (00:17:31)

Je maakt in HTML een basisstructuur voor een pagina met 3 kolommen en een extern stylesheet.
Er wordt gewerkt in de design-weergave.


stap 2: de padding in de verschillende delen instellen (00:09:01)

Het is mogelijk om direct bij de div's de paddings in te stellen. Omdat het boxmodel dan werkt is dat niet zo intuïtief.
Je krijgt dan niet zonder meer de hoogte of breedte, die je ingesteld had.
Beter kun je binnen de DIV een ander element instellen, bijvoorbeeld een pagina en deze de paddings geven.
Omdat zij geen hoogte hebben, krijg je niet de onverwachte effecten van het boxmodel.

 

stap 3: een marge aan de bovenzijde verwijderen (00:00:57)

de kop lijkt een marge te hebben, die niet in de kop zelf blijkt te zitten, maar in het element daarbinnen.
Daarvan moet de marge dus op 0 gezet worden

 

stap 4: een marge aan de bovenzijde verwijderen (00:04:35)

de hoogte van de kolom wordt bepaald door de inhoud.
Om deze toh helemaal te vullen , moeten we een hack verzinnen.
Hiervoor maken we de padding aan de onderkant 3000px en compenseren dit met de marge aan de onderkant van -3000px.
Omdat we dan de overflow van de omvattende div #midden op hidden zetten, lijken de kolommen precies zo groot te zijn als de langste aanwezige kolom.

Als de derde kolom de langste is, dan zal hij met zijn float right de footer links naast zich laten stromen.
Daarom krijgt de footer een clear-waarde both mee, zodat deze altijd onder de linker en rechter kolom blijft.

 

stap 5: weer de extra marge wegnemen (00:00:39)

Ook boven de footer is een extra marge te zien.
Deze kun je weer wegnemen, door de marge van het element BINNEN de footer op 0 te zetten.

 

stap 6: online zetten (00:04:50)

Een website kun je online zetten door de hele map te kopiëren naar de Public-map van je Dropbox-map.
Als je nog geen Dropbox-account hebt, maak je er eerst een aan en installeer je Dropbox po je computer.
Eventuele bronbestanden, die niet noodzakelijk zijn om de site te bekijken, kun je op je computer laten en hoeven niet in je Dropbox-map.

ZORG ERVOOR DAT ER GEEN SPATIES, LEESTEKENS of VREEMDE TEKENS IN DE BESTANDSNAMEN of MAPPEN VOORKOMEN!

Als je online in je Dropbox-account op zoek gaat naar de index.html, kun je daarvan de link kopiëren en naar iedereen toesturen.


Stuur de link van index.html naar t.denblanken@ma-web.nl.