Huisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011

Maat: px
Weergave met pagina beginnen:

Download "Huisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011"

Transcriptie

1 Huisstijlhandboek Internet en intranet Versie 4.2 Datum Juli 2011

2 2 van 97 Colofon Versienummer 4.2 Datum juli 2011 Locatie Ontwerp Studio Dumbar Auteur Project 1 Logo Historie van eerder gepubliceerde versies Versie, uitgavedatum en wijzigingen Versie Oktober 2008 Basisdocument Digitale Middelen (internet, intranet, nieuwsbrief en Powerpoint) Versie 1.1 Maart 2009 Aanpassingen versie 1.0 Basisdocument Digitale Middelen: Grid: marge tussen kolommen is altijd even breed (20px); Positionering subnavigatie: de verticale subnavigatie heeft een vaste gefixeerde positie op de pagina gekregen en schuift niet meer mee naar beneden bij een meerregelige broodkruimel of bij een dossierpagina met zowel dossiertitel als ook paginatitel; Verticale subnavigatie meer dan 5 niveaus diep; Voorbeeld van een meer traditioneel intranet naast het op web 2.0 (Rijksweb) gebaseerde voorbeeld. Versie 1.0 Maart 2009 Addendum op Basisdocument Digitale Middelen (internet, intranet, nieuwsbrief en Powerpoint). Versie 2.0 Juli 2009 Aanvullingen op versie 1.0 Addendum Digitale Middelen: Vormgeving voor Elektronische formulieren, Portalnavigatie en Widgets voor internet. Versie April 2010 Basisdocument en Addendum Digitale Middelen over internet en intranet samengevoegd. Richtlijnen uit Basisdocument en Addendum over nieuwsbrief en Powerpoint verwijderd: deze informatie is in een eigen huisstijlhandboek opgenomen. Algemene redactieslag. Kleuren zijn aangepast, informatie toegevoegd over mouse-over, gekleurde koppen, iconen in kleur en het gebruik van lijnen. Versie December 2010 URL huisstijlsite gewijzigd in Versie Mei 2011 Op pagina 66 illustratie van alle beschikbare iconen gaplaatst. Versie 4.2 Juli 2011 Op pagina 27 wordt in de tekst over De titelbalk ook verwezen naar een uitgebreidere beschrijving op pagina 11 Basis-grid met titelbalk.

3 3 van 97 Inhoudsopgave Colofon 2 Over dit document 4 Logopositionering 5 Favicon 6 Kleurenpalet en contrast internet 7 Kleurenpalet en contrast intranet 9 Grid en layout internet 10 Grid en layout intranet 13 Typografie & link language internet 18 H1, H2 en H3 subkoppen 19 Typografie & link language intranet 22 Verticale subnavigatie internet 23 Verticale subnavigatie intranet 25 Header uitgelicht internet 27 Kleurvarianten van de header 29 Header uitgelicht intranet 31 Basisopzet 32 Voorbeelden intranet, die ook mogelijk zijn voor internet 39 Aanpassen van de startpagina 43 Aanpassen van de startpagina met checkbox mogelijkheid 45 Optionele elementen Achtergondkaders 47 Ankernavigatie 48 Banners internet 49 Banners intranet 50 Digitaal formulier 51 Digitaal formulier - Elementen 53 Elektronisch formulier - Procesindicator 55 Elektronisch formulier - Informatiekader 58 Elektronisch formulier - Dynamische elementen 59 Fotobijschriften 60 Functionele links 61 Grafiek lijndiagram 63 Grafiek staafdiagram 64 Grafiek taartdiagram 65 Iconenset 66 Informatiemeldingen 68 Kalender 69 Kalender intranet 70 Kruimelpad over meerdere regels 71 Lijst zonder filter opties 72 Lijst met filter opties 73 Login formulier 74 Mouse-over kleurvlak 75 Onderscheidingslijnen 76 Opsommingen 77 Organogrammen 78 Portalnavigatie 80 Sitemap 81 Smoelenboek 83 Stelling-/ poll module internet 84 Stelling-/ poll module intranet 85 Stelling-/ poll module neutraal 86 Tabellen 87 Tag Cloud 88 Tekstkader 89 Uitklaplinks internet 90 Uitklaplinks intranet 91 Vraag en antwoord 92 Widget elementen 93 Widget elementen intranet 95 Zoekresultaten 97

4 4 van 97 Over dit document Dit document geeft een beschrijving van de toepassing van het rijksbrede-logo en de huisstijl voor internet en intranet. Verplicht Zodra het logo wordt gebruikt op een site, dienen ook eventueel toegevoegde elementen die in dit boek aan de orde komen, te voldoen aan de voorgeschreven regels (tenzij anders aangegeven). Templategenerator en Starters Kit Op de huisstijlwebsite vind je twee tools die kunnen helpen bij het maken van een website die voldoet aan de richtlijnen. Met de Templategenerator is het mogelijk in een middag een nieuwe website op te zetten in Joomla!. Meer nodig dan alleen een basisstylesheet of ga je gebruik maken van een ander content management systeem dan Joomla! of Hippo? De Internet Starters Kit is een HTML/CSS implementatie van de rijkshuisstijl en kan uitstekend dienen als uitgangspunt van frontend code voor websites die aan de (nieuwe) visuele richtlijnen moeten voldoen. Meer informatie en uitleg vind je bij Digitaal > Internet op de huisstijlwebsite. Afmetingen In dit document zijn zoveel mogelijk afmetingen aangegeven. De meeste afmetingen zijn in de header (logopositionering) vastgelegd. Overige maten (zoals bijvoorbeeld afmetingen in content en navigatie) dienen te worden afgeleid uit de originele Photoshop bestanden (gelaagde PSD s). Kleur contrast en helderheid In dit document wordt op meerdere plekken gesproken over het verschil in helderheid (o.a. op de kleurenpaleten contrastpagina s). Alle vermelde waarden voor verschil in helderheid en kleur zijn berekend met de online Colour Contrast Check tool. De tool is te vinden op

5 5 van 97 Logopositionering De basisopbouw van alle internetpagina s is gelaagd. De achtergrondlaag is de gehele ruimte binnen het browservenster en is lichtgrijs. Daar bovenop is een extra laag - de contentlaag - geplaatst die een lichte schaduw op de achtergrondlaag werpt. Deze laag is gecentreerd in het browservenster. De contentlaag De contentlaag staat horizontaal gecentreerd op de achtergrondlaag. De gehele contentlaag inclusief schaduw is geoptimaliseerd voor een minimale schermresolutie van 1024px x 768px en heeft de volgende afmetingen: 940px breed (excl. 8px schaduwrand) 956px breed (incl. 8px schaduwrand) 75px 44px Het logo Het beeldmerk is tegen de bovenkant van de contentlaag gepositioneerd en hierin horizontaal gecentreerd. De afmetingen van het beeldmerk zijn: 44px breed 75px hoog 470px 470px Visuele referentie aan beeldmerk Helemaal onderaan de contentlaag staat altijd een blauw blokje (de visuele referentie aan het beeldmerk). Dit blauwe blokje is (net zoals het beeldmerk) altijd horizontaal gecentreerd en heeft de volgende afmetingen: 44px breed 25px hoog Logopositionering voor internet in de header en de visuele referentie aan het beeldmerk (blauwe blokje) onderaan de contentlaag 25px 44px

