Dreamweaver weergaven: Code, Splitsen, Live en Ontwerp

De Dreamweaver weergaven bepalen hoe je naar je pagina kijkt terwijl je eraan werkt. Je kunt alleen de code zien, alleen een visuele voorvertoning, of beide naast elkaar. Dreamweaver kent vier hoofdweergaven: Code, Splitsen, Live en Ontwerp. Wie ze goed leert gebruiken, werkt sneller en maakt minder fouten.

In dit artikel lees je wat elke weergave doet, wanneer je hem het best inzet, hoe je ertussen wisselt en welke valkuilen je moet kennen. Ben je nieuw in het programma, lees dan eventueel eerst wat Dreamweaver is en wat je ermee kunt.

Waar vind je de weergaven?

Bovenaan het documentvenster staat de documentwerkbalk met knoppen voor Code, Splitsen en Live. De knop Live heeft een uitklapmenu waarmee je tussen Live en Ontwerp wisselt. Zie je de werkbalk niet, zet hem dan aan via Venster > Werkbalken > Document (Window > Toolbars > Document).

Je kunt ook het menu Weergave (View) gebruiken. Daar kies je voor alleen Code, voor een van de gesplitste varianten, of je wisselt tussen Live en Ontwerp. Voor snel wisselen met het toetsenbord kun je de sneltoetsen gebruiken uit ons overzicht van handige Dreamweaver-sneltoetsen.

De weergave Code

In de weergave Code zie je alleen de broncode van je bestand. Dit is de weergave voor wie graag zelf typt. Dreamweaver helpt daarbij met:

• kleurcodering, zodat tags, kenmerken en waarden makkelijk te onderscheiden zijn;
• codehints: suggesties voor tags, CSS-eigenschappen en waarden terwijl je typt;
• automatisch sluiten van tags;
• foutmarkering (linting) voor fouten in HTML, CSS en JavaScript;
• samenvouwen van codeblokken, zodat je lange bestanden overzichtelijk houdt.

Voor CSS-, JavaScript- en PHP-bestanden is Code de enige zinvolle weergave. Bij zulke bestanden zijn de visuele weergaven en het paneel Invoegen ook uitgeschakeld, omdat je in pure codebestanden geen visuele elementen kunt plaatsen.

De weergave Splitsen

Splitsen verdeelt het documentvenster in twee delen: code aan de ene kant en een visuele weergave aan de andere. Voor de meeste mensen is dit de handigste manier van werken, zeker als je HTML en CSS nog aan het leren bent. Klik je in de visuele helft op een element, dan springt de code naar de bijbehorende regel. Andersom zie je direct wat een wijziging in de code doet.

In het menu Weergave vind je een paar varianten:

Variant	Wat zie je?	Handig voor
Code – Live	Code naast de weergave Live	Dagelijks werk aan pagina’s
Code – Ontwerp	Code naast de weergave Ontwerp	Oudere pagina’s of sjablonen bewerken
Code – Code	Twee keer hetzelfde bestand in Code	Twee delen van een lang bestand tegelijk bekijken

Je kunt de deling horizontaal of verticaal instellen. Op een breed scherm werkt een verticale deling (naast elkaar) meestal het prettigst.

De weergave Live

Live toont je pagina zoals een moderne browser dat doet. Dreamweaver gebruikt hiervoor een ingebouwde browserengine, waardoor CSS-layouts met flexbox en grid, webfonts en JavaScript gewoon werken. Animaties, uitklapmenu’s en sliders zie je dus in actie.

Je kunt in Live ook bewerken. Selecteer een element en je ziet een klein label met de tagnaam en eventuele klassen. Daarmee kun je klassen of een ID toevoegen. Tekst pas je aan door erop te dubbelklikken. Wil je bekijken wat JavaScript met je pagina doet, schakel dan Live Code in: dan zie je de code zoals de browser die op dat moment gebruikt, inclusief wijzigingen die door scripts zijn gemaakt.

Live is ook de weergave waarin je werkt met responsive ontwerp. Je kunt de breedte van het venster aanpassen en zien hoe je media queries reageren. Bouw je een site met Bootstrap, dan is dit de weergave die je het meest gebruikt. Meer daarover lees je in een responsive website maken met Bootstrap in Dreamweaver.

De weergave Ontwerp

Ontwerp is de oudste visuele weergave van Dreamweaver. Het werkt een beetje als een tekstverwerker: je typt tekst, sleept elementen en ziet hulplijnen rond tabellen en blokken. Voor eenvoudige pagina’s, het invullen van tekst en het werken met sjablonen is dat prettig.

Er zit wel een belangrijk nadeel aan. Ontwerp gebruikt geen moderne browserengine, waardoor eigentijdse CSS niet altijd correct wordt getoond. Een layout met flexbox of grid kan er in Ontwerp anders uitzien dan in een echte browser, en JavaScript wordt niet uitgevoerd. Gebruik Ontwerp daarom vooral om snel tekst of structuur aan te passen, en controleer het resultaat altijd in Live of in je browser. Bij sommige documenttypen is Ontwerp ook helemaal niet beschikbaar.

Welke weergave gebruik je wanneer?

Er is geen goede of foute keuze, maar deze vuistregels helpen:

• Je leert HTML en CSS: werk in Splitsen met Code en Live naast elkaar.
• Je schrijft vooral zelf code: gebruik Code en open Live alleen om te controleren.
• Je past teksten aan op een bestaande pagina: Live of Ontwerp, afhankelijk van hoe modern de pagina is.
• Je werkt aan een responsive layout: Live, met wisselende vensterbreedtes.
• Je bewerkt een pagina op basis van een sjabloon: Ontwerp of Live, omdat je dan de bewerkbare gebieden duidelijk ziet.

Welke weergave standaard opent, hangt mede af van je werkruimte. In de werkruimte Ontwikkelaar ligt de nadruk op Code, in Standaard op de gesplitste weergave. Je eigen favoriete indeling sla je op als aangepaste werkruimte.

Veelvoorkomende problemen met weergaven

Een paar situaties waar je tegenaan kunt lopen:

1. Live blijft leeg of laadt niet. Sla de pagina op en controleer of het bestand binnen een gedefinieerde site staat. Een herstart van Dreamweaver lost het vaak op.
2. De knop Ontwerp is grijs. Je hebt waarschijnlijk een codebestand open, zoals CSS of JavaScript, of een documenttype waarvoor Ontwerp niet beschikbaar is.
3. Live en browser tonen iets anders. Controleer of alle gekoppelde bestanden zijn opgeslagen en of je browsercache je geen oude versie laat zien.
4. Je kunt in Live geen tekst aanpassen. Dat kan bij inhoud die door JavaScript wordt opgebouwd of bij delen van een pagina die op een sjabloon zijn gebaseerd en niet bewerkbaar zijn.

Meer uitleg over de werkruimte en alle weergaven vind je in de Adobe-documentatie over de werkruimte van Dreamweaver.

Conclusie

De vier Dreamweaver weergaven hebben elk hun eigen rol. Code is voor typen en precisie, Splitsen voor leren en dagelijks werk, Live voor een betrouwbare en interactieve voorvertoning, en Ontwerp voor snelle tekstaanpassingen op eenvoudige pagina’s. Combineer ze slim: schrijf in Code, controleer in Live en test uiteindelijk altijd in een echte browser. Dan weet je zeker dat wat je ziet ook is wat je bezoekers zien.

Veelgestelde vragen