Handleiding publishtool
Dit is de voorlopige handleiding. Ik ben er nog mee bezig. Dit geeft wel een aardig beeld wat in Publishtool mogelijk is.
Voorbeelden
Tabellen module
Dit voorbeeld dient om je een idee te geven hoe je tabellen gemaakt met de tabellen module kunt vormgeven voor de website en de pdf. Daarnaast wordt getoond dat de XML export van deze tabellen je veel meer mogelijkheden geeft in InDesign om tabellen volgens een gestructureerde manier vorm te gaven.
| Product | Kosten 2016 | Verwachte kosten 2017 |
|---|---|---|
| Kantoor | € 10 | |
| Puntenslijpers | € 65 | € 45 |
| Pennen | € 120 | € 90 |
| Potloden | € 24 | € 20 |
| Sub totaal | € 209 | € 155 |
| Computers | ||
| Schermen | € 3,450 | € 3,600 |
| Computers | € 5,100 | € 6,000 |
| Accesoires | € 450 | € 510 |
| Sub totaal | € 8,900 | € 10,100 |
| Totaal | € 9,109 | € 10,255 |
Hieronder wordt uitgelegd hoe deze voorbeeld tabel is gemaakt en vormgegeven. De tabel is als volgt ingevoerd:
De tabel stijlen zijn aangemaakt in het tabel stijl tabblad. Hier kun je stijlen aanmaken voor rijen of kolommen. Het hieronder staande stijlsheet is aangemaakt voor de tabel vormgeving:
th, td {
padding-right:2px;
height:26px;
}
th {
border-bottom: 1px solid #cce3e3;
}
th span, td span {
padding-left:0px;
padding-right:8px;
}
.expectation {
background-color:#eafcfc;
border-left: 1px solid #cce3e3;
border-right: 1px solid #cce3e3;
}
.bedrag {
text-align:right;
padding-left:4px;
padding-right:4px;
}
.standaard .bedrag span {
margin-right:80px;
}
.standaard .text {
padding-left:6px;
}
.subtotal .bedrag span {
padding-top:2px;
padding-bottom:2px;
border-top:1px solid #aaa;
}
.groep td span {
font-style:italic;
}
.totaal td {
padding-top:6px;
}
.totaal span {
font-weight:bold;
}
.totaal .bedrag span {
padding-top:4px;
border-top:3px double #999;
}
De export van de XML voor InDesign zorgt ervoor dat er cell stijlen worden doorgeven waarmee je in InDesign ook makkelijker en volgens een gestructureerde manier de tabellen kunt vormgeven. Voor elke cell class wordt ook een bijbehorende alinea stijl aangemaakt.
Tabellen module met meerdere talen
Om duidelijk te maken hoe de tabellen module werkt in combinatie met meerdere talen wordt als voorbeeld het aanmaken van een de "Consolidated Income Statement" tabel van het jaarverslag van de ABN AMRO Groep gebruikt. Op de download pagina kun je het jaarverslag van 2016 downloaden.
Als eerste wordt een Excel sheet gemaakt met de gegevens van deze tabel. Het bestand wordt opgeslagen als .csv bestand. Vervolgens wordt deze geïmporteerd in Publimanger.
En er wordt en stijlsheet voor de tabel gemaakt. Het stijlsheet ziet er als volgt uit:
table {
background-color: #d8ece9;
width:100%;
margin-bottom:20px;
}
caption {
color: #006962;
font-size: 17px;
font-weight:bold;
}
th {
padding-top:4px;
padding-left:4px;
padding-right: 4px;
color: #006962;
font-size: 12px;
font-weight:bold;
border-bottom: 5px solid #009d8b;
}
th.std_text {
color: #111;
font-size: 11px;
font-weight:normal;
}
td {
color: #111;
font-size: 12px;
padding-left: 4px;
padding-right: 4px;
}
td.highlight {
background-color: #f0f8f6;
}
td.standaard, td.highlight, td.notes, th.standaard, th.highlight, th.notes {
text-align: right;
}
td.standaard span, td.highlight span, td.notes span, th.standaard span, th.highlight span, th.notes span {
margin-right:2px;
margin-left:12px;
}
td.standaard span, td.highlight span, th.standaard span, th.highlight span {
margin-right:2px;
margin-left:36px;
}
.header_items td {
font-size: 13px;
font-weight:bold;
color:#536168;
}
.grouptotal, .subtotal {
border-top: 1px solid #006962;
}
.grouptotal td {
color: #006962;
font-size: 13px;
font-weight: bold;
padding-bottom:10px;
}
.subtotal td {
color: #536168;
font-size: 13px;
padding-bottom:10px;
}
.subtotal .std_text {
font-weight:bold;
}
.subtotal td.highlight {
color: #006962;
font-size: 14px;
font-weight:bold;
}
.totaal td {
background-color: #7a8890;
color: #fff;
font-size: 14px;
font-weight: 400;
}
.totaal td span {
padding-top:;4px;
padding-bottom:;4px;
}
td.notes {
font-size: 10px;
font-weight:normal;
color: #536168;
}
Als je nu de andere taal selecteert zie je dat alle stijlen en getallen in de tabel staan, alleen de tekst kolommen zijn leeg.
Voor het voorbeeld zijn deze zo goed mogelijk vertaald. Dit is het resultaat:
| in miljoenen | note | 2106 | 2015 |
|---|---|---|---|
| Inkomen | |||
| Rentebaten | 12,651 | 13,207 | |
| Rentelasten | 6,383 | 7,13 | |
| Netto rente inkomen | 4 | 6,267 | 6,076 |
| Inkomsten en provisies | 3,082 | 3,061 | |
| Inkomsten en provisies kosten | 1,34 | 1,233 | |
| Netto Inkomsten en provisies | 5 | 1,743 | 1,829 |
| Netto handelsinkomen | -211 | 99 | |
| Aandeel van het resultaat in eigenvermogensrekeningen | 55 | 1 | |
| Overige bedrijfsopbrengsten | 7 | 373 | 450 |
| Bedrijfsopbrengsten | 8,227 | 8,455 | |
| Kosten | |||
| Personele kosten | 8 | 2,777 | 2,492 |
| Algemene en administratieve uitgaven | 9 | 2,682 | 2,559 |
| Afschrijvingen van materiële en immateriële vaste activa | 23 | 198 | 177 |
| Bedrijfskosten | 5,657 | 5,228 | |
| Waardeverminderingen op leningen en overige vorderingen | 114 | 505 | |
| Totale uitgaven | 5,771 | 5,734 | |
| Bedrijfsresultaat / (verlies) vóór belastingen | 2,456 | 2,722 | |
| Inkomstenbelasting | 10 | 650 | 798 |
| Winst / (verlies) voor het jaar | 1,806 | 1,924 |
Je kunt de html code en de stijlen die toegekend zijn bekijken door in de tabel met de rechter muisknop te kiezen voor "Inspect element"
Tabellen module HTML cellen
Extra text
Als je kiest bij unit voor html kun je html plaatsen in de tabel. Je kunt dan gebruik maken van de stijlen die je hebt gedefinieerd voor je document. Het is wel belangrijk dat de html klopt, vooral dat tags goed worden afgesloten. En dit is het resultaat:
En dit is het resultaat:
| Type | HTML El | Voorbeeld |
|---|---|---|
| Alinea | <p> |
Hier een inleidende tekst |
| Inline | <span> |
Hier een normale tekst een een inline gekleurde tekst |
| List | <ul>,<ol> |
|
| Blok | <div> |
Tekst 1 Tekst 2 |
| Titel | <h1>,<h2>,<h#> |
Kop |