De werkruimte van Dreamweaver

Als u Dreamweaver voor het eerst start nadat u de toepassing hebt geïnstalleerd, wordt er een snelstartmenu weergegeven met drie vragen aan de hand waarvan uw Dreamweaver-werkruimte aan uw wensen kan worden aangepast.

Op basis van uw antwoorden op deze vragen wordt Dreamweaver geopend in een ontwikkelaarwerkruimte (een minimale lay-out waarbij de nadruk op code ligt) of een standaardwerkruimte (een gescheiden lay-out met een voorvertoning die verandert terwijl u code invoert).

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

Verbeterd startscherm

Het startscherm in Dreamweaver biedt snel toegang tot uw onlangs gebruikte bestanden, bestandstypen en eenvoudige sjablonen.

Afhankelijk van uw lidmaatschapsstatus wordt mogelijk ook speciaal op uw wensen afgestemde inhoud weergegeven in de startwerkruimte.

Het startscherm wordt weergegeven wanneer Dreamweaver wordt gestart of wanneer er geen documenten zijn geopend.

Opties in het startscherm van Dreamweaver

Klik op Leren om vanuit dit scherm rechtstreeks toegang te krijgen tot de Dreamweaver-zelfstudies.

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

Open een van de eenvoudige sjablonen die bij Dreamweaver worden geleverd. 

Klik op Home om terug te gaan naar het startscherm.

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

U kunt ook de zoekfunctie gebruiken via het zoekpictogram in de rechterbovenhoek van dit scherm. Wanneer u een zoekopdracht typt, worden in de toepassing recente bestanden, Creative Cloud-middelen, Help-koppelingen en stockafbeeldingen weergegeven die voldoen aan 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. Zie Bestanden maken en openen. voor meer informatie over het maken en openen van documenten in Dreamweaver

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:

Langs de bovenrand van het toepassingsvenster vindt u een werkruimteschakelaar, menu's (alleen Windows) en andere besturingselementen voor de toepassing.

Deze balk bevat knoppen met opties voor verschillende weergaven van het documentvenster (zoals de ontwerpweergave, Live View en de codeweergave).

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.

Is aan de linkerkant van het applicatievenster en bevat specifieke 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 deelvenster Invoegen, het deelvenster CSS-stijlen en het deelvenster Bestanden. Als u een deelvenster wilt uitvouwen, dubbelklikt u op de tab van het deelvenster.

Via dit deelvenster kunt u uw PSD-bestanden naar Creative Cloud uploaden en bekijken. Met dit deelvenster kunt u CSS, tekst, afbeeldingen, lettertypen, kleuren, verlopen en afmetingen van uw PSD-samenstellingen naar uw 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 deelvenster Invoegen te klikken. Desgewenst kunt u het menu Invoegen in plaats van het deelvenster 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. Voor meer informatie raadpleegt u Bestanden en mappen beheren.

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-eigenschappencontrole waarmee u 'visueel' CSS-stijlen en -bestanden kunt maken en eigenschappen en mediaquery's kunt instellen.

Overzicht van het documentvenster

In het documentvenster wordt het huidige document weergegeven. Om de weergave van het document te veranderen, gebruikt u de weergaveopties op de documentwerkbalk.

U kunt weergaven ook wisselen met behulp van de opties 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 View voor meer informatie over het bewerken in Live View.

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 omgeving voor handmatig coderen voor het schrijven en bewerken van HTML, JavaScript en andere typen code.

is een gesplitste versie van de codeweergave waarmee u zo kunt bladeren dat u tegelijkertijd aan verschillende gedeelten van het document kunt werken.

is een weergave waarin u zowel de codeweergave als Live View voor hetzelfde document in één venster ziet.

is een weergave waarin u zowel de codeweergave als de ontwerpweergave voor hetzelfde document in één venster ziet.

geeft de werkelijke code weer die een browser gebruikt om de pagina uit te voeren. De weergave reageert op uw handelingen in Live View.

Wanneer een documentvenster is gemaximaliseerd (standaard), ziet u boven in het documentvenster tabs met daarop de bestandsnamen van alle geopende documenten. In Dreamweaver wordt een sterretje achter de bestandsnaam weergegeven als u wijzigingen hebt aangebracht die u 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 de documentwerkbalk voor meer informatie.

