Snelstarthandleiding voor gebruikers

Transcription

Snelstarthandleiding voor
gebruikers
Web Creator Pro 6 - Snelstarthandleiding
Inhoud
Inleiding tot Web Creator Pro 6 ...................................................................................................... 4
Snelstarthandleiding........................................................................................................................ 6
Een sjabloon openen ................................................................................................................... 6
Een afbeelding aanpassen ........................................................................................................... 9
Een element aan de pagina toevoegen ..................................................................................... 10
Het menu aanpassen ................................................................................................................. 13
Een koppeling naar een andere pagina maken ......................................................................... 13
Uw website in een browser testen............................................................................................ 16
Inleiding in blokken ................................................................................................................... 16
Blokken gebruiken ..................................................................................................................... 18
Het project afronden ................................................................................................................. 18
1.
H1...H6 Kopteksttags ......................................................................................................... 18
2.
Metatags............................................................................................................................ 19
3.
Google Analytics ................................................................................................................ 19
SiteMap ..................................................................................................................................... 19
De website uploaden ................................................................................................................. 20
1.
Optimaliseren .................................................................................................................... 20
2.
Regenereren ...................................................................................................................... 20
3.
Uploaden ........................................................................................................................... 20
Gedetailleerde interfacepresentatie ............................................................................................. 20
De snelle werkbalk .................................................................................................................... 21
Het Lint ...................................................................................................................................... 22
Tabblad Bestand .................................................................................................................... 22
Tabblad Start ......................................................................................................................... 23
Tabblad Project...................................................................................................................... 24
Tabblad Pagina ...................................................................................................................... 24
Vernieuwen ............................................................................................................................... 25
Tabblad Invoegen .................................................................................................................. 26
Tabblad Selectie .................................................................................................................... 27
Pagina 2 / 63
Tabblad Formaat ................................................................................................................... 27
Tabblad Web ......................................................................................................................... 27
Paginagewicht ........................................................................................................................... 28
Tabblad Extra ......................................................................................................................... 28
Tabblad Help.......................................................................................................................... 29
Werkbalk Elementen ................................................................................................................. 29
Een element invoegen ........................................................................................................... 29
Elementeigenschappen ......................................................................................................... 30
Elementhiërarchie ................................................................................................................. 30
Het algemene gedeelte ......................................................................................................... 30
Het gedeelte Opmaak............................................................................................................ 32
Het gedeelte Sociaal .............................................................................................................. 35
Het gedeelte Multimedia ...................................................................................................... 36
Het gedeelte Gegevens ......................................................................................................... 37
De lijst met elementen .............................................................................................................. 39
Het tabblad Elementen ......................................................................................................... 40
Tabblad Blokken .................................................................................................................... 41
De werkbalk Eigenschappen...................................................................................................... 41
Het tabblad Elementen ......................................................................................................... 42
Tabblad Opties....................................................................................................................... 42
Tabblad Acties ....................................................................................................................... 42
Tabblad Rollover .................................................................................................................... 42
Tabblad Koppeling ................................................................................................................. 42
Tabblad Positie ...................................................................................................................... 42
Tabblad Eigenschappen ......................................................................................................... 43
Containerelementen: vakken en panelen ..................................................................................... 43
Containers ................................................................................................................................. 43
Verschillen tussen panelen en vakken ...................................................................................... 43
Een opmaak met containers maken .......................................................................................... 43
Elementen aan een container toevoegen ................................................................................. 44
Een element aan een container toevoegen .......................................................................... 44
Meerdere elementen aan een container toevoegen ............................................................ 45
Pagina 3 / 63
Blokken ...................................................................................................................................... 45
Eigenschappen van vakken en panelen..................................................................................... 45
Panelen ...................................................................................................................................... 46
Vakken ....................................................................................................................................... 46
Vakken ....................................................................................................................................... 46
Hulpmiddelen voor uitlijning en positionering.............................................................................. 47
Het raster................................................................................................................................... 47
Positiehulplijnen ........................................................................................................................ 48
Zweven en wissen ......................................................................................................................... 50
Zweven ...................................................................................................................................... 51
Beperkingen voor positioneren ................................................................................................. 52
Optimaal profiteren van zweven ............................................................................................... 55
Een zwevend element toevoegen ............................................................................................. 55
Zwevende elementen verplaatsen ............................................................................................ 56
Gebruik van het zweefgedrag ................................................................................................... 57
Het gedrag Wissen..................................................................................................................... 59
Groepen gebruiken........................................................................................................................ 59
Blokken gebruiken ......................................................................................................................... 60
Inleiding in blokken ................................................................................................................... 60
Een blok maken ......................................................................................................................... 60
Een blok hergebruiken .............................................................................................................. 62
Waarschuwingen voor het gebruik van blokken ....................................................................... 62
Samengevat: .............................................................................................................................. 62
Ideale blokafmetingen............................................................................................................... 62
Helderheid en doorzichtigheid ...................................................................................................... 63
Inleiding tot Web Creator Pro 6
Web creator Pro 6 is een krachtige toepassing waarmee gebruikers met weinig tot geen
computervaardigheden in een handomdraai professioneel ogende websites kunnen maken. U
hebt al binnen enkele minuten een prachtige website.
Web Creator is speciaal ontworpen voor gebruikers die de behoefte hadden aan een eenvoudig
en krachtig programma om websites mee te maken. Met de gemiddelde gebruiker in ons
Pagina 4 / 63
achterhoofd gingen we aan de slag om een programma te ontwikkelen waarmee zij hun
creativiteit de vrije loop konden laten, zonder gedoe met programmeren en ingewikkelde
opmaakcodes.
Stapsgewijs kwam onze oplossing tot stand, geleid door de feedback van gebruikers en de
behoefte om eindgebruikers een weergaloze ervaring te bieden, zonder eenvoud uit het oog te
verliezen.
Web Creator Pro 6 is zonder twijfel onze meest geavanceerde versie ooit. Bij het ontwikkelen
van deze verise hielden we rekening met nieuwe technologische ontwikkelingen zoals het snel
stijgende aantal gebruikers van smartphones en mobiele browsers, de steeds groter wordende
wereld van sociale netwerken en beveiligde betalingen via PayPal, en we hebben ervoor gezorgd
dat deze innovaties makkelijk kunnen worden geïmplementeerd. In deze versie is het nog
eenvoudiger om deze technologieën weer te geven en te rangschikken met onze gloednieuwe
containers, te verplaatsen met onze opties voor Zweven en aan te passen met tabbladen en
accordeons.
Het maken van een website is aangenaam eenvoudig; u kunt met een blanco project beginnen
of een van de vele sjablonen gebruiken als u hulp nodig hebt bij het maken van een website.
Zodra dat achter de rug is, hoeft u maar op één knop te drukken om uw website online te
zetten.
Lees deze startersgids voor Web Creator Pro 6 op uw gemak door en leer over hoe u diverse
elementen aanpast, koppelingen maakt en pagina's beheert. Met behulp van deze gids maakt u
uw eerste 2 pagina's en leert u krachtige organisatiehulpmiddelen zoals het Blok, de Containers
en de optie Zweven gebruiken. Aan het eind laten we u zien hoe u het meeste uit uw website
haalt en hoe u uw website online zet.
In deze handleiding treft u diverse keren dit symbool aan.
Dit symbool geeft een nieuwe functie of verbetering aan die uniek is voor Web Creator Pro 6.
Pagina 5 / 63
Snelstarthandleiding
Om te beginnen bekijken we ons virtuele canvas.
In de Gedetailleerde interfacepresentatie worden alle bovengenoemde onderdelen volledig
uitgelegd.
Een sjabloon openen
Open Web Creator Pro 6 als u dit nog niet hebt gedaan. Ga naar het tabblad Bestand en
selecteer Nieuw project. Er wordt een tipvenster geopend, met details over het gebruik van de
Blokken en Sjablonen. Sluit dit venster nadat u het gelezen hebt. De wizard Website maken
wordt geopend. Deze wizard bevat de sjablonen voor Web Creator Pro 6.
Pagina 6 / 63
De wizard bevat naast de optie om met een lege pagina te starten tevens 8 sjablonen met alle
elementen die essentieel zijn om een complete website te maken.
Boven aan het scherm staan vier tabbladen: Stijl, Pagina, Thema's en Kleur/Voorbeeld. We
zullen de andere tabbladen straks behandelen, maar we richten ons nu even op deze.
Net onder de tabbladen ziet u drie keuzerondjes met de labels “Versie 6”, “Versie 5” en “Vorige
versies”. Als u op deze keuzerondjes klikt, krijgt u toegang tot verschillende sjablonen.
Er zijn intussen gloednieuwe functies aan Web Creator Pro 6 toegevoegd, dus deze staan nog
niet in de oudere sjablonen. We raden u aan deze te gebruiken nadat u de basisconcepten
omtrent het gebruik van Web Creator Pro 6 hebt leren kennen, zodat u optimaal van deze
sjablonen kunt profiteren.
Ga terug naar het keuzerondje voor versie 6 en blader omlaag met de balk aan de rechterkant.
Laten we als voorbeeld Stijl 5 van Versie 6 gebruiken. Selecteer deze stijl en druk op de toets
Volgende of dubbelklik op het sjabloon. Als het goed is, is nu het tabblad Pagina geopend.
Boven in het scherm staan een aantal velden. Paginanaam geldt voor de “interne” naam van die
pagina, oftewel de bestandsnaam. De 'titel' daarentegen is de naam die helemaal boven in een
webbrowser wordt weergegeven. Met het veld Taal hebt u de mogelijkheid om de taal van uw
website te wijzigen. Dit is standaard dezelfde taa als die van uw besturingssysteem.
Pagina 7 / 63
In het hoofdgebied hebt u de keuze uit een blanco pagina en verschillende
Paginaopmaakstijlen.
Sjabloon A en B zijn redelijk eenvoudig en bevatten maar enkele lege blokken. De pagina's Start
en Presentatie bestaan voor het grootste deel uit tekst en zeer meer geschikt voor websites met
een zakelijke strekking. De pagina's Product en Producten bevatten meer details, met een
afbeeldingenblok en gecombineerde blokken met tekst en een foto, waardoor deze pagina's
meer geschikt zijn om galerijen en gestructureerde lijsten weer te geven.
De naam van het project en de desbetreffende map op de schijf staan onder in het scherm. Als u
de muis boven het mapveld beweegt, ziet u het volledige pad. Standaard is dit Web Creator. De
map van Web Creator bevindt zich in Mijn documenten op uw Windows-platform, maar u kunt
dit wijzigen als u uw project liever ergens anders opslaat.
Kies voor deze introductie de pagina Start.
Hierdoor wordt de pagina Thema's geopend. Als het goed is, is deze pagina leeg. Dit tabblad is
bedoeld om banners of achtergronden aan pagina's toe te voegen, maar dit is nu uitgeschakeld.
Door nieuwe opties zoals de helderheid en de doorzichtigheid van afbeeldingen zijn ongekende
effecten mogelijk die voorheen niet beschikbaar waren (zie het hoofdstuk Helderheid en
doorzichtigheid).
Ga verder naar het volgende en laatste tabblad: Kleur/Voorbeeld. Vanaf hier kunt u het palet
wijzigen. Het palet is het kleurenoverzicht dat op al uw pagina's wordt toegepast. Het veld Stijl
links boven op de pagina geeft de algemeen toon weer die op uw pagina-elementen wordt
toegepast. U kunt de lijst in het veld Stijl openen en uit meer dan 170 kleurencombinaties
kiezen. Het is belangrijk dat u een palet kiest dat past bij het type website dat u maakt en dat
het weerspiegelt wat u met de website wilt uitdragen.
Voor ons voorbeeld kiezen we de stijl Honolulu.
Hieronder ziet u de bestandsnaam van het palet en de kleuren waaruit het palet bestaat. Het is
belangrijk dat u weet dat u met behulp van de knoppen rechts van de lijst met kleuren de
kleuren kunt aanpassen en dat u elk willekeurig palet kunt opslaan, dupliceren en verwijderen.
Voltooi uw keuze door op de knop Voltooien te klikken. Er wordt kort een klein dialoogvenster
met een voortgangsbalk weergegeven terwijl uw eerste pagina wordt samengesteld.
Pagina 8 / 63
Een afbeelding aanpassen
In de linkerbovenhoek staat een LOGO-afbeelding. Als u hier op klikt, wordt een selectierand
weergegeven waarmee het formaat van deze afbeelding via een van de vier hoeken kunt
aanpassen. Deze rand laat u weten dat de focus op het object is gericht. Elk element in Web
Creator Pro 6 kan op deze manier worden gemanipuleerd.
Als u aan de rechterkant van uw interface kijkt, moet u daar de woorden LogoEdit zien. Dit is de
naam van het element. In dit deelvenster wordt altijd weergegeven welk element is
geselecteerd. Hieronder staan tabbladen met opties om het element aan te passen. Als u een
element selecteert, wordt het tabblad Elementen altijd als eerste geopend. Helemaal boven in
dit tabblad staat het veld Bestand met daarnaast 4 pictogrammen. U krijgt toegang tot de
afbeeldingenbibliotheek die bij Web Creator Pro 6 is meegeleverd. Als tweede wordt een
dialoogvenster geopend met de vraag om naar een afbeeldingenbestand op uw computer te
bladeren en de logo-afbeelding te vervangen. Als u geen logo hebt, kunt u er een kiezen uit de
afbeeldingenbibliotheek.
Pagina 9 / 63
Het veld Bestand bevat opties voor de toepassing en de eigenschappen van de afbeelding.
Het selectievakje Hoogte-breedteverhouding behouden is standaard ingeschakeld. Hierdoor
kunt u het formaat van afbeeldingen aanpassen en daarbij de oorspronkelijke weergave en
verhoudingen behouden. In sommige gevallen wilt u mogelijk echter afbeeldingen uitrekken. U
kunt dit doen door het selectievakje uit te schakelen. Als deze optie is uitgeschakeld, worden
nieuwe bedieningselementen weergegeven waarmee u het formaat vrij kunt aanpassen.
Een element aan de pagina toevoegen
Laten we zeggen dat we, op zo eenvoudig mogelijke wijze, een slogan naast ons logo willen
plaatsen. Uiterst links in Web Creator Pro 6 vindt u de werkbalk Elementen. Deze werkbalk
bevat vrijwel alle elementen die op een pagina kunnen worden ingevoegd en is altijd
beschikbaar. Op het tabblad Invoegen via het Lint staan meer contextspecifieke elementen.
Vanaf het lint zijn de algemene elementen hier ook beschikbaar, maar elementen van de
bibliotheek zijn in 4 eenvoudig te openen categorieën verdeeld: Afbeeldingen, Video, Geluid en
Flash animaties.
Laten we nu eens gaan kijken naar de werkbalk Elementen. Klik op de knop Tekst in het
gedeelte Algemeen. Er wordt automatisch een doorzichtig tekstvlak in het midden van de
pagina ingevoerd. De cursor knippert en wacht tot u tekst invoert.
Zodra u tekst hebt ingevoerd, kunt u het eenvoudig aanpassen; selecteer een deel van de tekst
om het vanaf het tabblad Start in het lint eenvoudig het lettertype, de lettergrootte, het
tekengewicht, de uitlijining en de inspringing wijzigen en zelfs een koppeling toevoegen. Laten
we kiezen voor Brush Script MT en een lettergrootte van 40 punten voor maximale
leesbaarheid.
Pagina 10 / 63
Uiterst rechts op het tabblad Start staat een knop waarmee u desgewenst opmaak kunt
verwijderen en kunt terugkeren naar uw tekst met de standaardinstellingen.
Nu de tekst is aangepast, kunt u met de groene bediengingselementen het formaat van het
element wijzigen zodat de tekst past. U kunt nogmaal op het element Tekst klikken als u de
inhoud moet bewerken.
Inleiding tot elementen van de Container
Laten we ons tekstelement naast het logo plaatsen door op de rand ervan te
klikken en het er naartoe te slepen. Er moet automatisch een groene rand om het omliggende
gebied verschijnen om aan te geven dat u een element in een Container plaatst. Wat u hier in
feite doet, is dat u een tekstelement aan een element dat Paneel heet, toevoegt. Panelen, zoals
Vakken, zijn een speciaal soort elementen die we Hoofdelements/Containers noemen. Lees het
hoofdstuk Containerelementen: vakken en panelen voor een gedetailleerde uitleg hierover.
Inleiding in de functie Zweven
Zweven is een belangrijke functies achter de schermen van Web Creator Pro 6. In
combinatie met de Containers kan deze functie de productiviteit echt een boost geven. Zweven
heeft te maken met de automatische plaatsing van elementen op een webpagina en is nauw
verwant aan CSS (Cascading Style Sheets, oftewel trapsgewijze stijlbladen, voor webpagina's).
Selecteer uw logo en probeer het een beetje naar rechts te verplaatsen (in een rechte lijn zodat
u geen andere elementen verstoort). Ziet u dat het logo weer op de oorspronkelijke plaats
wordt teruggezet? Als u het tekstvak hebt verplaatst, weet u dat het tekstelement niet op deze
manier werkt.
Dit komt doordat de twee elementen zich op verschillende manieren gedragen. Zweven, of
specifieker gezegd: Links zweven, duwt het logo naar de linkerbovenhoek van de container
waarin het logo is geplaatst. Ons tekstelement wordt niet door deze regel beperkt, omdat dit
gedrag niet voor dit element is ingeschakeld.
Selecteer het tekstelement en ga naar het tabblad Positie. Schakel het gebied Gedrag links
zweven onderaan in. Uw tekstelement wordt automatisch rechtsboven het logo geplaatst. Als u
het tekstelement naar rechts probeert te verplaatsen, wordt het automatisch weer naast het
logo geplaatst.
Pagina 11 / 63
Dit soort functionaliteit kan de bewerktijd aanzienlijk verkleinen, mits u het op de goede manier
gebruikt. Met dit in het achterhoofd raden we ten zeerste aan het hoofdstuk Zweven en wissen
te lezen voor meer informatie over hun gebruik en hun verband met blokken en containers.
Pagina 12 / 63
Het menu aanpassen
Onder het logo staat een menu met de opties Menu1, Menu2, Menu3, etc. Selecteer het menu
door erop te klikken en ga naar de Werkbalk Eigenschappen rechtsonder. Hier ziet u de diverse
titels die het Menu bevat. Als u op een van de titels klikt, krijgt u de ruimte om de titel te
wijzigen. Laten we zeggen dat we het in "Presentatie" willen vervangen. Eronder wordt een
submenu weergegeven met de naam Nieuw. Klik hierop en wijzig het in "Onze maatschappij" en
maatschappij enzovoorts. Klik op Menu 2 en wijzig het in Producten. Maak ook een aantal
submenu's om het maken van menu's onder de knie te krijgen. Om het geheel nog meer aan te
passen, kunt u op het krijtpictogram naast de visuele Stijl klikken. Hiermee opent u een
dialoogvenster met een aantal parameters om zowel het hoofdmenu als de submenu's aan te
passen.
Een koppeling naar een andere pagina maken
Zodra u de titeltekst van het menu hebt gekozen, bijvoorbeeld Producten, is er onder het
tekstveld een ander veld voor koppelingen beschikbaar. Als u op het krijtpictogram naast dit
veld klikt, wordt het dialoogvenster voor het maken van koppelingen weergegeven.
Normaal gesproken vult u hier een beschrijving in die u eraan herinnert waarnaar deze
koppeling verwijst. Kies vervolgens een van de verschillende koppelingsopties. Doe dit en kies de
eerste optie uit het gedeelte Maak een koppeling naar: een nieuwe pagina of een bestaande
pagina.
Pagina 13 / 63
Omdat u op dit moment alleen nog maar de pagina Starthebt, kunt u er een maken door op de
knop Nieuwe pagina maken te klikken. U keert terug naar het tabblad Pagina van waaruit u het
project hebt gecreëerd. Hier staan nu de pagina's op die bij uw thema passen. Kies nu de pagina
van het type Producten, bevestig de pagina's Thema en Kleur/Voorbeeld en klik op Voltooien. U
keert terug naar de paginaselectie; hier kunt u nu de zojuist gemaakte pagina selecteren.
Druk op OK; nu wordt de naam van uw pagina weergegeven in het koppelingsveld van het
dialoogvenster Koppeling.
Pagina 14 / 63
Druk op OK om naar de editor terug te keren.
Pagina 15 / 63
Uw website in een browser testen
U weet nu dus hoe u Elementen, Menu's, Koppelingen en Pagina's kunt invoegen en aanpassen.
U bent vast benieuwd of het allemaal werkt!
Dat kan!
Ga in het lint naar het tabblad Web. Browsers die op uw pc staan, staan in het eerste gedeelte.
In Web Creator Pro 6 worden Internet Explorer, Mozilla Firefox, Google Chrome, Opera en
Safari automatisch aan het browsergedeelte toegevoegd. U wordt gevraagd uw werk op te
slaan; doe dit om eventueel gemaakte wijzigingen te zien. Vervolgens wordt in de door u
gekozen browser de pagina geladen.
Inleiding in blokken
Als u via de koppeling die u in het menu hebt gemaakt naar de pagina Producten
gaat, ziet u daar het standaardlogo staan, en niet het door u gekozen logo. Het zou geweldig zijn
om hetzelfde logo snel en efficiënt op elke pagina te hebben staan. Het is daarom handig om
wat over Blokken te leren.
We zagen eerder dat onze logoafbeelding deel van een Container met de naam Paneel
uitmaakte. Net boven de werkbalk Eigenschappen aan de uiterst rechterkant van de interface
staat de lijst met elementen. De lijst bevat elk element dat op een pagina staat. De elementen
zijn in een boomstructuur geplaatst die de onderlinge relatie van de elementen en de volgorde
waarin ze zijn gemaakt, weergeeft. Pas de grootte van het gebied aan zodat u de eerste 5
elementen die erin staan, als volgt kunt zien:
Pagina 16 / 63
Bovenaan staat het eerste paneel dat we noemden, met de naam PaneelTitel. Dit paneel bevat
het logo, de tekst van de slogan en een andere afbeelding. Even onder dat paneel ziet u een
paneel dat PaneelMenu heet en alleen het menu bevat.
Klik op PaneelTitel zoals hierboven om het te markeren. Let op hoe u hiermee ook het item op
de pagina selecteert. Aangezien u een paneel met child-elementen hebt geselecteerd, worden
deze automatisch ook geselecteerd, hoewel ze niet zichtbaar zijn.
Klik op het tabblad Blokken dat boven in de lijst met elementen staat. Er wordt een lijst met
vooraf gemaakte blokken weergegeven. U kunt deze blokken op uw pagina slepen om ervoor te
zorgen dat u heel eenvoudig nieuwe inhoud kunt toevoegen. In dit voorbeeld gaan we naar
Aangepast. Dit zal leeg zijn.
Maar laten we dit veranderen. Aangezien het paneel in de editor nog steeds is geselecteerd,
kunt u een nieuw blok met de naam Item 1 creëren door op het plussymbool (+) te klikken. Er
wordt een miniatuurweergave gegenereerd met een overzicht van de elementen waaruit uw
blok bestaat: het paneel, het logo, de tekst en de afbeelding.
Pagina 17 / 63
Blokken gebruiken
Open in het lint het tabblad Pagina. Klik op het pictogram Manager in het gedeelte Pagina's. Er
wordt een venster weergegeven met de twee pagina's die u hebt gemaakt. Hier ziet u enkele
pictogrammen aan de rechterkant. Met het X-pictogram kunt u pagina's verwijderen; met het
derde pictogram kunt u pagina's dupliceren en met het tweede pictogram kunt u de naam van
pagina's wijzigen. Wij gaan het eerste pictogram, waarmee u pagina's kunt maken, gebruiken (u
kunt ook nieuwe pagina's maken met de knop Pagina maken in het paginagedeelte). Behoud de
optie "lege pagina" in de wizard die wordt weergegeven en klik op de knop Voltooien.
Zorg dat het deelvenster Blokken nog steeds is geopend en kies Item 1 in het gedeelte Manager.
Druk vervolgens op Toevoegen aan pagina. Het blok wordt automatisch in de linkerbovenhoek
van de pagina geplaatst. De pagina zelf is een Container van het hoogste niveau en voor het
ingevoegde Paneel is de functie Zweven ingeschakeld. Hierdoor vindt de pagina zelf de positie.
Sla uw project op met behulp van het diskettepictogram op de Snelle werkbalk in de
linkerbovenhoek van de interface. De snelle werkbalk bevat bovendien de browserlijst die voor
het testen van de website wordt gebruikt en het pictogram Ongedaan maken.
Het project afronden
Zodra u al uw pagina's hebt gemaakt, wilt u er zeker van zijn dat uw website gemakkelijk in
zoekopdrachten kan worden gevonden. Web creator Pro 6 heeft een aantal hulpmiddelen om
uw website eenvoudig vindbaar te maken.
1. H1...H6 Kopteksttags; deze kunt u tijdens het maken van de website gebruiken. Deze
zijn beschikbaar via de werkbalk Elementen in het opmaakgedeelte. Dit houdt in dat u
ze, net als alle andere elementen, via de werkbalk Eigenschappen kunt aanpassen, maar
ook via het tabblad Web in het gedeelte Refererend.
Via het gebied Web>Refererend staan er drie andere hulpmiddelen tot uw beschikking:
Pagina 18 / 63
2. Metatags; niet zichtbaar op uw website en geïntegreerd in de code van uw paginawebsite. Dit zijn ook de tags die de zichtbaarheid in zoekmachines optimaliseren.
3. Google Analytics: dit is een specifiek hulpmiddel van Google dat ook op tags is
gebaseerd. Web Creator kan deze voor u genereren.
SiteMap: de gegenereerde Info is gebaseerd op de structuur en voorspelde
updateschema's die door zoekmachines van uw website worden gehaald.
U vindt meer informatie over dit onderwerp in het hoofdstuk over "het tabblad Web".
Pagina 19 / 63
De website uploaden
In het gedeelte Webuitvoer van het tabblad Web staan drie nuttige hulpmiddelen voor de
stappen voorafgaand aan het verzenden van uw website naar de server.
1. Optimaliseren: dit hulpmiddel scant alle bestanden op uw website en maakt een lijst
met pagina's waarop dode koppelingen, ongebruikte elementen en dergelijke staan. U
kunt ervoor kiezen deze bestanden te behouden, maar u kunt ze ook verwijderen. Wees
hier voorzichtig mee: sommige pagina's hoeven misschien alleen maar te worden
"gerepareerd" en zijn niet noodzakelijk onbruikbaar. Waarschijnlijk wilt u niet alle
weergegeven pagina's verwijderen; het is veel erger om per ongeluk een noodzakelijke
pagina te verwijderen dan een ongewenste pagina te houden.
2. Regenereren: hiermee schoont u de gehele website op nadat u de website hebt
geoptimaliseerd. Als u hier op klikt, hoeft u niets meer te doen: oneffenheden worden
automatisch van de website verwijderd.
3. Uploaden: hiermee plaatst u uw website op het wereldwijde web. U moet het
hostadres, de aanmeldnaam en het wachtwoord invullen.
Een nuttige optie die u kunt gebruiken is de mogelijkheid een filter in te stellen
waarmee alleen bestanden die na een bepaalde datum zijn aangepast, worden
verzonden. Hiermee kan een website veel sneller worden geüpload, zelfs bij de
allersnelste verbindingen, omdat alleen relevante nieuwe dingen naar de server worden
verzonden. Dit hulpmiddel staat in sterk contrast met onze uitgebreide uploadsoftware
FTP Site Manager, die aan de Windows Verkenner doet denken omdat u hiermee kunt
weergeven wat momenteel op uw server staat. Met de FTP Site Manager kunt u ook
slepen en neerzetten; bovendien kan het zelf in de interface van Web Creator worden
geïntegreerd.
Gedetailleerde interfacepresentatie
Laten we dieper ingaan op de belangrijkste onderdelen van Web Creator Pro 6. Om deze
presentatie kort te houden, zullen we het niet over de duidelijke elementen zoals afbeeldingen,
tekst of knoppen hebben, aangezien deze meteen al vrij eenvoudig te gebruiken zijn.
Pagina 20 / 63
Als u al bekend bent met de recentere versies van Microsoft Office, zal Web Creator Pro 6 u al
redelijk bekend voorkomen, aangezien hierin vrijwel dezelfde organisatieprincipes worden
gebruikt.
De snelle werkbalk
Op de snelle werkbalk in de linkerbovenhoek staan vaak gebruikte functies
gegroepeerd: (van links naar rechts) Opslaan, Ongedaan maken, Projectpagina lijst en
verschillende beschikbare Browsers.
Met het pictogram Paginalijst kunt u met één klik naar een andere pagina in de weergegeven
lijst gaan.
De browsers die op uw pc zijn geïnstalleerd, staan aan de rechterkant van de snelle werkbalk. In
Web Creator Pro 6 worden Internet Explorer, Mozilla Firefox, Google Chrome, Opera en Safari
automatisch aan deze lijst toegevoegd, zodat u snel uw webpagina in de geselecteerde
webbrowser kunt testen. Als u een browser gebruikt die niet is genoemd, kunt u deze
handmatig toevoegen. Ga hiervoor naar Web>Browsers>Toevoegen )in het Lint'.
Pagina 21 / 63
Het Lint
Het Lint is altijd beschikbaar en staat bovenaan, net onder de snelle werkbalk. Het
lint vervangt het oorspronkelijke menu en maakt in lengterichting vele opties beschikbaar. De
opties staan thematisch gegroepeerd met afbeeldingen en tekst, waardoor u eenvoudig door
het menu kunt navigeren.
Als u niet bekend bent met de nieuwste Microsoft Office-pakketten, schrikt deze menustructuur
u misschien af in het begin, maar als u er een tijdje mee hebt gewerkt zult u zien dat u heel
eenvoudig vindt wat u zoekt.
Uiterst rechts staan 4 knoppen. Met de uiterst linkse knop vouwt u het Lint samen voor meer
ruimte. Deze knop is bij aanvang een pijl omhoog, maar als u het Lint samenvouwt, wordt dit
een pijl omlaag waarmee u het samengevouwde Lint weer kunt uitvouwen.
De andere drie knoppen zijn specifiek voor een project. Met de tweede knop plaatst u uw
project in de venstermodus. Met de derde knop sluit u het project, maar u wordt wel gevraagd
of u het project wilt opslaan.
Laten we onze blik nu eens richten op de tabbladen in het Lint.
Tabblad Bestand
Hier vindt u de opties waarmee u projecten kunt beheren, zoals Project openen, Nieuw project,
Sluiten, Opslaan, Opslaan als, Afdrukken en Afsluiten.
Als u Openen selecteert, krijgt u twee opties om door te gaan.
Pagina 22 / 63
Een van de opties is een onlangs geopend project te openen. Let op: deze lijst wordt alleen
bijgewerkt nadat u Web Creator Pro 6 hebt gesloten.
Een andere manier om projecten te openen is met behulp van de functionaliteit Bladeren.
Hiermee wordt een mappenstructuur geopend. De projectmap "Web Creator" is de
standaardmap: “C:/Gebruikers/Gebruikersnaam/Documenten/Web creator”.
Tabblad Start
Dit is het tabblad waarin u het meest zult werken.
Pagina 23 / 63
Het bevat speciale bewerkingsfuncties: Annuleren, Knippen, Kopiëren, Plakken, Selecteren en
Verwijderen.
De andere functies zijn voor het beheer van het lettertype, de pagina-indeling, uitlijning, lijsten
met opsommingstekens, genummerde lijsten, inspringing en koppelingen. Met de laatste
functie verwijdert u alle tekstopmaak, zodat u weer platte, onbewerkte tekst hebt.
Tabblad Project
Dit tabblad slaat op het huidige project als geheel.
Met het eerste gedeelte, Browseruitlijning, kunt u instellen in welk gebied van de browser uw
website wordt geplaatst. Uw site kan links, rechts of in het midden van elke willekeurige
browser worden geplaatst.
In het gedeelte Startpagina beschrijft de eerste pagina die websurfers zien als ze op uw website
komen.
Tabblad Pagina
Dit tabblad hoort bij de pagina die u momenteel bewerkt.
In het eerste gedeelte, Pagina's, kunt u pagina's wijzigen door een nieuwe pagina te maken of
door een pagina die u al eerder hebt gemaakt, te openen.
Met het derde pictogram, Manager, opent u een lijst van de pagina's die binnen het project
beschikbaar zijn, met de optie om paginavoorbeelden weer te geven of te verbergen en de
mogelijkheid om pagina's of de naam ervan te wijzigen en om pagina's te verwijderen,
dupliceren of maken.
Het gedeelte Huidig bevat het pictogram Eigenschappen, waarmee u opties die aan de huidige
pagina zijn gekoppeld vanaf de werkbalk Eigenschappen kunt aanpassen. Dit is bijvoorbeeld
Pagina 24 / 63
handig als er veel elementen op de pagina staan waardoor de achtergrond niet goed zichtbaar
is, waardoor u moeilijk de eigenschappen ervan kunt openen.
Vernieuwen haalt de pagina en de elementen ervan terug uit het opgeslagen geheugen.
Anderzijds, met Opnieuw laden zoekt u de elementen op de harde schijf om de pagina terug te
halen. Hierdoor wordt u gevraagd om eerst op te slaan.
Deze hulpmiddelen zijn handig om losse "artefacten" te verwijderen die na talloze bewerkingen
van de geopende pagina en op tragere computers kunnen verschijnen.
Met Apparaatdetectie kunt u eenvoudig kiezen hoe de pagina op een mobiel apparaat moet
worden weergegeven. U moet hiervoor van tevoren een mobiele versie van de genoemde
pagina maken en deze als de vooorkeursoptie voor weergave in mobiele browsers selecteren.
Door een Wachtwoord in te stellen, voorkomt u dat anderen in de testfase toegang tot deze
pagina hebben.
In het gedeelte Kleuren kunt u het huidige kleurenpalet wijzigen door een palet uit de lijst te
selecteren. Elementen die kleuren uit het palet gebruiken, veranderen van kleur aan de hand
van wat u kiest.
Met de knop Kleuren configureren kunt u de kleurelementen van het op de pagina gebruikte
Sjabloon aanpassen.
Pagina 25 / 63
Tabblad Invoegen
Op dit tabblad staan alle beschikbare elementen van Web Creator op één plaats.
Het gedeelte Algemeen bevat dezelfde elementen als de altijd beschikbare werkbalk Elementen
en is op dezelfde manier gecategoriseerd.
In het gedeelte Bibliotheek kunt u heel eenvoudig uit vier categorieën multimediabestanden
kiezen die Web Creator Pro 6 u biedt: afbeeldingen, video's, geluiden en Flash-animaties.
Pagina 26 / 63
Tabblad Selectie
Zoals de naam al impliceert, hebben deze functies te maken met elementen die op de pagina
zijn geselecteerd.
De gedeeltes Acties en Z-volgorde spreken voor zich en we hebben Koppelingen al behandeld.
In het gedeelte Groep staan functies waarmee u elementen kunt toevoegen aan of verwijderen
van een Groep, of waarmee u een geheel nieuwe groep kunt maken waaraan u elementen kunt
toevoegen.
In het gedeelte Hoofd kunt u geselecteerde elementen overdragen naar een element van het
type container dat op de pagina beschikbaar is, of een containerelement (paneel- of
vakelement) voor dat doel maken. Containers zullen we nader bespreken in het hoofdstuk
Containerelementen: vakken en panelen.
Tabblad Formaat
Dit tabblad biedt u een heel scala aan opties om een of meer elementen uit te lijnen, en houdt
wat gedrag betreft nauw verband met het Hoofd/Container-concept (vakken, panelen of
pagina).
In de paragraaf Uitlijning en positionering vindt u een uitgebreidere uitleg hierover.
Tabblad Web
Dit tabblad bevat alle functies voor het voltooien van uw website en het online zetten ervan.
In het eerste deel, Browsers, worden de navigatoren weergegeven die op uw apparaat zijn
geïnstalleerd en die u kunt gebruiken om te zien hoe uw website eruit ziet door de ogen van een
bezoeker.
Pagina 27 / 63
Met de pictogrammen uiterst rechts in dit gedeelte kunt u verwijzingen naar een browser die
wel is geïnstalleerd maar niet door Web Creator Pro 6 wordt herkend, toevoegen, verwijderen
of aanpassen.
In het gedeelte Pagina kunt u met behulp van Aangepaste code met een
tekstbewerkingsprogramma JavaScript- of HTML-code op de huidige webpagina plaatsen.
Paginagewicht berekent hoe elk afzonderlijke element op uw webpagina de laadtijd van uw
pagina zal beïnvloeden en vertelt u hoe lang het duurt voor de pagina is gedownload en wordt
weergegeven voor een gebruiker met een verbinding van 256 kilobits per seconde.
In het gedeelte Refererend zijn vier hulpmiddelen beschikbaar waarmee u uw website vooraan
kunt plaatsen in de zoekresultaten.
In Metatags staan beschrijvingen en sleutelwoorden voor zoekmachines. U kunt de tags zelf
maken of de informatie eenvoudig invoeren in Web Creator, waarna de tags voor u worden
gemaakt.
Met het pictogram Kopteksten kunt u zoekmachines helpen belangrijke informatie op uw
webpagina´s te identificeren. U kunt deze op uw pagina invoegen via het lint of de werkbalk
Elementen. Lees het hoofdstuk Het gedeelte Opmaak voor meer informatie hierover.
Als u op Google Analytics klikt, kunt u sleutelwoorden opgeven die door de zoekmachine van
Google wordt gebruikt.
Het gedeelte Webuitvoer gaat over de laatste stappen om uw website te uploaden.
Met Optimaliseren wordt uw gehele website gescand op onderdelen die niet langer worden
gebruikt. Met Regenereren wordt uw website vervolgens weer opgebouwd, maar dan zonder
de overbodige elementen. Via Uploaden wordt uw website vervolgens naar de server
verzonden, waarna uw website overal ter wereld kan worden geopend. U moet Web Creator
Pro 6 uiteraard alle noodzakelijke aanmeldgegevens geven om verbinding met de server te
maken en uw bestanden over te dragen. Vergeet niet dat de ingevoerde gegevens aan het
geladen project worden gekoppeld. Hierdoor kunt u eenvoudiger via meerdere servers met
overeenkomstige projecten werken.
Tabblad Extra
Via dit tabblad hebt u toegang tot de extra hulpbronnen van Web Creator Pro 6.
In het eerste gedeelte staan hulpbronnen die direct van LMSOFT komen.
Pagina 28 / 63
Het tweede gedeelte bevat spellings- en grammaticacontrole van Druid Informatique
Het gedeelte Raster biedt u methodes waarmee u pagina-elementen eenvoudiger kunt
positioneren.
Met het gedeelte Werkbalk tenslotte kunt u het vak Elementen aan de linkerkant verbergen en
weergeven. Dit is handig als u al een groot deel van de elementen die u op de pagina nodig zult
hebben, hebt geplaatst en meer werkruimte wilt creëren. Het pictogram Standaardwaarden
herstellen brengt de interface van Web Creator Pro 6 terug naar de fabrieksinstellingen.
Tabblad Help
De functies op dit tabblad zijn vrij ongecompliceerd. Let er wel op dat u voor de meeste functies
een internetverbinding nodig hebt.
Werkbalk Elementen
Met deze werkbalk krijgt u toegang tot de belangrijkste elementen die voor u
beschikbaar zijn bij het maken van uw website. We noemen ze elementen omdat ze de
elementaire basis van elke pagina vormen. Sommige elementen zijn bedoeld om informatie
weer te geven en weer andere om informatie te verzamelen. Alle elementen zijn aanpasbaar.
De werkbalk Elementen is in 5 gedeeltes verdeeld voor eenvoudigere plaatsing: Algemeen,
Opmaak, Sociaal, Multimedia, Gegevens.
Elk gedeelte kan worden samengevouwen en uitgevouwen met de pijlen rechts van de naam. Er
is een werkbalk beschikbaar als de onderste elementen niet zichtbaar zijn of als uw
schermresolutie te laag is.
Een element invoegen
Als u een element op de huidige pagina wilt invoegen, hoeft u alleen maar op het bijbehorende
pictogram of de naam te klikken. Hierma wordt deze in het midden van de pagina in de
bovenste laag weergegeven.
Om fouten te voorkomen worden geselecteerde elementen op de pagina nooit verstoord als u
elementen op de pagina invoegt. Elementen worden nooit gegroepeerd of in de hoofddirectory
geplaatst, tenzij u hiervoor een opdracht geeft. Lees de volgende hoofdstukken voor meer
informatie ovver elementen: Containerelementen: vakken en panelen, Blokken maken en
gebruiken, en Groepen.
Pagina 29 / 63
Elementeigenschappen
Als u een element op de pagina toevoegt, is via het tabblad Elementen de werkbalk
Eigenschappen geopend, zodat u het element meteen kunt aanpassen.
Van elk element dat u aan de pagina toevoegt, kunt u de kleur, vorm en afmetingen aanpassen.
Sommige hebben veel uitgebreidere opties die u kunt instellen, zoals de elementen PayPal, Blog
en Formulier.
Deze instellingen zijn toegankelijk via de werkbalk Eigenschappen aan de rechterkant van de
interface. Lees meer in het hoofdstuk Werkbalk Eigenschappen.
Elementhiërarchie
We hebben eerder gezegd dat elk element zodra het is gemaakt in het midden van de pagina
wordt geplaatst en onafhankelijk is van alle andere elementen (behalve de pagina natuurlijk,
omdat het deel uitmaakt van een pagina). Wanneer elementen aan de pagina worden
toegevoegd, worden ze deel van een hiërarchische volgorde die wordt bepaald door de volgorde
waarin ze zijn gemaakt. Vanaf dat moment kunt u elementen aanpassen door containers,
blokken en groepen te gebruiken.
Deze hiërarchische relatie tussen de elementen zien we terug in de lijst met elementen, die we
in het hoofdstuk De lijst met elementen zullen behandelen.
Op dit moment willen we de verschillende gedeeltes van de werkbalk Elementen en hun
onderliggende functies bespreken. Sommige elementen wijzen voor zich, dus we zullen ze niet
allemaal in detail behandelen. We zullen er echter wel voor zorgen dat u precies weet hoe u ze
allemaal moet gebruiken.
Het algemene gedeelte
Tekstelement
Zodra u het tekstelement hebt ingevoegd, kunt u meteen tekst typen, de weergave ervan
aanpassen en gedeeltelijke of volledige tekstkoppeling toevoegen (met de knop Koppeling in
het Lint op het tabblad Start), etc.
Hyperlinks kunt u heel eenvoudig via de knop Koppeling in het Lint configureren.
U kunt de helderheid en doorzichtigheid van de achtergrond van de tekst aanpassen met
prachtige gelaagde visuele effecten (werkbalk Elementen>tabblad
Elementen>Achtergrondkleur).
Pagina 30 / 63
Afbeeldingselement
Als u een afbeelding wilt invoegen, wordt een rechthoek met een plaatsvervangende afbeelding
gecreëerd. Om deze afbeelding te vervangen door de gewenste afbeelding, kunt u het nu
geopende tabblad Elementen van de werkbalk Eigenschappen gebruiken en een van de 4
pictogrammen naast het tekstveld gebruiken. Via het eerste pictogram hebt u toegang tot
afbeeldingen in de WC6-bibliotheek. Met het tweede pictogram kunt u naar een afbeelding op
uw pc bladeren. Met het derde pictogram kunt een koppeling naar een afbeelding op een
website verwijzen (u moet hiervoor het volledige pad naar de afbeelding weten).
De optie om een afbeelding te vergroten door erop te klikken is een nuttige,
ruimtebesparende functie. Als u een zeer grote afbeelding op uw pagina wilt plaatsen, kunt u
het formaat eenvoudig verkleinen zodat het op de pagina past en uw bezoekers de mogelijkheid
geven de afbeelding op volledig formaat te zien door erop de klikken (u kunt zelfs selecteren
hoe groot de afbeelding wordt).
Pagina 31 / 63
Knopelement
Zodra u een knop invoegt, kunt u erop dubbelklikken om de tekst die erop staat te wijzigen. U
kunt dit ook in het tekstveld in de werkbalk Eigenschappen doen. Op het tabblad Elementen
kunt u de weergave van de verschillende statussen van de knop wijzigen: Verhoogd, Ingedrukt
en Rollover. U kunt onderaan ook een voorbeeld zien van hoe de knop er uitziet.
Menu-element
Wanneer u een menu toevoegt, wordt een vierkant pictogram dat het menu symboliseert,
weergegeven. Om uw menu te vullen, gaat u naar de werkbalk Eigenschappen en het gebied
Items en klikt u op Toevoegen. De focus verschuift naar het tekstveld waarin u de titel voor dat
gedeelte kunt toevoegen. U kunt submenu's toevoegen met dezelfde methode en koppelingen
toevoegen met het veld onder het titelveld.
Het gedeelte Opmaak
Paneel- en vakelementen
Paneel- en vak-elementen hebben een speciale functie: het zijn containers. Ze zijn
ontworpen om alle vormen van elementen, zelfs andere containers, onderdak te bieden.
Een containerobject bestaat als hoofdelement: als andere elementen in een container worden
geplaatst, worden dit de onderliggende elementen. Deze relatie heeft een zeer grote invloed op
het gedrag, omdat de onderliggende elementen telkens worden verplaatst als u het
hoofdelement verplaatst. Dit geldt ook voor verwijderen: als u een paneel met knoppen
verwijdert, raakt u de knoppen kwijt. De pagina zelf is ook een container, en het hoofdelement
van alle elementen die u er op plaatst. Als u de pagina verwijdert, worden alle elementen op die
pagina ook verwijderd.
Pagina 32 / 63
Het belangrijkste verschil tussen vakken en panelen is dat panelen vooral een organisatorische
functie spelen en vakken ook voor de presentatie worden gebruikt. U zult zien dat u een vak
veel uitgebreider kunt aanpassen dan een paneel.
Al deze elementen moeten in meer detail worden behandeld. Lees er meer over in het
hoofdstuk Containerelementen: vakken en panelen, waarin deze elementen uitgebreid aan bod
komen.
IFrame-element
Met het IFrame-element kunt u een gehele webpagina op uw pagina invoegen, of
dit nu uw eigen pagina is of een pagina die u op internet hebt gevonden. U kunt zowel de
grootte en kleur van de weergavepoort als de naam ervan wijzigen. Als u het aan de pagina
toevoegt, ziet u een plaatsvervangende afbeelding die aangeeft waar de pagina zal worden
weergegeven en wat de huidige afmetingen ervan zijn. U kunt kiezen welke pagina wordt
weergegeven met de pictogrammen op het tabblad Elementen van de werkbalk Eigenschappen.
Accordeonelement
Het accordeonelement is vergelijkbaar met een geanimeerd, gestapeld menu. Als
u op een gedeelte klikt, wordt het vergroot en wordt de inhoud van dat gedeelte weergegeven.
U kunt de kleur van de verschillende statussen van de accordeons wijzigen, net als het
knopelement.
In WC6 moet u de pagina's van tevoren voorbereiden en ze aan het gewenste gedeelte
toewijzen.
Tabbladelement
Het tabbladelement is geschikt om meerdere webpagina's in een gebied in te
voegen en deze met de beschikbare knoppen in menustijl te openen. De pagina's kunnen van
uzelf zijn of doorverwijzen naar een online website.
De grootte van de weergegeven pagina's blijft normaal. Er wordt een schuifbalk getoond
waarmee u kunt navigeren.
Pagina 33 / 63
Het verschil tussen een accordeon en een tabblad is dat met de accordeon alleen interne
pagina's worden weergegeven en dat het menu is gestapeld en geanimeerd.
Label (H1…H6)-elementen
Met een label (H1…H6) kunt u referentietags van H1 tot en met H6 invoegen.
Ze worden vaak gebruikt om de organisatie van uw website aan te geven en staan voor het
belang van bepaalde gegevens die u op een pagina biedt. Van het belangrijkst tot het minst
belangrijk (1 tot en met 6) geven ze zoekmachines belangrijke informatie over uw pagina.
Hierdoor zijn ze nuttig om er zeker van te zijn dat belangrijke informatie op uw website niet
wordt genegeerd als er door gebruikers die relevante informatie zoeken een zoekopdracht
wordt gestart. Om deze reden kunnen ze de aanwezigheid van uw websites op internet
aanzienlijk verbeteren.
Ze wijken in grote mate af van tekstelementen en moeten niet teveel worden gebruikt.
Zodra u ze aan uw pagina hebt toegevoegd, kunt u aangeven hoe belangrijk het volgende
tekstblok op de werkbalk Eigenschappen is. Elke koptekst heeft een vooraf bepaalde stijl, kleur
en lettertype, maar u kunt deze wijzigen zodat ze beter bij uw pagina's passen. U kunt voor een
heel project alle koptekststijlen wijzigen met het pictogram Koptekst op het tabblad Web van
het Lint. Als u de koptekst alleen voor de huidige pagina wilt wijzigen, gebruikt het huidige
paginagedeelte om uw wijzigingen aan te brengen.
Pagina 34 / 63
Pop-upelement
Pop-ups maken de weergave van een andere webpagina boven uw eigen pagina
mogelijk. De pop-up moet door een gebeurtenis worden geactiveerd om zichtbaar te worden.
Als de pop-up wordt geactiveerd, wordt de pagina waarop de pop-up stond donkerder, zodat de
gebruikers naar de geopende pagina worden getrokken.
Het gedeelte Sociaal
Sociaalnetwerkelement
Met het element voor Sociale netwerken kunt u snel koppelingen naar een vooraf
ingestelde lijst van populaire sociale websites integreren: Facebook, Twitter, Google+,
Delicious, Reddit, Stumbleupon, Tumblr, LinkedIN en Digg. U kunt een paar stilistische
wijzigingen aan dit element aanbrengen zodat het beter op uw pagina past.
Blogelement
Plaats dit element op uw pagina en klik op de knop Nieuw op de werkbalk Eigenschappen. De
standaardnaam Blog wordt weergegeven.
Als u reacties van de bezoekers wilt ontvangen, moet u een e-mailadres opgeven waarop u de
reacties ontvangt.
U kunt in het onderstaande gebied uw eerste bericht schrijven door het pictogram + aan de
rechterkant te gebruiken. De datum wordt weergegeven, met daaronder "Nieuwe invoer". In de
volgende velden kunt u koppelingen naar artikelen op andere pagina's of pagina's in uw project
toevoegen. Telkens wanneer u een bericht invoert, wordt de tijd waarop het bericht is
Pagina 35 / 63
geschreven, aan uw lezers getoond. U kunt uw tekst aanpassen met de vier pictogrammen die
net boven het tekstgebied staan.
Het gedeelte Multimedia
Galerijelement
Met een galerijelement kunt u een verzameling afbeeldingen op uw webpagina weergeven. De
beginweergave is een mozaïek die de verzameling in miniatuurafbeeldingen weergeeft of een
diavoorstelling die de afbeelding een voor een weergeeft. Let op: dit heeft alleen invloed op de
beginweergave en de mozaïekinstelling wordt veranderd in een diavoorstelling zodra een
bezoeker een foto heeft geselecteerd.
Geluid- en video-elementen
De geluiden video-elementen werken vrijwel hetzelfde. Als u dergelijk element selecteert,
wordt een speler weergegeven zoals deze in een browser wordt getoond. Er is via de werkbalk
Eigenschappen direct een voorbeeld van de gekozen video of het gekozen geluidsbestand
beschikbaar. Er worden veel populaire bestandsindelingen ondersteund, en u hebt de
mogelijkheid een speler om het bestand in af te spelen te kiezen.
Pagina 36 / 63
Google map-element
Dankzij het Google map-element kunt u een interactieve kaart van elk willekeurig
adres op uw website plaatsen. Door eenvoudigweg een adres op het tabblad Elementen van de
werkbalk Eigenschappen toe te voegen, geeft u toegang tot de kaart-, satelliet- en
straatweergave van het gebied.
Het gedeelte Gegevens
PayPal-element
Met het PayPal-element kunt u een koppeling naar een PayPal-account invoegen
om een beveiligde onlinebetaling in te stellen. Op het tabblad Element van de werkbalk
Eigenschappen kunt u het koppelingstype selecteren: Toevoegen aan winkelwagen,
Winkelwagen weergeven en Nu kopen. U kunt dit vervolgens koppelen met het PayPalaccount, de prijs instellen en kiezen of het geselecteerde item meer in veelvoud kan worden
gekocht.
Webelement
Voor mensen die al wat ervaring hebben met codes en scripts is het met het webelement
mogelijk om JavaScript, PHP en andere op internet gebaseerde programmeertalen in te voegen.
We kunnen het verkregen resultaat met dit object niet garanderen, omdat het afhankelijk is van
hoe de code werkt, de browser waarin het object wordt gelezen en de server die het object
verwerkt. We verzoeken u daarom te controleren of u over genoeg informatie beschikt en
testen uit te voeren. Dit element is nauw verbonden met de functie Aangepaste code in het
gedeelte Pagina van het tabblad Web op het Lint.
Google Translate-element
Het Google translate-element geeft uw gebruikers de mogelijkheid om uw website
meteen in een andere taal te zien. U hoeft het element alleen maar aan uw pagina toe te
voegen. Bezoekers kunnen dan de gewenste taal in een vervolgkeuzemenu kiezen.
Formulier- en formulierveldelementen
De formulier- en formulierveld-elementen werken alleen in combinatie met elkaar. Hiermee
kunt u gebruikmaken van een veelgevraagde service die wij, LMSOFT, u gratis aanbieden. Indien
u een ontvangstadres opgeeft, wordt met het formulier dat u maakt informatie verzameld die
uw bezoekers kunnen insturen. De verzamelde gegevens worden op onze servers verwerkt en
naar u verzonden, zodat u er mee kunt doen wat u wilt.
Pagina 37 / 63
U begint met het maken van een formulier en het selecteren van een actietype uit de werkbalk
Eigenschappen. De eerste twee acties leiden ertoe dat er een e-mail met de verzamelde
informatie naar u wordt verzonden; gebruikers zullen echter de eerste selectie op prijs stellen
omdat ze dan minder werk hoeven te doen en hun browseractiviteiten niet worden
onderbroken.
De derde optie betreft het verzenden van de gegevens naar een webpagina, waarop de
informatie vervolgens met scripts of servercode wordt verdeeld (u bent hier verantwoordelijk
voor). Informatie aan een database toevoegen is een van de redenen waarom deze optie zo
nuttig is.
Met de vierde optie wordt de informatie naar een JavaScript-functie verzonden die u in een
webelement (eerder behandeld) of in het gebied Aangepaste code op het tabblad Web van het
Lint hebt gemaakt. Zodra het formulier is verzonden, wordt de JavaScript-functie opgeroepen
met de informatie die u eraan hebt gegeven.
Zodra het formulier is gemaakt, moet u invoerelementen maken met het formulierveldelement.
Tijdens het invoegen wordt het element als een wit tekstveld weergegeven, maar u kunt dit in
een van de andere invoertypes wijzigen. Probeert u ze allemaal uit en ontdek wat ze u kunnen
bieden.
Tellerelement
Met het tellerelement kunt u bekijken hoeveel bezoekers uw pagina hebben bezocht.
Aangezien er talloze tellers bestaan, moet u dit element vullen met code. U kunt de code zelf
schrijven als u daar voldoende ervaring mee hebt, maar er zijn op internet kant-en-klare
JavaScript-codes beschikbaar.
Pagina 38 / 63
De lijst met elementen
De lijst met elementen staat in het uiterst rechtse deel van de interface, net boven
de balk voor de normale stijl.
U kunt deze lijst op elk gewenst moment losmaken. U dubbelklikt hiervoor op de balk aan de
bovenkant. Daarna kunt u de lijst naar wens verplaatsen. Dubbelklik weer op de bovenste balk
om de lijst op de oorspronkelijke plaats terug te zetten. De lijst met elementen bevat twee
tabbladen: Elementen en Blokken.
Pagina 39 / 63
Het tabblad Elementen
Op het tabblad Elementen staat een lijst met alle elementen die op de huidige
pagina staan in een boomstructuur. Uit de structuur blijkt hun respectieve plaats wat betreft de
volgorde, de aanmaakdatum, de relaties en afhankelijkheden ten opzichte van andere
elementen en of ze al dan niet bij andere elementen behoren of deze samenhouden (deze
onderwerpen komen aan bod in het hoofdstuk Containerelementen: vakken en panelen).
Met behulp van de pictogrammen naast de naam kunt u de elementen verbergen of weergeven
en de inhoud van de container samenvouwen of uitvouwen.
Een element zoeken
In het gebied Zoeken kunt u een element zoeken op basis van de naam of zelfs een deel van de
naam van het element. Door op de pijl te klikken bladert u door de resultaten. Ze worden ook in
het rood in de lijst met elementen gemarkeerd en op de pagina geselecteerd.
De volgorde van elementen wijzigen
Rechts naast de zoekfunctie staat een label met de tekst Z-volgorde, gevolgd door twee
verticale pijlen. Deze functie betreft de volgorde van de elementen op de pagina. Elementen zijn
standaard gerangschikt op volgorde van aanmaakdatum. De rangschikking kan worden gewijzigd
als u elementen aan een hoofdelement toevoegt (aangezien elementen in dat hoofdelement
eerder kunnen zijn gemaakt dan het element dat u toevoegt). Met de verticale pijlen kunt u de
Z-volgorde van een element op de pagina wijzigen.
Elementen en groepen weergeven
Boven de lijst staat een vervolgkeuzelijst met de woorden Hiërarchische weergave van de
pagina-elementen. Als u hier op klikt, kunt u elementgroepen en hun inhoud weergeven.
Groepen zoeken
Pagina 40 / 63
Net als elementen kunt u in het zoekveld ook eenvoudig zoeken naar groepen op basis van hun
naam of deel daarvan. Door op de pijl te klikken bladert u door de resultaten. Ze worden ook in
het rood in de lijst met elementen gemarkeerd en op de pagina geselecteerd.
Tabblad Blokken
Als u op het tabblad Blok klikt, wordt een nieuw gebied geopend dat twee
tabbladen bevat: Bibliotheek en Aangepast.
Via een vervolgkeuzemenu op het tabblad Bibliotheek kunt u blokken van verschillende
sjablonen selecteren. Het tabblad Aangepast biedt u de mogelijkheid blokken die u ongetwijfeld
zult maken, op te slaan. Voor meer informatie over blokken leest u het hoofdstuk Blokken
maken en gebruiken.
De werkbalk Eigenschappen
Pagina 41 / 63
De werkbalk Eigenschappen bevat meerdere tabbladen, die allemaal betrekking
hebben op het momenteel geselecteerde item.
Via een pinpictogram in de rechterbovenhoek kunt u de werkbalk Eigenschappen losmaken en
vrij verplaatsen. U kunt de balk zelfs sluiten met het kruis op het pictogram. Zodra de werkbalk
is gesloten, wordt onder aan de interface een eenvoudige balk met de naam Eigenschappen
weergegeven. Hiermee kunt u de werkbalk Eigenschappen zichtbaar maken.
Het tabblad Elementen
Afhankelijk van het geselecteerde element beschikt u over hulpmiddelen om elementen aan te
passen, zoals het aanpassen van de kleur of het invoegen van pagina's.
Tabblad Opties
Op dit tabblad kunt u de naam van het geselecteerde element wijzigen. Voor een afbeelding
kunt u bijvoorbeeld een "alt"-tekst instellen. Deze wordt door zoekmachines gebruikt om een
ontbrekende afbeelding te vervangen of voor gebruikers die de weergave van afbeeldingen in
hun browser hebben uitgeschakeld. U kunt zelfs het gedrag van elementen bij het laden van een
pagina wijzigen, zoals de weergave-effecten.
Tabblad Acties
Op dit tabblad kunt u een interactief element aan uw elementen toevoegen. Hiermee kunt u
klikken met de muis volgen en ziet u wanneer de muis een element binnenkomt of verlaat. Op
deze pagina kunt u talloze elementen kiezen die aan deze acties moeten worden gekoppeld.
Tabblad Rollover
Dit tabblad is alleen van toepassing op de muis die over het geselecteerde element wordt
bewogen. De acties van deze gebeurtenis kunnen echter op andere elementen op de pagina
worden toegepast. Stel dat u een eenvoudige knop neemt die niet zichtbaar is als de pagina
wordt geladen. U kunt ervoor zorgen dat de knop zichtbaar is zodra de muis over een bepaald
element op de pagina beweegt. U kunt dit zelfs met een multimedia-element doen, zodat het
wordt afgespeeld als de muis over een element beweegt.
Tabblad Koppeling
Het tabblad Koppeling is net zo eenvoudig als het klinkt. U kunt er koppelingen naar pagina's op
internet of in uw project mee maken. Er zijn ook andere opties die u kunt aanpassen, zoals
automatisch terugsturen en waar de koppeling wordt geopend.
Tabblad Positie
Dit tabblad bevat alle informatie over een element met betrekking tot de positie op de pagina
en de grootte. Dit is ook de plek waar u het gedrag van Zweven en Wissen instelt (zie het
hoofdstuk Zweven en wissen).
Pagina 42 / 63
Tabblad Eigenschappen
Dit laatste tabblad bevat alle eigenschappen van de andere hoofdelementen, maar dan in een
lijst gecategoriseerd.
Containerelementen: vakken en panelen
In
Web Creator Pro 6 make we kennis met een nieuw type element dat, net als
een pagina, een container is: de elementen Vak en Paneel.
Containers zijn specifiek ontworpen om algemene elementen in te plaatsen. Ze worden net
zoals een echte doos gebruikt: elementen die erin worden geplaatst, worden subelementen.
Zodra u de container verplaatst, verplaatst u dus ook de inhoud ervan.
Dankzij deze containers kunt u heel eenvoudig sjablonen voor pagina's maken door een reeks
containers te combineren. U kunt ook complexe opmaak samenstellen en een meer bij elkaar
passende vormgeving hanteren.
Verschillen tussen panelen en vakken
Het belangrijkste verschil tussen vakken en panelen is dat panelen vooral een organisatorische
functie spelen en vakken ook voor de presentatie worden gebruikt. U zult zien dat u een vak
veel uitgebreider kunt aanpassen dan een paneel.
Het komt erop dat u een paneel zult gebruiken als u, puur voor organisatorische redenen, een
onzichtbaar vak nodig hebt.
Aangezien de container ook grafisch aantrekkelijk moet zijn wat vorm, kleur en randen betreft,
kunt u beter een vak gebruiken. We zullen de opties waarmee u vakken kunt aanpassen
verderop behandelen.
Verder zult u zien dat beide objecten vrijwel identiek werken.
Een opmaak met containers maken
U vindt deze elementen in het gedeelte Opmaak van de werkbalk Elementen onder Paneel en
Vak.
Klik op een van de elementen. Hierdoor wordt dit element in het midden van de pagina
geplaatst. Vakken worden in het blauw weergegeven en panelen zijn transparant met een
gestippelde rand (de rand is niet zichtbaar in een browser).
Pagina 43 / 63
Elementen aan een container toevoegen
Een element aan een container toevoegen
Om niemand in verwarring te brengen kunt u elementen op geen enkele manier rechtstreeks in
een container maken.
Begin met het maken van een container door naar het gedeelte Opmaak op de werkbalk
Elementen te gaan. Kies een paneel of een vak. Deze worden automatisch in het midden van de
pagina geplaatst.
Maak nu een element. Laten we een afbeelding kiezen door op het pictogram in het gedeelte
met algemene elementen op de werkbalk Elementen te klikken. Dit wordt ook in het midden
van de pagina weergegeven.
Als u een paneel selecteert en dit probeert te verplaatsen, volgt de afbeelding het paneel niet;
dit komt doordat elementen standaard onafhankelijk van andere elementen worden gemaakt.
Dit voorkomt dat u per ongeluk elementen aan containers in het midden van de pagina
toevoegt.
Probeer het volgende: kies het element en plaats dit boven op het paneel. Zodra het gehele
element binnen de grenzen van het paneel staat, wordt de rand van dat paneel paars. Dit geeft
aan dat het paneel het hoofdelement is geworden van het element dat u erin hebt geplaatst. U
kunt dit element nu loslaten. Als u nu het paneel weer probeert te verplaatsen, wordt het
element mee verplaatst.
Een andere manier om een element in een container te plaatsen is door met de
rechtermuisknop op het element te klikken om het menu Context te openen. Wacht tot het
menu is geopend en kies Toevoegen aan hoofdelement. Selecteer dan de naam van de
container.
Het element wordt meteen linksboven in de container geplaatst.
Pagina 44 / 63
Meerdere elementen aan een container toevoegen
U kunt op veel verschillende manieren meerdere elementen aan een container toevoegen.
Zodra de container is gemaakt, kunt u het gemakkelijkst meerdere elementen toevoegen door
de verschillende elementen te selecteren en het contextmenu te openen met de
rechtermuisknop. Wacht tot het menu is geopend en kies Toevoegen aan hoofdelement.
Selecteer dan de gewenste container. De elementen worden automatisch linksboven in de
hoofdcontainer geplaatst.
Een andere manier is de geselecteerde elementen te verslepen en in de gewenste container
neer te zetten. Zodra de rand van het hoofdelement paars wordt, weet u dat alle elementen in
de container zijn geaccepteerd.
U kunt ook elk element afzonderlijk slepen en neerzetten, maar dit duurt wel langer.
Klik op de container om deze te selecteren of selecteer een container in de lijst met elementen.
Als u de container verplaatst, zult u zien dat de elementen die in de container zitten, ook
worden verplaatst. Als dit niet gebeurt, zijn een of meer elementen niet geselecteerd tijdens het
slepen of niet in de container terechtgekomen. Druk op Ongedaan maken en probeer het
opnieuw.
Met de geboden containers in combinatie met de andere beschikbare onderdelen via Web
Creator Pro 6 kunt u met behulp van onze nieuwste functie, een blok, eenvoudig meerdere
pagina's of projecten samenvoegen op basis van hetzelfde sjabloon.
Blokken zijn ook organisatorische onderdelen, maar deze worden gebruikt om containers en de
onderliggende elementen te kopiëren voor later gebruik. Op deze manier kunt u meerdere
containers kopiëren en naar een andere pagina verplaatsen onder het mom van blokken. We
zullen dit nader bespreken in het hoofdstuk Blokken maken en gebruiken.
Eigenschappen van vakken en panelen
Zoals eerder gezegd is het grootste verschil tussen vakken en panelen de manier waarop ze
worden weergegeven.
Pagina 45 / 63
U kunt de verschillende eigenschappen aanpassen op het tabblad Elementen op de werkbalk
Eigenschappen.
Panelen hebben slechts basale aanpassingsopties; u kunt alleen de doorzichtigheid en
helderheid van de kleur aanpassen door op het veld naast het label Kleur te klikken.
Vakken kunnen daarentegen op vele manieren worden aangepast nadat ze zijn gemaakt; er zijn
afgeronde hoeken, gekleurde randen, slagschaduw en achtergrondkleuren mogelijk. Panelen
zijn oorspronkelijk transparant en u kunt er maar één achtergrondkleur aan toewijzen.
Vakken kunt u ook een kopen voettekst geven, elk met hun eigen kleur of zelfs transparant.
Door deze functionaliteit kunt u er tekst op plaatsen of onderliggende elementen weergeven.
Pagina 46 / 63
Nu volgen een aantal voorbeelden van afgeronde hoeken, kopteksten, voetteksten,
randbreedtes en kleuroverlappingen en doorzichtigheid.
Hulpmiddelen voor uitlijning en positionering
In Web Creator Pro 6 kunnen elementen nu heel efficiënt worden uitgelijnd, gepositioneerd,
verkleind en vergroot.
1) Op het tabblad Extra van het Lint is een volledig aanpasbaar rasterhulpmiddel
beschikbaar.
2) Er worden hulplijnen weergegeven om elementen te positioneren en om het formaat
ervan aan te passen.
3) Via het tabblad Formaat zijn meerdere opties beschikbaar.
Het raster
Alle instellingen zijn beschikbaar via het tabblad Extra.
Vanaf hier kunt u volledig aanpassen hoe het raster standaard in Web Creator werkt: u kunt het
zichtbaar of niet zichtbaar maken, magnetisch of niet-magnetisch, de kleur van het
uitlijningsraster met behulp van het selectiehulpmiddel Kleur aanpassen en de spatiëring van
het raster aanpassen (zowel de hoogte als de breedte).
Pagina 47 / 63
Positiehulplijnen
Zodra u een element gaat verplaatsen, worden hulplijnen weergegeven met
behulp waarvan u het geselecteerde element ten opzichte van de andere elementen op de
pagina kunt uitlijnen. Dit kan in veel gevallen extreem nuttig zijn als u de elementen op een
pagina met veel elementen perfect wilt uitlijnen.
Deze hulplijnen zijn ook actief als u het formaat van elementen aanpast.
Hier volgt een voorbeeld van het verplaatsen van een element.
... en hier passen we een formaat aan.
Functies van het tabblad Formaat
In Web Creator Pro 6 kunt u eenvoudig veel elementen ten opzichte van het
hoofdelement of een ander element uitlijnen: links, rechts, boven, onder, in het midden of
gecentreerd.
Pagina 48 / 63
Het eerste gedeelte van het tabblad Formaat wordt gebruikt om een of meer elementen die niet
bij elkaar horen maar wel bij de container, te positioneren (Pagina, Paneel, Vak).
In het volgende voorbeeld ziet u de uitlijning van een element in een vak. Eerst horizontaal, dan
verticaal en vervolgens een combinatie hiervan, oftewel gecentreerd.
De rest van het tabblad Formaat betreft de relatieve positionering van elementen ten opzichte
van elkaar.
Pagina 49 / 63
Hier ziet u, vanaf de drie vakken bovenaan, een visuele samenvatting van de uitlijningen en het
aanpassen van het formaat.
Als u meerdere elementen selecteert, heeft een van de elementen groene handgrepen terwijl
de andere elementen blauwe grepen hebben. Het element met groene grepen wordt als het
referentiepunt voor sommige uitlijningsfuncties beschouwd.
Als u niet het gewenste resultaat krijgt nadat u een groep elementen hebt uitgelijnd, gaat u als
volgt te werk: annuleer de uitlijning, kies de elementen die u wilt uitlijnen en klik eenmaal op
het element dat u als referentiepunt wilt gebruiken. Dit element wordt als referentiepunt
geselecteerd. Nu kunt u een uitlijning uitvoeren.
Na een kort ogenblik vindt u automatisch het element waarnaar is verwezen.
Zweven en wissen
Als u het gedrag voor zweven en wissen implementeert, maakt u automatische
herpositionering van elementen in de container mogelijk, of dit nu een pagina, paneel of vak is.
Dit concept moet niet al te moeilijk zijn; het is eenvoudiger dan het lijkt zodra u hebt geleerd
hoe u dit moet gebruiken.
Pagina 50 / 63
Het komt erop neer dat deze functie de noodzaak om uw opmaak handmatig te bewerken
vrijwel elimineert, het is mogelijk om het formaat van pagina's aan te passen en het wordt
eenvoudig om mobiele websites te maken. Het is niet verplicht om deze functies te gebruiken,
maar we raden het u zeer aan om van deze functionaliteit te profiteren.
Deze instellingen zijn beschikbaar vanaf het tabblad Positie op de werkbalk Eigenschappen in
het gedeelte Gedrag.
Zweven
Een element met het gedrag Zweven doet precies wat het zegt: het zweeft alsof het in water
drijft.
Het element zal, net als een stuk plastic in een aquarium, automatisch naar het bovenste
gedeelte van de container zweven (pagina, paneel, vak).
Afhankelijk of het element naar links of naar rechts moet zweven, zal het element die positie
proberen te verkrijgen. Als er een element dat het zweefgedrag ontwijkt, wordt gevonden
terwijl uw net geplaatste element naar boven zweeft, moet u uw element er naast zetten als
daar plek voor is. Als er geen ruimte voor een zwevend element is, wordt het er indien mogelijk
automatisch direct onder gezet. Als het zweefgedrag Geen is geselecteerd, kunt u het element
handmatig plaatsen. Het blijft dan op de gekozen positie staan.
Als u deze instelling inschakelt, kunnen elementen dus automatisch opnieuw op een pagina
worden geplaatst als u de opmaak of de richting van een pagina wilt aanpassen of een nieuw
element wilt invoegen.
Belangrijk: het zweefgedrag bepaalt de positionering van elementen in hun directe container.
Elementen zweven daarom ten opzichte van de elementen in hun eigen container.
Zwevende elementen kunnen zo diep als gewenst worden ingevoegd. Dit betekent dat u het
zweefgedrag op alle elementen in een vak kunt toepassen, maar ook op het vak dat die
elementen bevat. De elementen in het vak zweven ten opzichte van elkaar in het vak, en het
vak zweeft ten opzichte van de andere containers op de pagina.
Pagina 51 / 63
Beperkingen voor positioneren
Elementen die zweven worden volgens de breedte van de beschikbare ruimte boven aan de
container gepositioneerd. Als het element te groot is, wordt het formaat ervan niet automatisch
aangepast en wordt het element niet vanzelf op de goede plaats gezet.
Dit betekent dat een element, wanneer dit naast een ander element wordt geplaatst op die
plaats zou moeten worden vastgezet. Als dat niet het geval is, vindt het element de volgende
regel. Het element wordt vervolgens aangepast aan het gekozen zweefgedrag (naar links of naar
rechts). Het zwevende object wordt dan automatisch naast het eerstvolgende element
gepositioneerd. In de volgende afbeelding staan drie knoppen die links zweven met een breedte
die proportioneel bij de container past. Ze zijn dus perfect uitgelijnd.
Pagina 52 / 63
De breedte van het paneel van de middelste afbeelding is verkleind. Omdat het paneel te klein is
om alle drie knoppen op de eerste regel te kunnen plaatsen, wordt de derde knop automatisch
naar de volgende regel gebracht.
En in de derde afbeelding is de breedte van de derde knop vergroot en als gevolg daarvan weer
naar de volgende regel verplaatst.
In de volgende afbeelding zijn afbeeldingen in afnemende volgorde geplaatst.
Het middelste paneel is opnieuw smaller gemaakt, waardoor de vierde knop naar de volgende
regel wordt verplaatst. Het gedrag 'links zweven' van de vierde knop wordt geactiveerd. Het
verschuift naar de laatste maar blijft 'hangen' aan de rand van de tweede knop.
In het laatste paneel ziet u wat er gebeurt als het paneel nogmaals wordt verkleind. Maar knop
vier plaatst zichzelf direct onder de tweede knop, en is daarbij de rand van de eerste knop
tegengekomen.
In de volgende afbeelding hebben we het paneel weer kleiner gemaakt.
De derde knop van het eerste paneel wordt door deze wijziging beïnvloed. De knop past niet
langer op de plek waar die nu staat en wordt onder de twee andere knoppen geplaatst. Het
Pagina 53 / 63
overlapt met de rand van de eerste knop. En omdat de vierde knop nu niet langer naast de
derde knop past, schuift deze onder de derde knop en overlapt met de rand van het paneel.
Ziet u de ruimte die overblijft op een van de regels? Het is een logische stap om te denken dat
de vierde knop te groot is om onder de eerste knop te passen. Maar dat is niet het geval.
Het is zo dat een element, zodra deze zo ver mogelijk omhoog is gekomen, zichzelf op één lijn
brengt met het voorgaande element. Het element voor de vierde knop is de derde knop.
Daarom zal de vierde knop altijd proberen de derde knop links van zichzelf te laten komen. Als
dit niet lukt, wordt de knop naar een lagere regel verplaatst.
Zoals dus uit de afbeelding blijkt, wijzigt u hiermee de grootte van knop vier, waardoor deze
knop niet meer in de positie onder de eerste knop kan schuiven.
Als u de vierde knop echter kleiner maakt zodat deze in de kleine ruimte naast de derde knop
past, komt deze ernaast te staan.
In de drie volgende voorbeelden is de volgorde hetzelfde, ongeacht de hoogte of breedte van de
elementen voor vier en vijf: elk element probeert rechts van of onder het voorgaande element
te blijven.
Pagina 54 / 63
Optimaal profiteren van zweven
Als u de bovenstaande uitleg leest, is het duidelijk dat u optimaal van het zweefgedrag kunt
profiteren als u elementen gebruikt die dezelfde afmetingen hebben. Als u elementen gebruikt
waarvan de afmetingen niet helemaal overeenkomen, wilt u wellicht elementen gebruiken
waarvan de afmetingen overeenkomen met die van de container. Als u dit doet, behouden de
elementen een uniforme weergave in de container zonder gaten te creëren als ze rondschuiven.
Het kan verleidelijk zijn om de gaten te vullen met elementen die niet kunnen zweven.
Maar als u dat doet, kunnen deze elementen niet automatisch worden verplaatst en daarom
zouden er nieuwe gaten ontstaan.
Een zwevend element toevoegen
Zodra u een element boven een groep elementen hebt gemaakt of gepositioneerd met behulp
van zweven, wordt het nieuwe ingevoegde element geplaatst waar u het op de voorgrond hebt
laten staan (zorg ervoor dat u het element goed aan de container hebt toegevoegd door het te
slepen en op de goede plaats neer te zetten of door het contextmenu te openen en Toevoegen
aan hoofdelement>Naam hoofdelement te selecteren).
Als u zweven voor dit nieuwe element activeert, wordt het automatisch in de enige beschikbare
positie geplaatst als het laatste in deze groep van zwevende elementen; ofwel links ofwel rechts
van het voorgaande element, of eronder als er helemaal geen plek meer is. U kunt vervolgens
de positie van dit element kiezen aan de hand van de volgende instructies.
Pagina 55 / 63
Zwevende elementen verplaatsen
U hebt nu waarschijnlijk wel door dat de volgorde van zwevende elementen erg belangrijk is bij
het toevoegen van een nieuw zwevend element. Klik op een element en sleep dit zoals u
normaal zou doen. De muisaanwijzer benadert de randen van de andere elementen op de
pagina. Er wordt een verticale blauwe lijn weergegeven die aangeeft waar het element wordt
geplaatst als u het op dat punt zou loslaten. Als de lijn rechts van het element staat, wordt het
element na de lijn geplaatst; als de lijn links van het element staat, wordt het element voor de
lijn geplaatst.
Onthoud dat er een domino-effect op de opmaak van de container kan ontstaan als u een
element toevoegt aan een container waar al andere zwevende elementen inzitten.
Pagina 56 / 63
Gebruik van het zweefgedrag
Het zweefgedrag kan op twee belangrijke manieren worden gebruikt:
1) Elementen van hetzelfde type weergeven. Het beste voorbeeld hiervan is een lijst van
producten. U kunt één vak gebruiken en dit vullen met panelen die een afbeelding en
een beschrijvende tekst bevatten. Op deze manier kunt u een lijst maken die varieert
van beroemde mensen tot recepten, en als u ze ooit wilt veranderen hoeft u alleen
maar een paneel te verwijderen of toe te voegen; de opmaak blijft behouden.
Nu volgt een voorbeeld van een galerij met compositie-onderdelen. U ziet dat de
opmaak uniform blijft, zelfs nadat u de afmetingen van de hoofdcontainers hebt
gewijzigd.
Pagina 57 / 63
Deze pagina bevat twee logo's met een afbeelding en een menu. Het hoofdelement van
een pagina bevat vier panelen met dezelfde breedte maar met aanvullende hoogtes. Dit
zijn in feite nauwkeurig gemeten blokken.
Blokken vormen een belangrijk concept in Web Creator Pro 6. U vindt meer informatie
in het hoofdstuk Blokken maken en gebruiken.
Pagina 58 / 63
Het gedrag Wissen
Wissen werkt in combinatie met het zweefgedrag. Dit gedrag zorgt ervoor dat een zwevend
object altijd op de volgende regel moet worden geplaatst in plaats van op dezelfde regel naast
een ander zwevend element. Dus zelfs als er ruimte voor een zwevend element is, zal het onder
andere elementen worden geplaatst, ongeacht of het links of rechts moet zweven. Hierdoor
kunt u elementen automatisch stapelen alsof u een "harde return" gebruikt en kiezen aan welke
kant de elementen worden gestapeld.
Als u elementen om welke reden dan ook, zoals ruimterestricties, alleen kunt stapelen zorgt dit
hulpmiddel ervoor dat elementen altijd op een voorspelbare manier worden uitgelijnd.
Dit is bijzonder handig voor telefoons waarvan u de richting kunt wijzigen. De verticale richting is
dunner waardoor uw elementen worden gestapeld, maar in de horizontale richting worden de
elementen normaal gesproken naast elkaar uitgelijnd.
Groepen gebruiken
Web Creator maakt al langer gebruik van groepen. Mogelijk worden ze binnenkort
uitgefaseerd vanwege de opkomst van containers. Groepen zijn symbolische verzamelingen
elementen die u kunt gebruiken om meerdere elementen aan te passen. Groepen werden vaak
gebruikt om elementen die niet per ongeluk mochten worden aangepast samen te voegen. U
moet een hiërarchie van het type Z-volgorde voor de elementen maken. Nu we containers
hebben geïntroduceerd, worden elementen al volgens hun plaatsing op de pagina gegroepeerd.
U kunt een groep definiëren door meerdere elementen te selecteren en het contextmenu met
de rechtermuisknop te openen. Selecteer vervolgens Toevoegen aan groep en maak een
nieuwe groep of voeg ze aan een bestaande groep toe.
Om de eigenschappen van een groep te openen, klikt u op Hiërarchische weergave van de
pagina-elementen boven in de lijst elementen en wijzigt u dit in Elementgroepen en hun
inhoud weergeven.
Pagina 59 / 63
Met +/- kunt u de lijst met elementen uitvouwen en samenvouwen of zelfs groepen en
elementen vergrendelen met het vergrendelsymbool.
Op het geopende tabblad Elementen kunt u de naam van de groep wijzigen, de zichtbaarheid
ervan in de navigator wijzigen en elementen toevoegen en verwijderen.
En als u een element in de groep selecteert, kunt u rechtstreeks de eigenschappen, acties, etc.
ervan openen.
Blokken gebruiken
Inleiding in blokken
Blokkenzijn een natuurlijke evolutie van de groepen in Web Creator. Een blok is
een organisatorisch hulpmiddel waarmee u een verzameling elementen kunt opslaan om ze
later op een andere pagina of in een ander project te gebruiken.
Een blok maken
Zelfs als het niet nodig is, raden we u aan een blok te maken op basis van een container. Dit
maakt het eenvoudiger om later de positie van het blok aan te passen. Als elementen via een
container zoals een paneel of vak in een blok zijn geplaatst, kunt u zweefgedrag op de container
toepassen zodat blokken automatisch op uw pagina worden gepositioneerd.
Pagina 60 / 63
Laten we het eens proberen. Maak een paneel op uw pagina en laat het zweven met behulp van
de werkbalk Eigenschappen. Ernaast wilt u een paar keuze-elementen plaatsen, zoals een
afbeelding, tekst en een sociale favoriet.
Zodra er iets op de regels van de bovenstaande afbeelding staat, kunt u het geheel als blok
opslaan voor later gebruik.
Om dit te doen, selecteert u het vak of paneel met alle elementen door op een gebied zonder
elementen, een willekeurige rand of de naam in de lijst met elementen te klikken. Open vanuit
de lijst met elementen het tabblad Blokken. Selecteer nu het tabblad Aangepast en klik op +. U
ziet het meteen in het onderliggende scherm verschijnen met de naam Item X. X staat voor de
volgorde waarin het werd gemaakt.
En dat is het. Als u dubbelklikt op de naam kunt u de naam wijzigen.
Als u een koptekst die in een blok is opgeslagen wilt maken, kunt u het naar elke pagina slepen
zonder het meerdere keren te hoeven namaken.
Als u uw blok enigszins wilt wijzigen voor bijvoorbeeld taken of gebruik voor een andere
website, kunt u met blokken veel tijd besparen en voorkomen dat u opmaakfouten maakt.
Pagina 61 / 63
Een blok hergebruiken
Verander heel eenvoudig pagina's of zelfs projecten en ga terug naar het gebied Aangepast blok
in de lijst met elementen. Hier vindt u alle elementen die u eerder hebt gemaakt. Als u een blok
selecteert en de knop Toevoegen aan pagina gebruikt, wordt het gehele blok naar de pagina
overgebracht en behoudt u de elementen en hun eigenschappen.
Waarschuwingen voor het gebruik van blokken
Als u geen containerelement hebt geselecteerd, wordt een nieuw blok altijd onafhankelijk van
andere elementen ingevoegd. Dit is handig voor de grotere blokken die u maakt om de opmaak
voor de pagina in te stellen.
Aan de andere kant wilt u misschien ook kleinere blokken die al een opmaak hebben aan een
pagina toevoegen. U kunt dus een blok maken dat de opmaak van de pagina bepaalt en die
paginaopmaak vervolgens met kleinere blokken die uw inhoud verdelen, vullen.
Om tijd te besparen moet u de container waarin u het blok wilt invoegen van te voren
selecteren. Als u dat niet doet wordt het blok simpelweg op een plek neergezet waar plaats is
als u het blok zwevend hebt gemaakt, of in het midden van de pagina als het zweefgedrag is
uitgeschakeld.
Samengevat: als u een simpel element selecteert of geen element selecteert, wordt het blok
onafhankelijk van andere elementen op de pagina ingevoegd.
Als een container, bijvoorbeeld een paneel of een vak is geselecteerd, wordt het blok in de
container als een onderliggend element weergegeven.
Ideale blokafmetingen
De sjablonen in Web Creator Pro 6 zijn gebaseerd op meervouden van 240 pixels in de breedte.
Blokken hebben dus een breedte van 240, 480, 720 of 960 pixels. De hoogte werkt volgens
hetzelfde principe. Hierdoor hebt u 16 combinaties voor de afmetingen van een blok.
Webpagina's hebben gemiddeld een breedte van 960 pixels. Als gevolg hiervan is dit de
standaardpaginagrootte geworden iin Web Creator Pro 6. Hierdoor kunt u maximaal vier
blokken in één rij toevoegen. Dit is meer dan genoeg om verschillende elementen toe te voegen.
U kunt natuurlijk nog smallere blokken maken als dit beter bij uw behoefte aansluit.
Zoals we al in de hoofdstukken over containers en zweven zagen, moet u niet vergeten dat de
breedte van uw containers in totaal hetzelfde moet zijn als de breedte van uw pagina. Ook de
hoogte van blokken moet gelijk zijn of proportioneel afnemen.
Pagina 62 / 63
Helderheid en doorzichtigheid
Naast de kleur, die u voor de meeste elementen kunt aanpassen, kunt u met Web
Creator Pro 6 ook de doorzichtigheid en de helderheid regelen; niet alleen van panelen en
vakken maar ook van teksten, knoppen, etc. Hierdoor kunt u bovenliggende effecten op andere
elementen, zoals afbeeldingen op de pagina toepassen, zonder deze direct te hoeven
aanpassen. Hierdoor kunt de hele website aanpassen door maar een paar elementen te
wijzigen.
Gebruik het tabblad Elementen op de werkbalk Eigenschappen oor een geselecteerd element.
Selecteer vanaf dit punt het item dat op het schilderspalet lijkt. In het onderste deel van het
venster dat wordt weergegeven, kunt u zowel de helderheidals de doorzichtigheid van de
geselecteerde kleur aanpassen.
Probeer verschillende combinaties en zie wat het effect ervan op een element is, vooral in het
geval elementen boven elkaar zijn gelaagd.
Pagina 63 / 63

Snelstarthandleiding voor gebruikers

Transcription

Similar documents

Wibit Sports tegen Aquaparx Nederland - IE

Over ons duurzaamheidsrapport

Dia 1 - TES Industrial Systems

Productbeschrijving Hitman Pro 3.5

Handleiding SketchUp 2015

Zuid-Groenland - hiking advisor

cXML Users Guide.book - ariba.com

Leren werken met Scribus

PowerMax Pro i

Mijn spirituele boekje

Maak je website in 2u. met Weebly

EPLAN NEWS

Klapper Beemster DTB 6-7-8-9