Setup nieuwe site &

kennismaking met WebPlus X8

SCHAKELBARE INDEX

================

Eerste Start

En dan nu eens wat echts doen…!!!

Eerst wat algemene zaken aanbrengen

Favicon plaatsen

Achtergrondkleur instellen

Hulpkolommen instellen

Guidelines magnetisch maken / 'Locken'

Aanwijspijltje

Werken met frames

Illustratie binnen een tekstframe plaatsen

--------------------------

Eerste Start  <TOP>

Wanneer het programma is opgestart krijg je de WebPlus-Interface met daarboven zwevend het startframe.

Om deze tekst te kunnen plaatsen moet ik eerst een willekeurig tekstframe op de pagina zien te plaatsten. In het startframe (later altijd weer op te vragen via de menubalk: File>Start Assistant ) klik je in de linker kolom op 'New Site', in het rechter gedeelte vul ik een naam in van de site die je wil gaan maken. Klik in de balk 'Color Scheme' en kies een kleurschema die je aanspreekt, kies een pagina formaat (later zo nodig aan te passen), kies voorlopig voor 5 pagina's, laat 'Add a Navigation Bar' en 'Save Site' aangevinkt staan en klik op de groene knop 'Start.

Kies in het volgende scherm de plaats waar je de opmaak van je site wilt plaatsen.

Ik plaats deze in de 'defaultmap' omdat daar ook een aantal bestanden staan die we later ook stuk voor stuk gaan bekijken.

Het startscherm verdwijnt en we zien de totale interface-pagina met een lege pagina in het midden. Zonder hier aandacht aan te besteden klik ik in de linker verticale knoppenbalk op het knopje met de T (Insert Tekst Frame) erin. Klik het T-knopje aan en sleep vervolgens in de blanco pagina een willekeurig tekstframe. En zo komt bovenstaande tekst in de pagina geplaatst. Later gaan we dit tekstblok beter vormgeven en plaatsen.

Klik op het tekstvlak en we zien dat de de volledige tekst niet in het frame past.

Wanneer je op het tekstframe klikt (activeert) en vervolgens op Ctrl-E klikt, wordt de (geïmporteerde) tekst in de tekstverwerker 'WritePlus' geopend.

Hier kun je een aantal extra handelingen uitvoeren.

De tekst kan niet overlopen in meerdere frames. Tekstcorrecties in kolommen kunnen dus flinke opmaakaanpassingen met zich meebrengen. Tekstframes waarin niet alle tekst zichtbaar zijn geven rechtsonder het frame een Text overflow-logootje. Het frame aanpassen dus.

Voorlopig zal ik de tekst in één kolom plaatsen en veel ruimte overlaten om in een later stadium de tekst definitief te plaatsen.

Ik laat een WORD-tekstbestand meelopen: EnZoDoeIkHet-platte-tekst.docx  

http://grdro.nl/EnZoDoeIkHet/WebPlus/!-Leren/WebPlus-Leren-EnZoDoeIkHet-platte-tekst.docx

Snelle manier om de webpagina van  EnZoDoeIkHet op het net te openen:

GrdRo.nl/O (=O van Otto - hoofd of kleine letter).

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

En dan nu eens wat echts doen…!!!  <TOP>

Bij het maken van een nieuwe site, wordt standaard een Master-Pagina 'Master A' aangemaakt met een simpele schakelbalk boven in de pagina. Zo is het altijd mogelijk om, wanneer de site gepubliceerd is in een interne browser, tussen pagina’s te schakelen. (Klik op het monitor-schermpje onder Text boven in de Menubalk).

Om een nieuwe pagina aan te maken moet eerst in de tab 'Pages' in de rechterkolom onder ‘Pages’ , rechts van het +icoontje op het ‘naarbeneden’-icoontje en vervolgens voor ‘New Blanc Page’ geklikt worden. Direct het +icoontje aankliokken maakt zonder keuzemenu een nieuwe pagina aan.

We gaan een Nieuwe Masterpagina (B) aanmaken: Klik in de grote rechter kolom op ‘Pages’ en open zo nodig het ‘Master Pages’ veld. Klik hier op het +icoontje. De nieuwe pagina wordt automatisch aangemaakt.

