Handboek Annuleren

Bewerken in Live View

Zoeken

Laatst bijgewerkt op 3 mei 2021

Leer hoe u webpagina's kunt ontwerpen, bewerken en voorvertonen in Live View. U kunt elementen opnieuw rangschikken of elementen invoegen, kiezers toepassen, afbeeldingskenmerken bewerken en tekst invoegen, bewerken en opmaken zonder over te schakelen naar codeweergave.

In Live View wordt een op Chromium gebaseerde rendering-engine gebruikt, zodat de inhoud er in Dreamweaver net zo uitziet als in uw favoriete webbrowsers. Tijdens het ontwikkelen kunt u overschakelen naar Live View om snel een voorvertoning van uw pagina weer te geven. Ook kunt u HTML-elementen rechtstreeks in Live View weergeven, zodat u minder hoeft te schakelen tussen de verschillende weergaven (code- en ontwerpweergave) en tijd bespaart.

Live View wordt direct vernieuwd om de wijzigingen op de pagina weer te geven.

U kunt de volgende componenten gebruiken om uw pagina in Live View te bewerken:

Deelvenster DOM: (Venster > DOM) geeft de HTML-structuur van uw document weer en u kunt elementen in de weergave kopiëren, plakken, dupliceren, verwijderen en opnieuw indelen. Zie Het deelvenster DOM voor meer informatie.
Elementweergave: wordt boven het geselecteerde HTML-element in Live View weergegeven. In de elementweergave kunt u HTML-elementen koppelen aan klassen en id's. Zie HTML-elementen aan klassen en id's koppelen voor meer informatie.
Snelle eigenschappencontrole: wordt weergegeven wanneer u op het sandwichpictogram in de elementweergave klikt of tekst selecteert. In de Snelle eigenschappencontrole kunt u afbeeldingskenmerken bewerken en tekst opmaken in Live View. Zie Snelle eigenschappencontrole voor meer informatie.
Eigenschappencontrole van Live View: wordt onder het documentvenster weergegeven. U kunt hierin allerlei HTML- en CSS-eigenschappen bewerken. Zie Eigenschappencontrole van Live View voor meer informatie.
Deelvenster Invoegen: (Venster > Invoegen) u kunt elementen vanuit dit deelvenster rechtstreeks naar Live View slepen. Zie Elementen rechtstreeks in Live View invoegen voor meer informatie.

Opmerking:

Als uw pagina dynamisch (door scripts) wordt gewijzigd of voor de pagina het vernieuwen van metagegevens is ingeschakeld, kunnen bewerkingen die u in Live View uitvoert, verloren gaan.

Tips:

Als er niets meer in Live View wordt weergegeven wanneer u de pagina bewerkt, schakelt u Live View uit en vervolgens weer in.
Als de bewerkingen niet op de pagina worden weergegeven, klikt u in Live View op de knop Vernieuwen.

Inhoud die dynamisch door databases of JavaScript wordt weergegeven en niet-bewerkbare gebieden in sjablonen kunnen niet in Live View worden weergeven. Wanneer u in Live View op dergelijke elementen klikt, wordt er een grijze rand rond deze elementen weergegeven om aan te geven dat de elementen niet kunnen worden bewerkt.

Een element met een grijze rand in Live View kan niet worden bewerkt

Opmerking:

In Live View zijn alleen de opties die voor het geselecteerde element van toepassing zijn, beschikbaar in het hoofdmenu. Opties die niet van toepassing zijn, worden grijs weergegeven en zijn niet beschikbaar wanneer het element wordt geselecteerd.

Elementweergave

In de elementweergave kunt u in Live View rechtstreeks HTML-elementen aan klassen en id's koppelen. In de elementweergave krijgt u tips over de beschikbare klassen en id's die u helpen snel de vereiste optie weer te geven en te kiezen.

U kunt ook tabellen opmaken met de elementweergave. Gebruik de koppeling voor meer informatie.

HTML-elementen aan klassen en id's koppelen

Klik op het gewenste element in Live View. De elementweergave verschijnt en in de weergave worden de momenteel gekoppelde klasse en id weergegeven.

In Live View kunt u ook in het deelvenster DOM op het HTML-element klikken om de elementweergave voor het element weer te geven.