U kunt ook wisselen van weergave met behulp van de volgende opties in het menu Weergave:

• Alleen codeweergave: selecteer Code
• Gesplitste weergave: selecteer Splitsen en selecteer een van de splitsingsopties
• Weergavemodus: schakelen tussen Live- en ontwerpweergaven
• Weergaven wisselen: om van weergave te wisselen.

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 weer te geven: selecteer Venster > Ordenen > Trapsgewijs.

Om documentvensters naast elkaar weer te geven:

• (Windows) Selecteer Venster > Ordenen > Horizontaal of Verticaal naast elkaar weergeven.
• (Mac) Selecteer Venster > Ordenen > Naast elkaar weergeven.

Als u meerdere bestanden opent, worden de documentvensters als tabs 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.

Als u de grootte van het documentvenster te wijzigen, selecteert u een van de formaten in het pop-upmenu Venstergrootte, onderaan in 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 veelgebruikte 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 ontwerpweergaveoptie is niet beschikbaar voor documenten met dynamische rasters.

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 documenten met dynamische rasters.

Geeft een weergave van het document waarin wordt aangeduid hoe de gebruiker het in een webbrowser ziet.  

Overzicht van de standaardwerkbalk

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.

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. Als u koppelingen wilt testen in Live view, kunt u koppelingen eenmalig of doorlopend actief maken door Weergave > Live View opties > Koppelingen volgen (Ctrl + op koppeling klikken) 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 u bijvoorbeeld in Live View werkt, zijn de opties voor de codeweergave, zoals Broncode opmaken, niet zichtbaar.

Werkbalk aanpassen

U kunt ervoor kiezen om deze werkbalk in overeenstemming met uw behoeften aan te passen door menuopties toe te voegen of door ongewenste menuopties te verwijderen uit de werkbalk.

Om de werkbalk aan te passen, gaat u als volgt te werk:

Om de standaard werkbalkknoppen te herstellen, klikt u op Standaardwaarde 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 Uitvoer weer te geven dat coderingsfouten in uw document weergeeft.

Codekleuren

(Alleen beschikbaar in de codeweergave)

Selecteer een coderingstaal in dit pop-upmenu om de kleur van de code te wijzigen en weer te geven volgens de programmeertaal.

Schakelen tussen Invoegen en Overschrijven

(Alleen beschikbaar in de codeweergave)

U kunt schakelen tussen Invoegen en Overschrijven terwijl u werkt in de codeweergave.

Regel- en kolomnummer

(Alleen beschikbaar in de codeweergave.)

Geeft het regel- en kolomnummer weer waar de cursor zich bevindt.

Overzicht van de eigenschappencontrole

Met de eigenschappencontrole (Venster > Eigenschappen) kunt u de meest voorkomende eigenschappen voor het momenteel geselecteerde pagina-element, zoals tekst of een ingevoegd object, onderzoeken en bewerken.

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 en veranderen in een zwevend deelvenster in de werkruimte.

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 optiemenu 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 bevatten alleen de opdrachten die betrekking hebben op de huidige selectie.

Als u een aangepast contextmenu wilt openen, klikt u met de rechtermuisknop (Windows) of houdt u Ctrl ingedrukt en klikt u (Mac) op een deel van de code in de codeweergave of op een object in Live View of de ontwerpweergave.

Deelvensters in Dreamweaver opnieuw rangschikken

U kunt de positie en de weergave van alle Dreamweaver-deelvensters aan uw wensen aanpassen.

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 (Mac) u 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 dit 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 tabs).

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. U kunt deze wijzigingen in uw werkruimte dan opslaan om het later te openen met de schakeloptie Werkruimte op 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.

Een aangepaste werkruimte opslaan:

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

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

Een 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 werkruimte met de schakeloptie Werkruimte op de documentwerkbalk.

Dreamweaver aanpassen in systemen met meerdere gebruikers

U kunt Dreamweaver aan uw behoeften aanpassen, zelfs in een besturingssysteem voor meer gebruikers 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 u Dreamweaver opnieuw installeert of bijwerkt, maakt Dreamweaver automatisch reservekopieën van bestaande gebruikersconfiguratiebestanden. Als u deze bestanden handmatig hebt aangepast, blijven de wijzigingen dus behouden.

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 veelgebruikte deelvensters 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 in diverse categorieën geordend, waartussen u kunt schakelen door de gewenste categorie in de vervolgkeuzelijst aan de bovenkant te selecteren.

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 u bijvoorbeeld Regeleinde selecteert in het pop-upmenu van de knop Tekens, voegt Dreamweaver een regeleinde in wanneer u de volgende keer op de knop Tekens klikt. 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 kunt u veelgebruikte HTML-elementen, zoals div-tags, en objecten zoals afbeeldingen en tabellen invoegen.

