© Z-point - 20???

Navigatiebalk

SCHAKELBARE INDEX

=====

Navigatiebalk

Uiterlijk van de navigatiebalk aanpassen

=====

De kleuren veranderen

Schakelbalk in de 'Footer'

Pagina's Toevoegen

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

Navigatiebalk  <TOP>

Ik wil in elke MasterPage een aparte navigatiebalk plaatsen i.v.m. de beschikbate ruimte.

Binnen het programma is een ruime keus aan navigatiebalken beschikbaar.

DubbelKlik op de 'Master Page' waar je de navigatie aan toe wil voegen en deze wordt geopend.

Aangezien ik bovenstaande navigatiebalk wil in Master Page A wil plaatsen Open ik deze pagina en activeer het frame waar de huidige navigatiebalk in geplaatst is.

Klik de' Objects-tab '

Kies onderaan In de Show: drop-down-list: Navigation Bar (standaard = All Objects)

Wanneer er meerdere objecten in Master-A zijn opgeslagen wordt dat in de balk aangegeven (x objects) klik vooraan in de balk 'Master A' op het +teken om een  overzicht te openen.

Kies hier in dit geval 'button navigation bar_nav34'.

Op de Arrange toolbar, selecteer 'Bring to Front'.

Sleep de 'central handle' naar links om de maat van het frame te verkleinen

Met de navigatiebalg nog steeds geselecteerd versleep met de 'Verplaatst-knop' (links boven het frame) en plaats het frame rechts boven het 'Background-frame'.

Uiterlijk van de navigatiebalk aanpassen   <TOP>

We gaan het nodige veranderen (sla even je werk op met Ctrl+S.):

We beginnen met de stijl.

Double-click in het frame van de navigatiebalk terwijl de MasterPage is geactiveerd.

Het 'Edit Navigation-Bar'-scherm verschijnt.

Open de tab 'Type'. Je krijgt een verzicht van alle hier beschikbare navigatiebalken.

Wanneer je op een voorbeeld klikt kun je zien hoe hij werkt.

Klik linksboven op 'Designer' om terug te schakelen.

Er zijn opgenomen:

Designer      11

Graphical     26

Illustratieve  7

Javascript     4

Premium        8

Simple        20

Tabs           4

             ===

              80

Veel keus dus…!!!

Veel losse onderdelen ook te krijgen: klik op 'Browse Assets'.

We kiezen voor 'Designer/Designer-2'

Klik op de illustratie en bekijk de werking. Klik op de groep 'Designer' om terug te keren.

Klik onderaan op 'OK' om de oude balk te vervangen voor de nieuwe navigatiebalk.

Sla je werk weer op met Ctrl+S.

Bekijk via de site-preview (TV-schermpje bovenin)

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

Even tussendoor:

We passen gelijk de schakelbalk voor Intro B aan.

Double-click in het frame van de navigatiebalk terwijl de MasterPage is geactiveerd.

Het 'Edit Navigation-Bar'-scherm verschijnt.

Open de tab 'Type'. Je krijgt een verzicht van alle hier beschikbare navigatiebalken.

Maak je keuze en klik 'OK'. De opmaak doen we later wel…

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

We gaan verder met Master A.  <TOP>

De navigatiebalk verder aanpassen…

Webplus beschikt een geavanceerde studio die het mogelijk maakt veel aanpassingen aan bestaande navigatiebalken aan te brengen.

Double-click in het frame van de navigatiebalk terwijl de MasterPage is geactiveerd.

Het 'Edit Navigation-Bar'-scherm verschijnt.

Klik op de tab 'Appearance'

Selecteer uit de categorieën links 'Buttons'. en klik rechts op het 'potloodje'.

De 'WebPlus X8 - Button Studio' wordt geopend.

Hier gaan we de tekstkleur, de stand van de teksten en de kleuren binnen het ontwerp aanpassen. (Uitgebreide info over het bewerken is te vinden onder de tab 'How To'

Om tekststijlen aan te passen activeer het tekstframe:

Pas lettertype, corps, kleur, uitlijning en stand aan…

Klik in het tekstvlakje en pas aan

De kleuren veranderen   <TOP>

1. In de States-tab, double-click de Down selectie om zijn huidige staat in de werkruimte weer te geven.

2. selecteer de onderste rechthoek in het grote werkveld

In de 'Swatches' tab, kies een kleur of maak een kleur in de 'Color'-tab

Herhaal  de stappen 1-3 met de Hover-knop (reageert op de site wanneer de knop aangeraakt wordt).

De uitlijning van de navigatie binnen het frame kan ook worden aangepast

Kies Layout in de 'Appearance'-tab en bring de gewenste veranderingen aan.

Snelle paginabesturingen kunnen ook handmatig in de HTML-editor worden aangebracht maar het is ook nog mogelijk een schakelbalk in de 'Footer' te plaatsen:

Schakelbalk in de 'Footer'  <TOP>

Open de 'Master Page' waarin je de schakelbalk in wilt aanbrengen.

Klik in de 'Quick Build'-tab (links op het scherm) de 'Navigation Items'-balk.

Plaats de cursor op linker deel van de Footer-strook en klik. In het 'Insert Navigation Bar'-scherm kun je bijvoorbeeld uit de categorie 'Simpel' de navigatiebalk 'Simple 4' kiezen.

Wanneer je je navigatiebar hebt uitgekozen klik 'OK' en hij wordt geplaatst.

Dubbelklik in het geplaatste frame en het 'Edit Navigation Bar'-scherm wordt geopend.

Geef in de tab 'Appearance' je voorkeuren aan. Via het 'potlood'-icoontje in de rubriek 'Buttons' kun je in de tab 'States' een aantal aanpassingen doen zoals de kleuren, etc.

instellen. In het vakje waar 'Normal' staat, kun je wanneer je de tekst activeert ook de grootte van de letters aanpassen. Let er op dat het frame binnen/op de rode lijnen blijft.

Lettertype instellen en kleur doe je bovenin in het scherm met de dropdownmenu's.  Sluit hier af met 'Commit Changes' linksboven en in het volgende scherm 'OK'.

Pagina's Toevoegen  <TOP>

Dubbelklik op de pagina waaronder een nieuwe pagina moet worden toegevoegd.

Een oogje geeft aan dat de aangeklikte pagina actief is.

Klik op het +knopje en voeg een nieuwe pagina toe. Vul in het volgende scherm ('Page Properties') de titel van de pagina en de bestandsnaam+.html in (beide namen hetzelfde houden maakt het terug vinden van de pagina's in een later stadium makkelijker).

Wanneer er met meer Master=Pagina's wordt gewerkt, moet de pagina nog aan de juiste Masterpagina gekoppeld worden. Klik in de in links in 'Page Properties' op 'Master Pages' en activeer de juiste MasterPage. Vergeet niet de andere(n) te déactiveren.

Wanneer nodig, pas dan in 'Page Properties' op 'Appearance' de hoogte- en breedte-instellingen van de pagina aan.

<TOP>