De werkruimte van Dreamweaver

Inleiding tot Dreamweaver

Nadat Dreamweaver is geïnstalleerd en je de applicatie voor het eerst lanceert, verschijnt er een QuickStart-menu op het scherm met drie vragen die helpen je Dreamweaver-werkruimte aan je behoeften aan te passen.

Op basis van je antwoorden op deze vragen opent Dreamweaver in een Developer-Workspace (een minimale code-gerichte lay-out) of een Standard-Workspace (een gesplitste lay-out met visuele Tools en een voorvertoning in de applicatie terwijl je codeert). 

Nadat u een werkruimte hebt gekozen, selecteert u een kleurenthema dat u prettig vindt. Je kunt vervolgens aan de slag.

Verbeterd startscherm

Het startscherm in Dreamweaver geeft je snelle toegang tot je recent gebruikte bestanden, bestandstypen en starter-sjablonen.

Afhankelijk van uw abonnementstatus, wordt mogelijk ook speciaal op uw wensen afgestemde inhoud weergegeven in de Startwerkruimte.

Dreamweaver toont het startscherm bij het opstarten of wanneer er geen documenten open zijn.

Opties in het startscherm van Dreamweaver

Klik op Leren om direct toegang te krijgen tot de Dreamweaver-tutorials vanaf dit scherm.

Begin met het maken van documenten in Dreamweaver door op een van de weergegeven bestandstypen te klikken.

Open een van de starter-sjablonen die bij Dreamweaver worden geleverd. 

Klik op Startpagina om terug te gaan naar het startscherm. 

U kunt recente bestanden waaraan u hebt gewerkt, bekijken op het startscherm. Als je geen recente bestanden hebt, is dit tabblad leeg.

U kunt ook de zoekfunctie gebruiken via het zoekpictogram in de rechterbovenhoek van dit scherm. Wanneer je een zoekopdracht typt, toont de applicatie je recente bestanden, Creative Cloud-assets, helpkoppelingen en stockafbeeldingen die overeenkomen met de zoekopdracht.

Klik op Nieuw maken als u een nieuw Dreamweaver-bestand wilt maken. Als er al bestanden op uw systeem staan, klikt u op Openen. Voor informatie over het maken en openen van documenten in Dreamweaver, zie Bestanden maken en openen.

Overzicht van de werkruimte

In de werkruimte van Dreamweaver kunt u documenten en objecteigenschappen bekijken. De werkruimte plaatst ook veel van de meestgebruikte bewerkingen in werkbalken zodat u uw documenten snel kunt wijzigen.

Overzicht van de elementen in de werkruimte

De werkruimte bevat de volgende elementen:

Bevindt zich bovenaan het applicatievenster en bevat een werkruimtewisselaar, menu's (alleen Windows) en andere bedieningselementen van de applicatie.

Bevat knoppen die opties bieden voor verschillende weergaven van het Document-venster (zoals Design-weergave, Live-weergave en Code-weergave).

Als u de standaardwerkbalk wilt weergeven, selecteert u Venster > Werkbalken > Standaard. De werkbalk bevat knoppen voor veelgebruikte bewerkingen uit de menu's Bestand en Bewerken: Nieuw, Openen, Opslaan, Alles opslaan, Code afdrukken, Knippen, Kopiëren, Plakken, Ongedaan maken en Opnieuw.

Bevindt zich aan de linkerkant van het applicatievenster en bevat weergavespecifieke knoppen.

In dit venster wordt het huidige document weergegeven terwijl u het maakt en bewerkt.

Hier kunt u allerlei eigenschappen voor het geselecteerde object of de geselecteerde tekst bekijken en wijzigen. Elk object heeft verschillende eigenschappen.

Deze bevindt zich op de statusbalk, onder in het documentvenster. De tagkiezer toont de hiërarchie van de tags rondom de huidige selectie. Klik op een tag in de structuur om de tag met alle inhoud te selecteren.

Hiermee kunt u uw werk controleren en wijzigen. Voorbeelden zijn het paneel Invoegen, het paneel CSS-stijlen en het paneel Bestanden. Als u een paneel wilt uitvouwen, dubbelklikt u op de tab van het paneel.

Via dit deelvenster kunt u uw PSD-bestanden naar Creative Cloud uploaden en bekijken. Met dit paneel kun je CSS, tekst, afbeeldingen, lettertypes, kleuren, Verloop en metingen uit je PSD-comps in je document extraheren.

