© Z-point - 20???

'FotoSlider' in een pagina plaatsen  <TOP>

De homepagina is altijd de eerste pagina waar bezoekers naar toe worden geleid.

Het is dus niet alleen belangrijk dat deze er aantrekkelijk uitziet, maar ook dat daar in beginsel veel informatie te vinden is om de aandacht vast te houden.

Plaatjes/Tekst-sliders zijn een goed hulpmiddel om de aandacht vast te houden.

Lege slider in een pagina plaatsen   <TOP>

Er zijn een flink aantal (kant en klare) sliders in de Assets Browser te vinden en, klaar om aan een pagina toe te voegen. Maar om volledige vrijheid in je ontwerp te hebben kun je deze ook volledig handmatig samenstellen. We gaan derhalve beginnen met een 'blanco Sliderframe'.

Klik in de Quick Build'-tab, in de 'Interactive Objects'-category,

houdt de Ctrl-key ingedrukt en klik op Slider-icoontje.

Klik vervolgens ergens op de pagina en het 'sliderframe' wordt geplaatst.

Pas het formaat naar wens aan. En dat kan op vele manieren. Wanneer je via de 'Transform'-tab werkt houdt dan Anchor Top Left en Aspect Ratio is Unlocked

(W (Width) to 780 pix en H (Height) to 340 pix. heb ik ingesteld)

Safe je werk: Ctrl+S.

Populariseren van de slider

WebPlus biedt oneindig veel mogelijkheden om de slider te populariseren.

Denk aan een sliding fotogallerij al dan niet van teksten voorzien opgeleukt met advertenties en andere pep-talk. Animated navigation elements, presentaties op tijden/beeld instellen en veel meer.

We bekijken een basic presentatie

Alles wat we maken doen we vanuit de Slider Studio:

Activeer het sliderframe

In de Context-toolbar, klik daar op Slider Studio.

De Slider Studio wordt geopend en het eerste paneel van de slider is zichtbaar op het werkblad…

Een foto toevoegen:

Het simpelste is een foto uit een map op je computer te openen

via Ctrl-A en Ctrl-C in het geheugen van de computer te plaatsen en in het frame van de slider te klikken…

Maar wanneer er foto's of andere elementen in de 'Pictures'-knop in de 'Layout Items'-balk van Quick Build zijn geplaatst, kunnen die met de 'Pictures'-knop in het sliderframe worden gesleept.

Wanneer Ctrl-knop wordt ingedrukt en dan naar een frame wordt gesleept, wordt er een leeg fotoveld geplaatst. Twee frames boven elkaar plaatsen is geen probleem…

