Arbetsytan i Dreamweaver

Börja med Dreamweaver

När du har installerat Dreamweaver och startar programmet för första gången visas en QuickStart-meny på skärmen med tre frågor som hjälper dig att anpassa din Dreamweaver-arbetsyta efter dina behov.

Baserat på dina svar på dessa frågor öppnas Dreamweaver i en Developer Workspace (en minimal kodcentrerad layout) eller en Standard Workspace (en delad layout med visuella verktyg och en förhandsgranskning i appen medan du kodar). 

När du har valt en arbetsyta väljer du ett färgtema som du känner dig bekväm med. Sedan kan du komma igång.

Förbättrad startskärm

Startsidan i Dreamweaver ger dig snabb åtkomst till dina nyligen använda filer, filtyper och startmallar.

Beroende på din prenumerationsstatus kan arbetsytan Start också visa innehåll som är anpassat för dina behov.

Dreamweaver visar startsidan vid start eller när inga dokument är öppna.

Alternativ på arbetsytan Start i Dreamweaver

Klicka på Lär dig för att direkt komma åt Dreamweaver-handledningarna från den här skärmen.

Kom igång med att skapa dokument i Dreamweaver genom att klicka på någon av de filtyper som visas.

Öppna en av startmallarna som följer med Dreamweaver. 

Klicka på Startsida för att gå tillbaka till startskärmen. 

Du kan visa de senaste filerna som du har arbetat med på startskärmen. Om du inte har några nyligen använda filer är den här fliken tom.

Du kan även använda sökfunktionen via sökikonen i den här skärmens övre högra hörn. När du skriver en sökfråga visar applikationen dina nyligen använda filer, Creative Cloud-resurser, hjälplänkar och stockbilder som matchar sökfrågan.

Du kan klicka på Skapa nytt för att skapa nya Dreamweaver-filer. Klicka på Öppna om du redan har filer. För information om att skapa och öppna dokument i Dreamweaver, se Skapa och öppna filer.

Översikt över arbetsytan

Med arbetsytan i Dreamweaver kan du visa dokument och objektegenskaper. Arbetsytan placerar även flera av de vanligaste åtgärderna i verktygsfält så att du snabbt kan göra ändringar i dokumenten.

Element i arbetsytan, översikt

Arbetsytan innehåller följande element:

Finns längst upp i programfönstret och innehåller en arbetsyteväxlare, menyer (endast Windows) och andra programkontroller.

Innehåller knappar som ger alternativ för olika vyer av dokumentfönstret (som Design-vy, Live-vy och Kod-vy).

Visa verktygsfältet Standard genom att välja Fönster > Verktygsfält > Standard. Verktygsfältet innehåller knappar för vanliga åtgärder från menyerna Arkiv och Redigera: Nytt, Öppna, Spara, Spara alla, Skriv ut kod, Klipp ut, Kopiera, Klistra in, Ångra och Gör om.

Finns på vänster sida av programfönstret och innehåller vyspecifika knappar.

Visar det aktuella dokumentet när du skapar och redigerar det.

Gör att du kan visa och ändra en mängd egenskaper för det markerade objektet eller texten. Olika objekt har olika egenskaper.

Finns i statusfältet längst ned i dokumentfönstret. Visar hierarkin för taggar som omger den aktuella markeringen. Klicka på en tagg i hierarkin för att markera den taggen och allt dess innehåll.

Hjälper dig att övervaka och redigera arbetet. Infoga-panelen, CSS Designer-panelen och filpanelen är några exempel. Du utökar panelen genom att dubbelklicka på dess flik.

Med denna kan du ladda upp och visa PSD-filer i Creative Cloud. Med den här panelen kan du extrahera CSS, text, bilder, teckensnitt, färger, övertoningar och mått från dina PSD-comps till ditt dokument.

Innehåller knappar för att infoga olika typer av objekt, som t.ex. bilder, tabeller och mediaelement, i ett dokument. Varje objekt är ett HTML-kodavsnitt som gör att du kan ange olika attribut när du infogar det. Du kan till exempel infoga en tabell genom att klicka på knappen Tabell på infoga-panelen. Om du vill kan du infoga objekt med menyn Infoga i stället för med infoga-panelen.