Ik wil het intro gedeelte voorlopig op een blanco pagina zetten waar later een mini-schakelbalk in geplaatst moet worden. We moeten eerst de ‘Master B’ veranderen naar ‘Intro B’:  RechterMuisknopKlik op ‘Master B’ en kies ‘Properties’ en verander de naam ‘Intro’. De letter B is niet aan te passen…

RechterMuisknopKlik op de nieuw aangemaakte pagina’s en verander de namen en de bestandsnamen in Intro-1, Intro-2 en verder. Als je het balkje onder pages sleept kun je de volgorde veranderen. Sleep het balkje rusteg naar de bovenstaande pagina. In het schaduw beeldje dat dan verschijnt zie je op welke plaats je de pagina gaat plaatsen.

Vervolgens koppelen we de pagina’s aan ‘Intro B’ door RechterMuisknopKlik op een pagina en kies onderaan voor  ‘Page Properties’ en vervolgens in de linker kolom voor ‘Master Page’ en zorg dan dat in de rechterkolom ‘Intro B’ en ‘Content’ aangevinkt staan. Eventueel de rest afvinken.

Zet de volgorde van de Master Pagina’s juist… (stuurpijltjes of slepen).

We maken voor het beeld nog een pagina onder Home aan (Algemeen) en op hetzelfde niveau ook een onder de Intro-Pagina’s (Producten).  

Paginabreedte-instellingen in de ‘Master Pages’ worden automatisch overgenomen in de werkpagina’s. Wil je afwijkende maten in de werkpagina’s dan moeten deze ook in de Masterpagina aanbrengen, Handmatige aanpassingen zijn altijd mogelijk. En dat geldt ook voor de hoogten. Lijkt mij logisch, omdat er in principe geen pagina even hoog zal worden. Denk hierbij aan de overflow van tekstframes.

Eerst wat algemene zaken aanbrengen <TOP>

Altijd leuk. Deze blijven in alle 'Master-Pages' gelijk…

De beschrijving van veel items staan ook in de PDF: WebPlusX8_ResourceGuide_en.pdf

Dit bestand is intern te vinden op: C:\DwebPro\deploy\www\!!!GrdRo.nl\!EnZoDoeIkHet\WebPlus\Pdf\

Favicon plaatsen <TOP>

Een Favicon is een klein logootje voor je sitenaam in de tab van je webbrowser aanbrengen:

Klik in een lege ruimte op de pagina. Geen illustratie of tekstframe dus.

Klik in de 'Context Menu-bar' (derde rij van boven) op 'Site’.

Klik dan in het witte vlakje links onder de rubriek 'Features' de submap 'Favorites Icon' aan.

Vink rechtsboven in het grijs de 'Show a favourites icon for the site' aan.

Selecteer een afbeelding naar keuze.

Vink onderaan  'Export Apple touch icons' aan en klik 'OK'.

Achtergrondkleur instellen <TOP>

Klik in een lege ruimte op de pagina. Geen illustratie of tekstframe dus.

Klik in de 'Context toolbar'  op 'Site Properties'.

Klink links op 'Background' en maak rechts een keuze van een illustratie onder 'Assets'

of  kies onder 'Customize' onder  'On-page Color' voor kleur van de site achtergrond.

Kies onder  'Background Colour' de kleur die je links en rechts van je site op je scherm ziet. Klik op 'OK'.

Hulpkolommen instellen <TOP>

Klik in een lege ruimte op de pagina. Geen illustratie of tekstframe dus.

Klik in de 'Context toolbar'  op 'Site Properties'.

klik op 'Margins':

Klik links onder de 'Page'-categorie, op 'Margins'

Kijk naar de voorbeeld-illustratie en maak een keuze.

Klik 'OK'.

Volg dezelfde procedure om veranderingen aan te brengen.

Guidelines magnetisch maken / 'Locken'  <TOP>

Klik in een lege ruimte op de pagina. Geen illustratie of tekstframe dus.

