Lär dig mer om arbetsytan i Dreamweaver, de olika vyerna och arbetsytorna som du kan använda och alla olika paneler och verktygsfält som finns i Dreamweaver.

Börja med 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.

Obs!

Du kan när som helst ändra inställningarna för arbetsytan genom att använda dialogrutan Redigera > Inställningar.

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.

Arbetsytan Start i Dreamweaver
Arbetsytan Start i Dreamweaver

Alternativ på arbetsytan Start i Dreamweaver

Lär dig

Klicka Lär dig för att gå direkt till Dreamweaver-självstudiekurser från den här skärmen.

Snabbstart

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

Startmallar

Öppna en av startmallarna som ingår i Dreamweaver. 

Startsida

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.

Obs!

Den här startskärmen är aktiverad och öppnas som standard. 

Om du inte behöver den här startskärmen avmarkerar du Visa startbild i dialogrutan Inställningar > Allmänt.

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.

Arbetsyta i Dreamweaver (CC)
Arbetsyta i Dreamweaver

A. Programfältet B. Verktygsfältet Dokument C. Dokumentfönster D. Arbetsyteväxlare E. Paneler F. Kodvyn G. Statusfält H. Taggväljare I. Live-vyn J. Verktygsfält 

Element i arbetsytan, översikt

Arbetsytan innehåller följande element:

Programfältet

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

Verktygsfältet Dokument

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

Verktygsfältet Standard

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

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

Dokumentfönstret

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

Egenskapskontrollen

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

Taggväljaren

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.

Paneler

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.

Panelen Extract

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.

Infoga-panelen

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.

Filpanelen

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.

Panelen Kodfragment

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.

CSS Designer-panelen

är en CSS-egenskapskontroll där du ”visuellt” kan skapa CSS-format och CSS-filer, ange egenskaper och använda mediefrågor.

Obs!

Dreamweaver innehåller flera andra paneler, kontroller och fönster. Om du vill öppna panelerna, kontrollerna och fönstren använder du menyn Fönster.

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

Live-vyn

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.

Designvyn

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

Kodvyn

är en vy för manuell kodning där du kan skriva och redigera HTML, JavaScript och annan kod.

Kod-Kod

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

Kod-Live

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

Kod-Design

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

Live-kod

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.
Växla vyer med hjälp av alternativen på menyn Visa
Växla vyer med hjälp av alternativen på menyn Visa

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

Alternativ för att ändra storlek på dokument
Alternativ för att ändra storlek på dokument

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

Obs!

Är du inte intresserad av en exakt storlek kan du använda den normala metoden att ändra storlek på fönstret i operativsystemet, t.ex. att dra i det nedre högra hörnet av fönstret.

Obs!

(Enbart Windows) Dokument i dokumentfönstret maximeras som standard och du kan inte ändra storlek på ett dokument när det är maximerat. Om du inte vill maximera dokumentet klickar du på återställningsknappen i dokumentets övre högra hörn.

Ändra värdena på snabbmenyn Fönsterstorlekar

  1. Välj Ändra storlek på snabbmenyn Fönsterstorlekar.

  2. Klicka på ett bredd- eller höjdvärde i listan Fönsterstorlekar och ange sedan ett nytt värde. Markera ett höjdvärde och ta bort det om du bara vill att dokumentfönstret ska justeras efter en viss bredd (och höjden inte ska ändras).

  3. Beskriv en viss storlek i rutan Beskrivning.

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

  1. Välj Ändra storlek på snabbmenyn Fönsterstorlekar.

    Lägga till fönsterstorlekar på snabbmenyn Fönsterstorlekar
    Lägga till fönsterstorlekar på snabbmenyn Fönsterstorlekar

  2. Klicka i det tomma utrymmet nedanför det sista värdet i kolumnen Bredd.

  3. Ange värden på bredd och höjd.

    Vill du enbart ange bredden eller höjden lämnar du bara det andra fältet tomt.

  4. Beskriv storleken som du har lagt till i fältet Beskrivning.

    Du skulle till exempel kunna skriva SVGA eller Normal PC bredvid posten för en bildskärm på 800 × 600 pixlar och 17 tums Mac bredvid en post för en bildskärm i storleken 832 × 624 pixlar. De flesta bildskärmar går att anpassa till en mängd olika pixelmått.

  5. Klicka på Använd och stäng dialogrutan.

    Den nya fönsterstorleken finns nu på snabbmenyn Fönsterstorlekar och kan användas.

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.

Verktygsfältet Dokument (CC)
Verktygsfältet Dokument

Följande alternativ visas i verktygsfältet Dokument:

Kodvyn

Visar endast kodvyn i dokumentfönstret.

Delad vy

