Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Dato Oktober 2014 BRUGERVEJLEDNING RAMBØLL HJEMMESIDE
BRUGERVEJLEDNING RAMBØLL HJEMMESIDE Revision 06 Dato 2014-10-01 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 3 4.1 Rediger side 4 4.2 View mode 5 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 15 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 18 5.1.1.2.2 Sikkerheds indstillinger 18 5.1.1.2.3 Betalingsindstillinger 19 5.1.1.2.4 Tilgængeligheds indstillinger 19 5.1.1.2.5 Typografi 19 5.1.1.3 Bruger Konto Indstillinger 20 5.1.1.3.1 Registrering Indstillinger 20 5.1.1.3.2 Log ind indstillinger 20 5.1.1.3.3 Profil Indstillinger 21 5.2 Sider 21 5.2.1 Indstilling af side 22 5.2.1.1 Fælles 23 5.2.1.2 Rettigheder 23 5.2.1.3 Moduler 23 5.2.1.4 SEO 24 5.2.1.5 Metatags 24 5.2.1.6 Udseende 25 5.2.1.7 Link 25 5.3 Sikkerhedsroller 26 5.4 Brugerkonti 27 5.4.1 Håndter bruger bagrund 28 5.4.2 Håndter roller for denne bruger 28 5.4.3 Håndter adgangskode 29 5.4.4 Håndter profil 29 5.4.4.1 Name (Navn) 29 5.4.4.2 Address details (Adresse detaljer) 30 5.4.4.3 Contact information (Kontakt information) 30 5.4.4.4 Preferences (Indstillinger) 31 5.5 Udvidelser 31 JNN
RAMBØLL HJEMMESIDE 5.6 Sprog 31 5.7 Nyhedsbreve 32 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. Billeder og logo 47 6.1 Tilpasning af billeder til bannerbrug 47 6.1.1 Generelt 47 6.1.2 Procedure 47 6.2 Fremstilling af banner og indsættelse af billeder 52 6.2.1 Procedure 52 6.3 Ændring af logo og med gennemsigtigt billede 57 6.3.1 Procedure 57 6.4 Ændring af logo og med en anden baggrundsfarve end hvid 62 7. Frie øvelser 66 7.1 Flytte en undermenu fra et menupunkt til et andet menupunkt 66 7.2 Oprette en bruger i DNN 66 7.3 Tilpas menustrukturen i Filmanager 66 7.4 Opload pdf-filer og billeder i Filmanager 66 7.5 Tilpas tekst på hjemmesiden og link til pdf-filer og billeder oploadet fra øvelse 6.4 66 7.6 Link til andre hjemmesider 66 7.7 Link til e-mail 66 7.8 Send nyhedsbrev 66 7.9 Opload dokument 66 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 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
RAMBØLL HJEMMESIDE 4 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. 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.
RAMBØLL HJEMMESIDE 5 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 4.2 View mode Klik på Rediger side i øverste højre hjørne.
RAMBØLL HJEMMESIDE 6 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. Klik på Gem for at gemme ændringerne.
RAMBØLL HJEMMESIDE 10 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. Klikkes der et andet sted i menuerne og der dukker en ny side op kan du tilsvarende redigere siderne som ovenstående.
RAMBØLL HJEMMESIDE 13 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å: Fælles Indstillinger Avancerede indstillinger Bogmærkede instillinger ingen værktøjer pt.
RAMBØLL HJEMMESIDE 15 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. 5.1.1 Website indstillinger Klik på Website indstillinger
RAMBØLL HJEMMESIDE 16 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 Her er det muligt at ændre titel på hjemmeside samt evt. Ophavsret, som vises nederst på siden.
RAMBØLL HJEMMESIDE 17 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 Her kan du vælge et logo og evt. oploade dit eget logo.
RAMBØLL HJEMMESIDE 18 5.1.1.2 Fanen Avancerede indstillinger Under Fanen Avancerede indstillinger kan du vælge mellem Sidehåndtering Sikkerhedsindstillinger Betalingsindstillinger Tilgængeligheds indstillinger 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.
RAMBØLL HJEMMESIDE 19 5.1.1.2.3 Betalingsindstillinger Denne funktion vil umiddelbart ikke blive benyttet af en forsyning. 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.
RAMBØLL HJEMMESIDE 20 5.1.1.3 Bruger Konto Indstillinger 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 21 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 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". 5.2.1 Indstilling af side
RAMBØLL HJEMMESIDE 23 Klik på Forside for at tilpasse indstillinger for denne side. 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 24 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 25 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 26 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. 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.
RAMBØLL HJEMMESIDE 27 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 28 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 29 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 30 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 31 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 32 Standard er Engelsk/amerikansk og hjemmesiden er dansk. Skal ikke ændres! 5.7 Nyhedsbreve Klik på Nyhedsbreve
RAMBØLL HJEMMESIDE 33 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å globus med kæde 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 destination (Target) og jeg anbefaler, at Takstbladet(PDF dokumentet) åbnes i et nyt vindue (New Window), 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. Klik på Insert (Indsæt), når du har foretaget dine valg.
RAMBØLL HJEMMESIDE 46 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. BILLEDER OG LOGO 6.1 Tilpasning af billeder til bannerbrug 6.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. 6.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 48 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 49 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 50 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 Tryk på OK og gem billedet nu er det klar til at indgå i vores banner.
RAMBØLL HJEMMESIDE 51 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 52 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. 6.2 Fremstilling af banner og indsættelse af billeder 6.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 53 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 54 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 55 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 56 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 57 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 6.3 Ændring af logo og med gennemsigtigt billede 6.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 58 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 59 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 60 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 61 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. 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.
RAMBØLL HJEMMESIDE 62 Hvis vi er tilfredse med resultatet, kan det nye logo nu eksporteres (gemmes) med et passende navn og uploades til hjemmesiden. 6.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. 4. Klik i farvevælgeren