Over afbeeldingen

Er zijn veel verschillende bestandsindelingen voor afbeeldingen, maar de drie bestandsindelingen voor afbeeldingen die meestal op webpagina's worden gebruikt, zijn GIF, JPEG en PNG. De bestandsindelingen GIF en JPEG worden het beste ondersteund en kunnen worden weergegeven in de meeste browsers.

GIF (Graphic Interchange Format)

GIF-bestanden gebruiken maximaal 256 kleuren en zijn het best geschikt voor de weergave van afbeeldingen met niet-continue tinten of afbeeldingen met grote gebieden met platte kleuren, zoals navigatiebalken, knoppen, pictogrammen, logo's of andere afbeeldingen met uniforme kleuren en tonen.

JPEG (Joint Photographic Experts Group)

JPEG-bestanden zijn de beste keuze voor foto's en afbeeldingen met continue tinten, omdat JPEG-bestanden miljoenen kleuren kunnen bevatten. Hoe hoger de kwaliteit van een JPEG-bestand, hoe groter het bestand en hoe langer het duurt om het te downloaden. U kunt vaak een goede balans vinden tussen de kwaliteit van de afbeelding en de bestandsgrootte door een JPEG-bestand te comprimeren.

PNG (Portable Network Group)

PNG-bestanden zijn een patentvrije vervanging van GIF-bestanden, met ondersteuning voor geïndexeerde kleuren, grijstinten en true-color afbeeldingen en ondersteuning van alfakanalen voor doorzichtigheid. PNG is de eigen bestandsindeling van Adobe® Fireworks®. In PNG-bestanden blijft alle oorspronkelijke informatie over lagen, vectors, kleuren en effecten (zoals schaduwen) behouden en blijven alle elementen altijd volledig bewerkbaar. Bestanden worden alleen door Dreamweaver herkend als PNG-bestanden als ze de extensie .png hebben.

Een afbeelding invoegen

Als u een afbeelding invoegt in een Dreamweaver-document, wordt een verwijzing naar het afbeeldingsbestand gegenereerd in de HTML-broncode. Deze verwijzing klopt alleen als het afbeeldingsbestand zich op de juiste site bevindt. Als het bestand zich niet op de huidige site bevindt, wordt u door Dreamweaver gevraagd of u het bestand naar de site wilt kopiëren.

U kunt afbeeldingen ook dynamisch invoegen. Dynamische afbeeldingen zijn afbeeldingen die vaak veranderen. Bij rotatiesystemen voor advertentiebanners moet bijvoorbeeld steeds willekeurige één banner worden geselecteerd uit een lijst met mogelijke banners, waarna de afbeelding van de geselecteerde banner dynamisch wordt weergegeven als een pagina wordt opgevraagd.

Nadat u een afbeelding hebt ingevoegd, kunt u toegankelijkheidskenmerken voor de afbeeldingstag instellen die leesbaar zijn door schermlezers voor blinde en slechtziende gebruikers. Deze kenmerken kunnen worden bewerkt in HTML-code.

Voor een zelfstudie over het invoegen van afbeeldingen gaat u naar Afbeeldingen toevoegen.

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

    • Ga naar de categorie Algemeen in het deelvenster Invoegen en klik op het pictogram Afbeeldingen .
    • Ga naar de categorie Algemeen van het paneel Invoegen, klik op de knop Afbeeldingen en selecteer het pictogram Afbeelding. Als het pictogram Afbeelding in het paneel Invoegen wordt weergegeven, kunt u het pictogram naar het documentvenster slepen (of naar het venster Codeweergave als u in de code aan het werken bent).
    • 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 het bureaublad naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3.
  2. Voer in het dialoogvenster een van de volgende handelingen uit:
    • Selecteer Bestandssysteem om een afbeeldingsbestand te kiezen.
    • Selecteer Gegevensbron om een dynamische afbeeldingsbron te kiezen.
    • Klik op de knop Sites en servers als u een afbeeldingsbestand wilt kiezen in een externe map van uw Dreamweaver-sites.
  3. 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.

    Opmerking:

    Bij het invoegen van afbeeldingen kunt u ook een absoluut pad gebruiken naar een afbeelding op een externe server (een afbeelding die niet is opgeslagen op de lokale vaste schijf). Als u problemen ervaart tijdens het werken kunt u er echter voor kiezen om de afbeelding niet weer te geven in de ontwerpweergave door de optie Opdrachten > Externe bestanden weergeven uit te schakelen.

  4. Klik op OK. Het dialoogvenster Toegankelijkheidskenmerken van de afbeeldingstag wordt weergegeven als u het dialoogvenster hebt geactiveerd in Voorkeuren (Bewerken > Voorkeuren).

  5. Typ waarden in de tekstvakken Alternatieve tekst en Lange beschrijving en klik op OK.
    • In het tekstvak Alternatieve tekst typt u een naam of korte beschrijving voor de afbeelding. De schermlezer leest de informatie die u hier typt. Gebruik niet meer dan ongeveer 50 tekens. Voor langere beschrijvingen kunt u een koppeling gebruiken (in het tekstvak Lange beschrijving) naar een bestand dat meer informatie over de afbeelding bevat.
    • In het tekstvak Lange beschrijving typt u de locatie van een bestand dat wordt weergegeven als de gebruiker op de afbeelding klikt of op het mappictogram klikt om naar het bestand te bladeren. Dit tekstvak bevat een koppeling naar een bestand dat betrekking heeft op of meer informatie bevat over de afbeelding.

    Opmerking:

    U kunt informatie typen in een of beide tekstvakken, afhankelijk van uw vereisten. De schermlezer leest het Alt-kenmerk voor de afbeelding.

    Opmerking:

    als u op Annuleren klikt, verschijnt de afbeelding in het document, maar worden er door Dreamweaver geen toegankelijkheidstags of -kenmerken aan gekoppeld.

  6. In de eigenschappencontrole (Venster > Eigenschappen) kunt u eigenschappen instellen voor de afbeelding.

Afbeeldingseigenschappen instellen

In de eigenschappencontrole voor afbeeldingen kunt u eigenschappen voor een afbeelding instellen. Als u niet alle afbeeldingseigenschappen ziet, klikt u op de uitvouwpijl in de rechterbenedenhoek.

Eigenschappen voor afbeeldingen in de eigenschappencontrole.
  1. Selecteer Venster > Eigenschappen om de eigenschappencontrole voor een geselecteerde afbeelding weer te geven.

  2. Typ een naam in het tekstvak onder de miniatuurafbeelding zodat u naar de afbeelding kunt verwijzen als u Dreamweaver-gedrag (zoals Afbeelding verwisselen) gebruikt of als u een scripttaal als JavaScript of VBScript gebruikt.
  3. Stel de afbeeldingsopties naar wens in.

    B en H

    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 mogelijk 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 als u een nieuwe waarde typt.)

    Opmerking:

    U kunt deze waarden wijzigen om de weergavegrootte van dit exemplaar van de afbeelding aan te passen, maar dat heeft geen invloed op de downloadtijd, omdat de browser alle afbeeldingsgegevens downloadt voordat de grootte van de afbeelding wordt aangepast. Als u de downloadtijd wilt verminderen en ervoor wilt zorgen dat alle exemplaren van een afbeelding even groot worden weergegeven, moet u afbeeldingen schalen met een toepassing voor het bewerken van afbeeldingen.

    Bron

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

    Koppeling

    Geeft een hyperlink naar de afbeelding aan. Sleep het Point-To-File-pictogram naar een bestand in het paneel Bestanden, klik op het mappictogram om naar een document in de site te bladeren of typ de URL handmatig.

    Alt

    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.

    Mapnaam en Hotspot-gereedschap

    Hiermee kunt u een overzicht van afbeeldingen met hyperlinks labelen en maken.

    Doel

    Hiermee geeft u het frame of venster op waarin de gekoppelde pagina moet worden 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.

    • _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 de standaardinstelling en hoeft u gewoonlijk niet te definiëren.

    • _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames.

    Bewerken

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

    Bijwerken vanuit origineel

    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.

    Afbeeldingsinstellingen bewerken

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

    Uitsnijden

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

    Nieuw voorbeeld

     Hiermee kunt u een nieuw voorbeeld weergeven van een afbeelding waarvan u de grootte hebt gewijzigd, zodat u de afbeeldingskwaliteit met de nieuwe grootte en vorm verbetert.

    Helderheid en contrast

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

    Verscherpen

     Hiermee past u de scherpte van een afbeelding aan.