Gör att du kan hantera filer och mappar oavsett om de är en del av en Dreamweaver-plats eller finns på en fjärrserver. Med filpanelen kan du även komma åt alla filer på den lokala hårddisken. För mer information, se Hantera filer och mappar.

Gör att du kan spara och återanvända kodfragment på olika webbsidor, olika webbplatser och i andra installationer av Dreamweaver (med hjälp av synkroniseringsinställningar). Mer information finns i Återanvända kod med fragment.

är en CSS-egenskapsinspektör som låter dig "visuellt" skapa CSS-stilar, filer och ange egenskaper, tillsammans med mediafrågor.

Översikt av dokumentfönstret

I dokumentfönstret visas det aktuella dokumentet. För att växla vyer av dokumentet använder du vyalternativen i dokumentverktygsfältet. 

Du kan också växla vyer med hjälp av vyalternativen i menyn Visa.

visar en realistisk representation av hur dokumentet kommer att se ut i en webbläsare, och gör att du kan arbeta med dokumentet precis som i en webbläsare. Du kan redigera HTML-element direkt i Live-vyn och genast förhandsgranska dina ändringar i samma vy. För mer information om redigering i Live View, se Redigera HTML-element i Live View.

är en designvy för visuell sidlayout, visuell redigering och snabb programutveckling. I den här vyn visar Dreamweaver en helt redigerbar, visuell representation av dokumentet, som påminner om vad du skulle se när du tittar på sidan i en webbläsare.

är en handkodningsmiljö för att skriva och redigera HTML, JavaScript och alla andra typer av kod.

är en delad version av Kodvy som låter dig skrolla för att arbeta med olika delar av dokumentet samtidigt. 

låter dig se både kodvy och Live-vy för samma dokument i ett enda fönster.

låter dig se både kodvy och designvy för samma dokument i ett enda fönster.

visar den faktiska koden som en webbläsare använder för att köra sidan, och kan förändras dynamiskt när du interagerar med sidan i Live-vyn.

När ett dokumentfönster är maximerat (standardvärdet) visas filnamnen på alla öppna dokument på flikar högst upp i dokumentfönstret. Dreamweaver visar en asterisk efter filnamnet om du har gjort ändringar som du inte har sparat än.

Dreamweaver innehåller också verktygsfältet Relaterade filer under dokumentets flik (eller under dokumentets namnlist om du visar dokumenten i separata fönster). Relaterade dokument är dokument som associeras med den aktuella filen, till exempel CSS-filer eller JavaScript-filer. Du öppnar en relaterad fil i dokumentfönstret genom att klicka på filnamnet i verktygsfältet Relaterade filer.

Växla mellan vyer

Använd verktygsfältet Dokument för att snabbt växla mellan olika vyer. Mer information finns i Översikt över dokumentverktygsfält.

Du kan också växla mellan vyer med följande alternativ i menyn Visa:

• Endast kodvy: Välj kod
• Delad vy: Välj Delad och välj något av de delade alternativen
• Vyläge: Växla mellan Live- och designvyer
• Växla vyer: För att växla vyer från en vy till en annan.

Överlappa dokumentfönster, visa dem sida vid sida eller ordna om dem

Om du har många dokumentfönster öppna samtidigt kan du se till att de överlappar eller visas sida vid sida.

För att överlappa dokumentfönster: välj Fönster > Ordna > Överlappa.

För att visa dokumentfönster sida vid sida:

• (Windows) Välj Fönster > Ordna > Sida vid sida horisontellt eller Sida vid sida vertikalt.
• (Macintosh) Välj Fönster > Ordna > Sida vid sida.

När du öppnar fler än en fil visas dokumentfönstren som flikar. Du ändrar ordning på flikarna (dokumentfönstren) genom att dra en fönsterflik till en ny plats i gruppen.

Ändra storlek på dokumentfönster

Dokumentfönstrets aktuella storlek (i pixlar) visas i statusfältet. Vill du utforma en sida som ser bäst ut i en specifik storlek kan du ändra dokumentfönstret till en på förhand bestämd storlek, ändra dessa storlekar eller skapa storlekar.

När du ändrar vystorlek för en sida i design- eller Live-vyn ändras endast vyns dimensioner. Dokumentstorleken ändras inte.

I Dreamweaver visas utöver de förinställda och anpassade storlekarna även de storlekar som angetts i en mediefråga. När du väljer en storlek som motsvarar en mediefråga används mediefrågan för att visa sidan. Du kan också ändra sidorienteringen så att du kan förhandsvisa en sida för mobila enheter vars sidlayout ändras beroende på hur enheten hålls.