Deze categorie bevat knoppen voor het maken van formulieren en het invoegen van formulierelementen, zoals zoeken, maand en wachtwoord.

Hiermee kunt u het document opslaan als een sjabloon en specifieke gebieden markeren als bewerkbaar, optioneel, herhalend of bewerkbare optionele gebieden.

Bevat Bootstrap-componenten voor navigatie, containers, vervolgkeuzelijsten en meer, die u kunt gebruiken in responsieve projecten.

Deze categorie bevat knoppen voor het maken van sites die jQuery Mobile gebruiken.

Hiermee kunt u elementen voor een jQuery-gebruikersinterface invoegen, zoals accordeon, 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

Als u een object wilt invoegen met het deelvenster Invoegen:

Voorkeuren voor het deelvenster Invoegen bewerken

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

Overzicht van het deelvenster Bestanden

Gebruik het deelvenster Bestanden om de bestanden in de Dreamweaver-site weer te geven 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 u met het deelvenster Bestanden kunt doen, zie Bestanden en mappen beheren.

CSS ontwerpen

Het deelvenster CSS ontwerpen (Venster > CSS ontwerpen) is een CSS-eigenschappencontrole waarmee u 'visueel' CSS-stijlen en -bestanden kunt maken en eigenschappen en mediaquery's kunt instellen.

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 u te laten weten dat het verwante bestand is gewijzigd.

Het deelvenster CSS ontwerpen 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. Gebruik deze modus om kiezers of mediaquery's te maken.

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

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 u deze modus gebruikt voor een CSS-bestand in de codeweergave, worden alle eigenschappen weergegeven voor de kiezer met focus.

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

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 deelvenster beperkt tot die voor de mediaquery. Als er geen CSS of mediaquery is geselecteerd, bevat dit deelvenster alle kiezers in het document.

Wanneer u Algemeen selecteert in het deelvenster @Media, worden alle kiezers weergegeven die niet zijn opgenomen in een mediaquery van de geselecteerde bron.

Eigenschappen Geeft de eigenschappen weer die u voor de opgegeven kiezer kunt instellen. Zie Eigenschappen instellen voor meer informatie.

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 net zo lang tot u ze wijzigt.

Opmerking: Wanneer u een pagina-element selecteert, wordt de meest specifieke Kiezer geselecteerd in het deelvenster Kiezers. Als u de eigenschappen van een specifieke kiezer wilt weergeven, klikt u op de naam van die kiezer in het deelvenster.

Als u alle kiezers wilt weergeven, kiest u Alle bronnen in het deelvenster Bronnen. Als u kiezers wilt weergeven die niet tot een mediaquery in de geselecteerde bron behoren, klikt u op Algemeen in het deelvenster @Media.

Overzicht van visuele hulplijnen

Dreamweaver beschikt over verschillende soorten visuele hulplijnen om u te helpen bij het ontwerpen van uw documenten en om te kunnen inschatten hoe de documenten in browsers worden weergegeven. U kunt dat op een van de volgende manieren 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.

Als u wilt in- of uitzoomen op een pagina, Selecteert u Weergave > Opties voor ontwerpweergave > Vergroting en kiest u een van de beschikbare vergrotingsopties.

U kunt uit verschillende vergrotingsopties kiezen. U kunt ook kiezen om:

• Selectie passend maken - Selecteer een object of tekst en kies deze optie om het Documentvenster met de selectie te vullen.
• Het documentvenster vullen met een hele pagina
• Aan breedte aanpassen - Het documentvenster vullen met de hele 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.

Zie Documenten maken en openen voor informatie over het instellen van standaardcodering voor nieuwe documenten.

Markeringskleuren van Dreamweaver aanpassen

Gebruik de markeervoorkeuren om de kleuren aan te passen waarmee sjabloongebieden, bibliotheekitems, tags van derden, indelingselementen en code in Dreamweaver worden gemarkeerd.