Toegankelijkheidskenmerken van een afbeelding bewerken in code

Als u toegankelijkheidskenmerken hebt ingevoegd voor een afbeelding, kunt u die waarden bewerken in de HTML-code.

  1. Selecteer de afbeelding in het documentvenster.
  2. Voer een van de volgende handelingen uit:
    • Bewerk de desbetreffende afbeeldingskenmerken in de codeweergave.
    • Klik met de rechtermuisknop (Windows), of houd de Control-toets ingedrukt terwijl u klikt, en kies Tag bewerken.
    • Bewerk de Alt-waarde in de eigenschappencontrole.

De grootte van een afbeelding visueel wijzigen

U kunt de grootte van elementen als afbeeldingen, insteekmodules, Shockwave- of SWF-bestanden, applets en ActiveX-besturingselementen visueel wijzigen in Dreamweaver.

Als u de grootte van een afbeelding visueel wijzigt, kunt u zien hoe de afbeelding met verschillende afmetingen de indeling beïnvloedt, maar wordt het afbeeldingsbestand niet geschaald naar de door u opgegeven verhoudingen. Als u de grootte van een afbeelding visueel wijzigt in Dreamweaver zonder een toepassing voor het bewerken van afbeeldingen (zoals Adobe Fireworks) te gebruiken om het afbeeldingsbestand te schalen naar de gewenste grootte, wordt de afbeelding geschaald door de browser van de gebruiker als de pagina wordt geladen. Hierdoor kan het langer duren om de pagina te downloaden en wordt de afbeelding mogelijk niet goed weergegeven in de browser van de gebruiker. Als u de downloadtijd wilt verminderen en ervoor wilt zorgen dat alle exemplaren van een afbeelding even groot worden weergegeven, moet u afbeeldingen schalen met een toepassing voor het bewerken van afbeeldingen.

Als u de grootte van een afbeelding wijzigt in Dreamweaver, kunt u nieuwe pixels berekenen op basis van de nieuwe afmetingen. Als u een nieuw voorbeeld maakt, 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 een nieuw voorbeeld maakt van een afbeelding, wordt het bestand kleiner en verloopt het downloaden sneller.

De grootte van een element visueel wijzigen

  1. Selecteer het element (bijvoorbeeld een afbeelding of SWF-bestand) in het documentvenster.

    Aan de onderkant en rechterkant van het element en in de rechterbenedenhoek worden formaatgrepen weergegeven. Als er geen formaatgrepen worden weergegeven, klikt u ergens anders dan op het element waarvan u de grootte wilt wijzigen en selecteert u het vervolgens opnieuw, of klikt u op de desbetreffende tag in de tagkiezer om het element te selecteren.

  2. Wijzig de grootte van het element op een van de volgende manieren:
    • 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 u in de eigenschappencontrole een numerieke waarde invoeren. De grootte van elementen kan visueel worden gewijzigd tot minimaal 8 x 8 pixels.
  3. Als u de oorspronkelijke afmetingen van een element wilt herstellen, verwijdert u in de eigenschappencontrole de waarden in de tekstvakken B en H of klikt u op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de afbeelding.

De oorspronkelijke afmetingen van een afbeelding herstellen

  1. Klik op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de afbeelding.

Een nieuw voorbeeld weergeven van een afbeelding waarvan u de grootte hebt gewijzigd

  1. Wijzig de grootte van de afbeelding zoals hierboven is beschreven.
  2. Klik op de knop Nieuw voorbeeld in de eigenschappencontrole voor de afbeelding.

    Opmerking:

    u kunt geen nieuw voorbeeld maken van voorlopige afbeeldingen of andere elementen dan bitmapafbeeldingen.