Delar upp dokumentfönstret mellan kod- och Live-/designvyerna. Alternativet för designvy är inte tillgängligt för dokument med flytande stödrasterlayout.

Live-vyn

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

Designvy

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

Verktygsfältet Standard, översikt

Verktygsfältet Standard

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/se/), läses sidan in i dokumentfönstret.

Verktygsfältet Webbläsarnavigering (CC)
Verktygsfältet Webbläsarnavigering

A. Webbläsarkontroller B. Adressfält 

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:

  1. Öppna dialogrutan Anpassa verktygsfältet genom att klicka på  i verktygsfältet.

    Anpassa verktygsfält
    Anpassa verktygsfält

  2. Markera eller avmarkera de menyalternativ som du vill använda i verktygsfältet och klicka sedan på Klar för att spara 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.

Statusfält (CC)
Statusfält

A. Taggväljare B. Panelen Utdata C. Kodfärgning D. Växla mellan infogningsläge (INF) och överskrivningsläge (OVR) E. Rad- och kolumnnummer 

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

Egenskapskontroll (CC)
Egenskapskontroll

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.

Obs!

Använd taggkontrollen för att visa och redigera varje attribut som är kopplat till en viss taggegenskap.

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

  1. Markera sidelementet i dokumentfönstret.

    Du kan behöva utöka egenskapskontrollen om du vill se det markerade elementets samtliga egenskaper.

  2. Ändra alla egenskaper som du vill ändra i egenskapskontrollen.

    Obs!

    Vill du ha information om enskilda egenskaper ska du markera ett element i dokumentfönstret och sedan klicka på hjälpikonen i det övre högra hörnet av egenskapskontrollen.

  3. Om ändringarna inte syns omedelbart i dokumentfönstret kan du lägga till ändringarna på något av dessa sätt:

    • Klicka utanför redigeringstextfälten.
    • Tryck på Retur (Windows och Macintosh).
    • Gå till en annan egenskap genom att trycka på tabbtangenten.

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.

Obs!

Tryck på Ctrl (Windows) eller Kommando (Mac OS) medan du flyttar en panel om du inte vill att den ska dockas. Tryck på Esc medan du flyttar panelen om du vill avbryta åtgärden.

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.

Panelen Infoga
Panelen Infoga

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:

HTML

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.

Formulär

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

Mallar

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

Bootstrap-komponenter

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

jQuery Mobile

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

jQuery-gränssnitt

Gör att du kan infoga jQuery-gränssnittselement, t.ex. dragspelspaneler, skjutreglage och knappar.

Favoriter

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

Obs!

 Om du arbetar med vissa typer av filer, till exempel XML, JavaScript, Java och CSS, är panelen Infoga och designvyn nedtonade eftersom du inte kan infoga objekt i dessa kodfiler.

Infoga objekt

Så här infogar du ett objekt med hjälp av panelen Infoga:

  1. Välj lämplig kategori på snabbmenyn Kategori på panelen Infoga.

  2. Gör något av följande:

    • Klicka på knappen för ett objekt eller dra knappens ikon till dokumentfönstret (till designvyn, Live-vyn eller kodvyn).

    • Klicka på pilen på en knapp och välj sedan ett alternativ på menyn.

      Beroende på vilket objekt det är fråga om kan en dialogruta visas. Du ombeds då att leta reda på en fil eller ange objektets parametrar. Dreamweaver kan i stället infoga kod i dokumentet eller öppna en taggredigerare eller en panel där du ska ange information innan koden infogas.

      För vissa objekt visas ingen dialogruta om du infogar objektet i designvyn, men en taggredigerare visas om du infogar objektet i kodvyn. För några få objekt växlar Dreamweaver till kodvyn innan objektet infogas om du väljer att infoga objektet i designvyn.

Redigera inställningar för panelen Infoga

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).

  2. Avmarkera Visa dialogrutan vid infogning av objekt i kategorin Allmän i dialogrutan Inställningar om du inte vill se några dialogrutor när du infogar objekt som bilder, tabeller, skript och head-element. Du kan även hålla ned Ctrl-tangenten (Windows) eller Alt-tangenten (Macintosh) när du skapar objektet.

Obs!

Objektets attribut får standardvärden då du infogat ett objekt och det här alternativet har valts bort. Ändra objektets egenskaper i egenskapskontrollen efter att du har infogat det.

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

  1. Välj en kategori på panelen Infoga.

  2. Högerklicka (Windows) eller Ctrl-klicka (Macintosh) i området där knapparna visas och markera sedan Anpassa favoriter.

  3. Gör de ändringar som behövs i dialogrutan Anpassa favoritobjekt och klicka på OK.

    Lägg till ett objekt genom att markera det i rutan Tillgängliga objekt till vänster och klicka sedan på pilen mellan de två rutorna eller dubbelklicka på objektet i rutan Tillgängliga objekt.

    Anpassa favoriter på panelen Infoga
    Anpassa favoriter på panelen Infoga

    Obs!

    Du kan lägga till ett objekt i taget. Det går inte att välja ett kategorinamn, till exempel Gemensam, och lägga till en hel kategori i favoritlistan.

    • Du kan ta bort ett objekt eller en skiljelinje genom att välja ett objekt i rutan Favoritobjekt till höger och sedan klicka på knappen Ta bort markerade objekt i listan över favoritobjekt ovanför rutan.
    • Du kan flytta ett objekt genom att markera det i rutan Favoritobjekt till höger och sedan klicka på upp- eller nedpilen ovanför rutan.
    • Om du vill lägga till en skiljelinje nedanför ett objekt markerar du det i rutan Favoritobjekt till höger och klickar sedan på Lägg till avgränsningstecken nedanför rutan.
  4. Om du inte arbetar i kategorin Favoriter på panelen Infoga, markerar du kategorin så att ändringarna visas.

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. 

Filpanelen
Filpanelen

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-panel (CC)
CSS Designer-panel

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

Obs!

Du kan även zooma in utan att använda zoomningsverktyget genom att trycka på Ctrl + = (Windows) eller kommandotangenten + = (Macintosh). Du kan även zooma ut utan att använda zoomningsverktyget genom att trycka på Ctrl + - (Windows) eller kommandotangenten + - (Macintosh).