Deze balk bevat knoppen waarmee u diverse typen objecten in een document kunt invoegen, zoals afbeeldingen, tabellen en media-elementen. Elk object is een stukje HTML-code waarmee u verschillende kenmerken van het object kunt instellen. U kunt bijvoorbeeld een tabel invoegen door op de knop Tabel van het paneel Invoegen te klikken. Desgewenst kunt u het menu Invoegen in plaats van het paneel Invoegen gebruiken om objecten in te voegen.

Hier kunt u bestanden en mappen beheren, ongeacht of ze tot een Dreamweaver-site behoren of zich op een externe server bevinden. Met het deelvenster Bestanden hebt u ook toegang tot alle bestanden op uw lokale schijf. Zie Bestanden en mappen beheren voor meer informatie.

U kunt uw codefragmenten opslaan en opnieuw gebruiken voor verschillende webpagina's, andere sites en verschillende installaties van Dreamweaver (door synchronisatie-instellingen te gebruiken). Zie Code hergebruiken met codefragmenten voor meer informatie.

is een CSS-eigenschapsinspecteur waarmee je "visueel" CSS-stijlen, bestanden kunt maken en eigenschappen kunt instellen, samen met media queries.

Overzicht van het documentvenster

In het documentvenster wordt het huidige document weergegeven. Om van weergave te wisselen, gebruik je de weergaveopties op de Document-werkbalk. 

Je kunt ook van weergave wisselen met de weergaveopties in het menu Weergave.

toont een realistische weergave van hoe uw document eruitziet in een browser. De interactieve elementen in het document werken op dezelfde manier als in een browser. U kunt HTML-elementen rechtstreeks in Live View bewerken en ook direct een voorvertoning van uw wijzigingen in dezelfde weergave bekijken. Zie HTML-elementen bewerken in Live-weergave voor meer informatie over bewerken in Live-weergave.

is een ontwerpomgeving voor visuele pagina-indeling, visueel bewerken en snelle applicatieontwikkeling. In deze weergave geeft Dreamweaver een volledige bewerkbare, visuele voorstelling van het document weer, ongeveer zoals hetgeen u ziet wanneer u de pagina in een browser weergeeft.

is een handcodeeromgeving voor het schrijven en bewerken van HTML, JavaScript en elk ander type code.

is een gesplitste versie van Code-weergave waarmee je kunt scrollen om tegelijkertijd aan verschillende secties van het document te werken. 

laat je zowel Code-weergave als Live-weergave voor hetzelfde document in één venster zien.

laat je zowel Code-weergave als Design-weergave voor hetzelfde document in één venster zien.

toont de werkelijke code die een browser gebruikt om de pagina uit te voeren, en kan dynamisch wijzigen terwijl je met de pagina werkt in Live-weergave.

Wanneer een documentvenster is gemaximaliseerd (standaard), ziet u boven in het documentvenster tabs met daarop de bestandsnamen van alle geopende documenten. Dreamweaver toont een sterretje na de bestandsnaam als je wijzigingen hebt aangebracht die je nog niet hebt opgeslagen.

In Dreamweaver wordt onder het tabblad van het document (of onder de titelbalk van het document als u documenten in afzonderlijke vensters weergeeft) ook de werkbalk Verwante bestanden weergegeven. Verwante documenten zijn documenten die aan het huidige bestand zijn gekoppeld, zoals CSS-bestanden of JavaScript-bestanden. Als u een van deze verwante bestanden in het documentvenster wilt openen, klikt u op de betreffende bestandsnaam op de werkbalk Verwante bestanden.

Overschakelen op een andere weergave

Gebruik de documentwerkbalk om snel tussen verschillende weergaven te wisselen. Zie Overzicht van documentwerkbalk voor meer informatie.

Je kunt ook wisselen tussen weergaven met de volgende opties in het menu Beeld:

• Alleen codeweergave: selecteer Code
• Gesplitste weergave: selecteer Splitsen en selecteer een van de splitsopties
• Weergavemodus: schakel tussen Live- en Design-weergave
• Weergaven wisselen: wissel tussen weergaven.

Documentvensters opnieuw rangschikken, trapsgewijs of naast elkaar weergeven

Als u veel documenten tegelijk hebt geopend, kunt u ze trapsgewijs of naast elkaar weergeven.

Om documentvensters trapsgewijs te rangschikken: selecteer Venster > Rangschikken > Trapsgewijs.

Om documentvensters naast elkaar te plaatsen:

