Använda Fireworks och Dreamweaver

Senast uppdaterad den 25 apr. 2024

Använd Fireworks och Dreamweaver om du vill ha ett smidigt arbetsflöde för att redigera, optimera och placera webbgrafikfiler på HTML-sidor.

Obs!

Funktionen stöds inte i Adobe Dreamweaver-versionerna.

Infoga en Fireworks-bild

Dreamweaver och Fireworks känner igen och delar många procedurer för filredigering, till exempel ändringar i länkar, bildscheman och tabellsegment. Tillsamman ger de två programmen ett smidigt arbetsflöde för att redigera, optimera och placera filer med webbgrafik på HTML-sidor.

Du kan placera en bild som exporterats från Fireworks direkt i ett Dreamweaver-dokument med kommandot Infoga bild. Du kan också skapa en ny Fireworks-bild av en bildplatshållare i Dreamweaver.

I Dreamweaver-dokumentet placerar du insättningspunkten där du vill att bilden ska visas, och sedan gör du något av följande:

Välj Infoga > Bild.
Gå till kategorin Allmänt på panelen Infoga och klicka på knappen Bild eller dra den till dokumentet.

Navigera till den exporterade Fireworks-fil du vill ha och klicka på OK (Windows) eller Öppna (Macintosh).

Obs!

Om Fireworks-filen inte finns på den aktuella Dreamweaver-platsen visas en fråga om du vill kopiera filen till rotmappen. Klicka på Ja.

Redigera en Fireworks-bild eller tabell från Dreamweaver

När du öppnar och redigerar en bild eller ett bildsegment som är en del av en Fireworks-tabell startar Dreamweaver Fireworks, som öppnar PNG-filen som bilden eller tabellen exporterades från.

Obs!

Detta förutsätter att Fireworks är angivet som primär extern bildredigerare för PNG-filer. Fireworks är även ofta angivet som standardredigerare för JPEG- och GIF-filer, men du kan ange Photoshop som standardredigerare för dessa filtyper.

När bilden ingår i en Fireworks-tabell kan du öppna hela Fireworks-tabellen för redigering, så länge kommentaren  finns i HTML-koden.Om PNG-källfilen exporterades från Fireworks till en Dreamweaver-plats med Dreamweaver-inställningen Format HTML och bilder, infogas Fireworks-tabellens kommentar automatiskt i HTML-koden.

I Dreamweaver öppnar du egenskapskontrollen (Fönster > Egenskaper) om den inte redan är öppen.

Markera bilden eller bildsegmentet genom att klicka på dem.

När du markerar en bild som har exporterats från Fireworks känner egenskapskontrollen igen markeringen som en Fireworks-bild eller -tabell och visar namnet på PNG-källfilen.

Så här startar du Fireworks för redigering:

Klicka på Redigera i egenskapskontrollen.
Håll ned Ctrl (Windows) eller Kommando (Macintosh) och dubbelklicka på den markerade bilden.
Högerklicka (Windows) eller kontroll‑klicka (Macintosh) på den markerade bilden och välj Redigera med Fireworks på snabbmenyn.

Obs!

Om Fireworks inte hittar källfilen uppmanas du att leta rätt på PNG-källfilen. När du arbetar med Fireworks-källfilen sparas ändringar både i källfilen och i den exporterade filen. I annat fall uppdateras bara den exporterade filen.

Ändra PNG-källfilen i Fireworks och klicka på Klar.

Fireworks sparar ändringarna i PNG-filen, exporterar den uppdaterade bilden (eller HTML och bilder) och låter fokus återgå till Dreamweaver. Den uppdaterade bilden eller tabellen visas i Dreamweaver.

En självstudiekurs om integrationen mellan Dreamweaver och Fireworks finns på www.adobe.com/go/vid0188_se.

Optimera en Fireworks-bild från Dreamweaver

Du kan använda Dreamweaver för att göra snabba ändringar i Fireworks-bilder och -animeringar. I Dreamweaver kan du ändra inställningar för optimering och animering, och den exporterade bildens storlek och område.

Markera bilden i Dreamweaver och gör något av följande:

Välj Kommando > Optimera bild
Klicka på knappen Redigera bildinställningar i egenskapskontrollen.

