Redigera i live-vyn

I live-vyn används en Chromium-baserad återgivningsmotor som gör att innehållet ser likadant ut i Dreamweaver som i webbläsaren. Medan du utvecklar kan du när som helst växla till live-vyn och enkelt förhandsgranska din sida. Möjligheten att redigera HTML-element direkt i live-vyn sparar tid eftersom du slipper växla mellan olika vyer (kodvyn och live-vyn).

live-vyn uppdateras omedelbart så att ändringarna på sidan visas.

Du kan använda följande komponenter för att redigera din sida i live-vyn:

• DOM-panelen: (Fönster > DOM) – visar HTML-strukturen i ditt dokument och ger dig möjlighet att klippa ut, klistra in, duplicera, ta bort eller ordna om elementen i vyn. Mer information finns i DOM-panelen.
• Elementvisning: Visas ovanför det markerade HTML-elementet i live-vyn. Med elementvisningen kan du associera HTML-element med klasser och id:n. Mer information finns i Associera HTML-element med klasser och id:n.
• Snabbegenskapskontroll: Visas när du klickar på ikonen med tre streck i elementvisningen eller markerar text. Med snabbegenskapskontrollen kan du redigera bildattribut och formatera text i live-vyn. Mer information finns i Snabbegenskapskontroll.
• Egenskapskontroll för live-vyn: Visas nedanför dokumentfönstret och gör att du kan redigera olika HTML- och CSS-egenskaper i live-vyn. Mer information finns i Egenskapskontroll för live-vyn.
• Infoga-panelen: (Fönster > Infoga) Gör det möjligt att dra element direkt från panelen till live-vyn. Mer information finns i Infoga element direkt i live-vyn.

Tips!

• Om live-vyn blir tom medan du redigerar en sida stänger du av live-vyn och startar den igen.
• Om redigeringarna inte visas på sidan klickar du på Uppdatera i live-vyn.

Innehåll som renderas dynamiskt via databaser eller JavaScript, samt delar av mallar som inte kan redigeras, kan inte redigeras i live-vyn. När du klickar på den här typen av element i live-vyn visas en grå kant runt dem för att visa att de inte kan redigeras.

Med elementvisningen kan du associera HTML-element med klasser och id:n direkt i live-vyn. Du får förslag på tillgängliga klasser och id:n så att du snabbt kan hitta och välja önskat alternativ. 

Du kan också formatera tabeller med elementvisning. Följ länken om du vill ha mer information.

Associera HTML-element med klasser och id:n

Klicka på ett önskat element i live-vyn. Elementvisning öppnas och visar den aktuella associerade klassen och det aktuella associerade id:t.

I live-vyn kan du även klicka på HTML-elementet på DOM-panelen om du vill se elementvisningen för elementet.

• Du kan ta bort associationen med en klass eller ett id från HTML-elementet genom att klicka på det ”x” som visas bredvid klassen eller id:t.
• Du kan ändra associationen med en klass eller ett id för HTML-elementet genom att klicka i rutan. En lista över tillgängliga klasser och id:n visas. Klicka på ett önskat alternativ.
• Du kan lägga till en klass eller ett id och använda det för elementet och klicka på ”+” och skriva namnet. Klicka på + eller tryck på Retur om du vill spara ändringarna.

Du kan sedan använda CSS Designer för att definiera en väljare som innehåller klassen eller id:t. Mer information finns i Utforma sidor med hjälp av CSS Designer.

Snabbegenskapskontroll

Snabbegenskapskontrollen för bilder

Snabbegenskapskontrollen visas alldeles ovanför de markerade elementen i live-vyn. Med egenskapskontrollen kan du redigera attribut eller formatera text i live-vyn.

Du kan dölja eller visa snabbegenskapskontrollen med hjälp av kommandot Ctrl+Alt+H (Windows)/CMD+Ctrl+H (Mac).

Snabbegenskapskontrollen i Bootstrap-dokument innehåller nu även alternativ för att anpassa bilder.

• Klipp ut till form: Klicka för att klippa hörnen för bilder till cirkulära eller rundade hörn, eller som en miniatyrbild.
• Gör bilden responsiv: Klicka för att göra bilder responsiva och anpassa till olika skärmstorlekar.

Snabbegenskapskontrollen för text

