BRUGERVEJLEDNING RAMBØLL HJEMMESIDE

Transkript

1 Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Rambøll Hjemmeside Full Responsive Dato Maj 2017 BRUGERVEJLEDNING RAMBØLL HJEMMESIDE

2 BRUGERVEJLEDNING RAMBØLL HJEMMESIDE Revision 01 Dato Udarbejdet af JNN Kontrolleret af LKN Godkendt af Beskrivelse JNN Brugervejledning til hjemmeside til forsyninger Ref \DD JNN Rambøll Englandsgade 25 DK-5100 Odense C T F

3 RAMBØLL HJEMMESIDE INDHOLD 1. Velkommen til Rambøll Hjemmeside 1 2. Teknik 1 3. Opstart 2 4. Log ind Rediger side View mode Layout mode Rediger indhold af side/modul Øvelse Rediger indstillinger af modul 9 5. Menuen i dotnetnuke Administrator Website indstillinger Fanen Grundindstillinger Detaljer for websted Webside marketing Udseende Fanen Avancerede indstillinger Sidehåndtering Sikkerheds indstillinger Betalingsindstillinger Tilgængeligheds indstillinger Typografi Bruger Konto Indstillinger Registrering Indstillinger Log ind indstillinger Profil Indstillinger Sider Indstilling af side Fælles Rettigheder Moduler SEO Metatags Udseende Link Sikkerhedsroller Brugerkonti Håndter bruger bagrund Håndter roller for denne bruger Håndter adgangskode Håndter profil Name (Navn) Address details (Adresse detaljer) Contact information (Kontakt information) Preferences (Indstillinger) Udvidelser 31 JNN

4 RAMBØLL HJEMMESIDE 5.6 Sprog Nyhedsbreve File Management Øvelser Opret mapper Opload filer (kopier filer fra PC til hjemmeside) Filhåndtering Download Rename (Omdøb) Copy (Kopier) Move (Flyt) Delete View Properties (Vis egenskaber) Get URL Opret genvej (URL) Opload PDF-dokument og opret genvej samtidigt Billeder og logo Tilpasning af billeder til bannerbrug Generelt Procedure Fremstilling af banner og indsættelse af billeder Procedure Ændring af logo Procedure Opret ny side med billede Billeder til banner Popup tekst Tekstbokse på forside Frie øvelser Oprette en bruger i DNN Tilpas mappe strukturen i File manager Opload pdf-filer og billeder i Filmanager Tilpas tekst på hjemmesiden og link til pdf-filer og billeder oploadet fra øvelse Link til andre hjemmesider Link til Send nyhedsbrev Opload dokument 91 JNN

5 RAMBØLL HJEMMESIDE 1 1. VELKOMMEN TIL RAMBØLL HJEMMESIDE Hjemmesiden er udviklet med hensyn til de behov, som vandforsyningerne i Danmark har på nuværende tidspunkt til information til forbrugerne samt services til flg.: Internetaflæsning Flyttemeddelelse Søg ledningsplan Tilmeld Nyhedsbrev Tilmeld SMS Nets Ved køb af Rambøll Hjemmeside oprettes domænenavn efter eget ønske, såfremt det er ledigt og det er muligt at få koblet s til bestyrelse/personale med vandværkets domænenavn. Domænenavnet til s må dog ikke indeholde æøå, så hvis det er et ønske at forsyningens primære domæne skal indeholde et eller flere æøå, kan der tilkøbes flere domæner, som peger på samme side. Der kan f.eks. oprettes nogle generelle s, f.eks. info@vandbyvand.dk eller kontakt@vandbyvand.dk. Domænet afregnes direkte mellem DK-Hostmaster og forsyning og Rambøll vil være oprettet som administrator af domænet i den tid hjemmesiden hostes hos Rambøll Danmark A/S. Når domænet er oprettet hos DK-hostmaster oprettes en "standard" hjemmeside med demodata, som efterfølgende skal ændres til at indeholde forsyningens data. Demosiden indeholder et standardlogo med forsyningens eget navn samt generelle billeder relateret til forsyninger i Danmark. Rambøll udleverer et brugernavn og adgangskode, så forsyningen kan logge ind på siden og selv tilrette siden. For at gøre siden så overskuelig som muligt, anbefaler Rambøll, at information som f.eks.: Takstblad Regnskab Vedtægter Regulativ Referater Vandanalyser mm. Indlægges som PDF-dokumenter, med genveje, hvor PDF-dokumenter starter i nyt vindue. Det vil også være nemmere for forbrugeren og forsyningens samarbejdspartnere som f.eks. ejendomsmæglere, advokater og VVS-firmaer mv. at hente oplysninger og udskrive/ e/gemme disse oplysninger. For det meste vil de fleste dokumenter i forvejen være elektroniske og det vil derfor være nemmere at vedligeholde information på siden ved at udskifte pdf-dokumenterne ved ændringer. 2. TEKNIK Hjemmesiden er udviklet i DotNetNuke, som er et CMS-system (Content Management System). Det betyder, at indhold redigeres direkte på siden, og gemmes i en database. CMS-systemet kan tilpasses på forskellige måder, således at der kan ændres på udseende, funktionalitet og indhold.

