Handboek Annuleren

Photoshop-bestanden gebruiken in Dreamweaver

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen
  19. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

 

Lees in dit onderwerp hoe Photoshop is geïntegreerd in Dreamweaver. Werken met slimme objecten in Photoshop-Dreamweaver-workflows.

Over de integratie met Photoshop

Opmerking:

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.

Opmerking:

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.

Slim object

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.

  1. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
  2. 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.

  3. Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan.

  4. Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK.

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

Opmerking:

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.

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

Opmerking:

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.

  1. Klik in het deelvenster Bestanden op het tabblad Middelen om de sitemiddelen te bekijken.
  2. Zorg ervoor dat de weergave Afbeeldingen is geselecteerd. Als de weergave niet is geselecteerd, klikt u op de knop Afbeeldingen.

  3. 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.
  4. 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.
Opmerking:

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.

  1. 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.
  2. 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.

Opmerking:

Zorg ervoor dat u Photoshop als uw primaire externe afbeeldingseditor hebt ingesteld.

  1. Selecteer het slimme object in het venster Document.
  2. Klik in de eigenschappencontrole op de knop Bewerken.

  3. Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op.
  4. Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel.

Opmerking:

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.

Opmerking:

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.

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

  2. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen.
  3. Selecteer Bewerken > Plakken.

  4. Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK.

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

Opmerking:

controleer of u Photoshop hebt ingesteld als primaire externe afbeeldingseditor voor het bestandstype dat u wilt bewerken.

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

  2. Bewerk het bestand in Photoshop.
  3. 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.

Opmerking:

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.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online