6 6 van 97 Favicon De favicon heeft als formaat 16x16px. De achtergrond achter het lint is altijd wit en mag je dus niet transparant maken. Door deze witte rand wordt er een omgeving gecreëerd waarin het lintje bovenin in het midden hangt. Voorbeeld van een browservenster met detailzoom

7 7 van 97 Kleurenpalet en contrast internet Voor internet kan je alle zestien kleuren uit het kleurenpalet kiezen. Een kleur is vrij te kiezen en dus niet te claimen. Per website kan je slechts één kleur kiezen met de daarbij behorende lichtere en lichtste afgeleide tinten (respectievelijk voor de actieve tabs en de titelbalk). De twee grijstinten (onderaan deze pagina) zijn gereserveerd voor de achtergrondlaag en de links op de achtergrondlaag. De blauwtint is de algemene kleur voor tekstlinks. Contrast Voor de leesbaarheid van de tekst is het van belang dat je kiest voor witte of zwarte tekst, afhankelijk van de gekozen kleur uit het kleurenpalet. Aan de linkerkant staan tien kleuren waarop een witte tekst gebruikt dient te worden, aan de rechterkant staan zes kleuren die een zwarte tekst behoeven. Hanteer deze combinaties strikt en wijk er niet van af om slechte leesbaarheid (te weinig contrast, zie drempelwaarde hieronder) voor minder- of slechtzienden te voorkomen. Drempelwaarde De waarden die in de kleurvlakken staan (bijvoorbeeld 223/676), geven respectievelijk het verschil in helderheid en het verschil in kleur weer van de tekstkleur (zwart of wit) op de desbetreffende achtergrond. De twee waarden dienen idealiter boven de voorgeschreven drempelwaarden uit te komen (respectievelijk 125 en 500) om aan de (kleur)contrasteisen van het W3C te voldoen. Alle oorspronkelijke kleuren uit het kleurenpalet zijn zo aangepast dat ze voldoen aan de gestelde contrasteisen van het W3C. Kleurenpalet internet

8 8 van 97 Contrastkleuren Voor een dossierpagina waarbij op het contentvlak van de pagina veelal sprake is van een dossiernaam als ook van een paginatitel, kan voor de dossiernaam de gekozen volle kleur van de internetsite gebruikt worden of bij onvoldoende zichtbaarheid een contrastkleur. Dit geldt ook voor achtergrondkaders. Op deze pagina is voor elk van de zestien kleuren de best passende constrastkleur weergegeven. Je mag ook kiezen voor een andere combinatie. Contrastkleurenpalet internet

9 9 van 97 Kleurenpalet en contrast intranet Voor intranet is slechts de hiernaast getoonde kleur te gebruiken (de volle kleur) met de daarbij behorende lichtere en lichtste variant (respectievelijk voor de actieve tabs en de titelbalk). Dit om een duidelijk onderscheid te maken tussen internet- en intranetpagina s. Contrast Voor de leesbaarheid van tekst is een duidelijk contrast van belang. Stem je keus voor witte of zwarte tekst hierop af, afhankelijk van de gekozen (ondergrond-) kleur. Voor intranet zijn er twee kleuren waarop een witte tekst toegepast dient te worden, en twee kleuren die een zwarte tekst behoeven. Hanteer deze combinaties en wijker niet van af om slechte leesbaarheid (te weinig contrast, zie drempelwaarde hieronder) te voorkomen voor minder- of slechtzienden. Drempelwaarde De waarden die in de kleurvlakken staan (bijvoorbeeld 197/563), geven respectievelijk het verschil in helderheid en het verschil in kleur weer van de tekstkleur (zwart of wit) op de desbetreffende achtergrond. De twee waarden dienen idealiter boven de voorgeschreven drempelwaarden uit te komen (respectievelijk 125 en 500) om aan de (kleur)contrast eisen van het W3C te voldoen. De beschikbare kleuren voor intranet voldoen aan de gestelde contrasteisen van het W3C. Volle kleur Lichtste variant Contrastkleur Lichtere variant Contrastkleur Het is toegestaan om de contrastkleur te gebruiken voor dossiertitels en in zijn lichtste variant voor de achtergrondkaders op homepagina s en subhomepagina s. De lichte variant kan onder andere worden gekozen voor tabellen, formulieren etc. Zie verderop in dit document. Het advies is om eerst de websitekleur en neutraal grijs te proberen, voordat je kiest voor de contrastkleur. Kleurenpalet intranet

