Afbeeldingen toevoegen aan uw website in Dreamweaver - dummies

Een afbeelding aan uw webpagina toevoegen lijkt in eerste instantie bijna magisch, omdat het proces zo eenvoudig is met Dreamweaver. De uitdaging met webafbeeldingen is niet om ze aan uw pagina's toe te voegen, maar om mooie afbeeldingen te maken die snel in de browser van uw kijker worden geladen.

U hebt een ander programma nodig, zoals Photoshop, Photoshop Elements of Fireworks, om afbeeldingen te maken, converteren, bewerken en optimaliseren. Als u optimaliseert, worden de bestandsgroottes kleiner, zodat uw afbeeldingen sneller worden gedownload. Dreamweaver biedt enkele standaardbewerkingsfuncties voor afbeeldingen, maar meestal gebruikt u Dreamweaver om afbeeldingen op uw pagina in te voegen en te positioneren.

Dreamweaver maakt het plaatsen van afbeeldingen op uw webpagina's eenvoudig en biedt meerdere manieren om dit te doen:

• Klik op het pictogram Afbeeldingen in het paneel Algemeen invoegen en selecteer vervolgens een afbeelding met het dialoogvenster Afbeelding invoegen.

• Klik en sleep in het paneel Bestanden een afbeeldingsnaam naar de pagina waar u de afbeelding wilt weergeven.

• Gebruik het menu Invoegen.

Als u geen web-geoptimaliseerde JPEG-, GIF- of PNG-afbeelding bij de hand hebt, kunt u gratis afbeeldingen downloaden die al zijn geoptimaliseerd.

Volg deze instructies om een ​​afbeelding op een webpagina te plaatsen via het menu Invoegen:

1. Open een bestaande pagina of maak en bewaar een nieuwe pagina.

2. Plaats uw cursor op de plaats waar u de afbeelding op de pagina wilt invoegen.

   U kunt afbeeldingen invoegen linksboven in een nieuw leeg bestand en u kunt afbeeldingen invoegen in tags en elementen in een webpagina, maar u kunt niet zomaar een afbeelding midden op een pagina plaatsen zonder aanvullende HTML te gebruiken tags of CSS-opmaak om het te positioneren.

3. Kies Invoegen → Afbeelding → Afbeelding.

   Het dialoogvenster Bron afbeelding selecteren wordt weergegeven.

4. Blader naar de afbeelding die u wilt invoegen.

   Afhankelijk van uw computersysteem kunt u een voorbeeld van afbeeldingen weergeven terwijl u ze op verschillende manieren invoegt. Hier zijn drie veelvoorkomende opties:

   • Kies op een pc met Windows XP Thumbnails in de vervolgkeuzelijst Beeldmenu rechts van het veld Zoeken in om miniaturenversies van alle afbeeldingen in een geopende map weer te geven. U kunt ook een enkel voorbeeld van een geselecteerde afbeelding helemaal rechts van het dialoogvenster bekijken.

   • Kies op een pc met Windows Vista of Windows 7 een pictogramoptie (Kleine pictogrammen, Mediumpictogrammen, Grote pictogrammen of Extra grote pictogrammen) in de vervolgkeuzelijst Beeldmenu rechts van de Look In veld om miniatuurversies van alle afbeeldingen in een geopende map weer te geven. U kunt ook een enkel voorbeeld van een geselecteerde afbeelding helemaal rechts van het dialoogvenster bekijken.

   • Kies op een Mac de optie Weergeven als kolommen in de linkerbovenhoek van het dialoogvenster. U kunt één voorbeeld van een geselecteerde afbeelding helemaal rechts van het dialoogvenster bekijken.

     

     Credit: Photos by Casey Stoll

5. Om de afbeelding in te voegen, dubbelklikt u op de naam van de afbeelding of klikt u eenmaal en vervolgens op OK.

   Als u een afbeelding in een pagina invoegt en de afbeelding niet wordt opgeslagen in uw lokale locatiemap, wordt u in Dreamweaver gevraagd om een ​​waarschuwingsvenster en kunt u de afbeelding naar uw lokale sitemap kopiëren. Veel ontwerpers maken een submap met de naam afbeeldingen in de lokale sitemap waar ze alle afbeeldingen op hun site opslaan, maar u kunt desgewenst afbeeldingen in meerdere submappen ordenen.

6. Selecteer de afbeelding op uw webpagina om afbeeldingseigenschappen te bekijken en te bewerken.

   Afbeeldingsopties worden automatisch weergegeven in de eigenschappencontrole onder aan de pagina wanneer een afbeelding is geselecteerd.

   

   Krediet: foto door Casey Stoll

Wanneer u een afbeeldingsbestand op een pagina invoegt, voegt u niet echt een kopie van de afbeelding aan de pagina toe; u maakt een verwijzing naar de afbeelding. De onderliggende code lijkt veel op de code voor een link van de ene pagina naar de andere.

Zowel afbeeldingsreferenties als koppelingen bevatten de naam van het bestand en het pad van de pagina naar dat bestand. In wezen maakt u een instructie voor een webbrowser om de afbeelding te vinden wanneer deze de pagina weergeeft.

Als u een afbeelding op uw webpagina wilt weergeven, moet u zowel de pagina als de afbeelding uploaden wanneer u uw website publiceert. Als uw afbeeldingsbestanden en de pagina's die naar die bestanden verwijzen zich niet op dezelfde relatieve locatie op uw harde schijf bevinden als op uw webserver, verbreekt u de verwijzing naar uw afbeeldingen en verschijnt er een lelijk afbeeldingpictogram voor Broken Image op uw pagina.

De beste manier om ervoor te zorgen dat uw afbeeldingen en bestanden blijven waar ze horen ten opzichte van elkaar, is door Dreamweaver ze voor u te laten volgen. Daarom is het zo belangrijk om het installatieproces van de site te voltooien en ervoor te zorgen dat u nooit een afbeelding verplaatst of hernoemt, behalve in het paneel Bestanden.