06 Sliders

Home Programma's Overigen SiteMap

06 Sliders

© 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-toets ingedrukt en klik op het Slider-icoontje.

Klik vervolgens ergens op de pagina en 'sleep' het 'sliderframe' op een willekeurige maat. Pas het formaat naar wens aan en dat kan op verschillende manieren. Wanneer je het héél precies wilt doen gebruik dan de 'Transform'-tab. Houdt hier de blauwe punt in het schema links boven op Anchor Top Left en de Aspect Ratio op Unlocked (W (Width) op 780 pix en H (Height) op 340 pix. heb ik ingesteld). Safe je werk met : Ctrl+S.

Opleuken van de slider

WebPlus biedt oneindig veel mogelijkheden om de slider op te leuken.

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… De afbeeldingen passen zich aan aan de breedte en de hoogte instelling van het frame en dat is niet altijd acceptabel.

Onder de kop 'Plaatje uit een bestandsmap toevoegen' wordt uitgelegd hoe een en ander kan worden voorkomen.

Ook kunnen er foto's of andere elementen via de 'Pictures'-knop in de 'Layout Items'-balk van Quick Build worden geplaatst

Wanneer de Ctrl-knop wordt ingedrukt en je een frame 'sleept', wordt er een leeg fotoveld geplaatst. Twee frames boven elkaar plaatsen is geen probleem… Denk aan een kleurvlaktje met tekst er boven. Wanneer je via de 'Transform'-tab werkt houdt dan Anchor Top Left en Aspect Ratio op Unlocked (X=0, Y=0, W=breedte ingestelde frame en H=hoogte ingestelde frame).

Slider panels toevoegen <TOP>

in de Panels-tab:

Klik het eerste Panel.

Klik Copy Slider Panel.

We hebben nu drie panelen

Sliderpanel 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