Deze pagina werd 6775 keer bekeken.
Ontwerp handleiding WB5 en uitwerking: Nanno Koerts (http://kiektoestel.nl)
Ontwikkelaar WB5: Pablo van der Meer (http://www.pablosoftwaresolutions.nl)
© 2007-2008 by Pablo Software Solutions
Ontwikkelaar WB5: Pablo van der Meer (http://www.pablosoftwaresolutions.nl)
© 2007-2008 by Pablo Software Solutions
 |
3.0 Werken met de Toolbox: Algemeen
De Toolbox bevat alle tools die je nodig hebt om een flitsende website te maken.
Op de komende pagina’s gaan we uitleg geven over de soorten tools, wat ze doen en hoe je ze moet gebruiken.
Iedere tool is vanuit de Toolbox het werkveld in te slepen met de linkermuisknop ingedrukt.
We beginnen in ‘Algemeen’.
De Toolbox bevat alle tools die je nodig hebt om een flitsende website te maken.
Op de komende pagina’s gaan we uitleg geven over de soorten tools, wat ze doen en hoe je ze moet gebruiken.
Iedere tool is vanuit de Toolbox het werkveld in te slepen met de linkermuisknop ingedrukt.
We beginnen in ‘Algemeen’.
Opmerkingen:
• Roteren van grote afbeeldingen of vormen kan traag zijn.
• Roteren van afbeeldingen of vormen kan de weergave kwaliteit van het object beïnvloeden.
| · | Genummerde (of geordende lijsten), waarin de items worden voorafgegaan door een nummer. |
| · | Ongenummerde (of ongeordende lijsten), waarin de items worden voorafgegaan door een opsommingsteken (of bullet). |
| Hoe kan ik.. Hoe kan ik de tekst van een item aanpassen? Dubbel klik het item om de tekst te wijzigen. Het wijzigen van de opmaak van de tekst gaat op dezelfde manier als bij normale tekst. Hoe kan ik een nieuw item toevoegen? Klik met de rechtermuisknop op de lijst om het context menu weer te geven en selecteer: ‘Item invoegen’. Hoe kan ik een item verwijderen? Klik met de rechtermuisknop op de lijst om het context menu weer te geven en selecteer Item verwijderen. Hoe kan ik het volgende item in de lijst selecteren met het toetsenbord? Gebruik de Tab-toets om naar het volgende item te gaan. Hoe kan ik de afstand tussen de bullet en de tekst aanpassen? Beweeg de muis tussen de bullet en de tekst (de cursor verandert nu in een resize cursor). Sleep nu de (onzichtbare) rand om de afstand groter of kleiner te maken. |
3.5 Horizontale lijn
Een ‘Horizontale lijn‘ toevoegen om bijvoorbeeld onderscheid te maken tussen twee objecten.
De hoogte en breedte van de lijn zijn aan te
passen evenals de kleur en de vulling van de lijn.
Lijnkleur:
Vaste lijn (geen schaduw): NIET aangevinkt
wordt de lijn in een 3-D weergave getoond.
Kleur:
Bij de selectie van de ‘Vaste lijn’ kan de kleur
van de lijn gekozen worden.
Een ‘Horizontale lijn‘ toevoegen om bijvoorbeeld onderscheid te maken tussen twee objecten.
De hoogte en breedte van de lijn zijn aan te
passen evenals de kleur en de vulling van de lijn.
Lijnkleur:
Vaste lijn (geen schaduw): NIET aangevinkt
wordt de lijn in een 3-D weergave getoond.
Kleur:
Bij de selectie van de ‘Vaste lijn’ kan de kleur
van de lijn gekozen worden.
Merk op dat er geen verticale lijn bestaat
binnen de HTML specificatie.
Gebruik hiervoor het ‘Vorm’ object.
binnen de HTML specificatie.
Gebruik hiervoor het ‘Vorm’ object.
3.7 Marquee
Met het Marquee object wordt een scrollende tekst, ook wel lichtkrant genoemd, in een
webpagina opgenomen.
Met het Marquee object wordt een scrollende tekst, ook wel lichtkrant genoemd, in een
webpagina opgenomen.
_3.8b_ Kolom verwijderen
[Tabel à Kolom verwijderen]
Gebruik deze functie om de geselecteerde kolom te verwijderen.
_3.8c_ Rij verwijderen
[Tabel à Rij verwijderen]
Gebruik deze functie om de geselecteerde rij te verwijderen.
_3.8d_ Cellen samenvoegen
[Tabel à Cellen samenvoegen]
Twee of meer naast elkaar liggende cellen samenvoegen.
NOTE: Samenvoegen is alleen mogelijk indien de cellen zich in dezelfde rij bevinden.
_3.8d_ Cellen splitsen
[Tabel à Cellen splitsen]
Splits de geselecteerde cel in kolommen.
Het is dus ALLEEN mogelijk de cellen verticaal te splitsen.
Tips:
| 1. | Houdt tijdens het veranderen van de grootte van de tabel de Ctrl-toets ingedrukt om de laatste kolum/rij te wijzigen zonder de andere cellen te beïnvloeden. |
| 2. | Houdt tijdens het selecteren van een cel de Ctrl-toets ingedrukt om meerdere cellen te selecteren. |
| 3. | Om alle cellen in een rij in één keer te selecteren ga je met de muis net iets voor de rand staan van de eerste cel (linkerkant van de tabel) totdat je een klein pijltje ziet. Klik dan op de linkermuisknop. |
| 4. | Om alle cellen in een kolom in één keer te selecteren ga je met de muis net iets voor de rand staan van de eerste cel (bovenkant van de tabel) totdat je een klein pijltje ziet. Klik dan op de linkermuisknop. |
| 5. | Om de eigenschappen van meerdere geselecteerde cellen in één keer te wijzigen, selecteer dan eerst de cellen en kies vervolgens [Tabel à Cel eigenschappen]. |
| 6. | Om bijvoorbeeld een afbeelding in het midden van een cel te plaatsen doe dan het volgende: Open [Tabel à Cel eigenschappen], geef de achtergrondafbeelding op, stel de ‘Herhaal’ optie in op 'Niet herhalen' en zet ‘Horizontaal/Verticaal uitlijnen’ op 'Centreren'. |
TIP: Via [Extra à Opties à Geavanceerd] kun je de modus wijzigen om direct bij het plaatsen van het tekstvak de tekst te bewerken. Dubbelklikken is dan niet nodig als je een ‘tekstvak’ selecteert op je werkblad.
| Links uitlijnen |
| Centreren |
| Rechts uitlijnen |
U i t v u l l e n |
| · | Schijf |
| ¡ | Cirkel |
| n | Vierkant |
| 1. | Nummers (1, 2, 3) |
| a. | Kleine letters (a, b, c) |
| A. | Hoofdletters (A, B, C) |
| i. | Klein Romeins (i, ii, iii) |
| I. | Groot Romeins(I, II, III) |
|
Zelf te kiezen afbeelding |
Om een ‘bulleted list’ in de pagina toe te voegen sleep je deze tool vanuit de Toolbox op je werkblad. Selecteer vervolgens het aantal onderdelen dat de lijst in eerste instantie moet bevatten en kies de bullet soort.
Soorten bullets:
Soorten bullets:
3.1 Selectie
De tool ‘Selectie’ gebruiken we om met de muis enkele of
meerdere objecten te selecteren. Bij het selecteren van
meerdere objecten houdt je de linkermuisknop ingedrukt en
ga je met een slepende beweging over de objecten heen.
Of klik op een object, houd de 'Shift-toets' ingedrukt en klik
op een ander object. Herhaal het klikken totdat je alle
gewenste objecten hebt geselecteerd.
De tool ‘Selectie’ gebruiken we om met de muis enkele of
meerdere objecten te selecteren. Bij het selecteren van
meerdere objecten houdt je de linkermuisknop ingedrukt en
ga je met een slepende beweging over de objecten heen.
Of klik op een object, houd de 'Shift-toets' ingedrukt en klik
op een ander object. Herhaal het klikken totdat je alle
gewenste objecten hebt geselecteerd.
3.2 Roteren
De tool ‘Roteren’ is handig om afbeeldingen of vormen links- of rechtsom te draaien.
Selecteer het object dat je wilt roteren en beweeg de muis over één van de selectie 'handles' (handvaten) totdat de roteercursor wordt weergegeven.
Houd de linkermuisknop ingedrukt en beweeg in de richting waarin het object moet worden geroteerd, laat vervolgens de muisknop los.
Druk tijdens het roteren de Shifttoets in om in stappen van 15° te roteren.
De tool ‘Roteren’ is handig om afbeeldingen of vormen links- of rechtsom te draaien.
Selecteer het object dat je wilt roteren en beweeg de muis over één van de selectie 'handles' (handvaten) totdat de roteercursor wordt weergegeven.
Houd de linkermuisknop ingedrukt en beweeg in de richting waarin het object moet worden geroteerd, laat vervolgens de muisknop los.
Druk tijdens het roteren de Shifttoets in om in stappen van 15° te roteren.
3.3 Ankers
‘Ankers’ (ook wel bookmarks of bladwijzers genoemd) markeren een specifieke locatie op een pagina. M.b.v. een anker kan de bezoeker van de pagina direct naar een bepaald gedeelte van de pagina springen zonder daarvoor te hoeven scrollen. U kunt het anker pictogram op iedere willekeurige plek in de pagina plaatsen, vervolgens kan dan vanuit het Link venster naar dit anker object worden verwezen. Zorg ervoor dat elk anker object binnen een pagina een unieke naam heeft.
‘Ankers’ (ook wel bookmarks of bladwijzers genoemd) markeren een specifieke locatie op een pagina. M.b.v. een anker kan de bezoeker van de pagina direct naar een bepaald gedeelte van de pagina springen zonder daarvoor te hoeven scrollen. U kunt het anker pictogram op iedere willekeurige plek in de pagina plaatsen, vervolgens kan dan vanuit het Link venster naar dit anker object worden verwezen. Zorg ervoor dat elk anker object binnen een pagina een unieke naam heeft.
3.4 Bulleted List
WYSIWYG Web Builder bevat het object ‘Bulleted List’ voor het maken van lijsten, of opsommingen met onderwerpen. Er zijn diversen typen lijsten beschikbaar:
WYSIWYG Web Builder bevat het object ‘Bulleted List’ voor het maken van lijsten, of opsommingen met onderwerpen. Er zijn diversen typen lijsten beschikbaar:
WYSIWYG Web Builder 5
Pablo Software Solutions
 |
 |
3.6 Afbeelding
Selecteer de ‘Afbeelding’ tool en sleep hem naar het werkveld en laat de linkermuisknop los waar je de afbeelding wilt plaatsen.
Er wordt een pop-up venster weergeven waar je gevraagd wordt een afbeelding te kiezen en klik op ‘Openen’. Web Builder zal automatisch de ware afmetingen bepalen en deze weergeven.
De afmetingen van een afbeelding kunnen worden gewijzigd d.m.v. de selectie handvaten (resize handles), die worden weergegeven als kleine vierkantjes op de randen van de afbeelding.
Eventueel kunnen de afmetingen ook worden hersteld naar de originele afmetingen d.m.v. de menu optie [Bewerken à Herstellen originele afmetingen].
Selecteer de ‘Afbeelding’ tool en sleep hem naar het werkveld en laat de linkermuisknop los waar je de afbeelding wilt plaatsen.
Er wordt een pop-up venster weergeven waar je gevraagd wordt een afbeelding te kiezen en klik op ‘Openen’. Web Builder zal automatisch de ware afmetingen bepalen en deze weergeven.
De afmetingen van een afbeelding kunnen worden gewijzigd d.m.v. de selectie handvaten (resize handles), die worden weergegeven als kleine vierkantjes op de randen van de afbeelding.
Eventueel kunnen de afmetingen ook worden hersteld naar de originele afmetingen d.m.v. de menu optie [Bewerken à Herstellen originele afmetingen].
Link maken
Een link gebruikt u om naar iets anders door te verwijzen. Dit kan een andere pagina zijn of naar een andere website. Web Builder heeft tevens smartlinks die het linken nog makkelijker maken.
Ga met je muis op het pijltje staan naast 'Web site' om te zien welke soorten links er zijn.
Meer over het maken van links vind u via de indexpagina.
Events
Voor als u een andere afbeelding wilt laten zien als je met de muis op een afbeelding gaat staan, dan kunt u een event gebruiken.
Meer info via de index.
Een link gebruikt u om naar iets anders door te verwijzen. Dit kan een andere pagina zijn of naar een andere website. Web Builder heeft tevens smartlinks die het linken nog makkelijker maken.
Ga met je muis op het pijltje staan naast 'Web site' om te zien welke soorten links er zijn.
Meer over het maken van links vind u via de indexpagina.
Events
Voor als u een andere afbeelding wilt laten zien als je met de muis op een afbeelding gaat staan, dan kunt u een event gebruiken.
Meer info via de index.
Er zijn diverse opties binnen Web Builder om uw afbeelding te verfraaien door het plaatsen van effecten. Meer hierover kunt u op een aparte pagina bekijken (klik hier).
 |
 |
Snelheid:
Met de Vertraging in combinatie met de Afstand, bepaalt u hoe snel de tekst over het scherm zal scrollen.
Weergave:
Hier kunt u het gedrag bepalen van de tekst. De opties zijn: Scroll (rollen), Slide (schuiven) of Alternate (bepaald zelf de keuze).
En u kunt een eigen achtergrondkleur kiezen voor de lichtkrant.
Met de Vertraging in combinatie met de Afstand, bepaalt u hoe snel de tekst over het scherm zal scrollen.
Weergave:
Hier kunt u het gedrag bepalen van de tekst. De opties zijn: Scroll (rollen), Slide (schuiven) of Alternate (bepaald zelf de keuze).
En u kunt een eigen achtergrondkleur kiezen voor de lichtkrant.
3.8 Tabel invoegen
Sleep deze tool naar de gewenste positie in het werkveld. Na het loslaten van de muis wordt een pop-up venster getoond om de tabel eigenschappen in te voeren.
Grootte:
Vul het gewenste aantal rijen en kolommen van de tabel in. Deze zijn later ook nog extra toe te voegen.
Indeling:
Bij ‘Randdikte’ bepaalt u de dikte van de lijn om de cel. Als u '0' invoert, zal er geen lijn worden weergeven.
Bij ‘Cel opvullen’ bepaalt u de ruimte tussen de tekst en de rand van de cel.
Bij ‘Tussenruimte cellen’ bepaalt u de ruimte die tussen alle cellen uitgevoerd zal worden.
Sleep deze tool naar de gewenste positie in het werkveld. Na het loslaten van de muis wordt een pop-up venster getoond om de tabel eigenschappen in te voeren.
Grootte:
Vul het gewenste aantal rijen en kolommen van de tabel in. Deze zijn later ook nog extra toe te voegen.
Indeling:
Bij ‘Randdikte’ bepaalt u de dikte van de lijn om de cel. Als u '0' invoert, zal er geen lijn worden weergeven.
Bij ‘Cel opvullen’ bepaalt u de ruimte tussen de tekst en de rand van de cel.
Bij ‘Tussenruimte cellen’ bepaalt u de ruimte die tussen alle cellen uitgevoerd zal worden.
_3.8a_ Extra rijen of kolommen toevoegen
[Tabel à Rijen of kolommen toevoegen]
Met deze optie kunt u extra rijen of kolommen
aan een bestaande tabel toevoegen.
• Links van de selectie
• Rechts van de selectie
• Boven selectie
• Onder selectie
[Tabel à Rijen of kolommen toevoegen]
Met deze optie kunt u extra rijen of kolommen
aan een bestaande tabel toevoegen.
• Links van de selectie
• Rechts van de selectie
• Boven selectie
• Onder selectie
_3.8f_ Tabel HTML
[Tabel à Tabel HTML]
Geeft de aangemaakte HTML weer van de tabel.
Het is ook mogelijk uw eigen HTML code toe
te voegen!
_3.8g_ Cel eigenschappen
[Tabel à Cel eigenschappen]
Achtergrondkleur
Met dit attribuut kan de achtergrondkleur van een
cel bepaald worden. Automatisch zorgt
voor een transparante cel opvulling.
Achtergrondafbeelding
Met dit attribuut kan een achtergrond-
afbeelding voor de cel bepaald worden.
Herhaal
Bepaalt de ‘herhaal’ eigenschappen van
de achtergrondafbeelding.
Mogelijke opties zijn:
• Herhaal in beide richtingen
• Herhaal in horizontale richting
• Herhaal in verticale richting
• Niet herhalen
Daarnaast kun je bepalen hoe de
afbeelding binnen de cel uitgelijnd dient
te worden en kan je de rand van de cel
een eigen kleur geven.
[Tabel à Tabel HTML]
Geeft de aangemaakte HTML weer van de tabel.
Het is ook mogelijk uw eigen HTML code toe
te voegen!
_3.8g_ Cel eigenschappen
[Tabel à Cel eigenschappen]
Achtergrondkleur
Met dit attribuut kan de achtergrondkleur van een
cel bepaald worden. Automatisch zorgt
voor een transparante cel opvulling.
Achtergrondafbeelding
Met dit attribuut kan een achtergrond-
afbeelding voor de cel bepaald worden.
Herhaal
Bepaalt de ‘herhaal’ eigenschappen van
de achtergrondafbeelding.
Mogelijke opties zijn:
• Herhaal in beide richtingen
• Herhaal in horizontale richting
• Herhaal in verticale richting
• Niet herhalen
Daarnaast kun je bepalen hoe de
afbeelding binnen de cel uitgelijnd dient
te worden en kan je de rand van de cel
een eigen kleur geven.
_3.8e_ Tabel eigenschappen
[Tabel à Tabel eigenschappen]
Rand dikte:
Dit attribuut bepaalt de dikte van het kader
van de tabel (de buitenrand).
Cel opvullen:
Met dit attribuut wordt de afstand tussen
de rand van een cel en de inhoud vastgelegd.
Tussenruimte:
Met dit attribuut wordt de ruimte tussen de
cellen van een tabel en de ruimte tussen de
buitenste cellen en de tabelrand vastgelegd.
Achtergrondkleur:
Met dit attribuut kan de achtergrondkleur
van de gehele tabel bepaald worden.
Achtergrondafbeelding:
Met dit attribuut kan een achtergrondafbeelding
voor de tabel bepaald worden. De afbeelding
wordt zo vaak gedupliceerd, dat de hele tabel er
mee bedekt is.
Randkleur:
Met dit attribuut kan de kleur van de randen van
de tabel bepaald worden.
[Tabel à Tabel eigenschappen]
Rand dikte:
Dit attribuut bepaalt de dikte van het kader
van de tabel (de buitenrand).
Cel opvullen:
Met dit attribuut wordt de afstand tussen
de rand van een cel en de inhoud vastgelegd.
Tussenruimte:
Met dit attribuut wordt de ruimte tussen de
cellen van een tabel en de ruimte tussen de
buitenste cellen en de tabelrand vastgelegd.
Achtergrondkleur:
Met dit attribuut kan de achtergrondkleur
van de gehele tabel bepaald worden.
Achtergrondafbeelding:
Met dit attribuut kan een achtergrondafbeelding
voor de tabel bepaald worden. De afbeelding
wordt zo vaak gedupliceerd, dat de hele tabel er
mee bedekt is.
Randkleur:
Met dit attribuut kan de kleur van de randen van
de tabel bepaald worden.
_3.8h_ Cel HTML
[Tabel à Cel HTML]
Geeft de aangemaakte HTML weer van de cel. Het is ook mogelijk uw eigen HTML code toe te voegen!
[Tabel à Cel HTML]
Geeft de aangemaakte HTML weer van de cel. Het is ook mogelijk uw eigen HTML code toe te voegen!
3.9 Tekst
Met de tool ‘tekst’ kun je een ‘tekstvak’ toevoegen op je pagina.
Sleep de tool met de linkermuisknop ingedrukt naar positie waar je de tekst wilt plaatsen en laat je muisknop los.
Het tekstvak kan nu in de breedte richting uitgetrokken worden m.b.v. de selectie hendels.
De hoogte wordt bepaald door de ingevoerde tekst.
De tekst kan ingevoerd worden door in het tekstvak dubbel te klikken met de linkermuisknop.
Met de tool ‘tekst’ kun je een ‘tekstvak’ toevoegen op je pagina.
Sleep de tool met de linkermuisknop ingedrukt naar positie waar je de tekst wilt plaatsen en laat je muisknop los.
Het tekstvak kan nu in de breedte richting uitgetrokken worden m.b.v. de selectie hendels.
De hoogte wordt bepaald door de ingevoerde tekst.
De tekst kan ingevoerd worden door in het tekstvak dubbel te klikken met de linkermuisknop.
Links (koppelingen):
Tekst kan links bevatten naar bijvoorbeeld een andere website of andere pagina binnen je website.
Dit onderdeel wordt apart behandeld in deze handleiding.
Tekst kan links bevatten naar bijvoorbeeld een andere website of andere pagina binnen je website.
Dit onderdeel wordt apart behandeld in deze handleiding.
Converteer tekst naar afbeelding:
Het gebruik van lettertypen op Internet is een bekend probleem. Webpagina’s worden weergegeven met het lettertype wat bij de gebruiker op de computer is geïnstalleerd. Het is dus niet het geval dat jou gekozen lettertype op elke computer zichtbaar getoond wordt zoals je de pagina hebt opgemaakt.
Web Builder heeft dus de optie om je tekst te publiceren als afbeelding. Dit wordt geconverteerd naar een *.gif afbeelding.
Hiermee voorkom je dus dat de bezoeker van je website niet de juiste opmaak voor zich ziet.
Het gebruik van lettertypen op Internet is een bekend probleem. Webpagina’s worden weergegeven met het lettertype wat bij de gebruiker op de computer is geïnstalleerd. Het is dus niet het geval dat jou gekozen lettertype op elke computer zichtbaar getoond wordt zoals je de pagina hebt opgemaakt.
Web Builder heeft dus de optie om je tekst te publiceren als afbeelding. Dit wordt geconverteerd naar een *.gif afbeelding.
Hiermee voorkom je dus dat de bezoeker van je website niet de juiste opmaak voor zich ziet.
 |