Användarhandbok Avbryt

Förhandsgranska sidor

Sök

Senast uppdaterad den 25 feb. 2022

Förhandsgranska dina webbsidor i Dreamweaver i webbläsare.

Förhandsvisning i realtid gör att du kan förhandsvisa sidorna i webbläsaren och visa ändringarna i webbläsaren i realtid medan du kodar.

I Live-vyn får du en uppfattning om hur sidorna kommer att se ut på webben, och du kan redigera objekt i kodvyn.

I designvyn får du också en uppfattning om hur sidorna kommer att se ut på webben, men sidan återges inte exakt som i en webbläsare.

Med funktionen Öppna i webbläsare kan du se hur sidorna ser ut i olika webbläsare. Det här passar bäst när du arbetar med sidor med dynamiska data från databaser, eftersom det inte sker i realtid.

Läs vidare och få mer information om de olika alternativen för förhandsvisning som finns i Dreamweaver.

Förhandsgranska i realtid i webbläsare

Du kan förhandsgranska dina webbsidor i realtid medan du kodar eller utformar dem i Dreamweaver. Med den här funktionen kan du koda och förhandsgranska dina webbsidor samtidigt i flera webbläsare.

Förhandsvisa ändringar i webbläsaren i realtid

Klicka på Förhandsvisning i realtid i statusfältet i Dreamweaver.

Förhandsvisning i realtid

Du får möjlighet att förhandsgranska dina webbsidor i realtid i en webbläsare.
Klicka på någon av de tillgängliga webbläsarna om du vill förhandsgranska dina webbsidor i webbläsaren.

Du kan redigera vilka webbläsare som visas i den här listan. Om du vill lägga till eller ta bort en webbläsare från listan kan du få mer information i Ange inställningar för webbläsare.

Om du har en testserver måste du aktivera Skicka filer automatiskt till testservern när du konfigurerar den.

Förhandsvisningen i realtid fungerar för filerna på testservern. Om du aktiverar Skicka filer automatiskt till testservern kan du se ändringarna i realtid.
Spara webbsidan och dess relaterade dokument om du uppmanas göra det.

En webbläsare öppnas och visar webbsidan.
Fortsätt att koda sidan och se ändringarna i webbläsaren medan du kodar.

Ange inställningar för förhandsvisning i webbläsare

Du kan växla mellan förhandsvisning i realtid och förhandsvisning i en webbläsare. Ange preferenser för vilken webbläsare du vill använda då du förhandsgranskar en webbplats och definiera den primära och sekundära webbläsaren.

Dessa webbläsarpreferenser används sedan oavsett om du förhandsgranskar din webbplats med förhandsgranskning i realtid eller öppnar sidan i webbläsaren.

Välj Arkiv > Förhandsvisning i realtid > Redigera webbläsarlistan.

Välj statisk förhandsgranskning i webbläsare

Om du avmarkerar alternativet Välj statisk förhandsgranskning i webbläsare inaktiveras förhandsvisning i realtid. Du kan använda kortkommandon för primära och sekundära webbläsare för att öppna förhandsgranskningen i webbläsaren. Alternativt kan du använda Arkiv-menyn eller klicka på enhetens förhandsgranskningsikon i statusfältet.
Klicka på plusknappen (+) om du vill lägga till en webbläsare i listan, fyll i dialogrutan Lägg till webbläsare och klicka sedan på OK.
Vill du ta bort en webbläsare från listan ska du markera den och sedan klicka på minusknappen (-).
Ändra inställningar för den markerade webbläsaren genom att klicka på Redigera, göra ändringar i dialogrutan Redigera webbläsare och sedan klicka på OK.
Välj alternativet Primär webbläsare eller Sekundär webbläsare och ange på så sätt om den valda webbläsaren ska vara primär eller sekundär webbläsare.

Den primära webbläsaren öppnas om du trycker på F12 (Windows) eller Alternativ+F12 (Macintosh), den sekundära öppnas om du trycker på Ctrl+F12 (Windows) eller Kommando+F12 (Macintosh).
Skapa en temporär kopia för förhandsgranskning och felsökning på servern genom att välja Förhandsgranska med temporär fil. (Avmarkera alternativet om du vill uppdatera dokumentet direkt.)

