Arbetsytan i Dreamweaver

När du har installerat Dreamweaver och startar programmet första gången visas en snabbstartsmeny på skärmen. Med hjälp av tre frågor kan du anpassa din Dreamweaver-arbetsyta efter behov.

Utifrån dina svar på de här frågorna öppnas Dreamweaver i en arbetsyta för utvecklare (en minimal kodfokuserad layout) eller en standardarbetsyta (en delad layout med visuella verktyg och en förhandsvisning 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 börja.

Förbättrad startskärm

Startskärmen i Dreamweaver ger dig snabb åtkomst till dina senaste filer, filtyper och startmallar.

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

Startskärmen visas när du startar Dreamweaver och när det inte finns några öppna dokument.

Alternativ på arbetsytan Start i Dreamweaver

Klicka Lär dig för att gå direkt till Dreamweaver-självstudiekurser 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 ingår i 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. Fliken är tom om du inte arbetat med några filer nyligen.

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 in en sökfråga visas dina senaste 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. Mer information om att skapa och öppna dokument i Dreamweaver finns i 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:

Programfältet finns längs programfönstrets överkant och innehåller en arbetsyteväxlare, menyer (enbart Windows) och andra programkontroller.

Innehåller knappar med alternativ för olika vyer av dokumentfönstret (t.ex. designvyn, Live-vyn och kodvyn).

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

Finns på vänster sida i 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, typsnitt, färger, övertoningar och mått från PSD-kompositioner till dina 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. Mer information finns i 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-egenskapskontroll där du ”visuellt” kan skapa CSS-format och CSS-filer, ange egenskaper och använda mediefrågor.

Översikt av dokumentfönstret

I dokumentfönstret visas det aktuella dokumentet. Använd visningsalternativen i verktygsfältet Dokument om du vill växla mellan vyer i dokumentet. 

Du kan också växla mellan vyer genom att använda visningsalternativen på 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. Mer information om hur du redigerar i Live-vyn finns i avsnittet Redigera HTML-element i Live-vyn.

ä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 vy för manuell kodning där du kan skriva och redigera HTML, JavaScript och annan kod.

är en delad version av kodvyn där du kan skrolla till arbetet i olika avsnitt av dokumentet samtidigt. 

gör att du kan se både kodvyn och Live-vyn för samma dokument i ett enda fönster.

gör att du kan se både kodvyn och designvyn 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 ändras dynamiskt medan du arbetar 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 ännu inte har sparat.

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 av verktygsfältet Dokument.

Du kan också växla mellan vyer genom att använda följande alternativ på menyn Visa:

• Endast kodvyn: Välj Kod
• Delad vy: Välj Dela och välj något av delningsalternativen
• Visningsläge: Växla mellan vyerna Live och Design
• Växla vy: Om du vill växla 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.

Om du vill ha överlappande dokumentfönster: Välj Fönster > Ordna > Överlappande.

Om du vill visa dokumentfönster sida vid sida: 

• (Windows) Välj Fönster > Ordna > Över och under eller Sida vid sida.
• (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örhandsgranska en sida för mobila enheter vars sidlayout ändras beroende på hur enheten hålls.

Om du vill ändra storlek på dokumentfönstret väljer du en av storlekarna på snabbmenyn Fönsterstorlekar 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önsterstorlekar

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. Alternativet för designvy är inte tillgängligt för dokument med flytande stödrasterlayout.

Ä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 listrutan är inte tillgänglig för dokument med flytande stödrasterlayout.

Visar en representation av dokumentet och 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 på menyerna Arkiv och Redigera: Nytt, Öppna, Spara, Spara allt, 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. Om du vill testa länkar i Live-vyn kan du aktivera engångsklickning eller kontinuerlig klickning genom att välja Visa > Live-visningsalternativ > 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 visas inte alternativ som är specifika för kodvyn, som Formatera källkod. 

Anpassa verktygsfältet

Du kan anpassa det här verktygsfältet efter dina behov genom att lägga till menyalternativ eller ta bort oönskade menyalternativ från verktygsfältet.

Gör följande om du vill anpassa verktygsfältet:

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

Ö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 utdatapanelen som visar kodningsfel i ditt dokument.

Kodfärgning

(Bara tillgängligt i kodvyn)

Välj något av kodningsspråken från den här snabbmenyn för att ändra färgen på koden och visa den enligt programmeringsspråket.

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

(Bara tillgängligt i kodvyn)

Gör att du kan växla mellan infogningsläge och överskrivningsläge när du arbetar i kodvyn.

Rad- och kolumnnummer

(Bara tillgängligt i kodvyn.)

Visar radnummer och kolumnnummer där markören är placerad.

Egenskapskontrollen, översikt

I egenskapskontrollen (Fönster > Egenskaper) kan du 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).

Egenskapskontrollen 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. På snabbmenyerna visas enbart de kommandon som är tillämpliga för det markerade objektet.

Om du vill öppna en snabbmeny högerklickar (Windows) eller Ctrl-klickar (Mac) du på ett kodavsnitt i kodvyn eller på ett objekt i Live- eller designvyn.

Ordna om paneler i Dreamweaver

Du kan anpassa placeringen och utseendet på alla paneler i Dreamweaver efter dina önskemål.

Docka och avdocka paneler

• Om du vill docka en panel drar du den 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 panelgrupp 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 släppningsområdet i gruppen.
• 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 de här ändringarna genom att spara arbetsytan och sedan få tillgång till den via arbetsyteväxlaren i verktygsfältet Dokument.

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 egen arbetsyta:

1. Välj Fönster > Arbetsytelayout > 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 egen arbetsyta:

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

Visa eller växla arbetsytor

Markera en arbetsyta i arbetsyteväxlaren i verktygsfältet Dokument.

Anpassa Dreamweaver i system med flera användare

Du kan anpassa Dreamweaver så att det passar dina behov även i ett operativsystem med flera användare 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 ominstallerar eller uppgraderar Dreamweaver skapar Dreamweaver automatiskt säkerhetskopior av befintliga konfigurationsfiler för användare, så om du anpassade dessa manuellt har du fortfarande tillgång till ändringarna som 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

Ctrl-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 ordnas i flera kategorier, som du kan växla till genom att välja önskad kategori i listrutan 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 Radbrytning på snabbmenyn för knappen Tecken, infogar Dreamweaver en radbrytning nästa gång du klickar på knappen Tecken. 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:

Gör att du kan skapa och infoga de HTML-element som används oftast, t.ex. div-taggar och objekt som bilder och tabeller.

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

Gör att du kan spara dokumentet som en mall och markera specifika regioner som redigerbara, valfria och upprepande eller som redigerbara valfria regioner.

Innehåller Bootstrap-komponenter för navigering, behållare, listrutor och mer som du kan använda i responsiva projekt.

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

Gör att du kan infoga jQuery-gränssnittselement, t.ex. dragspelspaneler, skjutreglage 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

Så här infogar du 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 filpanelen för att visa och hantera filerna på Dreamweaver-platsen.

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. 

Mer information om allt du kan göra med filpanelen finns i Hantera filer och mappar.

CSS Designer

CSS Designer-panelen (Fönster > CSS Designer) är en CSS-egenskapskontroll där du ”visuellt” kan skapa CSS-format och CSS-filer, ange egenskaper och använda mediefrå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 även använda det här läget för att börja skapa väljare eller mediefrågor.

Det här läget är inte beroende av markeringen. Det innebär att när du väljer ett element på sidan markeras inte den kopplade väljaren, mediefrågan eller CSS-formatmallen i CSS Designer.

Aktuell Visar alla beräknade format för element som valts i designvyn eller Live-vyn i det aktuella dokumentet. Om du använder det här läget för en CSS-fil i kodvyn visas alla egenskaper för den väljare som är i fokus.

Det här läget är sammanhangsberoende. Använd det här alternativet när du vill redigera egenskaperna för de väljare som är kopplade till 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 rutan @Media visas alla väljare som inte ingår i en mediefrå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. Du kan visa egenskaperna för en specifik väljare genom att klicka på namnet för den aktuella 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 hör till en mediefråga i den markerade källan klickar du på Global i rutan @Media.

Visuella stödlinjer, översikt

Dreamweaver innehåller flera typer av visuella stödlinjer som hjälper dig att utforma dokument och förutsäga ungefär hur de visas i webbläsare. Du kan göra vad du vill 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 > Designvyalternativ > Förstoring och väljer något av de tillgängliga förstoringsalternativen.

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

• Anpassa efter markering – Markera ett objekt eller en text och välj det här alternativet om du vill fylla dokumentfönstret med det som är markerat.
• Anpassa efter allt – Fyll dokumentfönstret med en hel sida
• Anpassa efter 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.

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

Anpassa markeringsfärgerna i Dreamweaver

Använd markeringsinställningarna för att anpassa färgerna som används i Dreamweaver för att märka mallregioner, biblioteksobjekt, taggar från tredje part, layoutelement och kod.