Plaats in het Dreamweaver-document de invoegpositie op de locatie waar u de afbeelding wilt weergeven en voer vervolgens een van de volgende stappen uit:
Laatst bijgewerkt op
25 apr. 2024
Gebruik Fireworks en Dreamweaver voor een gestroomlijnde workflow voor het plaatsen van grafische webbestanden in HTML-pagina's en het bewerken en optimaliseren van deze bestanden.
Notitie
De functie wordt niet ondersteund in sommige versies van Adobe Dreamweaver.
Een Fireworks-afbeelding invoegen
Veel procedures voor het bewerken van bestanden, zoals het aanbrengen van wijzigingen in koppelingen, afbeeldingen met hyperlinks en tabelsegmenten, kunnen in Dreamweaver en Fireworks op dezelfde manier worden uitgevoerd en worden ook door beide toepassingen herkend. Samen bieden de twee toepassingen een gestroomlijnde workflow voor het plaatsen van grafische webbestanden in HTML-pagina's en het bewerken en optimaliseren van deze bestanden.
U kunt een afbeelding die vanuit Fireworks is geëxporteerd, rechtstreeks in een Dreamweaver-document plaatsen met de opdracht Afbeelding invoegen. U kunt ook een nieuwe Fireworks-afbeelding maken vanuit een tijdelijke aanduiding voor een afbeelding van Dreamweaver.
Selecteer Invoegen > Afbeelding.
Klik in de categorie Algemeen van het deelvenster Invoegen op de knop Afbeelding of sleep de afbeelding naar het document.
Ga naar het gewenste geëxporteerde Fireworks-bestand en klik op OK (Windows) of Open (Macintosh).
Notitie
Als het Fireworks-bestand zich niet op de huidige Dreamweaver-site bevindt, wordt er een bericht weergegeven waarin u wordt gevraagd of u het bestand naar de hoofdmap wilt kopiëren. Klik op Ja.
Een Fireworks-afbeelding of -tabel bewerken in Dreamweaver
Wanneer u een afbeelding of een afbeeldingssegment uit een Fireworks-tabel opent en bewerkt, wordt Fireworks door Dreamweaver gestart en wordt het PNG-bestand geopend waaruit de afbeelding of tabel is geëxporteerd.
Notitie
Hierbij wordt ervan uitgegaan dat Fireworks is ingesteld als de primaire externe afbeeldingseditor voor PNG-bestanden. Fireworks wordt vaak ook ingesteld als de standaardeditor voor JPEG- en GIF-bestanden, maar voor deze bestandstypen gebruikt u mogelijk liever Photoshop als standaardeditor.
Wanneer de afbeelding deel uitmaakt van een Fireworks-tabel, kun je de volledige Fireworks-tabel openen voor bewerkingen, zolang de <!--fw table--> opmerking bestaat in de HTML-code.Als het PNG-bronbestand vanuit Fireworks is geëxporteerd naar een Dreamweaver-site met de Dreamweaver-instelling Style HTML And Images, wordt de Fireworks-tabelopmerking automatisch in de HTML-code ingevoegd.
Open in Dreamweaver de eigenschappencontrole (Venster > Eigenschappen), als dat nog niet geopend is.
Klik op de afbeelding of het afbeeldingssegment om de afbeelding of het segment te selecteren.
Wanneer u een afbeelding selecteert die vanuit Fireworks is geëxporteerd, wordt deze door Dreamweaver als een Fireworks-afbeelding of -tabel herkend en wordt de naam van het PNG-bronbestand weergegeven.
Ga op een van de volgende manieren te werk om Fireworks te starten voor het bewerken:
Klik in de eigenschappencontrole op Bewerken.
Houd Control (Windows) of Command (Macintosh) ingedrukt en dubbelklik op de geselecteerde afbeelding.
Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op de geselecteerde afbeelding en selecteer Bewerken met Fireworks in het snelmenu.
Notitie
Als Fireworks het bronbestand niet kan vinden, wordt u gevraagd het PNG-bronbestand te zoeken. Wanneer u met het bronbestand van Fireworks werkt, worden wijzigingen zowel in het bronbestand als in het geëxporteerde bestand opgeslagen. Wanneer u met het geëxporteerde bestand werkt, wordt alleen dat bestand bijgewerkt.
Bewerk het PNG-bronbestand in Fireworks en klik op Done.
Fireworks slaat de wijzigingen op in het PNG-bestand en exporteert de bijgewerkte afbeelding (of HTML en afbeeldingen) waarna u weer terugkeert naar Dreamweaver. De bijgewerkte afbeelding of tabel wordt in Dreamweaver weergegeven.
Zie www.adobe.com/go/vid0188_nl voor een zelfstudie over de integratie van Dreamweaver en Fireworks.
Een Fireworks-afbeelding optimaliseren vanuit Dreamweaver
U kunt met Fireworks snel wijzigingen aanbrengen in Fireworks-afbeeldingen en -animaties. Vanuit Fireworks kunt u instellingen voor optimalisatie en animaties wijzigen en de grootte en oppervlakte van de geëxporteerde afbeelding wijzigen.
Selecteer de gewenste afbeelding in Dreamweaver en ga op een van de volgende manieren te werk:
Selecteer Opdracht > Afbeelding optimaliseren
Klik op de knop Afbeeldingsinstellingen bewerken in de eigenschappencontrole.
Breng de gewenste wijzigingen aan in het dialoogvenster Voorvertoning van afbeelding:
Klik op het tabblad Opties als u de instellingen voor optimalisatie wilt bewerken.
Klik op het tabblad Bestand als u de grootte en oppervlakte van de geëxporteerde afbeelding wilt bewerken.
Klik op OK als u klaar bent.
Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen
U kunt in een Dreamweaver-document een tijdelijke aanduiding voor een afbeelding maken en vervolgens Fireworks starten om een Fireworks-afbeelding of tabel te ontwerpen die de tijdelijke aanduiding vervangt.
Als u een nieuwe afbeelding wilt maken vanuit een tijdelijke aanduiding voor afbeeldingen, moeten zowel Dreamweaver als Fireworks op uw computer zijn geïnstalleerd.
Controleer of u Fireworks al hebt ingesteld als de afbeeldingseditor voor PNG-bestanden.
Klik in het documentvenster op de tijdelijke aanduiding voor de afbeelding om deze te selecteren.
Start Fireworks in de modus voor het bewerken van afbeeldingen vanuit Dreamweaver. Voer hiervoor een van de volgende stappen uit:
Klik in de eigenschappencontrole op Maken.
Houd Control (Windows) of Command (Macintosh) ingedrukt en dubbelklik op de tijdelijke aanduiding voor de afbeelding.
Klik met de rechtermuisknop (Windows) of klik terwijl Control is ingedrukt (Macintosh) op de tijdelijke aanduiding voor de afbeelding en selecteer Afbeelding maken in Fireworks.
Gebruik de opties in Fireworks om de afbeelding te ontwerpen.
Fireworks herkent de volgende instellingen voor tijdelijke afbeeldingen die u mogelijk hebt ingesteld wanneer u werkt met de tijdelijke afbeelding in Dreamweaver: afbeeldingsgrootte (die overeenkomt met de canvasgrootte in Fireworks), afbeeldings-id (die door Fireworks wordt gebruikt als standaarddocumentnaam voor het door u gemaakte bronbestand en exportbestand) en tekstuitlijning. Fireworks herkent ook koppelingen en bepaalde gedragingen (zoals het wisselen van afbeeldingen, het weergeven van een pop-upmenu en het instellen van tekst) die u aan de tijdelijke aanduiding voor een afbeelding hebt gekoppeld terwijl u in Dreamweaver werkte.
Notitie
Hoewel in Fireworks de koppelingen die u aan een tijdelijke aanduiding voor een afbeelding hebt toegevoegd, niet worden weergegeven, blijven deze koppelingen wel behouden. Als u in Fireworks een hotspot tekent en een koppeling toevoegt, wordt in Dreamweaver de koppeling die u aan de tijdelijke aanduiding voor een afbeelding hebt toegevoegd, niet verwijderd. Als u echter in Fireworks een segment uit de nieuwe afbeelding snijdt, wordt de koppeling in het Dreamweaver-document verwijderd wanneer u de tijdelijke aanduiding vervangt.
Fireworks herkent de volgende instellingen voor tijdelijke afbeeldingen niet: uitlijning van de afbeelding, kleur, V-ruimte en H-ruimte en toewijzingen. Deze instellingen zijn uitgeschakeld in de eigenschappencontrole van de tijdelijke aanduiding.
Wanneer u klaar bent, klikt u op Done om het venster weer te geven waarin u de afbeelding kunt opslaan.
Selecteer in het tekstvak Save in, de map die u als lokale Dreamweaver-sitemap hebt gedefinieerd.
Als u de tijdelijke aanduiding voor een afbeelding een naam hebt gegeven toen u deze in het Dreamweaver-document invoegde, vult Fireworks in het vak File Name die naam in. U kunt die naam wijzigen.
Klik op Save om het PNG-bestand op te slaan.
Het dialoogvenster Export verschijnt. Gebruik dit dialoogvenster om de afbeelding als een GIF- of JPEG-bestand op te slaan of, in het geval van gesegmenteerde afbeeldingen, als HTML en afbeeldingen.
Selecteer in het vak Save In de lokale Dreamweaver-sitemap.
In het vak Name wordt automatisch de naam weergegeven die u voor het PNG-bestand hebt gebruikt. U kunt die naam wijzigen.
Selecteer in het vak Opslaan als type het type van het bestand of de bestanden die u wilt exporteren, bijvoorbeeld Alleen afbeeldingen of HTML en afbeeldingen.
Klik op Save om het geëxporteerde bestand op te slaan.
Het bestand wordt opgeslagen en u keert terug naar Dreamweaver. In het Dreamweaver-document wordt de tijdelijke aanduiding voor een afbeelding vervangen door het geëxporteerde bestand of de Fireworks-tabel.
Over pop-upmenu's van Fireworks
In Fireworks kunt u snel en eenvoudig op CSS gebaseerde pop-upmenu's maken.
De pop-upmenu's die u in Fireworks maakt, kunnen niet alleen gemakkelijk worden uitgebreid en snel worden gedownload, maar bieden ook de volgende voordelen:
De menu-items kunnen worden geïndexeerd door zoekmachines.
De menu-items kunnen door schermlezers worden gelezen, zodat uw pagina's toegankelijker zijn voor bijvoorbeeld slechtzienden.
De code die door Fireworks wordt gegenereerd, voldoet aan de normen en kan worden gevalideerd.
U kunt pop-upmenu's van Fireworks bewerken in Dreamweaver of in Fireworks, maar niet in beide. Wijzigingen die u in Dreamweaver aanbrengt, blijven niet behouden in Fireworks.
Pop-upmenu's van Fireworks bewerken in Dreamweaver
U kunt een pop-upmenu maken in Fireworks 8 of hoger en het menu vervolgens bewerken met Dreamweaver of met Fireworks (met behulp van roundtrip-bewerking), maar niet met beide. Als u uw menu's in Dreamweaver bewerkt en ze vervolgens in Fireworks bewerkt, gaan alle voorgaande wijzigingen verloren, behalve de tekst.
Als u de menu's liever in Dreamweaver bewerkt, kunt u Fireworks gebruiken om het pop-upmenu te maken en vervolgens uitsluitend Dreamweaver gebruiken om het menu te bewerken en aan te passen.
Als u de menu's liever in Fireworks bewerkt, kunt u de 'roundtrip editing'-functie in Dreamweaver gebruiken. U moet de menu's echter niet rechtstreeks in Dreamweaver bewerken.
Selecteer in Dreamweaver de Fireworks-tabel met het popup-menu en klik op Bewerken in de eigenschappencontrole.
Het PNG-bronbestand wordt in Fireworks geopend.
Bewerk het menu in Fireworks met de pop-upmenu-editor en klik op Done op de Fireworks-werkbalk.
Fireworks stuurt het bewerkte pop-upmenu terug naar Dreamweaver.
Als u een pop-upmenu in Fireworks MX 2004 of eerder hebt gemaakt, kunt u dit menu in Dreamweaver bewerken met behulp van het dialoogvenster Pop-upmenu weergeven, dat u kunt openen via het deelvenster Gedrag.
Een pop-upmenu bewerken dat is gemaakt in Fireworks MX 2004 of eerder
Selecteer in Dreamweaver de hotspot of afbeelding waarmee het pop-upmenu wordt geactiveerd.
Dubbelklik in het deelvenster Gedrag (Shift+F3) op Pop-upmenu weergeven in de lijst Acties.
Breng de gewenste wijzigingen aan in het dialoogvenster Pop-upmenu en klik op OK.
Voorkeuren voor het openen en bewerken van Fireworks-bronbestanden opgeven
Wanneer u Fireworks gebruikt om afbeeldingen te bewerken, worden de afbeeldingen op uw webpagina's gewoonlijk door Fireworks geëxporteerd vanuit een PNG-bronbestand. Wanneer u een afbeeldingsbestand in Dreamweaver opent om het te bewerken, wordt door Fireworks automatisch het PNG-bronbestand geopend. Als Fireworks het PNG-bronbestand niet kan vinden, wordt u gevraagd dit bestand te zoeken. U kunt desgewenst de voorkeuren in Fireworks zo instellen dat de ingevoegde afbeelding door Dreamweaver wordt geopend. U kunt ook in Fireworks opgeven dat u steeds de mogelijkheid wilt hebben om te kiezen tussen het ingevoegde afbeeldingsbestand en het Fireworks-bronbestand wanneer u een afbeelding in Dreamweaver opent.
Notitie
Dreamweaver herkent slechts in bepaalde gevallen de Fireworks-voorkeuren voor het openen en bewerken van bestanden. Dreamweaver herkent deze voorkeuren alleen als u een afbeelding opent en optimaliseert die geen deel uitmaakt van een Fireworks-tabel en een juist ontwerpnotitiepad naar een PNG-bronbestand bevat.
Selecteer in Fireworks de optie Edit > Preferences (Windows) of Fireworks > Preferences (Macintosh) en klik op het tabblad Launch And Edit (Windows) of selecteer Launch And Edit in het pop-upmenu (Macintosh).
Geef de voorkeursopties op die moeten worden gebruikt wanneer u Fireworks-afbeeldingen bewerkt of optimaliseert die in een externe toepassing zijn geplaatst:
Altijd PNG-bronbestand gebruiken
Hiermee wordt automatisch het PNG-bestand van Fireworks geopend dat in de ontwerpnotitie is gedefinieerd als bron van de geplaatste afbeelding. Het PNG-bronbestand en de corresponderende, geplaatste afbeelding worden bijgewerkt.
Nooit PNG-bronbestand gebruiken
Hiermee wordt de geplaatste afbeelding van Fireworks automatisch geopend, ongeacht of er een PNG-bronbestand bestaat of niet. Alleen de geplaatste afbeelding wordt bijgewerkt.
Vragen bij het opstarten
Als deze optie wordt geselecteerd, wordt er een bericht weergegeven waarin u wordt gevraagd of u het PNG-bronbestand wilt openen. U kunt vanuit dit bericht ook algemene voorkeuren voor het openen en bewerken van bestanden opgeven.
HTML-code van Fireworks in een Dreamweaver-document invoegen
Vanuit Fireworks kunt u de opdracht Export gebruiken om geoptimaliseerde afbeeldingen en HTML-bestanden naar een locatie binnen een Dreamweaver-sitemap te exporteren en op te slaan. U kunt het bestand vervolgens in Dreamweaver invoegen. Met Dreamweaver kunt u HTML-code die door Fireworks is gegenereerd, compleet met gekoppelde afbeeldingen, segmenten en JavaScript, invoegen in een document.
Plaats de invoegpositie in het Dreamweaver-document op de locatie waar u de HTML-code van Fireworks wilt invoegen.
Voer een van de volgende stappen uit:
Selecteer Invoegen > Afbeeldingsobjecten > Fireworks-HTML.
Ga naar de categorie Algemeen van het deelvenster Invoegen, klik op de knop Afbeeldingen en kies Fireworks-HTML invoegen in het pop-upmenu.
Klik op Bladeren om een Fireworks-HTML-bestand te selecteren.
Als u het bestand verder niet meer nodig hebt, selecteert u de optie Bestand verwijderen na invoegen. Als u deze optie selecteert, heeft dat geen effect op het PNG-bronbestand dat aan het HTML-bestand is gekoppeld.
Notitie
als het HTML-bestand zich op een netwerkstation bevindt, wordt het bestand permanent verwijderd en niet naar de prullenbak of prullenmand verplaatst.
Klik op OK om de HTML-code, samen met de gekoppelde afbeeldingen, segmenten en JavaScript, in te voegen in het Dreamweaver-document.
Fireworks-HTML-code in Dreamweaver plakken
U kunt in Fireworks gemaakte afbeeldingen en tabellen ook op een snelle manier in Dreamweaver plaatsen door HTML-code van Fireworks rechtstreeks in een Dreamweaver-document te plakken.
Fireworks-HTML-code kopiëren en in Dreamweaver plakken
Selecteer in Fireworks Edit > Copy HTML Code.
Volg de instructies van de wizard die u begeleidt bij het instellen van de opties voor het exporteren van uw HTML en afbeeldingen. Wanneer u daarom wordt gevraagd, geeft u de Dreamweaver-sitemap op als bestemming voor de geëxporteerde afbeeldingen.
De afbeeldingen worden door de wizard naar de opgegeven bestemming geëxporteerd en de HTML-code wordt naar het Klembord gekopieerd.
Plaats de invoegpositie in het Dreamweaver-document op de locatie waar u de HTML-code van Fireworks wilt plakken en selecteer Bewerken > Fireworks-HTML plakken.
Alle HTML- en JavaScript-code die is gekoppeld aan Fireworks-bestanden die u hebt geëxporteerd, wordt naar het Dreamweaver-document gekopieerd en alle koppelingen naar afbeeldingen worden bijgewerkt.
Fireworks-HTML-code exporteren en in Dreamweaver plakken
Selecteer in Fireworks File > Export.
Geef de Dreamweaver-sitemap op als bestemming voor de geëxporteerde afbeeldingen.
Selecteer in het pop-upmenu Exporteren de optie HTML And Images.
Selecteer in het pop-upmenu HTML de optie Copy To Clipboard en klik op Export.
Plaats de invoegpositie in het Dreamweaver-document op de locatie waar u de geëxporteerde HTML-code van Fireworks wilt plakken en selecteer Bewerken > Fireworks-HTML plakken.
Alle HTML- en JavaScript-code die is gekoppeld aan Fireworks-bestanden die u hebt geëxporteerd, wordt naar het Dreamweaver-document gekopieerd en alle koppelingen naar afbeeldingen worden bijgewerkt.
Fireworks-HTML-code bijwerken die in Dreamweaver is geplaatst
In Fireworks biedt de opdracht File > Update HTML een alternatief voor de techniek van starten en bewerken die wordt gebruikt om Fireworks-bestanden die in Dreamweaver zijn geplaatst, te bewerken. Met de opdracht Update HTML kunt u een PNG-bronafbeelding in Fireworks bewerken en vervolgens alle geëxporteerde HTML-code en afbeeldingsbestanden die in een Dreamweaver-document zijn geplaatst, automatisch bijwerken. Met deze opdracht kunt u zelfs Dreamweaver-bestanden bijwerken wanneer Dreamweaver niet wordt uitgevoerd.
Open het PNG-bronbestand in Fireworks en breng uw wijzigingen aan.
Selecteer File > Save.
Selecteer in Fireworks File > Update HTML.
Ga naar het Dreamweaver-bestand met de HTML-code die u wilt bijwerken en klik op Openen.
Ga naar de doelmap waarin u de bijgewerkte afbeeldingsbestanden wilt plaatsen en klik op Select (Windows) of Choose (Macintosh).
De HTML- en JavaScript-code in het Dreamweaver-document wordt door Fireworks bijgewerkt. Fireworks exporteert ook bijgewerkte afbeeldingen die aan de HTML-code zijn gekoppeld en plaatst de afbeeldingen in de opgegeven doelmap.
Als Fireworks geen overeenkomende HTML-code kan vinden die moet worden bijgewerkt, krijgt u de gelegenheid nieuwe HTML-code in het Dreamweaver-document in te voegen. Fireworks plaatst de JavaScript-sectie van de nieuwe code aan het begin van het document en plaatst de HTML-tabel of de koppeling naar de afbeelding aan het einde.
Een webfotoalbum maken
De functie Webfotoalbum maken wordt vanaf Dreamweaver CS5 niet meer ondersteund.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