Een tijdelijke aanduiding voor afbeeldingen invoegen

Een voorlopige afbeelding is een afbeelding die u gebruikt totdat u de definitieve afbeelding kunt toevoegen aan een webpagina. U kunt de grootte en kleur van de voorlopige afbeelding instellen en er een tekstlabel voor opgeven.

  1. Plaats de invoegpositie in het documentvenster op de plaats waar u een voorlopige afbeelding wilt invoegen.
  2. Selecteer Invoegen > Afbeeldingsobjecten > Tijdelijke aanduiding voor afbeelding.

  3. Typ bij Naam (optioneel) tekst die u wilt laten weergeven als label voor de voorlopige afbeelding. Laat het tekstvak leeg als u niet wilt dat er een label wordt weergegeven. De naam moet met een letter beginnen en mag alleen letters en cijfers bevatten. Spaties en hoge ASCII-tekens zijn niet toegestaan.
  4. Typ bij Breedte en Hoogte (verplicht) een getal waarmee u de grootte van de afbeelding in pixels instelt.
  5. Pas voor Kleur (optioneel) op een van de volgende manieren een kleur toe:
    • Gebruik de kleurkiezer om een kleur te selecteren.
    • Typ de hexadecimale waarde van de kleur (bijvoorbeeld #FF0000).
    • Typ de naam van een webveilige kleur (bijvoorbeeld rood).
  6. Typ bij Alternatieve tekst (optioneel) tekst waarmee u de afbeelding beschrijft voor mensen die een browser met alleen tekst gebruiken.

    Opmerking:

    er wordt automatisch in de HTML-code een afbeeldingstag ingevoegd met een leeg src-kenmerk.

  7. Klik op OK.

    De kleur, groottekenmerken en label van de voorlopige afbeelding worden als volgt weergegeven:

    Tijdelijke aanduiding voor afbeeldingen met kenmerken.

    In een browser worden de tekst voor de label en de grootte niet weergegeven.

Een tijdelijke aanduiding voor afbeeldingen vervangen

Een voorlopige afbeelding geeft geen afbeelding weer in een browser. Voordat u uw site publiceert, moet u alle voorlopige afbeeldingen die u hebt toegevoegd, vervangen door webvriendelijke afbeeldingsbestanden, zoals GIF- of JPEG-bestanden.

Als u Fireworks hebt, kunt u een nieuwe afbeelding maken vanuit de tijdelijke aanduiding voor afbeeldingen in Dreamweaver. De nieuwe afbeelding krijgt dezelfde afmetingen als de tijdelijke aanduiding voor afbeeldingen. U kunt de afbeelding bewerken en vervolgens vervangen in Dreamweaver.

  1. Voer een van de volgende handelingen uit in het documentvenster:
    • Dubbelklik op de voorlopige afbeelding.
    • Klik op de tijdelijke aanduiding voor afbeeldingen om deze te selecteren en klik vervolgens in de eigenschappencontrole (Venster > Eigenschappen) op het mappictogram naast het tekstvak Bron.
  2. Blader in het dialoogvenster Afbeeldingsbron naar de afbeelding waardoor u de tijdelijke aanduiding wilt vervangen en klik op OK.

Eigenschappen instellen voor tijdelijke aanduidingen voor afbeeldingen

Als u eigenschappen wilt instellen voor een tijdelijke aanduiding voor afbeeldingen, selecteert u de tijdelijke aanduiding in het documentvenster en selecteert u vervolgens Venster > Eigenschappen om de eigenschappencontrole weer te geven. Als u niet alle eigenschappen ziet, klikt u op de uitvouwpijl in de rechterbenedenhoek.

Gebruik de eigenschappencontrole om een naam, breedte, hoogte, afbeeldingsbron, beschrijving in alternatieve tekst, uitlijning en kleur in te stellen voor een voorlopige afbeelding.

Eigenschappencontrole van tijdelijke aanduiding voor afbeeldingen.

In de eigenschappencontrole voor de voorlopige afbeelding zijn het grijze tekstvak en het tekstvak Uitlijnen niet beschikbaar. U kunt deze eigenschappen instellen in de eigenschappencontrole voor afbeeldingen als u de voorlopige afbeelding vervangt door een definitieve afbeelding.

  1. Stel vervolgens de volgende opties naar wens in:

    B en H

    Stellen de breedte en hoogte van de voorlopige afbeelding in in pixels.

    Bron

    Geeft het bronbestand voor de afbeelding aan. Voor een voorlopige afbeelding is dit tekstvak leeg. Klik op de knop Bladeren om een vervangende afbeelding te selecteren voor de voorlopige afbeelding.

    Koppeling

    Geeft een hyperlink naar de voorlopige afbeelding aan. Sleep het Point-to-File-pictogram naar een bestand in het paneel Bestanden, klik op het mappictogram om naar een document in de site te bladeren of typ de URL handmatig.

    Alt

    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.

    Maken

    Hiermee start u Fireworks om een vervangende afbeelding te maken. De knop Maken is alleen ingeschakeld als Fireworks ook op uw computer is geïnstalleerd.

    Bijwerken vanuit origineel

    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.

    Kleur

    Geeft een kleur voor de voorlopige afbeelding.

Afbeeldingen bewerken in Dreamweaver

U kunt afbeeldingen in Dreamweaver opnieuw samplen, bijsnijden, optimaliseren en scherper maken. U kunt ook hun helderheid en contrast wijzigen.

Beeldbewerkingsfuncties

Dreamweaver bevat basisfuncties voor het bewerken van afbeeldingen waarmee u afbeeldingen kunt wijzigen zonder dat u een externe toepassing voor het bewerken van afbeeldingen, zoals Fireworks of Photoshop, hoeft te gebruiken. De Dreamweaver-functies voor het bewerken van afbeeldingen zijn zo ontworpen dat u gemakkelijk kunt samenwerken met de inhoudsontwerpers die de afbeeldingsbestanden voor uw website maken.

Opmerking:

Fireworks of een andere beeldbewerkingstoepassing hoeft niet op uw computer te zijn geïnstalleerd om de beeldbewerkingsfuncties van Dreamweaver te kunnen gebruiken.

  1. Selecteer Wijzigen > Afbeelding. Stel een van deze Dreamweaver-functies voor het bewerken van afbeeldingen in:

    Nieuw voorbeeld

    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 een nieuw voorbeeld maakt van een afbeelding, wordt het bestand kleiner en verloopt het downloaden sneller.

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

    Uitsnijden

    Hiermee kunt u afbeeldingen bewerken door de oppervlakte van de afbeelding te verkleinen. Meestal snijdt u een afbeelding uit als u meer nadruk wilt plaatsen op het onderwerp van de afbeelding en ongewenste aspecten rondom het centrum van interesse in de afbeelding wilt verwijderen.

    Helderheid en contrast

    Hiermee wijzigt u het contrast of de helderheid van pixels in een afbeelding. Dit heeft effect op de markeringen, schaduwen en middeltonen van een afbeelding. Meestal gebruikt u Helderheid/contrast als u afbeeldingen corrigeert die te donker of te licht zijn.

    Verscherpen

    Hiermee past u de focus van een afbeelding aan door het contrast te vergroten van randen binnen de afbeelding. Als u een afbeelding scant of een digitale foto neemt, worden door de meeste software voor het vastleggen van afbeeldingen standaard de randen van objecten in de afbeelding verzacht. Hierdoor wordt voorkomen dat heel fijne details verloren gaan in de pixels waaruit digitale afbeeldingen opgebouwd. Om de details naar voren te brengen in digitale afbeeldingsbestanden, is het echter vaak nodig om de afbeelding scherper te maken, waarbij het randcontrast wordt vergroot waardoor de afbeelding scherper lijkt.

    Opmerking:

    De Dreamweaver-functies voor het bewerken van afbeeldingen kunnen alleen worden gebruikt voor JPEG-, GIF- en PNG-afbeeldingsbestanden. Bitmapafbeeldingen met een andere bestandsindeling kunnen niet met deze functies voor het bewerken van afbeeldingen worden bewerkt.

Een afbeelding uitsnijden

Met Dreamweaver kunt u bitmapafbeeldingen uitsnijden (of bijsnijden).

Opmerking:

Als u een afbeelding uitsnijdt, wordt het bronbestand van de afbeelding gewijzigd op de schijf. Bewaar daarom een back-upexemplaar van het afbeeldingsbestand voor het geval u de oorspronkelijke afbeelding weer wilt gebruiken.

  1. Open de pagina die de afbeelding bevat 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 Wijzigen > Afbeelding > Uitsnijden.
    • Er worden uitsnijgrepen weergegeven rond de geselecteerde afbeelding.
  2. Pas de uitsnijgrepen aan totdat het vak het gebied van de afbeelding aangeeft dat u wilt behouden.
  3. Dubbelklik binnen in het vak of druk op Enter om de selectie uit te snijden.
  4. 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.
  5. 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.

    Opmerking:

    u kunt het effect van de opdracht Uitsnijden ongedaan maken (en terugkeren naar het oorspronkelijke afbeeldingsbestand) totdat u Dreamweaver afsluit of totdat u het bestand bewerkt in een externe toepassing voor het bewerken van afbeeldingen.

Een afbeelding optimaliseren

U kunt afbeeldingen op uw webpagina's optimaliseren vanuit Dreamweaver.

  1. 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 van de afbeelding.
    • Selecteer Wijzigen > Afbeelding > Optimaliseren.
  2. Breng de gewenste wijzigingen aan in het dialoogvenster Afbeelding optimaliseren en klik op OK.

Een afbeelding scherper maken

Als u een afbeelding scherper maakt, wordt het contrast van pixels rond de randen van objecten vergroot, zodat de afbeelding gedefinieerder of scherper wordt.

  1. Open de pagina die de afbeelding bevat die u scherper wilt maken, selecteer de afbeelding en ga op een van de volgende manieren te werk:
    • Klik op de knop Verscherpen  in de eigenschappencontrole voor de afbeelding.
    • Selecteer Wijzigen > Afbeelding > Verscherpen.
  2. U kunt aangeven in welke mate Dreamweaver de afbeelding moet verscherpen door de schuifregelaar te slepen of door een waarde tussen 0 en 10 in het tekstvak te typen. Terwijl u de scherpte van de afbeelding aanpast in het dialoogvenster Scherpte, kunt u in een voorbeeld de wijzigingen in de afbeelding zien.
  3. Klik op OK als u tevreden bent met de afbeelding.
  4. Sla uw wijzigingen op door Bestand > Opslaan te selecteren, of keer terug naar de oorspronkelijke afbeelding door Bewerken > Verscherpen ongedaan maken te selecteren.

    Opmerking:

    U kunt het effect van de opdracht Verscherpen alleen ongedaan maken (en terugkeren naar het oorspronkelijke afbeeldingsbestand) als u de pagina met de afbeelding nog niet hebt opgeslagen. Nadat u de pagina hebt opgeslagen, worden de wijzigingen in de afbeelding permanent opgeslagen.

De helderheid en het contrast van een afbeelding aanpassen

Met Helderheid/contrast wijzigt u het contrast of de helderheid van pixels in een afbeelding. Dit heeft effect op de markeringen, schaduwen en middeltonen van een afbeelding. Meestal gebruikt u Helderheid/contrast als u afbeeldingen corrigeert die te donker of te licht zijn.

  1. Open de pagina die de afbeelding bevat die u wilt aanpassen, selecteer de afbeelding en ga op een van de volgende manieren te werk:
    • Klik op de knop Helderheid/contrast  in de eigenschappencontrole voor de afbeelding.
    • Selecteer Wijzigen > Afbeelding > Helderheid/contrast.
  2. Sleep de schuifregelaars voor Helderheid en Contrast om de instellingen aan te passen. Waarden kunnen variëren van –100 tot +100.
  3. Klik op OK.

Een rollover-afbeelding maken

U kunt rollover-afbeeldingen invoegen in uw pagina. Een rollover is een afbeelding die, als deze wordt weergegeven in een browser, verandert als de aanwijzer erop wordt geplaatst.

U hebt twee afbeeldingen nodig om de rollover te maken: een primaire afbeelding (de afbeelding die wordt weergegeven als de pagina wordt geladen) en een secundaire afbeelding (de afbeelding die wordt weergegeven als de aanwijzer op de primaire afbeelding wordt geplaatst). Beide afbeeldingen in de rollover moeten dezelfde grootte hebben. Als de afbeeldingen niet even groot zijn, worden de afmetingen van de tweede afbeelding aangepast aan die van de eerste afbeelding.

Rollover-afbeeldingen worden automatisch zo ingesteld dat ze reageren op de onMouseOver-gebeurtenis. U kunt een afbeelding zo instellen dat deze reageert op een ander gebeurtenis (bijvoorbeeld een muisklik) of een rollover-afbeelding wijzigen.

  1. Plaats de invoegpositie in het documentvenster op de plaats waar u de rollover wilt weergeven.
  2. Gebruik een van de volgende methoden om de rollover in te voegen:
    • Ga naar de categorie Algemeen van het paneel Invoegen, klik op de knop Afbeeldingen en selecteer het pictogram Rollover-afbeelding. Als het pictogram Rollover-afbeelding is weergegeven in het paneel Invoegen, kunt u het pictogram naar het documentvenster slepen.
    • Selecteer Invoegen > Afbeeldingsobjecten > Rollover-afbeelding.
  3. Stel opties in en klik op OK.

    Afbeeldingsnaam

    De naam van de rollover-afbeelding.

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

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

    Vooraf laden van Rollover-afbeelding

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

    Alternatieve tekst

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

    Ga als erop wordt geklikt, naar de URL

    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.

    Opmerking:

    Als u geen koppeling instelt voor de afbeelding, voegt Dreamweaver een lege koppeling (#) in de broncode in waaraan het rollover-gedrag wordt gekoppeld. Als u de lege koppeling verwijdert, werkt de rollover-afbeelding niet meer.

  4. Selecteer Bestand > Voorvertoning in browser of druk op F12.

  5. Verplaats in de browser de aanwijzer naar de oorspronkelijke afbeelding om de rollover-afbeelding te zien.

    Opmerking:

    U kunt het effect van een rollover-afbeelding niet zien in de ontwerpweergave.

Een externe afbeeldingseditor gebruiken

In Dreamweaver kunt u een geselecteerde afbeelding openen in een externe afbeeldingseditor. Als u het bewerkte afbeeldingsbestand opslaat en terugkeert naar Dreamweaver, worden alle wijzigingen die u in de afbeelding hebt aangebracht, weergegeven in het documentvenster.

U kunt Fireworks instellen als primaire externe editor. U kunt ook instellen welke bestandstypen door een editor worden geopend en u kunt meerdere afbeeldingseditors selecteren. U kunt bijvoorbeeld via de voorkeuren instellen dat Fireworks moet worden gestart als u een GIF wilt bewerken en dat een andere afbeeldingseditor moet worden gestart als u een JPG of JPEG wilt bewerken.

De externe editor voor bestanden starten

  1. Voer een van de volgende handelingen uit:
    • Dubbelklik op de afbeelding die u wilt bewerken.
    • Klik met de rechtermuisknop (Windows), of houd de Control-toets ingedrukt (Macintosh) terwijl u op de afbeelding klikt die u wilt bewerken en selecteer vervolgens Bewerken met > Bladeren om een editor te selecteren.
    • 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.

    Opmerking:

    Als u een afbeelding opent vanuit het paneel Bestanden, werken de integratiefuncties van Fireworks niet. Fireworks opent niet het oorspronkelijke PNG-bestand. Als u de integratiefuncties van Fireworks wilt gebruiken, moet u afbeeldingen openen vanuit het documentvenster.

    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.

Een externe afbeeldingseditor instellen voor een bestaand bestandstype

U kunt een afbeeldingseditor selecteren voor het openen en bewerken van grafische bestanden.

  1. Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:
    • Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Bestandstypen/editors in de lijst Categorie aan de linkerkant.
    • Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.
  2. Selecteer in de lijst Extensies de bestandsextensie waarvoor u een externe editor wilt instellen.
  3. Klik op de knop Toevoegen (+) boven de lijst Editors.
  4. Blader in het dialoogvenster Externe editor selecteren naar de toepassing die u als editor voor dit bestandstype wilt openen.

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

  6. Als u nog een editor voor dit bestandstype wilt instellen, herhaalt u stap 3 en 4.

    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.

Een nieuw bestandstype toevoegen aan de lijst Extensies

  1. Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:

    • Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Bestandstypen/editors in de lijst Categorie aan de linkerkant.
    • Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.
  2. 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.

  3. Typ de bestandsextensie van het bestandstype waarvoor u een editor wilt starten.
  4. Klik op de knop Toevoegen (+) boven de lijst Editors om een externe editor voor het bestandstype te selecteren.
  5. Selecteer in het dialoogvenster dat wordt weergegeven de toepassing die u wilt gebruiken voor het bewerken van dit afbeeldingstype.
  6. Klik op Primair maken als u van deze editor de primaire editor voor dit bestandstype wilt maken.

Een voorkeur voor een bestaande editor wijzigen

  1. Open het dialoogvenster met voorkeuren voor Bestandstypen/editors op een van de volgende manieren:

    • Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Bestandstypen/editors in de lijst Categorie aan de linkerkant.
    • Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors.
  2. Selecteer in de lijst Extensies in het dialoogvenster met voorkeuren voor Bestandstypen/editors het bestandstype dat u wilt wijzigen om de bestaande editor(s) weer te geven.

  3. Selecteer in de lijst Editors de editor die u wilt wijzigen en ga vervolgens op een van de volgende manieren te werk:
    • Klik op de knop Toevoegen (+) of Verwijderen (–) boven de lijst Editors om een editor toe te voegen of te verwijderen.
    • Klik op de knop Primair maken om te wijzigen welke editor standaard wordt geopend voor het bewerken.

Gedrag toepassen op afbeeldingen

U kunt elk beschikbare gedrag toepassen op een afbeelding of afbeeldingshotspot. Als u een gedrag toepast op een hotspot, wordt in Dreamweaver de HTML-broncode ingevoegd in de tag area. Drie soorten gedrag zijn specifiek van toepassing op afbeeldingen: Afbeeldingen vooraf laden, Afbeelding verwisselen en Omwisselen van afbeeldingen herstellen.

Afbeeldingen vooraf laden

Hiermee worden afbeeldingen die niet meteen op de pagina worden weergegeven (bijvoorbeeld afbeeldingen die worden verwisseld als gevolg van gedrag, AP-elementen of JavaScript), in het cachegeheugen van de browser geladen. Hiermee voorkomt u downloadvertragingen op het moment dat de nieuwe afbeeldingen moeten verschijnen.

Afbeelding verwisselen

Verwisselt een afbeelding door een andere door het SRC-kenmerk van de img-tag te wijzigen. Gebruik deze actie om knop-rollovers en andere afbeeldingseffecten te maken (inclusief het verwisselen van meerdere afbeeldingen tegelijk).

Omwisselen van afbeelding herstellen

Hiermee wordt de laatste set verwisselde afbeeldingen hersteld naar de voorgaande bronbestanden. Deze actie wordt standaard automatisch toegevoegd als u de actie Afbeelding verwisselen aan een object koppelt. U hoeft deze actie nooit handmatig te selecteren.

U kunt gedrag ook gebruiken om geavanceerdere navigatiesystemen te maken, zoals snelmenu's.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid