Bekijk een voorvertoning van uw webpagina's in Dreamweaver, in browsers en op mobiele apparaten.

Met de real-time voorvertoning kunt u een voorvertoning van uw pagina's in de browser en op mobiele apparaten weergeven en tijdens het coderen de wijzigingen in real-time in de browser bekijken.

In Live View krijgt u een idee van hoe de pagina er op het web zullen uitzien en kunt u items in de codeweergave bewerken.

In de ontwerpweergave krijgt u ook een idee van hoe de pagina er op het web uitziet, maar wordt de pagina niet exact zo weergegeven als in browsers.

De functie Openen in browser toont hoe uw pagina's er in browsers uit zullen zien. Deze functie is het meest geschikt voor het werken met pagina's die dynamische gegevens uit databases gebruiken omdat dit niet in real-time is.

Lees verder voor meer informatie over de verschillende typen voorvertoningsopties in Dreamweaver.

Real-time voorvertoning in browser

U kunt een voorvertoning van uw webpagina's in real-time bekijken terwijl u codeert of pagina's ontwerpt in Dreamweaver. Met deze functie kunt u uw webpagina's gelijktijdig op meerdere browsers coderen en voorvertonen.

Wijzigingen in realtime voorvertonen in uw browser
Wijzigingen in realtime voorvertonen in uw browser

Opmerking:

U kunt ook in real-time een voorvertoning van uw code in mobiele apparaten weergeven tijdens het coderen. Zie Webpagina's van Dreamweaver voorvertonen op meerdere apparaten voor meer informatie.

  1. Klik op Real-time voorvertoning in de Dreamweaver-statusbalk.

    Real-time voorvertoning
    Real-time voorvertoning

    U hebt opties om een realtime voorvertoning van uw webpagina's te bekijken in een browser of op een apparaat.

    Als u een voorvertoning van uw webpagina's op een apparaat wilt bekijken, raadpleeg dan Dreamweaver-webpagina's voorvertonen op meerdere apparaten.

  2. Klik een van de beschikbare browser opties om een voorvertoning van uw webpagina's in de browser te bekijken.

    Opmerking:

    U kunt browsers bewerken die in deze lijst worden weergegeven. Raadpleeg als u een browser wilt toevoegen aan of verwijderen uit de lijst Browservoorkeuren instellen.

    Als u een testserver hebt, moet u ervoor zorgen dat u Bestanden automatisch naar testserver pushen inschakelt tijdens het instellen van de testserver.

    De real-time voorvertoning maakt gebruik van de bestanden op de testserver. Door Bestanden automatisch naar testserver pushen in te schakelen, kunt u wijzigingen in real-time bekijken.

    Bestanden automatisch naar testserver pushen inschakelen
    Bestanden automatisch naar testserver pushen inschakelen

  3. Als u hierom wordt gevraagd, slaat u de webpagina en de bijbehorende documenten op.

    De browser wordt geopend en de webpagina wordt weergegeven.

  4. Als u nu verder gaat met het coderen van uw pagina, kunt u de wijzigingen tijdens het coderen in de browser zien.

Voorkeuren voor voorbeeld in browser instellen

U kunt voorkeuren instellen die door de browser moeten worden gebruikt als u een voorbeeld van een site bekijkt en standaard primaire en secundaire browsers definiëren.

Deze browservoorkeuren wordt vervolgens gebruikt, ongeacht of u uw site online met real-time voorvertoning bekijkt, of dat u gewoon de pagina in een browser opent.

  1. Bestand selecteren > Real-time Voorvertoning > Browserlijst bewerken.

  2. Als u een browser wilt toevoegen aan de lijst, klikt u op de knop Plus (+), vult u het dialoogvenster Browser toevoegen in en klikt u op OK.
  3. Als u een browser wilt verwijderen uit de lijst, selecteert u op de browser en klikt u op de knop Min (-).
  4. Als u instellingen voor een geselecteerde browser wilt wijzigen, klikt u op de knop Bewerken, brengt u de wijzigingen aan in het dialoogvenster Browserlijst bewerken en klikt u op OK.
  5. Selecteer de optie Primaire browser of Secundaire browser om op te geven of de geselecteerde browser de primaire of de secundaire browser is.

    Met F12 (Windows) of Option+F12 (Macintosh) opent u de primaire browser en met Control+F12 (Windows) of Command+F12 (Macintosh) opent u de secundaire browser.

  6. Selecteer Voorvertonen met een tijdelijk bestand om een tijdelijke kopie te maken voor het bekijken van een voorbeeld en het oplossen van fouten op de server. (Schakel deze optie uit als u het document rechtstreeks wilt bijwerken.)

Pagina's voorvertonen in Live View

Live View verschilt van de traditionele ontwerpweergave van Dreamweaver en biedt een meer realistische weergave van hoe uw pagina er in een browser uitziet. Bovendien kan de pagina ook worden bewerkt. 

Vanuit de ontwerpweergave kunt op elk moment naar Live View schakelen. Het schakelen naar Live View houdt echter geen verband met het schakelen tussen een van de andere traditionele weergaven in Dreamweaver (codeweergave/gesplitste weergave/ontwerpweergave). Wanneer u vanuit de ontwerpweergave naar de live-weergave schakelt, schakelt u de ontwerpweergave gewoon van bewerkbaar naar 'live'.

Hoewel de ontwerpweergave bevriest wanneer u Live View activeert, kunt u de codeweergave blijven bewerken. U kunt de code dus wijzigen en daarna Live View vernieuwen om het effect van uw wijzigingen te bekijken. In Live View hebt u de extra mogelijkheid om live code te bekijken. De live codeweergave is te vergelijken met Live View in die zin dat deze een versie van de code toont die de browser uitvoert om de pagina weer te geven. Net als Live View is de live codeweergave een weergave die u niet kunt bewerken.

Een extra voordeel van Live View is de mogelijkheid om JavaScript te bevriezen. U kunt bijvoorbeeld naar Live View overschakelen en de muisaanwijzer op jQuery-tabelrijen plaatsen die van kleur veranderen door interactie van de gebruiker. Wanneer u JavaScript bevriest, wordt de huidige status van de pagina in Live View bevroren. U kunt vervolgens het CSS of JavaScript bewerken en de pagina vernieuwen om het effect van de wijzigingen te bekijken. Het bevriezen van JavaScript in Live View is handig als u eigenschappen wilt bekijken en wijzigen voor de diverse toestanden van pop-upmenu's of andere interactieve elementen die u in de traditionele ontwerpweergave niet kunt zien.

Pagina's voorvertonen in Live View:

  1. Zorg ervoor dat u in de ontwerp weergave (Weergave > Ontwerp) of Code- en ontwerpweergaven (Weergave > Code en ontwerp) werkt.

  2. Klik op de knop Live View.

  3. (Optioneel) Breng wijzigingen aan in de codeweergave, in het deelvenster CSS-stijlen, in een extern CSS-stijlblad of in een ander verwant bestand.

    De opties voor het bewerken van andere gebieden (bijvoorbeeld in het deelvenster CSS-stijlen of in de codeweergave) veranderen zodra u in Live View klikt, ook al kunt u niet bewerken in Live View.

    Opmerking:

    U kunt met verwante bestanden werken (bijvoorbeeld met CSS-stijlbladen) terwijl Live View de focus houdt. Daartoe opent u het verwante bestand vanaf de werkbalk Verwante bestanden, boven het document.

  4. Als u wijzigingen aanbrengt in de codeweergave of in een verwant bestand, vernieuwt u Live View door op de werkbalk Document op de knop Vernieuwen te klikken of door op F5 te drukken.

  5. Als u weer naar de bewerkbare ontwerpweergave wilt terugkeren, klikt u opnieuw op de knop Live View.

Live code voorvertonen

De code die in de live codeweergave wordt weergegeven, komt overeen met de code die u zou zien als u de paginabron vanuit een browser zou openen. Dergelijke paginabronnen zijn statisch, en tonen alleen de bron van de pagina vanuit de browser. De live codeweergave is echter dynamisch, en wordt bijgewerkt op basis van uw interacties met de pagina in Live View.

  1. Zorg ervoor dat u zich in Live View bevindt.

  2. Klik op de knop Live code.

    Dreamweaver toont de live code die de browser zou gebruiken om de pagina uit te voeren. De code wordt in het geel gemarkeerd en kan niet worden bewerkt.

    Met Live code worden tijdens interactie met de interactieve elementen op de pagina de dynamische wijzigingen in de code gemarkeerd.

  3. Als u markeringen voor wijzigingen in de live ve Live code wilt uitschakelen, kiest u Weergave > Live View-opties > Wijzigingen in Live code markeren.

  4. Als u weer naar de bewerkbare codeweergave wilt terugkeren, klikt u opnieuw op de knop Live code.

Als u de voorkeuren voor Live code wilt wijzigen, kiest u Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh OS) en selecteert u de categorie Codekleuren.

JavaScript bevriezen

Voer een van de volgende handelingen uit:

  • Druk op F6

  • Selecteer JavaScript bevriezen in het pop-upmenu van Live View.

Een informatiebalk, boven het document, toont de mededeling dat JavaScript is bevroren. Klik op de sluitkoppeling om de informatiebalk te sluiten.

Live View-opties

Naast de optie JavaScript bevriezen, zijn nog enkele andere opties beschikbaar in het pop-upmenu van de knop Live View of via het menu-item Weergave > Live View-opties.

JavaScript bevriezen Hiermee worden elementen die door JavaScript worden beïnvloed, in hun huidige toestand bevroren.

JavaScript uitschakelen Hiermee wordt JavaScript uitgeschakeld en wordt de pagina opnieuw weergegeven zoals in een browser waarvoor JavaScript niet is ingeschakeld.

Insteekmodule uitschakelen Hiermee worden invoegtoepassingen uitgeschakeld en wordt de pagina opnieuw weergegeven zoals in een browser waarvoor invoegtoepassingen niet zijn ingeschakeld.

Wijzigingen in Live code markeren Hiermee schakelt u markeringen voor wijzigingen in Live code in of uit.

De Live View-pagina in een nieuw tabblad bewerken Hiermee kunt u nieuwe tabbladen openen voor sitedocumenten waar u naartoe bladert via de werkbalk Browsernavigatie of de functie Koppelingen volgen. U moet eerst naar het document bladeren en De Live View-pagina in een nieuw tabblad bewerken selecteren voor u een nieuw tabblad kunt maken.

Koppeling volgen Hiermee wordt de volgende koppeling waarop u klikt, actief in Live View. U kunt een koppeling ook actief maken door Control ingedrukt te houden en in Live View op de koppeling te klikken.

Koppelingen continu volgen Hiermee maakt u de koppelingen in Live View blijvend actief totdat u de koppelingen weer uitschakelt of de pagina sluit.

Externe bestanden automatisch synchroniseren Hiermee worden het lokale en externe bestand automatisch gesynchroniseerd wanneer u op het pictogram Vernieuwen op de werkbalk Browsernavigatie klikt. Dreamweaver plaatst uw bestand op de server voordat het wordt vernieuwd waardoor de bestanden worden gesynchroniseerd.

Testserver gebruiken voor documentbron Deze optie wordt voornamelijk gebruikt door dynamische pagina's (zoals ColdFusion-pagina's), en wordt standaard geselecteerd voor dynamische pagina's. Als deze optie is geselecteerd, gebruikt Dreamweaver de versie van het bestand op de testserver van de site als de bron voor de weergave van Live View.

Lokale bestanden gebruiken voor documentkoppelingen gebruiken Dit is de standaardinstelling voor niet-dynamische sites. Als deze optie is geselecteerd voor dynamische sites die een testserver gebruiken, gebruikt Dreamweaver de lokale versies van bestanden die aan het document zijn gekoppeld (zoals CSS- en JavaScript-bestanden) in plaats van de bestanden op de testserver. U kunt dan lokale wijzigingen in verwante bestanden aanbrengen zodat u kunt zien hoe ze er uitzien voordat u ze op de testserver zet. Als deze optie is uitgeschakeld, gebruikt Dreamweaver de testserverversies van verwante bestanden.

HTTP-aanvraaginstellingen Kies deze optie om een dialoogvenster met geavanceerde instellingen te openen waarin u waarden kunt invoeren voor de weergave van live gegevens. Klik op in het dialoogvenster op Help voor meer informatie.

Openen in browser

U kunt op ieder moment een pagina in een browser openen; u hoeft deze daarvoor niet eerst naar een webserver te uploaden. Als u een voorvertoning van een pagina bekijkt, moeten alle browsergerelateerde functies werken, inclusief JavaScript gedragingen, documentgerelateerde en absolute links, ActiveX® besturingselementen, en browser plug-ins, vooropgezet dat u de benodigde plug ins of ActiveX besturingselementen in uw browsers heeft geïnstalleerd.

Voordat u een document opent, dient u het document eerst op te slaan in de browser; anders zal de browser uw meest recente wijzigingen niet tonen.

  1. Klik met de rechtermuisknop op de bestandsnaam in de documentwerkbalk en klik op Openen in browser.

    Opmerking:

    Als er geen browsers worden vermeld, selecteert u Bewerken > Voorkeuren of Dreamweaver > Voorkeuren (Macintosh) en selecteert u links de categorie Voorvertoning in browser om een browser te selecteren. Zie Voorkeuren voor voorbeeld in browser instellen voor meer informatie.

  2. Klik op koppelingen en test de inhoud op de pagina.

    Opmerking:

    inhoud die is gekoppeld via hoofdmapafhankelijke relatieve paden, wordt niet weergegeven wanneer u documenten voorvertoont in een lokale browser, tenzij u een testserver hebt ingesteld of de optie Voorvertonen met tijdelijk bestand is ingeschakeld in Bewerken > Voorkeuren > Voorvertoning in browser. De reden daarvoor is dat browsers de hoofdmap van sites niet herkennen en servers wel.

    Opmerking:

    Als u inhoud wilt voorvertonen die is gekoppeld via hoofdmapafhankelijke paden, plaatst u het bestand op een externe server en kiest u Bestand > Voorvertonen in browser om het bestand weer te geven.

  3. Sluit de pagina in de browser wanneer u klaar bent met testen.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid