Design Trainingen

1 Folio Navigatie & Toc

<<< terug1 folio navigation & toc2 folio orientatie3 folio overlays4 folio builder5 folio DPS publiceren



Heb je WEL de tutorial Interactieve PDF gedaan?

  1. Bewaar je laatste InDesign-document uit de iPDF-tutorial als: FOLIO_selfie.indd
  2. START vervolgens hier >>>

De juiste werkruimte instellen in InDesign

Kies rechtsboven voor de werkruimte: Digitaal Publiceren (digital publishing)

LET OP: de vensters die je in deze tutorial voornamelijk tegen komt, zijn terug te vinden in InDesign onder:
Venster (window) / Folio overlays
Venster (window) / Folio builder


Heb je NIET de tutorial Interactieve PDF gedaan?

1. Download deze werk-bestanden [53mb]

--> Open het IDML-bestand voor InDesign ouder dan Adobe CC

2. Fonts

In verband met auteursrechten zijn de fonts uit het voorbeeld niet meegeleverd. Je zult dus zelf twee fonts moeten kiezen. Je vervangt de ontbrekende fonts in InDesign via: Tekst (type) / Lettertype zoeken (find font)

LET OP: Kies fonts waarin dezelfde fontvariabelen zijn als de fonts die je vervangt (ook een bold etc versie)

TIP: Klik “redefine style when changing all” aan.  Zo verander je ook de geneste stijlen. Controleer je document en pas desnoods de tekstkaders aan, als er tekst verdwijnt.

3. Controleer de onderstaande bladwijzers of maak ze aan:

Bekijk het gedownloade InDesign-document (w-toets voor zichtbaar stramien)...

  1. Dubbelklik in het Pagina-venster op de eerste pagina
  2. Kies: Venster (window) / Interactief (interactive)
  3. Open het venster Bladwijzers (bookmarks)
  4. Maak een nieuwe bladwijzer aan en noem deze: COVER H (H staat voor Horizontaal)
  5. Maak per pagina een bladwijzer aan. Deze zijn straks nodig voor de navigatie. Selecteer eerst de juiste pagina, voordat je een bladwijzer aanmaakt. Gebuik per bladwijzer/pagina de onderstaande namen:
    • INHOUD H
    • THE SELFIE H
    • 10 SELFIE TIPS H
    • 360 SELFIE H
    • SELFIE FACTS H
    • BAD SELFIES H
    • SELFIE ENQUETE H

Een duidelijke mappen structuur voor de FOLIO maken

Maak een hoofdmap: FOLIO_seflie met daarin de onderstaande mappenstructuur. Plaats je InDesign-document in de eerste map article_1_cover. De andere mappen blijven nog leeg.


Folio-knoppen maken voor de navigatie-menubalk

Omdat de knop-actie: Naar Bestemming (Go To Destination) niet werkt in een folio, krijgt elke knop een tweede actie (+): Naar URL (Go To URL):

  1. Dubbelklik in InDesign bij het Pagina-venster op de A-master 'basis leeg iPad H' en selecteer de eerste menu-knop: inhoud
  2. Kies: Venster (window) / Interactief (interactive)
  3. En open het venster Knoppen en Formulieren (buttons and forms)
  4. Maak een knop (button)
  5. Kies bij Acties: Ga naar URL (go to url)
  6. Verwijder: http://  en type in het URL-veld: navto://article_2_toc
  7. Druk 1 x op de tab toets om de invoer te bevestigen
  8. Sleep de Actie 'Ga naar URL'  boven de Actie 'Naar doel' (go to destination)
  9. Maak ook alle andere knoppen en gebruik de volgende url-namen:
    • navto://article_3_selfie
    • navto://article_4_tips
    • navto://article_5_360selfie
    • navto://article_6_facts
    • navto://article_7_bad
    • navto://article_8_enquete
  10. Kopieer het menu van de A-master en vervang het menu op pagina 4. Deze pagina is vanwege het langere formaat losgekoppeld van de master, waardoor het menu niet automatisch wijzigt.

Deze namen worden later in deze tutorial weer gebruikt voor de folio-artikelen.


Merk op dat de B-master deze instellingen vanzelf over neemt, omdat A- en B-master met elkaar zijn gekoppeld
(zie: Pagina-venster / stramienopties B-basis tekst iPad H).

Rollovers van de knoppen werken helaas niet op de Apple iPad. Deze worden door InDesign als swf-object geexporteerd en niet ondersteund door Apple


Maak op dezelfde manier ook de knoppen van de Inhoudsopgave (TOC).


Knop TERUG (pijl omhoog) maken

Maak op dezelfde manier een knop van de pijl (links boven op A-master):

  1. Ga naar de A-master pagina
  2. Kies: Venster (window) / Interactief (interactive)
  3. En open in InDesign het venster Knoppen en Formulieren (buttons and forms)
  4. Selecteer de pijl-onhoog. Indien het nog geen knop is, maak je er eerst een knop van.
  5. Kies bij Acties: Ga naar URL (go to url)
  6. Verwijder: http://  en type in het URL-veld: navto://article_2_toc
  7. Druk 1 x op de tab toets om de invoer te bevestigen
  8. Sleep de Actie 'Ga naar URL'  boven de Actie 'Naar doel'  (go to destination)
    De pijl linkt nu naar pagina 1 (COVER).

LET OP: Op pagina 4 is de link van de pijl nog niet aangepast. Deze pagina is losgekoppeld van de master vanwege de andere paginahoogte.

  1. Kopieer uit de de A-master het menu en de pijl-omhoog knop
  2. Dubbelklik op pagina 4 in het Pagina-venster
  3. Plak en positioneer het menu, gelijk aan de andere pagina's

Naar de volgende stap