Klik in de 'Context toolbar'  op 'Options'.

Selecteer  links onder de 'Layout categorie' de subcategorie 'Guides'.

Selecteer de 'Lock guide lines' optie. en bekijk de andere opties.

Klik 'OK'.

Aanwijspijltje <TOP>

Het aanwijspijltje om ergens op een objest te klikken of ergens in een styk tekst is de 'Pointer Tool'

Werken met frames  <TOP>

We onderscheiden verschillende soorten frames:

Line frames

Color squere frames

Text frames

Artistic Text frames

Photo frames

Asset frames

Zonder deze nu direct te bespreken is het wel belangrijk te weten hoe je frames kunt groeperen. Heb je verschillende frames op een pagina staan en wil je die gezamenlijk verplaatsen, dan hoeft je die niet stuk voor stuk te verplaatsen, maar kunt je deze ook groeperen en dan verplaatsen.

We maken een algemeen tekstframe door op het tekst-icoontje ;inks op je schermte klikken. Activeer het T-icoontje links op uw scherm (de cursor veranders in een heel dun +teken)

Klik met de linker muisknop ergens op de pagina en houdt de linkermuisknop ingedrukt. Sleep nu diagonaal een stukje en laat de muisknop los.

Je ziet een vierkantje met 8 witte vierkantjes waarmee je de afmetingen van het vlakje kunt aanpassen. Wanneer je met je muis over over zo'n knopje gaat verschijnt er een pijltje in welke richting de verandering zal plaatsvinden.

Wanneer je het vlakje in een hoek aanklikt en gelijktijdig de 'Shift'-knop ingedrukt houdt, dan blijven de verhoudingen van het schermpje bestaan. Experimenteer daar even mee. Met het 'kruis'-iccontje linksboven kun je het frame verplaatsen.

Maak ook op dezelfde manier een kleurframe aan.

Last but not least maken/plaatsen we ook even een illustratie in een fotoframe binnen dit tekstframe:

Druk op de 'prt sc'-knop ergens op toetsenbord (er wordt een afdruk van uw scherm onzichtbaar in het geheugen van je computer geplaatst.)

Druk twee keer op de 'enter'-knop om twee regels naar beneden te komen en druk de ctrl'-knop op uw toetsenbord in, houdt deze ngedrukt en type de V-toets.

U krijgt nu een waarschuwingsschermpje te zien en klik hier op 'JA'.

En je krijgt een verkleine afdruk van je scherm te zien:

We hebben nu drie verschillende frames op het scherm staan die we gaan groeperen.

1) klik op een frame, houdt de 'shift'-knop in gedrukt en klik op het tweede en derde frame en laat vervolgens de toetsen los.

We zien nu het naastgelegen beeld op ons scherm. Klik op het icoontje (twee puzzelstukjes die niet in elkaar zitten) rechtsonder het gezamenlijke frame en de drie frames zijn aan elkaar verbonden. (De puzzelstukjes zitten nu in elkaar.) Klik nogmaals op het icoontje om ze weer van elkaar te scheiden.

LET OP: Er kunnen nu geen veranderingen in de gegroepeerde frames worden aangebracht.

Wanneer je de frames geselecteerd hebt kun je deze ook groeperen door in het 'Arrange'-menu op 'Arange Objects' te klikken.

Een andere manier om frames te groeperen is door met de Pointer Tool zo over de frames te slepen dat alle drie de frames in het blauwe markeringsvlak vallen. Wanneer je nu je muisknop loslaat zie je dat je de geselecteerde frames kunt groeperen.

Illustratie binnen een tekstframe plaatsen  <TOP>

Sleep een illustratie naar de tab Pictures in de tab 'Assets'.

Wanneer deze te groot is krijg je een melding met het verzoek de illustratie te verkleinen.

Ga accoord en pas hem direct eventueel verder aan. Onder de geactiveerde afbeelding zie je rechts drie kleine logootjes. De meeste rechtse geeft de pop-up 'Anchored Object Properties'. Als je hier op klikt kun je de positie en witrand ronde de foto instellen.

<TOP>