BRUGERVEJLEDNING RAMBØLL HJEMMESIDE

Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Dato Maj 2015 BRUGERVEJLEDNING RAMBØLL HJEMMESIDE

BRUGERVEJLEDNING RAMBØLL HJEMMESIDE Revision 06 Dato 2015-05-19 Udarbejdet af JNN Kontrolleret af LKN Godkendt af Beskrivelse JNN Brugervejledning til hjemmeside til forsyninger Ref. Rambøll Englandsgade 25 DK-5100 Odense C T +45 6542 5800 F +45 6542 5999 www.ramboll.dk

RAMBØLL HJEMMESIDE INDHOLD 1. Velkommen til Rambøll Hjemmeside 1 2. Teknik 1 3. Opstart 2 4. Log ind 4 4.1 Rediger side 4 4.2 View mode 6 4.3 Layout mode 6 4.4 Rediger indhold af side/modul 8 4.5 Øvelse 9 4.6 Rediger indstillinger af modul 10 5. Menuen i dotnetnuke 14 5.1 Administrator 14 5.1.1 Website indstillinger 16 5.1.1.1 Fanen Grundindstillinger 16 5.1.1.1.1 Detaljer for websted 16 5.1.1.1.2 Webside marketing 17 5.1.1.1.3 Udseende 17 5.1.1.2 Fanen Avancerede indstillinger 18 5.1.1.2.1 Sidehåndtering 19 5.1.1.2.2 Sikkerheds indstillinger 19 5.1.1.2.3 Betalingsindstillinger 19 5.1.1.2.4 Tilgængeligheds indstillinger 20 5.1.1.2.5 Typografi 20 5.1.1.3 Bruger Konto Indstillinger 20 5.1.1.3.1 Registrering Indstillinger 21 5.1.1.3.2 Log ind indstillinger 21 5.1.1.3.3 Profil Indstillinger 22 5.2 Sider 22 5.2.1 Indstilling af side 23 5.2.1.1 Fælles 24 5.2.1.2 Rettigheder 24 5.2.1.3 Moduler 24 5.2.1.4 SEO 25 5.2.1.5 Metatags 25 5.2.1.6 Udseende 26 5.2.1.7 Link 26 5.3 Sikkerhedsroller 27 5.4 Brugerkonti 28 5.4.1 Håndter bruger bagrund 29 5.4.2 Håndter roller for denne bruger 29 5.4.3 Håndter adgangskode 30 5.4.4 Håndter profil 30 5.4.4.1 Name (Navn) 30 5.4.4.2 Address details (Adresse detaljer) 31 5.4.4.3 Contact information (Kontakt information) 31 5.4.4.4 Preferences (Indstillinger) 32 5.5 Udvidelser 32 JNN

RAMBØLL HJEMMESIDE 5.6 Sprog 32 5.7 Nyhedsbreve 33 5.8 File Management 34 5.8.1 Øvelser Opret mapper 35 5.8.2 Opload filer (kopier filer fra PC til hjemmeside) 36 5.8.3 Filhåndtering 38 5.8.3.1 Download 39 5.8.3.2 Rename (Omdøb) 39 5.8.3.3 Copy (Kopier) 40 5.8.3.4 Move (Flyt) 41 5.8.3.5 Delete 42 5.8.3.6 View Properties (Vis egenskaber) 42 5.8.3.7 Get URL 43 5.8.4 Opret genvej (URL) 44 6. Opload PDF-dokument og opret genvej samtidigt 47 7. Billeder og logo 54 7.1 Tilpasning af billeder til bannerbrug 54 7.1.1 Generelt 54 7.1.2 Procedure 54 7.2 Fremstilling af banner og indsættelse af billeder 59 7.2.1 Procedure 59 7.3 Ændring af logo og med gennemsigtigt billede 64 7.3.1 Procedure 64 7.4 Ændring af logo og med en anden baggrundsfarve end hvid 69 8. Frie øvelser 73 8.1 Flytte en undermenu fra et menupunkt til et andet menupunkt 73 8.2 Oprette en bruger i DNN 73 8.3 Tilpas menustrukturen i Filmanager 73 8.4 Opload pdf-filer og billeder i Filmanager 73 8.5 Tilpas tekst på hjemmesiden og link til pdf-filer og billeder oploadet fra øvelse 6.4 73 8.6 Link til andre hjemmesider 73 8.7 Link til e-mail 73 8.8 Send nyhedsbrev 73 8.9 Opload dokument 73 JNN

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 e-mails til bestyrelse/personale med vandværkets domænenavn. Domænenavnet til e-mails 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 e-mails, 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/emaile/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.

RAMBØLL HJEMMESIDE 2 3. OPSTART Start din internetbrowser, f.eks. Internet Explorer og indtast adressen på din hjemmeside, f.eks. http://kursus8.vandnet.dk. 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.

RAMBØLL HJEMMESIDE 3 Under menuen findes et Banner i størrelsen 193 pixels i højden og 984 pixels i bredden. Under Banneret er der en grå bjælke som indeholder "brødkrummer", der viser hvor henne du er i menu-strukturen. Årsagen til navnet "brødkrummer" findes i eventyret Hans og Grethe, der viser et "spor", hvor brugeren er på hjemmesiden. På nuværende tidspunkt er du på Forside. Til højre i den grå bjælke er der et søgefelt, så der er mulighed for, at søge information i hjemmesidens indhold. Under den grå bjælke vises siden, du er på, som i dette eksempel er Forside. En side kan bestå af flere moduler (kasser) med hver sin overskrift og indhold, f. eks indeholder Forside modulerne: Forside Bestyrelsen Rambøll Danmark A/S

RAMBØLL HJEMMESIDE 4 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 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.

RAMBØLL HJEMMESIDE 5 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. Klik på Rediger Denne Side 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

RAMBØLL HJEMMESIDE 6 4.2 View mode Klik på Rediger side i øverste højre hjørne. Klik på Luk Redigeringstilstand 4.3 Layout mode Klik på Rediger side i øverste højre hjørne.

RAMBØLL HJEMMESIDE 7

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

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 ovenfor. Bagefter klikke i rullepanelet til højre, så du kommer længere ned på redigeringssiden.

RAMBØLL HJEMMESIDE 10 Klik på Gem for at gemme ændringerne. 4.6 Rediger indstillinger af modul 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

RAMBØLL HJEMMESIDE 11 Under fanen Modul indstillinger kan der bla. Ændres navn/overskrift på modul og om modulet skal vise på alle sider mv. Under fanen Rettigheder kan redigeres/tildeles hvem som skal have kigge og redigeringsrettigeder.

RAMBØLL HJEMMESIDE 12 Under fanen Side indstillinger kan side indstillinger angives. Rul ned i bunden af siden og klik på Opdater når dine tilpasninger er udført.

RAMBØLL HJEMMESIDE 13 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 Udover at Redigere indhold og Indstillinger kan du også her vælge Slet, hvis du ønsker at slette modulet på siden.

RAMBØLL HJEMMESIDE 14 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 Peg på Admin Du kan nu enten vælge at klikke på:

RAMBØLL HJEMMESIDE 15 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.

RAMBØLL HJEMMESIDE 16 5.1.1 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 5.1.1.1 Fanen Grundindstillinger Under Fanen Grundindstillinger er der 3 undergrupper: Detaljer for websted Webside marketing Udseende 5.1.1.1.1 Detaljer for websted

RAMBØLL HJEMMESIDE 17 Her er det muligt at ændre titel på hjemmeside samt evt. Ophavsret, som vises nederst på siden. 5.1.1.1.2 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. 5.1.1.1.3 Udseende

RAMBØLL HJEMMESIDE 18 Her kan du vælge et logo og evt. oploade dit eget logo. 5.1.1.2 Fanen Avancerede indstillinger Under Fanen Avancerede indstillinger kan du vælge mellem Sidehåndtering Sikkerhedsindstillinger Betalingsindstillinger Tilgængeligheds indstillinger

RAMBØLL HJEMMESIDE 19 5.1.1.2.1 Sidehåndtering Her kan bla. angives en opstartside, som kaldes en splashside samt hvilken side der er "Hjem" side (Hans og Grethe). 5.1.1.2.2 Sikkerheds indstillinger Her kan angives administrator. 5.1.1.2.3 Betalingsindstillinger Denne funktion vil umiddelbart ikke blive benyttet af en forsyning.

RAMBØLL HJEMMESIDE 20 5.1.1.2.4 Tilgængeligheds indstillinger Her tilpasses Tilgængeligheds indstillinger. Dette er normalt indstillet fra Rambøll og behøves derfor ikke at blive tilpasset. 5.1.1.2.5 Typografi Typografi Denne funktion bør ikke benyttes af forsyningen. 5.1.1.3 Bruger Konto Indstillinger

RAMBØLL HJEMMESIDE 21 5.1.1.3.1 Registrering Indstillinger Angiver den tilladte registreringsmetode for denne hjemmeside. 5.1.1.3.2 Log ind indstillinger

RAMBØLL HJEMMESIDE 22 5.1.1.3.3 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) 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.