Gör ändringarna i dialogrutan Förhandsvisning:

Om du vill ändra optimeringsinställningar klickar du på fliken Alternativ.
Om du vill redigera den exporterade bildens storlek och område klickar du på fliken Arkiv.

När du är klar klickar du på OK.

Ändra Dreamweavers bildplatshållare med Fireworks

Du kan skapa en platshållarbild i ett Dreamweaver-dokument och sedan starta Fireworks för att utforma en bild eller Fireworks-tabell att byta ut den mot.

Om du vill skapa en ny bild från en bildplatshållare måste du ha både Dreamweaver och Fireworks installerade i systemet.

Se till att du redan har angett Fireworks som bildredigerare för PNG-filer.

Klicka på bildplatshållaren i dokumentfönstret för att markera den.

Gör något av följande för att starta Fireworks i läget Redigera från Dreamweaver:

Klicka på Skapa i egenskapskontrollen.
Tryck på Ctrl (Windows) eller Kommando (Macintosh) och dubbelklicka på bildplatshållaren.
Högerklicka (Windows) eller Ctrl-klicka (Macintosh) på bildplatshållaren och välj Skapa bild i Fireworks.

Använd Fireworks-alternativ och utforma bilden.

Fireworks känner igen följande inställningar för bildplatshållare som du kan ange när du arbetar med bildplatshållaren i Dreamweaver: bildstorlek (som står i relation till storleken på arbetsytan i Fireworks), bild-ID (som Fireworks använder som standarddokumentnamn på källfilen och exportfilen som du skapar) och textjustering. Fireworks känner också igen länkar och vissa beteenden (till exempel växla bild, popup-meny och ange text) som du kopplar till bildplatshållaren när du arbetar i Dreamweaver.

Obs!

Länkar som du har lagt till i en bildplatshållare visas inte i Fireworks, men de finns kvar. Om du drar en hotspot och lägger till en länk i Fireworks raderas inte länken som du la till i bildplatshållaren i Dreamweaver. Om du däremot klipper ut ett segment i Fireworks i den nya bilden raderas länken i Dreamweaver-dokumentet när du byter ut bildplatshållaren.

Fireworks känner inte igen följande inställningar för bildplatshållare: bildjustering, färg, Vspace och Hspace samt kartor. De är inaktiverade i bildplatshållarens egenskapskontroll.

När du är klar klickar du på Klar så visas uppmaningen att spara.

I textrutan Spara i markerar du mappen som du har definierat som din lokala Dreamweaver-platsmapp.

Om du gav bildplatshållaren ett namn när du infogade den i Dreamweaver-dokumentet fyller Fireworks i rutan Filnamn med namnet. Du kan ändra det om du vill.

Klicka på Spara för att spara PNG-filen.

Dialogrutan Exportera visas. Använd dialogrutan för att exportera bilden som en GIF- eller JPEG-fil, eller, när det gäller segmenterade bilder, som HTML-kod och bilder.

I fältet Spara i väljer du den lokala Dreamweaver-platsmappen.

I rutan Namn visas automatiskt namnet som du gav PNG-filen. Du kan ändra det om du vill.

I fältet Spara som typ markerar du den typ av filer som du vill exportera, till exempel Endast bilder eller HTML och bilder.

Klicka på Spara för att spara den exporterade filen.

Filen sparas och fokus återgår till Dreamweaver. I Dreamweaver-dokumentet ersätts bildplatshållaren av den exporterade filen eller Fireworks-tabellen.

Om Fireworks snabbmenyer

Med Fireworks skapar du enkelt CSS-baserade snabbmenyer.

Utöver att de snabbmenyer som du skapar med Fireworks är snabba att hämta och kan utökas, har de dessutom följande fördelar:

Menyalternativen kan indexeras av sökmotorer.
Menyalternativen kan läsas av skärmläsare, vilket gör sidorna mer tillgängliga.
Koden som genereras av Fireworks kompileras enligt standarder och kan valideras.
Du kan redigera Fireworks snabbmenyer med Dreamweaver eller med Fireworks, men inte med båda programmen. Ändringar som du gör i Dreamweaver bevaras inte i Fireworks.

Redigera Fireworks snabbmenyer i Dreamweaver

Du kan skapa en snabbmeny i Fireworks 8 eller senare och sedan redigera den med Dreamweaver eller med Fireworks (med roundtrip-redigering), men inte med båda programmen. Om du redigerar dina menyer i Dreamweaver och sedan redigerar dem i Fireworks förlorar du alla tidigare ändringar förutom textinnehållet.

Om du helst vill redigera dina menyer med Dreamweaver kan du använda Fireworks till att skapa snabbmenyn, och sedan använda Dreamweaver enbart till att redigera och anpassa menyn.

Om du hellre vill redigera menyerna i Fireworks kan du använda funktionen roundtrip-redigering i Dreamweaver. Däremot ska du inte redigera menyerna direkt i Dreamweaver.

I Dreamweaver väljer du Fireworks-tabellen som innehåller snabbmenyn, och klickar sedan på Redigera i egenskapskontrollen.

PNG-källfilen öppnas i Fireworks.

I Fireworks redigerar du menyn med snabbmenyredigeraren och klickar sedan på Klar i verktygsfältet Fireworks.

Fireworks skickar tillbaka den redigerade snabbmenyn till Dreamweaver.

Om du skapar en snabbmeny i Fireworks MX 2004 eller tidigare kan du redigera den i Dreamweaver med dialogrutan Visa snabbmeny, som du kommer till via Beteendepanelen.

Redigera en snabbmeny som har skapats i Fireworks MX 2004 eller tidigare

I Dreamweaver markerar du den hotspot eller bild som utlöser snabbmenyn.

Dubbelklicka på Visa snabbmeny i listan Åtgärder på panelen Funktioner (Skift+F3).

Gör ändringarna i dialogrutan Snabbmeny och klicka på OK.

Ange inställningar för att starta och redigera Fireworks-källfiler

När du använder Fireworks för att redigera bilder, exporteras bilderna på webbsidorna vanligtvis av Fireworks från en PNG-källfil. När du öppnar en bildfil i Dreamweaver för att redigera den öppnar Fireworks automatiskt PNG-källfilen, och du uppmanas att leta rätt på PNG-filen om den inte har hittats. Om du vill kan du ställa in Fireworks så att Dreamweaver öppnar den infogade bilden. Du kan också göra så att Fireworks låter dig välja om du vill använda den infogade filen eller Fireworks-källfilen varje gång du öppnar en bild i Dreamweaver.

Obs!

Dreamweaver känner bara igen Fireworks inställningar för att starta och redigera i vissa fall. Närmare bestämt måste du öppna och optimera en bild som inte är en del av en Fireworks-tabell och innehåller rätt Design Notes-sökväg till en PNG-källfil.

I Fireworks väljer du Redigera > Inställningar (Windows) eller Fireworks > Inställningar (Macintosh) och sedan klickar du på fliken Starta och redigera (Windows) eller väljer Starta och redigera på snabbmenyn (Macintosh).

Ange de inställningar som ska användas när du redigerar eller optimerar Fireworks-bilder som har infogats i ett externt program:

Använd alltid käll-PNG

Öppnar automatiskt Fireworks PNG-filen som har definierats i Design Note som källan till den infogade bilden. Uppdateringar görs i PNG-källfilen och dess motsvarande placerade bild.

Använd aldrig käll-PNG

Öppnar automatiskt den placerade Fireworks-bilden, oavsett om det finns en PNG-källfil eller inte. Uppdateringar görs bara i den placerade filen.

Fråga vid start

Visar ett meddelande med en fråga om du vill öppna PNG-källfilen eller inte. Du kan också ange globala inställningar för att starta och redigera via det här meddelandet.

Infoga Fireworks HTML-kod i ett Dreamweaver-dokument

Från Fireworks kan du använda kommandot Exportera om du vill exportera och spara optimerade bilder och HTML-filer på en plats inuti en Dreamweaver-platsmapp. Sedan kan du infoga filen i Dreamweaver. Med Dreamweaver kan du infoga Fireworks-genererad HTML-kod, inklusive kopplade bilder, segment och JavaScript, i ett dokument.

I Dreamweaver-dokumentet placerar du insättningspunkten där du vill infoga Fireworks HTML-kod.

Gör något av följande:

Välj Infoga > Bildobjekt > Fireworks HTML.
Gå till kategorin Allmänt på panelen Infoga, klicka på knappen Bilder och välj Infoga Fireworks HTML på snabbmenyn.

Klicka på Bläddra för att välja en Fireworks HTML-fil.

Om du inte har någon mer användning för filen väljer du Ta bort filen efter infogning. PNG-källfilen som är kopplad till HTML-filen påverkas inte om du väljer det här alternativet.

Obs!

Om HTML-filen ligger på en nätverksenhet tas den bort permanent och flyttas alltså inte till papperskorgen.

Klicka på OK för att infoga HTML-koden tillsammans med dess associerade bilder, segment och JavaScript i Dreamweaver-dokumentet.

Klistra in Fireworks-HTML i Dreamweaver

Ett snabbt sätt att infoga Fireworks-genererade bilder och tabeller i Dreamweaver är att kopiera och klistra in HTML-kod från Fireworks direkt i ett Dreamweaver-dokument.

Kopiera och klistra in Fireworks-HTML i Dreamweaver

I Fireworks väljer du Redigera > Kopiera HTML-kod.

Följ guiden genom inställningarna för att exportera HTML-kod och bilder. När du uppmanas att göra så anger du din Dreamweaver-platsmapp som mål för de exporterade bilderna.

Guiden exporterar bilderna till det angivna målet och kopierar HTML-koden till Urklipp.

I Dreamweaver-dokumentet placerar du insättningspunkten där du vill klistra in HTML-koden, och väljer sedan Redigera > Klistra in Fireworks HTML.

All HTML- och JavaScript-kod som är kopplad till Fireworks-filerna som du har exporterat kopieras till Dreamweaver-dokumentet, och alla länkar till bilder uppdateras.

Exportera och klistra in Fireworks-HTML i Dreamweaver

I Fireworks väljer du Arkiv > Exportera.

Ange din Dreamweaver-platsmapp som mål för de exporterade bilderna.

Välj HTML och bilder på snabbmenyn Exportera.

Välj Kopiera till Urklipp på snabbmenyn HTML och klicka sedan på Exportera.

I Dreamweaver-dokumentet placerar du insättningspunkten där du vill klistra in den exporterade HTML-koden, och väljer sedan Redigera > Klistra in Fireworks HTML.

All HTML- och JavaScript-kod som är kopplad till Fireworks-filerna som du har exporterat kopieras till Dreamweaver-dokumentet, och alla länkar till bilder uppdateras.

Uppdatera Fireworks-HTML som har placerats i Dreamweaver

I Fireworks är kommandot Arkiv > Uppdatera HTML ett alternativ till tekniken starta-och-redigera för att uppdatera Fireworks-filer som har placerats i Dreamweaver. Med Uppdatera HTML kan du redigera en PNG-källbild i Fireworks och sedan automatiskt uppdatera exporterad HTML-kod och bildfiler som har placerats i ett Dreamweaver-dokument. Med det här kommandot kan du uppdatera Dreamweaver-filer även när Dreamweaver inte körs.

I Fireworks öppnar du PNG-källfilen och gör ändringarna.

Välj Arkiv > Spara.

I Fireworks väljer du Arkiv > Uppdatera HTML.

Navigera till Dreamweaver-filen som innehåller den HTML som ska uppdateras och klicka sedan på Öppna.

Navigera till den mapp där du vill placera de uppdaterade filerna och klicka på Markera (Windows) eller Välj (Macintosh).

Fireworks uppdaterar HTML- och JavaScript-koden i Dreamweaver-dokumentet. Fireworks exporterar också uppdaterade bilder som är kopplade till HTML-koden och placerar dem i den angivna målmappen.

Om Fireworks inte hittar matchande HTML-kod att uppdatera får du välja om du vill infoga ny HTML-kod i Dreamweaver-dokumentet. Fireworks placerar den nya kodens JavaScript-avsnitt i början av dokumentet och HTML-tabellen eller länken till bilden i slutet.