Välj statisk förhandsgranskning i webbläsare Detta innebär att användarna kan välja läge för att förhandsgranska sina filer i webbläsaren. Om du markerar kryssrutan kan användarna förhandsgranska filer med Öppna i webbläsare från menyer och genom att använda genvägar. När detta är avmarkerat kommer Realtidsförhandsgranskning att användas för att förhandsgranska filer i webbläsare. Som standard är kryssrutan avmarkerad och Realtidsförhandsgranskning används för att förhandsgranska filerna i webbläsaren.

Förhandsvisa sidor i Live-vyn

Live-vyn skiljer sig från den vanliga Dreamweaver-designvyn i och med att den visar en mer realistisk men även redigerbar återgivning av hur sidan kommer att se ut i en webbläsare.

Du kan när som helst växla till Live-vyn när du arbetar i designvyn. Att växla till Live-vyn innebär emellertid inte samma sak som att växla mellan de andra vanliga vyerna i Dreamweaver (kod/delad/design). När du växlar till Live-vyn från designvyn växlar du bara designvyn mellan att vara redigerbar och ”live”.

Designvyn förblir fryst när du går över till Live-vyn, men kodvyn kan fortfarande redigeras så att du kan ändra koden och sedan uppdatera Live-vyn så att du ser ändringarna. När du arbetar i Live-vyn kan du visa koden live på ett sätt till. Vyn Live-kod fungerar som Live-vyn i och med att den visar en version av koden som webbläsaren kör för att återge sidan. Vyn Live-kod, liksom Live-vyn, är en vy som inte kan redigeras.

Ytterligare en fördel med Live-vyn är möjligheten att frysa JavaScript. Du kan till exempel växla till Live-vyn och hovra över jQuery-baserade tabellrader som ändrar färg efter användarens åtgärder. När du fryser JavaScript fryser Live-vyn sidan i det aktuella läget. Du kan sedan redigera CSS eller JavaScript och uppdatera sidan för att visa ändringarnas effekt. Att frysa JavaScript i Live-vyn kan vara användbart om du vill visa och ändra egenskaper för olika lägen för snabbmenyer eller andra interaktiva element som du inte kan se i den vanliga designvyn.

Så här förhandsgranskar du sidor i Live-vyn:

Se till att du arbetar i designvyn (Visa > Design) eller kod- och designvyerna (Visa > Kod och design).
Klicka på knappen Live-vy.
(Valfritt) Gör ändringarna i kodvyn, på panelen CSS-format, i en extern CSS-formatmall eller i en annan relaterad fil.

Även om du inte kan redigera i Live-vyn ändras alternativen för att göra redigeringar i andra områden (till exempel på panelen CSS-format eller i kodvyn) när du klickar i Live-vyn.

Du kan arbeta med relaterade filer (till exempel CSS-formatmallar) samtidigt som Live-vyn är i fokus genom att öppna den relaterade filen från verktygsfältet Relaterade filer högst upp i dokumentet.
Om du har gjort ändringar i kodvyn eller i en relaterad fil uppdaterar du Live-vyn genom att klicka på Uppdatera i verktygsfältet Dokument, eller genom att trycka på F5.
Du går tillbaka till den redigerbara designvyn genom att klicka på knappen Live-vy igen.

Förhandsgranska Live-koden

Koden som visas i vyn Live-kod påminner om vad som visas om du visar sidkällan från en webbläsare. Sådana sidkällor är statiska, så att bara källan till sidan visas, medan vyn Live-kod är dynamisk och uppdateras allt eftersom du arbetar med sidan i Live-vyn.

Kontrollera att du arbetar i Live-vyn.
Klicka på knappen Live-kod.

Dreamweaver visar live-koden som webbläsaren använder för att köra sidan. Koden markeras med gult och kan inte redigeras.

När du arbetar med interaktiva element på sidan markeras de dynamiska ändringarna i koden med Live-kod.
Om du vill stänga av markeringen av ändringarna i vyn Live-kod ska du välja Visa > Live-visningsalternativ > Markera ändringar i live-kod.
Du går tillbaka till den redigerbara kodvyn genom att klicka på Live-kod igen.

Om du vill ändra inställningar för Live-kod väljer du Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh) och väljer kategorin Kodfärgning.

Frysa JavaScript

Gör något av följande:

Tryck på F6
Välj Frys JavaScript på snabbmenyn på knappen Live-vyn.

Ett informationsfält högst upp i dokumentfältet anger att JavaScript är fryst. Du stänger informationsfältet genom att stänga länken.

Live-visningsalternativ