Ange Dreamweavers allmänna inställningar

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).

  2. Ange något av följande alternativ:

    Öppna dokument i flikar Alla dokument öppnas i flikar i samma fönster. Du kan växla mellan dokumenten (endast Macintosh).

    Visa startbild Välkomstskärmen i Dreamweaver visas när du startar Dreamweaver eller om inga dokument är öppna.

    Öppna dokument igen vid start Öppnar dokument som var öppna när du stängde Dreamweaver. Om det här alternativet inte är markerat visar Dreamweaver välkomstskärmen eller ingenting alls när programmet startas (beroende på inställningen för Visa välkomstskärm).

    Varna när skrivskyddade filer öppnas Varnar när du öppnar en skrivskyddad (låst) fil. Välj att låsa upp/checka ut filen, visa filen eller avbryta.

    Aktivera relaterade filer Gör att du kan se vilka filer som kopplas till det aktuella dokumentet (till exempel CSS- eller JavaScript-filer). Dreamweaver innehåller en knapp för varje relaterad fil högst upp i dokumentet, och filen öppnas om du klickar på knappen.

    Identifiera dynamiskt relaterade filer Gör att du kan välja om dynamiskt relaterade filer ska visas i verktygsfältet Relaterade filer automatiskt eller manuellt. Du kan också välja att inaktivera identifieringen av dynamiskt relaterade filer.

    Uppdatera länkar när filer flyttas Den här inställningen bestämmer vad som händer när du flyttar, byter namn på eller tar bort ett dokument på webbplatsen. Du kan välja att uppdatera länkar automatiskt, aldrig uppdatera länkar eller få en fråga om en uppdatering ska ske. (Se Uppdatera länkar automatiskt.)

    Visa dialogrutan vid infogning av objekt Den här inställningen avgör om Dreamweaver ber dig att ange ytterligare information då du infogar bilder, tabeller, Shockwave-filmer och vissa andra objekt från panelen eller menyn Infoga. Om det här alternativet är avmarkerat visas ingen dialogruta. Du måste då välja källfiler för bilder, antalet rader i en tabell och så vidare i egenskapskontrollen. För överrullningsbilder och Fireworks-HTML visas alltid en dialogruta när du infogar objektet, oavsett inställningen av det här alternativet. (Vill du åsidosätta inställningen tillfälligt kan du kontrollklicka [Windows] eller kommandoklicka [Macintosh] när du skapar och infogar objekt.)

    Aktivera inmatning av dubbelbyte Gör att du kan ange text med dubbla byte i dokumentfönstret om du använder en utvecklingsmiljö eller ett språkkit som medger det (t.ex. japanska tecken). När det här alternativet är avmarkerat visas ett textfönster där du kan ange och konvertera text med dubbla byte. Texten visas i dokumentfönstret när den har godkänts.

    Växla till normalt styckeformat efter rubrik Den här inställningen innebär att ett nytt stycke som taggas med p infogas då du trycker på Retur (Windows/Mac) i slutet av en rubrik i designvyn eller Live-vyn. (En rubrik är ett stycke som märks med en rubriktagg som h1 eller h2.) Om det här alternativet är avmarkerat skapas ett nytt stycke med samma rubriktagg då du trycker på Retur i slutet av rubrikstycken (vilket innebär att du kan skriva flera rubriker i rad och sedan gå tillbaka och fylla i dem).

    Tillåt flera mellanslag efter varandra Om du skriver två eller flera mellanslag i designvyn eller Live-vyn skapas fasta mellanslag som visas som flera mellanslag i en webbläsare. (Du kan till exempel skriva två mellanslag mellan meningar, vilket vissa gör då de skriver på maskin.) Det här alternativet är avsett för dem som är vana vid att arbeta med ordbehandlare. När det här alternativet är avmarkerat behandlas flera mellanslag som ett enda (eftersom webbläsare behandlar flera mellanslag som ett mellanslag).

    Använd <strong> och <em> i stället för <b> och <i> Det här alternativet innebär att Dreamweaver ska använda strong-taggen när du gör något som normalt skulle innebära att b-taggen användes, och att em-taggen ska användas när du gör något som normalt skulle innebära att taggen i användes. Sådana åtgärder är bland annat att klicka på knapparna Fet eller Kursiv i egenskapskontrollen i HTML-läge och välja Format > Stil > Fet eller Format > Stil > Kursiv. Avmarkera det här alternativet om du vill använda taggarna b och i i dina dokument.

    Obs! World Wide Web Consortium vill inte att taggarna b och i används. Taggarna strong och em innehåller mer semantisk information än taggarna b och i.

    Varna när ändringsbara regioner placeras inom taggar av typen <p> eller <h1>-<h6> Anger att en varning ska visas när du sparar en Dreamweaver-mall med en ändringsbar region i en stycke- eller rubriktagg. Meddelandet är att användarna inte kan skapa fler stycken i regionen. Det är aktiverat som standard.

    Begränsa ångra-åtgärder till det aktiva dokumentet Begränsa ångra-åtgärder till filen som redigeras för tillfället. Om du till exempel redigerar en CSS-fil kan du bara ångra ändringar som gjorts i CSS-filen.

    Om du avmarkerar den här kryssrutan använder HTML-källan och alla relaterade CSS-filer en gemensam ångra-historik och du kan ångra åtgärder oavsett om du arbetar med HTML-koden eller med en relaterad CSS-fil.

    Maximalt antal historiksteg Bestämmer antalet steg som Dreamweaver kommer ihåg. (Standardvärdet bör räcka för de flesta.) Om du använder fler steg än det angivna antalet tas de äldsta stegen bort.

    Stavningsordlista Visar en lista med de tillgängliga stavningsordlistorna. Om en ordlista innehåller flera dialekter eller stavningskonventioner (till exempel amerikansk och brittisk engelska) listas dialekterna separat på snabbmenyn Ordlista.

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.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac).

  2. Välj Typsnitt i kategorilistan till vänster.

  3. Välj en teckenuppsättning (till exempel Västerländsk eller Japanska) i listan Typsnittsinställningar.

    Obs!

    Om du vill visa ett asiatiskt språk måste du ha ett operativsystem som stödjer typsnitt med dubbla byte.

  4. Välj ett typsnitt och en storlek som du vill använda för varje kategori i den valda kodningen.

    Obs!

    Typsnittet måste vara installerat på datorn om det ska visas på snabbmenyerna. Om du exempelvis vill kunna se japansk text måste ett japanskt typsnitt vara installerat.

    Proportionellt typsnitt

    Det typsnitt som Dreamweaver använder för att visa normal text (till exempel text i stycken, rubriker och tabeller). Standardvärdet beror på vilka typsnitt som är installerade på systemet. På de flesta amerikanska datorer är standarden Times New Roman i 12 punkter. (Medium) i Windows och Times i 12 punkter på Mac OS.

    Fast typsnitt

    Det typsnitt som Dreamweaver använder för att visa text i pre-, code- och tt-taggar. Standardvärdet beror på vilka typsnitt som är installerade på systemet. På de flesta amerikanska datorer är standarden Courier New i 10 punkter (Liten) i Windows och Monaco i 12 punkter på Mac OS.

    Kodvyn

    Det typsnitt som används för all text i kodvyn och i kodpanelen. Standardvärdet beror på vilka typsnitt som är installerade på systemet.

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.

  1. Välj Redigera > Inställningar och markera kategorin Markering.

  2. Klicka på färgrutan bredvid objektet vars markeringsfärg du vill ändra och välj sedan en ny färg i färgväljaren eller skriv ett hexadecimalt värde.

  3. Om du vill aktivera eller inaktivera markering för ett visst alternativ markerar eller avmarkerar du alternativet Visa.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy