Vejledning i billedkarruseller og kampagnefliser Version 1. april 2016
Side 2/12
Side 3/12
Indholdsfortegnelse 1. Billedkarrusellen 4 1.1. Trin 1 Billedbehandling via billedbehandlingsprogram 5 1.2. Trin 2 Upload af klargjorte billeder til mediebiblioteket i hjemmesideløsningen 5 1.3. Trin 3 Opret billedsamling under Global/Forsideelementer/Karrusel/Billeder 5 1.4. Trin 4 Knyt billede fra mediebiblioteket til et Billedgalleri 5 1.5. Trin 5 Definér hvilke billedgallerier som skal vises i din karrusel 6 1.6. Trin 6 Få vist en billedkarrusel på forsiden af hjemmesiden. 6 2. Kampagnefliser 7 2.1. Trin 1 Billedbehandling via billedbehandlingsprogram 7 2.2. Trin 2 Upload af klargjorte billeder til mediebiblioteket i hjemmesideløsningen 7 2.3. Trin 3 Opret billedsamling under Global/Forsideelementer/Kampagnefliser/Mappe 7 2.4. Trin 5 Få vist en eller flere kampagnefliser på forsiden af hjemmesiden. 8 3. Nye muligheder på sektionssider 8 3.1. Forsideintro (med baggrundsbillede) 8 3.2. Lav kampagneflise (kun i farvet felt og kun i fuld bredde) 10 3.3. Video i kampagneflise 10 3.4. Baggrundsbillede på farvede kampagnefliser 11 1. Billedkarrusellen Designet af virksomhedsløsningerne ligger op til, at der øverst på forsiden er en billedkarrusel med maksimalt fem billeder. Her følger en trin for trin vejledning til, hvordan man opretter og vedligeholder en billedkarrusel på hjemmesiden. Under hver hjemmeside er der to underpunkter: Home (med et hus som ikon) og Global (med en gul arkivmappe som ikon). Indholdet i underpunktet Home er beskrevet ovenfor. Global indeholder elementer, som kan benyttes flere steder på sitet bl.a. billedkarruseller og kampagnefliser. Det er under Global, at man bygger sine billedkarruseller. Når billedkarrusellen er gjort klar under Global knytter man karrusellen til en sektionsside under Home. Du finder karruselmodulet under Global/Forsideelementer/Karrusel. Side 4/12
HUSK! Alt hvad du laver i hjemmesideløsningen skal gemmes og udgives, inden det kan ses på hjemmesiden inkl. nye mapper og billeder i mediearkivet og billedgallerier og karruseller under Global. 1.1. Trin 1 Billedbehandling via billedbehandlingsprogram Billeder som skal vises i en billedkarrusel, skal bearbejdes i et billedbehandlingsprogram. De skal være 870px i bredden og 440px i højden og være i fil-formatet.jpg- eller.gif-format. Gem billederne via Save for web -funktionen, så de fylder mindst muligt. 1.2. Trin 2 Upload af klargjorte billeder til mediebiblioteket i hjemmesideløsningen Gem billederne i hjemmesideløsningens mediebibliotek. Opret en mappe under mappen Billeder, der hedder Billedkarruseller. Opret en eller flere undermapper til denne mappe. Her i gemmer du de billeder, som har det rette format til at kunne vises i forsidens billedkarrusel. Giv dig tid til at tænke over, hvordan I skal systematisere jeres billeder i mediebiblioteket, så I de næste 5-7 år nemt kan holde orden jeres billeder. 1.3. Trin 3 Opret billedsamling under Global/Forsideelementer/Karrusel/Billeder Højreklik på mappen Billeder og vælg Indsæt/Billedsamling. Giv din billedsamling et navn fx forsidekarrusel-1. Giv mappen visningsnavnet Forsidekarrusel 1. Højreklik nu på din nye mappe (her Forsidekarrusel 1 ) og vælg Indsæt/Galleribillede. Giv dit første Billedgalleri et sigende navn fx boern-som-spiser. Giv billedet visningsnavnet Børn som spiser. 1.4. Trin 4 Knyt billede fra mediebiblioteket til et Billedgalleri Marker (venstreklik) dit nye Billedgalleri i venstremenuen (her Børn som spiser ), og åben elementet Indhold til højre for venstremenuen. Du skal nu knytte et af de billeder, som du har gjort klar i mediebiblioteket, til Billedgalleriet Børn som spiser (du skal naturligvis navnegive billedgalleriet efter billedets motiv). I feltet Overskrift giver du billedet en sigende overskrift. Teksten bliver brugt til. Side 5/12
I feltet Billedtekst skriver du en meget kort forklarende tekst om billedet. Teksten vil blive vist i billedkarrusellen sammen med billedet. I feltet Billede henter du billedet fra mediebiblioteket. Åben elementet Karrusel under elementerne Hurtig info og Indhold. I feltet Link til indholdsside kan du oprette et link, så billedet i karrusellen bliver et link. Du kan oprette 4 Billedgallerier mere. Der kan vises i alt 5 billeder i en billedkarrusel. 1.5. Trin 5 Definér hvilke billedgallerier som skal vises i din karrusel Nu har du under Global/Forsideelementer/Karrusel/Billeder/[Forsidekarrusel 1] oprettet det antal Billedgallerier (billeder hentet fra mediebiblioteket), som du ønsker i din billedkarrusel. Du skal nu højreklikke på mappen Global/Forsideelementer/Karrusel/Karruseller og vælge Indsæt/Karrusel. Giv din nye karrusel et sigende navn. (Husk ikke at benytte store bogstaver, æ, ø, å og brug - mellem ord. Klik på Visningsnavn og skriv navnet ordentligt). Du skal nu højreklikke på din nye karrusel og vælge Indsæt/Galleri. Giv dit kommende nye galleri et sigende navn (husk rigtig navngivning!). Åben elementet Indhold til højre for venstremenuen. Nu kan du se dit/dine billedgalleri(er). Som du har oprettet under Global/Forsideelementer/Karrusel/Billeder. I feltet Rotationshastighed kan du definere, hvor hurtigt billederne skal skifte i din billedkarrusel. I feltet Billeder kan du udvælge de billedgallerier, som du vil vise i din karrusel. Dobbeltklik på de enkelte gallerier, så vil de blive vist til højre under Valgte. 1.6. Trin 6 Få vist en billedkarrusel på forsiden af hjemmesiden. Du har nu gjort din billekarrusel klar til brug, og skal beslutte hvilken sektionsside, den skal ligge på. I dette eksempel lægger vi den øverst på forsiden af hjemmesiden. Klik på den side under Home, som skal være forside på jeres hjemmeside. Klik på elementet Bokse til højre for venstremenuen. Billedkarrusellen skal ligge i feltet Bokse i topsektionen, derfor skal du klikke dig ind til Forsideelementer/Karrusel/Karusseller i feltet Bokse i topsektion og dobbeltklikke på dit billedgalleri, som skal vises i billedkarrusellen på forsiden. HUSK! Alt hvad du laver i hjemmesideløsningen skal gemmes og udgives, inden det kan ses på hjemmesiden inkl. nye mapper og billeder i mediearkivet og billedgallerier og karruseller under Global. Side 6/12
2. Kampagnefliser Her følger en trin for trin vejledning i, hvordan man opretter kampagnefliser på en sektionsside (fx forsiden) på hjemmesiden. 2.1. Trin 1 Billedbehandling via billedbehandlingsprogram Billeder som skal vises i en kampagneflise, skal bearbejdes i et billedbehandlingsprogram. Billederne skal være i fil-formatet.jpg- eller.gif-format og billederne skal gemmes via Save for web -funktionen, så de fylder mindst muligt. Billederne kan bruges som en del af en kampagneflise (halv flise) eller som baggrundsbillede på en hel flise. Billederne kan have følgende størrelser: Højde og bredde Højde x bredde 1x1 Halv flise 142x270 Baggrundsbillede 244x270 1x2 Halv flise 142x570 Baggrundsbillede 244x570 1x3 Halv flise 142x870 Baggrundsbillede 244x870 2x1 Halv flise 430x270 Baggrundsbillede 483x270 2x2 Halv flise 430x570 Baggrundsbillede 483x570 2x3 Halv flise 430x870 Baggrundsbillede 483x870 3x1 Halv flise 726x270 Baggrundsbillede 722x270 3x2 Halv flise 726x570 Baggrundsbillede 722x570 3x3 Halv flise 726x870 Baggrundsbillede 722x870 2.2. Trin 2 Upload af klargjorte billeder til mediebiblioteket i hjemmesideløsningen Gem billederne i hjemmesideløsningens mediebibliotek. Opret en mappe under mappen Billeder, der hedder Kampagnefliser. Opret en eller flere undermapper til denne mappe, hvis du skønner, at det er nødvendigt. Her i gemmer du de billeder, som har det rette format til at kunne vises i forsidens kampagnefliser. Giv dig tid til at tænke over, hvordan I skal systematisere jeres billeder i mediebiblioteket, så I de næste 5-7 år nemt kan holde orden jeres billeder. 2.3. Trin 3 Opret billedsamling under Global/Forsideelementer/Kampagnefliser/Mappe Højreklik på mappen og vælg Indsæt/Kampagneboks. Giv Kampagneboksen et navn (husk korrekt navngivning!). Udfyld felterne under Indhold til højre for venstremenuen. Bemærk, hvis du ikke Side 7/12
knytter et billede til kampagneboksen, kan du give den en baggrundsfarve. Det er en god idé at variere kampagneboksene, så der er billeder i nogle og farve i andre. Overskrift: Teksten i kampagneboksen Læs mere link: Link når man klikker på kampagneboksen Billede: Billede, som evt. er gjort klar og lagt i mediebiblioteket Højde: Vælg hvor høj kampagneflisen skal være Bredde: Vælg hvor bred kampagneflisen skal være Baggrunds- og tekstfarve (kun vist hvis billede ikke valgt): Vælg farve, hvis du ikke har valgt billede. 2.4. Trin 5 Få vist en eller flere kampagnefliser på forsiden af hjemmesiden. Du har nu gjort dine kampagnefliser klar til brug, og skal beslutte hvilken sektionsside, de skal ligge på. I dette eksempel lægger vi den i midtersektionen på forsiden af hjemmesiden. Klik på den side under Home, som skal være forside på jeres hjemmeside. Klik på elementet Bokse til højre for venstremenuen. Kampagnefliserne skal ligge i feltet Bokse i midtersektionen, derfor skal du klikke dig ind til Forsideelementer/Kampagnefliser/Mappe i feltet Bokse i midtersektionen og dobbeltklikke på den/de kampagneflise(r), som skal vises i på forsiden. HUSK! Alt hvad du laver i hjemmesideløsningen skal gemmes og udgives, inden det kan ses på hjemmesiden inkl. nye mapper og billeder i mediearkivet og billedgallerier og karruseller under Global. 3. Nye muligheder på sektionssider I sommeren 2015 har vi fået udviklet ny funktionalitet til sektionssider. Her følger en beskrivelse af den nye funktionalitet, samt hvordan man implementerer det på hjemmesiden. 3.1. Forsideintro (med baggrundsbillede) Man kan nu lave en forsideintro på sit site (se billedet her under). Dette er gjort på www.kommuneplan.hvidovre.dk. Sitetype er Header smal. Hvis man ønsker at benytte forsideintroen (med baggrundsbillede) på sin hjemmeside skal man: Side 8/12
1. Finde et billede, der egner sig som baggrundsbillede. Billedet skal være 1530 x 380 px. Gem de i en mappe i mediebiblioteket. 2. Klik på forsiden (i dette tilfælde Home ) og vælg elementet Topbillede. Vælg et topbillede fra en af dine mapper i mediebiblioteket. Vælg der efter næste element Forsideintro. Udfyld felterne med den tekst, du ønsker at benytte. Der er også plads til et ikon. Husk at klikke Gem og Udgiv. Side 9/12
3.2. Lav kampagneflise (kun i farvet felt og kun i fuld bredde) Hidtil har man kunne vælge, om højden på en kampagneflise skulle være en, to eller for eksempel tre rækker høj. Som noget nyt kan kampagneflisen nu fylde mindre end en række (dog kun når den er i fuld bredden). Se eksempel med en grå kampagneflise på billedet nedenfor. Sådan gør du: Følg anvisningerne længere oppe i denne vejledning for, hvordan man laver en kampagneflise med farvet baggrund. Under elementet Generelt indhold kan du ud over de sædvanlige rækker nu også vælge at den afpasser sig til tekst-indholdet den hedder Auto. Se billede nedenfor. 3.3. Video i kampagneflise Nu kan man også vælge at lave link til en video i en kampagneflise (kampagneflise til højre her under). Sådan gør du: Opret en kampagneflise i Global -mappen (følg vejledning længere oppe i denne vejledning). I elementet Generelt indhold Skriver du en overskrift og indsætter et billede, som passer til videoens indhold. Skriv evt. en tekst i tekst-feltet. Gå nu på fx Youtube og find den film, som du vil Side 10/12
vise. Find IFrame-koden for filmen (klik på Del og Indlejring ). Kopier koden og sæt den ind i feltet Video. Vælg højde og bredde på kampagneflisen (se billedet nedenfor). Husk Gem og Udgiv. 3.4. Baggrundsbillede på farvede kampagnefliser Man kan nu også indsætte et baggrundsbillede i en kampagneflise. Under elementet Generelt indhold skal man sætte flueben i feltet Benyt billede som baggrund. Se nedenfor. Side 11/12
Sådan gør du: Skriv tekst i feltet Overskrift. Skriv link i feltet Læs mere link. Vælg baggrundsbillede fra mediebiblioteket) og sæt flueben i feltet Benyt billede som baggrundsbillede. Skriv evt. også tekst i feltet Tekst. Hvis du holder musen hen over teksten Benyt billede som baggrundsbillede kan du se de korrekte størrelser på billederne. Bemærk også, at man nu både kan skrive en overskrift og brødtekst i kampagnefliser. Side 12/12