Als u de koppeling tussen het HTML-element en een klasse of id ongedaan wilt maken, klikt u op de 'x' naast de klasse of id.
Als u de klasse of id wilt wijzigen die is gekoppeld aan het HTML-element, klikt u in het vak. Er wordt een lijst met beschikbare klassen en id's weergegeven. Klik op de gewenste optie.
Als u een klasse of een id wilt toevoegen en wilt toepassen op het element, klikt u op de '+' en typt u de naam. Klik op '+' of druk op Enter om de wijzigingen op te slaan.

U kunt vervolgens CSS ontwerpen gebruiken om een kiezer te definiëren die deze klasse of id bevat. Zie Pagina's opmaken met CSS ontwerpen voor meer informatie.

Opmerking:

De elementweergave van overgangselementen beweegt niet mee met de elementen wanneer de overgang wordt geactiveerd. De wijzigingen die u via de elementweergave aanbrengt, worden wel van kracht, maar niet op dezelfde locatie als het overgangselement.

Snelle eigenschappencontrole

Snelle eigenschappencontrole voor afbeeldingen

De functie Snelle eigenschappencontrole verschijnt direct boven de geselecteerde elementen in Live View. Met deze eigenschappencontrole kunt u kenmerken bewerken of tekst opmaken in Live View.

Snelle eigenschappencontrole wordt direct boven de pagina-elementen in Live View weergegeven

Als u Snelle eigenschappencontrole wilt weergeven of verbergen, drukt u op Ctrl+Alt+H (Win) of CMD+Ctrl+H (Mac).

Opmerking:

Het pictogram van de codenavigator wordt niet weergegeven in Live View als u gebruikmaakt van Snelle eigenschappencontrole.

De Snelle eigenschappencontrole bevat ook opties voor het aanpassen van afbeeldingen in Bootstrap-documenten.

Snelle eigenschappencontrole voor afbeeldingen in Bootstrap-documenten

Bijsnijden naar vorm: klik om de hoeken van afbeeldingen bij te snijden tot cirkelvormige of afgeronde hoeken of als miniatuurafbeelding.
Afbeelding responsief maken: klik om afbeeldingen responsief maken, zodat ze zich aanpassen aan verschillende schermgrootten.

Snelle eigenschappencontrole voor tekst

Met Snelle eigenschappencontrole voor tekst in Live View kunt u snel tekst opmaken, laten inspringen en van een hyperlink voorzien. Snelle eigenschappencontrole voor tekst wordt weergegeven wanneer u op het sandwichpictogram voor tekstelementen klikt: h1-h6, pre en p.

Met de opmaakoptie kunt u de tag van het element snel wijzigen in een van de volgende: h1-h6, p en pre.
Met de koppelingsoptie kunt u een hyperlink aan het tekstelement toevoegen.
Met de pictogrammen voor Vetgedrukt en Cursief kunt u de tags <strong> en <em> aan het tekstelement toevoegen.
Met de pictogrammen voor inspringen kunt u de tekst laten inspringen of de inspringing verwijderen. De tag <blockquote> wordt overeenkomstig toegevoegd aan of verwijderd uit de code.

In Bootstrap-documenten kunt u met de Snelle eigenschappencontrole voor tekst de tekstelementen ook uitlijnen en transformeren.

Uitlijnen: u kunt Bootstrap-tekstelementen links, gecentreerd, rechts of regelvullend uitlijnen door de betreffende klassen toe te passen.
Transformeren: u kunt het hoofdlettergebruik van een element wijzigen door de klassen voor kleine letters, hoofdletters of hoofdletters als in een zin toe te passen.

Eigenschappencontrole van Live View

Eigenschappencontrole van Live View is de traditionele eigenschappencontrole die onder het documentvenster beschikbaar is.

Met de eigenschappencontrole van Live View 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 van Live View varieert, afhankelijk van het geselecteerde element.

Opmerking:

Eigenschappencontrole van Live View is niet beschikbaar op pagina's met dynamische rasters.

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.

Hier volgen de elementen die u met deze eigenschappencontrole van Live View kunt bewerken:

HTML

Image

Table

Media - alleen HTML5-audio en HTML5-video

Anchor

Form

FormButton

FormTextArea

FormSubmitButton

FormRange

FormRadioButton

FormList

FormImage

FormFile

FormCheckBox

FormColor

FormDate

FormDateTime

FormDateTimeLocal

FormMonth

FormTime

FormWeek

FormNumber

FormLabel

FormHidden

FormGeneric

Opmerking:

Eigenschappen die zijn gerelateerd aan de jQuery-gebruikersinterface en sjablonen kunnen niet in de eigenschappencontrole van Live View worden bewerkt.

HTML-kenmerken bewerken

U kunt snel en rechtstreeks HTML-kenmerken van afbeeldingen in Live View toevoegen, bewerken of verwijderen met de Snelle eigenschappencontrole.

De Snelle eigenschappencontrole voor afbeeldingen wordt weergegeven wanneer u op het sandwichpictogram klikt. Afhankelijk van de beschikbare ruimte, wordt de eigenschappencontrole van Live View rechts, links, onder of boven de afbeelding weergegeven. U kunt de eigenschappencontrole van Live View verplaatsen en op elke gewenste positie neerzetten.

Snelle eigenschappencontrole voor het bewerken van kenmerken

Als u de kenmerken wilt bewerken, klikt u op het sandwichpictogram in de Snelle eigenschappencontrole. U kunt de bron van de afbeelding samen met andere eigenschappen, zoals titel en alt wijzigen. De wijzigingen worden onmiddellijk doorgevoerd. Zo kunt u ook de Breedte en Hoogte van de afbeelding aanpassen in Live View.

De wijzigingen die u aanbrengt, worden opgeslagen wanneer u een van de volgende handelingen uitvoert:

Ergens buiten de eigenschappencontrole klikken
Drukken op Enter
Drukken op Tab om een ander kenmerk in de eigenschappencontrole te bewerken
Het bestand opslaan

Wanneer afbeeldingen dynamisch worden geladen, kunt u de Snelle eigenschappencontrole gebruiken om snel de kenmerken te controleren die voor de afbeelding zijn ingesteld.

Tekst rechtstreeks in Live View bewerken

U kunt tekstelementen nu rechtstreeks in Live View bewerken. Klik eenvoudig op het tekstelement om dit te bewerken. In de elementweergave drukt u op Enter om de tekst te bewerken.

Opmerking:

Wanneer u op Enter drukt nadat u de bewerkingsmodus hebt geactiveerd, kunnen resultaten variëren, afhankelijk van de locatie van de invoegpositie voordat u op Enter drukte. De wijzigingen zijn vergelijkbaar met hetgeen er gebeurt wanneer u op Enter drukt tijdens het bewerken van tekst in de ontwerpweergave.

De oranje rand rondom het tekstelement geeft aan dat de modus wordt gewijzigd in de bewerkingsmodus.

Een oranje rand geeft de bewerkingsmodus aan

De invoegpositie wordt geplaatst op de plek waar u klikt. Als u alle tekst in het tekstelement wilt selecteren, klikt u drie keer in het tekstelement.

Knippen, kopiëren en plakken, ongedaan maken en opnieuw uitvoeren worden ondersteund terwijl u tekst in Live View bewerkt. Wanneer u tekst plakt, wordt de tekst als tekst zonder opmaak geplakt.

Met de functie voor automatische synchronisatie kunt u bewerkingen die in Live View zijn gedaan, automatisch synchroniseren met de codeweergave.

De volgende tabel bevat de ondersteunde en niet-ondersteunde scenario's tijdens het bewerken van tekst in Live View:

Ondersteund	Niet ondersteund
Alle HTML-elementen die tekst kunnen bevatten en semantische tags	Het bewerken van ongeldige of verbroken tags. Als de HTML-code verbroken of ongeldige tags bevat, wordt het bewerken van dergelijke tags bepaald door de manier waarop browsers deze tags waarnemen: Als browsers de HTML-code voor u herstellen zodat de verbroken tag wordt gesloten, kunt u de tags mogelijk in Live View bewerken. Als browsers tijdens het weergeven een nieuwe tag toevoegen, kunt u de verbroken of ongeldige tags niet bewerken.
De HTML-bestanden die zijn gebaseerd op sjablonen in Live View	Het bewerken van jQuery-pagina's
Structurele tags die inline-elementen bevatten. Deze worden samen in één vak weergegeven voor bewerking.	Het bewerken van tags die zowel statische als dynamische inhoud bevatten. Hoewel u wel de kiezers voor dergelijke tags kunt bewerken, kunt u geen tekst rechtstreeks in Live View bewerken. Als u in Live View dubbelklikt op dergelijke elementen, wordt er een grijze rand rond deze elementen weergegeven om aan te geven dat het bewerken van tekst niet wordt ondersteund.
Statische tekst in dynamische pagina's
Tekst die entiteiten bevat

Tekst opmaken

U kunt de opmaak van tekst en hyperlinktekst nu rechtstreeks in Live View wijzigen. Als u de opties voor tekstopmaak wilt weergeven, selecteert u een woord of een woordgroep. De Snelle eigenschappencontrole met opmaakopties wordt direct boven de geselecteerde tekst weergegeven.

Snelle eigenschappencontrole voor het opmaken van tekst

Elementen rechtstreeks in Live View invoegen

Via het deelvenster Invoegen kunt u elementen rechtstreeks naar de gewenste positie in het document slepen in Live View. Met de visuele hulpmiddelen in Live View, zoals livehulplijnen en de DOM-pictogrammen, kunt u elementen die u sleept beter plaatsen ten opzichte van een element dat wordt aangewezen.

Livehulplijnen (groen) worden weergegeven als u de muisaanwijzer op de verschillende elementen op de pagina plaatst voordat u het element neerzet. Deze hulplijnen geven de posities aan waar het element kan worden ingevoegd. Ze kunnen boven, onder, links of rechts worden weergegeven van het element dat u aanwijst.

Boven en onder: worden behalve bij inline tags bij alle typen elementen en tags weergegeven als de muisaanwijzer erop wordt geplaatst. Wanneer u de muisaanwijzer in de eerste (bovenste) 50% van het element plaatst, worden de hulplijnen boven het aangewezen element weergegeven. Wanneer u de muisaanwijzer in de laatste (onderste) 50% van het element plaatst, worden de hulplijnen onder het aangewezen element weergegeven.

Livehulplijnen boven en onder aangewezen elementen

Links en rechts: worden weergegeven wanneer u de muisaanwijzer op inlinetags plaatst, bijvoorbeeld op <a>, <span> of op tags waarvoor de eigenschap 'zwevend' is ingesteld.

Livehulplijnen rechts en links van aangewezen elementen

Als u even pauzeert voordat u het element neerzet, verschijnt het pictogram DOM (</>). Wanneer u de muis op dit pictogram plaatst, wordt het deelvenster DOM geopend en kunt u het element in de DOM-structuur van het document neerzetten.

Als u elementen rechtstreeks in Live View wilt invoegen, voert u de volgende stappen uit:

Schakel over naar Live View.
Klik in het deelvenster Invoegen op het gewenste element en sleep het element naar het document. U kunt ook op het gewenste element in het deelvenster Invoegen klikken.

Tip: Als u geen elementen van het deelvenster Invoegen naar de pagina kunt slepen, start u uw computer opnieuw op en probeert u het opnieuw.
Zet het element boven, onder, rechts of links van een element neer op basis van de livehulplijnen. Of zet het element op de exacte plaats in de documentstructuur neer door op </> te klikken en het deelvenster DOM te gebruiken.

Het element wordt in de pagina ingevoegd en wordt gemarkeerd.

Selectiekader

Met het selectiekader kunt u eenvoudig een tekstblok selecteren door in Live View in een tag te klikken en te slepen. In eerdere versies van Dreamweaver dan 2014.1 werd het volledige element verplaatst als u op een tekstblok klikte en dit versleepte.

Opmerking:

U kunt het selectiekader in Live View alleen gebruiken voor bewerkingen die worden ondersteund door de browser.

Elementen selecteren en slepen en neerzetten

In Live View kunt u een element verplaatsen door op de tagnaam te klikken en het element vervolgens naar de gewenste locatie te slepen. Wanneer u op een tagnaam klikt, verschijnt het handje dat aangeeft dat u de tag vanaf het betreffende punt kunt slepen. Wanneer u de tag begint te slepen, zorgen de hulplijnen ervoor dat u de tag op de exacte locatie kunt plaatsen.

Als u in Live View op een tagnaam klikt, kunt u in de codeweergave de volledige inhoud van de betreffende tag selecteren.