RAMBØLL HJEMMESIDE 23 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". 5.2.1 Indstilling af side Klik på Forside for at tilpasse indstillinger for denne side.

RAMBØLL HJEMMESIDE 24 5.2.1.1 Fælles Her kan navn på siden rettes og om den skal medtages i menu mv. 5.2.1.2 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. 5.2.1.3 Moduler Oversigt over moduler på siden.

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

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

RAMBØLL HJEMMESIDE 27 5.3 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. e-mail 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.

RAMBØLL HJEMMESIDE 28 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 e-mail. 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

RAMBØLL HJEMMESIDE 29 5.4.1 Håndter bruger bagrund Fanen Håndter bruger baggrund indeholder stamdata på bruger 5.4.2 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

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

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

RAMBØLL HJEMMESIDE 32 5.4.4.4 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

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

RAMBØLL HJEMMESIDE 34 5.8 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.

RAMBØLL HJEMMESIDE 35 5.8.1 Ø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.

RAMBØLL HJEMMESIDE 36 5.8.2 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

RAMBØLL HJEMMESIDE 37 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.

RAMBØLL HJEMMESIDE 38 Takstbladet er nu overført fra din PC til hjemmesiden. 5.8.3 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.

RAMBØLL HJEMMESIDE 39 Du kan også højreklikke på filen og få flg.: 5.8.3.1 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 5.8.3.2 Rename (Omdøb) Klik på knappen Rename Du kan nu ændre navnet på filen.

RAMBØLL HJEMMESIDE 40 5.8.3.3 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

RAMBØLL HJEMMESIDE 41 5.8.3.4 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.

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

RAMBØLL HJEMMESIDE 43 5.8.3.7 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.

RAMBØLL HJEMMESIDE 44 5.8.4 Opret genvej (URL) Nu skal der oprettes en genvej til takstbladet, så forbrugeren kan se siden på hjemmesiden. Vælg Information 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. Klik på kæden for at oprette genvej.

RAMBØLL HJEMMESIDE 45 Klik på det lille ikon ud for URL 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.

RAMBØLL HJEMMESIDE 46 Det er frivilligt om du vil benytte Tooltip, som oplyser, hvad det er der peges på med musen. 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?

RAMBØLL HJEMMESIDE 47 6. OPLOAD PDF-DOKUMENT OG OPRET GENVEJ SAMTIDIGT Vælg den side på hjemmeside, hvor genvej skal oprettes, f.eks. Information Takster Klik på Rediger Side Rediger Denne Side oppe i højre hjørne

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

RAMBØLL HJEMMESIDE 49 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

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

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

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

RAMBØLL HJEMMESIDE 53 Klik på Gem

RAMBØLL HJEMMESIDE 54 7. BILLEDER OG LOGO 7.1 Tilpasning af billeder til bannerbrug 7.1.1 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 GIMP 2 som er et program der kan hentes gratis på nettet. 7.1.2 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 984 pixel i bredden og 193 pixel i højden. Logoet som vi kommer til senere, har størrelsen 990 pixel i bredden og 112 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.

RAMBØLL HJEMMESIDE 55 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.

RAMBØLL HJEMMESIDE 56 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.

RAMBØLL HJEMMESIDE 57 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 193 pixel det er med andre ord 262 minus193 = 69 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 193 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

RAMBØLL HJEMMESIDE 58 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 193 i begge bokse. Prøv at starte med at skrive 193 i den højre boks som før og læg mærke til at der nu står Ny størrelse: 193 x 322 det er jo forkert, fordi højden så vil blive 322 pixel hvor vi ønsker 193 pixel.

RAMBØLL HJEMMESIDE 59 Skriv nu 193 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 193 Nu har billedet fået den ønskede højde på de 193 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 7.2.1 Procedure Som tidligere nævnt er størrelsen på banneret: 984 pixel i bredden og 193 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

RAMBØLL HJEMMESIDE 60 Her fremkommer nedenstående: Klik i Pixel og sæt bredde til 984 og højde til 193 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:

RAMBØLL HJEMMESIDE 61 Klik i Pixel, og fjern markeringen i: Bevar højde-bredde-forhold. Sæt Vandret til 984 og Lodret til 193 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

RAMBØLL HJEMMESIDE 62 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.

RAMBØLL HJEMMESIDE 63 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

