Använda Fireworks med Dreamweaver

Adobe Dreamweaver® och Fireworks identifierar och delar en del filredigeringar, däribland ändringar i länkar, bildscheman och tabellsegment. Med Dreamweaver och Fireworks är det dessutom lätt att redigera, optimera och placera webbgrafikfiler på HTML-sidor.

Montera Fireworks-bilder i Dreamweaver-filer

När du infogar JPEG-filer från Fireworks i Dreamweaver beräknas filens kvalitet automatiskt. Värdet kan vara 79 för vissa av filerna.

Obs!

Innan du gör något av dessa åtgärder måste du se till att Dreamweaver har valts som HTML-typ i dialogrutan för HTML-inställningar.

Infoga Fireworks-bilder i Dreamweaver med panelen Filer

  1. Exportera bilden från Fireworks till den lokala platsmappen som angetts i Dreamweaver.

  2. Öppna Dreamweaver-dokumentet och se till att du är i Design-läge.

  3. Dra bilden från panelen Filer till Dreamweaver-dokumentet.

Infoga Fireworks-bilder i Dreamweaver med Infoga-menyn

  1. Placera insättningspunkten där du vill att bilden ska visas i Dreamweavers dokumentfönster.

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

    • Välj Infoga > Bild.

    • Klicka på Bilder: Bild i kategorin Gemensam i Infoga-fältet.

  3. Navigera till bilden du exporterat från Fireworks och klicka på OK.

Skapa nya Fireworks-filer från Dreamweaver-platshållare

Med platshållarbilder kan du experimentera med olika webbsideslayouter innan du skapar den slutliga sidan. Använd platshållarbilder när du vill ange storlek och placering för Fireworks-bilder som i framtiden ska placeras i Dreamweaver.

När du skapar en Fireworks-bild från en Dreamweaver-platshållarbild skapas ett nytt Fireworks-dokument med en arbetsyta som har samma dimensioner som den markerade platshållaren.

Obs!

Allt beteende som används i Fireworks bevaras vid exporten tillbaka till Dreamweaver. På samma sätt bevaras också de flesta Dreamweaver-beteenden som används på platshållarbilder vid start-och-redigera med Fireworks. Det finns emellertid ett undantag: osammanhängande överrullningar som används på platshållarbilder i Dreamweaver bevaras inte när de öppnas och redigeras i Fireworks.

När en Fireworks-session är avslutad och du har återgått till Dreamweaver ersätter den nya Fireworks-bilden du skapat den platshållarbild som ursprungligen markerats.

  1. I Dreamweaver sparar du det önskade HTML-dokumentet på en plats i mappen Dreamweaver-plats.

  2. Placera insättningspunkten på önskad position i dokumentet och gör något av följande:

    • Välj Infoga > Bildobjekt > Platshållarbild.

    • Klicka på Bilder: snabbmenyn Bild i kategorin Gemensam i Infoga-fältet och välj Platshållarbild.

  3. Ange namn, dimensioner, färg och alternativ text för platshållarbilden.

    En platshållarbild infogas i Dreamweaver-dokumentet.

    Bildplatshållare
    Bildplatshållare

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

    • Markera platshållarbilden och klicka på Skapa i egenskapskontrollen.

    • Ctrl-dubbelklicka (Windows) eller Kommando-dubbelklicka (Mac OS) på platshållarbilden.

    • Högerklicka (Windows) respektive Ctrl-klicka (Mac OS) och välj Skapa bild i Fireworks.

      Fireworks öppnas med en tom arbetsyta som har exakt samma storlek som platshållarbilden. Överst i dokumentfönstret anges att du redigerar en bild från Dreamweaver.

  5. Skapa en bild i Fireworks och klicka på Klar.

  6. Ange ett namn på och en plats för PNG-källfilen.

  7. Ange ett namn på de exporterade bildfilerna.

    Detta är bildfiler som visas i Dreamweaver.

  8. Ange en plats i mappen Dreamweaver-plats för exporterade filer och klicka sedan på Spara.

    När du återgår till Dreamweaver ersätts den platshållarbild du ursprungligen markerat med den nya Fireworks-bilden eller tabellen.

    Bildplatshållare som ersätts av den nya Fireworks-bilden
    Bildplatshållare som ersätts av den nya Fireworks-bilden

