Handboek Annuleren

Pagina's voorvertonen

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen

 

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.
Adobe-logo

Aanmelden bij je account