Volgen

Hoe voorzie ik afbeeldingen van kaderlijnen en nette tekstomloop?

Als u in WebGenerator ProSite CMS een afbeelding invoegt en deze links of rechts uitlijnt, zal de tekst eromheen lopen. Maar de kans is groot dat die tekst nogal dicht tegen de afbeelding aan staat en dat oogt niet zo netjes. Ook kan het soms wenselijk zijn een randje rond de afbeelding te zetten, bijvoorbeeld omdat delen van de afbeelding zo licht zijn dat ze een beetje “wegvallen” tegen de achtergrond kleur van de pagina.
 
Hieronder ziet u een voorbeeld van een ingevoegde, rechts uitgelijnde afbeelding, respectievelijk getoond in de teksteditor van het CMS en op de websitepagina zelf:
 
Weergave in de editor in het CMS...
 
0010-0010.jpg
 
Weergave op de websitepagina...
 
0010-0020.jpg
 
De weergave verschilt omdat de teksteditor altijd een vaste breedte heeft die niet per definitie overeenkomt met de breedte van de websitepagina, maar het is duidelijk te zien dat de tekst te dicht tegen de foto aan staat. Ook zou een kaderlijntje misschien mooier zijn, omdat het lichte strandzand bijna niet te onderscheiden is van de witte pagina-achtergrond.
 
Om dit te bereiken voert u de volgende stappen uit:
  1. Klik de afbeelding één keer aan zodat deze geselecteerd is: u ziet dat aan de kleine vierkantjes die verschijnen op de hoeken en in het midden van de zijkanten van de afbeelding.
  2. Klik op de optie "Stijlen & Opmaak" in de werkbalk van de teksteditor. Dit is het eerst icoontje in de bovenste werkbalk.
  3. Kies vervolgens de optie "Kader opmaak".
0010-0030.jpg
 
Er verschijnt nu een dialoogvenster waarmee u diverse eigenschappen van de afbeelding kunt beheren. Zie de afbeelding hieronder, gevolgd door een uitleg van de verschillende mogelijkheden:
 
 
0010-0040.jpg
 
  1. Randsoort
    U kunt verschillende soorten randen gebruiken (een doorlopende lijn, een stippellijn, een dubbele lijn, enz.). Let op: als u géén rand wilt gebruiken moet u dat ook specifiek aangeven met de bovenste optie 'Geen rand'.
  2. Randdikte
    Hier kunt u de dikte van de rand bepalen.
  3. Gehele of gedeeltelijke rand
    Hier kunt u bepalen of de rand om de hele afbeelding heen moet lopen, of op één of enkele zijden moet worden weergegeven.
  4. Kleur van de rand
    Hier bepaalt u de kleur van de rand
  5. Schaduw
    U kunt een 'schaduw' tussen de rand en de afbeelding aanbrengen. Let op: hiervoor dient u wel een 'opvulling' aan te geven, zie punt 7.
  6. Vrije ruimte
    Hiermee bepaalt u de afstand tussen de afbeelding en pagina-inhoud om de afbeelding heen. U kunt dit per zijde instellen. Hiermee kunt u dus tekst netjes (met een bepaalde afstand) om de afbeelding heen laten lopen.
  7. Opvulling
    Hiermee bepaalt u de afstand tussen de rand en de afbeelding. Let op: in de editor wordt deze afstand niet weergegeven. Bekijk daarom even de websitepagina zelf om het resultaat te beoordelen.
  8. Grootte
    Hiermee kunt u de grootte van de afbeelding aanpassen. Hierover een paar tips: 
  • Als u bij het invoegen van de afbeelding al een aangepaste grootte heeft aangegeven, dan moet u dat hier opnieuw doen.
  • Voer alleen een hoogte of een breedte in: de afbeelding blijft dan vanzelf in de juiste verhouding.
  • Het is niet aan te raden om afbeeldingen groter te maken dan hun originele formaat: dit leidt tot kwaliteitsverlies van de afbeelding.
  • Hoewel deze methode prima geschikt is om afbeeldingen enigszins te verkleinen, kunt u zeer grote (en zware) afbeeldingen beter verkleinen vóórdat u ze uploadt naar het CMS. Anders maakt u de afbeelding weliswaar kleiner, maar de afbeelding blijft zwaar. Dit zou kunnen leiden tot een langzame webpagina (zware afbeeldingen laden langzaam in).

Voorbeelden

Hieronder ziet u een aantal toegepaste voorbeelden. Bij alle getoonde voorbeelden geldt dat de afstand tussen tekst en afbeelding aan de linkerkant en onderkant is ingesteld op 15 pixels.
 
Een dunne donkergrijze kaderlijn...
 
0010-0050-a.jpg
 
Een dunne lichtgrijze kaderlijn, met een opvulling van 10 pixels tussen afbeelding en kaderlijn...
   
0010-0050-b.jpg
 
Een dikkere blauwe kaderlijn, met een opvulling van 10 pixels tussen kaderlijn en afbeelding, waarbinnen een lichtblauwe 'schaduw' is ingesteld...
 
0010-0050-c.jpg
 
Zoals u ziet: mogelijkheden te over. Door wat met de mogelijkheden te spelen ontdekt u vanzelf welke manier van omkadering het beste bij uw website past.
 
Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen