3. De helpfunctie bevat ook een hoofdstuk over een site ontwerpen in de “Layout View”: Laying Out Pages in Layout Mode

4. Open Macromedia Dreamweaver (DW) Open de “Insert” balk (via taakbalk: Windows>Insert, of Ctrl+F2) Ga naar de Layout View (via Insert >Layout : kies ”Layout”) Dreamweaver (DW) wordt in deze opdracht gebruikt om snel de layout van een webpagina te schetsen. Meestal worden tabellen ingezet voor de bladschikking van HTML-pagina’s, een andere mogelijkheid is het gebruik van CSS layers. In de Layout View kunnen tabellen worden getekend. DW maakt er automatisch HTML code van. De HTML code die DW genereert, kan bekeken worden in de “ Code View ” of de Split View .

5. Het dialoogvenster “Getting started in Layout view” verschijnt met wat meer uitleg over Layout Cells en Layout Tables.

6. Save het bestand als “.htm” met een betekenisvolle naam en geef het document een titel. De titel en de bestandsnaam verschijnen in het venster bovenaan. Een “*” naast de bestandsnaam betekent dat de laatste aanpassing nog niet gesaved is. Typ hier de titel. Deze tekst komt automatisch tussen de title tags in de head -sectie van je HTML document.

7. De site mag niet breder zijn dan een browservenster op een scherm van 800*600. Dat betekend dat de breedste tabel op de pagina niet (veel) breder mag zijn dan 780 pixels. Zorg ook dat de gebruiker niet verticaal moet scrollen om belangrijke pagina items te zien. Hou, met andere woorden, het grootste deel van de homepage “above the fold”. Rekening houdend met de knoppenbalken, mag het belangrijkste deel van de pagina niet hoger zijn dan 420 pixels. Om pixel-precies te kunnen werken: schakel de “Rulers” in. Zet de ruler-units op “pixels” in hetzelfde menu.

8. Het volgende voorbeeld is een schets voor een website met de navigatieknoppenbalk bovenaan. Een doorsnee webpagina bestaat uit drie delen: Begin met 3 tabellen te tekenen, één voor elk deel. Om een tabel te tekenen: klik op het groene tabel-icoon, plaats de cursor in een hoek en sleep diagonaal om een rechthoek te tekenen. Pas de breedte van je tabellen evt. Aan in het “properties panel” (ctrl+F3) 1. Hoofding 2. Middenstuk 3. Voet

10. 2. Typ vervolgens in elke zone wat er zou moeten komen: het logo, een bepaalde knop, een inleidende tekst, etc.

11. 3. Probeer ook al eens wat kleuren uit: in een Layout Cell gebruik je het properties paneel: klik op de kleurenpaletknop naast Bg (=background). Elke kleur heeft een hexadecimale waarde.

12. Eindresultaat

13. Bekijk de HTML code van de pagina door bij in de taakbalk > View te kiezen voor Code of “Code and Design”

14. Bekijk de pagina in de Browser: kies File> preview in browser (F12)

15. In deze slides werd stap voor stap het ontwerpen van de eerste pagina van een website overlopen, de index of homepage. De homepage moet bezoekers naar binnen lokken, met een pak links naar de onderliggende pagina’s. Om de hele site een consistente layout te geven (belangrijk!), kan je op basis van het homepage ontwerp een subpagina-ontwerp maken: 1. Dupliceer je eerste ontwerp en geef het nieuwe bestand een andere naam 2. Selecteer de middenste kolom, delete ze en teken een nieuwe in de plaats en teken een cel op de plaats waar je ruimte voor je tekst wil voorzien. Wanneer je klaar bent met ontwerpen, of tenminste vrij zeker van het eindresultaat, kan je een template maken van je ontwerp en het hergebruiken in alle pagina’s.