Användarhandbok Avbryt

Redigera i live-vyn

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

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.
Adobes logotyp

Logga in på ditt konto