För att ändra storlek på dokumentfönstret, välj en av storlekarna från popup-menyn Fönsterstorlek längst ned i dokumentfönstret.

Fönsterstorleken som visas återspeglar webbläsarfönstrets innermått, utan ramar; bildskärmens storlek eller mobil enhet anges till höger.

Ändra värdena på snabbmenyn Fönsterstorlekar

Lägga till en ny storlek på snabbmenyn Fönsterstorlek

Verktygsfältet Dokument, översikt

Verktygsfältet Dokument innehåller knappar som du snabbt kan växla mellan olika vyer av dokumentet med. Verktygsfältet innehåller även några vanliga kommandon och alternativ som är kopplade till visning av dokumentet och överföring av det mellan lokala platser och fjärrplatser.

Följande alternativ visas i verktygsfältet Dokument:

Visar endast kodvyn i dokumentfönstret.

Delar upp dokumentfönstret mellan kod- och Live-/designvyerna. Designvyalternativet är inte tillgängligt för flytande rutnätsdokument.

Är en interaktiv förhandsvisning som exakt återger HTML5-projekt och uppdateras i realtid så att du kan se de ändringar som du gör. Du kan också redigera HTML-element i Live-vyn. Med listrutan bredvid live-alternativen kan du växla mellan Live- och designvyerna. Den här rullgardinslistan är inte tillgänglig i flytande rutnätsdokument.

Visar en representation av dokumentet som motsvarar hur användaren ser det i en webbläsare. 

Verktygsfältet Standard, översikt

Visa verktygsfältet Standard genom att välja Fönster > Verktygsfält > Standard. Verktygsfältet innehåller knappar för vanliga åtgärder från menyerna Fil och Redigera: Nytt, Öppna, Spara, Spara alla, Skriv ut kod, Klipp ut, Kopiera, Klistra in, Ångra och Gör om.

Verktygsfältet Webbläsarnavigering, översikt

