Afbeeldingen invoegen en bewerken in Dreamweaver

Plaats de invoegpositie op de locatie waar u de afbeelding wilt weergeven in het documentvenster en ga op een van de volgende manieren te werk:

• Selecteer HTML in de vervolgkeuzelijst in het deelvenster Invoegen. Klik op Afbeelding. Dubbelklik op het pictogram of sleep het naar het documentvenster (of naar het venster Codeweergave als u met code werkt).

• Selecteer Invoegen > Afbeelding.

• Sleep een afbeelding uit het deelvenster Middelen (Venster > Middelen) naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3.

• Sleep een afbeelding uit het deelvenster Bestanden naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3.

• Sleep een afbeelding van de desktop naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3.

• In Live View kunt u een afbeelding slepen vanuit het deelvenster Extract of het tabblad Lagen. Sleep het element boven, onder, links of rechts van een element met behulp van Livehulplijnen. U kunt het element ook op de exacte plaats in de documentstructuur neerzetten door te klikken op </> en de Snelle elementweergave te gebruiken.

Blader naar de afbeelding of inhoudsbron die u wilt invoegen en selecteer deze.

Als u in een niet-opgeslagen document werkt, wordt een file://-verwijzing naar het afbeeldingsbestand gegenereerd. Als u het document ergens op de site opslaat, wordt de verwijzing geconverteerd naar een documentrelatief pad.

Klik op OK. 

Als u de eigenschappencontrole voor een geselecteerde afbeelding wilt weergeven, klikt u op de afbeelding en selecteert u Venster > Eigenschappen.

Typ een naam in het tekstvak onder de miniatuurafbeelding. U kunt deze naam gebruiken om te verwijzen naar de afbeelding als u Dreamweaver-gedrag, zoals Afbeelding verwisselen, gebruikt of als u een scripttaal zoals JavaScript of VBScript gebruikt.

De breedte en hoogte van de afbeelding in pixels. Als u een afbeelding invoegt op een pagina, worden deze tekstvakken automatisch bijgewerkt met de oorspronkelijke afmetingen van de afbeelding.

Als u voor B en H waarden instelt die niet overeenkomen met de werkelijke breedte en hoogte van de afbeelding, wordt de afbeelding niet goed weergegeven in een browser. Als u de oorspronkelijke waarden wilt herstellen, klikt u op de labels van de tekstvakken B en H of op de knop Afbeeldingsgrootte herstellen, rechts van de tekstvakken B en H.

Geeft het bronbestand voor de afbeelding aan. Klik op het mappictogram om naar het bronbestand te bladeren of typ het pad.

Geeft een hyperlink naar de afbeelding aan. Sleep het pictogram Wijs bestand aan naar een bestand in het deelvenster Bestanden. Klik op het mappictogram om naar een document op de site te bladeren of typ de URL handmatig.

Hiermee geeft u alternatieve tekst op die in plaats van de afbeelding wordt weergegeven in browsers die alleen tekst weergeven of in browsers waarvoor is ingesteld dat afbeeldingen handmatig moeten worden gedownload. Voor blinde of slechtziende gebruikers die spraakprogramma's gebruiken met browsers die alleen tekst weergeven, wordt de tekst hardop voorgelezen. In sommige browsers wordt deze tekst ook weergegeven als de aanwijzer op de afbeelding wordt geplaatst.

Hiermee kunt u een afbeelding met hyperlinks op de clientzijde labelen en maken.

Doel     Hiermee geeft u het frame of venster op waarin de gekoppelde pagina wordt geladen. Deze optie is niet beschikbaar als de afbeelding niet is gekoppeld aan een ander bestand. De namen van alle frames in de huidige frameset worden weergegeven in de lijst Doel. U kunt ook een van de volgende gereserveerde doelnamen kiezen:

• _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.
• _new laadt het gekoppelde bestand in een nieuw browservenster.
•  _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige browservenster.
• _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is het standaarddoel. U hoeft deze waarde niet expliciet op te geven.
•  _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

Hiermee wordt de afbeeldingseditor gestart die u hebt opgegeven in de voorkeuren voor externe editors en wordt de geselecteerde afbeelding geopend.