• (Windows) Selecteer Venster > Rangschikken > Horizontaal naast elkaar of Verticaal naast elkaar.
• (Macintosh) Selecteer Venster > Rangschikken > Naast elkaar.

Als u meerdere bestanden opent, worden de documentvensters als tabbladen weergegeven. Als u de rangschikking van dergelijke documentvensters wilt wijzigen, sleept u de tab van een venster naar een nieuwe locatie in de groep.

De grootte van het documentvenster wijzigen

In de statusbalk worden de huidige afmetingen (in pixels) van het documentvenster weergegeven. Als u een pagina wilt ontwerpen die er bij een bepaalde grootte goed uitziet, kunt u het documentvenster aanpassen aan een van de vooraf ingestelde formaten, die vooraf ingestelde formaten wijzigen of formaten maken.

Als u de weergavegrootte van een pagina wijzigt in de ontwerpweergave of in Live View, worden alleen de afmetingen van de weergavegrootte aangepast. De documentgrootte blijft ongewijzigd.

In Dreamweaver worden naast vooraf ingestelde en aangepaste afmetingen ook de afmetingen weergegeven die zijn opgegeven in een mediaquery. Als u een grootte selecteert die overeenkomt met een mediaquery, gebruikt Dreamweaver de mediaquery om de pagina weer te geven. U kunt ook de oriëntatie van de pagina wijzigen om de pagina voor te vertonen voor mobiele apparaten waarbij de paginalay-out afhankelijk is van de wijze waarop het apparaat wordt vastgehouden.

Om het documentvenster te vergroten of verkleinen, selecteer je een van de formaten in het pop-upmenu Vensterformaat onderaan het documentvenster.

De weergegeven venstergrootte komt overeen met de binnenmaten van het browservenster, zonder randen. De grootte van het scherm of mobiele apparaat wordt aan rechterkant weergegeven.

De waarden wijzigen in het pop-upmenu Venstergrootte

Een nieuw formaat toevoegen aan het pop-upmenu Venstergrootte

Overzicht van de documentwerkbalk

De documentwerkbalk bevat knoppen waarmee u snel kunt schakelen tussen de verschillende weergaven van uw document. De werkbalk bevat ook enkele veelvoorkomende opdrachten en opties voor de weergave van het document en het overbrengen van het document tussen de lokale en de externe site.

De documentwerkbalk bevat de volgende opties:

Hiermee geeft u alleen de codeweergave in het documentvenster weer.

Hiermee splitst u het documentvenster in de codeweergave en de Live View/ontwerpweergave. De optie Design-weergave is niet beschikbaar voor vloeiende rastersdocumenten.

Is een interactieve voorvertoning die projecten en updates van HTML5 precies weergeeft in real time om uw wijzigingen weer te geven terwijl u ze maakt. U kunt ook HTML-elementen in Live View bewerken. In de vervolgkeuzelijst naast de Live-opties kunt u schakelen tussen Live View en de ontwerpweergave. Deze vervolgkeuzelijst is niet beschikbaar in vloeiende rastersdocumenten.

Toont een weergave van het document die laat zien hoe de gebruiker het bekijkt in een webbrowser. 

Overzicht van de standaardwerkbalk

Als u de standaardwerkbalk wilt weergeven, selecteert u Venster > Werkbalken > Standaard. De werkbalk bevat knoppen voor veelvoorkomende bewerkingen uit de menu's Bestand en Bewerken: Nieuw, Openen, Opslaan, Alles opslaan, Code afdrukken, Knippen, Kopiëren, Plakken, Ongedaan maken en Opnieuw.

Overzicht van de werkbalk Browsernavigatie