Montera Fireworks-HTML-kod i Dreamweaver

Om du vill exportera Fireworks-filer till Dreamweaver måste du göra det i två steg. Du exporterar filer från Fireworks direkt till en Dreamweaver-platsmapp. Då genereras en HTML-fil och de associerade bildfilerna på den plats du anger. Montera därefter HTML-koden i Dreamweaver med funktionen Infoga Fireworks HTML.

  1. Exportera Fireworks-HTML-dokument till HTML-format.

  2. Spara dokumentet i Dreamweaver på en angiven plats.

  3. Placera insättningspunkten i dokumentet där du vill att den infogade HTML-koden ska börja.

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

    • Välj Infoga > Bildobjekt > Fireworks HTML.

    • Klicka på Bilder: snabbmenyn Bild i kategorin Gemensam i Infoga-fältet och välj Fireworks HTML.

  5. I dialogrutan som öppnas klickar du på Bläddra och väljer önskad Fireworks-HTML-fil.

  6. (Valfritt) Välj Ta bort filen när innehållet infogats och flytta HTML-filen till papperskorgen (Windows) eller ta bort den permanent (Mac OS) när åtgärden är slutförd.

    Den här åtgärden påverkar inte PNG-källfilen som associeras med HTML-filen.

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

Kopiera Fireworks-HTML-kod och använda den i Dreamweaver

När du kopierar Fireworks-HTML-kod till Urklipp kopieras all HTML- och JavaScript-kod som associeras med Fireworks-dokumentet till Dreamweaver-dokumentet, bilder exporteras till en plats du anger och Dreamweaver uppdaterar HTML med dokumentrelativa länkar till dessa bilder.

Obs!

Metoden fungerar bara med Dreamweaver. Den fungerar inte med andra HTML-redigerare.

  1. Kopiera HTML-koden till Urklipp i Fireworks och klistra sedan in den i ett Dreamweaver-dokument.

Obs!

Du kan också öppna en exporterad Fireworks-HTML-fil i Dreamweaver och sedan kopiera och klistra in önskade avsnitt i ett annat Dreamweaver-dokument.

Uppdatera Fireworks-HTML som har exporterats till Dreamweaver

Obs!

Roundtrip HTML har många fördelar när man arbetar med HTML som exporterats till Dreamweaver. (Se Roundtrip HTML.)

  1. Gör ändringar i PNG-dokument i Fireworks.

  2. Välj Arkiv > Uppdatera HTML.

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

  4. Navigera till den mapp där du vill placera de uppdaterade bildfilerna och klicka på Öppna.

    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.

    Obs!

    Om Fireworks inte hittar matchande HTML-kod att uppdatera kan du 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 av dokumentet.

Exportera Fireworks-filer till Dreamweaver-bibliotek

Ett biblioteksobjekt är en del av en HTML-fil som finns i mappen Bibliotek i platsens rotmapp. Biblioteksobjekt visas som en kategori i Dreamweavers panel Resurser. Biblioteksobjekt i Dreamweaver förenklar redigeringen och uppdateringen av ofta använda platskomponenter. Du kan dra ett biblioteksobjekt (en fil med filnamnstillägget lbi) från panelen Resurser till vilken sida som helst på webbplatsen.

Du kan inte redigera ett biblioteksobjekt direkt i Dreamweaver-dokument utan bara redigera mallbiblioteksobjektet. Därefter kan du låta Dreamweaver uppdatera varje kopia av detta objekt när det placeras på webbplatsen. Dreamweaver-biblioteksobjekt liknar Fireworks-symboler. Ändringar i huvudbiblioteksdokumentet (LBI) återspeglas i alla biblioteksförekomster på webbplatsen.

Obs!

Dreamweaver-biblioteksobjekt stöder inte snabbmenyer.

  1. Välj Arkiv > Exportera.

  2. Välj Dreamweaver-bibliotek från snabbmenyn Exportera.

    Välj eller skapa en mapp som heter Bibliotek på din Dreamweaver-plats som plats för filerna. Namnet är skiftlägeskänsligt.

    Obs!

    I Dreamweaver identifieras den exporterade filen som ett biblioteksobjekt bara om den sparas i mappen Bibliotek.

  3. Skriv in ett filnamn.

  4. (Valfritt) Om bilden innehåller segment välj du segmentalternativ.

  5. Välj Lägg bilder i undermappen om du vill ha en separat mapp för sparade bilder.

  6. Klicka på Spara.