Du kan använda Snabbegenskapskontrollen för text i live-vyn om du vill formatera, göra indrag och skapa hyperlänkar i text. Snabbegenskapskontrollen för text visas när du klickar på ikonen med tre streck för textelement: h1–h6, pre och p.

• Med formatalternativet kan du snabbt ändra elementtaggen till någon av följande taggar: h1-h6, p och pre. 
• Med länkalternativet kan du göra om textelementet till en hyperlänk. 
• Med ikonerna för fet och kursiv stil kan du lägga till taggarna <strong> och <em> i textelementet.
• Indragsikonerna hjälper dig att lägga till eller ta bort indrag i text. Taggen <blockquote> läggs till respektive tas bort från koden.

I Bootstrap-dokument kan du även använda Snabbegenskapskontrollen för text för att justera och transformera textelementen.

• Justera: Vänsterjusterar, centrerar eller högerjusterar Bootstrap-textelement, eller marginaljusterar genom att tillämpa motsvarande klasser.
• Transformera: Ändrar textläget för ett element genom att tillämpa klasser för gemener, versaler eller inledande versal i mening.

Egenskapskontroll för live-vyn

Egenskapskontroll för live-vyn är den vanliga egenskapskontroll som visas under dokumentfönstret.

I Egenskapskontroll för live-vyn kan du granska och redigera de vanligaste egenskaperna för det markerade sidelementet, till exempel text eller ett infogat objekt. Innehållet i Egenskapskontroll för live-vyn varierar beroende på vilket element som är markerat.

Du visar hjälpen för en egenskapskontroll genom att klicka på hjälpknappen i det övre högra hörnet av egenskapskontrollen. Du kan även välja Hjälp på Alternativ-menyn på en egenskapskontroll. 

Här följer exempel på element som du kan redigera med hjälp av Egenskapskontroll för live-vyn:

Redigera HTML-attribut

Med snabbegenskapskontrollen kan du snabbt och enkelt lägga till, redigera eller ta bort HTML-attribut direkt i live-vyn.

Snabbegenskapskontrollen för bilder visas när du klickar på ikonen med tre streck . Beroende på det tillgängliga utrymmet kan egenskapskontrollen visas till vänster eller höger, i över- eller underkant eller ovanför bilden. Du kan flytta egenskapskontrollen och placera den på den plats som passar dig bäst. 

Klicka på ikonen med tre streck i snabbegenskapskontrollen för att redigera attributen. Du kan ändra bildkällan och andra attribut som titel och alt, och ändringarna återspeglas omedelbart. Du kan på liknande sätt justera bildens bredd och höjd i live-vyn.

De gjorda ändringarna sparas när du gör något av följande:

• Klickar någonstans utanför egenskapskontrollen
• Trycker på Returtangenten
• Trycker på Tabb-tangenten för att redigera ett annat attribut i egenskapskontrollen
• Spara filen
  

Vid dynamisk inläsning av bilder kan du använda snabbegenskapskontrollen för att granska de attribut som har angetts för en bild. 

Redigera text direkt i live-vyn

Du kan nu redigera textelement direkt i live-vyn. Du behöver bara klicka på ett textelement för att redigera det. Om du är i läget Elementvisning trycker du på Returtangenten för att redigera texten.

Den orange ramen runt textelementet anger att redigeringsläget har aktiverats. 

Insättningspunkten placeras där du klickar. Du kan markera all text i ett textelement genom att trippelklicka på textelementet.

Du kan klippa ut, kopiera, klistra in, ångra och göra om åtgärder när du redigerar text i live-vyn. Text som klistras in har enkelt textformat.

 Med funktionen för automatisk synkronisering kan alla redigeringar som görs i live-vyn synkroniseras automatiskt med kodvyn. 

Följande tabell visar vilka scenarier som stöds och inte stöds vid redigering av text i live-vyn:

Formatera text

Nu kan du ändra formateringen i text och hyperlänkstext direkt i live-vyn. Markera ett ord eller en fras för att visa formateringsalternativen för text. Snabbegenskapskontrollen öppnas och formateringsalternativen visas strax ovanför den markerade texten.

Infoga element direkt i live-vyn