De werkbalk Browsernavigatie wordt actief in Live View (alleen als u deze hebt ingeschakeld door Venster > Werkbalken > Standaard te selecteren) en geeft het adres weer van de pagina die u bekijkt in het documentvenster. Live View werkt net als een normale browser. Als u dus naar een site buiten uw lokale site bladert (bijvoorbeeld http://www.adobe.com/), wordt de pagina geladen in het documentvenster.

Koppelingen in Live View zijn standaard niet actief. Hierdoor kunt u in het documentvenster de tekst van de koppeling selecteren of erop klikken zonder dat u naar een andere pagina gaat. Om koppelingen in Live-weergave te testen, kun je eenmalig klikken of continu klikken inschakelen door Weergave > Live-weergaveopties > Koppelingen volgen (Ctrl+klik op koppeling) of Koppelingen continu volgen te selecteren.

Overzicht van de werkbalk

De werkbalk wordt verticaal aan de linkerzijde van het documentvenster weergegeven en is zichtbaar in alle weergaven - Code, Live en Ontwerp. De knoppen op de werkbalk zijn weergavespecifiek en worden alleen weergegeven als ze van toepassing zijn op de weergave waarin u werkt. Als je bijvoorbeeld werkt in Live-weergave, zijn codeweergave-specifieke opties zoals Broncode opmaken niet zichtbaar. 

Werkbalk aanpassen

Je kunt deze werkbalk aanpassen aan je behoeften door menuopties toe te voegen of ongewenste menuopties uit de werkbalk te verwijderen.

Ga als volgt te werk om de werkbalk aan te passen:

Om de standaard werkbalkknoppen te herstellen, klik je op Standaard herstellen in het dialoogvenster Werkbalk aanpassen.

Overzicht van de statusbalk

De statusbalk onder in het documentvenster bevat aanvullende informatie over het document dat u maakt.

Tagkiezer

De tagkiezer toont de hiërarchie van de tags rondom de huidige selectie. Klik op een tag in de structuur om de tag met alle inhoud te selecteren. Klik op <body> als u de hele inhoud van het document wilt selecteren. Als u in de tagkiezer de kenmerken class of id voor een tag wilt instellen, klikt u met de rechtermuisknop (Windows) of klikt u terwijl u Control ingedrukt houdt (Macintosh) op de tag en selecteert u een klasse of id in het contextmenu.

Deelvenster Uitvoer

Klik op dit pictogram om het deelvenster Output weer te geven dat codefouten in je document toont.

Codekleuren

(Alleen beschikbaar in codeweergave)

Selecteer een van de programmeertalen in dit pop-upmenu om de kleuren van de code te wijzigen volgens de programmeertaal.

Schakelen tussen Invoegen en Overschrijven

(Alleen beschikbaar in codeweergave)

Hiermee kun je schakelen tussen de modi Invoegen en Overschrijven tijdens het werken in codeweergave.

Regel- en kolomnummer

(Alleen beschikbaar in Code-weergave.)

Toont het regelnummer en kolomnummer waar de cursor zich bevindt.

Overzicht van de eigenschappencontrole

Met de Property Inspector (Venster > Eigenschappen) kun je de meest voorkomende eigenschappen voor het geselecteerde pagina-element bekijken en bewerken, zoals tekst of een ingevoegd object.

De inhoud van de eigenschappencontrole hangt af van het geselecteerde element. Als u bijvoorbeeld een afbeelding op uw pagina selecteert, verandert de eigenschappencontrole en worden de eigenschappen voor de afbeelding weergegeven, zoals het bestandspad naar de afbeelding, de breedte en hoogte van de afbeelding, de rand rond de afbeelding, enzovoort).

De eigenschappencontrole bevindt zich standaard langs de onderrand van de werkruimte, maar u kunt deze losmaken uit het dok en er een zwevend deelvenster in de werkruimte van maken.

Als u Help-informatie wilt bekijken over een bepaald item in de eigenschappencontrole, klikt u op de knop Help rechtsboven in de eigenschappencontrole of selecteert u Help in het menu Opties van de eigenschappencontrole.

Eigenschappen van een pagina-element weergeven en wijzigen

Contextmenu's

Via contextmenu's hebt u snel toegang tot de meest gebruikte opdrachten en eigenschappen die betrekking hebben op het object of venster waarmee u werkt. Contextmenu's tonen alleen die opdrachten die van toepassing zijn op de huidige selectie.

Om een contextmenu te openen, klik je met de rechtermuisknop (Windows) of Ctrl+klik (Mac) op een codegedeelte in codeweergave of op een object in Live- of ontwerpweergave.

Deelvensters in Dreamweaver opnieuw rangschikken

Je kunt de plaatsing en weergave van alle Dreamweaver-panelen aanpassen aan je vereisten.

Deelvensters koppelen en ontkoppelen

• Om een deelvenster te koppelen, sleept u het aan de tab naar het koppelingsgebied bovenaan, onderaan of tussen andere deelvensters.
• Om een deelvenstergroep te koppelen, sleept u het aan de titelbalk (de effen, lege balk boven de tabs) in het koppelingsgebied.
• Om een deelvenster of deelvenstergroep te verwijderen, sleept u deze aan de tab of de titelbalk uit het koppelingsgebied. U kunt ze naar een ander koppelingsgebied slepen of ze vrij laten zweven.

Deelvensters verplaatsen