(één is achtergrond en de andere het hoofdmotief.

Wanneer je via de 'Transform'-tab werkt houdt dan Anchor Top Left en Aspect Ratio dan Unlocked (X=0, Y=0, W=breedte ingestelde frame en H=hoogte ingestelde frame).

Slider panels toevoegen  <TOP>

in de Panels-tab:

of

Klik het eerste Panel.

Klik Copy Slider Panel.

We hebben nu drie panelen

Slider panel verwijderen  <TOP>

Selecteer het te verwijderen panel en klik links op het vuilnisbakje (Delete Slider Panel)

Plaatje uit een bestandsmap toevoegen  <TOP>

LET OP: Om foto's zonder vertekening in een slider te plaatsen:

Maak een (bestaand) panel eerst leeg. Plaats dan een leeg fotoframe met de Ctrl-knop ingedrukt te houden de fotoknop naar de slider slepen en dan verschijnt er een frame met een kruis er in. Dat is een fotoframe. Stel dit in op de gewenste afmetingen.

Kies onder de foto één van de twee mogelijkheden om een foto te importeren, maak je keuze en de foto wordt op de maximum breedte geïmporteerd.

Achteraf kan de framegrootte worden aangepast zonder dat er vertekening optreed. 'Omhoog & Omlaag'' doe je via het meest linkerknopje.

De foto kan via het balkje worden gedraaid, vergroot/verkleind, een andere foto plaatsen en de foto croppen… (al het beeld buiten het frame wordt nu verwijderd).

In het Import Picture-scherm, browse naar de gewenste Image-folder.

Geen foto's direct beschikbaar? Surf naar:

C:\Program Files (x86)\Serif\WebPlus\X8\Images

Tenzij een andere map bij het installeren is aangegeven…

Foto's over een bestaande foto in een slider slepen plaatst de foto en past de maat automatisch aan.

Een foto vanuit de Asset-tab (niet zichtbaar) in een frame

Dubbelklik een panel in de 'Panels'-tab en de foto wordt in de slider geopend.

Activeer het fotoframe en klik het rechterknopje 'Replace Picture from Assets' onder de foto. Er moet wel eerst een leeg fotoframe in het panel staan.

Selecteer of surf naar de plek waar de afbeeldingen staat en selecteer daar

de gewenste foto en klik OK. Meestal zal de foto door de automatische aanpassingen er niet goed uitzien

We zullen de foto dus moeten aanpassen

Klik op de foto om deze te selecteren en breng de gewenste veranderingen aan.

Gebruik het 'Position Image-knopje om de foto op de juiste manier te couperen.

'Voorgrondpaneel' gebruiken  <TOP>

Alle sliders hebben een 'foreground'-panel. Ieder object toegevoegd aan het 'foreground'-panel zal in ieder altijd als eerste pagina in een slider worden getoond. En dat geldt voor alle in een site toegepaste sliders…

Om items aan een 'foreground'-panel toe te voegen (QuickShape):

Activeer het sliderframe en open de Slider

in de Slider Studio.

Activeer het Foreground'-panel

Selecteer uit de Drawing toolbar van de QuickShape flyout de rechthoek. Of ieder andere vorm, naar wens.

Klik ergens in de werkruimte en er wordt een basisframe geplaatst.

In de transform-tab kun je maat en plaats heel nauwkeurig plaatsen.

(bv.: Anchor Top Left / Unlock aspect Ratio  dan X=40 Y=40 W=220 H=220) Geef het vlak een kleurtje in de Swatches-tab.

en zet de lijndikte onder de line-tab op 0.

Zet in het geactiveerde kleurvlakje de Transparency-tab-waarde op 40%.

tekst toevoegen   <TOP>

Activeer het tekst frame en sleep een vlakje in het gekeurde vlak in de Foreground-slider. Type/copieer de gewenste tekst in het tekstvlak en geef hier vorm aan bijvoorbeeld door Text Styles en/of Fonts te gebruiken.

Als je voor het voorbeeld een vlakje met Faketekst wil vullen:

Bekijk al je werk via Preview

Het Foreground-panel kan dus een hoop info bevatten dat op elke sliderpagina zichtbaar blijft. Je zou hier een logo/watermerk kunnen plaatsen, maar ook (actieve) knoppen.

Animaties zijn hier niet mogelijk. Veel voorbeelden van verschillende soorten sliders en toepassingen zijn te vinden in de de Asset Browser

Preview en opties instellen in de Slider Studio  <TOP>

Let op de besturingselementen

op de onderste balk.

Instellen van de verschillende beeld-overgangen  <TOP>

Wat gebeurt er bij de volgende instellingen?

Zet Panel Loop Time (ms) op 3000

Zet the Panel Animation Time (ms) op 1000

of

Zet Panel Loop Time (ms) op 5000

Zet the Panel Animation Time (ms) op 2000

Experimenteer met de verschillende opties….

Tekst in het Foreground frame staat voor alle fotosliders

Sliders

SCHAKELBARE INDEX

=====

'FotoSlider' in een pagina plaatsen

Lege slider in een pagina plaatsen

Slider panel toevoegen

Slider panel verwijderen

Plaatje uit een bestandsmap toevoegen

=====

'Voorgrondpaneel' gebruiken

Tekst toevoegen

Preview en opties instellen in de Slider- Studio

Instellen van verschillende beeld-overgangen

—-------------------------

<TOP>