Snelstarthandleiding voor gebruikers

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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Web Creator Pro 6 - Snelstarthandleiding 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

Recommend Documents