Handleiding voor het Huisstijlhandboek

Handleiding Huisstijlhandboek Datum 23.03.11

pagina 1 / 21

Handleiding voor het Huisstijlhandboek Voor klanten van Dim is het mogelijk om een online huisstijlhandboek te realiseren. Dit huisstijlhandboek behelst alle uitingen van de huisstijl en bevat ook opties als een beeldbank voor het bekijken en toevoegen van foto’s. In dit document staat beschreven hoe het huisstijlhandboek, vanaf nu HHB, gebruikt kan en dient te worden. Dit document is een generieke handleiding; waarin alle onderdelen worden getoond. Niet alle onderdelen zijn altijd aanwezig. Inhoud

1

Inloggen en de opbouw van het HHB ..........................................................2

1.1 Inloggen ......................................................................................................................... 2 1.2 Opbouw van het HHB .................................................................................................. 3 1.2.1 Het menu................................................................................................................. 3 1.2.2 Subniveaus.............................................................................................................. 4 1.2.3 Technische toevoegingen...................................................................................... 4 1.2.4 Kopjes ...................................................................................................................... 5

2

Gebruik van het HHB ..................................................................................6

2.1 Toevoegen en wijzigen van een artikel ..................................................................... 6 2.2 De editor ........................................................................................................................ 7 2.2.1 De bovenste velden ................................................................................................ 8 2.2.2 Editor mogelijkheden ............................................................................................ 9 2.3 Formatteren.................................................................................................................11 2.4 Het document opschonen ..........................................................................................11 2.5 Toevoegen van linkjes (en documenten) ................................................................12 2.5.1 Uploaden en linken van documenten ...............................................................13 2.5.2 Een link maken waarmee gemaild kan worden ..............................................14 2.6 Toevoegen en uploaden van afbeeldingen...............................................................15 2.7 Werken met tabellen .................................................................................................. 18 2.7.1 Een tabel maken (knop 1) ..................................................................................18 2.7.2 Individuele aanpassingen per rij of cel (knop 3 en 4) ................................... 19 2.7.3 Rijen en kolommen toevoegen en verwijderen (knop 5 t/m 10) ...................20 2.7.4 Cellen samenvoegen en herstellen (knop 11 & 12)........................................ 20

Handleiding Huisstijlhandboek pagina 2 / 21

Datum 23.03.11

1 1.1

Inloggen en de opbouw van het HHB Inloggen

Het HHB ziet er per klant anders uit. Er wordt een persoonlijke tint meegegeven die overeenkomt met de huisstijl van de ingelogde klant. Zo kunnen linkjes een andere kleur aannemen per klant en verandert de header bovenaan de pagina in het logo van de klant.

Afbeelding 1. uitgelogde weergave

Afbeelding 2. ingelogde weergave

Via het vak linksonder kan ingelogd en uitgelogd worden. Om in te loggen voer je je gebruikersnaam en wachtwoord in en klik je op inloggen. Om uit te loggen klik je als je ingelogd bent op Uitloggen.

Afbeelding 3. inloggen

Afbeelding 4. uitloggen

Zodra je ingelogd bent krijg je een persoonlijk welkomstbericht en staat in de linkerkolom een menu met de structuur die bij de ingelogde klant hoort. Via deze structuur kun je alle huisstijlgegevens van deze klant raadplegen.


Datum 23.03.11

Afbeelding 5. welkomstbericht

1.2

Opbouw van het HHB

Het HHB heeft een eenvoudige opbouw. Het bestaat uit een linker- en een rechterkolom. In de linkerkolom staat een menu om door het HHB te bladeren. In de rechterkolom staat de daadwerkelijke inhoud van het gekozen menu.

1.2.1

Het menu

Het menu kan uit 2 niveaus bestaan (in overleg met Dim kan dit eventueel uitgebreid worden, het beheer hiervan valt dan onder Dim). Lagere niveaus hebben een inspringing ten opzichte van hogere niveaus.

Afbeelding 6. Meerdere niveaus in het menu


Datum 23.03.11

1.2.2

Subniveaus

Als een pagina gekozen is met meerdere subniveaus is er in het rechterdeel dezelfde opsomming te zien. Als een menu wordt gekozen zónder subniveaus opent het artikel meteen zodat de inhoud te zien is.

Afbeelding 7. met subniveaus

1.2.3

Afbeelding 8. zonder subniveaus

Technische toevoegingen

Binnen een pagina zijn er twee handigheidjes; Er is een mogelijkheid om het artikel onder te verdelen in meerdere secties, terug te vinden in een klein menu bovenaan het artikel en er is een knop die bij lange artikelen de mogelijkheid biedt om snel weer naar boven te gaan. Het menu met de onderverdeling staat bovenaan het artikel en is een opsomming van kopjes in het artikel. De knop om snel weer naar boven te gaan verschijnt in beeld zodra er gescrollt wordt.

Afbeelding 9. minimenu bovenaan een

Afbeelding 10. "terug naar boven"

lang artikel

knop bij een lang artikel


Datum 23.03.11

1.2.4

Toepassing en Typografie tbv koppen

Het HHB gebruikt verschillende koppen om verschillende niveaus aan te geven. Er zijn drie niveaus; Kop 1 tot en met Kop 3. Kop 1 wordt gebruikt boven lijsten van artikelen en als titel van een artikel zelf. Kop 2 wordt gebruikt om artikelen in een categorie aan te geven. Kop 3 wordt in artikelen gebruikt om tussenkopjes aan te geven. Een handigheidje hieraan is dat deze kopjes automatisch opgenomen worden in het minimenu bovenaan een artikel.

Afbeelding 11. uitleg kop 1 tot en met kop 3


Datum 23.03.11

2 Gebruik van het HHB Mensen die het HHB bewerken kunnen het gewoon gebruiken/inlezen zoals alle andere gebruikers. Zij hebben echter ook de mogelijkheid om binnen een categorie een artikel toe te voegen of een bestaand artikel te wijzigen. Hieronder staat beschreven hoe dat in zijn werk gaat. Om deze functionaliteit te zien moet er wel ingelogd zijn met een editor-account.

2.1

Toevoegen en wijzigen van een artikel

Op een categoriepagina (een opsomming van artikelen) staat bovenaan een link “Voeg een nieuw item/artikel toe in deze categorie”.

Afbeelding 12. link voor toevoegen

Als je hierop klikt opent een scherm met daarin een editor. Hoe je hier precies mee werkt wordt uitgelegd in 2.2. Een groot verschil tussen een nieuw artikel toevoegen en een bestaand artikel wijzigen is dat er bij een nieuw artikel nog helemaal niks is ingevuld, ook de categorie niet. Bij het aanmaken van een artikel dient altijd een categorie ingevuld te worden, anders is het artikel daarna niet meer terug te vinden.

Afbeelding 13. een nieuw artikel met een selectieveld voor de categorie


Datum 23.03.11

Na het invullen van alle velden kan het artikel toegevoegd worden door op Opslaan te klikken of geannuleerd te worden door op het kleine zwarte kruisje rechtsboven te klikken.

Afbeelding 14. bewerk een artikel

Afbeelding 15. Bewerk een artikel in een categorie

Een artikel wijzigen kan op twee manieren: Je kunt in een categorieweergave of in het artikel zelf boven de artikelnaam op “bewerk artikel” klikken. Als je dit doet komt de editor naar voren, ingevuld met het huidige artikel en kun je dit wijzigen. Hierna kun je het opslaan of annuleren zoals dat bij een nieuw artikel ook kan.

Afbeelding 16. het wijzigen van een artikel

2.2

De editor

De editor is het belangrijkste onderdeel van het HHB. Hiermee kan tekst gestyled worden, linkjes toegevoegd worden (zie 2.5), foto’s geüpload en toegevoegd worden (zie 2.6) en documenten toegevoegd worden (zie 2.5).


Datum 23.03.11

2.2.1

De bovenste velden

De velden die ingevuld dienen te worden zijn de titel van het artikel en de categorie waarbinnen het artikel valt. De rest van de bovenste velden hoeven niet ingevuld te worden. Dit verzorgt het systeem zelf.

Afbeelding 17. De bovenste velden


2.2.2

pagina 9 / 21

Editor mogelijkheden

Om tekst aan te passen naar wens is een editor aanwezig die lijkt op Word. Hiermee kan tekst vet, schuingedrukt of onderstreept worden maar de editor kan nog veel meer. Voor de meeste functies geldt dat er tekst geselecteerd moet zijn om het te kunnen gebruiken. Als er rechts van een knop een pijltje omlaag staat vallen hier extra opties onder. Hier onder staat een opsomming van de mogelijkheden, per rij, van links naar rechts:

1.

Bold/Dikgedrukt maken van tekst

2. Italic/Schuingedrukt maken van tekst 3. Tekst onderstrepen 4. Tekst doorstrepen 5. Links uitlijnen 6. Gecentreerd uitlijnen 7. Rechts uitlijnen 8. Uitvullen van tekst 9. Formatteren van tekst (een ander profiel toepassen, zie 2.3) 10. Ongedaan maken 11. Opnieuw uitvoeren 12. Helpfunctie (klik om uitleg te krijgen over functies)


1.

Knippen van tekst

2. Kopiëren van tekst 3. Plakken van tekst (met extra opties) 4. Een genummerde lijst (met extra opties) 5. Een niet-genummerde lijst (met extra opties) 6. Inspringing verkleinen 7. Inspringing vergroten 8. Tekst richting (van links naar rechts, europees) 9. Tekst richting (van rechts naar links, aziatisch) 10. Subscript 11. Superscript 12. Het document opschonen (zie 2.4) 13. De editor het volledig scherm laten vullen 14. Speciale symbolen

1.

Speciale stijlen *

2. Een spatie invoeren die niet afgebroken mag worden 3. Hulplijnen voor tabellen 4. Hulplijnen voor alle andere elementen 5. Afbeeldingen toevoegen (zie 2.6) 6. Link toevoegen (zie 2.5) 7. Een link verbreken 8. De code bekijken * 9. Intro/Content break invoeren * 10. Sectie einde of pagina einde invoeren * 11. Tabel invoeren (zie 2.7) 12. t/m 22. Hulpmiddelen voor werken met tabellen * * alleen voor geavanceerd gebruik (onderhoud door dim)

pagina 10 / 21


2.3

pagina 11 / 21

Formatteren

Met het Formatteermenu kan makkelijk gekozen worden voor een andere tekstopmaak, die bovendien automatisch klopt binnen het HHB. De mogelijkheden die op het moment van schrijven ondersteund worden door het HHB zijn (in rood staat aangegeven welke aanduiding dit krijgt als hulplijnen aanstaan): •

Paragraph (een alinea) (p)

•

Div (een blok met daarin bijvoorbeeld een foto) (div)

•

Heading 1 (kopje 1) (H1)

•


•


Afbeelding 18. voorbeeld van formaten met hulplijnen ingeschakeld

2.4 Het document opschonen Soms raken artikelen vervuild door veelvuldig knippen, kopiëren en plakken. Dit is in de editor te zien als de hulplijnen bijvoorbeeld missen. Hier is een eenvoudige oplossing voor. De knop in de editor met het plaatje van een bezem erop zorgt ervoor dat zoveel mogelijk problemen opgelost worden. De editor gebruikt deze functie automatisch als een artikel opgeslagen en geopend wordt, maar mocht er tussendoor iets fout gaan dan kan de knop altijd gebruikt worden.


Datum 23.03.11

2.5

Toevoegen van linkjes (en documenten)

Voor het toevoegen van linkjes naar andere pagina’s, andere websites en documenten is er de link knop. Via deze knop kunnen documenten ook geüpload worden en in mappen gezet worden. Om deze knop te gebruiken moet er eerst wel tekst geselecteerd zijn om de link aan te koppelen. Na activatie komt er een venster naar voren met daarin een aantal opties. De belangrijkste opties staan hieronder toegelicht:

Afbeelding 19. Het venster voor een link toevoegen

1.

Het URL-vak; hier kan een website ingevuld worden.

2. Zoeken en linken van documenten (zie 2.5.1). 3. Een link opstellen waarnaar gemaild kan worden.


Datum 23.03.11

2.5.1

Uploaden en linken van documenten (2)

Als op de documenten knop geklikt wordt komt er een venster naar voren waar een document gekozen kan worden. Door op de naam van het document te klikken en daarna op de knop “Insert” kan een link naar het betreffende document geplaatst worden.

Afbeelding 20. Het document selectie venster