Hiermee opent u het dialoogvenster Afbeelding optimaliseren waarin u de afbeelding kunt optimaliseren.

Als de afbeelding in Dreamweaver niet is gesynchroniseerd met het oorspronkelijke Photoshop-bestand, detecteert Dreamweaver dat het oorspronkelijke bestand is bijgewerkt. Een van de pijlen van het pictogram van het slimme object wordt rood weergegeven in de toepassing. Als u de webafbeelding in de ontwerpweergave selecteert en in de eigenschappencontrole op de knop Bijwerken vanuit origineel klikt, wordt de afbeelding automatisch bijgewerkt. De wijzigingen die u in het oorspronkelijke Photoshop-bestand hebt aangebracht, worden weergegeven in de bijgewerkte afbeelding.

Hiermee kunt u een afbeelding uitsnijden, waarbij u ongewenste delen van de geselecteerde afbeelding verwijdert.

Hiermee kunt u resampling toepassen op een afbeelding waarvan u de grootte hebt gewijzigd om de kwaliteit bij de nieuwe grootte en vorm te verbeteren.

Hiermee past u de helderheid en het contrast van een afbeelding aan.

Hiermee past u de scherpte van een afbeelding aan.

Klik in het documentvenster op de afbeelding of selecteer de afbeeldingstag in de code.

Voer een van de volgende handelingen uit om een naam of korte beschrijving van minder dan 50 tekens voor de afbeelding in te voeren in het vak Alternatieve tekst. De schermlezer leest de informatie die u hier typt.  

• Bewerk de gewenste afbeeldingskenmerken in de codeweergave.

• Bewerk de afbeeldingskenmerken in Live View met Snelle eigenschappencontrole.

• Bewerk de Alt-waarde in de eigenschappencontrole.

Aan de onderkant en rechterkant van het element en in de rechterbenedenhoek worden formaatgrepen weergegeven. Als de formaatgrepen niet worden weergegeven, klikt u buiten het element en selecteert u het opnieuw. U kunt ook klikken op de desbetreffende tag in de tagkiezer om het element te selecteren.

• Als u de breedte van het element wilt aanpassen, sleept u de selectiegreep aan de rechterkant.

• Als u de hoogte van het element wilt aanpassen, sleept u de selectiegreep aan de onderkant.

• Als u de breedte en de hoogte van het element tegelijk wilt aanpassen, sleept u de selectiegreep in de hoek.

• Als u de verhoudingen van het element (de verhouding tussen breedte en hoogte) wilt behouden bij het wijzigen van de grootte, houdt u Shift in gedrukt terwijl u de hoekselectiegreep sleept.

• Als u de breedte en hoogte van een element wilt instellen op een specifieke grootte (bijvoorbeeld 1 x 1 pixel), kunt de eigenschappencontrole gebruiken. Voer een numerieke waarde in de velden B en H in. U kunt de grootte van elementen visueel wijzigen tot minimaal 8 x 8 pixels.

Als u de oorspronkelijke afmetingen van een aangepast element wilt herstellen, verwijdert u de waarden in de velden B en H in de eigenschappencontrole. U kunt ook klikken op de knop Grootte opnieuw instellen in de eigenschappencontrole van de afbeelding.

Wijzig de grootte van de afbeelding zoals wordt beschreven in De grootte van een afbeelding aanpassen.

Klik op de knop Aantal bits in de eigenschappencontrole voor de afbeelding.

Selecteer Bewerken > Afbeelding. U kunt de volgende beeldbewerkingsfuncties instellen in Dreamweaver:

Selecteer een voorinstelling en geef een bestandsindeling en kwaliteitsniveau op. Wanneer u de schuifregelaar over de kwaliteitsniveaus verplaatst, kunt u de bestandsgrootte van de afbeelding in het dialoogvenster zien. Klik op OK als u klaar bent.

Hiermee worden pixels opgeteld bij of afgetrokken van JPEG- en GIF-afbeeldingsbestanden waarvan de grootte is gewijzigd, zodat deze zoveel mogelijk overeenkomen met de weergave van de oorspronkelijke afbeelding. Als u resampling toepast op een afbeelding, wordt het bestand kleiner en wordt het sneller gedownload.

Als u de grootte van een afbeelding wijzigt in Dreamweaver, kunt u nieuwe pixels laten berekenen op basis van de nieuwe afmetingen. Als resampling wordt toegepast op een bitmapobject, worden er pixels toegevoegd aan of verwijderd uit de afbeelding, zodat deze groter of kleiner wordt. Als een afbeelding na resampling een hogere resolutie heeft, heeft dit meestal weinig kwaliteitsverlies tot gevolg. Als de afbeelding na resampling echter een lagere resolutie heeft, leidt dit altijd tot gegevensverlies en meestal ook tot kwaliteitsverlies.

Hiermee kunt u afbeeldingen bewerken door een deel van afbeelding weg te snijden. U kunt een afbeelding uitsnijden als u meer nadruk wilt leggen op het onderwerp van de afbeelding en ongewenste elementen rond het onderwerp wilt verwijderen.

Hiermee wijzigt u het contrast of de helderheid van pixels in een afbeelding. Helderheid en contrast is van invloed op de hooglichten, schaduwen en middentonen van een afbeelding. Meestal gebruikt u Helderheid/contrast als u afbeeldingen corrigeert die te donker of te licht zijn.

Hiermee past u de scherpte van een afbeelding aan door het contrast van randen in de afbeelding te vergroten. Als u een afbeelding scant of een digitale foto neemt, zal de meeste software voor het vastleggen van afbeeldingen de randen van objecten in de afbeelding standaard verzachten. Bij scannen wordt voorkomen dat zeer fijne details verloren gaan in de pixels waaruit digitale afbeeldingen zijn opgebouwd. Om de details in digitale afbeeldingsbestanden naar voren te brengen, is het echter vaak nodig om de afbeelding scherper te maken. Met de optie Verscherpen wordt het randcontrast vergroot, waardoor de afbeelding scherper lijkt.

Open de pagina met de afbeelding die u wilt uitsnijden, selecteer de afbeelding en ga op een van de volgende manieren te werk:

• Klik op het pictogram Uitsnijden in de eigenschappencontrole voor de afbeelding.

• Selecteer Bewerken > Afbeelding > Uitsnijden.

• Er worden uitsnijgrepen weergegeven rond de geselecteerde afbeelding.

Er wordt een dialoogvenster weergegeven met het bericht dat het afbeeldingsbestand dat u uitsnijdt, wordt gewijzigd op de schijf. Klik op OK.

Alle pixels in de geselecteerde bitmap buiten het vak worden verwijderd, maar andere objecten in de afbeelding blijven staan.

Geef een voorbeeld weer van de afbeelding en kijk of die aan uw verwachtingen voldoet. Als dat niet zo is, selecteert u Bewerken > Uitsnijden ongedaan maken om terug te keren naar de oorspronkelijke afbeelding.

Open de pagina met de afbeelding die u wilt optimaliseren. Selecteer de afbeelding en ga op een van de volgende manieren te werk:

• Klik op de knop Afbeeldingsinstellingen bewerken in de eigenschappencontrole voor de afbeelding.

• Selecteer Bewerken > Afbeelding > Optimaliseren.

Breng de gewenste wijzigingen aan in het dialoogvenster Afbeelding optimaliseren en klik op OK.

• Klik op de knop Verscherpen in de eigenschappencontrole voor de afbeelding.

• Selecteer Bewerken > Afbeelding > Verscherpen.

Als u wilt opgeven hoeveel verscherping Dreamweaver op de afbeelding moet toepassen, versleept u de schuifregelaar. U kunt ook een waarde tussen 0 en 10 invoeren in het tekstvak. Terwijl u de scherpte van de afbeelding aanpast in het dialoogvenster Verscherpen, kunt u de wijzigingen in de afbeelding bekijken.

Sla uw wijzigingen op door Bestand > Opslaan te selecteren, of keer terug naar de oorspronkelijke afbeelding door Bewerken > Verscherpen ongedaan maken te selecteren.

• Klik op de knop Helderheid en contrast in de eigenschappencontrole voor de afbeelding.

• Selecteer Bewerken > Afbeelding > Helderheid/contrast.

• Selecteer HTML in de vervolgkeuzelijst in het deelvenster Invoegen. Selecteer Rollover-afbeelding in de lijst met opties.

