Handboek Annuleren

Pagina's voorvertonen

 

 

Bekijk een voorvertoning van uw webpagina's in Dreamweaver en in browsers.

Met real-time voorvertoning kunt u een voorvertoning van uw pagina's in de browser bekijken en de wijzigingen in real-time in de browser zien terwijl u codeert.

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

In de ontwerpweergave krijgt u ook een idee 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 uitzien. Deze functie is het meest geschikt voor pagina's die dynamische gegevens uit databases gebruiken omdat dit niet in real-time is.

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

Real-time voorvertoning in browser

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

Wijzigingen in real-time voorvertonen in uw browser
Wijzigingen in real-time voorvertonen in uw browser

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

    Real-time voorvertoning
    Real-time voorvertoning

    Er zijn opties om een real-time voorvertoning van uw webpagina's te bekijken in een browser.

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

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

    Als u een testserver hebt, moet u ervoor zorgen dat u Bestanden automatisch naar testserver pushen inschakelt wanneer u de testserver instelt. 

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

  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 voorvertoning in browser instellen

U kunt schakelen tussen real-time voorvertoning en voorvertoning in browser. Stel voorkeuren in die de browser moet gebruiken als u een voorvertoning van een site bekijkt en als u standaard primaire en secundaire browsers wilt definiëren.

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

  1. Selecteer Bestand > Real-time voorvertoning > Browserlijst bewerken.

    Real-time voorvertoning
    Standaard statische voorvertoning in browser

    Als u de optie Standaard statische voorvertoning in browser uitschakelt, is real-time voorvertoning uitgeschakeld. U kunt de sneltoetsen voor de primaire en secundaire browser gebruiken om de voorvertoning in de browser te openen. U kunt ook het menu Bestand gebruiken of klikken op het pictogram voor apparaatvoorvertoning in de statusbalk.

  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 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, zodat u een voorvertoning kunt bekijken en fouten op de server kunt oplossen. (Schakel deze optie uit als u het document rechtstreeks wilt bijwerken.)

Standaard statische voorvertoning in browser Hierbij kunnen gebruikers de modus kiezen waarin ze hun bestanden in de browser willen voorvertonen. Als u het selectievakje inschakelt, kunnen gebruikers voorvertoningen van bestanden bekijken met behulp van 'Openen in browser' in het menu en met behulp van sneltoetsen. Als dit is uitgeschakeld, wordt Real-time voorvertoning gebruikt om bestanden in de browser te bekijken. Standaard is het selectievakje uitgeschakeld en wordt Real-time voorvertoning gebruikt om voorvertoningen van bestanden in de browser te bekijken.

Pagina's voorvertonen in Live View

Live View verschilt van de traditionele ontwerpweergave van Dreamweaver en biedt een nauwkeuriger weergave van hoe uw pagina er in een browser uitziet. Bovendien kan de pagina nu 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 Live View 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 werkt in de ontwerpweergave (Weergave > Ontwerp) of in de code- en ontwerpweergaven (Weergave > Code en ontwerp).

  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 delen (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.

    U kunt met verwante bestanden werken (bijvoorbeeld met CSS-stijlbladen) terwijl de live weergave 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 in Live View werkt.

  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 weergave 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 stappen 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.

Opties van Live View

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 insteekmodules (plug-ins) uitgeschakeld en wordt de pagina opnieuw weergegeven zoals in een browser waarvoor insteekmodules 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 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 koppelingen, ActiveX®-besturingselementen en browserplug-ins, vooropgezet dat u de benodigde plug-ins of ActiveX-besturingselementen in uw browsers hebt geïnstalleerd.

Voordat u een document opent, dient u het document 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 weergegeven, 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.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?