6 RAMBØLL HJEMMESIDE 2 3. OPSTART Start din internetbrowser, f.eks. Internet Explorer og indtast adressen på din hjemmeside, f.eks. Hjemmesiden indeholder menu med adgang til flere undersider på hjemmesiden, så brugeren kan klikke sig frem til de relevante oplysninger. Hjemmesiden starter altid på Forside som vises længst til venstre. Under menuen findes et Banner i størrelsen ca x 600 pixels.

7 RAMBØLL HJEMMESIDE 3 Under banneret er der på forsiden 3 infobokse. En side kan bestå af flere moduler (kasser) med hver sin overskrift og indhold, f. eks indeholder Forside modulerne: Nedenunder er der tekst, som har generel interesse for vandværkets forbrugere, f.eks. oplysninger om næste ordinære generalforsamling. Nederst er der en blå infoboks, der f.eks. kan indholde nøgletal for vandværket samt evt. nyheder og kontaktinfo. 4. LOG IND For at kunne redigere hjemmesiden er det nødvendigt at logge ind med brugernavn og adgangskode, som er oplyst af Rambøll Danmark A/S Klik på Log ind

8 RAMBØLL HJEMMESIDE 4 Brugernavn og Adgangskode indtastes og klik på Login 4.1 Rediger side Når der logges ind, starter DotNetNuke med alle værktøjer til rådighed. Du kan nu ændre indholdet af de enkelte moduler og sider samt oploade/slette filer, dvs. billeder, dokumenter mv. Når siden er sat op vil det oftest være behov for at redigere indholdet af de enkelte moduler samt oploade nye filer til hjemmesiden. Klik på Rediger side i øverste højre hjørne.

9 RAMBØLL HJEMMESIDE 5 Klik på Rediger Denne Side Herved fremkommer redigeringsværktøjer: Du kan også vælge at få vist hjemmesiden i flg. tilstand, når du er logget ind: View (Siden vises, som når man er logget ud af siden (normal visning) Layout (Siden vises, så man kan se hvor alle modulerne på siden er placeret og hvad de hedder 4.2 View mode Klik på Rediger side i øverste højre hjørne. Klik på Luk Redigeringstilstand. Redigeringsværktøjerne er herved forsvundet:

10 RAMBØLL HJEMMESIDE Layout mode Klik på Rediger side i øverste højre hjørne.

11 RAMBØLL HJEMMESIDE 7

12 RAMBØLL HJEMMESIDE Rediger indhold af side/modul Gå tilbage til tilstand Rediger ved at klikke på Rediger indhold i modulet Forside som ovenfor.

13 RAMBØLL HJEMMESIDE 9 Her kan indholdet af modulet Forside tilpasses ligesom i en tekstbehandling. Der kan ligeledes indsættes billeder og genveje (hyperlinks) til andre dokumenter på siden eller pdf-filer eller eksterne links på nettet. 4.5 Øvelse Prøv at ændre noget af indholdet eller tilføj tekst som nedenfor: Klik på Gem for at gemme ændringerne. 4.6 Rediger indstillinger af modul

14 RAMBØLL HJEMMESIDE 10 Klik på det lille tandhjul til højre for Rediger indhold for at redigere indstillinger modulet. Under Indstillinger af modul er der 4 mapper/faner: Modul indstillinger Rettigheder Side indstillinger HTML Module Indstillinger Under fanen Modul indstillinger kan der bla. Ændres navn/overskrift på modul og om modulet skal vise på alle sider mv.

15 RAMBØLL HJEMMESIDE 11 Under fanen Rettigheder kan redigeres/tildeles hvem som skal have kigge og redigeringsrettigeder. Under fanen Side indstillinger kan side indstillinger angives.

16 RAMBØLL HJEMMESIDE 12 Rul ned i bunden af siden og klik på Opdater når dine tilpasninger er udført. Klikkes der et andet sted i menuerne og der dukker en ny side op kan du tilsvarende redigere siderne som ovenstående. Prøv at klikke på genvej til instilling af modul, som vist ovenfor, for at administrere flg. modul

17 RAMBØLL HJEMMESIDE 13 Udover at Redigere indhold og Indstillinger kan du også her vælge Slet, hvis du ønsker at slette modulet på siden. 5. MENUEN I DOTNETNUKE Menuen i DotNetNuke Du kan vælge mellem menuerne: Admin Værktøjer (Fil manager) Hjælp (Online hjælpe) Moduler (Moduler på siden oprettelse mv.) Sider (Sider Opret, Rediger, Slet mv.) Brugere 5.1 Administrator

18 RAMBØLL HJEMMESIDE 14 Peg på Admin Du kan nu enten vælge at klikke på: Fælles Indstillinger Avancerede indstillinger Bogmærkede instillinger ingen værktøjer pt. Disse menuer giver en delmængde af de funktioner der findes under Admin. Klik på Admin Ovenover findes alle værktøjerne under Admin, der mulighed for indstilling af din hjemmeside. Nogle af funktionerne vil herefter blive gennemgået.

19 RAMBØLL HJEMMESIDE Website indstillinger Klik på Website indstillinger Her kan opsætningen af ens hjemmeside tilpasses mht. bla. Logo mv. Website indstillinger er delt op i flg. undermapper/faner: Grundindstillinger Avancerede indstillinger Bruger Konto Indstillinger Typografi Fanen Grundindstillinger Under Fanen Grundindstillinger er der 3 undergrupper: Detaljer for websted Webside marketing Udseende Detaljer for websted Her er det muligt at ændre titel på hjemmeside samt evt. Ophavsret, som vises nederst på siden.

20 RAMBØLL HJEMMESIDE Webside marketing Her kan angives f.eks. at sende dit site til den valgte søge maskine for indeksering, f.eks. Google, Yahoo eller Microsoft Udseende Her kan du vælge et logo og evt. oploade dit eget logo.

21 RAMBØLL HJEMMESIDE Fanen Avancerede indstillinger Under Fanen Avancerede indstillinger kan du vælge mellem Sidehåndtering Sikkerhedsindstillinger Betalingsindstillinger Tilgængeligheds indstillinger Sidehåndtering Her kan bla. angives en opstartside, som kaldes en splashside samt hvilken side der er "Hjem" side (Hans og Grethe) Sikkerheds indstillinger Her kan angives administrator.

22 RAMBØLL HJEMMESIDE Betalingsindstillinger Denne funktion vil umiddelbart ikke blive benyttet af en forsyning Tilgængeligheds indstillinger Her tilpasses Tilgængeligheds indstillinger. Dette er normalt indstillet fra Rambøll og behøves derfor ikke at blive tilpasset.

23 RAMBØLL HJEMMESIDE Typografi Typografi Denne funktion bør ikke benyttes af forsyningen Bruger Konto Indstillinger Registrering Indstillinger

24 RAMBØLL HJEMMESIDE 20 Angiver den tilladte registreringsmetode for denne hjemmeside Log ind indstillinger Profil Indstillinger Denne indstilling er i forvejen konfigureret af Rambøll og behøver derfor ikke at blive ændret. 5.2 Sider Klik på Sider (Konfiguration og indstilling af sider på hjemmesiden)

25 RAMBØLL HJEMMESIDE 21 Her vises en oversigt over de sider, som hjemmesiden indeholder. Der kan klikkes på "plus" + i menu strukturen for at se underliggende sider eller på Udvid alle for at se alle de tilhørende sider.

26 RAMBØLL HJEMMESIDE 22 NB! Du kan f.eks. flytte med musen, hvor siderne/menupunkterne skal være på siden ved at klikke på menupkt/side og holde musetasten nede og slippe den, der hvor du ønsker siden placeret. Lidt lige som træk og slip i "7 kabale" Indstilling af side Klik på Forside for at tilpasse indstillinger for denne side.

27 RAMBØLL HJEMMESIDE Fælles Her kan navn på siden rettes og om den skal medtages i menu mv Rettigheder Her angives hvilke brugere, som har ret til at se siden og hvem som har rettighed til at redigere. F.eks. kan Bestyrelsen i vandværket oprettes og der kan oprettes en særlig side for bestyrelsen, som kan se en side, når de er logget ind som bestyrelse Moduler Oversigt over moduler på siden.

28 RAMBØLL HJEMMESIDE SEO Konfigurerer indstillinger for tilslutning til søgemaskiner på internettet Metatags Undlad at udfylde opdateringsinterval for at deaktivere.

29 RAMBØLL HJEMMESIDE Udseende Dette vil normalt være standard for siden og ændres normalt ikke Link Angiver evt. egenskaber for link Nederst på siden opdateres sideopsætningen:

30 RAMBØLL HJEMMESIDE Sikkerhedsroller Dobbeltklik på Sikkerhedsroller Sikkerhedsroller benyttes til at definere bestemte roller/brugergrupper til hjemmesiden. Du kan selv oprette flere Sikkerhedsroller, f.eks. personale eller leverandører mv. Det er også muligt, at redigere eksisterende sikkerhedsroller, som kan benyttes til at give adgang til bestemte menuer på hjemmeside og der kan tildeles rettigheder til kun at kunne se oplysninger eller rette på siden. Det er også muligt at sende nyhedsbreve pr. til disse grupper/sikkerhedsroller, så der løbende kan sendes nyhedsbreve til f.eks. Bestyrelsen eller Forbrugerne, hvis disse har ladet sig registrere på hjemmesiden. Eksempler på Sikkerhedsroller: Medlemmer af Administrator har fuld adgang til websitet. Rambøll tilføjer altid vandværksbrugeren til denne gruppe Bestyrelsesmedlemmer er ikke en standard rolle, men derimod en rolle Rambøll har oprettet. Medlemmer af denne gruppe har adgang til de sider, som en Administrator giver dem adgang til Alle brugere som er oprettet i systemet med brugernavn/password er automatisk medlem af Registered Users. Det gælder både brugere, som oprettes af en administrator og brugere som opretter sig selv med Registrer. (Øverste højre hjørne på hjemmesiden.

31 RAMBØLL HJEMMESIDE 27 Stort samme Sikkerhedsrolle som Registered Users. Eneste forskel er, at man kan fjernes fra gruppen Subscribers. Både administratorer og brugeren selv kan fjerne medlemskab af Subscripers. Det er oplagt, at bruge denne gruppe i forbindelse med udsendelse af nyhedsbreve, men det kan principielt være en hvilken som helst gruppe der benyttes til Nyhedsbreve via . Unverified Users er ikke relevant. DotNetNuke kan sættes op, så brugere der registrerer sig selv, skal vente på godkendelse fra en Administrator før de kan logge ind. Det benyttes ikke på Rambøll Hjemmeside Du kan evt. prøve at klikke på blyanten (Egenskaber) for gennemse opsætning af de enkelte sikkerhedsroller. 5.4 Brugerkonti Dobbeltklik på Brugerkonti Som minimum står den bruger, som i forsyningen har fået opgaven med at tilrette indholdet af hjemmesiden. Det er muligt at: Tilføj ny bruger f.eks. bestyrelsesmedlemmer eller forbrugere via Register Slette eksisterende brugere Slette autoriserede brugere Redigere eksisterende brugere Klik på Rediger (blyanten) på bruger kursus8

32 RAMBØLL HJEMMESIDE Håndter bruger bagrund Fanen Håndter bruger baggrund indeholder stamdata på bruger Håndter roller for denne bruger Fanen Håndter roller for denne bruger indeholder de sikkerhedsroller brugeren er medlem af Der er mulighed for at angive en periode for hvor længe brugeren kan være medlem af den på gældende sikkerhedsrolle

33 RAMBØLL HJEMMESIDE Håndter adgangskode Fanen Håndter adgangskode giver mulighed for at ændre adgangskode på brugeren Håndter profil Fanen Håndter profil giver mulighed for at registrere flere stamdata på brugeren Name (Navn)

34 RAMBØLL HJEMMESIDE 30 For hvert felt kan det angive om det er tilgængeligt: Offentlig Kun Medlemmer Kun for Administrator Venner og Grupper Address details (Adresse detaljer) Her kan adresse mv. indtastes Contact information (Kontakt information) Her kan kontakt informationer indtastes.

35 RAMBØLL HJEMMESIDE Preferences (Indstillinger) Klik på Opdater nederst i billedet, når redigering af brugeren er færdig, hvis der er ændret/tilføjet på brugeren. 5.5 Udvidelser Klik på Udvidelser Giver en oversigt over de programmer/moduler og udvidelser, som benyttes på hjemmesiden samt version. 5.6 Sprog Klik på Sprog

36 RAMBØLL HJEMMESIDE 32 Standard er Engelsk/amerikansk og hjemmesiden er dansk. Skal ikke ændres! 5.7 Nyhedsbreve Klik på Nyhedsbreve Klik på Send

37 RAMBØLL HJEMMESIDE File Management Klik på File Management Dette er filhåndteringen til hjemmesiden og det er denne funktion, der skal benyttes hver gang du vil hente filer til din hjemmeside eller slette filer på hjemmesiden. Til venstre i billedet er der en oversigt over mapper ligesom Stifinder i Windows. Klik på Root for at se de underliggende mapper. Root svarer til roden af dit drev i stifinder. Mappen Banners indeholder de filer, som vises i Banneret på hjemmesiden. Der er mappen Gallery, som benyttes af modulet Gallery. Mappen Vandkvalitet er beregnet til at indeholde vandanalyser i pdf.

38 RAMBØLL HJEMMESIDE Øvelser Opret mapper Bemærk at du kan oprette dine egne mapper, f.eks. PDF under Portal rod og derefter oprette mapper til Regnskab, Referat, Takster, Vedtægter, Regulativ mv. Findes mappen PDF i forvejen, så prøv at oprette mappen KursusPDF i stedet for Dernæst kan du oploade filer i disse mapper og linke til disse filer fra hjemmesiden. Marker Root og Klik på ikon med mappen med plus i til højre i billedet. Indtast KursusPDF i Folder Name (navn på mappe) Klik på Save (Gem) Du har nu oprettet en mappe under Root med navnet KursusPDF.

39 RAMBØLL HJEMMESIDE Opload filer (kopier filer fra PC til hjemmeside) Nu skal der oprettes en mappe med Takster under mappen KursusPDF prøv dette. Derefter oprettes flg. mapper under KursusPDF: Regnskab, Referat, Takster, Vedtægter, Regulativ Resultat Takster er placeret under mappen KursusPDF. Prøv at oploade et takstblad i PDF. Klik på ikon for Upload Files (Indlæs Filer) husk at den mappe filen skal indlæses i, skal være markeret. Du kan vælge at trække en fil over i det blå felt eller klikke på knappen Choose Files (vælg filer) Klik på Choose Files for at udvælge takstbladet via stifinder

40 RAMBØLL HJEMMESIDE 36 Klik på Open (Åbn) for at overføre Takstbladet fra din lokale PC til hjemmesiden Hvis der skulle hentes flere filer til samme mappe kan det udføres ved at igen at klikke på Choose Files. Klik på Close (Luk), når du ønsker at afslutte udvælgelse af filer.

41 RAMBØLL HJEMMESIDE 37 Takstbladet er nu overført fra din PC til hjemmesiden Filhåndtering Marker filen Takstblad demo.pdf og der fremkommer flg.: Download Rename (Omdøb) Copy (Kopier) Move (Flyt) Delete (Slet) Get URL (Hent Url/Vis genvej) View Properties (Vis egenskaber) Ved at pege med musen på de enkelte ikoner fås ovenstående tekst.

42 RAMBØLL HJEMMESIDE 38 Du kan også højreklikke på filen og få flg.: Download Du kan nu vælge om du vil gemme eller åbne filen i File Management. Hvis du ønsker at åbne filen kan du også vælge at dobbeltklikke på filen Rename (Omdøb) Klik på knappen Rename Du kan nu ændre navnet på filen.

43 RAMBØLL HJEMMESIDE Copy (Kopier) Klik på knappen Copy (Kopier). Marker den mappe filen ønskes kopieret til og klik på Copy Files (Kopier filer) Resultat filen er kopieret til mappen KursusPDF

44 RAMBØLL HJEMMESIDE Move (Flyt) Klik på mappen Takster. Marker filen TAKSTBLAD demo.pdf Klik på knappen Move Klik på mappen, hvortil du ønsker at flytte filen.l Klik på Move for at flytte filen.

45 RAMBØLL HJEMMESIDE Delete Marker den fil du lige har kopieret til KursusPDF og klik på knappen Delete Klik på Delete View Properties (Vis egenskaber) Klik på View Properties (Vis egenskaber)

46 RAMBØLL HJEMMESIDE Get URL Klik på knappen Get URL (Hent Url/Vis genvej) Teksten kan markeres og kopieres ind i en anden sammenhæng, hvis der er behov for det. Klik på Close (Luk) Bemærk! Du kan også Omdøbe, Flytte, Slette og se egenskaber for en mappe, hvis du marker mappen. Ved Flytning og Sletning af mapper, der indeholder filer, vil filerne også blive medtaget i handlingen.

47 RAMBØLL HJEMMESIDE Opret genvej (URL) Nu skal der oprettes en genvej til takstbladet, så forbrugeren kan se siden på hjemmesiden. Vælg Priser/Vandspild Takster Klik på Rediger indhold og fjern først alt indholdet ved at markere det hele og trykke på Delete tasten Skriv gerne en overskrift samt en beskrivende tekst som i ovenstående eksempel. Den tekst, som skal benyttes som genvej skal markeres.

48 RAMBØLL HJEMMESIDE 44 Klik på kæden for at oprette genvej. Klik på det lille ikon ud for URL

49 RAMBØLL HJEMMESIDE 45 Først skal du igennem stifinderen udpege dit dokument/fil via URL og dernæst angive Mål og jeg anbefaler, at Takstbladet(PDF dokumentet) åbnes i et nyt vindue, da det derved er nemmere for brugeren at klikke takstbladet væk, når vedkommende har læst dokumentet. Det er frivilligt om du vil benytte Tooltip, som oplyser, hvad det er der peges på med musen. Alternativt kan du Uploade takstbladet direkte uden at uploade i Filemanagement først. Klik på Insert (Indsæt), når du har foretaget dine valg. Du kan også vælge at spore hver gang, der er nogle som har åbnet dokumentet og evt. hvilken bruger med dato og klokkeslæt for hvert klik. Klik på OK, når du har foretaget dine valg. Klik på Gem længere nede i billedet for at gemme tilføjelserne. Prøv om dit link virker?

50 RAMBØLL HJEMMESIDE OPLOAD PDF-DOKUMENT OG OPRET GENVEJ SAMTIDIGT Vælg det menupunkt, hvor genvejen skal oprettes, f.eks. Priser/Vandspild Takster Klik på Rediger Side Rediger Denne Side oppe i højre hjørne

51 RAMBØLL HJEMMESIDE 47 Klik på Rediger Indhold Indtast tekst, f.eks. Link til takstblad 2016 i PDF marker PDF Klik på Document manager

52 RAMBØLL HJEMMESIDE 48 Klik/udpeg den mappe i venstre side af skærmbillede, hvor du vil gemme dokumentet, f.eks. PDF Takster Klik på Upload øverst i billede

53 RAMBØLL HJEMMESIDE 49 Klik på Vælg knappen start med den øverste Vælg knap

54 RAMBØLL HJEMMESIDE 50 Udpeg fil til Upload i pdf og klik på Open (Åbn) Klik på Upload

55 RAMBØLL HJEMMESIDE 51 Udpeg den oploadede fil og angiv i Mål - Nyt Windue og angiv beskrivende tekst i Tooltip og Klik på Indsæt

56 RAMBØLL HJEMMESIDE 52 Klik på Gem

57 RAMBØLL HJEMMESIDE BILLEDER OG LOGO 7.1 Tilpasning af billeder til bannerbrug Generelt For at gøre det interessant for besøgende at gå på opdagelse på en hjemmeside, anvendes der ofte billeder og grafik på forsiden som fortæller lidt om, hvem man er. Billeder siger som bekendt mere end ord, men der kan være forskel på, hvor godt man udtrykker sig, billedligt talt. Derfor er det vigtigt, at overveje hvordan ens hjemmeside præsenteres, når den besøgende åbner siden. Der skulle gerne vækkes en appetit hos den besøgende for at finde ud af mere information. Banneret skal være med til at vække denne appetit, som får besøgende til at ville vide mere. Mange gange opnås denne effekt bedst, hvis man går tæt på, og beskærer sit billede på en måde, så der vises et udsnit af noget væsentligt for ens kerneområde, frem for at tage afstand med billedet og vise en hel masse på én gang. Så med andre ord når der tages billeder til banneret: Gå tæt på og tag gerne billeder fra sjove vinkler, med dybde, Der findes et utal af forskellige billedbehandlingsprogrammer, men i denne instruktion vil vi begrænse os til at anvende følgende programmer: PAINT fra styresystemerne: Windows XP, Vista, 7 og 8 MICROSOFT OFFICE PICTURE MANAGER fra Microsoft Office kontorpakken Procedure Vi arbejder med størrelsen pixel, når vi tilpasser vore billeder. En pixel er den mindste størrelse som vises på en computerskærm. Banneret i Rambøll Hjemmeside i DotNetNuke har størrelsen 960 pixel i bredden og 200 pixel i højden. Logoet som vi kommer til senere, har størrelsen 343 pixel i bredden og 175 pixel i højden. Lad os først finde de billeder frem som er blevet udvalgt og åbne dem med Microsoft Office Picture Manager. Højreklik evt. på billedet du vil redigere og vælg: Åbn med Microsoft Office 2010 eller hvilken udgave af Office du anvender.

58 RAMBØLL HJEMMESIDE 54 Her ses et billede åbnet i MS Picture Manager For at ændre størrelse og beskære - trykkes der på: Rediger billeder Der åbnes nu en menu i højre side af vinduet hvor der kan vælges mellem at redigere: Korriger automatisk Lysstyrke og kontrast Farve Beskær Roter og spejlvend Fjernelse af røde øjne Tilpas størrelse Komprimer billeder Klik på: Beskær - for at beskære billedet.

59 RAMBØLL HJEMMESIDE 55 Her ses et billede som har størrelsen 800 x 480 pixel før beskæring. Læg mærke til de sorte markeringer rundt om billedet hvis man tager fat i én af dem, med musen, og trækker dem indad i billedet kan man se et udsnit af billedet, hvor det skraverede område udenfor billedet, er det som bliver skåret væk når man trykker på knappen OK i redigeringsmenuen i højre side. Denne beskæring vil give et billede på 387 x 262 pixel.

60 RAMBØLL HJEMMESIDE 56 Billedet er nu beskåret til størrelsen 224 x 112 pixel og har helt ændret karakter. Lad os se på den første beskæring herunder som har størrelsen 387 x 262 pixel: Hvis vi vil anvende dette billede i vores banner skal det have højden 200 pixel det er med andre ord 262 minus 200 = 62 pixel for høj det skal vi have ændret. Vi går op foroven og klikker på: Rediger billeder igen og vælger: Tilpas størrelse. Der åbnes igen en menu i højre side af vinduet hvor der kan vælges mellem: Tilpas billedets størrelse til: Oprindelig størrelse Foruddefineret bredde x højde: Brugerdefineret bredde x højde: Procent af original bredde x højde: Vi vælger: Brugerdefineret bredde x højde: Der fremkommer nu nogle værdier i de to input bokse men vi skriver bare 200 i den højre boks. Inden vi trykker på knappen OK, kan vi kontrollere at der over knappen står: Oprindelig størrelse: 387 x 262 Ny størrelse: 285 x 193

61 RAMBØLL HJEMMESIDE 57 Tryk på OK og gem billedet nu er det klar til at indgå i vores banner. Ovenstående passer på billeder som ligger ned dvs. at bredden er større end højden. Billedet til venstre har størrelsen 288 x 480 pixel og er altså optaget på højkant dvs. at: bredden er mindre end højden og så skal: Tilpas størrelse, gøres lidt anderledes. Vi klikker igen foroven på: Rediger billeder og vælger: Tilpas størrelse. - og vælger igen: Brugerdefineret bredde x højde: Igen fremkommer de to input bokse, men nu skriver vi 200 i begge bokse. Prøv at starte med at skrive 200 i den højre boks som før og læg mærke til at der nu står Ny størrelse: 200 x 322 det er jo forkert, fordi højden så vil blive 322 pixel hvor vi ønsker 200 pixel.

62 RAMBØLL HJEMMESIDE 58 Skriv nu 200 i den venstre boks også og læg mærke til, at der nu står: Oprindelig størrelse: 288 x 480 Ny størrelse: 116 x 200 Nu har billedet fået den ønskede højde på de 200 pixel og vi kan trykke på OK og gemme billedet til senere brug i vores banner. For at efterprøve ovenstående, i praksis, er det en god ide at finde et egnet billede og starte med at beskære det til størrelsen: 800 x 480 pixel. Ud fra dette kan de andre størrelser som er angivet i teksten fremstilles. 7.2 Fremstilling af banner og indsættelse af billeder Procedure Som tidligere nævnt er størrelsen på banneret: 960 pixel i bredden og 200 pixel i højden. Lad os starte med at fremstille et lærred i Paint som har denne størrelse. Der er lidt forskel på hvordan det gøres, alt efter hvilken version af styresystemet Windows og dermed også hvilken version af Paint der anvendes. Vi gennemgår herunder alle versioner, først Windows XP og Vista, dernæst 7 og 8. Start Paint I det pågældende styresystem: I Windows XP og Windows Vista, skal man vælge menuen: Billede og undermenuen: Attributter

63 RAMBØLL HJEMMESIDE 59 Her fremkommer nedenstående: Klik i Pixel og sæt bredde til 960 og højde til 200 og tryk på knappen OK og gem det tomme billede, giv det f.eks. navnet: Banner_1, dvs. Filer Gem som I Windows 7 og Windows 8, skal man vælge: Tilpas størrelsen Her fremkommer nedenstående:

64 RAMBØLL HJEMMESIDE 60 Klik i Pixel, og fjern markeringen i: Bevar højde-bredde-forhold. Sæt Vandret til 960 og Lodret til 200 og tryk på knappen OK og gem det tomme billede, giv det f.eks. navnet: Banner_1 i Filer Gem som Vi har nu fået fremstillet det tomme billede/ banner i den størrelse vi skal bruge og er klar til at begynde at sætte billeder ind på det. Igen er der forskel på hvilken version af Paint vi anvender, - lad os igen begynde med versionen i Windows XP og Vista: For at placere billeder på banneret klikkes på menuen: Rediger og undermenuen: Sæt ind fra - nu åbnes en stifindermenu, hvor vi kan vælge det billede vi vil indsætte. Find, med stifinder-menuen, ét af de billeder der skal indsættes i banneret, klik på billedet så navnet vises i stifinderens tekstboks, mærket Filnavn: og vælg Åbn

65 RAMBØLL HJEMMESIDE 61 Det indsatte billede placerer sig nu til venstre i det tomme banner. Det næste billede der indsættes placerer sig også til venstre, ovenpå det første billede vi indsatte. Læg mærke til at det er markeret med stiplede linjer hvis du klikker nogen steder uden for billedet nu, bliver det permanent placeret og kan ikke længere flyttes.

66 RAMBØLL HJEMMESIDE 62 Vi tager derfor fat i det seneste billede med musen, ved at pege inde i billedet med musen og holde venstre museknap nede, og trækker det hen bag ved det første billede og slipper det her. Sådan fortsætter vi indtil vi har fyldt banneret med billeder. - med versionen i Windows 7 og 8, foregår det på denne måde: For at placere billeder på banneret klikkes der under ikonet med clip-boardet, hvor der står: Sæt ind, med en lille pil nedad ved siden af. Der åbner nu en undermenu, hvor man vælger: Sæt ind fra

67 RAMBØLL HJEMMESIDE 63 Ligesom med versionen i Windows XP og Vista, placeres billederne i venstre side, når de sættes ind, men i denne version kan man foruden at trække dem på plads med musen også bruge tastaturets piletaster og langsomt køre dem på plads, hvor man ønsker det. Nu har vi fået sat de to billeder sammen til en del af det nye banner, og hvor mange billeder vi skal have, ved siden af hinanden, i vores banner, afhænger af bredden på billederne. Tilsammen skal billederne kunne dække bredden på vores banner, som jo er 984 pixel. Når banneret er udfyldt skal det gemmes og man er klar til evt. at lave et nyt. Bemærk at billederne kan overlappe hinanden, hvis pladsen ikke går lige op, kan der rykkes lidt på billederne

68 RAMBØLL HJEMMESIDE Ændring af logo Procedure Som tidligere nævnt er størrelsen på logoet 343 pixel i bredden og 175 pixel i højden. I paint oprettes Canvas på 343 x 175 ved at starte paint Klik på Resize Angiv Pixels til 373 x 175 og fjern markering i Maintain aspect ratio og klik på OK

69 RAMBØLL HJEMMESIDE 65 Vælg Paste Paste from Udpeg Logo og klik på Open (Åbn)

70 RAMBØLL HJEMMESIDE 66 Placer logo et til venstre i midten ved at trække med musen. Klik på A for at indsætte tekst og skriv vandværks navnet i 2 linjer adskil med Shift + Enter

71 RAMBØLL HJEMMESIDE 67 Du kan vælge font Arial Rounded MT Bold og størrelse 24 Husk at placere tekstboksen med musen, så den står pænt ved siden af logo. Årsag til at logoet ser sådan ud er af hensyn til at logoet er pænt på en Mobiltelefon. Logoet skal nu gemmes: Vælg ovenstående øverst til venstre og klik på Save As og vælg enten filtype PNG eller JPG format.

72 RAMBØLL HJEMMESIDE 68 Klik på Save (gem) Du kan nu oploade det nye logo via Admin Website indstillinger Udseende Klik på Upload File i rubrikken Logo

73 RAMBØLL HJEMMESIDE 69 Klik i den blå box Udvælg det nye logo via stifinder og klik på Open

74 RAMBØLL HJEMMESIDE 70 Klik på Close Husk at vælge Rambøll Logo Klik på Opdater for at opdatere hjemmeside Kontroller hjemmesidens logo

75 RAMBØLL HJEMMESIDE OPRET NY SIDE MED BILLEDE Denne øvelse forudsætter at du er logget ind som bruger F.eks. ønskes der oprettet en side under menuen Vandværket, der hedder Om Vandværket Jeg kan vælge enten at oprette siden som en almindelig hvid side uden billede eller benytte samme billede som f.eks under Vandværket Generalforsamling Først skal siden oprettes under menuen Vandværket Vælg Admin øverst i menuen efter du er logget ind Klik på Sider

76 RAMBØLL HJEMMESIDE 72 Klik på Udvid alle Højreklik på Vandværket, da du ønsker at oprette siden under menuen Vandværket

77 RAMBØLL HJEMMESIDE 73 Klik på Tilføj Side(r) Til højre i billedet kan du nu oprette undermenuen Om Vandværket og klikke på Opret Side(r)

78 RAMBØLL HJEMMESIDE 74 Klik i boksen til højre for Deaktiveret for at fjerne markering (hak) og klik på Opdater Side Resultat

79 RAMBØLL HJEMMESIDE 75 I menuen vælges Vandværket Om Vandværket Siden er nu blank uden billede og hvis det ønskes kan man begynde at indlægge data på siden. Da vi ønsker tilføjet et billede skal der kopieres noget tekst i boksen HTML fra siden Generalforsamling i samme menu under Vandværket Klik på Vandværket - Generalforsamling

80 RAMBØLL HJEMMESIDE 76 Vælg Rediger Side Rediger Denne Side Klik på Blyanten for at Redigere indhold Klik på HTML

81 RAMBØLL HJEMMESIDE 77 Marker teksten og tryk på CTRL + C for at kopiere eller højre klikke på det markerede og vælge Copy (Kopier) og derefter kan der klikkes på Annuller Teksten er nu gemt i udklipsholderen i Windows. Vælg nu igen menuen Vandværket Om Vandværket

82 RAMBØLL HJEMMESIDE 78 Vælg Rediger Side Rediger Denne Side Klik på Blyanten for at Redigere indhold

83 RAMBØLL HJEMMESIDE 79 Klik på HTML Marker teksten og klik på CTRL + V eller højreklik på den markerede tekst og vælg Paste (Sæt ind)

84 RAMBØLL HJEMMESIDE 80 Klik på Gem Jeg vil gerne have billedet til at strække sig over hele skærmen, så jeg skal vælge en boks/panel at have billedet i. Klik på symbol der peger i 4 retninger og vælg Til SliderFullPane

85 RAMBØLL HJEMMESIDE 81 Der skal nu indsættes et nyt modul under modulet med billedet. Vælg Moduler Tilføj Ny modul Brug rullepanel nedenunder til at rulle til højre til modul HTML fremkommer. Dernæst trækkes boksen med modulet ned under billedet og der slippes med musen.

86 RAMBØLL HJEMMESIDE 82 Vælg Rediger Side Rediger Denne Side Klik på symbol der peger i 4 retninger og vælg ContentPane Du kan nu vælge at redigere indhold ved at klikke på blyanten mv.

87 RAMBØLL HJEMMESIDE BILLEDER TIL BANNER Ønsker du at tilføje et billede til banneret eller udskifte med et andet billede. Du kan vælge at ændre billedet til format/størrelse i pixel på 960 x 200 ellers tager programmet selv udsnit af billedet. Beskrivelse og eksempel på oprettelse af banner filer kan du se i kapitel 7. I princippet kan billedet gemmes i mappen Banner eller billeder det er i princippet ligegyldigt, blot du kan huske filnavn og sti. Vælg Forside i menuen Vælg Rediger Side Rediger Denne Side

88 RAMBØLL HJEMMESIDE 84 Marker Blyant over banneret og vælg Rediger indhold Klik på HTML

89 RAMBØLL HJEMMESIDE 85 Her kan filnavn og sti angives.

90 RAMBØLL HJEMMESIDE POPUP TEKST Til hjemmesiden er der tilføjet et vindue som kan poppe op, når forbrugeren går ind på hjemmesiden, som kun informere om bla. Drift situationen på forsyningen eller anden info. Login og vælg redigeringstilstand på forsiden af hjemmesiden. Klik på Tandhjulet ovenover de 3 tekstbokse på Forsiden Klik på Indstillinger

91 RAMBØLL HJEMMESIDE 87 Der kan indtastes den oplysning, der skal stå i popup vinduet og tekst til knappen samt en Reset knap for Popup. Klik på Opdater, når du er færdig med ændringen/tilføjelsen.

92 RAMBØLL HJEMMESIDE TEKSTBOKSE PÅ FORSIDE Ovenstående 3 tekstbokse på forsiden kan have den udfordring at de ikke er høje nok i forhold til den tekst der indlægges. Det er muligt i HTML boksen at ændre højden, hvis der ikke er plads nok. Det udføres på flg. måde: Log ind på hjemmeside Placer dig på Forsiden Vælg Rediger Side Rediger Denne Side Vi tager udgangspunkt i boksen længst til venstre: Velkommen til Vandby Vandværk

93 RAMBØLL HJEMMESIDE 89 Klik på Blyant og vælg Rediger Indhold Klik på HTML

94 RAMBØLL HJEMMESIDE 90 I linjen med teksten height kan du prøve at ændre 300px til 600px og klikke på Gem Prøv at kontrollere resultatet både på Browseren på din PC samt din Smartphone (Mobiltelefon)

95 RAMBØLL HJEMMESIDE FRIE ØVELSER 12.1 Oprette en bruger i DNN Prøv at oprette 1 til 2 bestyrelsesmedlemmer i Brugerkonti og tildel dem sikkerhedsrollen Bestyrelsesmedlemmer Tilpas mappe strukturen i File manager Prøv at tilpasse mappe strukturen i Filemanageren med de mapper, som du har behov for Opload pdf-filer og billeder i Filmanager Prøv at oploade pdf-filer og evt. billeder via Filmanageren i de tilhørende mapper på hjemmesiden Tilpas tekst på hjemmesiden og link til pdf-filer og billeder oploadet fra øvelse 6.4 Prøv at tilpasse en eller flere sider mht. tekst og gør den så kortfattet som muligt og link til de oploadede pdf-filer gerne dine egne Link til andre hjemmesider Prøv at oprettet et link til f.eks. eller Link til Prøv at oprette link til en Send nyhedsbrev Prøv at sende et nyhedsbrev til de oprettede bestyrelsesmedlemmer Opload dokument Prøv at oploade dokument til Information - Dokumenter