Verktygsfältet Webbläsarnavigering visas i Live-vyn (bara om du aktiverat det genom att välja Fönster->Verktygsfält->Standard) och visar adressen för sidan som du tittar på i fönstret Dokument. Live-vyn fungerar som en vanlig webbläsare, så även om du bläddrar till en webbplats utanför den lokala platsen (till exempel http://www.adobe.com/), läses sidan in i dokumentfönstret.

Länkar är som standard inte aktiva i Live-vyn. Eftersom länkarna inte är aktiva, kan du markera eller klicka på länktexten i dokumentfönstret utan att flyttas till en annan sida. För att testa länkar i Live-vyn kan du aktivera engångsklickning eller kontinuerlig klickning genom att välja Visa > Alternativ för Live-vy > Följ länkar (Ctrl+klicka på länk) eller Följ länkar kontinuerligt.

Översikt av verktygsfält

Verktygsfältet visas lodrätt på vänster sida i dokumentfönstret och visas i alla vyer – Kod, Live och Design. Knapparna i verktygsfältet är vyspecifika och visas bara om de är tillämpliga i den vy du arbetar i. Om du till exempel arbetar i Live-vyn är kodvyspecifika alternativ som Formatera källkod inte synliga. 

Anpassa verktygsfältet

Du kan välja att anpassa detta verktygsfält enligt dina behov genom att lägga till menyalternativ eller ta bort oönskade menyalternativ från verktygsfältet.

Så här anpassar du verktygsfältet:

Om du vill återställa standardknapparna för verktygsfältet klickar du på Återställ standard i dialogrutan Anpassa verktygsfält.

Översikt av statusfältet

Statusfältet längst ned i dokumentfönstret innehåller ytterligare information om dokumentet som du skapar.

Taggväljare

Visar hierarkin för taggar som omger den aktuella markeringen. Klicka på en tagg i hierarkin för att markera den taggen och allt dess innehåll. Klicka på <body> för att markera hela huvuddelen av dokumentet. Om du vill ange attributen class eller ID för en tagg i taggväljaren högerklickar du (Windows) eller Control-klickar (Macintosh) på taggen och väljer en klass eller ett ID på snabbmenyn.

Panelen Utdata

Klicka på den här ikonen för att visa Output-panelen som visar kodfel i ditt dokument.

Kodfärgning

(Endast tillgängligt i kodvy)

Välj något av kodspråken från den här popup-menyn för att ändra färgningen av koden så att den visas enligt programmeringsspråket.

Växla mellan infogningsläge (INF) och överskrivningsläge (OVR)

(Endast tillgängligt i kodvy)

Låter dig växla mellan lägena Infoga och Skriv över när du arbetar i kodvy.

Rad- och kolumnnummer

(Endast tillgängligt i kodvy.)

Visar radnumret och kolumnnumret där markören finns.

Egenskapskontrollen, översikt

Egenskapskontrollen (Fönster > Egenskaper) låter dig granska och redigera de vanligaste egenskaperna för det markerade sidelementet, till exempel text eller ett infogat objekt.

Innehållet i egenskapskontrollen varierar beroende på vilket element som är markerat. Om du till exempel markerar en bild på sidan så ändras egenskapskontrollen så att den visar egenskaper för bilden (till exempel sökvägen till bilden, bredden och höjden på bilden, kanten runt bilden om sådan finns, och så vidare).

Egenskapspanelen finns som standard i arbetsytans nedre kant, men du kan avbryta dockningen av den och göra den till en flytande panel i arbetsytan.

Om du vill komma till hjälpen för en viss egenskapspanel klickar du på hjälpknappen i det övre högra hörnet av egenskapskontrollen eller väljer hjälp från Alternativ-menyn i en egenskapspanel.

Visa och ändra ett sidelements egenskaper

Snabbmenyer

Snabbmenyer är ett snabbt sätt att komma åt de vanligaste kommandona och egenskaperna som hör till det objekt eller det fönster som du arbetar med. Snabbmenyer visar endast de kommandon som är tillämpliga för den aktuella markeringen.

För att öppna en snabbmeny högerklickar du (Windows) eller Ctrl+klickar (Mac) på en kodsektion i kodvy eller på ett objekt i Live- eller designvyer.

Ordna om paneler i Dreamweaver

Du kan anpassa placeringen och utseendet för alla Dreamweaver-paneler efter dina behov.

Docka och avdocka paneler

• Om du vill docka ett skikt drar du det i fliken till dockan, högst upp, längst ned eller mellan andra paneler.
• Om du vill docka en panelgrupp drar du den i namnlisten (det heltäckande tomma fältet ovanför flikarna) till dockan.
• Om du vill ta bort en panel eller en panelgrupp drar du den ut från dockan i dess flik eller namnlist. Du kan dra den till en annan docka eller frigöra den.

Flytta paneler

När du flyttar paneler visas blåmarkerade släppningsområden, områden dit du kan flytta panelen. Du kan till exempel flytta en panel uppåt eller nedåt i en docka genom att dra den till det smala blå släppningsområdet ovanför eller under en annan panel. Om du drar till ett område som inte är ett släppningsområde börjar panelen att flyta fritt i arbetsytan.

• Om du vill flytta en panel drar du i dess flik.
• Om du vill flytta en panel drar du i namnlisten.

Lägga till och ta bort paneler

Om du tar bort alla paneler från en docka, försvinner dockan. Du kan skapa en docka genom att flytta paneler mot högerkanten av arbetsytan tills ett släppningsområde visas.

• Om du vill ta bort en panel högerklickar du (Windows) eller Ctrl-klickar (Mac) på fliken och väljer sedan Stäng, eller avmarkerar den direkt på Fönster-menyn.
• Om du vill lägga till en panel markerar du den på Fönster-menyn och dockar den där du vill ha den.

Hantera panelgrupper

• Om du vill flytta en panel i en grupp drar du i panelens flik till det markerade området i gruppen och släpper den.
• Om du vill ordna om panelerna i en grupp drar du i fliken på en panel till en ny plats i gruppen.
• Om du vill ta bort en panel från en grupp så att den flyter fritt, drar du panelen i dess flik till en plats utanför gruppen.
• Om du vill flytta en grupp drar du i namnlisten (området ovanför flikarna).

Skikta flytande paneler

När du drar en panel till en plats utanför dockan men inte till ett släppningsområde, flyter panelen fritt. En flytande panel kan du placera var som helst i arbetsytan. Du kan skikta flytande paneler eller panelgrupper så att de flyttas som en enhet när du drar i den översta namnlisten.

• Om du vill skikta flytande paneler drar du panelen i dess flik till släppzonen längst ned på en annan panel.
• Om du vill ändra skiktordning drar du en panel uppåt eller nedåt i dess flik.
• Om du vill ta bort en panel eller panelgrupp från skiktet, så att den kan börja flyta fritt, drar du den i fliken eller namnlisten.

Ändra storlek på paneler

• Om du vill minimera eller maximera en panel, panelgrupp eller ett skikt med paneler dubbelklickar du på en flik. Du kan också dubbelklicka på flikområdet (det tomma utrymmet bredvid flikarna).
• Om du vill ändra storlek på en panel drar du i sidan på panelen. 

Komprimera eller expandera panelikoner

Du kan komprimera panelerna till ikoner om du vill rensa arbetsytan. I vissa fall är panelerna komprimerade till ikoner i standardarbetsytan.

• Om du vill komprimera eller expandera alla panelikoner i en kolumn klickar du på dubbelpilen högst upp i dockan.
• Om du vill expandera en enskild panelikon klickar du på den.
• Om du vill ändra storlek på panelikonerna så att bara ikonerna (och inte etiketterna) visas, justerar du bredden på dockan tills texten försvinner. Om du vill visa ikontexten igen gör du dockan bredare.
• Om du vill komprimera en expanderad panel till en ikon igen, klickar du på fliken, på ikonen eller på dubbelpilen i panelens namnlist.

Skapa anpassade arbetsytor

Du kan anpassa arbetsytan genom att lägga till eller ta bort paneler efter dina behov. Du kan sedan spara dessa ändringar i din arbetsyta genom att spara den för att komma åt den senare från Workspace-växlaren i dokumentets verktygsfält.

Genom att spara aktuell storlek och placering för paneler som en namngiven arbetsyta, kan du återskapa den arbetsytan även om du flyttar eller stänger en panel.

Så här sparar du en anpassad arbetsyta:

1. Välj Fönster > Arbetsytans layout > Ny arbetsyta.
2. Ange ett namn på arbetsytan.

Arbetsytan sparas och visas i arbetsyteväxlaren i verktygsfältet Dokument.

Så här tar du bort en anpassad arbetsyta:

Välj Hantera arbetsytor i arbetsyteväxlaren i programfältet så öppnas dialogrutan Hantera arbetsytor. Välj arbetsytan och klicka sedan på Ta bort.

Visa eller växla arbetsytor

Välja en Workspace från workspace-växlaren i dokumentets verktygsfält.

Anpassa Dreamweaver i system med flera användare

Du kan anpassa Dreamweaver efter dina behov även i ett fleranvändarsystem som Windows XP eller Mac OS X.

Dreamweaver förhindrar att användares anpassade konfigurationer påverkar andra användares anpassade konfigurationer. För att nå detta mål skapar programmet kopior av en mängd olika konfigurationsfiler första gången du kör Dreamweaver i ett av operativsystemen med flera användare. Användarnas konfigurationsfiler sparas i en mapp som tillhör dig.

Om du installerar om eller uppgraderar Dreamweaver skapar Dreamweaver automatiskt säkerhetskopior av befintliga användarkonfigurationsfiler, så om du anpassade filerna manuellt har du fortfarande åtkomst till de ändringar du gjorde.

Visa dokument med flikar (endast Mac)

Du kan visa flera dokument i samma dokumentfönster. Dokumenten placeras i olika flikar. Du kan dessutom visa dem på en flytande arbetsyta. Då visas varje dokument i ett eget fönster.

Öppna ett dokument på en flik i ett separat fönster

Kontroll-klicka på fliken och välj Flytta till nytt fönster på snabbmenyn.

Ändra standardinställningen för dokument med flikar

1. Välj Dreamweaver > Inställningar och sedan kategorin Allmänt.
2. Markera eller avmarkera Öppna dokument i flikar och klicka på OK.

Dreamweaver ändrar inte utseendet på öppna dokument när du ändrar inställningar. Dokument som öppnas efter att du har valt en ny inställning visas emellertid med det val du har gjort.

Välkomstskärmen visas när du startar Dreamweaver och varje gång du inte har några dokument öppna. Du kan välja att dölja välkomstskärmen men även att visa den igen. När välkomstskärmen döljs och inga dokument är öppna är dokumentfönstret tomt.

Vanliga paneler i Dreamweaver

Du arbetar med ett antal olika paneler i Dreamweaver. Några av de vanligaste panelerna beskrivs här.

Översikt över panelen Infoga

Panelen Infoga (Fönster > Infoga) innehåller knappar som används för att skapa och infoga objekt som tabeller, bilder och länkar. Knapparna är organiserade i flera kategorier, som du kan växla mellan genom att välja önskad kategori från rullgardinslistan högst upp.

Vissa kategorier har knappar med snabbmenyer. När du väljer ett alternativ på en snabbmeny, blir det standardalternativet för knappen. Om du till exempel väljer Line Break från Character-knappens popup-meny, infogar Dreamweaver en radbrytning nästa gång du klickar på Character-knappen.Varje gång som du väljer ett nytt alternativ på snabbmenyn ändras standardåtgärden för knappen.

Infoga-panelen ordnas i följande kategorier:

Låter dig skapa och infoga de mest använda HTML-elementen såsom div-taggar och objekt, såsom bilder och tabeller.

Innehåller knappar för att skapa formulär och infoga formulärelement, såsom sökning, månad och lösenord.

Låter dig spara dokumentet som en mall och markera specifika områden som redigerbara, valfria, upprepande eller redigerbara valfria områden.

Innehåller Bootstrap-komponenter för att tillhandahålla navigering, containers, rullgardinsmenyer och mer som du kan använda i responsiva projekt.

Innehåller knappar för att bygga platser som använder jQuery Mobile.

Låter dig infoga jQuery UI-element såsom dragspel, reglage och knappar.

Gör att du kan gruppera och ordna de knappar på infoga-panelen som du använder mest på ett och samma ställe.

Infoga objekt

För att infoga ett objekt med hjälp av panelen Infoga:

Redigera inställningar för panelen Infoga

Lägga till, ta bort eller hantera objekt i kategorin Favoriter på panelen Infoga

Filpanelen, översikt

Använd panelen Filer för att visa och hantera filerna på din Dreamweaver-plats.

Du kan använda filpanelen för att visa filer och mappar, kontrollera om de är kopplade till en Dreamweaver-plats eller inte, och utföra vanligt filunderhåll, till exempel att öppna och flytta filer.

Med filpanelen kan du också hantera och överföra filer till och från en fjärrserver. 

För mer information om allt du kan göra med panelen Filer, se Hantera filer och mappar.

CSS Designer

CSS Designer panel (Windows > CSS Designer) är en CSS-egenskapsinspektör som låter dig "visuellt" skapa CSS-stilar, filer och ställa in egenskaper, tillsammans med mediafrågor.

Du kan använda Ctrl/Cmd+Z om du vill ångra eller Ctrl/Cmd+Y om du vill göra om åtgärder som du utför i CSS Designer. Ändringarna återges automatiskt i Live-vyn, och relevant CSS-fil uppdateras. Fliken för den fil som påverkas markeras automatiskt en stund (cirka åtta sekunder) för att visa att den relaterade filen har ändrats.

CSS Designer-panelen består av följande rutor och alternativ:

Alla Visar alla CSS-formatmallar, mediefrågor och väljare som är kopplade till det aktuella dokumentet. Du kan filtrera bland de nödvändiga CSS-reglerna och ändra egenskaperna. Du kan också använda detta läge för att börja skapa selektorer eller mediafrågor.

Det här läget är inte beroende av markeringen. Detta betyder att när du väljer ett element på sidan markeras inte den associerade selektorn, mediafrågan eller CSS:en i CSS Designer.

Aktuell Visar alla beräknade format för element som valts i designvyn eller Live-vyn i det aktuella dokumentet. När du använder detta läge för en CSS-fil i kodvy visas alla egenskaper för selektorn i fokus.

Det här läget är sammanhangsberoende. Använd detta alternativ för att redigera egenskaperna för selektorer som är associerade med valda element i dokumentet.

Källor Här visas en lista med alla CSS-formatmallar som är associerade med dokumentet. I den här rutan kan du skapa och bifoga en CSS-formatmall till dokumentet eller definiera format inom dokumentet.

@Media Här visas en lista med alla mediefrågor i den valda källan i rutan Källor. Om du inte väljer en specifik CSS-formatmall visas alla mediefrågor som är associerade med dokumentet i rutan.

Väljare Här visas en lista med alla väljare i källan som valts i rutan Källor. Om du även väljer en mediefråga begränsas listan med väljare för den mediefrågan i rutan. Om du inte har valt några CSS-formatmallar eller mediefrågor visas alla väljarna i dokumentet.

När du väljer Global i @Media-rutan visas alla selektorer som inte ingår i en mediafråga för den valda källan.

Egenskaper Här visas egenskaper som du kan ställa in för den angivna väljaren. Mer information finns i Ange egenskaper.

Om du döljer eller visar rutor i CSS Designer bevaras rutornas storlek i en session. Rutorna Källor och Media behåller den anpassade storleken tills du ändrar storleken igen.

Obs! När du väljer ett sidelement markeras den mest specifika väljaren i rutan Väljare. Om du vill visa egenskaperna för en specifik väljare klickar du på namnet på väljaren i rutan.

Om du vill visa alla väljarna kan du välja Alla källor i rutan Källor. Om du vill visa väljare som inte tillhör någon mediafråga i den valda källan klickar du på Global i rutan @Media.

Visuella stödlinjer, översikt

Dreamweaver tillhandahåller flera typer av visuella guider för att hjälpa dig utforma dokument och förutsäga ungefär hur de visas i webbläsare.Du kan göra något av följande:

• Fäst dokumentfönstret direkt till önskad fönsterstorlek för att se hur elementen passar in på sidan.

• Använd en hjälpbild som sidbakgrund för hjälp när du mångfaldigar en design som har skapats i ett illustrations- eller bildredigeringsprogram som t.ex. Adobe® Photoshop® eller Adobe® Fireworks®.

• Använd linjaler eller stödlinjer för att få en synlig markering för exakt placering och ändrad storlek på sidelementen.

• Använd stödrastret för exakt placering och ändring av storlek på absolut positionerade element (AP-element).

  Stödrastermarkeringar på sidan hjälper dig att rikta AP-element och när rastersnäppning är aktiverad fästes AP-elementen automatiskt till den närmaste stödrasterpunkten när de flyttas eller ändrar storlek. (Andra objekt, t.ex. bilder och stycken, kan inte fästas i stödrastret.) Rastersnäppning fungerar oavsett om stödrastret syns eller inte.

Zooma in och ut på en sida

Du kan öka förstoringen (zooma in) i dokumentfönstret och därmed kontrollera att pixlarna i grafiken är som du vill ha dem, välja små objekt enklare, designa sidor med liten text, designa stora sidor och så vidare.

Om du vill zooma in eller ut på en sida väljer du Visa > Alternativ för designvy > Förstoring och väljer något av de tillgängliga förstoringsvalen.

Du kan välja mellan många olika förstoringsalternativ. Du kan också välja att:

• Anpassa markering - Markera ett objekt eller text och välj det här alternativet för att fylla dokumentfönstret med markeringen.
• Anpassa allt - Fyll dokumentfönstret med en hel sida
• Anpassa bredd - Fyll dokumentfönstret med hela sidans bredd

Ange Dreamweavers allmänna inställningar

Ange typsnittsinställningar för dokument i Dreamweaver

Dokumentets kodning bestämmer hur dokumentet ser ut i en webbläsare. Med typsnittsinställningarna i Dreamweaver kan du visa en viss kodning i det typsnitt och den storlek som du önskar. Typsnitten som du väljer i dialogrutan Typsnittsinställningar påverkar emellertid bara hur typsnitten visas i Dreamweaver, inte hur dokumentet visas i en besökares webbläsare. Om du ändrar hur typsnitten visas i en webbläsare, måste du ändra texten genom att använda egenskapskontrollen eller använda en CSS-regel.

Information om hur du anger en standardkodning för nya dokument finns i Skapa och öppna dokument.

Anpassa markeringsfärgerna i Dreamweaver

Använd inställningarna för markering för att anpassa färgerna som identifierar mallregioner, biblioteksobjekt, taggar från tredje part, layoutelement och kod i Dreamweaver.

Liknande innehåll

• Öppna relaterade filer
• Allmän information om kodning i Dreamweaver
• Ange kodningsinställningar
• Visa och redigera huvudinnehåll
• Använda visuella hjälpmedel för layout
• Förhandsgranska sidor
• Arbeta med filer i filpanelen