RAMBØLL HJEMMESIDE 64 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 7.3 Ændring af logo og med gennemsigtigt billede 7.3.1 Procedure Fremgangsmåden til fremstilling af banner kan også anvendes hvis du vil fremstille et helt nyt logo. Her kan der som regel både være tale om noget grafisk, altså en form for tegning el. lign., eller ét langt smalt billede. Vil du bruge et udsnit af et billede skal du derfor sørge for at motivet er stort nok til at din beskæring kan få den rette størrelse. Det vil vi ikke gå nærmere i dybden med her. Hvis man ud over dette bare vil have forsyningens navn skrevet i logoet, kan Paint også anvendes til dette formål, ved at vælge: Indsæt tekst vist med et ikon hvor der er et stort A på. Det vi vil koncentrere os om i denne beskrivelse, er at ændre det standard-logo som ligger øverst i Rambølls Hjemmeside løsning, og indsætte eget logo med navn, hvor det underliggende område skal gøres gennemsigtigt dette kan nemlig ikke udføres i Paint.

RAMBØLL HJEMMESIDE 65 Som tidligere nævnt er størrelsen på logoet 990 pixel i bredden og 112 pixel i højden. I dette eksempel benyttes gratis programmet GIMP: GNU Image Manipulation Program. Programmet er såkaldt free software (gratis), og kan hentes på nettet. Den nuværende version som anvendes her er version 2.8. GIMP 2 Som det ses på ovenstående billede åbnes Gimp i flere dele. Til venstre åbnes en værktøjskasse med alle mulige værktøjer til rådighed. Til højre åbnes en pensel- og farve- menu, hvor man vælger pensler, mønstre og farveovergange. I midten åbnes dit arbejdsområde, hvor der øverst findes forskellige menuer. Vi starter med arbejdsområdet i midten: Inden vi går i gang, skal vi have et logo at arbejde videre på. Gå ind på din hjemmeside og højre klik på det tomme logo foroven og vælg: Gem billede som Gem billedet/ logoet på din harddisk, gerne i en mappe med navnet Hjemmeside på skrivebordet og luk browseren.

RAMBØLL HJEMMESIDE 66 Vi kan nu indlæse billedet ved at vælge menuen: Fil og undermenuen: Åbn som lag Grunden til at vi vælger: Åbn som lag er, at vi derved kan have baggrunden (logoet vi lige hentede) liggende i ét lag, mens forsyningens eget logo kan indsættes i et andet lag, og hvis der udover dette f.eks. skal skrives yderligere tekst eller indsættes andre billeder, så får det et tredje lag. På den måde holdes lagene (de enkelte dele) adskilt, mens vi arbejder med vores nye logo. Når vi er tilfreds med det endelige resultat og skal eksportere vores nye logo (se om at eksportere senere), f.eks. i filformatet jpeg (*.jpg), fjernes lagdelingen og resultatet bliver gemt som én fil og kan ikke åbnes som lag igen. Hvis du skal arbejde med logoet over flere omgange hvor computeren f.eks. slukkes, skal du gemme i et af de formater som Gimp foreslår. Herunder ses det tomme logo indlæst i vores arbejdsområde: Vi er nu klar til at sætte vores eget præg på logoet. Det forsyningslogo vi vil indsætte skal nu klargøres efter samme fremgangsmåde som vi anvendte til vores banner, bortset fra at højden skal sættes til 112 pixel, som er den maksimale højde der kan indsættes i det tomme logo. Vi vælger igen fra menuen: Fil og undermenuen: Åbn som lag Udpeg det ønskede logo fra din PC, evt. gemt på skrivebordet i mappen hjemmeside

RAMBØLL HJEMMESIDE 67 Vores forsyningslogo sættes her ind i midten og vi vil flytte det ud til venstre. Fra værktøjskassen i venstre side: 1. Klik på Flytteværktøjet 2. Klik inden i det markerede forsyningslogo Forsyningslogoet kan nu flyttes til venstre med venstre piletast hvis du holder Shift nede imens, går det hurtigere med at flytte.

RAMBØLL HJEMMESIDE 68 Vi har nu placeret vores forsyningslogo hvor vi gerne vil have det til at stå, men nu dækker den hvide baggrund for noget af det tomme logo. Det vil vi gerne gøre gennemsigtigt så det kun er grafikken og teksten i forsyningslogoet som træder frem. 1. Vælg menuen: Farver 2. Vælg undermenuen: Color to Alpha - hvorfor alle menupunkter ikke er oversat til dansk, vides ikke? Som det fremgår at billedet til venstre, er den hvide baggrund i vores forsyningslogo nu vist som en skaktern. Det er fordi den hvide farve er valgt som standard til at blive gjort gennemsigtig. 3. Tryk på knappen OK for at gøre det hvide område transparent.