• Selecteer Invoegen > HTML > Rollover-afbeelding.

Selecteer de afbeeldingen in het dialoogvenster Rollover-afbeelding invoegen en stel de eigenschappen voor de rollover in. U kunt de volgende eigenschappen instellen:

De naam van de rollover-afbeelding.

De afbeelding die u wilt weergeven als de pagina wordt geladen. Typ het pad in het tekstvak of klik op Bladeren en selecteer de afbeelding.

De afbeelding die u wilt weergeven als de aanwijzer over de oorspronkelijke afbeelding rolt. Typ het pad of klik op Bladeren om de afbeelding te selecteren.

Hiermee worden afbeeldingen vooraf in het cachegeheugen van de browser geladen, zodat er geen vertraging optreedt wanneer de gebruiker de aanwijzer over de afbeelding rolt.

(Optioneel) Tekst waarmee u de afbeelding beschrijft voor mensen die een browser met alleen tekst gebruiken.

Het bestand dat u wilt openen als een gebruiker op de rollover-afbeelding klikt. Typ het pad of klik op Bladeren en selecteer het bestand.

Als u een voorbeeld van de rollover-afbeelding wilt bekijken, selecteert u Bestand > Real-time voorvertoning of drukt u op F12.

Ga op een van de volgende manieren te werk om een externe editor te openen:

• Dubbelklik op de afbeelding die u wilt bewerken.

• Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op de afbeelding die u wilt bewerken. Klik vervolgens op Bewerken met > Bladeren en selecteer een editor.

• Selecteer de afbeelding die u wilt bewerken en klik op Bewerken in de eigenschappencontrole.

• Dubbelklik op het afbeeldingsbestand in het deelvenster Bestanden om de primaire afbeeldingseditor te starten. Als u geen afbeeldingseditor hebt opgegeven, start Dreamweaver de standaardeditor voor het bestandstype.

Als u geen bijgewerkte afbeelding ziet nadat u bent teruggekeerd naar het Dreamweaver-venster, selecteert u de afbeelding en klikt u op de knop Vernieuwen in de eigenschappencontrole.

Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (macOS) en selecteer Bestandstypen/editors in de lijst Categorie in het linkerdeelvenster.

Selecteer in de lijst Extensies de bestandsextensie waarvoor u een externe editor wilt instellen.

Blader in het dialoogvenster Externe editor selecteren naar de toepassing die u als editor voor dit bestandstype wilt openen.

Klik in het dialoogvenster Voorkeuren op Primair maken als u van deze editor de primaire editor voor dit bestandstype wilt maken.

Dreamweaver gebruikt automatisch de primaire editor als u dit afbeeldingstype bewerkt. U kunt de andere editors selecteren in het contextmenu voor de afbeelding in het documentvenster.

Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (macOS) en selecteer Bestandstypen/editors in de lijst Categorie in het linkerdeelvenster.

Klik in het dialoogvenster met voorkeuren voor Bestandstypen/editors op de knop Toevoegen (+) boven de lijst Extensies.

Er wordt een tekstvak weergegeven in de lijst Extensies.

Selecteer de bestandsextensie van het bestandstype waarvoor u een editor wilt instellen.

Klik op de knop Toevoegen (+) boven de lijst Editors als u een externe editor voor het bestandstype wilt selecteren.

In het dialoogvenster dat wordt weergegeven, selecteert u de toepassing die u wilt gebruiken om dit afbeeldingstype te bewerken.

Klik op Primair maken als u van deze editor de primaire editor voor dit bestandstype wilt maken.

Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (macOS) en selecteer Bestandstypen/editors in de lijst Categorie in het linkerdeelvenster.

Selecteer in de lijst Extensies in het voorkeurenvenster Bestandstypen/editors het bestandstype dat u wilt wijzigen om de bestaande editors weer te geven.

Selecteer in de lijst Editors de editor die u wilt wijzigen en ga vervolgens op een van de volgende manieren te werk:

• Als u een editor wilt toevoegen of verwijderen, klikt u op de knop Toevoegen (+) of Verwijderen (–) boven de lijst Editors.

• Als u de editor wilt wijzigen die standaard voor bewerking wordt gestart, klikt u op de knop Primair maken.