Klik op Real-time voorvertoning in de statusbalk van Dreamweaver.
Laatst bijgewerkt op
25 feb. 2022
- Dreamweaver Handboek
- Inleiding
- Dreamweaver en Creative Cloud
- De werkruimten en weergaven van Dreamweaver
- Sites opzetten
- Over Dreamweaver-sites
- Een lokale versie van uw site instellen
- Verbinding maken met een publicatieserver
- Een testserver instellen
- Instellingen van Dreamweaver-sites importeren en exporteren
- Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
- Toegankelijkheidsfuncties in Dreamweaver
- Geavanceerde instellingen
- Sitevoorkeuren instellen voor het overzetten van bestanden
- Proxyserverinstellingen opgeven in Dreamweaver
- Dreamweaver-instellingen synchroniseren met Creative Cloud
- Git gebruiken in Dreamweaver
- Bestanden beheren
- Bestanden maken en openen
- Bestanden en mappen beheren
- Bestanden van uw server ophalen en op uw server plaatsen
- Bestanden inchecken en uitchecken
- Bestanden synchroniseren
- Bestanden vergelijken om verschillen op te sporen
- Bestanden en mappen op uw Dreamweaver-site camoufleren
- Ontwerpnotities inschakelen voor Dreamweaver-sites
- Potentieel misbruik van Gatekeeper voorkomen
- Lay-out en ontwerp
- CSS
- Informatie over CSS (Cascading Style Sheets)
- Pagina's opmaken met CSS ontwerpen
- CSS-preprocessors gebruiken in Dreamweaver
- CSS-stijlvoorkeuren instellen in Dreamweaver
- CSS-regels verplaatsen in Dreamweaver
- Inline CSS converteren naar een CSS-regel in Dreamweaver
- Werken met div-tags
- Verlopen toepassen op een achtergrond
- CSS3-overgangseffecten maken en bewerken in Dreamweaver
- Code opmaken
- Pagina-inhoud en assets
- Pagina-eigenschappen instellen
- Eigenschappen voor CSS-koppen en CSS-koppelingen
- Werken met tekst
- Tekst, tags en kenmerken zoeken en vervangen
- Het deelvenster DOM
- Bewerken in Live View
- Documenten coderen in Dreamweaver
- Elementen selecteren en weergeven in het documentvenster
- Teksteigenschappen instellen in de eigenschappencontrole
- Spelling op een webpagina controleren
- Horizontale lijnen gebruiken in Dreamweaver
- Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
- Werken met assets
- Datums in Dreamweaver invoegen en bijwerken
- Favoriete assets maken en beheren in Dreamweaver
- Afbeeldingen invoegen en bewerken in Dreamweaver
- Mediaobjecten toevoegen
- Video's toevoegen in Dreamweaver
- HTML5-video invoegen
- SWF-bestanden invoegen
- Audio-effecten toevoegen
- HTML5-audio invoegen in Dreamweaver
- Werken met bibliotheekitems
- Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
- Koppelingen en navigatie
- jQuery-widgets en -effecten
- Websites coderen
- Over coderen in Dreamweaver
- Coderingsomgeving in Dreamweaver
- Coderingsvoorkeuren instellen
- Codekleuren aanpassen
- Code schrijven en bewerken
- Coderingstips en codevoltooiing
- Code samenvouwen en uitvouwen
- Code hergebruiken met codefragmenten
- Linting voor code gebruiken
- Code optimaliseren
- Code bewerken in de ontwerpweergave
- Werken met de kopinhoud van pagina's
- Include-bestanden op de server invoegen in Dreamweaver
- Tagbibliotheken gebruiken in Dreamweaver
- Aangepaste tags importeren in Dreamweaver
- JavaScript-gedrag gebruiken (algemene instructies)
- Ingebouwd JavaScript-gedrag toepassen
- Over XML en XSLT
- XSL-transformaties op de server uitvoeren in Dreamweaver
- XSL-transformaties op de client uitvoeren in Dreamweaver
- Tekenentiteiten toevoegen voor XSLT in Dreamweaver
- Code opmaken
- Productonafhankelijke workflows
- Extensies in Dreamweaver installeren en gebruiken
- In-app updates in Dreamweaver
- Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
- Werken met Fireworks en Dreamweaver
- Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
- Integratie van Dreamweaver met Business Catalyst
- Persoonlijke e-mailcampagnes maken
- Sjablonen
- Over Dreamweaver-sjablonen
- Sjablonen en op een sjabloon gebaseerde documenten herkennen
- Een Dreamweaver-sjabloon maken
- Bewerkbare gebieden maken in sjablonen
- Herhalingsgebieden en tabellen maken in Dreamweaver
- Optionele gebieden in sjablonen gebruiken
- Bewerkbare tagkenmerken in Dreamweaver definiëren
- Geneste sjablonen maken in Dreamweaver
- Sjablonen bewerken, bijwerken en verwijderen
- XML-inhoud exporteren en importeren in Dreamweaver
- Een sjabloon uit een bestaand document toepassen of verwijderen
- Inhoud bewerken in Dreamweaver-sjablonen
- Syntaxisregels voor sjabloontags in Dreamweaver
- Voorkeuren voor de markering van sjabloongebieden instellen
- Voordelen van het gebruik van sjablonen in Dreamweaver
- Mobiel en meerdere schermen
- Dynamische sites, pagina's en webformulieren
- Informatie over web-applicaties
- Uw computer instellen voor het ontwikkelen van applicaties
- Problemen met databaseverbindingen oplossen
- Verbindingsscripts verwijderen in Dreamweaver
- Dynamische pagina's ontwerpen
- Overzicht van dynamische inhoudsbronnen
- Bronnen met dynamische inhoud definiëren
- Dynamische inhoud toevoegen aan pagina's
- Dynamische inhoud wijzigen in Dreamweaver
- Databaserecords weergeven
- Livegegevens leveren en problemen oplossen Dreamweaver
- Aangepast servergedrag toevoegen in Dreamweaver
- Formulieren maken met Dreamweaver
- Formulieren gebruiken om informatie van gebruikers te verzamelen
- ColdFusion-formulieren maken en inschakelen in Dreamweaver
- Webformulieren maken
- Verbeterde HTML5-ondersteuning voor formulierelementen
- Een formulier ontwikkelen met Dreamweaver
- Applicaties visueel samenstellen
- Hoofd- en detailpagina's maken in Dreamweaver
- Zoekpagina's en resultatenpagina's maken
- Een pagina voor het invoegen van records maken
- Een pagina voor het bijwerken van records maken in Dreamweaver
- Pagina's voor het verwijderen van records maken in Dreamweaver
- ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
- Een registratiepagina maken
- Een aanmeldingspagina maken
- Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
- Mappen beveiligen in ColdFusion met Dreamweaver
- ColdFusion-componenten gebruiken in Dreamweaver
- Websites testen, voorvertonen en publiceren
- Problemen oplossen
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.
-
Real-time voorvertoning
Real-time voorvertoning Er zijn opties om een real-time voorvertoning van uw webpagina's te bekijken in een browser.
-
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.
-
Als u hierom wordt gevraagd, slaat u de webpagina en de bijbehorende documenten op.
De browser wordt geopend en de webpagina wordt weergegeven.
-
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.
-
Selecteer Bestand > Real-time voorvertoning > Browserlijst bewerken.
Standaard statische voorvertoning in browser
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.
-
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.
-
Als u een browser wilt verwijderen uit de lijst, selecteert u de browser en klikt u op de knop Min (-).
-
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.
-
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.
-
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:
-
Zorg ervoor dat u werkt in de ontwerpweergave (Weergave > Ontwerp) of in de code- en ontwerpweergaven (Weergave > Code en ontwerp).
-
Klik op de knop Live View.
-
(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. -
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.
-
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.
-
Zorg ervoor dat u in Live View werkt.
-
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.
-
Als u markeringen voor wijzigingen in de weergave Live code wilt uitschakelen, kiest u Weergave > Live View-opties > Wijzigingen in Live code markeren.
-
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.
-
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.
-
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.
-
Sluit de pagina in de browser wanneer u klaar bent met testen.