Du kan använda Infoga-panelen för att dra element direkt till en önskad plats i dokumentet i live-vyn. Visuella hjälpmedel i live-vyn, till exempel live-stödlinjer och DOM-ikoner, hjälper dig att placera elementen som dras i förhållande till ett hovrat element.

Live-stödlinjer (i grönt) visas när du placerar markören (hovrar) över olika element på sidan innan du släpper elementet. Dessa stödlinjer anger de positioner där elementet kan infogas. De kan visas ovanför, under, till vänster eller höger om det element du placerar markören över.

• Ovanför och under – visas när du placerar markören över alla typer av element/taggar, med undantag för infogade taggar. När du placerar markören över de första (övre) 50 % av elementet visas stödlinjer ovanför elementet. När du placerar markören över de sista (undre) 50 % av elementet visas stödlinjerna under elementet.

• Vänster och höger – visas när du placerar markören över infogade taggar, till exempel <a> eller <span>, eller över taggar som har float-egenskap angiven.

När du pausar kort innan du släpper elementet visas DOM-ikonen (</>). När du placerar markören över den här ikonen öppnas DOM-panelen och du kan släppa elementet inuti dokumentets DOM-struktur.

Genomför följande steg om du vill infoga element direkt i live-vyn:

Markeringsram

Med markeringsramen kan du enkelt markera ett textblock genom att klicka och dra inuti taggen i live-vyn. När du klickar och drar ett textblock i Dreamweaver i utgåvor före 2014.1 flyttas hela elementet. 

Markera och dra och släppa element

I live-vyn kan du flytta ett element genom att klicka på taggnamnet och sedan dra det till önskad plats. När du klickar på ett taggnamn visas en handmarkör som indikerar att du kan dra taggen från punkten. När du börjar dra taggen har du hjälp av stödlinjer så att du kan placera den exakt där du vill ha den.  

Genom att klicka på taggnamn i live-vyn kan du markera allt innehåll i den taggen i kodvyn.

Inspektera koden i live-vyn

Läget Inspektera fungerar tillsammans med live-vyn så att du snabbt kan identifiera HTML-element och deras associerade CSS-format. Om läget Inspektera är inaktiverat kan du hovra över elementen på sidan om du vill visa CSS-rutmodellattributen för ett element på blocknivå.

Förutom att se en visuell representation av rutmodellen i läget Inspektera kan du även använda CSS Designer när du hovrar över elementen i live-vyn.

När CSS Designer är öppet i Aktuellt läge och du hovrar över ett element på sidan uppdateras reglerna och egenskaperna automatiskt i CSS Designer till att visa reglerna och egenskaperna för det elementet.

Alla vyer och paneler som hör till elementet du hovrar över uppdateras också (till exempel kodvyn, taggväljaren och egenskapskontrollen).

Tangentbordsnavigering i live-vyn

Du kan snabba upp redigeringsprocessen genom att använda tangentbordet för att bläddra bland sidelementen eller väljarna i elementvisningen. 

Bläddra bland sidelement

Använd upp- och nedpiltangenterna för att bläddra bland sidelementen i live-vyn. Bläddringen baseras på dokumentets DOM-struktur.

Tangentbordsnavigeringen i live-vyn förenklar åtkomsten till kapslade och figursatta element.

När du använder upp- och nedpilen för att öppna ett element visas elementvisningen för det aktuella elementet. Du kan sedan navigera till väljarna i elementvisningen eller trycka på RETUR för att redigera texten direkt i live-vyn.

Bläddringsväljare

Tryck på Tabb för att bläddra mellan väljarna i elementvisningen. Den väljare som är aktiv visas med en gul ram enligt nedan: 

Om du trycker på Tabb efter den senast använda väljaren visas textrutan för att lägga till väljare. 

Inaktivera redigering i live-vyn

Scenarier som inte stöds

• Det går inte att redigera Dreamweaver-mallfiler i live-vyn.
• Taggar med både statiskt och dynamiskt innehåll. Du kan redigera väljarna för den här typen av taggar, men du kan inte redigera text i live-vyn. Om du dubbelklickar på den här typen av element i live-vyn visas en grå kant runt dem, som anger att textredigering inte stöds.
• Taggar som har pseudo-väljare. Du kan få oväntade resultat om du försöker redigera dessa element i live-vyn.
• CSS-stödraster stöds endast i live-vyn i Dreamweaver 2019 och senare versioner.