Terwijl u een deelvenster verplaatst, ziet u blauw gemarkeerde neerzetzones. Dit zijn gebieden waarnaar u het deelvenster kunt verplaatsen. U kunt een deelvenster bijvoorbeeld omhoog of omlaag in een koppelingsgebied verplaatsen door het naar de smalle blauwe neerzetzone boven of onder een ander deelvenster te slepen. Als u het naar een gebied sleept dat geen neerzetzone is, zweeft het venster vrij in de werkruimte.

• U verplaatst een deelvenster door de tab van het deelvenster te slepen.
• Als u een deelvenstergroep wilt verplaatsen, sleept u de titelbalk.

Deelvensters toevoegen en verwijderen

Als u alle deelvensters uit een koppelingsgebied verwijdert, verdwijnt het koppelingsgebied. U kunt een koppelingsgebied maken door deelvensters naar de rechterrand van het werkgebied te verplaatsen totdat u een neerzetzone ziet.

• Als u een deelvenster wilt verwijderen, klikt u met de rechtermuisknop (Windows) of houdt u Control ingedrukt en klikt u (Mac) op het tabblad van het deelvenster en selecteert u Sluiten. U kunt de selectie van het deelvenster ook opheffen in het menu Venster.
• Als u een deelvenster wilt toevoegen, selecteert u het in het menu Venster en koppelt u het op de gewenste positie.

Deelvenstergroepen bewerken

• Om een deelvenster in een groep te verplaatsen, sleept u de tab van het deelvenster naar de gemarkeerde neerzetzone in de groep.
• Om deelvensters in een groep te herschikken, sleept u de tab van het deelvenster naar een nieuwe locatie in de groep.
• Om een deelvenster uit de groep te verwijderen zodat het vrij zweeft, sleept u het deelvenster aan de tab buiten de groep.
• Als u een groep wilt verplaatsen, sleept u de titelbalk (het gebied boven de tabbladen).

Zwevende deelvensters stapelen

Als u een deelvenster uit het koppelingsgebied sleept, maar niet neerzet in een neerzetzone, wordt het een vrij zwevend venster. U kunt zwevende vensters overal in de werkruimte plaatsen. U kunt zwevende deelvensters of deelvenstergroepen stapelen, zodat ze zich verplaatsen als een eenheid wanneer u de bovenste titelbalk versleept.

• Om zwevende deelvensters te stapelen, sleept u het deelvenster aan de tab naar de neerzetzone onder aan een ander deelvenster.
• Om de stapelvolgorde te wijzigen, sleept u een deelvenster omhoog of omlaag aan de tab.
• Om een deelvenster of deelvenstergroep uit de stapel te verwijderen, zodat het uit zichzelf zweeft, sleept u het aan de tab of titelbalk uit de stapel.

De grootte van deelvensters wijzigen

• Dubbelklik op een tabblad van een deelvenster, deelvenstergroep of stapel deelvensters om deze op minimale of maximale grootte weer te geven. U kunt dubbelklik in het tabbladgebied (de lege ruimte naast de tabbladen).
• Als u het formaat van een deelvenster wilt wijzigen, sleept u een van de zijden van het deelvenster. 

Deelvensterpictogrammen samenvouwen en uitvouwen

U kunt deelvensters samenvouwen tot pictogrammen om de werkruimte overzichtelijk te houden. In bepaalde gevallen worden deelvensters samengevouwen tot pictogrammen in de standaardwerkruimte.

• Klik op de dubbele pijl boven in het koppelingsgebied om alle deelvensterpictogrammen in een kolom samen of uit te vouwen.
• Als u het pictogram van één deelvenster wilt uitvouwen, klikt u erop.
• Als u het formaat van deelvensterpictogrammen zodanig wilt aanpassen dat u alleen de pictogrammen ziet (en niet de titels), versmalt u het koppelingsgebied totdat de tekst verdwijnt. Maak het koppelingsgebied breder als u de pictogramtekst weer wilt weergeven.
• Om een uitgevouwen deelvenster opnieuw samen te vouwen tot een pictogram, klikt u op de tab, het pictogram of de dubbele pijl in de titelbalk van het deelvenster.

Aangepaste werkruimten maken

U kunt uw werkruimte aan uw wens aanpassen door deelvensters toe te voegen of te verwijderen. Je kunt deze wijzigingen vervolgens opslaan in je werkruimte om deze later te openen via de werkruimteschakelaar in de documentwerkbalk.

