Användarhandbok Avbryt

Redigera i live-vyn

 

 

Lär dig hur du designar, redigerar och förhandsgranskar dina webbsidor i live-vyn. Ordna om eller infoga element, använd väljare, redigera bildattribut samt infoga, redigera och formatera text utan att växla till kodvyn.

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.
Obs!

Om sidan ändras dynamiskt (på grund av skript) eller har metauppdatering aktiverad kan redigeringarna som du gör i live-vyn försvinna.

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.

Ett element med en grå kant i live-vyn kan inte redigeras
Ett element med en grå kant i live-vyn kan inte redigeras

Obs!

I live-vyn är bara de alternativ som är tillämpliga för det valda elementet tillgängliga på huvudmenyn. Alternativ som inte är tillämpliga är nedtonade när elementet är markerat.

Elementvisning

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.

Elementvisning för elementet
Elementvisning 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.

Obs!

Elementvisning av övergångselement följer inte med elementen när övergången aktiveras. Däremot börjar de ändringar som du gör med Elementvisning gälla trots att den inte är på samma plats som övergångselementet. 

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.

Snabbegenskapskontrollen visas alldeles ovanför sidelementen i live-vyn.
Snabbegenskapskontrollen visas alldeles ovanför sidelementen i live-vyn.

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

Obs!

Ikonen för kodnavigatören visas inte i live-vyn när du använder snabbegenskapskontrollen.

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

Snabbegenskapskontrollen för bilder i Bootstrap-dokument
Snabbegenskapskontrollen för bilder i Bootstrap-dokument

  • 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.

Snabbegenskapskontrollen för text
Snabbegenskapskontrollen för text

  • 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.

Obs!

Egenskapskontrollen i live-vyn är inte tillgänglig för sidor med flytande stödraster.

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älpAlternativ-menyn på en egenskapskontroll. 

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

  • HTML
  • CSS
  • Image
  • Table
  • Media – endast HTML5-ljud och HTML5-video
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric
Obs!

jQuery-gränssnittet och mallrelaterade egenskaper kan inte redigeras i egenskapskontrollen i 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. 

Snabbegenskapskontroll för redigering av attribut
Snabbegenskapskontroll för redigering av attribut

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.

Obs!

Vad som händer efter att du har tryckt på Returtangenten i redigeringsläget beror på var insättningspunkten befann sig innan du tryckte på Returtangenten. Ändringarna liknar det som händer när du trycker på Retur när du redigerar text i designvyn.

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

En orange kant indikerar redigeringsläge
En orange kant indikerar redigeringsläge

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:

Stöds

Stöds inte

Alla HTML-element som kan innehålla text och semantiska taggar

Redigering av ogiltiga eller brutna taggar. Om din HTML innehåller brutna eller ogiltiga taggar styrs redigeringen av dessa taggar av hur de uppfattas av webbläsarna:

  • Om webbläsarna kan åtgärda din HTML, till exempel genom att sluta den brutna taggen, kan du sedan få redigera dessa taggar i live-vyn.
  • Du kan inte redigera brutna eller ogiltiga länkar om webbläsaren lägger till en ny tagg vid återgivningen.

 

HTML-filer härledda från mallar i live-vyn

Redigering av jQuery-sidor

Strukturella taggar som innehåller infogade element. De visas tillsammans i en enda ruta för redigering.

Redigering av 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 direkt 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.

Statisk text på dynamiska sidor

 

Text som innehåller entiteter

 

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.

Snabbegenskapskontrollen för formatering av text
Snabbegenskapskontrollen för formatering av text

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.
Live-stödlinjer ovanför och nedanför
Live-stödlinjer ovanför och nedanför hovrade element

  • 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.
Live-stödlinjer till vänster och höger om hovrade element
Live-stödlinjer till vänster och höger om hovrade element

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:

  1. Växla till live-vyn.

  2. Klicka på ett önskat element i Infoga-panelen och dra det direkt till dokumentet. Du kan även bara klicka på ett önskat element på Infoga-panelen.

    Tips! Om det inte går att dra ett element från panelen Infoga på sidan startar du om datorn och försöker igen.

  3. Släpp elementet på överdelen, underdelen, vänstersidan eller högersidan av ett element som är baserat på live-stödlinjer. Du kan även släppa elementet på en exakt plats i dokumentstrukturen genom att klicka på </> och använda DOM-panelen.

    Elementet infogas på sidan och markeras.

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. 

Obs!

Användningen av markeringsramen i live-vyn är begränsad till åtgärder som stöds av webbläsaren. 

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.

Klicka på taggnamnet i live-vyn för att markera allt innehåll i taggen i kodvyn
Klicka på taggnamnet i live-vyn för att markera allt innehåll i 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).

  1. Klicka på Visa > Inspektera med dokumentet öppet i dokumentfönstret.

    Obs!

    Om du inte redan arbetar i live-vyn aktiveras den automatiskt.

  2. Hovra över elementen på sidan om du vill visa CSS-rutmodellen. I läget Inspektera markeras olika färger för kant, marginal, utfyllnad och innehåll.

  3. (Valfritt) Tryck på vänsterpilen på datorns tangentbord om du vill markera det element som är överordnat till det markerade elementet. Tryck på högerpilen om du vill gå tillbaka och markera det underordnade elementet.

  4. (Valfritt) Klicka på ett element om du vill låsa en markering.

    Obs!

    Om du klickar på ett element för att låsa en markering stängs läget Inspektera av.

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.

Här är stycket markerat
Här är stycket markerat. När du trycker på nedpilen igen markeras nästa element i DOM-strukturen (texten i fetstil) enligt nästa bild.

Bilden är i fokus först
Här är bilden i fokus först. När du trycker på nedpilen väljs stycket under bilden och markeras enligt nästa bild.

Text i fetstil är markerad
Text i fetstil är markerad.

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: 

Aktiv väljare är markerad
Den väljare som aktiv är markerad med en gul ram.

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

Obs!

Du kan använda Ctrl+[ eller Cmd+[ för att markera det överordnade elementet och Ctrl+] eller Cmd+] för att markera det underordnade elementet.

Inaktivera redigering i live-vyn

Om du inte vill använda elementvisning eller snabbegenskapskontrollen i live-vyn kan du inaktivera dessa redigeringsfunktioner.

Tangentbordsgenvägar:

  • (Windows) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H
  1. Växla till live-vyn och klicka på Visa > Live-visningsalternativ.

  2. Välj Dölj visning av Live-vy.

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.

Få hjälp snabbare och enklare

Ny användare?