Klik in Live View op een tagnaam om in de codeweergave de volledige inhoud van de betreffende tag te selecteren. — Klik in Live View op een tagnaam om in de codeweergave de volledige inhoud van de betreffende tag te selecteren

Code controleren in Live View

U kunt de controlemodus gebruiken in combinatie met Live View om snel HTML-elementen en de bijbehorende CSS-stijlen te identificeren. Als de controlemodus is ingeschakeld, kunt u de muisaanwijzer op elementen op de pagina plaatsen om de kenmerken van het CSS-kadermodel weer te geven voor elk element op blokniveau.

Naast de visuele weergave van het kadermodel in de controlemodus kunt u tevens het deelvenster CSS ontwerpen gebruiken wanneer u de muisaanwijzer op elementen in Live View plaatst.

Als u het deelvenster CSS ontwerpen hebt geopend in de huidige modus en de muisaanwijzer op een element op de pagina plaatst, worden de regels en eigenschappen in het deelvenster CSS ontwerpen automatisch bijgewerkt met de regels en eigenschappen voor het betreffende element.

Weergaven of deelvensters die verwant zijn aan het element waarop u de muisaanwijzer hebt geplaatst, worden ook bijgewerkt (bijvoorbeeld de codeweergave, tagkiezer, eigenschappencontrole enzovoort).

Zorg dat het document is geopend in het documentvenster en klik op Weergave > Inspecteren.

Opmerking:

Als Live View nog niet is ingeschakeld, wordt dit automatisch gedaan door de controlemodus.
Plaats de muisaanwijzer op elementen op de pagina om het CSS-kadermodel weer te geven. De rand, marge, opvulling en inhoud worden in de controlemodus gemarkeerd met verschillende kleuren.
(Optioneel) Druk op de pijl naar links op uw toetsenbord om het bovenliggende element van het momenteel gemarkeerde element te markeren. Druk op de pijl naar rechts om het onderliggende element weer te markeren.
(Optioneel) Klik op een element om een gemarkeerde selectie te vergrendelen.

Opmerking:

als u op een element klikt om een gemarkeerde selectie te vergrendelen, wordt de controlemodus uitgeschakeld.

Toetsenbordnavigatie in Live View

U kunt met uw toetsenbord pagina-elementen of kiezers in de elementweergave doorlopen om het bewerken te versnellen.

Pagina-elementen doorlopen

Met de toetsen Pijl-omhoog en Pijl-omlaag kunt u eenvoudig de pagina-elementen in Live View doorlopen. U doorloopt de elementen op basis van de DOM-structuur van het document.

Met de toetsenbordnavigatie in Live View hebt u snel toegang tot geneste elementen en elementen die tussen tags zijn geplaatst.

Wanneer u met de toetsen Pijl-omhoog en Pijl-omlaag naar een element gaat, verschijnt de elementweergave voor dat element. U kunt vervolgens in de elementweergave naar de kiezers gaan of op Enter drukken om de tekst rechtstreeks in Live View te bewerken.

Hier is de alinea geselecteerd. Wanneer u opnieuw op de toets Pijl-omlaag drukt, wordt het volgende element in de DOM-structuur, de vetgedrukte tekst, geselecteerd, zoals wordt weergegeven in de volgende afbeelding.

Afbeelding krijgt als eerste de focus — Hier heeft eerst de afbeelding de focus. Wanneer u op de toets Pijl-omlaag klikt, wordt de alinea onder de afbeelding geselecteerd, zoals wordt weergegeven in de volgende afbeelding.

Vetgedrukte tekst is geselecteerd — De vetgedrukte tekst is geselecteerd.

Kiezers doorlopen

Druk op de Tab-toets om de kiezers in de elementweergave te doorlopen. De kiezer met de focus wordt weergegeven met een oranje rand zoals hieronder wordt aangegeven:

Kiezer met focus is gemarkeerd — De kiezer met de focus wordt gemarkeerd met een oranje rand.

Als u na de kiezer die als laatste is toegepast, op de Tab-toets drukt, wordt het tekstvak Kiezer toevoegen weergegeven.

Opmerking:

U kunt Ctrl+[ of Cmd+[ gebruiken om het bovenliggende element te selecteren en Ctrl+] of Cmd+] om het onderliggende element te selecteren.