Dit venster heeft echter twee nog meer functies: uploaden en mappen aanmaken. Voor een nieuwe map hoeft alleen een naam ingevuld te worden, gevolgd door een klik op OK. De map wordt dan meteen toegevoegd. Om documenten te uploaden in een map kan in de lijst links een map gekozen worden. Als je in deze map zit kun je met een klik op de upload-knop eenvoudig de documenten uploaden.


2.5.2

pagina 14 / 21

Bestanden toevoegen

Er verschijnt een venster met daarin een “Add” knop waarmee je meerdere bestanden kunt toevoegen. Als de documenten zijn geselecteerd klik je op “Upload”. Je krijgt dan een vinkje te zien achter geüploade bestanden. Als achter alle bestanden een vinkje staat kun je op “Close” klikken om weer terug naar het documenten venster te gaan.

Van links naar rechts de stappen voor het uploaden: 1. een leeg venster. 2. de toegevoegde bestanden in de lijst. 3. de vinkjes geven aan dat de bestanden geüpload zijn.

2.5.3

Een link maken waarmee gemaild kan worden (3)

Bij het toevoegen van een link kan ook gekozen worden om een emailadres te koppelen. Als dan geklikt wordt op de link zullen de meeste emailprogramma’s dit overnemen en automatisch een mailtje openen naar dit emailadres welke dan verder ingevuld kan worden.

Om zo’n mail-link in te voegen gebruik je de knop voor links en kies dan de emailoptie (zie 2.5). Het volgende scherm verschijnt:


Datum 23.03.11

Afbeelding 21. Een email-link aanmaken In dit venster vul je een contactpersoon in (To), eventuele extra ontvangers (Cc en Bcc) en het onderwerp (Subject) van de mail die opgesteld dient te worden. Als de velden ingevuld zijn klik je op OK om terug te gaan naar het Link Invoeren venster. Hier kun je dan op Insert klikken om de link in te voeren.

2.6 Toevoegen en uploaden van afbeeldingen Binnen de editor kunnen ook afbeeldingen geüpload worden om in het artikel te zetten. Het uploaden van een afbeelding gaat hetzelfde in zijn werk als een document uploaden (zie 2.5.1). Na het uploaden kan een afbeelding uit de lijst gekozen worden. Het scherm waarmee een afbeelding gekozen kan worden verschilt op een aantal punten van het documentenscherm:


Datum 23.03.11

Afbeelding 22. afbeeldingskeuzescherm •

URL: wordt automatisch ingevuld als een afbeelding gekozen wordt.

•

afmetingen: dit staat standaard goed. Mocht een afbeelding gerekt moeten worden dan kunnen deze gegevens hier aangepast worden.

•

kaderrand: hiermee kan een rand om de foto gezet worden. Als het vinkje aanstaat kan de breedte, stijl en kleur van de rand gekozen worden. (wij adviseren om alle afbeeldingen te voorzien van een zwarte kaderrand)

•

Gegevens en voorbeeld: Hierin staat een voorbeeld van de afbeelding en gegevens zoals grootte en originele afmetingen.

Als een afbeelding gekozen is en de instellingen zoals gewenst zijn aangepast kan de afbeelding in het artikel geplaatst worden met Insert. In sommige browsers (zoals firefox) kan de afbeelding in de editor zelf nog vergroot of verkleind worden. Dit gebeurt door middel van ankerpunten die versleept kunnen worden. Hiervoor klik je op de afbeelding, de ankerpunten verschijnen dan. Deze ankerpunten kun je hierna vastpakken en verplaatsen om de afbeelding te schalen.


Datum 23.03.11

Afbeelding 23. ankers bij een afbeelding


Datum 23.03.11

2.7

Werken met tabellen

Tabellen zijn soms handig om inhoud te structureren, of om meerdere kolommen te realiseren binnen een artikel. De editor heeft hier een aantal knoppen voor:

Afbeelding 24. Tabelbewerking Hieronder staan deze functies uitgelegd. 2.7.1

Een tabel maken (knop 1)

Met deze knop kan een tabel aangemaakt worden. Het volgende venster verchijnt:

Afbeelding 25. Het tabelvenster In dit venster kan het aantal kolommen en rijen ingevoerd worden (Cols en Rows). Verder kan ingesteld worden: •

Ruimte binnen de cellen (cellpadding)