Förutom alternativet Frys JavaScript finns det några andra alternativ på snabbmenyn på knappen Live-vy samt via Visa > Live-visningsalternativ.

Frys JavaScript Fryser element som påverkas av JavaScript i det aktuella läget.

Inaktivera JavaScript Inaktiverar JavaScript och återger sidan igen så som den skulle se ut om en webbläsare inte hade JavaScript aktiverat.

Inaktivera plugin-program Inaktiverar plugin-program och återger sidan så som den skulle se ut om en webbläsare inte hade plugin-program aktiverat.

Markera ändringar i Live Code Aktiverar eller inaktiverar ändringsmarkeringar i Live Code.

Redigera Live-vy-sidan på en ny flik Med det här alternativet kan du öppna nya flikar för webbplatsdokument som du bläddrar bland med hjälp av verktygsfältet Webbläsarnavigering eller funktionen Följ länk(ar). Du måste först bläddra till dokumentet och sedan välja Redigera Live-vy-sidan på en ny flik om du vill skapa en ny flik för det.

Följ länk Gör nästa länk som du klickar på i Live-vyn till den aktiva länken. Du kan också Ctrl-klicka på en länk i Live-vyn om du vill göra den aktiv.

Följ länkar kontinuerligt Gör länkarna i Live-vyn kontinuerligt aktiva tills du inaktiverar dem igen eller stänger sidan.

Synkronisera fjärrfiler automatiskt Synkroniserar automatiskt den lokala filen och fjärrfilen när du klickar på ikonen Uppdatera i verktygsfältet Webbläsarnavigering. Filen placeras på servern före uppdateringen så att båda filerna synkroniseras.

Använd testserver som dokumentkälla Används främst av dynamiska sidor (som ColdFusion-sidor) och markeras som standard för dynamiska sidor. När det här alternativet är valt används den version av filen som finns på platsens testserver som källa för det som visas i Live-vyn.

Använd lokala filer som dokumentlänkar Standardinställningen för icke-dynamiska platser. När det här alternativet är valt för dynamiska sidor som använder en testserver, använder Dreamweaver de lokala versionerna av filerna som länkas till dokumentet (till exempel CSS- och JavaScript-filer), i stället för filerna på testservern. Du kan sedan göra lokala ändringar av relaterade filer så att du kan visa hur de ser ut innan du placerar dem på testservern. Om det här alternativet inte väljs används testserverversionerna av de relaterade filerna.

Inställningar för HTTP-begäran Öppnar en dialogruta med avancerade inställningar där du kan ange värden för hur live-data visas. Klicka på Hjälp i dialogrutan om du vill ha mer information.

Öppna i webbläsare

Du kan öppna en sida i en webbläsare när som helst; du behöver inte överföra den till en webbserver först. När du förhandsgranskar en sida ska alla webbläsarrelaterade funktioner fungera, inklusive JavaScript-beteenden, dokumentberoende och absoluta länkar, ActiveX®-kontroller och webbläsar-plugins, förutsatt att du har installerat de plugin-program eller ActiveX-kontroller som krävs i webbläsarna.

Innan du öppnar ett dokument i webbläsaren ska du spara det, annars visas inte de senaste ändringarna i webbläsaren.

Högerklicka på filnamnet i verktygsfältet Dokument och klicka på Öppna i webbläsare.

Obs!

Om det inte finns några webbläsare i listan väljer du Redigera > Inställningar eller Dreamweaver > Inställningar (Macintosh) och markerar sedan kategorin Förhandsvisning i webbläsaren till vänster för att välja en webbläsare. Mer information finns i Ange inställningar för förhandsvisning i webbläsare.
Klicka på länkarna och testa innehållet på sidan.

Obs!

Innehåll länkat med en platsrotberoende sökväg visas inte när du förhandsgranskar dokument i en lokal webbläsare, om du inte anger en testserver eller väljer alternativet Förhandsgranska med temporär fil i Redigera > Inställningar > Förhandsgranska i webbläsare. Detta beror på det inte går att identifiera en platsrot i webbläsare, till skillnad från på servrar.

Obs!

Om du vill förhandsgranska innehåll som har länkats med rotberoende sökvägar placerar du filen på en fjärrserver och visar den sedan genom att välja Arkiv > Förhandsgranska i webbläsare.
Stäng sidan i webbläsaren när du är klar med testningen.

Liknande innehåll

Få hjälp snabbare och enklare

Ny användare?