- Dreamweaver Handboek
- Inleiding
- Dreamweaver en Creative Cloud
- De werkruimten en weergaven van Dreamweaver
- Sites opzetten
- Over Dreamweaver-sites
- Een lokale versie van uw site instellen
- Verbinding maken met een publicatieserver
- Een testserver instellen
- Instellingen van Dreamweaver-sites importeren en exporteren
- Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
- Toegankelijkheidsfuncties in Dreamweaver
- Geavanceerde instellingen
- Sitevoorkeuren instellen voor het overzetten van bestanden
- Proxyserverinstellingen opgeven in Dreamweaver
- Dreamweaver-instellingen synchroniseren met Creative Cloud
- Git gebruiken in Dreamweaver
- Bestanden beheren
- Bestanden maken en openen
- Bestanden en mappen beheren
- Bestanden van uw server ophalen en op uw server plaatsen
- Bestanden inchecken en uitchecken
- Bestanden synchroniseren
- Bestanden vergelijken om verschillen op te sporen
- Bestanden en mappen op uw Dreamweaver-site camoufleren
- Ontwerpnotities inschakelen voor Dreamweaver-sites
- Potentieel misbruik van Gatekeeper voorkomen
- Lay-out en ontwerp
- CSS
- Informatie over CSS (Cascading Style Sheets)
- Pagina's opmaken met CSS ontwerpen
- CSS-preprocessors gebruiken in Dreamweaver
- CSS-stijlvoorkeuren instellen in Dreamweaver
- CSS-regels verplaatsen in Dreamweaver
- Inline CSS converteren naar een CSS-regel in Dreamweaver
- Werken met div-tags
- Verlopen toepassen op een achtergrond
- CSS3-overgangseffecten maken en bewerken in Dreamweaver
- Code opmaken
- Pagina-inhoud en assets
- Pagina-eigenschappen instellen
- Eigenschappen voor CSS-koppen en CSS-koppelingen
- Werken met tekst
- Tekst, tags en kenmerken zoeken en vervangen
- Het deelvenster DOM
- Bewerken in Live View
- Documenten coderen in Dreamweaver
- Elementen selecteren en weergeven in het documentvenster
- Teksteigenschappen instellen in de eigenschappencontrole
- Spelling op een webpagina controleren
- Horizontale lijnen gebruiken in Dreamweaver
- Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
- Werken met assets
- Datums in Dreamweaver invoegen en bijwerken
- Favoriete assets maken en beheren in Dreamweaver
- Afbeeldingen invoegen en bewerken in Dreamweaver
- Mediaobjecten toevoegen
- Video's toevoegen in Dreamweaver
- HTML5-video invoegen
- SWF-bestanden invoegen
- Audio-effecten toevoegen
- HTML5-audio invoegen in Dreamweaver
- Werken met bibliotheekitems
- Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
- Koppelingen en navigatie
- jQuery-widgets en -effecten
- Websites coderen
- Over coderen in Dreamweaver
- Coderingsomgeving in Dreamweaver
- Coderingsvoorkeuren instellen
- Codekleuren aanpassen
- Code schrijven en bewerken
- Coderingstips en codevoltooiing
- Code samenvouwen en uitvouwen
- Code hergebruiken met codefragmenten
- Linting voor code gebruiken
- Code optimaliseren
- Code bewerken in de ontwerpweergave
- Werken met de kopinhoud van pagina's
- Include-bestanden op de server invoegen in Dreamweaver
- Tagbibliotheken gebruiken in Dreamweaver
- Aangepaste tags importeren in Dreamweaver
- JavaScript-gedrag gebruiken (algemene instructies)
- Ingebouwd JavaScript-gedrag toepassen
- Over XML en XSLT
- XSL-transformaties op de server uitvoeren in Dreamweaver
- XSL-transformaties op de client uitvoeren in Dreamweaver
- Tekenentiteiten toevoegen voor XSLT in Dreamweaver
- Code opmaken
- Productonafhankelijke workflows
- Extensies in Dreamweaver installeren en gebruiken
- In-app updates in Dreamweaver
- Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
- Werken met Fireworks en Dreamweaver
- Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
- Integratie van Dreamweaver met Business Catalyst
- Persoonlijke e-mailcampagnes maken
- Sjablonen
- Over Dreamweaver-sjablonen
- Sjablonen en op een sjabloon gebaseerde documenten herkennen
- Een Dreamweaver-sjabloon maken
- Bewerkbare gebieden maken in sjablonen
- Herhalingsgebieden en tabellen maken in Dreamweaver
- Optionele gebieden in sjablonen gebruiken
- Bewerkbare tagkenmerken in Dreamweaver definiëren
- Geneste sjablonen maken in Dreamweaver
- Sjablonen bewerken, bijwerken en verwijderen
- XML-inhoud exporteren en importeren in Dreamweaver
- Een sjabloon uit een bestaand document toepassen of verwijderen
- Inhoud bewerken in Dreamweaver-sjablonen
- Syntaxisregels voor sjabloontags in Dreamweaver
- Voorkeuren voor de markering van sjabloongebieden instellen
- Voordelen van het gebruik van sjablonen in Dreamweaver
- Mobiel en meerdere schermen
- Dynamische sites, pagina's en webformulieren
- Informatie over web-applicaties
- Uw computer instellen voor het ontwikkelen van applicaties
- Problemen met databaseverbindingen oplossen
- Verbindingsscripts verwijderen in Dreamweaver
- Dynamische pagina's ontwerpen
- Overzicht van dynamische inhoudsbronnen
- Bronnen met dynamische inhoud definiëren
- Dynamische inhoud toevoegen aan pagina's
- Dynamische inhoud wijzigen in Dreamweaver
- Databaserecords weergeven
- Livegegevens leveren en problemen oplossen Dreamweaver
- Aangepast servergedrag toevoegen in Dreamweaver
- Formulieren maken met Dreamweaver
- Formulieren gebruiken om informatie van gebruikers te verzamelen
- ColdFusion-formulieren maken en inschakelen in Dreamweaver
- Webformulieren maken
- Verbeterde HTML5-ondersteuning voor formulierelementen
- Een formulier ontwikkelen met Dreamweaver
- Applicaties visueel samenstellen
- Hoofd- en detailpagina's maken in Dreamweaver
- Zoekpagina's en resultatenpagina's maken
- Een pagina voor het invoegen van records maken
- Een pagina voor het bijwerken van records maken in Dreamweaver
- Pagina's voor het verwijderen van records maken in Dreamweaver
- ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
- Een registratiepagina maken
- Een aanmeldingspagina maken
- Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
- Mappen beveiligen in ColdFusion met Dreamweaver
- ColdFusion-componenten gebruiken in Dreamweaver
- Websites testen, voorvertonen en publiceren
- Problemen oplossen
Lees in dit onderwerp hoe Photoshop is geïntegreerd in Dreamweaver. Werken met slimme objecten in Photoshop-Dreamweaver-workflows.
Over de integratie met Photoshop
De workflows voor Photoshop-integratie worden niet meer ondersteund in Dreamweaver 21.0 en latere versies.
U kunt Photoshop-afbeeldingsbestanden (PSD-indeling) invoegen in webpagina's in Dreamweaver en ze met Dreamweaver optimaliseren als afbeeldingen voor internet (GIF-, JPEG- en PNG-indeling). Wanneer u dit doet, voegt Dreamweaver de afbeelding in als een slim object en wordt een liveverbinding met het originele PSD-bestand onderhouden.
U kunt ook een Photoshop-afbeelding met meerdere lagen of meerdere segmenten geheel of gedeeltelijk in een webpagina plakken in Dreamweaver. Wanneer u echter vanuit Photoshop kopieert en plakt, wordt geen liveverbinding met het originele bestand onderhouden. Als u de afbeelding wilt bijwerken, brengt u de wijzigingen aan in Photoshop en kopieert en plakt u de afbeelding opnieuw.
Als u deze integratiefunctie vaak gebruikt, is het misschien gemakkelijker om uw Photoshop-bestanden op te slaan op uw Dreamweaver-site, zodat u er gemakkelijker toegang toe hebt. In dat geval moet u erop letten dat u ze camoufleert zodat de originele middelen niet algemeen zichtbaar zijn en overbodige overdrachten tussen de lokale site en de externe server plaatsvinden.
Voor een zelfstudie over Photoshop-integratie met Dreamweaver leest u Dreamweaver integreren met Photoshop.
Over slimme objecten en Photoshop-Dreamweaver-workflows
Er zijn twee hoofdworkflows wanneer u met Photoshop-bestanden werkt in Dreamweaver: de workflow voor kopiëren en plakken en de workflow voor slimme objecten.
Workflow voor kopiëren en plakken
Met de workflow voor kopiëren en plakken kunt u segmenten of lagen in een Photoshop-bestand selecteren en vervolgens Dreamweaver gebruiken om deze in te voegen als afbeeldingen die geschikt zijn voor gebruik op internet. Als u de inhoud later wilt bijwerken, moet u echter het oorspronkelijke Photoshop-bestand openen, de wijzigingen doorvoeren, het segment of de laag opnieuw naar het klembord kopiëren en vervolgens het bijgewerkte segment of de bijgewerkte laag in Dreamweaver plakken. Deze workflow wordt alleen aanbevolen als u een deel van een Photoshop-bestand wilt invoegen (bijvoorbeeld een gedeelte van een ontwerpcompositie) als een afbeelding op een webpagina.
Workflow voor slimme objecten
Als u werkt met volledige Photoshop-bestanden, kunt u het beste de workflow voor slimme objecten gebruiken. Een slim object in Dreamweaver is een afbeeldingsmiddel op een webpagina met een actieve verbinding met een oorspronkelijk Photoshop PSD-bestand. In de ontwerpweergave van Dreamweaver worden slimme objecten gemarkeerd met een pictogram links boven aan de afbeelding.
Als de webafbeelding (de afbeelding op de Dreamweaver-pagina) niet is gesynchroniseerd met het oorspronkelijke Photoshop-bestand, wordt in Dreamweaver vastgesteld dat het oorspronkelijke bestand is bijgewerkt en wordt een van de pijlen van het pictogram van het slimme object rood weergegeven. Als u de webafbeelding in de ontwerpweergave selecteert en in de eigenschappencontrole op de knop Bijwerken vanuit origineel klikt, wordt de afbeelding automatisch bijgewerkt, waarbij alle wijzigingen die u in het oorspronkelijke Photoshop-bestand hebt gemaakt, worden overgenomen.
Als u de workflow voor slimme objecten gebruikt, hoeft u Photoshop niet te openen om een webafbeelding bij te werken. Daarnaast zijn alle updates die u toepast op een slim object in Dreamweaver niet-destructief. Dit betekent dat u wijzigingen kunt doorvoeren in de webversie van de afbeelding op uw pagina terwijl de oorspronkelijke Photoshop-afbeelding behouden blijft.
U kunt slimme objecten ook bijwerken zonder de webafbeelding in de ontwerpweergave te selecteren. Met het deelvenster Middelen kunt u alle slimme objecten bijwerken, inclusief afbeeldingen die niet kunnen worden geselecteerd in het documentvenster (zoals CSS-achtergrondafbeeldingen).
Instellingen voor optimalisatie van afbeeldingen
In het dialoogvenster Afbeelding optimaliseren kunt u optimalisatie-instellingen opgeven voor de workflow voor kopiëren en plakken en de workflow voor slimme objecten. In dit dialoogvenster kunt u de bestandsindeling en de afbeeldingskwaliteit opgeven. Als u een segment of laag kopieert of een Photoshop-bestand voor het eerst als slim object invoegt, wordt dit dialoogvenster in Dreamweaver weergegeven. Op deze manier kunt u eenvoudig de webafbeelding maken.
Als u een update kopieert en plakt naar een specifiek segment of specifieke laag, worden in Dreamweaver de oorspronkelijke instellingen opgeslagen en wordt de webafbeelding met deze instellingen opnieuw gemaakt. Ook als u een slim object bijwerkt met de eigenschappencontrole, worden in Dreamweaver de instellingen gebruikt die u hebt gebruikt toen u de afbeelding voor het eerst hebt ingevoegd. U kunt de afbeeldingsinstellingen op elk moment wijzigen door de webafbeelding te selecteren in de ontwerpweergave en vervolgens in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken te klikken.
Photoshop-bestanden opslaan
Als u een webafbeelding hebt ingevoegd en het oorspronkelijke Photoshop-bestand niet hebt opgeslagen op uw Dreamweaver-site, wordt in Dreamweaver het pad naar het oorspronkelijke bestand herkend als een absoluut lokaal bestandspad. (Dit geldt voor zowel de workflow voor kopiëren en plakken als de workflow voor slimme objecten.) Als het pad naar de Dreamweaver-site bijvoorbeeld C:\Sites\MijnSite is en het Photoshop-bestand is opgeslagen in C:\Images\Photoshop, wordt in Dreamweaver het oorspronkelijke middel niet herkend als deel van de site met de naam MijnSite. Dit leidt tot problemen als u het Photoshop-bestand wilt delen met andere teamleden, omdat in Dreamweaver het bestand alleen wordt herkend als beschikbaar op uw lokale vaste schijf.
Als u het Photoshop-bestand opslaat in de site, wordt in Dreamweaver echter een siterelatief pad naar het bestand gemaakt. Gebruikers met toegang tot de site kunnen dan ook het juiste pad naar het bestand vaststellen, ervan uitgaande dat u het oorspronkelijke bestand ook als download aanbiedt.
Voor een zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u Conversiebewerkingen met Photoshop.
Een slim object maken
Wanneer u een PSD-bestand (Photoshop-afbeelding) op uw pagina invoegt, maakt Dreamweaver een slim object. Een slim object is een voor het web bruikbare afbeelding die een liveverbinding met de originele Photoshop-afbeelding onderhoudt. Wanneer u de originele afbeelding bijwerkt in Photoshop, biedt Dreamweaver u de mogelijkheid om de afbeelding met één klik op een knop bij te werken in Dreamweaver.
-
Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
-
Selecteer Invoegen > Afbeelding.
Opmerking:U kunt het PSD-bestand ook vanuit het deelvenster Bestanden naar de pagina slepen als u uw Photoshop-bestanden op uw website bewaart. In dat geval slaat u de volgende stap over.
-
Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan.
-
Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK.
-
Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.
Dreamweaver maakt het slimme object op basis van de geselecteerde optimalisatie-instellingen en plaatst een webversie van de afbeelding op de pagina. Het slimme object onderhoudt een liveverbinding met de originele afbeelding en geeft een melding wanneer beide versies niet meer synchroon zijn.
U kunt altijd later de optimalisatie-instellingen wijzigen voor een afbeelding die op uw pagina's is geplaatst. Selecteer hiervoor de afbeelding, klik in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken en breng de wijzigingen aan in het dialoogvenster Afbeelding optimaliseren. Wijzigingen die in het dialoogvenster Afbeelding optimaliseren zijn aangebracht, worden niet-destructief toegepast. Dreamweaver wijzigt nooit het originele Photoshop-bestand, en maakt de webafbeelding altijd opnieuw op basis van de originele gegevens.
Voor een zelfstudievideo over conversiebewerkingen met Photoshop raadpleegt u Conversiebewerkingen met Photoshop.
Een slim object bijwerken
Als u het Photoshop-bestand verandert waaraan het slimme object is gekoppeld, verschijnt het bericht dat de webafbeelding niet meer synchroon is met het origineel. In Dreamweaver worden slimme objecten aangeduid met een pictogram in de linkerbovenhoek van de afbeelding. Wanneer de webafbeelding in Dreamweaver synchroon is met het originele Photoshop-bestand, zijn beide pijlen in het pictogram groen. Als de webafbeelding niet meer synchroon is met het originele Photoshop-bestand, is een van de pijlen in het pictogram rood.
-
Als u een slim object wilt bijwerken met de huidige inhoud van het originele Photoshop-bestand, selecteert u het slimme object in het venster Document en klikt u in de eigenschappencontrole op de knop Bijwerken vanuit origineel.
Photoshop hoeft niet te zijn geïnstalleerd om vanuit Dreamweaver bij te werken.
Meerdere slimme objecten bijwerken
Met het deelvenster Middelen kunt u meerdere slimme objecten tegelijk bijwerken. In het deelvenster Middelen kunt u ook slimme objecten zien die u mogelijk niet kunt selecteren in het venster Document, bijvoorbeeld CSS-achtergrondafbeeldingen.
-
Klik in het deelvenster Bestanden op het tabblad Middelen om de sitemiddelen te bekijken.
-
Zorg ervoor dat de weergave Afbeeldingen is geselecteerd. Als de weergave niet is geselecteerd, klikt u op de knop Afbeeldingen.
-
Selecteer elke afbeelding in het deelvenster Middelen. Wanneer u een slim object selecteert, ziet u het pictogram Slim object in de linkerbovenhoek van de afbeelding. Gewone afbeeldingen hebben dit pictogram niet.
-
Klik voor elk slim object dat u wilt bijwerken met de rechtermuisknop op de bestandsnaam en selecteer Bijwerken vanuit origineel. U kunt ook Control ingedrukt houden terwijl u meerdere bestandsnamen selecteert als u ze allemaal tegelijk wilt bijwerken.
Photoshop hoeft niet te zijn geïnstalleerd om vanuit Dreamweaver bij te werken.
Het formaat van een slim object wijzigen
U kunt het formaat van een slim object in het venster Document op dezelfde wijze veranderen als het formaat van een gewone afbeelding.
-
Selecteer het slimme object in het venster Document en sleep de formaatgrepen om het formaat van de afbeelding te wijzigen. U kunt de verhouding tussen hoogte en breedte behouden door Shift ingedrukt te houden terwijl u sleept.
-
Klik in de eigenschappencontrole op de knop Bijwerken vanuit origineel.
Wanneer u het slimme object bijwerkt, wordt de webafbeelding op niet-destructieve wijze in het nieuwe formaat weergegeven, op basis van de huidige inhoud van het originele bestand en de originele optimalisatie-instellingen.
Het originele Photoshop-bestand van een slim object bewerken
Nadat u een slim object op de Dreamweaver-pagina hebt gemaakt, kunt u het originele PSD-bestand in Photoshop bewerken. Nadat u wijzigingen in Photoshop hebt aangebracht, kunt u de webafbeelding eenvoudig in Dreamweaver bijwerken.
Zorg ervoor dat u Photoshop als uw primaire externe afbeeldingseditor hebt ingesteld.
-
Selecteer het slimme object in het venster Document.
-
Klik in de eigenschappencontrole op de knop Bewerken.
-
Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op.
-
Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel.
Als u het formaat van de afbeelding in Photoshop hebt gewijzigd, moet u het formaat van de webafbeelding opnieuw instellen in Dreamweaver. Dreamweaver werkt een slim object alleen bij op basis van de inhoud van het originele Photoshop-bestand, en niet op basis van de grootte. Als u het formaat van een webafbeelding wilt synchroniseren met het formaat van het originele Photoshop-bestand, klikt u met de rechtermuisknop op de afbeelding en kiest u Grootte van origineel herstellen.
Status van slimme objecten
De volgende tabel geeft een overzicht van de diverse statussen voor slimme objecten.
Status van slim object |
Beschrijving |
Aanbevolen actie |
Afbeeldingen gesynchroniseerd |
De webafbeelding is synchroon met de huidige inhoud van het originele Photoshop-bestand. Breedte- en hoogtekenmerken in de HTML-code komen overeen met de afmetingen van de webafbeelding. |
Geen |
Oorspronkelijk middel is gewijzigd |
Het originele Photoshop-bestand is gewijzigd nadat de webafbeelding in Dreamweaver is gemaakt. |
Gebruik de knop Bijwerken vanuit origineel in de eigenschappencontrole om de twee afbeeldingen te synchroniseren. |
Afmetingen van webafbeelding verschillen van geselecteerde HTML-breedte en -hoogte |
De breedte- en hoogtekenmerken in de HTML-code verschillen van de breedte en hoogte van de webafbeelding die Dreamweaver bij het invoegen heeft gemaakt. Als de afmetingen van de webafbeelding kleiner zijn dan de waarden van de geselecteerde HTML-breedte en -hoogte, kan de webafbeelding worden gepixeld. |
Gebruik de knop Bijwerken vanuit origineel in de eigenschappencontrole om de webafbeelding opnieuw te maken vanuit het originele Photoshop-bestand. Dreamweaver gebruikt de op dat moment opgegeven HTML-breedte en -hoogte wanneer de afbeelding opnieuw wordt gemaakt. |
Afmetingen van oorspronkelijk middel zijn te klein voor geselecteerde HTML-breedte en -hoogte |
De breedte- en hoogtekenmerken in de HTML-code zijn groter dan de breedte en hoogte in het originele Photoshop-bestand. De webafbeelding kan gepixeld worden weergegeven. |
Maak geen webafbeeldingen met afmetingen die groter zijn dan de afmetingen van het originele Photoshop-bestand. |
Oorspronkelijk middel niet gevonden |
Dreamweaver kan het originele Photoshop-bestand niet vinden dat in het tekstvak Origineel van de eigenschappencontrole is opgegeven. |
Corrigeer het bestandspad in het tekstvak Origineel van de eigenschappencontrole of verplaats het Photoshop-bestand naar de locatie die in het tekstvak is opgegeven. |
Een selectie kopiëren en plakken vanuit Photoshop
U kunt een Photoshop-afbeelding geheel of gedeeltelijk kopiëren en de selectie als afbeelding voor internet in uw Dreamweaver-pagina plakken. U kunt één laag of een set lagen voor een geselecteerd gebied van de afbeelding kopiëren, of u kunt een segment van de afbeelding kopiëren. Wanneer u dit doet, maakt Dreamweaver echter geen slim object.
Hoewel de functie Bijwerken vanuit origineel niet beschikbaar is voor geplakte afbeeldingen, kunt u het originele Photoshop-bestand wel openen en bewerken. Hiervoor selecteert u de geplakte afbeelding en klikt u in de eigenschappencontrole op de knop Bewerken.
-
Ga in Photoshop op een van de volgende manieren te werk:
- Kopieer één laag geheel of gedeeltelijk met het selectiekader om het gedeelte te selecteren dat u wilt kopiëren en kies vervolgens Bewerken > Kopiëren. Hiermee kopieert u alleen de actieve laag voor het geselecteerde gebied naar het klembord. Als u effecten hebt die op lagen zijn gebaseerd, worden deze niet gekopieerd.
- Kopieer meerdere lagen en voeg ze samen met de kaderfunctie om het gedeelte te selecteren dat u wilt kopiëren en kies vervolgens Bewerken > Samengevoegd kopiëren. Hiermee worden alle actieve en lagere lagen van het geselecteerde gebied naar het klembord gekopieerd. Als er op lagen gebaseerde effecten gekoppeld zijn aan deze lagen, worden ze gekopieerd.
- Kopieer een segment met de functie voor het selecteren van segmenten en kies vervolgens Bewerken > Kopiëren. Hiermee worden alle actieve en lagere lagen van het segment naar het klembord gekopieerd.
Opmerking:U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren.
-
Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
-
Selecteer Bewerken > Plakken.
-
Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK.
-
Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.
Dreamweaver definieert de afbeelding volgens de optimalisatie-instellingen en plaatst een versie van de afbeelding die klaar is voor internet op uw pagina. Informatie over de afbeelding, zoals de locatie van het oorspronkelijke PSD-bestand, wordt opgeslagen in een ontwerpnotitie, ongeacht of u ontwerpnotities hebt ingeschakeld voor uw site. Via de ontwerpnotitie kunt u het oorspronkelijke Photoshop-bestand weer bewerken vanuit Dreamweaver.
Geplakte afbeeldingen bewerken
Nadat u Photoshop-afbeeldingen op uw Dreamweaver-pagina's hebt geplakt, kunt u het originele PSD-bestand in Photoshop bewerken. Wanneer u de methode met kopiëren en plakken gebruikt, kunt u het beste uw bewerkingen aanbrengen in het originele PSD-bestand (in plaats van in de webafbeelding zelf) en de afbeelding daarna opnieuw plakken, zodat u blijft werken met één bronbestand.
controleer of u Photoshop hebt ingesteld als primaire externe afbeeldingseditor voor het bestandstype dat u wilt bewerken.
-
Selecteer in Dreamweaver een internetafbeelding die oorspronkelijk in Photoshop is gemaakt en ga op een van de volgende manieren te werk:
- Klik op de knop Bewerken in de eigenschappencontrole voor de afbeelding.
- Houd Control (Windows) of Command (Macintosh) ingedrukt terwijl u dubbelklikt op het bestand.
- Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op een afbeelding, kies Origineel bewerken met in het snelmenu en kies Photoshop.
Opmerking:Hierbij wordt ervan uitgegaan dat Photoshop is ingesteld als de primaire externe afbeeldingseditor voor PSD-afbeeldings-bestanden. U kunt Photoshop ook instellen als de standaardeditor voor JPEG-, GIF- en PNG-bestanden.
-
Bewerk het bestand in Photoshop.
-
Ga terug naar Dreamweaver en plak de bijgewerkte afbeelding of selectie op de pagina.
Als u de afbeelding later opnieuw wilt optimaliseren, kunt u de afbeelding selecteren en in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken klikken.
Opties instellen in het dialoogvenster Afbeelding optimaliseren
Wanneer u een slim object maakt of een selectie vanuit Photoshop plakt, geeft Dreamweaver het dialoogvenster Afbeelding optimaliseren weer. (Dreamweaver geeft dit dialoogvenster ook weer voor elk ander type afbeelding als u de afbeelding selecteert en in de eigenschappencontrole op de knop Afbeeldingsinstellingen bewerken klikt.) In dit dialoogvenster kunt u de instellingen voor webafbeeldingen definiëren en bekijken met de juiste combinatie van kleur, compressie en kwaliteit.
Een internetafbeelding is een afbeelding die kan worden weergegeven door alle moderne webbrowsers en die er altijd hetzelfde uitziet, ongeacht het systeem of de browser van de gebruiker. In het algemeen komen de instellingen neer op een compromis tussen kwaliteit en bestandsgrootte.
De instellingen die u selecteert, hebben alleen invloed op de geïmporteerde versie van het afbeeldingsbestand. Het originele Photoshop PSD- of Fireworks PNG-bestand verandert nooit.
Voorinstelling
Kies een voorinstelling die het beste aan uw vereisten voldoet. De bestandsgrootte van de afbeelding wordt gewijzigd op basis van de geselecteerde voorinstelling. Op de achtergrond wordt direct een voorvertoning weergegeven van de afbeelding waarop de instelling is toegepast.
Als u afbeeldingen bijvoorbeeld met veel helderheid wilt weergeven, kiest u PNG24 voor foto's (scherpe Details). Selecteer GIF voor achtergrondafbeeldingen (patronen) als u een patroon invoegt dat wordt gebruikt als achtergrond voor de pagina.
Wanneer u een voorinstelling selecteert, worden de configureerbare opties voor de voorinstelling weergegeven. Wijzig de waarden voor deze opties als u de optimalisatie-instellingen verder wilt aanpassen.