Een wireframe layout tekenen in Dreamweaver met de Layout View.

Wireframe, layout grid, of stramien= schets van de bladschikking zonder grafische elementen

Papieren prototype HTML prototype

De screenshots in deze slides komen voor een stuk uit Dreamweaver 4, maar de techniek blijft dezelfde in de latere dreamweaver versies.

• Raadpleeg de hulpfunctie (F1. Using Dreamweaver) om Dreamweaver te leren kennen.

• In deze slides wordt het gebruik van de Layout View voor een ruwe schets (wireframe) van de pagina-layout toegelicht.

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

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.

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

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.

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.

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. Hoofding2. Middenstuk 3. Voet

1. Gebruik nu de Layout Table en Layout Cell functies om de zone’s af te bakenen waar tekst en beelden zullen komen.

De grootte van een cel kan je aanpassen door de omtrek te selecteren en vervolgens de handvaten van de kader te verslepen. Opgelet: hoe complexer de tabel al uitgetekend is, hoe minder aanpassingen aan individuele cellen mogelijk. Soms is herbeginnen met een tabel het makkelijkst.

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

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.

Eindresultaat

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

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

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 naam2. 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.