RAMBØLL HJEMMESIDE 69 Som det fremgår af billedet herover, ses grafikken fra det underliggende lag (det tomme logo) nu gennem vores forsyningslogos baggrund, som jo er gjort gennemsigtig. Hvis vi er tilfredse med resultatet, kan det nye logo nu eksporteres (gemmes) med et passende navn og uploades til hjemmesiden. 7.4 Ændring af logo og med en anden baggrundsfarve end hvid Det kunne jo tænkes at der var en anden farve end hvid som baggrund i ens forsyningslogo. Derfor gennemgår vi lige denne mulighed også. For at vise den udfordring der kan være i at lave en specifik farve gennemsigtig, er der her valgt en højgrøn farve som afviger meget. Find værktøjskassen: 1. Klik på Pipetten Nu ændres musemarkøren til en pipette. 2. Klik med pipetten i det højgrønne område, - uden at berøre den sorte pumpe! 3. Nu skifter farvevælgeren kulør til den højgrønne farve.

RAMBØLL HJEMMESIDE 70 4. Klik i farvevælgeren Nu fremkommer billedet her til højre. Lad farvevælgeren være åben og læg mærke til værdierne i højre side af farvevælgeren. Lad farvevælgeren være åbnet på skrivebordet! 1. Vælg igen, menuen Farver i boksen med arbejdsområdet. Herefter vælges undermenuen: Color to Alpha Nu fremkommer menuen til at gøre baggrunde transparente, igen men denne gang er baggrunden jo ikke hvid. 2. Klik i det hvide område hvor der står: From: to alpha Nedenstående billede, til ændring af farve i alphakanalen, fremkommer nu også på skærmen: 3. Nu kan vi se begge billeder, og indtaste værdierne fra farvevælgeren på samme sted i billedet til ændring af farve i alphakanalen. 4. Klik på knappen OK i billedet til ændring af farve i alphakanalen. 5. Klik på knappen OK i det foregående billede: Color to Alpha 6. Klik til sidst på knappen OK i farvevælgeren. Nu blev baggrunden i det sidste billede med pumpen, også gennemsigtig.

RAMBØLL HJEMMESIDE 71 Til sidst skal vi lige se på lidt af Pensel- og farve- menuen: Foroven i denne menu, kan vi styre lagene. Hvis der klikkes på øjet ud for hvert lag, kan der tændes og slukkes for laget, så det ikke vises i arbejdsområdet. Hvis der klikkes imellem øjet og bjælken, kan lagene låses eller låses op. Hvis der klikkes på bjælken, vælges hvilket lag som skal være aktivt og altså være det lag der arbejdes på lige i øjeblikket. Vi skal nu eksportere (gemme) vores nye logo. 1. Vælg menuen: Fil 2. og undermenuen: Eksporter

RAMBØLL HJEMMESIDE 72 Nu fremkommer menuen: Eksporter billede: Som udgangspunkt foreslås et filnavn med fil- formatet *.PNG Hvis du er tilfreds med dette, skal det ikke ændres. Hvis du vil eksportere til fil- formatet *.JPG skal du skrive: Filnavnet.jpg 3. Indtast i dette tilfælde: VandbyLogo.jpg Selv om det fremgår forneden, at der er er valgt *.PNG behøver du ikke at ændre dette det vigtige er at det rigtige filformat er skrevet i Navn: så så bliver det nye logo eksporteret i det ønskede format! 4. Klik nu på knappen Eksporter nedenstående menu fremkommer: 5. Klik igen på knappen Eksportér Nu er vores nye logo eksporteret og gemt i det ønskede filformat og det færdige resultat ses herunder.

RAMBØLL HJEMMESIDE 73 8. FRIE ØVELSER 8.1 Flytte en undermenu fra et menupunkt til et andet menupunkt Prøv at trække Dokumenter fra menuen Information til Bestyrelse. Prøv derefter at trække den tilbage igen. 8.2 Oprette en bruger i DNN Prøv at oprette 1 til 2 bestyrelsesmedlemmer i Brugerkonti og tildel dem sikkerhedsrollen Bestyrelsesmedlemmer. 8.3 Tilpas menustrukturen i Filmanager Prøv at tilpasse menustrukturen i Filmanageren med de mapper, som du har behov for. 8.4 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. 8.5 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. 8.6 Link til andre hjemmesider Prøv at oprettet et link til f.eks. www.fvd.dk eller www.ramboll.dk. 8.7 Link til e-mail Prøv at oprette link til en e-mail. 8.8 Send nyhedsbrev Prøv at sende et nyhedsbrev til de oprettede bestyrelsesmedlemmer. 8.9 Opload dokument Prøv at oploade dokument til Information - Dokumenter