•

Ruimte tussen de cellen (cellspacing)

•

Aliniëring van de tabel (alignment)

•

De breedte van de rand van de tabel (border)

•

Breedte en hoogte van de tabel (width/height)

•

Een extra klasse (geavanceerd gebruik)

•

Een caption (geavanceerd gebruik)


Datum 23.03.11

In dit venster zit ook een tabblad Advanced. Dit hele tabblad is echter alleen voor geavanceerd gebruik. Na het invoegen van een tabel staat deze meteen in de editor. Met knop 2 kan een tabel weer verwijderd worden.

2.7.2

Individuele aanpassingen per rij of cel (knop 3 en 4)

Om aanpassingen te doen aan een rij (knop 3) of cel (knop 4) klik je in een cel en gebruikt vervolgens een van deze knoppen. Een van de volgende vensters verschijnt:

Afbeelding 26. tabel rijen cel-instellingen De meeste instellingen hier zijn voor geavanceerd gebruik. Voor een rij of cel in een tabel kan het echter handig zijn om aliniëring horizontaal of verticaal in stellen om tekst gecentreerd, rechts of links in een cel te zetten:

Kop

Cijferkolom

Tekstkolom

Data 1

552,-

Tekst 1

Data 2

384,-

Tekst 2

Data 3

1024,-

Tekst 3

Afbeelding 27. tabel-aliniëringen Met de selectie van het toepassingsgebied kan ingesteld worden of de wijzigingen voor een cel, de huidige rij, alle even rijen, alle oneven rijen, alle rijen of de hele tabel gelden.


Datum 23.03.11

2.7.3

Rijen en kolommen toevoegen en verwijderen (knop 5 t/m 10)

De knoppen 5 t/m 10 voegen rijen of kolommen toe of verwijderen deze. Hierbij geldt dat de plaats van de cursor belangrijk is. Onderstaand de resultaten bij het gebruik van verschillende functies:

Afbeelding 28. het toevoegen en verwijderen van kolommen en rijen 1.

De begintabel, met cel 4 geselecteerd

2. Een rij boven de selectie toegevoegd (knop 5 van Afbeelding 24) 3. Een rij onder de selectie toegevoegd (knop 6 van Afbeelding 24) 4. De geselecteerde rij verwijdert (knop 7 van Afbeelding 24) 5. Een kolom links van de selectie toegevoegd (knop 8 van Afbeelding 24) 6. Een kolom rechts van de selectie toegevoegd (knop 9 van Afbeelding 24) 7. De geselecteerde kolom verwijdert (knop 10 van Afbeelding 24)

2.7.4

Cellen samenvoegen en herstellen (knop 11 & 12)

Met de laatste twee knoppen kunnen geselecteerde cellen of kolommen samengevoegd (bijvoorbeeld voor een header die over de hele tabel moet lopen) of hersteld (als dit later niet meer nodig is) worden. Bij samenvoegen en herstellen geldt wel dat inhoud uit meerdere cellen samengevoegd in één cel komt te staan. Zie onderstaande voorbeelden:

Afbeelding 29. Tabelbewerkingen


Datum 23.03.11

1.

De begintabel

2. De bovenste vier cellen geselecteerd en samengevoegd. 3. De drie cellen met “data1” erin samengevoegd. De dubbele data zou daarna weggehaald kunnen worden om gedeelde data tussen de drie rijen weer te geven. 4. cel 3 en cel 5, en cel 2 en cel 4 samengevoegd. De tabel wordt hierdoor complexer en kan dus voor meer doelen ingezet worden 5. De hele tabel geselecteerd en hersteld. Hierbij geldt dat inhoud in de meest linkse, bovenste van de herstelde cellen komt te staan. Denk bij een tabel altijd goed na hoe je gegevens wilt laten zien zodat je niet achteraf heel veel moet gaan aanpassen. Als de hierboven gebruikte tabel opgeschoond wordt kan dit leiden tot het volgende resultaat:

Afbeelding 30. opgemaakte tabel

Vergeet nooit om een artikel even na te gaan op fouten als er tabellen geplaatst zijn en om eventueel op de “opschonen” knop te klikken. Dit vermindert de kans op onverwachtte fouten in het artikel.

Handleiding voor het Huisstijlhandboek

Recommend Documents