1 HANDLEIDING I-MATE Inhoud I-Mate handleiding 1. Opstarten van I-Mate 2. Opbouw van I-Mate 3. Een pagina in de editor openen 4. Tekst invoeren en aan...
HANDLEIDING I-MATE Inhoud I-Mate handleiding 1. Opstarten van I-Mate 2. Opbouw van I-Mate 3. Een pagina in de editor openen 4. Tekst invoeren en aanpassen 5. Tekst opmaken 6. Lijsten aanmaken 7. Een horizontale lijn invoegen 8. Een afbeelding in de pagina toevoegen 9. Leggen van een link over een tekst of een afbeelding 10. Roll-over effect voor afbeeldingen 11. Koppelen van pagina’s 12. Toevoegen van een downloadable bestand 13. Menu-items toevoegen of verwijderen en submenu’s creëren 14. Ankers toevoegen 15. Tabellen aanmaken, rijen en kolommen beheren 16. Eigenschappen van tabellen 17. Creatieve opmaak met tabellen 18. Back-up maken 19. Metatags toevoegen
I-Mate handleiding Met deze handleiding leer je stapsgewijs werken met I-Mate. Volg de handleiding stap-voor-stap en ga niet over naar een volgend punt vooraleer je een bepaalde handeling kan uitvoeren.
1. Opstarten van I-Mate Geef de URL in die je hebt gekregen om “I-Mate” op te starten in de browser. Zet de site daarna in de favorieten. Indien je problemen hebt met het gebruik van de I-Mate, dan kan je steeds naar de FAQ-rubriek van de website www.imate.be gaan. Of stel een vraag via de Support-rubriek van deze website. Veel succes!
2. Opbouw van I-Mate
1
2 3
4
5 I-Mate bestaat uit volgende onderdelen: 1. Het hoofdmenu: -
Standard
-
Tables Extra Edit Menu Sync
2. Het Submenu: elk hoofdmenu heeft een aantal menuopties: -
Standard: B, I, U, UL, OL, Link, Save, Paste, BR, Subscript, Superscript, Indent, Outdent, aangevuld met de aanwezige Classes;
3. De editor: dit gebied is je werkterrein. In de editor kan de inhoud aangepast worden (b.v. nieuwe tekst toevoegen, afbeeldingen invoegen, linken leggen,…). 4. Property Window (eigenschappenvenster): via dit window kunnen de eigenschappen van de geselecteerde objecten aangepast worden (b.v. de achtergrondkleur aanpassen van een tabel,…). 5. Menustructuur: in dit window wordt de opbouw van de menustructuur van de website weergegeven en kunnen de verschillende inhoudspagina’s geopend worden.
3. Een pagina in de editor openen Dubbel klik in de ‘menustructuur’ (5) op de naam van de pagina die je in de editor wenst te openen. De editor is het ‘veld’ waarbinnen je alle bewerkingen uitvoert.
wordt getoond, bevat deze pagina een
Indien voor de naam van een pagina, het mapje
submenu. Je kan de onderliggende pagina’s opvragen door op dit mapje te klikken (dus niet op de naam van de pagina, maar op het mapje zelf).
Indien voor de naam van een pagina, het icoontje
wordt getoond, bevat deze pagina verder
geen submenustructuur. Wat je ALTIJD moet doen! Wanneer je inhoud hebt toegevoegd of aangepast moet je steeds, je informatie bewaren door in het Standard-Menu op ‘save’ te klikken. Als je de inhoud of aanpassingen online wil zetten, klik je in het hoofdmenu op ‘Synchronize’. 4. Tekst invoeren en aanpassen Nadat je een pagina hebt aangeklikt in de menustructuur (5), zal deze in de editor (3) worden opgeladen. Als je tekst wil invoeren kan je deze uiteraard intikken, maar je kan hem ook kopiëren vanuit
Word of Excel, door deze tekst in het desbetreffende programma te selecteren en vervolgens op ctrl-c te klikken.
Klik vervolgens in de pagina waar je de tekst wenst te plakken. Als je deze nu plakt via ctrl-v dan zal je merken dat niet alleen de tekst maar ook zijn opmaak wordt gekopieerd. Om dit te vermijden, gebruik je in het ‘Standard-menu’ best de
button i.pv. ctrl-v!!!
Opm.: Als je tekst invoert die langer is dan de schermbreedte, springt de tekst na het einde van de regel automatisch terug naar het begin van de volgende regel. Wil je echter eerder naar het begin van de volgende regel springen, druk dan tegelijk op je “shift” en “enter”-toets of gebruik je de einde-regel toets in het “Standard-Menu”:
BR
Je zult merken dat wanneer je enkel op je “enter”-toets drukt je niet naar de volgende regel springt, maar een nieuwe paragraaf aanmaakt. Om een tab-sprong te maken, gebruik je de gebruik je de
Outdent
toets.
Indent
toets. Om de insprong kleiner te maken,
5. Tekst opmaken Als je een bepaald gedeelte tekst een andere opmaak wenst mee te geven, dien je deze eerst te selecteren. Vervolgens kan je de volgende opmaakkenmerken gebruiken: Vet:
Klik na selectie de bold-button aan in het “Standard-menu”:
De geselecteerde tekst wordt in het vet weergegeven. Wens je een bepaald gedeelte tekst niet meer in het vet weer te geven, selecteer dan terug deze tekst en klik opnieuw op de bold-button. Cursief:
Klik na selectie de italic-button aan in het “Standard-menu”:
Onderlijnen:
Klik na selectie de onderlijn-button aan in het “Standard-menu”:
Subscript:
Hiermee plaats je kleine tekst onder de tekstregel. Klik na selectie de Subscript-button aan in het “Standard -menu”:
Superscript
:
Hiermee plaats je kleine tekst boven de tekstregel. Klik na selectie de Superscript-button aan in het “Standard -menu”:
Je kan ook de kleur en/of de tekengrootte van de tekst aanpassen. Hiertoe heb je in de stijlgids (Standard-Menu) keuze uit de stijlklassen die behoren bij jouw website. Het basis stijlkenmerk van tekst is tekst. Als je een bepaald gedeelte standaardtekst een ander stijlkenmerk wilt geven, dien je de tekst te selecteren en vervolgens in de drop-downmenu in het “Standard-Menu” het stijlkenmerk te selecteren dat je wilt toepassen:
Let op dat je via de drop-downmenu in het “Standard-Menu” geen stijlkenmerk legt over een ander stijlkenmerk dan standaardtekst. Als je een tekst reeds een bepaald stijlkenmerk hebt meegegeven, dien je dit te veranderen door de tekst te selecteren en in het Property Window (4) een ander stijlkenmerk te kiezen bij de eigenschap ‘classname’:
Bevestig de keuze via de OK button.
OK
Nadat je aan een tekst een bepaald stijlkenmerk hebt toegekend, wordt dit in het Property Window aangeduid met <span>.
Je kan tevens aan een volledige paragraaf een stijlkenmerk toekennen. Voeg een paragraaf in door enter te drukken en voer de tekst in. Als je nu op een willekeurige plaats in de tekst klikt, verschijnen in het Property Window de eigenschappen van de paragraaf:
Hier kan je ook via de eigenschap ‘Classname’ een stijlkenmerk kiezen dat vervolgens wordt toegekend op de volledige paragraaf. De paragraaf heeft ook nog de bijkomende eigenschap: ‘Align’, waarmee de volledige tekst in de paragraaf uitgelijnd kan worden:
-
Left: de tekst wordt links uitgelijnd;
-
Right: de tekst wordt rechts uitgelijnd;
-
Center: de tekst wordt gecentreerd;
-
Justify: de tekst wordt links en rechts uitgelijnd.
De stijlklasse “invulvelden” kan je beter niet gebruiken, vermits deze specifiek bedoeld is voor de opmaak van de invulvelden in een contactformulier.
6. Lijsten aanmaken Een lijst is een ingesprongen opsomming van items. Er bestaan 2 soorten lijsten:
-
ongeordende lijst: voor elk item wordt een opsommingsteken geplaatst;
-
geordende lijst: voor elk item wordt een nummer geplaatst.
Om een lijst in te voegen ga je op de desbetreffende plaats staan en voeg je twee paragrafen in (twee maal enter klikken). Ga naar de eerste paragraaf die je hebt ingevoegd (pijltje naar boven gebruiken). Klik in het ‘Standard-menu’ op
voor een ongeordende lijst of op
voor een
geordende lijst. Het eerste opsommingsteken/cijfer verschijnt, klik hier achter om de tekst van het eerste item in te geven. Gebruik de enter-toets om items aan de lijst toe te voegen. Om de lijst af te sluiten, klik je op de 2de paragraaf die je eerder onder de lijst had ingevoegd. Wil je binnen de lijst naar de volgende regel springen, maar geen nieuw item toevoegen, klik dan twee maal op enter. Net zoals bij een paragraaf kan je de stijlkenmerken van de lijsten aanpassen in het Property Window:
/. Naast de mogelijkheid om een stijlklasse te selecteren, kan je bovendien het type van lijst bepalen: OL: -
1: voor elk item verschijnt een volgorde nummer
-
a: voor elk item verschijnt de volgorde letter in kleine letters
-
A: voor elk item verschijnt de volgorde letter in hoofdletters
-
i: voor elk item verschijnt het volgorde nummer in Romeins cijfer, in kleine letter
-
I: voor elk item verschijnt zijn volgorde nummer in Romeins cijfer, in hoofdletter
-
disc: het opsommingsteken voor elke item is een opgevulde cirkel;
-
circle: het opsommingsteken voor elke item is een niet opgevulde cirkel;
-
square: het opsommingsteken voor elke item is een vierkant.
UL:
7. Een horizontale lijn invoegen Voeg in de pagina een paragraaf in door enter te klikken, daar waar je de horizontale lijn wilt toevoegen. Klik vervolgens in het ‘Extra-menu’ op
.
Je kan de afmetingen van de geselecteerde lijn aanpassen door deze te verslepen of door in het Property Window de afmetingen in te geven in PXL of % waarde via ‘Height’ of ‘Width’. Je kan de kleur van je lijn aanpassen door in het Property Window de RGB-waarde in te geven via ‘Color’ of door de kleur te selecteren via de keuzelijst ‘Selecteer’.
8. Een afbeelding in de pagina toevoegen Alvorens de nieuwe foto’s of afbeeldingen toegevoegd kunnen worden in de website, dien je ze eerst in een digitaal formaat op de harde schijf van je computer te plaatsen, door bijvoorbeeld gebruik te maken van een scanner, een digitale camera,… Hanteer volgende digitale formaten: -
jpeg: kan je het beste gebruiken voor foto’s;
-
gif: voor tekeningen en illustraties met beperkt aantal kleuren.
Om een digitale foto of afbeelding te bewerken, is een grafisch programma zoals Paint Shop Pro of Adobe Photoshop vereist. Het is raadzaam om een foto aan te passen (wijziging van formaat, maken van uitsnit, enz.) vooraleer je deze inlaadt in de fotogalerij van I-Mate. Vervolgens dien je de afbeelding op te laden in de fotogalerij van I-Mate, klik hiervoor in het ‘Extra-menu’ op de button:
Klik vervolgens op ‘bladeren’ en selecteer de afbeelding op je harde schijf die je in de galerij wilt opladen. Klik op ‘open’ en daarna op ‘OK’. Om de afbeelding in de gewenste pagina te plaatsen ga je met de cursor op de plaats staan waar de afbeelding dient toegevoegd te worden en klik je vervolgens in het ‘Extra-menu’ op de button:
Selecteer de gewenste afbeelding en bevestig via ‘OK’. Indien je een afbeelding in de galerij hebt geplaatst via de Upload Images button, maar je vindt de afbeelding niet meteen terug, klik dan eerst even op ‘Reload’. Opgelet: Indien je nieuwe afbeeldingen hebt toegevoegd in een pagina die je bewaard hebt via de button en die je vervolgens op de publieke website wenst op te slaan, dien je niet alleen de HTML pagina’s te synchroniseren via de “Sync”-button in het hoofdmenu, maar dien je tevens de nieuwe afbeeldingen te synchroniseren via de “Sync Img”-button. Nadat de afbeelding in de pagina is toegevoegd, kan je deze selecteren en in het Property Window aanpassen. Let op: Alle aanpassingen dienen steeds bevestigd te worden via de ‘OK’ button! De grootte van een afbeelding aanpassen. Pas de eigenschappen ‘Height’ (hoogte) en ‘Width’ (breedte) aan (PXL waarde) in het Property Window en bevestig via ‘OK’. De afbeelding voorzien van een Alt-tag. Een Alt-tag is een labeltje met beknopte informatie dat verschijnt wanneer de bezoeker met zijn muis op een afbeelding komt. Om een dergelijk label aan een afbeelding toe te voegen, vul je in het veld ‘Alt’ de respectievelijke tekst in.
De uitlijning van een afbeelding. Door de eigenschap ‘Align’ aan te passen naar ‘Left’ of ‘Right’ kan je ervoor zorgen dat de tekst links of rechts van de afbeelding loopt. Wens je een afbeelding te centreren, maak dan eerst een nieuwe paragraaf, voeg de afbeelding in deze paragraaf in en pas daarna in het Property Window
de uitlijning van de paragraaf (dus niet van de afbeelding) aan naar ‘Center’. Om afbeeldingen op een specifieke plaats in de pagina te positioneren, kan gebruik gemaakt worden van tabellen, zie hiervoor punt 17. Via de eigenschap ‘Hspace’ kan je de afstand tussen de tekst en de zijkanten van de afbeelding bepalen. Vul daartoe het gewenste aantal pixels in en bevestig via ‘Ok’. Via de eigenschap ‘Vspace’ kan je de afstand tussen de tekst en de boven- en onderkant van de afbeelding bepalen. Vul daartoe het gewenste aantal pixels in en bevestig via ‘Ok’. Via de eigenschap ‘Border’ kan je de afbeelding een zwarte kader geven. Vul daartoe het gewenste aantal pixels in en bevestig via ‘Ok’. Belangrijk: je kan de border best instellen op 0 pixels wanneer je een link over een afbeelding legt.
9. Leggen van een link over een tekst of een afbeelding Door het leggen van een link zorg je ervoor dat de bezoeker vanaf een bepaalde plaats op je website naar een andere pagina of naar een andere website gaat nadat hij een bepaalde tekst of afbeelding heeft aangeklikt. Het leggen van een link over een tekst of een afbeelding. Selecteer het gedeelte tekst of een afbeelding waarover je de link wenst te leggen en klik daarna in het ‘Standard’-menu op de
button.
Indien je een link naar een andere website wenst te leggen, selecteer dan als type ‘http:’ en benoem vervolgens de ‘Url’ van de website, b.v. http://www.mercatron.be, en bevestig via ‘Ok’. Indien je een link naar een andere interne pagina wenst te leggen, selecteer dan als type ‘(andere)’ en vul de bronverwijzing of Source van de pagina in. Deze source vind je helemaal bovenaan je pagina in het blauwe balkje (b.v. p0001.htm). Uiteraard bevestigen via ‘Ok’. Indien je een link naar een e-mail adres wenst te leggen, selecteer dan als type ‘mailto’ en vul het respectievelijke e-mail adres in, b.v. [email protected], en bevestig via ‘Ok’. Je kan de eigenschappen van de link in het Property Window aanpassen. -
Om de eigenschappen van deze objecten aan te passen, klik je in een willekeurige cel van de tabel. In het Property Window worden allereerst de eigenschappen van het object ‘
’ of m.a.w. deze van de geselecteerde cel weergegeven. Door in het Property Window te klikken op het pijltje
worden de eigenschappen van het object
‘
’ of m.a.w. deze van de geselecteerde rij weergegeven. Klik je nogmaals op het pijltje, worden de eigenschappen van het object ‘
’ of m.a.w. deze van de volledige tabel weergegeven. Let op: als er reeds een object in de geselecteerde cel aanwezig is (b.v. een link of een afbeelding) worden eerst de eigenschappen van het respectievelijke object weergegeven (en dus niet van het object ‘
’- de cel-). Klik op het pijltje te geven.
om de eigenschappen van de andere objecten weer
De eigenschappen van een individuele cel in de tabel aanpassen
: Klik in de cel die je wenst op te maken. Volgende eigenschappen kan je aanpassen en vervolgens via ‘OK’ bevestigen: -
Width: cel breedte (PXL of % waarde)
-
Height: cel hoogte (PXL of % waarde)
-
Bgcolor: achtergrondkleur van de cel (RGB waarde)
-
Selecteer: selecteer de achtergrondkleur van de cel
-
Align: horizontale uitlijning van de tekst in de cel:
-
o
‘Left’: links van de cel uitlijnen
o
‘Right’: rechts van de cel uitlijnen
o
‘Center’: centreren
Valign: verticale uitlijning van de tekst in de cel: o
‘top’: bovenaan de cel uitlijnen
o
‘bottom’: onderaan de cel uitlijnen
o
‘middle’: centreren
-
Classname: selecteer de opmaakstijl voor de tekst in de cel
-
colSpan: aantal kolommen dat een bepaalde cel bestrijkt
-
rowSpan: aantal rijen dat een bepaalde cel bestrijkt
De eigenschappen van een volledige rij cellen in de tabel aanpassen
: Klik in een willekeurige cel van de rij die je wenst op te maken. Volgende eigenschappen kan je aanpassen en vervolgens via ‘OK’ bevestigen: -
Height: rij hoogte (PXL of % waarde)
-
Bgcolor: achtergrondkleur van de rij cellen (RGB waarde)
-
Selecteer: selecteer de achtergrondkleur van de rij cellen
-
Align: horizontale uitlijning van de tekst in de rij cellen:
-
-
o
‘Left’: links uitlijnen
o
‘Right’: rechts uitlijnen
o
‘Center’: centreren
Valign: vertikale uitlijning van de tekst in de rij cellen: o
‘top’: bovenaan uitlijnen
o
‘bottom’: onderaan uitlijnen
o
‘middle’: centreren
Classname: selecteer de opmaakstijl voor de tekst in de rij cellen
De eigenschappen van een volledige tabel aanpassen
: De eigenschappen van het object
hebben betrekking op de tabel zelf eerder dan op de inhoud van de verschillende cellen: Volgende eigenschappen kan je aanpassen en vervolgens via ‘OK’ bevestigen: -
Width: breedte van de volledige tabel (PXL of % waarde)
-
Height: hoogte van de volledige tabel (PXL of % waarde)
-
Bgcolor: de achtergrondkleur van de volledige tabel (RGB waarde)
-
Selecteer: selecteer de achtergrondkleur van de volledige tabel
-
Align: uitlijning van de tabel in de pagina:
-
o
‘Left’: links uitlijnen
o
‘Right’: rechts uitlijnen
o
‘Center’: centreren
Border: dikte van de kader rond de tabel (PXL waarde), als je hier 0 ingeeft, verschijnt er geen border
-
Bordercolor: kleur van de kader (RGB waarde)
-
Selecteer: selecteer de kleur van de kader
-
Cellpadding: de ruimte tussen de randen van de tabelcellen en de inhoud van de cel (PXL waarde)
-
Cellspacing: de ruimte tussen de randen van de tabelcellen onderling en tussen de kader
-
Classname: selecteer de opmaakstijl voor de volledige tabel
17. Creatieve opmaak met tabellen Als je een pagina probeert op te maken, waarbij verschillende afbeeldingen uitgelijnd dienen te worden t.o.v. tekst , dan zal je merken dat dit niet altijd zo eenvoudig is. Als je echter deze afbeeldingen en teksten in aparte cellen van een tabel plaatst, dan kan je deze zeer goed t.o.v. elkaar uitlijnen door de breedte en hoogte van de verschillende cellen aan te passen. Vandaar dat binnen webpagina’s tabellen gebruikt worden om pagina’s creatief op te maken. Hoe ga je best te werk? Schets eerst op een blad hoe je de pagina wenst op te maken. Bepaal vervolgens welke tabel je hiervoor nodig hebt en uit hoeveel kolommen en rijen deze moet bestaan. Maak nu in je webpagina een tabel met evenveel kolommen en rijen. Voorzie de verschillende cellen met de juiste inhoud, pas hun stijlkenmerken, breedte en hoogte aan. Als je tevreden bent over de opmaak, zet dan de border van de tabel op 0 en je hebt op een eenvoudige manier een complexe pagina lay-out aangemaakt.
18. Back-up maken Via de functie Back-up in het menu “Sync” is het mogelijk een back-up te maken van de HTML pagina’s (“Make new back-up”). De vorige back-up wordt daarbij overschreven. Daarnaast is het via “Restore selected file” mogelijk om een bepaalde pagina te overschrijven met de back-up versie van die pagina. Ofwel worden via “Restore all” alle pagina’s teruggehaald uit de back-up.
19. Metatags toevoegen Meta-omschrijvingen en key words zijn termen en woorden die je koppelt aan een pagina waardoor je kan worden opgespoord door een zoekmachine. Het zijn bv. woorden die te maken hebben met je product, dienst, locatie,… Via de functie META in het “extra menu” is het mogelijk om iedere inhoudspagina te voorzien van een meta-omschrijving en key-words. Vul daartoe de ‘description’ en ‘key-words’ in en bevestig via ok.
