Werken met afbeeldingen.
Doelstelling van deze Steples
- Een beschrijving geven van alle in Sitestepper ingebouwde functies die het gebruiken en importeren van afbeeldingen vergemakkelijken.
Steplessen die best gevolgd zijn vooraleer deze Steples te starten
Voorkennis
Logische vervolg
- .
Foto's en afbeeldingen zijn belangrijk voor...
... het opfleuren en verduidelijken van de website
'A picture says a thousand words'...
Een Engelse uitdrukking die zeker voor websites meer dan ooit van toepassing is.
Een bezoeker van een website enkel tekst aanbieden is hem wegjagen. Door de tekst af te wisselen met afbeeldingen of foto's fleurt u niet alleen de website op, maar maakt u ook dat uw bezoeker zijn aandacht langer op de pagina zal richten.
Als u dus wenst dat uw site wordt bezocht en gelezen, dan kan u best:
- Uw tekst afwisselen met afbeeldingen.
- Indien u verschillende afbeeldingen op een pagina plaatst, zorgen dat deze eenvormig zijn qua afmetingen en scherpte.
... het gevonden worden door zoek-engines
Ook zoek-engines (zoals Google, Yahoo en MSN) vinden de namen van afbeeldingen uitermate belangrijk. Elke zoek-engine heeft immers wel de mogelijkheid om te zoeken naar afbeeldingen. En vermits zoek-engines voor afbeeldingen niets anders hebben dan de bestandsnaam van de afbeelding om te gebruiken als de 'te onderzoeken tekst', is de manier hoe de afbeeldingen worden benoemd om de website van het grootste belang.
Als u dus wenst dat uw site wordt gevonden door zoek-engines, dan kan u best:
- Er voor zorgen dat u ook afbeeldingen op uw website hebt staan.
- Dat deze afbeeldingen een betekenisvolle naam hebben, zodanig dat zoek-engines deze naam kunnen opnemen in hun zoek-database.
Foto's en afbeeldingen in Sitestepper
Tijdens de ontwikkeling van Sitestepper is speciale aandacht gegaan om het importeren en werken met afbeeldingen gemakkelijk en snel te maken, en zijn verschillende zaken ingebouwd om bovenstaande punten te implementeren.
Afbeeldingen en html
Om een afbeelding toe te voegen aan een webpagina, dient de html-tag <IMG> te worden gebruikt.
Door middel van verschillende parameters van deze tag kan worden gespecificeerd:
- welke afbeelding dient te worden getoond (de naam van de afbeelding)
- de hoogte van de te tonen afbeeldingen
- de breedte van de te tonen afbeeldingen
- de alignering van de afbeelding ten opzichte van de omliggende tekst
- een alternatieve tekst
Deze alternatieve tekst was oorspronkelijk bedoeld om te worden getoond in de plaats van de afbeelding indien een webbrowser werd gebruikt die geen afbeeldingen kon laten zien, of indien de gebruiker zijn webbrowser zo had ingesteld dat afbeeldingen niet werden getoond.
Met de huidige generatie van webbrowsers is deze oorspronkelijke bedoeling achterhaald want het is bijna ondenkbaar dat afbeeldingen niet meer worden getoond. De alternatieve tekst wordt dan ook in de huidige browsers gebruikt als popup-tekst indien de muis zich over een afbeelding bevindt.
Wat nog wel een zeer belangrijk doel van de alternatieve tekst is, is wanneer de site wordt bezocht door slechtziende of blinden. Indien deze bezoekers beschikken over apparatuur die de bezochte webpagina voorleest, dan zal de alternatieve tekst worden voorgelezen. Een correcte, duidelijke en beschrijven de alternatieve tekst is en blijft dus voor deze categorie van bezoekers een onmisbare bron van informatie. - of een kader rond de afbeelding dient te worden getoond
Buiden de naam van de afbeelding zijn alle verdere parameters optioneel.
<html> <body> <img src='{#ImageRoot}/companylogo.jpg' width="200" align='right'> <h1>Web site of eerste-website</h1> Wij zijn blij U te mogen verwelkomen op de website van <b>eerste-website</b>. </body> </html>HTMLcode 20: Voorbeeld gebruik van de HTML-tag <IMG>
Voorgaande html-voorbeeldcode zal:
- De afbeelding aangeduid met de src='' parameter tonen.
- De afbeelding met naam: companylogo.jpg tonen.
- De afbeelding zoeken in de folder {#ImageRoot} (een Project-stepvars (folders en URL's) op pagina 73 voor een volledig overzicht van alle project-StepVars).
- De afbeelding tonen met een breedte van 20 pixels width="200". Vermits geen expliciete hoogte is opgegeven, zal de webbrowser de hoogte zelf invullen op een dusdanig manier dat de breedte/hoogte verhouding van de originele foto behouden blijft.
- De afbeelding rechts aligneren ten opzicht van de omringende tekst (align='right'). Tekst die de <img>-tag volgt wordt links naast de afbeelding getoond, tot op het moment dat de volledige hoogte van de afbeelding bereikt is, waarna de tekst ook onder de foto zal worden getoond.
Opmerking:
- De getoonde <IMG-lijn> toont aan dat parameters tussen de start van de html-tag en de sluit '>' moeten worden geplaatst, gescheiden dienen te worden door minstens één spatie en een waarde ontvangen die kan worden geplaatst tussen enkele quote-karakters (') of dubbele quote-karakters ("), zolang dat de waarde van elke parameter maar wordt afgesloten met hetzelfde karakter (') of (") waarmee de waarde werd begonnen..
De voorbeeldcode zal de volgende pagina pagina weergeven:
De afbeelding is rechts op de pagina geplaatst. De volgende tekstlijnen worden links van de afbeelding getoond.
Een afbeelding importeren in 2 klikken !
Afbeelding toevoegen gebeurt, net zoals het invoeren van de teksten, in het StepEdit-programma.
Er kan worden gekozen om:
- Een nieuwe afbeelding op te nemen in het Sitestepper-project door deze te importeren. StepEdit zal automatisch de afbeelding kopiëren vanaf de harde schijf, de memory-kaart (bijvoorbeeld van een elektronische camera), het geheugen of de scanner naar het actieve project, waarna de correcte syntax wordt toegevoegd aan de webpagina om de geïmporteerde afbeelding te tonen.
- Een bestaande afbeelding (die bijvoorbeeld al gebruikt is op een andere webpagina en dus al bestaat binnen het actieve project) te hergebruiken op de huidige pagina. De afbeelding zal, natuurlijk, niet opnieuw worden geïmporteerd: enkel de correcte syntax zal worden toegevoegd aan de webpagina om deze afbeelding te tonen.
Een afbeelding geïmporteerd in 2 klikken
Nadat de menu-optie: 'Invoegen – Afbeelding invoegen... – Importeer afbeelding...' gekozen is, is een afbeelding toegevoegd aan de website in slechts 2 klikken (de klikken om een afbeeldingen terug te vinden op de harde schijf natuurlijk niet meegerekend).
Als voorbeeld zullen we enkele foto's bijvoegen over de pagina van de voorbeeldsite die de reizen uitgevoerd in 2005 beschrijven.
De volgende html-tekst:
<html> <body> <h1>Vakantiefoto's 2005</h1> Wij zijn fier u foto's te kunnen laten zien van onze reizen die we hebben gedaan in 2005.<br> </body> </html>HTMLcode 21: Html-code zonder ingevoerdeafbeeldingen
Levert de volgende pagina op:
De stappen om een afbeelding te importeren in 2 klikken !
- Kies de menu-optie: 'Invoegen – Afbeelding invoegen... – Importeer afbeelding...'.
- Een standaard-open-dialoogvenster zal worden getoond waarin naar de folder kan worden genevigeerd waar de te importeren afbeeldingen aanwezig zijn op op de PC.
-
Selecteer één van de foto's en klik op 'Open' (dit is de eerste klik). Het import-scherm van Sitestepper zal worden getoond.
>Klik op 'Importeer' om de afbeelding te
importeren in het Sitestepperproject (dit is de tweede klik).
Resultaat van de twee klikken
De (slechts) twee klik-acties leveren de volgende html-code op:
<HTML> <BODY> <h1>Vakantiefoto's 2005</h1> Wij zijn fier u foto's te kunnen laten zien van onze reizen die we hebben gedaan in 2005.<br> <img src='{#ImageRoot}/kasteeltuinen-in-arcen.jpg' border= '0' width='200' height='150' alt='kasteeltuinen-in-arcen'> </BODY> </HTML>HTMLcode 22: Html-code na het importeren van de eerste afbeelding
En dit levert de volgende webpagina op:
Handelingen uitgevoerd door Sitestepper bij het importeren van afbeeldingen
De zonet uitgevoerde manuele handelingen hebben:
- Sitestepper de geselecteerde afbeelding laten inlezen vanaf harde schijf in het geheugen van de PC.
- Sitestepper de geselecteerde
formaatdefinitie laten opzoeken (een formaatdefinitie is één
van de acht instelbare galerijen die kunnen worden ingesteld in de
projectparameters).
Hierin was te zien dat de afbeelding 3x diende geïmporteerd te worden (met 3 verschillende afmetingen).
Een volledige beschrijving van de galerijen, waarom zij worden gebruikt en waarom zij zo handig zijn volgt later. - Sitestepper de geïmporteerde afbeelding 3x laten verkleinen.
- Sitestepper elke verkleinde afbeelding laten wegschrijven in het actieve project.
- Sitestepper de correct html-syntax laten
bijvoegen om de eerste van de 3 afbeeldingen te tonen op de
webpagina.
De originele naam van de afbeelding is behouden en is zowel gebruikt als naam van de drie afbeeldingen als de tekst die is gebruikt voor de alt='..'-parameter van de <img html tag. - Als zesde punt kan Sitestepper de originele afbeelding gekopieerd hebben naar een ingestelde folder (zodanig dat nadien alle originele – en dus niet verkleinde - afbeeldingen bij elkaar staan). Dit is een instelling van de projectparameters.
Deze handelingen worden automatisch uitgevoerd telkens een afbeelding wordt geïmporteerd.
Benoemen van de delen van het importscherm
De 12 verschillende schermdelen van het scherm: afbeelding importereren worden in de volgende tabel benoemd:
|
# |
Benaming |
Doel |
|---|---|---|
|
1 |
Bronvermelding |
Dit veld toont:
|
|
2 |
Importknoppen |
Knoppen waarmee de importactie vanaf harde schijf, klembord of scanner kan worden gestart. |
|
3 |
Naam ('Importeer als') |
Veld waarin de naam van de afbeelding kan worden ingevoerd. De ingevoerde naam zal de bestandsnaam zijn waaronder de afbeelding wordt geïmporteerd in het Sitestepperproject. |
|
4 |
Afbeeldingfolder |
Foldernaam waar de afbeelding zal worden naartoe gekopieerd bij het importeren. |
|
5 |
Galerij |
Selectie welke galerij (en dus welke importformaten) zullen worden gebruikt bij het importeren van de afbeeldingen. |
|
6 |
Bronafbeelding |
Originele afbeelding zoals deze is ingelezen
vanaf harde schijf, klemboard of scanner. |
|
7 |
Voorbeeldafbeelding (preview) |
Voorbeeldafbeelding van de bronafbeelding zoals deze zal geïmporteerd in het Sitestepperproject, verkleind en geoptimaliseerd met de parameters van de gekozen galerij en van het gekozen formaat. Opmerking: Bovenaan de voorbeeldafbeelding is de grootte én de hoogte en de breedte van de getoond afbeelding af te lezen. De grootte van de afbeelding wordt weergegeven zowel in bytes als k Kb. |
|
8 |
Formaatselectie |
Selectietabs om één van de drie
formaten van de gekozen galerij te selecteren. |
|
9 |
Knoppenbalk grafisch manipulaties |
Bevat knoppen om enkele grafische manipulaties uit te voeren op de bronafbeelding (en dus indirect ook op de voorbeeldafbeelding vermits deze telkens wordt ververst startende vanaf de bronafbeelding). |
|
10 |
Projectparameters-afbeeldingen |
Weergave van de projectparameters voor de afbeeldingen ingesteld via de knop 'Formaten'. |
|
11 |
Afbeeldingparameters |
Weergave van de parameters die zullen worden gebruikt om in het gekozen formaat en de geselecteerde galerij vanaf de bronafbeelding, de voorbeeldafbeelding te creëren. |
|
12 |
Actieknoppen |
Knoppen die de importactie starten of het importeren annuleren. |
Tabel 9: Schermdelen: Afbeelding importeren
Naam van de afbeelding veranderen tijdens het importeren
Sitestepper laat toe om de naam van de afbeelding te veranderen tijdens in het import-scherm.
Betekenisvolle namen gebruiken is goed voor:
- Zoekengines die de verschillende woorden van een afbeelding kunnen gebruiken als zoektermen.
- De alt-parameter van een <img-html tag
(die door veel webbrowsers als gele popup-teksten worden getoond.
Ter info: De oorspronkelijke bedoeling van de alt-parameter is het tonen van een beschrijvende tekst voor browsers die geen afbeeldingen laten zien (of bij browsers waarbij de gebruiker heeft ingesteld dat geen afbeeldingen dienen getoond te worden). Onder impuls van Microsoft Internet Explorer is de alt-parameters tegenwoordig ook gebruikt als tekst in een (geel) popup-venstertje.
De naam van de afbeelding veranderen is nodig indien:
- De in te lezen naam nietszeggend is – als voorbeeld denken we hier aan de nummering van de afbeeldingen die door veel elektronische camera's worden gebruikt. Veel van deze afbeeldingen nummeren de afbeeldingen.
- De afbeelding wordt geïmporteerd vanuit het klembord.
- De afbeelding wordt ingescand vanaf een aangesloten scanner.
- De naam van de afbeelding de lading niet dekt en het best wordt veranderd.
Hoe de naam van een afbeelding veranderen tijdens het importeren
De naam van een afbeelding kan zeer simpel worden veranderd in het import-scherm door het invullen van de te gebruiken naam in het 'Importeer als:'-veld.
Kies de menuoptie: 'Invoegen – Afbeelding invoegen... – Importeer afbeelding...', gebruik de sneltoets 'Ctrl-Alt-M'. of kies de volgende knop uit de knoppenbalk om het importeren te starten.
-
De laatst gekozen folder zal worden getoond: -
Selecteer één van de getoonde bestanden en kies 'Open'. - Deze keer is de gekozen bestandsnaam minder duidelijk en is het dan ook wenselijk de geïmporteerde afbeelding een meer betekenisvolle naam te geven.
- De waarde in het 'Importeer als' is automatisch opgevuld met de naam van de originele afbeelding.
-
In dit veld kan een nieuwe naam worden ingevoerd, dewelke dan zal worden gebruikt als bestandsnaam van de afbeelding binnen het Sitestepperproject en als waarde voor de Alt-parameters van de <IMG-html code. -
Kies 'Importeer'.
Dit geeft het volgende resultaat in de html-code:
<HTML> <BODY> <h1>Vakantiefoto's 2005</h1> Wij zijn fier u foto's te kunnen laten zien van onze reizen die we hebben gedaan in 2005. <br> <img src='{#ImageRoot}/kasteeltuinen-in-arcen.jpg' border= '0' width='200' height='150' alt='kasteeltuinen-in-arcen'> <img src='{#ImageRoot}/binnenhof-den-haag.jpg' border= '0' width='200' height='150' alt='binnenhof-den-haag'> </BODY> </HTML>HTMLcode 23: Resultaat na importeren van een afbeelding met gewijzigde bestandsnaam
Merk op dat:
- Sitestepper weer alle handelingen heeft uitgevoerd zoals beschreven in Handelingen uitgevoerd door Sitestepper bij het importeren van afbeeldingen op pagina 112, met die veranderingen dat nu tijdens het kopiëren de bestandsnaam gewijzigd is.
- De originele foto blijft bestaan met, uiteraard, de originele bestandsnaam.
- Alle ingevoerde spaties in het 'Importeer
als'-veld automatisch worden vervangen door een '-'-teken.
Net zoals bij namen van de webpagina's, is het aan te raden om zo weinig mogelijk spaties te gebruiken. Sitestepper zal dan ook automatisch elke ingevoerde spatie vervangen door een '-'-teken. Dit geeft geen problemen voor zoek-engines zoals Google, Yahoo en Msn, vermits deze allemaal het '-'-teken aanzien als een woordscheiding, maakt de naam van de afbeelding evengoed leesbaar en voorkomt dat later ergens een spatie op een foutieve manier zou kunnen geïnterpreteerd worden door de browser-software. - De folder waarvan de foto wordt geïmporteerd zichtbaar is in het import-scherm.
Een afbeelding importeren vanuit het klembord
Sitestepper bevat in de huidige versie slechts een beperkt aantal grafische manipulaties die mogelijk zijn tijdens het importeren van een afbeelding.
Soms kan het dan ook nodig zijn afbeeldingen te bewerken in een tekenpakket zoals CorelPaint, Paint-Shop-Pro of Adobe Photoshop, om deze dan, nadien, via het klembord te importeren in het Sitestepperproject.
Of er wordt een afbeelding gevonden op het internet dewelke u wenst te gebruiken op uw eigen webpagina15.
Een logo importeren vanaf een website
- Zoek de logo op die u wenst te importeren. Vermits de volgende foto de we wensen te importeren op onze website een foto is van een vakantie in de stad Hasselt, bezoeken we de website van Hasselt om te zien of we een logo kunnen vinden.
-
Rechts-klik op het gevonden logo en kies: Copy of 'Kopieer' om de gevonden afbeelding (het gevonden logo) te kopiëren naar het klembord.
- Kies de menuoptie: 'Invoegen – Afbeelding invoegen... – Importeer afbeelding...', gebruik de sneltoets 'Ctrl-Alt-M'. of kies de volgende knop uit de knoppenbalk om het importeren te starten.
- Het dialoogscherm voor het selecteren van een afbeelding vanaf harde schijf verschijnt. Druk op 'Esc' (of klik op 'Annuleer' of 'Cancel') om dit venster te sluiten zonder een afbeelding te selecteren (vermits we in deze handeling geen afbeelding wensen te importeren vanaf de harde schijf).
- Een leeg scherm 'Importeer afbeelding' wordt getoond.
- Klik op het 'Importeer vanaf klembord' icoontje (de Ctrl-V toets kan hier ook worden gebruikt om dezelfde actie uit te voeren).
-
Het 'Importeer afbeelding' scherm zal de afbeelding die zich op het klembord bevindt, importeren in het scherm en deze een standaard naam geven. -
De standaard naam die wordt voorgesteld is in de vorm 'img_<nummer>', waarbij <nummer> wordt ingevuld met het eerste nummer van de afbeelding die zich nog niet in het Sitestepperproject bevindt. - Wijzig deze standaard voorgestelde naam in
iets meer logisch (zoals logo-stad-hasselt) en kies 'Importeer'.
De html-code ziet er nu zo uit:
<html> <body> <h1>Vakantiefoto's 2005</h1> Wij zijn fier u foto's te kunnen laten zien van onze reizen die we hebben gedaan in 2005.<br> <img src='{#ImageRoot}/kasteeltuinen-in-arcen.jpg' border= '0' width='200' height='150' alt='kasteeltuinen-in-arcen'> <img src='{#ImageRoot}/binnenhof-den-haag.jpg' border= '0' width='200' height='150' alt='binnenhof-den-haag'> <h2>In Hasselt</h2> <img src='{#ImageRoot}/logo-stad-hasselt.jpg' border= '0' width='145' height='84' alt='logo-stad-hasselt'> </body> </html>HTMLcode 24: <img na importeren van een afbeelding vanaf het klembord
- Zodra de afbeelding geïmporteerd is in het Sitestepperproject is dit een afbeelding geworden net als de afbeeldingen die vanaf de harde schrijf worden geïmporteerd.
Een afbeelding importeren vanaf de scanner
Op een gelijkaardige manier als het importeren vanaf het klembord, kunnen ook afbeelding worden geïmporteerd door deze in te scannen.
- Kies de menuoptie: 'Invoegen – Afbeelding invoegen... – Importeer afbeelding...', gebruik de sneltoets 'Ctrl-Alt-M'. of kies de volgende knop uit de knoppenbalk om het importeren te starten.
- Het dialoogscherm voor het selecteren van een afbeelding vanaf harde schijf verschijnt. Druk op 'Esc' (of klik op 'Annuleer' of 'Cancel') om dit venster te sluiten zonder een afbeelding te selecteren (vermits we in deze handeling geen afbeelding wensen te importeren vanaf de harde schijf).
- Een leeg scherm 'Importeer afbeelding' wordt getoond.
- Klik op de 'Importeer vanaf scanner' icoon.
-
De geïnstalleerde scannersoftware wordt opgestart16. -
Selecteer de afbeelding diegeïmporteerd dient te worden en klik op 'Scan'. - Tip:zet de importresolutie zo hoog mogelijk: hoe groter het origineel bestand, hoe beter Sitestepper de afbeelding kan verkleinen en optimaliseren naar het gekozen formaat toe.
-
De standaard naam die wordt voorgesteld is in de vorm 'scan_<nummer>', waarbij <nummer> wordt ingevuld met het eerste nummer van de afbeelding die zich nog niet in het Sitestepperproject bevindt - Wijzig deze standaard voorgestelde naam in
iets meer logisch (zoals stadsplan historische wandeling
stad-hasselt) en kies 'Importeer'.
De html-code ziet er nu zo uit:
<html> <body> <h1>Vakantiefoto's 2005</h1> Wij zijn fier u foto's te kunnen laten zien van onze reizen die we hebben gedaan in 2005. <br> <img src='{#ImageRoot}/kasteeltuinen-in-arcen.jpg' border= '0' width='200' height='150' alt='kasteeltuinen-in-arcen'> <img src='{#ImageRoot}/binnenhof-den-haag.jpg' border= '0' width='200' height='150' alt='binnenhof-den-haag'> <h2>In Hasselt</h2> <img src='{#ImageRoot}/logo-stad-hasselt.jpg' border= '0' width='145' height='84' alt='logo-stad-hasselt'> <img src='{#ImageRoot}/stadsplan-historische-wandeling-stad-hasselt.jpg' border= '0' width='200' height='176' alt='stadsplan-historische-wandeling-stad-hasselt'> </body> </html>HTMLcode 25: <IMG na importeren afbeelding vanaf de scanner
Het resultaat
Het importeren van enkele afbeeldingen, van een logo en van een stadsplannetje ingescand vanaf de scanner, levert het volgende resultaat op:
Grafische manipulaties uit te voeren tijdens het importeren
Sitestepper bevat een klein aantal opties om grafische manipulaties uit te voeren in het importscherm.
Deze manipulaties worden uitgevoerd op de bronafbeelding nadat deze is ingeladen in het importscherm. De originele afbeelding (in het geval van importeren vanaf de harde schijf) wordt nooit veranderd.
De bronafbeelding is de afbeelding die door Sitestepper zal worden gebruikt om te verkleinen bij het importeren. De bronafbeelding wordt links getoond in het importscherm.
De grafische manipulaties worden gestart door het aanklikken van knoppen die zich onder de bronafbeelding bevinden.
De afbeelding kan:
- Geroteerd worden: in stappen van 90º en dit zowel naar links als naar rechts.
- Op ware grootte worden getoond (nadat de afbeelding vergroot of verkleind is weergegeven).
- Gesneden worden (of in het Engels: het uitvoeren van een crop-actie).
Een afbeelding roteren
Sommige afbeelding (zeker afbeeldingen die worden geïmporteerd vanaf de harde schijf of electronische camera) hebben niet de juiste richting om op een webpagina getoond te worden. Deze dienen geroteerd te worden vooraleer deze kunnen worde geïmporteerd.
- Nadat de afbeelding geïmporteerd is,
kan door middel van de twee knoppen (
)
de afbeelding worden geroteerd in stappen van 90º).
- Afbeelding 69 toont een foto van een kerk in Hasselt die 90 º geroteerd dient te worden vooraleer deze kan worden geïmporteerd.
- Na het roteren wordt zowel de bronafbeelding (links op het scherm) als de voorbeeldafbeelding (rechts op het scherm) geroteerd17.
De afbeeldingen tonen op ware grootte.
De weergave van zowel de bronafbeelding als de voorbeeldafbeelding kan worden verkleind of vergroot worden weergegeven.
Indien
de muispointer zich over één van de afbeeldingen
bevindt, kan het scroll-wieltje (dat zich op de meeste muizen tussen
beide knoppen bevindt), worden gebruikt om de weergave van de
afbeeldingen te vergroten of te verkleinen.
De weergave van de afbeelding zal worden veranderd zonder de originele afbeelding te veranderen, met andere woorden, enkel de weergave van de afbeelding zoals deze wordt getoond in het scherm, wordt aangepast.
Dit is vooral handig bij het importeren van grote afbeeldingen.
Vermits Sitestepper d optimalisatie van de te importeren afbeeldingen het best kan uitvoeren indien de bronafbeelding zo groot mogelijk is, is het aan te raden steeds de grootst mogelijke afbeelding te selecteren bij de importactie (aangenomen dat er keuze is uit verschillende formaten).
Teneinde de (grote) afbeelding toch (in zijn geheel) te kunnen tonen in het importscherm, kan het scroll-wieltje worden gebruikt om de getoonde weergave te verkleinen.
Beide afbeeldingen worden synchroon vergroot of verkleind. Als de bronafbeelding aan 50% wordt getoond (met andere woorden, indien deze verkleind wordt weergegeven), dan wordt de voorbeeldafbeelding ook aan 50% getoond.
De 
-knop
zal zowel de bronafbeelding als de voorbeeldafbeelding terug op ware
grootte tonen, dus in de grootte net na het importeren.
Opmerkingen:
- De muispointer zal veranderen in een
kruisvorm zodra de muis zich over één van de twee
afbeeldingen bevindt (
). Het verkleinen of vergroten van de weergave kan dan worden
uitgevoerd. - De sneltoets Ctrl-1 kan eveneens worden gebruikt om de afbeeldingen terug op ware grootte te tonen.
Een afbeelding uitsnijden (croppen)
Een geïmporteerde afbeelding kan worden uitgesneden of gecropt vooraleer deze wordt geïmporteerd.
Met uitsneden of croppen wordt bedoeld dat een deel van de afbeelding wordt geselecteerd, waarna, na de cropactie, enkel het geselecteerde deel van de foto wordt behouden.
Een uitsnij- of cropactie wordt gekozen, indien:
- de originele afbeelding langs de zijkant storende elementen bevat die door middel van de crop-actie kunnen worden verwijderd
- de originele afbeelding een deel bevat dat afzonderlijk dient te worden geïmporteerd
Vermits Sitestepper, voor het tonen van voorbeeldafbeelding, steeds bronafbeelding als startpunt neemt, en de cropactie op de bronafbeelding wordt uitgevoerd, zal de voorbeeldafbeelding, na de cropactie, de gecropte afbeelding bevatten (zoals steeds verkleind en geoptimaliseerd volgens de parameters van het gekozen formaat en de geselecteerde galerij).
- Zodra de afbeelding, na het importeren (vanaf harde schijf, klembord of scanner) is ingelezen, kan door middel van de muistoets, in de bronafbeelding, een deel van de fotowordt geselecteerd.
- Plaats de muis over de bronafbeelding.
- Druk de normale muistoets18 in (dezelfde als waarmee knoppen en menuselecties worden aangeklikt).
- Sleep de muispointer over de foto.
- Een deel van de voorbeeldfoto zal worden omkaderd door een selectiekader.
-
Na het loslaten van de muistoets blijft het selectiekader zichtbaar en kan dit, eventueel, worden vergroot of verkleind door de muispointer over één van de witte selectiepunten te plaatsen, en dit te verslepen in één van de mogelijke richtingen (de 4 hoekpunten kunnen zowel horizontaal als verticaal worden verplaatst, de 2 punten op de bovenste en onderste lijn van het selectiekader, kunnen enkel verticaal worden verplaatst en de 2 punten op de linkse en rechtse lijn van het selectiekader kunnen enkel horizontaal worden verplaatst. - Na het kiezen van de 'Crop'-actie zal de bronafbeelding worden versneden zodanig dat enkel het geselecteerde deel overblijft. Op dat moment wordt ook de voorbeeldafbeelding aangepast, en zal deze de gecropte afbeelding tonen ( zoals steeds verkleind en geoptimaliseerd volgens de parameters van het gekozen formaat en de geselecteerde galerij).
-
Bij het importeren zal nu de gecropte foto geïmporteerd worden (en dus op de webpagina).
De galerijen
De kracht van Sitestepper, wat betreft het plaatsen van afbeeldingen op de website, ligt in het feit dat verschillende formaten kunnen worden ingesteld per type afbeelding die dient te worden geïmporteerd op de website.
Gelijkaardige afbeeldingen die een verschillende onderwerp tonen, kunnen op deze manier andere afmetingen toegewezen krijgen bij het importeren van de afbeeldingen.
Zo kan men, bijvoorbeeld, één formaat kiezen voor vakantiefoto's (dewelke redelijk groot op de website worden getoond), een ander formaat voor de verzameling van boeken (allemaal even hoog, maar initieel iets kleiner op het scherm getoond), en nog een ander formaat voor de webpagina met de logo's van alle voetbalclubs, wandelclubs of en dergelijke (allemaal even breed omdat deze onder elkaar op een webpagina zullen worden getoond).
Formaatdefinitie
Deze formaatdefinities – in Sitesteppertermen galerijen genoemd – zetten:
- de standaardmaten die moeten worden gebruikt bij het bewaren van de afbeelding (hoogte en/of breedte)
- de kwaliteit in die dient te worden gebruikt bij het importeren van afbeeldingen in het Sitestepperproject
- de naam van de te importeren afbeelding (in aanvulling van de naam die wordt gekozen bij het importeren van de afbeelding – zie Naam van de afbeelding veranderen tijdens het importeren op pagina 115)
- een optionele tekst die automatisch door Sitestepper op de afbeelding wordt geplaatst bij het importeren van de afbeelding (bvb een copyright-tekst).
Per galerij dient minstens één formaat te worden gedefinieerd en kunnen tot drie formaten worden ingesteld.
Bij het importeren van de afbeelding zal Sitestepper automatisch de afbeelding importeren in evenveel formaten zoals ingesteld. Elke afbeelding zal worden geresized rekening houdend met de ingestelde breedte en/of hoogte en zal automatisch worden bewaard in de ingestelde kwaliteit (zie Handelingen uitgevoerd door Sitestepper bij het importeren van afbeeldingen op pagina 112 voor een meer volledige beschrijving).
Keuze van één van de aanwezige galerijen
In het importscherm kan één van de ingestelde galerijen worden gekozen door één van de knoppen in de galerij aan te klikken.
Opmerkingen:
- Er kan steeds slechts één galerij actief zijn.
- De actieve galerij worden aangeduidt met een blauw driehoekje:
Na het aanklikken van de één van de 8 galerijen, worden de formaatdefinities van de aangeklikte galerij geladen, en wordt de voorbeeldafbeelding getoond, geoptimaliseerd volgens deze nieuwe definities.- De laatst gekozen galerij wordt bewaard na het importeren van de afbeelding (zodanig dat zeer snel een reeks gelijkaardige afbeeldingen kunnen worden geïmporteerd).
Eén van de drie formaten van een galerij selecteren
Elke galerij kan tot drie formaatdefinities gevatten.
Door middel van de tabs in de formaatselectie, kan één van de formaatdefinities worden geselecteerd, waarna de voorbeeldafbeelding wordt getoond in de voorbeeldafbeelding.
Tot drie formaten kunnen worden ingesteld per galerij.
Er zullen evenveel afbeeldingen worden geïmporteerd als er formaten zijn ingesteld: indien slechts één formaat werd ingesteld, dan zal slechts één afbeelding worden geïmporteerd, zijn twee gedefinieerd, dan zullen, automatisch, twee afbeeldingen worden geïmporteerd. Zijn alle drie de formaten ingevoerd, dan zullen, automatisch, drie formaten worden geïmporteerd.
Door middel van de driehoekjes die worden getoond in de tabs van de formaatselectie, wordt aangeduid welke formaten effectief zullen worden geïmporteerd: een vol driehoekje geeft aan dat deze afbeelding zal worden aangemaakt, een hol driehoekje geeft aan dat deze afbeelding niet zal worden geïmporteerd (al kan deze wel worden geselecteerd om een voorbeeldafbeelding te tonen in het importscherm).
Ter info:
- Sitestepper zal steeds het eerst
gedefinieerde formaat importeren naar de website toe. Met andere
woorden: het is de afbeelding die wordt getoond indien de
'1-Import' tab actief is, die effectief op de webpagina zal worden
geplaatst.
Indien één van de twee andere tabs ('2-Extra' of '3-Extra') actief zijn bij het klikken van de 'Importeer'-knop, dan zal een waarschuwing worden getoond om de gebruiker ervan te verwittigen dat niet de voorbeeldafbeelding die op dat moment wordt getoond, zal worden gebruikt op de webpagina, maar de voorbeeldafbeelding met de formaatdefinities van tab '1-Import'.
Afbeeldingparameters
De velden in de afbeeldingparameters zullen steeds de waardes tonen die Sitestepper heeft gebruikt om de voorbeeldafbeelding te genereren.
De velden zijn inactief vermits de waardes dienen ingesteld te worden door middel van de 'Zet formaten'-knop.
Vaste galerijen
Sitestepper laat toe tot 8 vaste galerijen te definiëren.
De definities van deze vaste galerijen worden ingesteld in de projectparameters (met andere woorden: deze zijn dus verbonden met het Sitestepperproject en zullen worden gebruikt voor elke buildtarget die wordt gebruikt om een website te builden).
Door de vaste galerijen correct te definiëren wordt zeer gemakkelijk een eenduidigheid van afbeeldingen op de website bekomen die met andere pakketten onmogelijk te bereiken is of die van de gebruiker een manuele interventie vereist.
Opmerkingen:
- Op vele websites zullen enkele van de formaatdefinities worden ingesteld door diegene die de grafische layout van de website heeft bepaald.
- De effectieve gebruiker van Sitestepper – diegene de website zal aanpassen – dient enkel de correcte galerij te selecteren bij het importeren van afbeeldingen om de afbeeldingen te importeren, zonder zich druk te hoeven over de correcte formaten.
Vrije galerij
Het is aan te raden steeds één van de acht vaste galerijen te gebruiken om afbeeldingen te definiëren. Dit zal een eenduidigheid van afbeeldingen tonen op de website die, naast heel eenvoudig te gebruiken, ook zeer professioneel overkomt.
Een negende galerij kan worden gebruikt indien bij het importeren van een afbeelding wordt ontdekt dat één van de 8 vaste galerijen niet voldoen.
De parameters van deze negende – vrije – galerij, worden niet gedefinieerd in de projectparameters maar kunnen worden ingesteld in het importscherm zelf door de galerijknop: 'Vrij' aan te klikken.
-
De velden van de afbeeldingsparameters zullen actief worden en kunnen worden gebruikt om de voorbeeldafbeelding te formatteren.
Opmerkingen:
- In tegenstelling tot de vaste galerijen –
waar steeds het eerste formaat wordt gebruikt om de afbeelding
effectief op de webpagina te plaatsen, zal hier, bij het aanklikken
van 'Importeer', de afbeelding worden geïmporteerd in het
formaat van de actieve formaatselectie.
Met andere woorden: indien tab '2-Extra' actief is, zullen de parameters van het tweede vrije formaat worden gebruikt om de afbeelding te importeren. Is de tab '3-Exra' actief, dan zal de derde formaatdefinitie worden gebruikt. - De vrije galerij kan worden gebruikt om
onmiddellijk en visueel de veranderingen te zien die het veranderen
van de verschillende afbeeldingsparameters met zich mee brengt.
Zodra één van de velden in de afbeeldingsparameters
wordt verlaten, wordt de voorbeeldafbeelding hertekend met de
nieuwe parameters.
Tip: Vooral het spelen met de parameter: 'Jpeg kwaliteit' is verhelderend. Vermits bovenaan de voorbeeldafbeelding steeds de grootte van de afbeelding wordt getoond, kan hier zeer goed de weerslag worden getest van de afbeeldingskwaliteit ten opzichte van de grootte van de te importeren afbeelding.
Instellen van de afbeeldingsparameters van de acht galerijen
De afbeeldingsparameters van de 8 vaste galerijen kunnen worden ingesteld in de projectparameters.
Deze optie kan worden gestart:
- Vanaf het StepGen-programma door de
menu-optie: 'Project – Projectparameters...' (of door het
gebruiken van de sneltoets Shift-Ctrl-F12).
Deze optie toont automatisch het tabblad: 'Scherm', het tabblad 'Afmetingen afbeeldingen' kan worden geactiveerd door dit aan te klikken. - Vanaf het importscherm voor afbeeldingen
door het aanklikken van de knop: 'Zet formaten'.
Deze optie toont automatisch het tabblad: Afmetingen afbeeldingen'.
Projectparameters – Afmetingen afbeeldingen
In het tabblad 'Afmetingen afbeeldingen' kunnen de definities worden ingevoerd voor de acht vaste galerijen.
De volgende kolommen zijn aanwezig:
- Galerij
- Fmt
- W/H
- Maat
- Actief
- Jpegkwal
- Nieuwe naam
- Copyrightcode
Kolom: Galerij
Toont de naam van galerij die wordt ingesteld.
De naam kan worden aangepast op elke lijn met een formaatdefinitienummer gelijk aan 1. Alle andere lijnen zullen de naam tonen, maar zullen niet toelaten om de naam op die lijn aan te passen.
De naam van de galerij wordt ook getoond op de galerijknoppen in het importscherm.
Kolom: Fmt
Een nummer van 1 tot 3 dat aanduidt welke definitie wordt gezet voor de gekozen galerij.
Kolom: W/H
Een aanduiding hoe de afbeelding moet worden verkleind naar de maat zoals aangeduidt in de kolom 'Maat'.
|
Keuze |
Doel |
|---|---|
|
Width (Breedte) |
De afbeeldingen moeten worden geïmporteerd met gelijke breedtes. De afbeelding zal worden geresized zodanig dat deze x-aantal pixels breed is, waarbij x gelijk is aan het getal ingesteld in de kolom 'Maat'.
Wordt meestal gebruikt indien afbeeldingen onder elkaar op de website worden geplaatst, vermits op deze manier de hoogtes van de verschillende afbeeldingen niet gelijk moeten zijn om toch een mooie verdeling van afbeeldingen te bekomen. |
|
Height (Hoogte) |
De afbeeldingen moeten worden geïmporteerd met gelijke hoogtes. De afbeelding zal worden geresized zodanig dat deze x-aantal pixels hoog is, waarbij x gelijk is aan het getal ingesteld in de kolom 'Maat'.
Wordt meestal gebruikt indien afbeeldingen naast elkaar op de website worden geplaatst, vermits op deze manier de breedtes van de verschillende afbeeldingen niet gelijk moeten zijn om toch een mooie verdeling van afbeeldingen te bekomen. |
|
Longest (Langste) |
De afbeeldingen moeten worden geïmporteerd zodanig dat de langste zijde gelijk zijn. De afbeelding zal worden geresized zodanig dat de langste zijde x-aantal pixels lang, waarbij x gelijk is aan het getal ingesteld in de kolom 'Maat'.
Wordt meestal gebruikt bij het importeren van foto's, vermits op deze manier zowel liggende als staande foto's even groot worden afgebeeld. |
|
Shortest (Kortste) |
De afbeeldingen moeten worden geïmporteerd zodanig dat de kortste zijde gelijk zijn. De afbeelding zal worden geresized zodanig dat de kortste zijde x-aantal pixels lang, waarbij x gelijk is aan het getal ingesteld in de kolom 'Maat'.
Wordt meestal gebruikt bij het importeren van foto's, vermits op deze manier zowel liggende als staande foto's even groot worden afgebeeld. |
Tabel 10: Afbeeldingsparameters - instellen W/H
Kolom: Maat
De grootte in pixels die moet worden gebruikt om de afbeelding een ander formaat te geven. De te importeren afbeeldingen zullen dusdanig worden geïmporteerd met een breedte of hoogte gelijk aan het getal ingevoerd in deze kolom.
Kolom: Actief
Indien deze kolom is aangevinkt, zal:
- Deze formaatinstelling worden gebruikt om een afbeelding te importeren.
- De tabulatie in de formaatdefinitie een vol driekhoekje tonen.
Indien deze kolom niet is aangevinkt, zal:
- Deze formaatinstellingen niet worden gebruikt om een afbeelding te importeren (al zullen de instellingen wel kunnen worden gebruikt om in het importscherm een voorbeeldafbeelding te tonen met de ingevoerde parameters).
- De tabulatie in de formaatdefinitie een hol driehoekje tonen.
Kolom: Jpegkwal
Een getal tussen 1 en 100 dat de kwaliteit van de te importeren afbeelding zal bepalen.
Waarbij 100 de beste kwaliteit aanduidt – maar ook de grootste afbeeldingen zal opleveren, en 1 de slechtste kwaliteit aanduidt – maar de kleinste afbeeldingen zal opleveren.
Het instellen van de kwaliteit van de uiteindelijke afbeeldingen is een belangrijke stap omdat deze de uiteindelijke grootte van de afbeeldingen zal bepalen.
Langs de ene kant wensen we afbeeldingen op de website te tonen die zo duidelijk mogelijk zijn, maar langs de andere kant wensen we ook de grootte van de afbeeldingen te beperken om de laadtijd van de webpagina's tot een minimum te beperken. Pagina's die immers te lang duren om te laden, jagen onze bezoekers immers weg.
De praktijk zal uitwijzen welke waarde hier het best kan worden gebruikt, maar als vuistregel mag worden genomen:
- Een waarde van 75 tot 85 voor kleine afbeeldingen (een maximumgrootte van 125 pixels).
- Een waarde van 85 tot 90 (eventueel 95) voor grotere afbeeldingen (125 pixels of meer).
Tip:
- De praktijk heeft uitgewezen dat een kwaliteitswaarde van 100 geen meerwaarde biedt over een waarde van 95, maar wél veel grotere afbeeldingen oplevert.
- In het importscherm kan, door middel van de vrije galerij, de waarde van de kwaliteitsparameter worden getoond.
Voorbeeldpagina jpeg-kwaliteit
Als voorbeeld is 4x eenzelfde foto geïmporteerd op een webpagina, telkens met verschillende waardes aan jpeg-kwaliteit. Respectievelijk 100, 90 50 en 5.
Op deze pagina is duidelijk te zien dat het visueel verschil tussen 100 en 90 zo goed als onbestaande is, maar dat de afbeelding die werd bewaard met een kwaliteitsparameter van 90 bijne 3 keer kleiner is dan de afbeelding bewaard met een kwaliteitsparameter van 100!
De afbeelding met de waarde 50 als jpegkwaliteit begint, ook visueel, verschillen te vertonen, en de afbeelding met waarde 5 is weliswaar zeer klein qua grootte, maar is volkomen onbruikbaar.
Om het verschil in deze handleiding nog iets duidelijker te kunnen tonen is in de volgende tabel telkens hetzelfde deel van de geïmporteerde afbeeldingen vergroot weergegeven:
|
100 |
|
90 |
|
|
50 |
|
5 |
|
Tabel 11: Vergelijking jpeg-kwaliteiten
Kolom: Nieuwe naam
Zoals uitgelegd in Naam van de afbeelding veranderen tijdens het importeren op pagina 115, zal elke geïmporteerde afbeelding de naam krijgen zoals deze wordt ingevoerd in het 'Importeer als:'veld van het importscherm.
Indien meer dan 1 afbeelding dient te worden geïmporteerd, dan dienen de bestandsnamen van de verschillende afbeeldingen op de website verschillend te zijn, vermits anders het importeren van het tweede formaat, het eerste formaat zal overschrijven.
De afbeeldingen dienen dus:
- Ofwel in een andere folder te worden weggeschreven.
- Ofwel in dezelfde folder te worden weggeschreven, maar met een andere bestandsnaam.
Het 'Nieuwe naam' veld zal toelaten om één van beide (of beide) zaken te bewerkstelligen door toe te laten de uiteindelijke bestandsnaam van de afbeelding te sturen.
Standaardwaarde
De standaardwaarde van dit veld is:
%f/
Een %f in dit veld zal worden vervangen door de StepVar http://www.sitestepper.be/images – wat dus inhoudt dat de afbeelding zal worden geïmporteerd in de _images-folder van het Sitestepperproject én op de website zal worden gezocht in de folder aangeduid in het 'Image root' veld van de websiteparameters.
Een nieuwe folder
Een andere folder kan worden aangeduid door achter de standaardwaarde (%f/) een nieuwe foldernaam te plaatsen.
Voorbeeld:
Een waarde van:
%f/boeken
Zal de afbeeldingen importeren in de subfolder boeken onder de {#ImageRoot} – wat dus inhoudt dat de afbeelding zal worden geïmporteerd in de _images\boeken folder van het Sitestepperproject én op de website zal worden gezocht in een subfolder genaamd boeken van de folder aangeduid in het 'Image root' veld van de websiteparameters.
De subfolder moet niet bestaan. Indien deze nog niet bestaat bij het importeren van de afbeelding, dan zal deze automatisch worden aangemaakt.
Tip:
- Vermits deze instellingen slechts éénmaal moeten worden uitgevoerd, en Sitestepper automatisch de folders aanmaakt, is het te overwegen om de afbeeldingen per galerij in een aparte subfolder te plaatsen.
Een nieuwe naam
De verschillende afbeeldingen kunnen ook een verschillende bestandsnaam krijgen door de naam van de afbeeldingen verschillend te maken (en ze dan toch in dezelfde folder te importeren).
Dit kan worden bereikt door het gebruik van de:
%n
code in de nieuwe-naam-definitie.
De %n code zal door Sitestepper worden vervangen door zelf gekozen veld (ingevoerd in het 'Importeer als:'-veld in het importscherm).
Door vóór of achter de %n één of meerdere karakters in te voeren, worden dus unieke namen bekomen.
Bijvoorbeeld: Als de ingevoerde tekst in de kolom 'Nieuwe naam' %f/vergroting-%n bevat en in het 'Importeren als:'-veld 'daguitstap ardennen' is ingevoerd, dan zal Sitestepper de afbeelding importeren onder naam 'vergroting daguitstap ardennen'.
Is de ingevoerde naam van de foto: 'toeristische-trein', dan worden de door Sitestepper geïmporteerde afbeelding 'vergroting toeristische trein'.
Een nieuwe folder én een nieuwe naam
Beide methodes om unieke bestanden te bekomen kunnen worden gecombineerd door zowel de %f als de %n te gebruiken als waarde in de kolom 'Nieuwe naam'.
Bijvoorbeeld:
%f/concerten/affiche-%n
Indien als ingevoerde naam: 'mike oldfield concert 1999' wordt ingevoerd, dan zal de geïmporteerde afbeelding worden bewaard in de subfolder {#ImageRoot}/concerten/' met de naam 'affiche mike oldfield concert 1999'.
De 'Nieuwe naam' kolom gebruiken als optimalisatie voor zoek-engines
Zoals reeds eerder aangehaald vinden zoek-engines de namen van de afbeeldingen op de website uitermate belangrijk, vermits dit de enige manier is die zij kunnen gebruiken om hun zoekgegevens te vullen.
Door het gebruik van de zowel de %f als de %n parameter, aangevuld met betekenisvolle woorden, verhoogt u automatisch de kans op een goede indexering van de afbeeldingen op de website (zonder dat u deze keer op keer moet invoeren bij het importeren en benoemen van de afbeeldingen).
Het voorbeeld gebruikt in voorgaande hoofdstuk (%f/concerten/affiche-%n), is hiervan een mooi voorbeeld.
Als we aannamen dat we één of meerdere webpagina's aan het maken zijn waarop allemaal afbeelding worden geplaatst van affiches van concerten in de afgelopen 20 jaar, dan zullen automatisch door Sitestepper de woorden 'affiche' (in de naam) en 'concerten' (in de foldernaam) worden gebruikt bij het importeren én dus ook de website.
Zonder dat we dus keer op keer het woorden affiche en/of concerten moeten invoeren, hebben we toch bereikt dat zoek-engines onze afbeeldingen zullen vinden indien iemand zoekt op de zoektermen affiche of concerten! We kunnen ons concentreren op het benoemen van de individuele afbeeldingen (ook dit is zeer belangrijk voor zoek-engines) maar voegen toch automatisch enkele zeer belangrijke woorden bij.
Kolom: Copyrightcode
De letters A, B of C.
Indien de kolom is ingevuld, dan zal Sitestepper automatisch bij het importeren de overeenkomstige tekst in het gedeelte 'copyrightteksten' op de afbeelding plaatsen.
Opmerkingen:
- Alhoewel zowel de kolom als de velden worden benoemd met de prefix copyright, betekent dit niet dat deze velden niet kunnen worden gebruikt om andere teksten op de afbeeldingen te plaatsen (zoals te zien in het voorbeeld in 'Tekst A').
- Het copyright-teken kan worden gebruikt. Op toetsenborden waar dit niet via een toetsaanslag kan worden ingevoerd, kan het worden ingevoerd door het indrukken en ingedrukt houden van de alt-toets, en het invoeren van de cijfers 0169 op het numerieke deel van het toetsenbord.
- De teksten worden horizontaal gecentreerd en onderaan de afbeelding geplaatst.
- De teksten worden, in de huidige versie, op de afbeelding geplaatst in de font 'Arial', met een fontgrootte van 20 pixels. Deze fontgrootte kan niet worden veranderd, komt mooi uit op de afbeeldingen, maar kan iets te groot zijn om op kleine afbeeldingen te plaatsen.
- De kleur van de teksten is wit, met een grijze schaduw.
Voorbeeld van een webpagina met afbeeldingen met copyrightteksten
De volgende webpagina bevat een foto geïmporteerd met de galerij 'MetCopyright' zoals in de voorgaande afbeelding ingevoerd.
Op de kleine afbeelding is automatisch bij het importeren de tekst 'TestLes voorbeeld' toegevoegd, op de grotere versie van dezelfde foto de tekst '© www.sitestepper.be'.
Opmerkingen:
- De teksten die op deze manier worden toegevoerd aan de geïmporteerde afbeeldingen zullen niet worden opgenomen door zoek-engines, vermits deze teksten een integraal deel van de afbeelding vormen, en niet als leesbare tekst worden opgeslagen.
- Vooral indien u zelf getrokken foto's op uw website plaatst, verkleint u, door een copyright-tekst toe te voegen aan de afbeeldingen, de kans dat derden de foto gaan gebruiken op hun website zonder toestemming (of vermelding van de auteur).
Projectparameters – afbeeldingen
In de projectparameters (via StepGen op te roepen via 'Project – Projectparameters' of de sneltoets Ctrl-Shift-F12), of via de knop 'Zet formaten' in het importscherm, kunnen, in de sectie 'Afbeeldingen' enkele parameters worden ingesteld die de globale werking met afbeeldingen beïnvloeden.
Originele afbeelding bewaren ? en Naar folder
Indien aangevinkt, dan zal Sitestepper, tijdens de importactie, de originele afbeelding kopiëren naar de folder aangeduid in het veld 'Naar folder'.
Op deze manier wordt op één centrale plaats een historiek bijgehouden van alle foto's die op de website worden geplaatst. En dit in hun originele vorm.
Zo behoudt men steeds het origineel, ook al zijn, tijdens het importeren, diverse manipulaties uitgevoerd op de afbeelding (verkleinen, bewaren met een bepaalde jpeg-kwaliteit, croppen, draaien, teksten op de afbeelding geplaatst ...). Indien men, op een later tijdstip een bepaalde afbeelding wenst te herplaatsen op de website (bijvoorbeeld met een nieuwe copyright-tekst), dan kan men, bij de importactie, de originele foto nog terugvinden!
Indien de afbeelding wordt geïmporteerd vanaf de harde schijf (of vanaf de folder op de electronische camera), dan zal de originele bestandsnaam worden behouden (zonder de nieuw ingevoerde naam te gebruiken).
Indien de afbeelding wordt geïmporteerd vanaf het klembord, of vanaf de scanner, dan wordt de geïmporteerde afbeelding (de bronafbeelding, dus zonder deze te verkleinen), bewaard in deze folder met de ingevoerde naam en in het .png-formaat (vermits dit een formaat is dat de afbeeldingen compact kan opslaan zonder kwaliteitsverlies).
Origineel niet vergroten
Sitestepper zal steeds de bronafbeelding resizen naar het formaat zoals ingesteld in de galerij.
Het is dan ook aan te raden de bronafbeelding zo groot als mogelijk te importeren (vermits op deze manier de geoptimaliseerde algoritmes van Sitestepper het best hun werk kunnen uitvoeren).
Is de bronafbeelding kleiner dan het gevraagde formaat, dan zal Sitestepper ook hier de foto resizen naar het ingestelde formaat (in dit geval vergroten), behalve indien deze waarde is aangevinkt.
Is de waarde 'Origineel niet vergroten' aangevinkt, dan zullen, indien de bronafbeelding kleiner is dan het gewenste formaat, de afbeelding worden geïmporteerd met de formaten van de bronafbeelding (maar wel met de ingestelde jpeg-kwaliteit.
Een bestaande afbeelding hergebruiken
Het zal, wellicht, meerdere malen voorkomen dat een afbeelding gebruikt dient te worden op meer dan één webpagina.
In plaats van deze een tweede maal te importeren, kan door middel van de menu-optie: 'Invoegen...- Afbeelding invoegen... - Gebruik een bestaande afbeelding' een afbeelding dat zich reeds in het Sitestepperproject bevindt, worden hergebruikt19.
Het volgende scherm zal worden getoond:
De bestandenlijst zal alle afbeeldingen tonen dewelke aanwezig zijn in het Sitestepperproject.
Zodra één van de bestanden wordt aangeklikt, dan wordt deze getoond in het voorbeeldscherm. Op dat moment wordt ook de 'Use' knop actief.
Indien de afbeelding werd geïmporteerd in meer dan één formaat, dan kan door middel van de drie tabbladen (1-Import, 2-Extra en 3-Extra 2) één van de andere formaten worden getoond in het voorbeeldscherm. De voorbeeldafbeelding zal de afbeelding aan 100% (1 pixel in de affectieve afbeelding is 1 pixel in de voorbeeldfoto).
Galerij selecteren
De lijst van getoond afbeeldingen is de lijst van één folder. In het 'From' gedeelte van het scherm wordt steeds getoond welke effectieve volde wordt getoond.
Deze folder kan worden veranderd door:
- Één van de gedefinieerde galerijen te selecteren.
- Eén van de formaat-tabbladen te selecteren.
Indien tijdens de definitie van de galerijen een andere folder werd gedefinieerd (zie Kolom: Nieuwe naam op pagina 143), dan zal de lijst van afbeeldingen worden ingelezen van de gedefinieerde folder en zal de voorbeeldafbeelding worden ingeladen van de geselecteerde folder.
Kiezen welk formaat wordt terug gegeven
Na het selecteren van de 'Use' knop, zal dezelfde html-code zoals weergegeven in HTMLcode 21: Html-code zonder ingevoerde afbeeldingen op pagina 108, worden toegevoegd aan de huidige html-pagina.
Door middel van de 'Return the properties of image format'-selectielijst kan worden gekozen welk formaat te worden gebruikt.
Deze selectielijst bevat dezelfde drie namen als de drie tabbladen in de formaatselectie.
Na het aanklikken van de 'Use'-knop zal automatisch het daar geselecteerde formaat worden gebruikt, ook als dit formaat niet zichtbaar in de voorbeeldafbeelding.
Synchronizeren van de getoonde voorbeeldafbeelding en de formaatkeuze
Alhoewel de vrije keuze van het te gebruiken formaat zeer gemakkelijk is (je bekijkt de kleine afbeelding in de voorbeeldafbeelding, maar inmporteer, bijvoorbeeld, steeds de vergrootte versie), toch verkiezen de meeste gebruikers de afbeelding te importeren die op dat moment zichtbaar is in de voorbeeldafbeelding.
Door de 'Synchroize format selections'-checkbox aan te vinken, zullen beide lijsten worden gesynchronizeerd:
- Het aanklikken van één van de tabbladenin de formaatselectie, zal automatisch hetzelfde formaat selecteren in de 'Return the properties of image format'-selectielijst.
- Het selecteren van één van de formaten in de 'Return the properties of image format'-selectielijst, zal automatisch hetzelfde tabblad selecteren in de formaatselectie.
Deze instelling wordt behouden.
Filteren van de getoonde lijst van afbeeldingen
Initieel worden alle afbeeldingen getoond in de geselecteerde folder.
Door middel van het filter-veld, kan snel een bepaalde afbeelding worden teruggevonden.
Zodra één of meerdere karakters worden ingevoerd in dit veld, wordt in de lijst van afbeeldingen enkel die afbeeldingen getoond die in de bestandsnaam de ingevoerde karakters bevatten.
Door middel van de backspace-toets kan de filter worden verwijderd.
Snel doorklik-afbeeldingen maken
Een veel gebruikte manier om afbeeldingen op een website te tonen (en dé reden waarom via Sitestepper afbeeldingen in meer dan één formaat worden geïmporteerd), is het tonen van een afbeelding in een relatief klein formaat. Door het klikken op de (kleinere) afbeelding, wordt deze vergroot weergegeven.
Indien de website zal draaien onder een Windows server, dan zal Sitestepper deze handeling kunnen automatiseren!
Het uitvoeren van de menu-optie: 'Extra – Verander IMG in doorklikafbeeldingen' zal u assisteren in het omzetten van geïmporteerde afbeeldingen naar zogenoemde doorklikafbeeldingen.
De twee fotos die werden geïmporteerd in de sectie Afbeelding 68: Voorbeeldpagina van een rechtsgealigneerde <IMG>-tag op pagina 108, hadden de volgende html-code tot gevolg.
<html> <body><h3>Voorbeeldpagina copyrightteksten</h3> <img src='{#ImageRoot}/cochem.jpg' border= '0' width='200' height='150' alt='cochem'><img src='{#ImageRoot}/groot/cochem.jpg' border='0' width='560' height='420' alt='cochem'> </body> </html>
HTMLcode 26: Twee afbeeldingen in html-code (zonder doorklikcode)
Sitestepper heeft automatisch de correcte breedtes en hoogtes van de afbeeldingen ingevuld.
Het uitvoeren van voornoemde optie zal het volgende scherm tonen 20.
Sitestepper zal automatisch alle afbeeldingen uit de brontekst ophalen en deze in een overzichtelijke lijst tonen met zowel de breedte, de hoogte als de alternatieve tekst.
Het kiezen van 'Continue' zal automatisch alle <IMG-tags in de huidige brontekst omzetten naar doorkliklinks via het (speciaal voor deze mogelijkheid) gereserveerde link-keyword 'step1img'.
De brontekst zal worden omgevormd naar:
<html> <body> <h3>Voorbeeldpagina copyrightteksten</h3> <a href='http://www.sitestepper.be/nl/1foto.asp?amp;img={&#imageroot}/groot/cochem.jpg&caption=cochem'> <img src='{#ImageRoot}/cochem.jpg' border= '0' width='200' height='150' alt='cochem'> </a> <a href='http://www.sitestepper.be/nl/1foto.asp?amp;img={&#imageroot}/groot/cochem.jpg&caption=cochem'> <img src='{#ImageRoot}/groot/cochem.jpg' border='0' width='560' height='420' alt='cochem'> </a> </body> </html>
HTMLcode 27: Twee afbeeldingen in html-code (mét doorklikcode)
step1img
De ingevoerde link zal het keyword step1img verwachten in het Sitestepperproject.
Sitestepper zal automatisch twee parameters toevoegen aan deze pagina:
- img= : deze parameter zal de volledige url van de vergrootte versie van de afbeelding weergeven21.
- caption= : de alternatieve tekst (alt-tag).
Beide parameters dienen in de pagina aangeduidt door het keyword step1img te worden gelezen, en kunnen daar worden gebruikt om de grote versie van de afbeelding te tonen.
Vermits parameters enkel kunnen gelezen via dynamische webpagina's (asp- of php-pagina's), dient de ze pagina voor te komen in de 'Dynamic' of 'DynamicRoot'-sectie van het project.
De naamkeuze van de pagina is vrij te kiezen, zolang het keyword 'step1img' maar wordt gebruikt.
1foto webpagina meegeleverd met het Sitestepper demoproject
Het demoproject dat wordt meegeleverd met de Sitestepper-installatie bevat een brontekst dewelke asp-code bevat die kan dienen als brontekst voor de te doorklikpagina.
- Selecteer de sectie 'Dynamic' in de projectboom.
- Kies de menuoptie: 'Node – Nieuwe pagina vanaf een bestand', de optie 'Nieuwe pagina vanaf een bestand' uit de kontekstmenu (door rechts te klikken op 'Dynamic') of de sneltoets Alt-Ctrl-N.
- Selecteer de pagina '1foto.sgp' in de getoonde lijst (navigeer eventueel naar de nl-folder) en klik 'Open'.
- De nieuwe pagina is aangemaakt in de projectboom, met het keyword '1foto' (bij het importeren van bestaande pagina's, wordt het keyword automatisch ingevuld met dezelfde naam als de geïmporteerde bestandsnaam).
- Kies de menuoptie: 'Edit – Node data – Editeer', de optie 'Node data – Editeer' uit de kontekstmenu, of gebruik de sneltoets Ctrl-E.
- De pagina-parameters zullen actief worden.
- Verander het keyword '1foto' in 'step1img'.
- Bewaar de paginaparameters door op de 'Save' knop te klikken.
- Build de pagina naar de website toe: 'Genereer – Huidige pagina' (of gebruik de sneltoets Ctrl-F9). De webpagina '1foto.asp' zal worden aangemaakt.
- Indien het de eerste maal is dat een asp-pagina wordt aangemaakt, zal ook de meegeleverde asp-programmacode gebruild dienen te worden. Kies de menu-optie: 'Genereer – Asp library – build steplib' (of gebruik de sneltoets Shift-F11)22.
Indien na deze handeling de pagina in HTMLcode 20: Voorbeeld gebruik van de HTML-tag <IMG> op pagina 107, wordt gebuild dan zullen beide afbeeldingen doorklikafbeeldingen geworden zijn. Door op de afbeelding te klikken, wordt de zonet aangemaakte '1foto.asp' pagina opgeroepen.
Choose the forced image dimensions
Deze optie kan in de huidige versie van Sitestepper worden genegeerd, vermits deze enkel van toepassing is indien de bronpagina's met de te vergroten afbeeldingen voorkomen in de Dynamic of DynamicRoot secties.
Choose the source type
Hier kan worden gekozen of de door Sitestepper ingevoerde linken via de normale html-syntax of via routines die aanwezig zijn in de meegeleverde asp-programmacode, worden ingevoegd.
- html – via de <a syntax
- asp – via het oproepen van één van de routines die zich in de eImgRtns.inc bevinden23
Lijst van getoonde afbeeldingen
Standaard zal Sitestepper alle afbeeldingen tonen die werden gevonden in de huidige brontekst.
Door de checkbox: 'Change al images' af te klikken, kan per afbeelding worden gekozen, welke wel en welke niet moeten worden omgevormd naar doorklikafbeeldingen.
Bij het kiezen van 'Continue' zullen enkel de aangevinkt afbeeldingen worden omgevormd.
15Let op met het gebruik van afbeeldingen gekopieerd vanaf het internet. Op vele afbeelding rust immers een copyright en deze mogen dan ook, zonder toestemming van de auteur, niet worden gebruikt op andere websites.
16De scannersoftware wordt bijgeleverd bij de scanner en is – uiteraard – verschillend van merk tot merk.
17In versie 1.7.0 van Sitestepper wordt de voorbeeldfoto rechts op het scherm niet automatisch mee ververst. Klik op één van de twee tabbladen '2 – Extra' of '3 – Extra 2' op de foto te verversen.
18De 'normale' muistoets is de toets waarmee 95% van alle klik binnen de Windows-omgeving worden uitgevoerd. Bij de meeste installaties is die de linkse muistoets, maar indien u linkshandig bent, en Windows als dusdanig hebt ingsteld, kan dit voor u de rechtermuistoets betekenen.
19Dit scherm is in versie 1.7 nog niet vertaald naar het Nederlands.
20Ook dit scherm is in versie 1.7 nog niet vertaald in het Nederlands.
21In de huidige versie van Sitestepper zal steeds en hardcoded de folder /groot/ worden gebruikt, als folder waar de vergrootte afbeelding worden gezocht (een latere versie zal de folder van formaat 2 van de galerij opzoeken en gebruiken).
22Indien u zelf geen asp-code hebt ontwikkeld, dan kan het zijn dat, de eerste maal dat deze build steplib wordt gekozen, een foutmelding wordt getoond dat de steplib-folder niet bestaat. Dit kan zeer gemakkelijk worden opgelost door, in de tabbladen projectbestanden de tab 'Dev.code' aan te klikken. Hierdoor wordt de folder geforceerd aangemaakt waarin projectgebonden asp-programmacode kan worden geplaatst. Het nogmaals uitvoeren van build steplib zal nadien geen problemen meer opleveren.
23Indien u geïnteresserd bent in deze mogelijkheid, dan vereist dit een (kleine) kennis van het gebruik van asp-programmacode. Gelieve Erik De Laet (erik.delaet@edelcom.be) een email te sturen voor verdere uitleg.