Redigera Fireworks-filer från Dreamweaver

Med funktionen Roundtrip HTML integreras Fireworks och Dreamweaver. Med den kan du göra ändringar i ett program och låta dessa ändringar återspeglas i det andra programmet.

Roundtrip HTML

Fireworks identifierar och bevarar de flesta typer av redigeringar som görs i ett dokument i Dreamweaver, inklusive ändrade länkar, redigerade bildscheman, redigerad text och HTML i HTML-segment samt beteenden som delas mellan Fireworks och Dreamweaver. Med egenskapskontrollen i Dreamweaver kan du identifiera Fireworks-genererade bilder, tabellsegment och tabeller i ett dokument.

Fireworks stöder de flesta typer av Dreamweaver-redigeringar. Större ändringar i en tabells struktur i Dreamweaver kan emellertid skapa oförenliga skillnader mellan de två programmen. När du gör större ändringar i en tabellayout använder du Dreamweavers start-och-redigera-funktion för att redigera tabellen i Fireworks.

Obs!

Dreamweaver använder Fireworks teknik och innehåller grundläggande bildredigeringsfunktioner för ändringar av bilder utan något externt bildredigeringsprogram. Dreamweavers bildredigeringsfunktioner kan bara användas på JPEG- och GIF-bildfilsformat.

Redigera en Fireworks-bild som placerats i Dreamweaver

Obs!

Innan du redigerar Fireworks-grafik i Dreamweaver måste du utföra några preliminära åtgärder. Mer information finns i Ange alternativ för starta-och-redigera.

  1. I Dreamweaver väljer du Fönster > Egenskaper när du vill öppna egenskapskontrollen.

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

    • Välj önskad bild. (I egenskapskontrollen identifieras markeringen som en Fireworks-bild och visas namnet på den kända PNG-källfilen för bilden.) Klicka sedan på Redigera i egenskapskontrollen.

    • Ctrl-dubbelklicka (Windows) eller Kommando-dubbelklicka (Mac OS) på den bild som ska redigeras.

    • Högerklicka (Windows) respektive Ctrl-klicka (Mac OS) på önskad bild och välj Redigera med Fireworks på snabbmenyn.

  3. Ange (på uppmaning) om du vill leta rätt på en Fireworks-källfil för den placerade bilden.

  4. Redigera bilden i Fireworks.

    De redigeringar du anger bevaras i Dreamweaver.

  5. Klicka på Klar för att exportera bilden med aktuella optimeringsinställningar, uppdatera GIF- eller JPEG-filen som används av Dreamweaver och spara PNG-källfilen om en källa har markerats.

    Obs!

    När du öppnar en bild i panelen Dreamweaver-plats, som är standardredigeraren för den bildtypen och som anges i Dreamweavers inställningar, öppnas filen. När bilderna öppnas från den här platsen öppnas inte PNG-originalfilen i Fireworks. Om du vill använda Fireworks integrationsfunktioner öppnar du bilder inifrån Dreamweavers dokumentfönster.

Redigera en Fireworks-tabell som placerats i Dreamweaver

Obs!

Innan du redigerar Fireworks-tabeller från Dreamweaver måste du utföra några preliminära starta-och-redigera-åtgärder. Mer information finns i Ange alternativ för starta-och-redigera.

  1. I Dreamweaver väljer du Fönster > Egenskaper när du vill öppna egenskapskontrollen.

  2. Gör något av följande när du öppnar PNG-källfilen i dokumentfönstret:

    • Klicka i tabellen och sedan på märkordet TABLE i statusfältet om du vill markera hela tabellen. (I egenskapskontrollen identifieras markeringen som en Fireworks-tabell och visas namnet på den kända PNG-källfilen för tabellen.) Klicka sedan på Redigera i egenskapskontrollen.

    • Välj en bild i tabellen och klicka på Redigera i egenskapskontrollen.

    • Högerklicka (Windows) respektive Ctrl-klicka (Mac OS) på bilden och välj Redigera med Fireworks på snabbmenyn.

  3. Gör redigeringarna i Fireworks.

    I Dreamweaver identifieras och bevaras alla redigeringar som används på tabellen i Fireworks.

  4. När du har redigerat tabellen klickar du på Klar i dokumentfönstret.

    HTML- och bildsegmentsfilerna för tabellen exporteras med aktuella optimeringsinställningar, tabellen som placerats i Dreamweaver uppdateras och PNG-källfilen sparas.

    Obs!

    Du kan få en Dreamweaver-fil om du kapslar en annan tabell inuti den ursprungliga Fireworks-genererade tabellen och sedan försöker redigera tabellen med Roundtrip-redigering i Dreamweaver. Mer information finns i TechNote 19231 på Adobes webbplats.

Dreamweaver-beteenden som stöds och inte stöds

Om en enskild osegmenterad Fireworks-bild infogas i ett Dreamweaver-dokument och ett Dreamweaver-beteende används, kommer bilden att ha ett segment överst när det öppnas och redigeras i Fireworks. Segmentet visas inte i början eftersom segment automatiskt stängs av när du öppnar och redigerar enskilda, osegmenterade bilder som Dreamweaver-beteenden används på. Du kan visa segmentet genom att aktivera synligheten i webblagret i panelen Lager.

När du visar egenskaper för ett segment i Fireworks som har ett Dreamweaver-beteende bifogat, kanske textrutan Länk i egenskapskontrollen visar javascript:;. Att ta bort den här texten gör ingen skada. Du kan skriva över texten och ange en URL och beteendet är fortfarande kvar när du återgår till Dreamweaver.

När du arbetar med Roundtrip HTML från Dreamweaver stöder Fireworks serverfilformat, som CFM och PHP.

Dreamweaver stöder alla beteenden som används i Fireworks, däribland dem som krävs för överrullningar och knappar.

Obs!

Dreamweaver-biblioteksobjekt stöder inte snabbmenyer.

Fireworks stöder följande Dreamweaver-beteenden under en starta-och-redigera-session:

  • Enkel överrullning

  • Byt bild

  • Byt bildåterställning

  • Ange text för statusfältet

  • Ställ in navigationsfältets bild

  • Snabbmeny

Obs!

Det finns inget stöd i Fireworks för icke-inbyggda beteenden, som serverbeteenden.

Optimera Fireworks-bilder och animeringar som placerats i Dreamweaver

Ändra optimeringsinställningar för en Fireworks-bild som placerats i Dreamweaver

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

    • Välj Kommandon > Optimera bild.

    • Klicka på knappen Optimera i egenskapskontrollen.

    • Högerklicka (Windows) eller Ctrl-klicka (Mac OS) och välj Optimera i Fireworks på snabbmenyn.

  2. Ange (på uppmaning) om du vill öppna en Fireworks-källfil för den placerade bilden.

  3. Gör redigeringar i dialogrutan Exportera 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 Fil. Om du ändrar bilddimensionerna i Fireworks måste du återställa bildens storlek i egenskapskontrollen när du återgår till Dreamweaver.

    • Om du vill redigera bildens animeringsinställningar klickar du på fliken Animering.

  4. När du har redigerat bilden klickar du på OK för att exportera bilden, uppdatera bilden i Dreamweaver och spara PNG-filen.

    Om du ändrat format på bilden uppmanas du av Dreamweavers länkkontroll att uppdatera referenserna till bilden.

Ändra animeringsinställningar

Om du öppnar och optimerar en animerad GIF-fil kan du också redigera animeringsinställningarna. Animeringsalternativen i dialogrutan Exportera förhandsvisning liknar dem som finns i panelen Fireworks-lägen.

Obs!

Om du vill redigera enskilda bildelement i en Fireworks-animering, måste du öppna och redigera Fireworks-animeringen.

Alternativ för att starta och redigera

Om du vill använda Roundtrip HTML effektivt bör du utföra några preliminära åtgärder, t.ex. ställa in Fireworks som din primära bildredigerare i Dreamweaver, ange inställningar för att starta och redigera för Fireworks och definiera en lokal plats i Dreamweaver.

Ange Fireworks som primär extern bildredigerare för Dreamweaver