Door de huidige grootte en positie van deelvensters als een benoemde werkruimte op te slaan, kunt u die werkruimte ook herstellen wanneer u een deelvenster verplaatst of sluit.

Aangepaste werkruimte opslaan:

1. Kies Venster > Werkruimtelay-out > Nieuwe werkruimte.
2. Typ een naam voor de werkruimte.

De werkruimte wordt opgeslagen en is zichtbaar in de schakeloptie Werkruimte op de documentwerkbalk.

Aangepaste werkruimte verwijderen:

Selecteer Werkruimten beheren via de schakeloptie Werkruimte op de toepassingsbalk om het deelvenster te openen. Selecteer de werkruimte en klik vervolgens op Verwijderen.

Werkruimten weergeven of schakelen tussen werkruimten

Selecteer een Workspace in de workspace-wisselaar in de werkbalk van het document.

Dreamweaver aanpassen in systemen met meerdere gebruikers

Je kunt Dreamweaver aanpassen aan je behoeften, zelfs in een multiuser-besturingssysteem zoals Windows XP of Mac OS X.

Dreamweaver voorkomt dat een aangepaste configuratie van een gebruiker invloed heeft op de aangepaste configuratie van een andere gebruiker. Hiertoe maakt Dreamweaver een kopie van een aantal configuratiebestanden wanneer u de toepassing de eerste keer uitvoert in een van de besturingssystemen voor meer gebruikers die door de toepassing worden herkend. Deze gebruikersconfiguratiebestanden worden opgeslagen in een map die u toebehoort.

Als je Dreamweaver opnieuw installeert of bijwerkt, maakt Dreamweaver automatisch back-upkopieën van bestaande gebruikersconfiguratie bestanden, dus als je die bestanden handmatig hebt aangepast, heb je nog steeds toegang tot de wijzigingen die je hebt gemaakt.

Documenten met tabs weergeven (alleen Mac)

U kunt meerdere documenten in een enkel documentvenster weergeven door tabs te gebruiken om elk document te identificeren. U kunt ze ook weergeven als deel van een zwevende werkruimte, waarin elk document in een eigen venster wordt weergegeven.

Een document met tabs openen in een afzonderlijk venster

Houd Control ingedrukt en klik op de tab en kies Ga naar nieuw venster in het contextmenu.

De standaardinstelling voor documenten met tabs wijzigen

1. Selecteer Dreamweaver > Voorkeuren en selecteer de categorie Algemeen.
2. Schakel Documenten openen in tabs in of uit en klik op OK.

Als u de voorkeuren in Dreamweaver wijzigt, wordt de weergave van momenteel geopende documenten niet gewijzigd. Documenten die worden geopend nadat u een nieuwe voorkeur hebt geselecteerd, worden echter weergegeven volgens de geselecteerde voorkeur.

Het welkomstscherm wordt weergegeven wanneer u Dreamweaver start en telkens wanneer er geen documenten zijn geopend. U kunt ervoor kiezen het welkomstscherm te verbergen en het later opnieuw weer te geven. Als het welkomstscherm is verborgen en er geen documenten zijn geopend, is het documentvenster leeg.

Veelgebruikte Dreamweaver-deelvensters

U werkt met een aantal deelvensters in Dreamweaver. Enkele van de veelgebruikte panelen worden hier beschreven.

Overzicht van het deelvenster Invoegen

Het deelvenster Invoegen (Venster > Invoegen) bevat knoppen voor het maken en invoegen van objecten zoals tabellen, afbeeldingen en koppelingen. De knoppen zijn ingedeeld in verschillende categorieën, die je kunt wisselen door de gewenste categorie te selecteren uit de vervolgkeuzelijst bovenaan.

Sommige categorieën bevatten knoppen met pop-upmenu's. Wanneer u een optie in een pop-upmenu selecteert, wordt dit de standaardactie voor de knop. Als je bijvoorbeeld Line Break selecteert uit het pop-up menu van de Character-button, voegt Dreamweaver de volgende keer dat je op de Character-button klikt een regeleinde in.Telkens wanneer u in het pop-upmenu een nieuwe optie selecteert, verandert de standaardactie voor de knop.

Het deelvenster Invoegen is in de volgende categorieën onderverdeeld:

Hiermee kun je de meest gebruikte HTML-elementen maken en invoegen, zoals div-tags en objecten zoals afbeeldingen en tabellen.

Bevat knoppen voor het maken van formulieren en het invoegen van formulierelementen, zoals search, month en password.

Hiermee kun je het document opslaan als een template en specifieke regio's markeren als bewerkbare, optionele, herhalende of bewerkbare optionele regio's.

Bevat Bootstrap-onderdelen voor navigatie, containers, dropdowns en meer die je kunt gebruiken in responsieve projecten.

Bevat knoppen voor het bouwen van sites die jQuery Mobile gebruiken.

Hiermee kun je jQuery UI-elementen invoegen zoals accordions, schuifregelaars en knoppen.

Hiermee kunt u de knoppen in het deelvenster Invoegen die u het meest gebruikt op één gemeenschappelijke plaats groeperen en organiseren.

Object invoegen

Een object invoegen met het paneel Invoegen:

Voorkeuren voor het deelvenster Invoegen bewerken

Items in de categorie Favorieten van het paneel Invoegen toevoegen, verwijderen of beheren

Overzicht van het deelvenster Bestanden

Gebruik het paneel Files om de bestanden op je Dreamweaver-site te bekijken en te beheren.

U kunt het deelvenster Bestanden gebruiken om bestanden en mappen te bekijken, te controleren of ze aan een Dreamweaver-site zijn gekoppeld of niet, en om standaard onderhoudsbewerkingen voor bestanden uit te voeren, zoals bestanden openen en verplaatsen.

Met het deelvenster Bestanden kunt u ook bestanden beheren en van en naar een externe server overbrengen. 

Voor meer informatie over alles wat je kunt doen met het paneel Files, zie Bestanden en mappen beheren.

CSS ontwerpen

Het paneel CSS Designer (Windows > CSS Designer) is een CSS Property Inspector waarmee je 'visueel' CSS-stijlen en bestanden kunt maken en eigenschappen kunt instellen, samen met media queries.

U kunt Ctrl/Cmd+Z gebruiken om alle acties die u in CSS ontwerpen uitvoert, ongedaan te maken of Ctrl/Cmd+Y gebruiken om alle acties opnieuw toe te passen. De wijzigingen worden automatisch in Live View weergegeven en het desbetreffende CSS-bestand wordt ook vernieuwd. Het tabblad van het betreffende bestand wordt enige tijd (ongeveer 8 seconden) gemarkeerd om aan te geven dat het verwante bestand is gewijzigd.

CSS Designer bestaat uit de volgende deelvensters en opties:

Alles Hier worden alle CSS, mediaquery's en kiezers weergegeven die aan het huidige document zijn gekoppeld. U kunt een filter instellen voor de vereiste CSS-regels en de eigenschappen aanpassen. Je kunt deze modus ook gebruiken om te beginnen met het maken van selectors of mediaqueries.

Deze modus is niet gevoelig voor de selectie. Dit betekent dat wanneer je een element op de pagina selecteert, de bijbehorende selector, mediaquery of CSS niet wordt gemarkeerd in CSS Designer.

Huidig Hier worden alle berekende stijlen weergegeven voor een element dat is geselecteerd in de ontwerpweergave of in de Live View van het huidige document. Wanneer je deze modus gebruikt voor een CSS-bestand in Codeweergave, worden alle eigenschappen voor de selector in focus weergegeven.

Deze modus is contextgevoelig. Gebruik deze optie om de eigenschappen van selectors die zijn gekoppeld aan geselecteerde elementen in het document te bewerken.

Bronnen Hier worden alle CSS-stijlpagina's weergegeven die aan het document zijn gekoppeld. Met dit deelvenster kunt u CSS maken en koppelen aan het document of stijlen definiëren in het document.

@Media Hier worden alle mediaquery's in de bron die is geselecteerd in het deelvenster Bronnen weergegeven. Als u geen specifieke CSS selecteert, bevat dit deelvenster alle mediaquery's die aan het document zijn gekoppeld.

Kiezers Hier worden alle kiezers in de bron die is geselecteerd in het deelvenster Bronnen weergegeven. Als u ook een mediaquery selecteert, wordt de lijst met kiezers in dit paneel beperkt tot die voor de mediaquery. Als er geen CSS of mediaquery is geselecteerd, bevat dit deelvenster alle kiezers in het document.

Wanneer je Global selecteert in het deelvenster @Media, worden alle selectors weergegeven die niet zijn opgenomen in een media query van de geselecteerde bron.

Eigenschappen Geeft de eigenschappen weer die u voor de opgegeven kiezer kunt instellen. Voor meer informatie, zie Eigenschappen instellen.

Wanneer u deelvensters in CSS ontwerpen samenvouwt of uitvouwt, worden de afmetingen ervan gedurende de hele sessie onthouden. De deelvensters Bronnen en Media behouden hun aangepaste afmetingen totdat u ze wijzigt.

Opmerking: Wanneer u een pagina-element selecteert, wordt de meest specifieke Kiezer geselecteerd in het deelvenster Kiezers. Om de eigenschappen van een specifieke selectie- te bekijken, klik je op de naam van die selectie- in het deelvenster.

Als u alle kiezers wilt weergeven, kiest u Alle bronnen in het deelvenster Bronnen. Om selectors te bekijken die niet tot een media query behoren in de geselecteerde bron, klik je op Algemeen in het deelvenster @Media.

Overzicht van visuele hulplijnen

Dreamweaver biedt verschillende soorten visuele hulplijnen om je te helpen documenten te ontwerpen en bij benadering te voorspellen hoe ze eruitzien in browsers. Je kunt het volgende doen:

• Klik het documentvenster meteen vast op een gewenste venstergrootte om te zien hoe de elementen op de pagina passen.

• Gebruik een overtrekafbeelding om een ontwerp te dupliceren dat is gemaakt in een illustratie- of beeldbewerkingstoepassing zoals Adobe® Photoshop® of Adobe® Fireworks®.

• Gebruik linialen en hulplijnen als visueel hulpmiddel om de pagina-elementen exact te positioneren en de grootte ervan in te stellen.

• Gebruik het raster om AP-elementen (elementen met absolute positie) exact te positioneren en de grootte ervan in te stellen.

  Met rastermarkeringen op de pagina kunt u AP-elementen makkelijker uitlijnen, en wanneer vastklikken is ingeschakeld, worden AP-elementen automatisch aan het dichtstbij gelegen rasterpunt vastgeklikt wanneer ze worden verplaatst of wanneer de grootte verandert. (Andere objecten, zoals afbeeldingen en alinea's, worden niet aan het raster vastgeklikt.) Vastklikken werkt ongeacht of het raster zichtbaar is.

In- en uitzoomen op een pagina

In Dreamweaver kunt u de vergroting verhogen (inzoomen) in het documentvenster, zodat u de pixelnauwkeurigheid van afbeeldingen kunt controleren, gemakkelijker kleine items kunt selecteren, pagina's met kleine tekst kunt ontwerpen, grote pagina's kunt ontwerpen, enzovoort.

Om in of uit te zoomen op een pagina, selecteer je Weergave > Ontwerpweergaveopties > Vergroting en kies je een van de beschikbare vergrotingsopties.

U kunt uit verschillende vergrotingsopties kiezen. Je kunt er ook voor kiezen om:

• Selectie passend maken - Selecteer een object of tekst en kies deze optie om het documentvenster te vullen met de selectie.
• Alles passend maken - Het documentvenster vullen met een hele pagina
• Passend maken aan breedte - Het documentvenster vullen met de volledige breedte van een pagina

Algemene voorkeuren instellen voor Dreamweaver

Lettertypevoorkeuren voor documenten in Dreamweaver instellen

Met de codering van een document wordt bepaald hoe het document wordt weergegeven in een browser. Met de lettertypevoorkeuren van Dreamweaver kunt u een bepaalde codering weergeven in het gewenste lettertype en de gewenste tekengrootte. De lettertypen die u in het dialoogvenster Voorkeuren voor lettertypen selecteert, hebben echter alleen invloed op de manier waarop lettertypen worden weergegeven in Dreamweaver; ze hebben geen invloed op de manier waarop het document in de browser van de bezoeker wordt weergegeven. Als u de manier wilt wijzigen waarop lettertypen in een browser worden weergegeven, moet u de tekst met de eigenschappencontrole wijzigen of er een CSS-regel op toepassen.

Voor informatie over het instellen van een standaardcodering voor nieuwe documenten, zie Documenten maken en openen.

Markeringskleuren van Dreamweaver aanpassen

Gebruik de voorkeuren voor markeren om de kleuren aan te passen die sjabloonregio's, bibliotheekitems, tags van derde partijen, lay-outelementen en code identificeren in Dreamweaver.

Verwante informatie

• Verwante bestanden openen
• Algemene informatie over coderen in Dreamweaver
• Coderingsvoorkeuren instellen
• Kopinhoud weergeven en bewerken
• Visuele lay-outhulpmiddelen gebruiken
• Pagina's voorvertonen
• Werken met bestanden in het deelvenster Bestanden