10 10 van 97 Grid en layout internet Basis-grid Het oorspronkelijke basis-grid van vier gelijke kolommen van 208px is verder verfijnd naar een grid van 12 gelijke kolommen van 56px breed. Hierop plaats je de informatie van de pagina. Je kunt de kolommen samentrekken om verder te variëren (zie Grid variaties). De marge tussen de kolommen is 20px. De totale hoogte van de internet header is 177px. Tussen de content van de pagina en de visuele referentie aan het beeldmerk is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. header (177px) 1px border (#535353) 60px topnavigatie (incl. navigatierand) 29px 147px 40px 75px 1px border (#535353) 12px 12px 174px 58px Eventuele footer content dient boven deze 50px witruimte te staan. Disclaimer en Privacy informatie kun je plaatsen op de lichtgrijze achtergrondlaag. 8px 8px De totale contentlaag staat altijd gecentreerd in het browservenster. auto 940px auto 24px 20px 56px 50px 44px Afmeting basis-grid 25px

11 11 van 97 Basis-grid met titelbalk De titelbalk (30px hoog) is bedoeld voor sites waarvan de titel niet is opgenomen in de afzenderstructuur naast het beeldmerk in de header. Of voor sites waarvan de website een titel heeft die anders is dan de naam van de afzender naast het beeldmerk. Sites van onderdelen die als dochter of kleindochter (zie afzenderstructuur) worden getypeerd, gebruiken de titelbalk dus niet. Voorbeeld: De corporate site van een ministerie maakt geen gebruik van de titelbalk, want de naam van het ministerie is al opgenomen in de afzender naast het beeldmerk. De site met als titel Prinsjesdag 2008 maakt wel gebruik van de titelbalk, want de afzender naast het beeldmerk is geen Prinsjesdag maar Rijksoverheid. header (207px) 1px border (#535353) 30px titelbalk 60px topnavigatie (incl. navigatierand) 29px 177px 40px 75px 12px 12px 174px 1px border (#535353) 56px De totale hoogte van de internet header met titelbalk is 207px. 8px 8px auto auto 940px 24px 20px 56px 50px 44px Afmetingen basis-grid met titelbalk internet 25px

12 12 van 97 Maximaal aantal tabs (hoofdnavigatie) Het maximale aantal tabs kan niet in aantallen worden gedefinieerd, want het is afhankelijk van de lengte van de tekst op het tabblad. Er kan wel een uitspraak worden gedaan over de maximale breedte die alle tabs gezamenlijk mogen innemen: die is namelijk 688px. Bijvoorbeeld als de breedte van vijf tabs gezamenlijk 582px is en een eventuele zesde tab is 112px breed (inclusief witruimte aan de linkerkant van de tab), dan kan deze zesde tab niet worden toegevoegd, want inclusief de zesde tab zou de totale breedte 694px bedragen en dat is een overschrijding van 6px. 688px Maximaal beschikbare horizontale ruimte voor tabs (hoofdnavigatie)

13 13 van 97 Grid en layout intranet Het basis-grid van intranet is hetzelfde als van het internet met de toevoeging van de naam intranet balk (zie ook Basis-grid met titelbalk). De totale hoogte van de intranet header (inclusief de naam intranet balk) is 207px. Als het intranet een eigen naam heeft (bijvoorbeeld: Rijksweb, Vera, IntrAZ, BZK-intranet, DJI Vangnet, etc.) dan biedt de naam intranet balk hiervoor ruimte. Tussen de content van de pagina en de visuele referentie aan het beeldmerk is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. header (207px) 1px border (#535353) 30px titelbalk 60px topnavigatie (incl. navigatierand) 29px 177px 75px 12px 12px 174px 1px border (#535353) 56px Eventuele footer content dient boven deze 50px witruimte te staan. Disclaimer en Privacy informatie kan je plaatsen op de lichtgrijze achtergrondlaag. De totale contentlaag staat altijd gecentreerd in het browservenster. auto 8px 40px 8px auto 940px 24px 20px 56px 50px 44px Afmeting basis-grid intranet. 25px

14 14 van 97 Grid variaties Het voorbeeld hiernaast toont een kolomcombinatie van 2 / 1 / 1. Mogelijke kolomcombinaties voor internet zijn: 2 / 2 2 / 1 / 1 1 / 2 / 1 1 / 1 / 2 3 / 1 1 / 3 Alle andere mogelijkheden die binnen het 12 kolomsgrid passen zijn mogelijk. Grid variatie 2 / 1 / 1

15 15 van 97 Grid variatie In sommige gevallen kan het wenselijk zijn een foto of een belangrijke boodschap over alle vier de kolommen heen te plaatsen. Deze foto of boodschap plaats je altijd in het contentvlak (op het grid) en dus nooit erboven. Onder de foto of boodschap is weer elke kolomvariatie (beschreven op de vorige pagina) mogelijk. Het getoonde voorbeeld hiernaast heeft de 1 / 1 / 1 / 1 variatie. Grid variatie waarbij 4 kolommen zijn samengevoegd

16 16 van 97 Grid variaties Daarnaast kun je ook nog de volgende grid variaties gebruiken (zie voorbeeld volgende pagina): 1 / 1,5 / 1,5 1,5 / 1,5 / 1 Het hier getoonde voorbeeld toont een kolomcombinatie van 1 / 2 / 1. Grid variatie 1 / 2 / 1

17 17 van 97 Grid variatie Het voorbeeld hiernaast toont een 1 / 1,5 / 1,5 grid variatie.

18 18 van 97 Typografie & link language internet Het standaard lettertype is Verdana met uitzondering van de Paginatitel, Dossiernaam, Rubriek en Topnavigatie. Deze uitzonderingen zijn uitgevoerd in het lettertype Arial o.a. voor een betere scanbaarheid. Aan de linkerkant de typografie en aan de rechterkant de link language voor internet

19 19 van 97 H1, H2 en H3 subkoppen Op deze pagina staan voorbeelden die laten zien hoe wordt omgegaan met headers. Er bestaan drie soorten headers; H1, H2, H3. H1: Arial regular 22px # H2: Verdana regular 16px # H3: Verdana bold 11 px # Internet, intranet en neutraal

20 20 van 97 Het is ook mogelijk koppen weer te geven in kleur. Kies uit de 10 voor tekst geschikte communicatiekleuren. Dit zijn de kleuren uit het kleurenpalet met witte tekst erop. Zie Kleurpalet en contrast. Deze koppen zijn niet klikbaar. Gebruik geen contrast en volkleur door elkaar. Gebruik deze kleur consistent over de hele website en niet op de ene pagina wel en de ander niet.

21 21 van 97 Het is ook mogelijk koppen weer te geven in de contrastkleur. Zie voor meer informatie Kleurenpalet en contrast. Gebruik deze kleur consistent over de hele website en niet op de ene pagina wel en de ander niet.

22 22 van 97 Typografie & link language intranet Het standaard lettertype is Verdana met uitzondering van de Naam intranet, Paginatitel en Topnavigatie. Deze uitzonderingen zijn uitgevoerd in het lettertype Arial o.a. voor een betere scanbaarheid. Het is ook mogelijk gebruik te maken van Deja Vu. Dit is een vrij te gebruiken lettertype, waar geen licentie voor nodig is. Aan de linkerkant de typografie en aan de rechterkant de link language voor intranet

23 23 van 97 Verticale subnavigatie internet De subnavigatie heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px. Level 0 Level 1 Level 2 Level 3 Level 4 Level 5 Level 0 In deze status is alleen een lijst van hoofdcategoriën zichtbaar. Level 1 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden en wordt de achtergrondkleur #ffe9b7. Level 2 tot level 5 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden en wordt de achtergrondkleur in plaats van #ffe9b7 nu #fff4dc (zie ook kleurenpalet en contrast), hierdoor worden de geopende levels extra geaccentueerd en blijft de subnavigatie overzichtelijk bij diepere levels. De geselecteerde/actieve subpagina s springen 10px in en krijgen de kleur #ffe9b7. 5 levels diep is tevens het maximale niveau dat deze subnavigatie kan bevatten. Hoverstatus Zodra de gebruiker met de cursor over één van de links uit de subnavigatie gaat, krijgt deze een #ffe9b7 achtergrondkleur. Overzicht verschillende levels subnavigatie

24 24 van 97 7 Levels Als een internetsite meer dan 5 levels in de navigatie heeft, wordt een andere methode gebruikt voor de subnavigatie. Hiervoor worden de overige links van de vorige levels weg gelaten. Alleen de gekozen links blijven staan. Door deze opstapeling is het mogelijk om dieper te gaan dan de standaard 5 levels. Het is niet mogelijk om tussen een 5 level subnavigatie en een 7 level navigatie te switchen. Level 1 Level 2 Level 3 Level 4 Diepste level Zodra het diepste level is bereikt - bijvoorbeeld Over E-services bij level 7 - zul je geen verschil zien ten opzichte van level 6. Natuurlijk veranderen het kruimelpad en de paginatitel wel, waardoor duidelijk is waar de bezoeker zich bevindt. Level 5 Level 6 Level 7 Overzicht subnavigatie van 7 levels diep

25 25 van 97 Verticale subnavigatie intranet De subnavigatie heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px. Level 0 Level 1 Level 2 Level 3 Level 4 Level 5 Level 0 In deze status is alleen een lijst van hoofdcategorieën zichtbaar. Level 1 tot level 5 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menuitem naar beneden en wordt de achtergrondkleur in plaats van #deebe3 nu #eef4f6 (zie ook Kleurenpalet en contrast), hierdoor worden de geopende levels extra geaccentueerd en blijft de subnavigatie overzichtelijk bij diepere levels. De geselecteerde/actieve subpagina s springen 10px in en krijgen de kleur #deebe3. Het maximale niveau van deze subnavigatie is 5 levels. Hoverstatus Zodra de gebruiker met de cursor over één van de links uit de subnavigatie gaat zal deze een #deebe3 achtergrondkleur krijgen. Overzicht verschillende levels subnavigatie

26 26 van 97 7 Levels In sommige intranetten bestaan er situaties van maar liefst 14 levels diep. Hiervoor laten we de overige links van de vorige levels weg. Alleen de gekozen links blijven staan. Door deze opstapeling is het mogelijk om dieper te gaan dan de standaard 5 levels. Het is niet mogelijk om tussen een 5 level-subnavigatie en een 7 levelnavigatie te switchen. Level 1 Level 2 Level 3 Level 4 Diepste level Zodra het diepste level bereikt is, bijvoorbeeld Over E-services bij level 7, zul je geen verschil zien ten opzichte van level 6. Natuurlijk veranderen het kruimelpad en paginatitel wel, waardoor duidelijk is waar de bezoeker zich bevindt. Level 5 Level 6 Level 7 Overzicht subnavigatie van 7 levels diep

27 27 van 97 Header uitgelicht internet Alle internetheaders bestaan in de basis uit een wit vlak met het logo, de topnavigatie in een vrij te kiezen kleur (plus afgeleide kleuren) en de (functionele) links in de achtergrondlaag. (Functionele) links in achtergrondlaag De (functionele) links staan altijd bovenaan (boven het logovlak) op de achtergrondlaag. Indien de desbetreffende links aanwezig zijn, staan deze altijd in de hier getoonde volgorde. Aan de linkerkant staan RSS en Tekstgrootte, terwijl aan de rechterkant (in deze volgorde) Abonneren, Engels (en/of andere talen) en Help staan gegroepeerd. Overige, hier niet getoonde links, kunnen aan de rechterof linkerkant worden toegevoegd (altijd rechts van Tekstgrootte en links van Contact), afhankelijk van het soort link (per link dient een logische beslissing gemaakt te worden). Net zoals alle andere navigatielinks, beginnen de links in de achtergrondlaag met een hoofdletter. Het logovlak Het logovlak is 87 pixels hoog. Het beeldmerk staat hierin horizontaal gecentreerd. De volledige breedte is gereserveerd voor het logo. Er mogen dus geen andere elementen worden geplaatst in het logovlak. De titelbalk De titelbalk is bedoeld voor sites die niet als organisatieonderdeel in de afzenderstructuur zijn opgenomen. De titelbalk is 30px hoog en krijgt altijd de lichtste afgeleide tint van de gekozen volle kleur. Zie ook pagina 11 Basisgrid met titelbalk. De topnavigatie De topnavigatie bestaat uit eenvoudig vormgegeven tabs. De actieve tab krijgt de afgeleide lichtere tint van de gekozen kleur en loopt door in een 10px hoge rand die de volledige breedte van de header beslaat. De tekstkleur op de actieve tab is altijd zwart. De titel van iedere tab (Home, Actueel etc.) is vrij in te vullen. De omschrijving en volgorde van de tabs, zoals hiernaast getoond, worden veelal gebruikt op de huidige corporate websites van de departementen.

28 28 van 97 4-regelige afzender Het basisprincipe van een 2- of 3-regelig afzender geldt voor 95% van alle uitwerkingen. In de uitzonderlijke gevallen waar een 4-regelig afzenderschap vereist is, gezien de lengte van de afzendernaam, is de verticale witruimte tussen het logo en de gekleurde (hoofdnavigatie) balk 26px in plaats van de standaard 12px (zie Grid en layout) om zo voldoende ruimte te maken voor de vierde afzenderregel. Logo klikbaar Het logo (beeldmerk plus woordmerk) is in z n geheel klikbaar op alle pagina s behalve de homepagina en linkt altijd (terug) naar de homepagina van de betreffende website. Bijvoorbeeld het logo is Rijksoverheid en de website is Als je klikt op het logo dan linkt het logo naar de homepage van en niet naar Voorbeeld van een 4-regelige afzender. Verticale witruimte tussen beeldmerk en gekleurde balk is 26px in plaats van de standaard 12px

29 29 van 97 Kleurvarianten van de header Kleurvarianten van de header Deze pagina toont de internetheader in eerste acht van de in totaal zestien verschillende kleuren uit het kleurenpalet, gerangschikt op kleurtint. Per website kies je slechts één kleur. # / #d1c1be #ffb612 / #ffe9b7 Let verder op het gebruik van de tekstkleur (wit of zwart) afhankelijk van de gekozen kleur (zie ook kleurenpalet en contrast). #ca005d / # efb2ce #f9e11e / #fdf6bb #d52b1e / #f2bfbb #94710a / #dfd4b5 # / #f6d4b2 #777c00 / #d6d7b2 Verschillende kleurvarianten van de header

30 30 van 97 Kleurvarianten van de header Deze pagina toont de internetheader in de overige acht kleuren uit het kleurenpalet, wederom gerangschikt op kleurtint. # / #becdc3 #007bc7 / #b2d7ee #39870c / #c3dbb6 #42145f / #c6b8cf #76d2b6 / #d6f1e9 #a90061 / #e5b2cf #8fcae7 / #ddeff8 #f092cd / #faded0 Vervolg van de verschillende kleurvarianten van de header

31 31 van 97 Header uitgelicht intranet De intranetheader bestaat in de basis uit een wit vlak met het logo, de topnavigatie, de naam intranet balk en de (functionele) links in de achtergrondlaag. Zie verder Internet voor een voorbeeld van een 4-regelige afzender en uitleg over de klikbaarheid van het logo. (Functionele) links in achtergrondlaag De (functionele) links staan altijd bovenaan (boven het logovlak) op de achtergrondlaag. Indien de desbetreffende links aanwezig zijn, staan deze altijd in de hier getoonde volgorde. Aan de linkerkant staan RSS, Tekstgrootte, Ingelogd als... en Uitloggen. Aan de rechterkant staan (in deze volgorde) Help en Contact. Overige, hier niet getoonde links, kunnen aan de rechterof linkerkant worden toegevoegd (altijd rechts van Uitloggen en links van Contact), afhankelijk van het soort link (per link dient een logische beslissing gemaakt te worden). Net zoals alle andere navigatielinks, beginnen de links in de achtergrondlaag met een hoofdletter. Het logovlak Het logovlak is 87 pixels hoog met het logo horizontaal gecentreerd. De volledige breedte is gereserveerd voor het logo. Er mogen dus geen andere elementen in het logovlak staan. Naam intranet balk De naam intranet balk is - indien van toepassing - bedoeld voor het vermelden van de naam van het intranet (bijvoorbeeld: Rijksweb, Vera, IntrAZ, BZK-intranet, DJI Vangnet, etc.). De titelbalk is 30px hoog en heeft de lichtblauwe intranet kleur (#deebe3). De topnavigatie De topnavigatie bestaat uit eenvoudig vormgegeven tabs. De actieve tab heeft de lichtblauwe intranet kleur en loopt door in een 10px hoge rand die de volledige breedte van de header beslaat. De titel van iedere tab (Home, Personeel etc.) is vrij in te vullen.

32 32 van 97 Basisopzet Homepagina Voorbeeld van een opzet voor een homepagina in een van de mogelijke kleuren (#ffb612). De indeling van de hier getoonde homepagina (en vervolgpagina s) is gebaseerd op de aangeleverde leadmedia, soms aangevuld met een aantal verbeteringen uit het usabilityonderzoek van de Stijlgids. Deze verbeteringen zijn o.a.: De positie van een aantal secundaire navigatie links. De meeste links zijn nu op de zogenaamde (lichtgrijze) achtergrondlaag geplaatst. De links die gerelateerd zijn aan zoeken (Sitemap en Uitgebreid zoeken) zijn direct onder de zoekfunctionaliteit geplaatst. De pijltjes die gebruikt worden voor het aanduiden van links (in een linklijst) zijn nu voor de link geplaatst in plaats van erachter. Dit komt de scanbaarheid ten goede. Afmetingen (margins en paddings), kleuren, lijndiktes, etc. die niet in dit boek staan, zijn gedefinieerd in de Photoshop bestanden (gelaagde PSD s). De opzet zoals hier getoond is een voorbeeld en geeft aan hoe verschillende elementen worden vormgegeven. Bijvoorbeeld hoe een linklijst eruit ziet met externe links of met interne links en hoe je een foto van een minister en/of staatssecretaris plaatst. Dat betekent dus niet dat iedere homepagina er op deze manier uit moet zien met deze hoofdnavigatie tabs. Dat hangt geheel af van de content die je wilt tonen. Internet - homepagina met tekst over twee kolommen

33 33 van 97 Homepagina met grote foto Voorbeeld van een homepagina met plaatsing van een optionele foto over een breedte van twee (grid) kolommen bovenaan de nieuwssectie. De breedte en hoogte van de getoonde foto is 436px bij 148px. Dit is geen verplicht formaat. Het formaat van een foto moet wel altijd passen binnen het grid en binnen de voor de rijksbrede huisstijl geldende fotorichtlijnen. Internet - homepagina met een foto over twee kolommen

34 34 van 97 Homepagina met tong De tong is bedoeld als plaats om onderwerpen in op te nemen en uit te lichten. Internet - homepagina met tong

35 35 van 97 Contentpagina De subnavigatie staat altijd in de eerste kolom en heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px (zie rode lijnen op de afbeelding). Voor de aanduiding van de actieve link in de subnavigatie gebruik je de lichtere (middelste) tint van de gekozen kleur. Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden. De subpagina s springen 10px in. 40px 22px Internet - Contentpagina

36 36 van 97 Pagina met lijst De getoonde horizontale separatielijnen boven- en onderaan de lijst hebben altijd de gekozen volle kleur en zijn 3px dik. De titels in de lijst zijn blauw, vet en onderstreept om te benadrukken dat het hier ook om links gaat (dat ze klikbaar zijn). Blauw (#154273) is de algemene kleur voor tekstlinks. De datum bij elk artikel staat volledig uitgeschreven. Internet - Pagina met lijst

37 37 van 97 Dossierpagina Op een dossierpagina verschuift de content van de pagina een stukje naar beneden, zodat tussen de header en de content ruimte ontstaat voor de naam van het desbetreffende dossier. De kleur van de dossiernaam krijgt óf de gekozen volle kleur óf bij onvoldoende zichtbaarheid de gekozen contrastkleur (zie ook Contrastkleuren). De dossiernaam herhaalt zich in de subnavigatie (geplaatst bovenaan de subnavigatie) en heeft de lichtste tint van de gekozen volle kleur. De geselecteerde/actieve subpagina s krijgen de lichtere tint van de gekozen volle kleur (in het hiernaast getoonde voorbeeld is dat Paginatitel ). Internet - Dossierpagina

38 38 van 97 Visuele verwijzing aan beeldmerk Ter afsluiting staat aan de onderkant van de pagina, op de contentlaag, het blauwe blokje (de visuele referentie aan het beeldmerk). Dit staat altijd horizontaal gecentreerd (zie ook Logopositionering). Het voorbeeld hiernaast toont een internetpagina waarop helemaal naar beneden is gescrold. Tussen de content van de pagina en de visuele referentie is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. Internet pagina naar beneden gescrold. Visuele verwijzing aan het beeldmerk (blauwe blokje) is nu zichtbaar

Dennis Wagenaar 19-04-10 v 1.0

Dennis Wagenaar 19-04-10 v 1.0 Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5

Nadere informatie

Web. TU Delft. Huisstijlrichtlijnen

Web. TU Delft. Huisstijlrichtlijnen TU Delft Web TU Delft Huisstijlrichtlijnen Index 1 Broodtekst 2 Titels 3 Template homepage 4 Template vervolgpagina s 5 Hoofdmenu 6 Submenu 7 Headers 8 Tabblad 9 Tabblad varianten 10 Tabblad nieuws / agenda

Nadere informatie

Inhoud van de website invoeren met de ContentPublisher

Inhoud van de website invoeren met de ContentPublisher Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

Portfolio s in Google Sites

Portfolio s in Google Sites Portfolio s in Google Sites Vanaf het schooljaar 2012-2013 biedt de NHL de optie om portfolio s aan te maken met Google Sites. De NHL-accounts bij Google zijn afgeschermd voor mensen die niet bij de NHL

Nadere informatie

edenspiekermann_ hva Stijlgids HvA responsive website

edenspiekermann_ hva Stijlgids HvA responsive website edenspiekermann_ hva Stijlgids HvA responsive website April 2014 Versie 1.0 HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 2 Inhoud Introductie 3 Concept webstijl 4 3-koloms grid homepage

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

PvdA websites Quick Start voor het werken met het Hippo CMS

PvdA websites Quick Start voor het werken met het Hippo CMS PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3

Nadere informatie

Inhoudsopgave. Huisstijlhandboek Droomstad 05-06-2014 Versie 1.0 2

Inhoudsopgave. Huisstijlhandboek Droomstad 05-06-2014 Versie 1.0 2 Huisstijldocument Inhoudsopgave 1. Logo 3 1.1 Beeld 3 1.2 Naam 4 1.3 Toevoeging stadsnaam 5 1.4 Plaatsing 6 1.5 Achtergrond 7 2. Kleur 8 2.1 Logo 8 2.2 Website 9 3. Typografie 10 4. Knoppen 11 5. Waardering

Nadere informatie

ActiveBuilder Handleiding

ActiveBuilder Handleiding ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3

Nadere informatie

Inhoud. Installatie. Functies

Inhoud. Installatie. Functies Inhoud Installatie Functies Instellingen Achtergrond Blokken, knoppen Korting Footer Header, left column Main navigation Modules Price categories, Producten Text Contact 3 4 5 5 6 7 8 9 10 11 12 13 14

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

R E S P O N S I V E Documentatie 1

R E S P O N S I V E Documentatie 1 R E S P O N S I V E Documentatie 1 Inleiding Theme Delta Responsive: speciaal ontwikkeld voor uw lifestyle webshop! Het Delta Responsive Theme is speciaal ontwikkeld voor lifestyle webshops. Een strakke

Nadere informatie

Huisstijlhandboek digitaal van de Bibliotheek. Versie 0.8

Huisstijlhandboek digitaal van de Bibliotheek. Versie 0.8 Huisstijlhandboek digitaal van de Bibliotheek Versie 0.8 Inhoudsopgave Inleiding 3 Verklarende woordenlijst 4 Basis elementen 5 1. Logo 6 1.1 Beeld 6 1.2 Naam 7 1.3 Toevoeging vestigingsnaam 8 1.4 Grootte

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Gebruikershandleiding

Gebruikershandleiding Gebruikershandleiding Datum 1 september 2005 Versie 1.0 Copyright Ni-Frith Media Systems 1 / 59 1 Inleiding... 4 1.1 Let op:... 4 2 De werking... 5 2.1 Templates... 5 2.2 Schematisch... 6 3 De structuur

Nadere informatie

Digitale vormgeving 2014 2015. Wordpress deel 1

Digitale vormgeving 2014 2015. Wordpress deel 1 Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...

Nadere informatie

Handleiding wordpress

Handleiding wordpress Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl geert@geerthoekzema.nl 1 Inhoudsopgave Inleiding... 3 Beginnen

Nadere informatie

Inleiding. - Teksten aanpassen - Afbeeldingen toevoegen en verwijderen - Pagina s toevoegen en verwijderen - Pagina s publiceren

Inleiding. - Teksten aanpassen - Afbeeldingen toevoegen en verwijderen - Pagina s toevoegen en verwijderen - Pagina s publiceren Inleiding Voor u ziet u de handleiding van TYPO3 van Wijngaarden AutomatiseringsGroep. De handleiding geeft u antwoord geeft op de meest voorkomende vragen. U krijgt inzicht in het toevoegen van pagina

Nadere informatie

CATCHPlus. Versie: 1.1 Publicatiedatum: 12-10-2011. Vertrouwelijk GridLine B.V., 2011 Pagina 1 van 17

CATCHPlus. Versie: 1.1 Publicatiedatum: 12-10-2011. Vertrouwelijk GridLine B.V., 2011 Pagina 1 van 17 CATCHPlus Versie: 1.1 Publicatiedatum: 12-10-2011 Vertrouwelijk GridLine B.V., 2011 Pagina 1 van 17 Documenthistorie Datum Versie Beschrijving Auteur 07-09-2011 1.0 Initiële versie Peter Bloem 12-10-2011

Nadere informatie

Handleiding om uw website/webshop aan te passen

Handleiding om uw website/webshop aan te passen Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een

Nadere informatie

SAN v3. Update document 2010. uitgebracht door OCEN

SAN v3. Update document 2010. uitgebracht door OCEN SAN v3 Update document 2010 uitgebracht door OCEN Inhoudsopgave. Inleiding...3 1 Navigatie...4 1.1 Navigatie: het menu...4 1.2 Navigatie: dashboard...4 1.3 Navigatie: kruimelpad...4 1.4 Navigatie: iconen

Nadere informatie

WORDPRESS. op de FourBottles manier. Pagina 1

WORDPRESS. op de FourBottles manier. Pagina 1 WORDPRESS op de FourBottles manier Pagina 1 Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak

Nadere informatie

2 Pagina s binnen TYPO3

2 Pagina s binnen TYPO3 2 Pagina s binnen TYPO3 Als u links onder de module Web klikt op de submodule Pagina krijgt u aan de rechterzijde het volgende scherm: Afbeelding 2.2 (frontend) Afbeelding 2.1 (backend) De gele, blauwe

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet Algemene handleiding beheermodule: WORDPRESS digital4u.nl effectief op internet Inhoudsopgave Algemene handleiding 03 04 04 05 05 06 06 07 07 08 09 11 12 13 15 16 17 Introductie Inloggen Dashboard Berichten

Nadere informatie

styleguide Albert Slow Styleguide

styleguide Albert Slow Styleguide styleguide 1 Inleiding Albert Heijn wilde voor de ipad app Albert Slow een ontwerp dat echt aansprekend en wervend is zonder dat gebruiksvriendelijkheid en informatie voorziening in het gedrang zou komen.

Nadere informatie

Avans Hogeschool Huisstijlwijzer voor digitale middelen

Avans Hogeschool Huisstijlwijzer voor digitale middelen Avans Hogeschool Huisstijlwijzer voor digitale middelen Inleiding In deze Avans Hogeschool huisstijlwijzer voor digitale middelen vind je onze afspraken over hoe we communiceren via digitale middelen.

Nadere informatie

HANDLEIDING BEHEER WEBSITE. Vrouwen van Nu

HANDLEIDING BEHEER WEBSITE. Vrouwen van Nu HANDLEIDING BEHEER WEBSITE Vrouwen van Nu Versie 1.3 11 Oktober 2012 VERSIE INFO Versie Datum Auteur Omschrijving 1.0 25 September 2012 Rudi van Es 1.1 2 Oktober 2012 Maarten Rütten 1.2. 3 Oktober 2012

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Juni 2013 OKRA HANDLEIDING TREFPUNTSITES. wendy.dekeyzer@okra.be

Juni 2013 OKRA HANDLEIDING TREFPUNTSITES. wendy.dekeyzer@okra.be Juni 2013 OKRA HANDLEIDING TREFPUNTSITES wendy.dekeyzer@okra.be Opbouw trefpuntsite... 3 Startpagina... 3 Over OKRA... 7 Activiteiten... 8 Lid worden... 9 Contact... 10 Foto s... 11 Hoe starten?... 12

Nadere informatie

Sitemap. Interne Zoekmachine. In deze handleiding een overzicht van de belangrijkste vernieuwingen. Inloggen op de sitebuilder

Sitemap. Interne Zoekmachine. In deze handleiding een overzicht van de belangrijkste vernieuwingen. Inloggen op de sitebuilder In deze handleiding een overzicht van de belangrijkste vernieuwingen. Inloggen op de sitebuilder De sitebuilder bereik je vanaf nu via je eigen domeinnaam. Dus: www.jouwdomein.nl/beheer (jouwdomein.nl

Nadere informatie

Afdrukken in Calc Module 7

Afdrukken in Calc Module 7 7. Afdrukken in Calc In deze module leert u een aantal opties die u kunt toepassen bij het afdrukken van Calc-bestanden. Achtereenvolgens worden behandeld: Afdrukken van werkbladen Marges Gedeeltelijk

Nadere informatie

Handleiding - Styling van OFB Web 4.0

Handleiding - Styling van OFB Web 4.0 Handleiding - Styling van OFB Web 4.0 Versie: 1.0 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden

Nadere informatie

Snel aan de slag met BasisOnline en InstapInternet

Snel aan de slag met BasisOnline en InstapInternet Snel aan de slag met BasisOnline en InstapInternet Inloggen Surf naar www.instapinternet.nl of www.basisonline.nl. Vervolgens klikt u op de button Login links bovenin en vervolgens op Member Login. (Figuur

Nadere informatie

Uitleg CMS Utrecht Your Way Button 1. Inloggen

Uitleg CMS Utrecht Your Way Button 1. Inloggen Uitleg CMS Utrecht Your Way Button 1. Inloggen Met jouw login gegevens kun je inloggen via http://button.utrechtyourway.nl/cms 2. Dashboard Na inloggen wordt het dashboard van het CMS zichtbaar. Of te

Nadere informatie

Stijlgids mobiele apps Rijkswaterstaat

Stijlgids mobiele apps Rijkswaterstaat RWS BEDRIJFSINFORMATIE Stijlgids mobiele apps Rijkswaterstaat Richtlijn voor design en user experience Datum 17 maart 2015 Versie 1.1 Colofon Uitgegeven door Rijkswaterstaat Corporate Dienst Afdeling Corporate

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

Album samenstellen met behulp van de Hema album software.

Album samenstellen met behulp van de Hema album software. Album samenstellen met behulp van de Hema album software. Kies de Hema webside www.hema.nl Plaats de muisaanwijzer op foto en klik op Fotoalbums. Klik op download de software (geschikt voor Windows) Vul

Nadere informatie

Handleiding Website beheersysteem

Handleiding Website beheersysteem Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8

Nadere informatie

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast OPMAKEN VAN BERICHTEN EN PAGINA S ONE PAGER Berichten en pagina s worden op dezelfde wijze opgemaakt. Voor het opmaken van een bericht ga je in het navigatiemenu (afbeelding rechts) naar BERICHTEN > NIEUW

Nadere informatie

2. Ontwerp (alleen gebruiken als uw website nog geen huisstijl heeft)

2. Ontwerp (alleen gebruiken als uw website nog geen huisstijl heeft) 2. Ontwerp (alleen gebruiken als uw website nog geen huisstijl heeft) 2.1. Lay-out U kunt de indeling van uw site zelf kiezen en wijzigen. Er zijn momenteel negen verschillende framesets mogelijk. Voorbeeld:

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

HANDLEIDING Content Management Systeem de Fertilizer 4

HANDLEIDING Content Management Systeem de Fertilizer 4 HANDLEIDING Content Management Systeem de Fertilizer 4 1 INHOUDSOPGAVE 1. INLEIDING 3 2. BEHEER 5 2.1 Site structuur 6 2.2 Afdelingen 7 2.3 Beheerders 8 2.3.1 Rechten 9 2.3.1.1 Rechten Beheer 9 3. INSTELLINGEN

Nadere informatie

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm:

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm: CMS Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 7 Een link toevoegen... 8 Een afbeelding toevoegen... 10 Foto s plaatsen op de fotopagina... 12 Media...

Nadere informatie

Webonderdelen (Web Parts)

Webonderdelen (Web Parts) Webonderdelen (Web Parts) Een SharePoint pagina is opgedeeld in een aantal zones op het scherm. In elke zone kunnen Webonderdelen, veelal Web Parts genoemd, geplaatst worden. Deze Web Parts zijn kleine

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn

Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn Versie: december 2009 De OFB Webshop / website kenmerkt zich door de eenvoudige en efficiënte opzet

Nadere informatie

Algemene basis instructies

Algemene basis instructies Inhoud: Algemene basis instructies... 2 Pictogrammen en knoppen... 2 Overzicht... 3 Navigeren (bladeren)... 3 Gegevens filteren... 4 Getoonde gegevens... 5 Archief... 5 Album... 5 Tabbladen en velden...

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

Factuur Lay-out / Factuur Template

Factuur Lay-out / Factuur Template Factuur Lay-out / Factuur Template In i-reserve is het mogelijk facturen te verzenden. De facturen worden als pdf bijlage per e-mail naar de klant verzonden. In deze tutorial wordt beschreven hoe u een

Nadere informatie

Handleiding voor het Huisstijlhandboek

Handleiding voor het 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

Nadere informatie

Handleiding Wordpress CMS 4-5-2015

Handleiding Wordpress CMS 4-5-2015 Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.

Nadere informatie

1 BUSINESS INTERNET SUPPORT

1 BUSINESS INTERNET SUPPORT Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet

Nadere informatie

Documentatie. Jun 2016 THEME CREATED BY

Documentatie. Jun 2016 THEME CREATED BY Documentatie Jun 2016 THEME CREATED BY Inleiding Theme Delta Responsive: speciaal ontwikkeld voor uw lifestyle webshop! Het Delta Responsive Theme is speciaal ontwikkeld voor lifestyle webshops. Een strakke

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

Verwijderen van een persoon kan door de regel leeg te maken. Met de knop (linksonder) Verwijderen verwijdert u de hele pagina!

Verwijderen van een persoon kan door de regel leeg te maken. Met de knop (linksonder) Verwijderen verwijdert u de hele pagina! Algemeen Ingelogd als moderator/ pagina beheerder kan je teksten op een pagina plaatsen, bewerken of verwijderen. Ga naar de pagina waar je toegang tot hebt. Onder het logo en boven de foto (header) krijg

Nadere informatie

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd Introductie Deze handleiding heeft tot doel een eenvoudige stap voor stap handleiding te zijn voor eindgebruikers van CMS Made Simple

Nadere informatie

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum 29-01-2015 Versienummer 2.1

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum 29-01-2015 Versienummer 2.1 Handleiding Omschrijving Handleiding RaadDigitaal Android Auteur SIMgroep Datum 29-01-2015 Versienummer 2.1 Inhoudsopgave HANDLEIDING... 1 INHOUDSOPGAVE... 2 1. INLEIDING... 3 2. RAADDIGITAAL INSTALLEREN...

Nadere informatie

Cursisten handleiding Zoetwaren-online.nl

Cursisten handleiding Zoetwaren-online.nl Cursisten handleiding Zoetwaren-online.nl Vooraf Met behulp van deze handleiding geven wij uitleg hoe u gebruik kunt maken van de opleiding Zoetwaren-online.nl. In deze handleiding wordt aan de hand van

Nadere informatie

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0 Schoolwebsite.nu Snel aan de slag met uw website Versie 4.0 Inhoudsopgave Inhoudsopgave... 2 1 Inleiding... 3 2 Voor dat u begint... 4 3 Teksten op de website... 6 4 Groepspagina s... 8 5 De groepspagina...

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

Handleiding Content Management Systeem

Handleiding Content Management Systeem Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne

Nadere informatie

Websites i.s.m. Service @ School

Websites i.s.m. Service @ School Websites i.s.m. Service @ School Inhoudsopgave Introductie...3 Inloggen in het Beheer Panel...3 Aanpassen van de tekst op de pagina s...4 Nieuwe pagina maken...5 Toelichting op enkele knoppen...6 Een link

Nadere informatie

MILLEDONI.NL OP MOBIEL. Door: Sijmen Vos, 500661784, klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014

MILLEDONI.NL OP MOBIEL. Door: Sijmen Vos, 500661784, klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014 MILLEDONI.NL OP MOBIEL Door: Sijmen Vos, 500661784, klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014 Inhoud Inleiding... 1 Mentale model bij vraag 1 (behavioural)... 2 Mentale model bij vraag 2

Nadere informatie

Toelichting Release notes

Toelichting Release notes Toelichting Release notes 29 januari 2015 Vernieuwde back-end van het CMS 2 Toelichting Release notes Error! Unknown document property name. 29 januari 2015 Inleiding release notes In deze update van het

Nadere informatie

Documentatie Demosite

Documentatie Demosite Documentatie Demosite (demo.anchormen.nl) Datum aanmaak 3-1-2012 Auteurs Wesley van Wermeskerken Inhoudsopgave 1 Inleiding... 3 2 Paginabeheer... 3 2.1 Pagina-inhoud beheren... 4 2.2 Speciale content...

Nadere informatie

Handleiding bij WSM MailformGenerator

Handleiding bij WSM MailformGenerator 1. Voorwoord Welkom bij de handleiding voor de WSM MailformGenerator. Deze handleiding hebben we gemaakt om je snel en gemakkelijk uit te leggen hoe de WSM MailformGenerator werkt. Deze handleiding is

Nadere informatie

Extra: Hoe u uw website met HTML kunt verbeteren

Extra: Hoe u uw website met HTML kunt verbeteren Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel

Nadere informatie

SWIS Handleiding Webbeheer

SWIS Handleiding Webbeheer 1 SWIS Handleiding Webbeheer Inhoudsopgave I. Inloggen in Webbeheer en je wachtwoord resetten... 4 Inlogscherm... 4 Dashboard met toptaken en statistieken... 4 Je wachtwoord vergeten?... 5 II. Modules:

Nadere informatie

Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.

Om het Elektronica thema te installeren gaat u naar Theme Store in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden. Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in

Nadere informatie

Introductiehandleiding Website Dussense Boys

Introductiehandleiding Website Dussense Boys Introductiehandleiding Website Dussense Boys Versie: 1.0 Naam: E-mail: H.A.P.P. Ribbers e.ribbers@dussenseboys.nl Inhoudsopgave Inleiding... 3 Account... 3 Inloggen met uw gebruikersaccount... 3 Uitloggen

Nadere informatie

In de Metabar staan de navigatiebalk, informatiepagina s en een balk met een zoek- en inlogde gebruikersmenu.

In de Metabar staan de navigatiebalk, informatiepagina s en een balk met een zoek- en inlogde gebruikersmenu. Snel aan de slag met Web Financieel Dit is een korte handleiding voor het gebruik van Web Financieel. In deze verkorte handleiding worden de schermindeling en belangrijkste knoppen uitgelegd. Meer uitleg

Nadere informatie

ACCEPETEREN RESERVERING

ACCEPETEREN RESERVERING E-mail Templates In i-reserve is het mogelijk gestandaardiseerde e-mails te verzenden. Het verzenden van dergelijke mails kan volledig worden geautomatiseerd: u maakt dan gebruik van zogenaamde automatische

Nadere informatie

http://demo.webflat.nl/

http://demo.webflat.nl/ Webflat Handleiding Bedankt voor het kiezen van Webflat. Ter referentie van alle functionaliteit zal er worden verwezen naar: http://demo.webflat.nl/ Op deze demo website staan alle mogelijkheden van het

Nadere informatie

Handleiding website AZSV 2014

Handleiding website AZSV 2014 2014 voor (o.a.) de webmaster van een team http://www.azsv-aalten.nl Auteurs: Peter van Asselt, Leo Postma Project: AZSV website 2014 internet commissie AZSV pagina: 2 van 15 INHOUDSOPGAVE 1. INLEIDING...3

Nadere informatie

Functioneel ontwerp. Navigatie

Functioneel ontwerp. Navigatie Functioneel ontwerp Het functioneel ontwerp bestaat uit de volgende onderdelen: 1. Navigatie 2. Lijst van alle pagina s 3. Paginaontwerp 4. Formulierontwerp 5. Grafisch ontwerp Navigatie Navigatie wordt

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Algemeen Deze handleiding beschrijft de werking van OpenEmm gekoppeld aan WordPress. Ondanks het feit dat binnen OpenEmm nieuwsbrieven opgemaakt

Nadere informatie

Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop.

Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop. Be e ldsche rmvormge ving & We bde sign Doelstelling & Doelgroepverkenning Kijk naar verschillende websites om je doelgroep te verkennen. Ze hebben allemaal een andere doelstelling en roepen een bepaalde

Nadere informatie

Lijnen/randen en passe-partouts maken met Photoshop.

Lijnen/randen en passe-partouts maken met Photoshop. Lijnen/randen en passe-partouts maken met Photoshop. Les 1: Witte rand om de foto m.b.v. canvasgrootte. 1. Open de foto in Photoshop. 2. Klik in menu AFBEELDING op CANVASGROOTTE 3. Zorg dat in het vakje

Nadere informatie

U wilt een webshop die klaar is voor de toekomst? Maak het u zelf gemakkelijk; installeer NU Theme Fusion.

U wilt een webshop die klaar is voor de toekomst? Maak het u zelf gemakkelijk; installeer NU Theme Fusion. Documentatie 1 Inleiding U wilt een webshop die klaar is voor de toekomst? Maak het u zelf gemakkelijk; installeer NU Theme Fusion. Het Fusion theme is een conversie verhogend Full Responsive webshop theme

Nadere informatie

CBS StatLine voor Open Data. Handleiding

CBS StatLine voor Open Data. Handleiding CBS StatLine voor Open Data Handleiding CBS StatLine voor Open Data 2 Inhoud Inleiding 4 Wat is CBS StatLine 5 Ingangen van CBS StatLine naar tabellen 6 Etalage 6 Zoeken op thema 7 Zoeken op trefwoord

Nadere informatie

Handleiding: Gebruikersomgeving

Handleiding: Gebruikersomgeving Handleiding: Gebruikersomgeving Editie April 2012 Copyright Renson 2011 N.V. RENSON Ventilation S.A N.V. RENSON Sunprotection-Screens S.A N.V. RENSON Sunprotection-Projects S.A N.V. ARGENT ALU S.A www.renson-ereps.com

Nadere informatie

screenpost emailnieuwsbrief handleiding

screenpost emailnieuwsbrief handleiding screenpost emailnieuwsbrief handleiding Dit softwarepakket staat op het internet en kan digitale nieuwsbrieven versturen. De vormgeving De opmaak van de pagina bestaat uit twee kolommen. Elk artikel kan

Nadere informatie

Nu maak je een template en exporteert hem later naar de gewenste omgeving.

Nu maak je een template en exporteert hem later naar de gewenste omgeving. Gebruik Artisteer Start Artisteer 4 start enigszins anders dan de vorige versies. Vroeger moest je eerst kiezen voor welke omgeving je een template zou maken. Nu maak je een template en exporteert hem

Nadere informatie

Handleiding OVM 2.0. Beheerder. Versie 2.0.0.22 1 oktober 2012

Handleiding OVM 2.0. Beheerder. Versie 2.0.0.22 1 oktober 2012 Handleiding OVM 2.0 Beheerder Versie 2.0.0.22 1 oktober 2012 Inhoudsopgave Legenda... 4 1 Voorbereidingen... 5 1.1 Downloaden... 5 1.2 Starten en inloggen... 6 1.3 Nieuws... 6 2 Beheerportal... 8 2.1 Inloggen...

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Hoofdstuk 1: Het Excel Dashboard* 2010

Hoofdstuk 1: Het Excel Dashboard* 2010 Hoofdstuk 1: Het Excel Dashboard* 2010 1.0 Introductie Excel helpt om data beter te begrijpen door het in cellen (die rijen en kolommen vormen) in te delen en formules te gebruiken om relevante berekeningen

Nadere informatie

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11 I n h o u d s o p g ave Introductie 2 Inloggen 3 Dashboard 4 Pagina aanmaken / bewerken 5 Bericht toevoegen / bewerken 6 Afbeelding toevoegen 7 De tekstbewerker 11 Menu toevoegen / aanpassen 12 I n t ro

Nadere informatie

Handleiding Vedor-editor

Handleiding Vedor-editor Handleiding Vedor-editor Mei 2007, versie 0.9 Inhoudsopgave Inleiding... 3 Aanmelden... 4 De werkbalk... 5 Het context menu... 6 Navigeren binnen je website... 7 Tekst toevoegen en bewerken... 8 Afbeeldingen

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke

Nadere informatie