Dreamweaver har inställningar för automatiskt start av vissa program för redigering av vissa filtyper. Om du vill använda Fireworks starta-och-redigera-funktioner måste du se till att Fireworks har angetts som primär redigerare för GIF-, JPEG- och PNG-filer i Dreamweaver.

Obs!

Det är bara nödvändigt att ange den här inställningen om du får problem med att starta Fireworks från Dreamweaver.

  1. I Dreamweaver väljer du Redigera > Inställningar och sedan Filtyper/Redigerare.

  2. I listan över filnamnstillägg väljer du ett webbildsfiltillägg (gif, jpg eller png).

  3. I listan över redigerare väljer du Fireworks. Om Fireworks inte finns med i listan klickar du på plusknappen (+), letar upp Fireworks-programmet på hårddisken och klickar på Öppna.

    Dreamweaver inställningar
    Dreamweaver inställningar

  4. Klicka på Gör primär.

  5. Upprepa steg 2 till 4 för att ange Fireworks som primär redigerare för andra webbbildsfiltyper.

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

Med inställningarna för att starta och redigera för Fireworks kan du ange hur du vill hantera PNG-källfiler när du öppnar Fireworks från ett annat program.

I Dreamweaver identifieras inställningarna för att starta och redigera för Fireworks bara när du öppnar och optimerar en bild som inte ingår i en Fireworks-tabell och som inte innehåller en korrekt Design Note-bana till en PNG-källfil. I alla andra fall, däribland alla starta-och-redigera-fall för Fireworks-bilder, öppnas PNG-källfilen automatiskt i Dreamweaver och du uppmanas att leta rätt på källfilen om den inte hittas.

  1. I Fireworks väljer du Redigera > Inställningar (Windows) eller Fireworks > Inställningar (Mac OS).

  2. Klicka på kategorin för starta-och-redigera och ange alternativ.

    Mer information finns i Starta-och-redigera-inställningar.

Design Notes och källfiler

När du exporterar en Fireworks-fil från en sparad PNG-källfil till en Dreamweaver-plats, skriver Fireworks en Design Note som innehåller information om PNG-filen. När du öppnar och redigerar en Fireworks-bild från Dreamweaver används Design Note för att leta rätt på PNG-källfilen för denna fil. Spara alltid din Fireworks-PNG-källfil och exporterade filer på en Dreamweaver-plats. Detta gör att alla användare som delar platsen kan leta rätt på källfilen när de startar Fireworks från Dreamweaver.

Överföra platsfiler med knappen Filhantering

Knappen Filhantering som sitter överst i dokumentfönstret, ger enkel åtkomst till filöverföringskommandon. Använd den här knappen om dokumentet finns i en Dreamweaver-platsmapp och platsen har åtkomst till en fjärrserver. För att Fireworks ska kunna identifiera mappen som en plats måste du använda dialogrutan Hantera plats i Dreamweaver för att definiera målmappen (eller en innehållsmapp) som en lokal rotmapp för platsen.

Obs!

Innan du använder alternativen Checka in och Checka ut i Fireworks måste du välja Aktivera in- och utcheckning för den Dreamweaver-plats som dokumentet finns i.

Hämta

Kopiera fjärrversionen av filen till den lokala platsen och skriv över den lokala filen med fjärrkopian.

Checka ut

Checka ut filen och skriv över den lokala filen med fjärrkopian.

Placera

Kopiera den lokala versionen av filen till fjärrplatsen och skriv över fjärrfilen med den lokala kopian.

Checka in

Checka in filen och ersätt fjärrfilen med den lokala kopian.

Ångra Checka ut

Ångra utcheckningen av den lokala filen, checka in den och skriv över den lokala filen med fjärrkopian.

Obs!

Filhanteringskommandon aktiveras i Fireworks bara om dokumentet finns i en Dreamweaver-platsmapp med en fjärrserver definierad. Fireworks-filhanteringskommandon kan bara användas för filer som finns på platser där transportmetoderna Local/Network och FTP används. Filer på platser där SFTP eller tredjepartstransportmetoder, t.ex. SourceSafe, WebDAV och RDS, används, kan inte transporteras till och från fjärrservern inifrån Fireworks.

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