Slik bygger du skolens nettside

Transkript

1 Brukerveiledning EPiServer 7.5 Versjon 3.0 (juni 2016)

2

3 Innholdsfortegnelse 1. Innledning Om brukerveiledningen Roller Komme i gang Logge på Hvordan navigere i EPiServer Forsiden Opprette innhold Nyhet Artikkel Kalenderhendelse Kontakt oss Søkeside Nyhetsarkiv Redigere innhold Enkel redigeringsvisning Alle egenskaper Alle egenskaper på forsiden Lagre, forhåndsvise og publisere innhold Lagring Forhåndsvisning Publisering Avpublisering Verktøylinjen i brødtekstfeltet Formatere tekst Opprette lenker Opprette anker Blokker Opprette blokk Gjenbruk blokken på flere sider Endre blokkens størrelse Faktaboks forside Faktaboks oransje Faktaboks Bildegalleri Dokumentliste Relevante lenker Kampanje Kalender... 47

4 Versjonsnr. 2.2 Side Aktuelt fra Osloskolen Sosiale medier Skjema Bruk av bilder Bildebibliotek i ressursfeltet Obligatorisk alternativtekst på bilder Gode bildestørrelser Legg til bilde Redigere bilde Ekstra forsidebilde til første nyhetssak Film Legg til film på nettsiden... 65

5 Versjonsnr. 2.2 Side 3 1. Innledning 1.1 Om brukerveiledningen Denne veiledningen viser hvordan publiseringssystemet for skolenes nettsider, EPiServer, fungerer. Veiledningen er rettet mot webredaktører og andre som har ansvar for skolens nettsider. Ønsker du tilgang til en mer detaljert brukerveiledning, benytt EPiServers egen redaktørhåndbok: Har du spørsmål knyttet til EPiServer, eller trenger tips til hvordan du skal bygge opp skolenettsiden, send e-post til skoleweb@ude.oslo.kommune.no eller ring tlf Roller Det er ulike rettigheter tilknyttet de rollene som logger seg på EPiServer. Skolens IKTansvarlig kan tildele redigeringsrettigheter til skolens nettsider Webadministrator Rettigheten tildeles ved medlemskap i gruppen <skolekode>-re-web-admin Kun for skolens webredaktør Har fulle rettigheter på sin skoles nettside Kan opprette, publisere, redigere og slette innhold Webredaktør Rettigheten tildeles ved medlemskap i gruppen <skolekode>-re-web-redaktor For ansatte som skal ha fulle rettigheter, men som ikke er skolens webredaktør Kan opprette, publisere, redigere og slette innhold Webforfatter Rettigheten tildeles ved medlemskap i gruppen <skolekode>-re-web-forfatter For ansatte som skal bidra med innhold på skolens nettside uten å kunne publisere innholdet Kan opprette og redigere innhold Kan ikke publisere eller slette innhold Innhold opprettet av en webforfatter må godkjennes og publiseres av en med webadministrator-/webredaktørrettigheter.

6 Versjonsnr. 2.2 Side 4 2. Komme i gang 2.1 Logge på For å logge på EPiServer for å redigere skolenettsiden, gjør du følgende: 1. Åpne nettleseren (helst Chrome), skriv inn skolens adresse (URL)/episerver Eksempel: kjelsas.osloskolen.no/episerver elvebakken.vgs.no/episerver I påloggingsvinduet angir du dittbrukernavn@osloskolen.no og passord, klikk deretter logg på. 2. Via nedtrekksmenyen øverst i skjermbildet kan du navigere mellom de ulike modulene som er integrert i EPiServer. Hvilken rolle du er pålogget som, bestemmer hvilke moduler du har tilgang til. Her kan du også logge deg av EPiServer når du er ferdig med å redigere siden. 3. For å redigere nettsiden: Klikk CMS rediger. 4. Du er nå klar til å jobbe med siden. 2.2 Hvordan navigere i EPiServer Du navigerer i EPiServer ved hjelp av to mappestrukturer: Navigasjonsfeltet (sidetreet) på venstre side og ressursfeltet (medier og blokker) på høyre side av skjermbildet. For mer om ressursfeltet, se 9.1 bildebibliotek i ressursfeltet Navigasjonsfelt: Sidetre Skolens nettside er strukturert i en sidetrestruktur. Du finner knappen som viser/skjuler navigasjonsfeltet (sidetreet) øverst i venstre hjørne. Bruk tegnestiften for å feste sidetreet, slik at du kan jobbe videre på nettsiden og fortsatt se feltet. Sidetreet består av mapper med underliggende artikler, i tillegg til søkeside, nyhetsarkiv (og nyheter), kalender og kontakt oss.

7 Versjonsnr. 2.2 Side 5 Nettidens menystruktur består av tre nivåer: - Menypunkter (mapper) - Underkategorier (mapper) - Innholdssider (artikler) Mappene Om skolen, Fagtilbud osv. utgjør menypunkter i megamenyen på nettsiden (maks fem stk.). Behold i størst mulig grad menystrukturen slik den er satt opp. Under hvert menypunkt er det plass til fem underkatergorier (mapper). Per underkatergori er det plass til fem innholdssider (artikler). Når du publiserer en mappe/side på ett av de tre nivåene, opprettes den automatisk i menystrukturen på nettsiden. Oppretter du imidlertid en underartikkel til en artikkel, blir den ikke synlig i menystrukturen (kun ved søk). Da må den lenkes opp. Det er mulig å fjerne mapper og sider fra menystrukturen, uten å slette dem fra sidetreet. Se 6.4. Avpublisering Symboler i sidetreet Følgende symboer kan komme til syne i sidetresturen ved siden av en mappe eller en side: Siden/mappen er ikke publisert. Siden/mappen er utløpt. Siden/mappen blir redigert av en bruker. Publiseringen av siden/mappen er tidsstyrt Flytte, kopiere og slette sider og mapper i strukturen Flytte sider Som standard plasseres den siden/mappen som sist ble opprettet, øverst i trestrukturen. For å endre rekkefølge trekker du siden/mappen fra nåværende plassering i sidetreet over til ønsket plassering ved hjelpe av dra og slipp. Obs! Nyheter i nyhetsarkivet flytter seg ikke på forsiden vha. en plassendring i sidetrestrukturen. For å trekke opp en gammel nyhetssak på forsiden, må du først

8 Versjonsnr. 2.2 Side 6 oppdatere endret dato, deretter sortere undersider (selve nyhetssaken) etter endringsdato (nyeste først). Se oppdater endret dato og sorter undersider (5.2.4). For å flytte en side/mappe fra én mappe til en annen betytt enten dra og slipp, eller velg klipp ut i kontekstmenyen. Merk deretter mappen du vil flytte siden til, velg lim inn. Du kan også klippe ut sider ved hjelp av Ctrl+X og lime inn ved hjelp av Ctrl+V på tastaturet. Kopiere sider Merk siden du vil flytte, og velg kopier i kontekstmenyen. Merk deretter mappen du vil kopiere siden til, og velg lim inn. Du kan også kopiere sider ved hjelp av Ctrl+C og lime inn ved hjelp av Ctrl+V på tastaturet. En identisk kopi av siden blir plassert på det valgte stedet, klar til redigering. Slette sider Du sletter sider/mapper fra nettsiden ved å fjerne dem fra trestrukturen. Når du flytter innhold til papirkurven, vil det ikke lenger være publisert på webområdet. 1. Velg innholdet du vil fjerne fra sidetreet. 2. Velg flytt til papirkurv i kontekstmenyen. Hvis annet innhold er koblet til siden du ønsker å fjerne, vil en dialogboks vise hvilket innhold som inneholder disse koblingene. Fjern koblingene til innholdet du ønsker å fjerne, før du putter innholdet i papirkurven Gjenopprett innhold fra papirkurven Når du fjerner innhold fra nettsiden, sendes mappen/siden og alle underliggende elementer til papirkurven. For å se innholdet i papirkurven, klikk på gadget-knappen og deretter vis papirkurv. Du får da opp en liste over innholdet som er blitt slettet de to siste dagene. For å gjenopprette innhold fra papirkurven, hold musepekeren over det elementet du vil gjenopprette. Gjenopprett vises da til høyre i skjermbildet. Bekreft gjenopprettingen, og innholdet publiseres på nytt.

9 Versjonsnr. 2.2 Side 7 3. Forsiden Forsiden er bygget opp av et sett faste elementer. I tillegg kan du legge til innhold som passer for din skole. Det er mulig å plassere en faktaboks eller et kampanjefelt ovenfor nyhetsfeltet, hvis du skal informere om noe i en begrenset tidsperiode. Innlogging til Skoleplattform Oslo Søk Hovedbanner Megameny Kontakt oss Plass til skolens logo Nyhetsfelt Kalender Aktuelt fra Osloskolen Facebook/Instagram Om oss Kontaktinformasjon Følg oss

10 Versjonsnr. 2.2 Side Megameny Megamenyen er plassert øverst på forsiden. Den består av fem menypunkter (mapper), fastsatt av UDA. Det er viktig at alle skoler tilstreber lik struktur, slik at brukerne kan finne samme type innhold på samme sted - uavhengig av skole. Skolen kan fjerne menypunkter som ikke er relevante. For eksempel kan rene ungdomsskoler fjerne menypunktet Aktivitetsskolen. Under hvert menypunkt er det plass til fem underkatergorier (mapper). Per underkatergori er det plass til fem innholdssider (artikler) Nyhetsfelt Nyhetsfeltet viser de tre siste publiserte nyhetene. For å publisere en nyhet i nyhetsfeltet, opprett en ny side under nyhetsarkiv i sidetreet. For å endre rekefølgen på nyhetene på forsiden, se oppdater endret dato og sorter undersider (5.2.4) Om oss Navn og e-post på ansvarlig webredaktør og webredaktør. Endres under nettsideinnstillinger. Se Endre navn på webredaktør Kontaktinformasjon Oppdateres automatisk når du fyller ut siden kontakt oss i sidetreet Følg oss Mulighet for påmelding til nyhetsbrev samt lenker til skolens Facebook, Instagram, Twitter osv. Endres under nettsideinnstillinger. Se 3.3 Alle egenskaper på forsiden Aktuelt fra Osloskolen Fast blokk i høyremarg. "Mater" aktuelle nyhetssaker fra Kalender Fast blokk i høyremarg. Viser de tre neste hendelsene i kalenderen Kontakt oss Oppdateres automatisk når du fyller ut siden for kontakt oss i sidetreet.

11 Versjonsnr. 2.2 Side Skolens logo Bildefelt med plass til skolens logo. Hvis skolen ikke har en logo, skal feltet være tomt. Logoen må være minimum 360x i bredden. Bildet forminskes for å tilpasses bildefeltet, men bør være avlangt for ikke å bli for høyt Hovedbanner Bildefelt med plass til et bilde som profilerer skolen. Bildet må være 1140x i bredden og mellom x i høyden Søk Nettsidens interne søk Innlogging til Skoleplattform Oslo Pålogging for elever, lærere og foresatte til Skoleplattform Oslo.

12 Versjonsnr. 2.2 Side Opprette innhold Osloskolen har hovedsakelig to sidetyper: Nyhet og artikkel. 4.1 Nyhet Publiserte nyheter havner automatisk på nettsidens forside, øverst i nyhetsfeltet. Det er mulig å endre rekkefølgen på nyhetene manuelt, se oppdater endret dato og sorter undersider (5.2.4). For å opprette nyhet: 1. Stå på nyhetsarkiv, velg Ny side. 2. Legg til navn (nyhetens tittel).

13 Versjonsnr. 2.2 Side Legg til hovedbilde, ingress og brødtekst. Alle nyheter må ha en tittel, ingress og hovedbilde. 4. Publiser nyheten. Se 9.3 for gode bildestørrelser til hovedbildet. Hvis bildet på forsiden ikke får et optimalt utsnitt, se 9.6 Ekstra forsidebilde til første nyhetssak. 4.2 Artikkel Artikler benyttes hovedsakelig som innholdsider i megamenyen. For å opprette artikkel: 1. Velg plassering for ny side i sidestrukturen. Artikler i megamenyen må plasseres i en undermappe. 2. Klikk ny side i kontekstmenyen. 3. Velg artikkel.

14 Versjonsnr. 2.2 Side Legg til navn (artiklens tittel). 5. Legg til innhold. Du kan benytte feltene ingress, hovedbilde og brødtekst. I tillegg kan du legge til relevant innhold ved hjelp av blokker. 6. Publiser artikkelen.

15 Versjonsnr. 2.2 Side Kalenderhendelse Kalenderen ligger fast i høyre marg på forsiden, og viser de tre neste hendelsene. Ferie og fridager (skoleruta) publiseres av UDA for alle skoler. I tillegg kan skolene selv legge inn egne kalenderhendelser. Fremgangsmåte: 1. Stå på kalender, velg Ny side. 2. Legg til navn. Navnet blir synlig i sidetreet. Legg til emne. Dette blir hendelsens tittel. 3. Velg starttidspunkt og sluttidspunkt. Hvis hendelsen varer hele dagen, fyller du kun inn dato og huker av for hel dag. 4. Legg eventuelt til hovedbilde, beskrivelse, sted, brødtekst og en relevant blokk. 5. Publiser hendelsen.

16 Versjonsnr. 2.2 Side Kontakt oss På siden kontakt oss legger du inn skolens kontaktinformasjon. Siden er synlig for brukerne via nettsidens megameny, nederst på alle sider og i høyre marg på forsiden. Fyll inn feltene, og klikk publiser Kart over skolens plassering Skolen har to visninger av kart på kontakt oss-siden: Ett kartutsnitt og en visning i full størrelse via åpne kart. Kartet i full størrelse genereres automatisk fra skolens adresse, mens kartutsnittet genereres ved hjelp av bredde- og lengdegrad.

17 Versjonsnr. 2.2 Side Legg til kartutsnitt For å legge til kartutsnitt, gjør du følgene: 1. Klikk på knappen visning av alle egenskaper 2. Velg kontaktinformasjon. 3. Legg inn breddegrad og lengdegrad. 4. Klikk publiser. Skolens bredde- og lengdegrad finner du ved å søke opp adressen på 1. Skriv inn skolens adresse, klikk søk. 2. Du finner bredde- og lengdegraden i URLen. 3. I eksempelet er breddegraden , mens lengdegraden er , Søkeside Søkesiden må publiseres for å tilgjengeliggjøre søket for brukerne (forstørrelsesglass øverst på alle sider). På søkesiden listes det opp relevante treff basert på det søket som er gjort. Brukerne kan søke på nytt ved hjelp av søkefeltet eller filtrere på dato og type.

18 Versjonsnr. 2.2 Side Nyhetsarkiv Nyhetsarkivet har to oppgaver: Det genererer nyheter til nyhetsblokken på forsiden, og gir brukeren en helhetlig oversikt over hvilke nyheter som tidligere er publisert. Brukerne får tilgang til nyhetsarkivet vha. nyhetsarkiv-knappen på forsiden. Brukerne kan søke i nyhetsarkivet ved hjelp av søkefeltet, eller filtrere på dato.

19 Versjonsnr. 2.2 Side Redigere innhold I EPiServer kan du redigere innhold på to måter: Gjennom enkel redigeringsvisning og ved visning av alle egenskaper. Når du oppretter en side kommer du automatisk inn i enkel redigeringsvisning. Øverst til høyre i skjermbildet kan du bytte mellom de to visningene: Visning av alle egenskaper Enkel redigeringsvisning 5.1 Enkel redigeringsvisning I enkel redigeringsvisning kan du redigere tekst og sette inn bilder direkte på en side eller i en blokk. Du kan jobbe med innholdet, samtidig som du ser hvordan resultatet blir. 1. Stå på siden som du ønsker å redigere. 2. Klikk på ønsket felt. Egenskapsnavnet på feltet vises når du holder musepekeren over. Du kan også opprette en blokk (f.eks. en faktaboks eller dokumentliste) og sette den inn på siden du redigerer. Se opprett blokk. 3. Foreta endringene på siden. 4. Publiser siden. Når du redigerer brødtekst, klikk utenfor brødtekstfeltet for å se hvordan avstanden mellom avsnittene blir.

20 Versjonsnr. 2.2 Side Alle egenskaper I visningen alle egenskaper har du tilgang til alle de egenskapene som finnes på en side eller en blokk, også de som ikke er synlige «front-end» på nettsiden. Bildet nedenfor viser brukergrensesnittet for alle egenskaper på en side Toppmenyen I toppmenyen kan du endre følgende innstillinger: Navn Navn på siden er påkrevd, du kan ikke la dette feltet stå tomt. Ved navneendring endres tittel, navn i sidetreet og i menyene. Obs! Ved endring av navn husk også å endre URL. Navn i URL-adresse Når du angir navn på siden vil EPiServer automatisk opprette en adresse basert på det navnet du har gitt siden. Hvis du endrer navnet på siden må du fjerne gammel URL. Vær oppmerksom på at brukere kan ha opprettet en lenke til siden din. Disse lenkene vil ikke fungere hvis du endrer navnet. Interne lenker på egen nettside vil ikke påvirkes. For å endre URL: 1. Klikk endre 2. Fjern URL-en og la feltet stå tomt 3. Klikk publiser EPiServer oppretter da en ny URL basert på sidens navn.

21 Versjonsnr. 2.2 Side 19 Enkel adresse Sidens URL er basert på sidens navn samt hvor i sidestrukturen den befinner seg. I noen sammenhenger (f.eks. ved profilering av en side) er det hensiktsmessig med en kortere URL. Enkel adresse vil fungere i tillegg til original URL. Eksempel: Skriver du /17mai i feltet, blir ny URL: (skolensurl)/17mai. Vis i navigasjon Ved å fjerne avhukingen for vis i navigasjon blir siden «usynlig» i megamenyen. Brukerne kan fortsatt nå siden via en lenke eller søk, og den vil fortsatt være synlig i sidetreet ditt. Denne funksjonen kan for eksempel benyttes hvis du oppretter en svarside til et skjema. Håndtere utløp og arkivering Hvis du ønsker at en side/mappe skal fjernes fra nettstedet, men fortsatt være synlig i sidetreet, velg håndter utløp og arkivering via verktøyknappen. Klikk utløp: Nå. Denne funksjonen kan for eksempel benyttes når en side eller en mappe skal fjernes i en begrenset periode.

22 Versjonsnr. 2.2 Side SEO: Søkeoptimalisering Søkeoptimalisering handler om å skrive slik at man får treff i søkemotorene (f.eks. Google). En generell regel er: Skriver du godt for brukerne, skriver du også godt for søkemotorene. Bruk ord og uttrykk som leseren bruker i dagligtale. Skriv gode overskrifter som klart og tydelig sier hva teksten handler om. Bruk nøkkelord som brukerne faktisk søker etter. I tillegg kan man gjøre noen tekniske grep for å få bedre treff. Metatittel Det de besøkende ser i fanen øverst i nettleseren når de besøker siden. Metatittelen blir også vist som overskrift i søkeresultatene når treff fra din side vises. Denne opprettes automatisk av EPiServer, men er mulig å endre ved behov. Metatittelen er viktig for å fortelle søkemotoren hva siden handler om. Skriv en god og beskrivende tittel som både besøkende og søkemotorer skjønner. Hvis du ikke fyller ut dette feltet, bruker søkemotoren tittelen fra tittelfeltet. Metabeskrivelse Den teksten som vises i søkeresultatet mellom tittel og URL. Teksten skal inneholde en kort, presis oppsummering av hva siden handler om (maks 166 tegn). Bruk hele setninger. Metabeskrivelsen blir ikke alltid brukt av alle søkemotorer, men ved fravær av en slik tekst trekker f.eks. Google selv frem det innholdet den tror er relevant. Deaktiver indeksering For å hindre at siden blir synlig i søkemotorene.

23 Versjonsnr. 2.2 Side Innhold Her har du tilgang til alt innholdet på siden. Du kan redigere hovedbilde, ingress og brødtekst, i tillegg til å legge til eller fjerne blokker på siden. Kategori Denne kan gjerne stå tom. Kategorisering av sider kan imidlertid være nyttig når brukerne filtrerer informasjon på søkesiden og i nyhetsarkivet. Du kan velge mellom kategoriene fagtilbud og kampanje. Stort innholdsområde Feltet vises under hovedteksten på en side. Her kan du dra og slippe blokker fra ressursfeltet. Du kan også klikke på lenken opprett en ny blokk for å opprette ny blokk.

24 Versjonsnr. 2.2 Side 22 Høyre innholdsområde Feltet vises til høyre for hovedteksten på en side. Her kan du dra og slippe blokker. Du kan også klikke på lenken opprett en ny blokk for å opprette ny blokk Innstillinger Her har du tilgang til innstillingene for den aktuelle siden. Publisert En system-generert dato som viser når innholdet ble publisert. Ved å klikke endre, kan du endre datoen. Opprettet En system-generert dato som viser når siden ble opprettet. Ved å klikke endre, kan du endre datoen. Endret En system-generert dato som viser når siden sist ble endret. Oppdater endret dato Huk av for å vise for brukerne at du har oppdatert innholdet i teksten. Funksjonaliteten benyttes også når du skal trekke en gammel nyhetssak opp igjen i nyhetsfeltet på forsiden. Sorter undersider Standard sorteringsrekkefølge er etter opprettelsesdato (nyeste først). Endring av denne kategoriseringen skal kun benyttes når du skal endre rekkefølgen i nyhetsfeltet på forsiden. Sett da sorteringen (på selve nyhetssaken) etter endringsdato (nyeste først). Nyhetssaken vil havne øverst i nyhetsfeltet (hvis du har oppdatert endret dato).

25 Versjonsnr. 2.2 Side 23 Snarvei Du kan opprette direktelenker til eksterne (eller interne) sider i megamenyen. Forskjellen mellom snarvei og vanlig lenke er at med snarveisalternativet blir selve siden en lenke i menystrukturen, den vil ikke vise eget innhold. Et eksempel er snarveiene til Oslo kommunes nettsider under menypunktet Aktivitetsskolen (gjelder barneskoler). Som standard angis ingen snarvei. Hvis du ønsker å opprette en snarvei, klikk håndter. Meny-undertittel Det er mulig å legge til en undertittel som blir synlig under sidenavnet i megamenyen. Hold teksten kort.

26 Versjonsnr. 2.2 Side Alle egenskaper på forsiden Se 5.2 Alle egenskaper for beskrivelse av fanene SEO, Innhold og Innstillinger. Under alle egenskaper på forsiden, har du også tilgang til fanen nettsideinnstillinger. Her kan du legge inn og redigere informasjon som gjelder for hele nettstedet Endre navn på webredaktør Du kan selv endre navn og e-post på ansvarlig redaktør og webredaktør (synlig nederst på nettsiden). Det anbefales at skolens postmottak legges inn som e-post til ansvarlig redaktør Lenker og ID til sosiale medier Her er det mulig å legge til lenker til evt. sosiale medier som skolen har. - Google+ - Facebook - Instagram - Youtube - Twitter Lenkene kommer til syne som ikoner nederst på nettsiden: For forklaring av feltene Instagrambruker og Instagram klient-id, se 8.13 Sosiale medier Faste opplysninger for nettsiden Under nettsideinnstillinger finner du også faste opplysninger for skolens nettside, for eksempel skolekode og skolekategori. Disse opplysningene skal ikke endres.

27 Versjonsnr. 2.2 Side Lagre, forhåndsvise og publisere innhold Fremgangsmåten for lagring, forhåndsvisning og publisering av innhold fungerer likt på alt innhold, både i enkel redigeringsvisning og i visning av alle egenskaper. I tillegg kan du avpublisere innhold som ikke lenger er relevant, men som du ønsker å beholde i sidetreet. 6.1 Lagring Endringene dine lagres automatisk etter hvert som du jobber. Siste automatiske lagring vises med tidspunkt i toppmenyen. Du har mulighet til å angre siste endring. 6.2 Forhåndsvisning Du kan forhåndsvise en side etter hvert som du arbeider med den. Klikk på forhåndsvisningsknappen øverst i venstre hjørne. Du kan også finne ut hvordan innholdet vil se ut på ulike enheter, f.eks. en ipad eller en mobiltelefon. 1. Klikk på forhåndsvisningsknappen 2. Klikk deretter på øverst til venstre 3. Velg 4. Du kan nå vise med oppløsningen til ipad, iphone eller en Android-telefon.

28 Versjonsnr. 2.2 Side Publisering Når du ikke har gjort noen endringer i innhold, vises ingen endringer øverst i høyre hjørne. Når du har gjort endringer i innhold og klikket utenfor feltet du jobbet i (f.eks. tittelfelt, ingress osv.), endres visningen til mulighet for publisering. Klikk på publiseringsknappen for å publisere. Du kan også se informasjon om når og av hvem siden sist ble endret og lagret. Hvis du klikker vise på nettsted, vises nettsiden slik brukerne ser den. Du kan enten velge å publisere innholdet med en gang, eller skjemalegge (tidsstyre) publiseringen. Obs! Webforfattere har ikke rettigheter til å publisere innhold. De kan sette siden klar for publisering. Siden er da tilgjengelig for webadministrator/webredaktør som har tilgangsrettigheter for publisering. Man kan ikke gjøre endringer på en side som er satt klar for publisering Tidsstyre publisering Du kan velge å publisere en artikkel med det samme, eller sette publisering til et senere tidspunkt. Velger du å «skjemalegge» publiseringen, åpnes et vindu hvor du velger dato og tidspunkt for når publiseringen skal skje.

29 Versjonsnr. 2.2 Side 27 Det vil deretter dukke opp et klokkesymbol ved siden av det aktuelle innholdet i sidetreet Når flere redigerer samtidig Når flere redigerer det samme innholdet samtidig, vil det dukke opp en melding øverst til høyre i skjermbildet som informerer om dette. Du bør at to redigerer i samme tekst, slik at dere ikke overskrider hverandres endringer. Men man kan også velge rediger uansett. 6.4 Avpublisering Bruk avpublisering hvis du ønsker at en side/mappe skal fjernes fra nettstedet, men at den fortsatt skal være synlig i sidetreet for senere gjenbruk. 1. Stå på siden/mappen du ønsker å avpublisere.

30 Versjonsnr. 2.2 Side Klikk på knappen for visning av alle egenskaper. 3. Klikk på verktøy. 4. Håndter utløp og arkivering 5. Klikk på utløp: Nå. Avpubliseringen kan oppheves når du på nytt ønsker å publisere innholdet.

31 Versjonsnr. 2.2 Side Verktøylinjen i brødtekstfeltet Verktøylinjen i brødtekstfeltet brukes til å skrive inn mye av informasjonen til nettsiden, for eksempel formatering av tekst, sette inn bilde eller en lenke. Obs! Den viktigste knappen i verktøylinjen er knappen Lim inn som ren tekst. knappen før du limer inn tekst for å få riktig skriftstørrelse/-type. Klikk på Følgende knapper er tilgjengelige i verktøylinjen: Sett inn/ rediger kobling Fjern kobling Sett inn bilde Når du skal opprette/endre en lenke i teksten. Knappen er grået ut frem til du markerer teksten som skal være med i lenken. Se opprette lenker. Fjern en lenke fra den valgte teksten. Knappen er grået ut frem til du plasserer markøren i lenken. Sett inn et bilde i brødtekstfeltet, evt. endre bildeegenskaper. Du kan selv velge størrelse og plassering. Se legg til bilde. Rediger bilde Sett inn/rediger objekt Klipp ut Rediger et bilde, som er lagt til i brødteksten, ved hjelp av bilderedigeringsprogrammet. Se redigere bilde. Sett inn en film i teksten. Se film. Klipp ut den valgte teksten og plasser den på utklippstavlen. Obs! Knappen fungerer ikke i alle nettlesere. Bruk isteden Ctrl+X.

32 Versjonsnr. 2.2 Side 30 Kopier Lim inn Lim inn som ren tekst Lim inn fra Word Stavekontroll Skift til/fra fullskjermmodus Fet eller kursiv skrift Punkt- og nummerliste Kopier den valgte teksten og plasser den på utklippstavlen. Obs! Knappen fungerer ikke i alle nettlesere. Bruk isteden Ctrl+C. Lim inn tekst fra utklippstavlen. Obs! Knappen fungerer ikke i alle nettlesere. Bruk isteden Ctrl+V. Den viktigste knappen i verktøylinjen. Klikk på knappen før du limer inn teksten for å fjerne formateringene fra andre programmer. Lim inn innhold med Word-formatering. For at resultatet skal bli vellykket må teksten formateres med egnede stilmaler i Word. Når du kopierer «overskrift 2» fra Word, vil den konverteres til «header 2». Skru av/på stavekontroll. Feilskrevne ord vil bli understreket med rød strek. Veksle mellom fullskjerm- og normal skjermmodus i brødtekstfeltet. Ved å klikke på knappen på nytt tilbakestiller du redigeringsområdet til originalstørrelsen. Velg enkeltord i teksten for å formatere dem med fet eller kursiv skrift. Husk at overskrifter og mellomoverskrifter skal stiles med headinger, ikke fet skrift. Opprett en punkt- eller nummerliste i teksten. Bruk Tab på tastaturet for å få flere nivåer på listen. Stiler Viser en rullegardinliste med tilgjengelige stiler for tekstformatering. Se formatere tekst. Søk Angre eller gjøre om Angre eller gjøre om forrige handling. Søk og erstatt tekst i brødtekstfeltet.

33 Versjonsnr. 2.2 Side 31 Sett inn/rediger anker Vis HTML-kilde Du kan sette inn et anker for å opprette lenke til et annet sted på samme side. Se opprett anker. Vis teksten i HTML-modus. 7.1 Formatere tekst For å bedre den universelle utformingen (tilpasning f.eks. for synshemmede) og for å oppnå en enhetlig nettside, er det viktig å formatere teksten ved hjelp av stiler i verktøylinjen. Da blir de riktige HTML-kodene bli lagt til innholdet. Merk den delen av innholdet som skal formateres, og velg ønsket formatering i rullegardinlisten. Når du for eksempel formaterer mellomtitler med «header 2», vil mellomtitlene vises på en ensartet måte over hele nettsiden. - Stiler benyttes til brødtekst. - Header 2 benyttes til mellomtitler. - Header 4 benyttes hvis du trenger et nivå under mellomtittel. - Bildetekst benyttes til bildetekst under bilder i brødtekstfelt. 7.2 Opprette lenker Når du redigerer en side eller en blokk, kan du lenke til annet innhold. Det kan være eksterne ressurser eller internt innhold på webområdet. Det er ikke mulig å lenke opp blokker, da disse ikke har egen URL. Hvis du står i brødtekstfeltet og skal lenke opp innhold, velg sett inn/ rediger kobling. Du kobler til sider og medier ved å dra og slippe dem i riktig felt i koblingsboksen som kommer til syne. I boksen kan du også opprette lenker til e-post og eksterne nettsider. Obs! Av tilgjengelighetsgrunner (f.eks. for synshemmede) er det viktig å fylle inn en beskrivende tittel for lenken i feltet koblingstittel.

34 Versjonsnr. 2.2 Side 32 Åpne i Velg om du skal åpne koblingen i et nytt vindu eller i hele vinduet, altså vinduet du allerede står i. Skal du lenke opp en ekstern nettside eller et dokument, bruk nytt vindu. Side Intern lenke til annet innhold på nettsiden. Media Lenke til dokumenter i ressursfeltet (PDF). Skal du legge til en film, må denne embeddes fra f.eks. YouTube. Se film. E-post Lenk opp en e-post adresse, for eksempel fra et navn. Prefikset «mailto:» vil bli lagt til automatisk, og et vindu for utsending av e-post vil dukke opp når brukerne klikker på lenken. Ekstern kobling Lenke til eksterne nettsider. Anker Opprett lenke til et annet sted på samme innholdside. Opprett først et ankernavn, deretter kan du lage en lenke til ankeret. Se opprett anker. Slett lenke Du fjerner en lenke enten ved å markere den aktuelle lenken, og klikke på knappen fjern lenke i verktøylinjen, eller ved å klikke på ved siden av lenken i koblingsboksen. 7.3 Opprette anker Et anker er en lenke til et annet sted på samme innholdsside. Ankere er nyttige når du har en lang tekst, og du vil at leseren skal kunne hoppe mellom de ulike delene. Et eksempel er en spørsmål- og svarside, hvor du ønsker at brukeren enkelt skal kunne navigere mellom spørsmål og svar. Lag ankeret først, velge deretter hvor du vil opprette lenken til ankeret. Sette inn anker på siden: 1. Merk teksten der du vil plassere et anker. 2. Velg sett inn/rediger anker på verktøylinjen. 3. I ankernavn skriver du inn ankerets navn. Unngå å bruke spesielle tegn eller mellomrom.

35 Versjonsnr. 2.2 Side 33 Opprette lenke til et anker: 1. Merk teksten som skal utgjøre lenken. 2. Velg sett inn/rediger kobling. 3. I tittel skriver du inn teksten som skal vises som verktøytips til lenken. 4. Velg anker og ankerelementet du vil koble til (alle ankrene på siden vises i nedtrekksmenyen). Endre et anker: 1. Velg ankeret du vil endre ved å klikke direkte på ankerikonet i teksten. Ikonet sett inn/endre anker i verktøylinjen merkes da blått. 2. Klikk på sett inn/endre anker på verktøylinjen. 3. Det nåværende ankernavnet blir synlig. Rediger teksten i ankernavn. Fjerne et anker: 1. Velg ankeret du vil fjerne ved å klikke direkte på ankerikonet i teksten. Ikonet sett inn/endre anker i verktøylinjen merkes da blått. 2. Trykk delete på tastaturet. 3. Oppdater lenker som peker til det ankeret som er fjernet.

36 Versjonsnr. 2.2 Side Blokker Blokker er fleksible innholdsfelt som kan benyttes på forsiden, i artikler og i nyheter. En blokk kan for eksempel være en faktaboks eller et bildegalleri. Dette er ikke en egen sidetype. Du kan legge til flere blokker i det samme feltet, enten under eller ved siden av hverandre. Når du står i enkel redigeringsmodus, vil en grønn ramme angi hvor det er mulig å legge til blokker. 8.1 Opprette blokk Du kan enten opprette blokker direkte i et innholdsområde på en side, eller i ressursfeltet og deretter dra og slippe blokkene på rett plassering. Når du oppretter en blokk på en innholdsside (f.eks. artikkel) lagres blokken automatisk i ressursfeltet under fanen blokker, mappen For denne side Opprett blokk direkte på siden Når du står i redigeringsmodus på en side, er innholdsområdene for blokker synlig - i høyre marg og nederst på siden. 1. Klikk opprett ny en blokk. 2. Velg den blokktypen du ønsker, og gi den navn. 3. Publiser blokken. 4. Publiser deretter siden blokken er plassert på. Når du oppretter en blokk og klikker tilbake, går du tilbake til siden du jobbet på tidligere Opprett blokk i ressursfeltet Det er mulig å opprette en blokk i ressursfeltet, og deretter dra og slippe den på ønsket side. Blokken lagres da i ressursfeltets mappestruktur (under fanen blokker). Blokken vil være globalt tilgjengelig på webområdet, og kan gjenbrukes på ulike sider. 1. Merk den mappen i ressursfeltet der du vil opprette blokken (under fanen blokker). 2. Velg ny blokk i kontekstmenyen, eller klikk på knappen 3. Velg den blokktypen du ønsker, og gi den navn. 4. Publiser blokken. 5. Velg den siden i sidetreet hvor du vil plassere blokken.

37 Versjonsnr. 2.2 Side Dra blokken fra ressursfeltet over i et egnet innholdsområde. 7. Publiser siden blokken er plassert på. 8.2 Gjenbruk blokken på flere sider Hver gang du oppretter en blokk på en side, lagres den automatisk i ressursfeltet under fanen blokker, mappe For denne side. Det er mulig å gjenbruke den samme blokken på flere sider, og kun vedlikeholde den ett sted. Fremgangsmåte: 1. Gå inn på den siden hvor du opprinnelig opprettet blokken. 2. Klikk i ressursfeltet, fanen blokker, mappen For denne side. 3. Dra den aktuelle blokken fra mappen For denne side opp i mappen For dette nettsted. Da kan du gå inn på en hvilken som helst side i EPiServer, og trekke blokken fra ressursfeltet over i et egnet felt. Hver gang du redigerer i en av blokkene, vil alle like blokker endre seg. 8.3 Endre blokkens størrelse Blokken tilpasser automatisk størrelsen til det innholdsfeltet den ligger i (bredt eller smalt). I tillegg er det mulig å manuelt overstyre bredden på en blokk, slik at to smale blokker kan stå ved siden av hverandre i det brede innholdsfeltet. Fremgangsmåte: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen på blokka. 3. Velg visningsalternativet halv. Du kan da sette to smale blokker ved siden av hverandre i et bredt innholdsfelt. Hvis du lar visningen stå på automatisk, vil EPiServer benytte det alternativet som innehar samme bredde som området du setter blokken inn i.

38 Versjonsnr. 2.2 Side Redigere blokk Du kan enten redigere en blokk via innholdsområdet der den brukes, eller fra fanen blokk i ressursfeltet (i mappen For denne side). Husk at endringer som utføres på en blokk ett sted, vil påvirke blokken om den benyttes andre steder. 1. Klikk rediger i kontekstmenyen. 2. Klikk på knappen for visning av alle egenskaper. 3. Gjør de aktuelle endringene. 4. Publiser blokken. 5. Publiser siden blokken er plassert på. For å komme tilbake til siden du jobbet på, klikk tilbake Endre navn på en blokk Hvis du skal endre navnet på en blokk, gå inn i visning av alle egenskaper, og endre egenskapen navn. Du bryter ingen koblinger på webområdet ved å endre navnet på en blokk. Navnet er synlig backend i EPiServer, og for enkelte blokker; som tittel på nettsiden.

39 Versjonsnr. 2.2 Side Flytte, kopiere og fjerne blokker Du flytter, kopierer og fjerner blokker ved bruk av kontekstmenyen. Skal du i tillegg slette blokken helt fra nettstedet, må du også slette den fra ressursfeltet (fanen blokker, mappen For denne side). Vær obs på at blokker og mediefiler deler de samme mappene i ressursfeltet. Fjerner du en mappe fra strukturen, vil det påvirke begge fanene (blokker og medier). Hvis blokken brukes på en side når du forsøker å slette den, vil du bli varslet om dette. Fjern først blokken fra nettsiden, putt den deretter i papirkurven. 8.4 Faktaboks forside - Hvit faktaboks med Oslo skyline nederst. - Fast høyde. - Fungerer godt i høyre innholdsområde og stort innholdsområde. - Bruksområde: Kun tekst. Fremgangsmåte: Se faktaboks oransje.

40 Versjonsnr. 2.2 Side Faktaboks oransje - Oransje faktaboks med Oslo skyline nederst. - Fast høyde. - Fungerer godt i høyre innholdsområde og stort innholdsområde. - Bruksområde: Kun tekst. Fremgangsmåte: Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 1. Velg faktaboks forside eller faktaboks oransje i listevisningen. 2. Gi blokken navn (kun synlig back-end i EPiServer). 3. Legg til tittel og innhold. a. Bruk ren tekst-knappen når du klipper inn tekst. b. Stopp teksten før den dekker Oslo-bylinen nederst i blokken. 4. Publiser blokken. 5. Publiser siden blokken ligger på. 6. Tips: Sjekk faktaboksen på en mobil eller ipad for å sjekke at all tekst kommer til syne. Redigere faktaboks forside og faktaboks oransje: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen øverst til høyre på blokka. 3. Klikk rediger. 4. Rediger teksten direkte i enkel redigeringsvisning eller klikk på visning av alle egenskaper, og rediger teksten der. 5. Publiser endringene. 6. Publiser siden blokken ligger på.

41 Versjonsnr. 2.2 Side Faktaboks - Hvit faktaboks, med blått tittelfelt. Valgfri tittel. - Dynamisk størrelse. - Fungerer godt i høyre innholdsområde og stort innholdsområde. - Bruksområde: Tekst, bilder og embedde film. Fremgangsmåte: 1. Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 2. Velg faktaboks i listevisningen. 3. Gi blokken navn (kun synlig back-end i EPiServer). 4. Legg til tittel og innhold. a. Bruk ren tekst-knappen når du klipper tekst fra andre steder. b. Se 10. Film for forklaring på hvordan legge til en film. Redgere faktaboks: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen øverst til høyre på blokka. 3. Klikk rediger. 4. Rediger teksten direkte i enkel redigeringsvisning eller klikk på visning av alle egenskaper, og rediger faktaboksen der. 5. Publiser endringene. 6. Publiser siden blokken ligger på.

42 Versjonsnr. 2.2 Side Bildegalleri - Hvit boks, med blått tittelfelt. Valgfri tittel. - Bruksområde: Viser en samling (mappe) med bilder. - Fungerer best høyre innholdsområde, men kan også brukes i stort innholdsområde. Fremgangsmåte: 1. Last opp bildene i en egen mappe i ressursfeltet (fanen medier). Husk alternativtekst på bildene. 2. Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 3. Velg bildegalleri i listevisningen. 4. Gi blokken navn (vises som tittel). 5. Dra og slipp bildemappen fra ressursfeltet over i feltet bildemappe. 6. Opprett blokken. 7. Publiser siden blokken ligger på. Redigere bildegalleri: Skal du legge til eller fjerne et bilde fra bildegalleriet, gjør du det i ressursfeltet. Legg til eller fjern bilder i den mappen som er tilknyttet bildegalleriet. Skal du bytte selve bildemappen som er lagt til bildegalleriet: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen øverst til høyre på blokken.

43 Versjonsnr. 2.2 Side Klikk rediger. 4. Klikk på knappen for visning av alle egenskaper (øverst til høyre). 5. Fjern bildemappen. 6. Legg til en ny bildemappe (og endre eventuelt navn på galleriet). 7. Publiser endringene. 8. Publiser siden blokken ligger på.

44 Versjonsnr. 2.2 Side Dokumentliste - Hvit boks, med blått tittelfelt. Valgfri tittel. - Dynamisk størrelse. - Passer best i høyre innholdsområde, evt. med halv størrelse i stort innholdsområde. - Bruksområde: F.eks. som supplement på en artikkelside for å liste opp relevante dokumenter. Husk å laste opp dokumentene i PDF. Fremgangsmåte: 1. Last opp dokumentene (PDF) til en mappe i ressursfeltet (fanen medier). 2. Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 3. Velg dokumentliste i listevisningen. 4. Gi blokken navn (vises som tittel). 5. Dra dokumenter fra ressursfeltet over i feltet filer. 6. Opprett blokken. 7. Publiser siden blokken ligger på.

45 Versjonsnr. 2.2 Side 43 Redigere dokumentliste: 7. Stå i redigeringsmodus. 8. Klikk på kontekstmenyen øverst til høyre på blokka. 9. Klikk rediger. 10. Klikk på knappen for visning av alle egenskaper (øverst til høyre). 11. Legg til/fjern/endre rekkefølge på dokumentene. 12. Publiser endringene. 13. Publiser siden blokken ligger på.

46 Versjonsnr. 2.2 Side 44 Fremgangsmåte: 8.9 Relevante lenker - Hvit boks, med blått tittelfelt. Valgfri tittel. - Dynamisk størrelse. - Bruksområde: F.eks. på en artikkelside for å samle de relevante lenkene på ett sted. - Passer best i høyre innholdsområde, evt. med halv størrelse i stort innholdsområde. 1. Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 2. Velg blokken relevante lenker i listevisningen. 3. Gi blokken navn (vises som tittel). 4. For å opprette interne lenker, dra og slipp sider fra sidetreet inn i lenkesamlingsfeltet. Bruk opprett ny kobling for å opprette lenker til eksterne sider eller for å lenke til e-post. Se opprett kobling. 5. Opprett blokken 6. Publiser siden blokken ligger på.

47 Versjonsnr. 2.2 Side 45 Redigere relevante lenker: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen øverst til høyre på blokken. 3. Klikk rediger. 4. Klikk på knappen for visning av alle egenskaper (øverst til høyre). 5. Legg til/fjern/rediger lenker ved å klikke på kontektsmenyen på lenken, eller opprett en ny kobling. 6. Publiser endringene. 7. Publiser siden blokken ligger på.

48 Versjonsnr. 2.2 Side Kampanje - Boks med plass til stort bilde og en kampanjetekst. - Fungerer godt i høyre innholdsområde og stort innholdsområde. Benytt predefinerte bildestørrelser i bilderedigeringsprogrammet. - Bruksområde: Profilere et arrangement eller en kampanje. - Kan gjøres klikkbar ved å lenke opp en intern eller ekstern side. Fremgangsmåte: 1. Finn feltet der du skal legge blokken. Klikk opprett ny blokk. 2. Velg blokken kampanje i listevisningen. 3. Gi blokken navn (kun synlig under fanen blokker i ressursfeltet). 4. Velg mellom header-bilde eller header-tekst (Header-tekst vises som tittel). 5. Legg inn hovedbilde i kampanjebilde-feltet. 6. Fyll inn kampanjetekst (Tekst som legger seg oppå bildet). Hold teksten kort.

49 Versjonsnr. 2.2 Side Koble opp eventuell lenke. Se opprett kobling. 8. Opprett blokken. 9. Publiser siden blokken ligger på. Redigere kampanje: 1. Stå i redigeringsmodus. 2. Klikk på kontekstmenyen øverst til høyre på blokken. 3. Klikk rediger. 4. Klikk på knappen for visning av alle egenskaper (øverst til høyre). 5. Utfør endringene. 6. Publiser blokken. 7. Publiser siden blokken ligger på Kalender - Hvit boks, med blått tittelfelt. Fast tittel er «Kalender». - Fast plass i høyre innholdsområde på forsiden, rett under kontakt oss. - Bruksområde: Viser de tre neste hendelsene i kalenderen. - For å opprette hendelse i kalenderen, se opprett kalenderhendelse.

50 Versjonsnr. 2.2 Side Aktuelt fra Osloskolen - Hvit boks med blått tittelfelt. - Fast plass i høyre innholdsområde på forsiden. - "Mater" aktuelle nyhetssaker fra.

51 Versjonsnr. 2.2 Side Sosiale medier - Gir mulighet for å integrere skolens Facebook- og Instagramkonto på nettsiden. - Kan enten benytte både Facebokk og Instagram, eller kun benytte én av dem. Fremgangsmåte for Facebook: 1. Klikk på visning av alle egenskaper på forsiden. Velg nettsideinnstillinger. 2. Legg inn skolens Facebook-lenke i feltet Facebook lenke. 3. Stå i høyre innholdsområde på forsiden. 4. Opprett blokk. Velg sosiale medier-blokken. Facebook integreres automatisk. Fremgangsmåte for Instagram: 1. Klikk på visning av alle egenskaper på forsiden. Velg nettsideinnstillinger. Her må du fylle ut følgende tre felt: a. Instagram lenke (Eks: b. Instagram bruker (Eks: ) c. Instagram klient ID (Eks: f0fe8f a2b8acf ) For å finne instagrambruker: Åpne URL: Skriv inn skolens brukernavn (Eks: osloskolen) Da får du opp instagram bruker For å finne klient ID: Åpne URL: Logg på med skolens instagramkonto (øverst i høyre hjørne)

52 Versjonsnr. 2.2 Side 50 Klikk på Manage Clients Klikk på Registrer a new client o Applivation name: (Instagram-brukenavn on skolens URL) o Description: Image gallery o Website: (Skolens URL) o OAuthn redirect_url: (Skolens URL) o Contact (Din eller skolens epost) Klikk registrer Da får du opp klient ID Hvis dette ikke fungerer, benytt Osloskolens klient ID: f0fe8f a2b8acf Skjema - Hvit boks, med blått tittelfelt. Valgfri tittel. - Bruksområde: Webskjema for innhenting av informasjon fra brukerne, f.eks. påmelding til arrangement. - Fungerer godt i høyre innholdsområde og stort innholdsområde. Fremgangsmåte: 1. Sett inn navn på skjema, dette vises i ressursfeltet. 2. Velg overskrift. 3. Klikk på knappen til høyre for skjema for å sette inn skjema.

53 Versjonsnr. 2.2 Side Velg et skjema som allerede er laget eller opprett nytt skjema. Se opprett nytt skjema. 5. Klikk bruk. 6. Publiser blokk.

54 Versjonsnr. 2.2 Side Opprett nytt skjema 1. Sett inn det antall rader du trenger. 2. Klikk på skjemafelt. 3. Dra og slipp relevante skjemafelt over i de opprettede radene. Ett skjemafelt per rad. 4. Fyll inn egenskaper for skjemafeltet.

55 Versjonsnr. 2.2 Side 53 Eksempel på skjemafelt-egenskaper: - Navn: Brukes til å identifisere feltet i databasen og er obligatorisk, men vises ikke for besøkende. Bruk det samme eller et lignende navn som i overskrift. Du kan kun bruke A Z, a z, 1 9 og _ for dette feltet. Mellomrom kan ikke brukes. - Overskrift: Brukes til å la besøkende få vite hva de skal angi i et felt. - Verktøytips: Vises nå du holder markøren over skjemafeltet. For å gi besøkende mer informasjon om hva som skal fylles ut. - Bredde (antall tegn): Angi hvor bredt feltet skal være i form av tegn. - Verdi må angis: Kryss av i denne boksen hvis du vil tvinge de besøkende til å angi en verdi. Hvis personen ikke fyller ut, vises en feilmelding om at feltet må fylles ut. - CSS-klasse: (Ikke nødvendig). - Valider som: Brukes til å kontrollere om den besøkende har fylt ut riktig type informasjon i et felt. F.eks. e-postadresse, datoformat eller ulike typer tall. 5. Lagre for hvert felt. 6. Husk knapp slik at brukerne kan sende inn svaret. 7. Velg side som vises etter svar. Du kan f.eks. opprette en «Takk for svar!»-side, og skjule den i menystrukturen. Se vis i navigasjon. Skjemafelter: Tekstboks Bruk denne felttypen når besøkende skal skrive en kort tekstinformasjon. F.eks. navn. Tekstrute Bruk denne felttypen når besøkende skal skrive fritekst i et stort område. For eksempel hvis de skal gi en tilbakemelding. Du kan bestemme bredden på området i form av tegn og hvor mange rader feltet skal ha (høyde). Rullegardinliste Bruk denne felttypen når besøkende skal velge ett av flere alternativer på en liste. - Feltet navn i boksen alternativ viser de alternativene som er tilgjengelige i rullegardinlisten. - Feltet verdi brukes til å identifisere feltet i databasen. Angi et alternativ ved å fylle ut feltene og klikk Legg til. - Avkrysningsboksen forvalgt angir hvilket av alternativene som velges som standard. - Slett og sorter rekkefølgen for alternativene ved å klikke på ikonene til høyre.

56 Versjonsnr. 2.2 Side 54 Alternativknapp Bruk denne når felttypen besøkende kun skal velge ett alternativ fra en liste. - I feltet plassering velger du om alternativknappen skal vises vannrett eller loddrett. - Feltet navn i boksen alternativ viser de alternativene som er tilgjengelige. - Feltet verdi brukes til å identifisere feltet i databasen. Angi et alternativ ved å fylle ut feltene og klikk Legg til. - Avkrysningsboksen forvalgt angir hvilket av alternativene som velges som standard. - Slett og sorter rekkefølgen for alternativene ved å klikke på ikonene til høyre. Avkrysningsboks Bruk denne felttypen for å gi besøkende en liste over ulike alternativer de kan velge ett eller flere av. - I feltet plassering velger du om alternativknappen skal vises vannrett eller loddrett. - Feltet navn i boksen alternativ viser de alternativene som er tilgjengelige. - Feltet verdi brukes til å identifisere feltet i databasen. Angi et alternativ ved å fylle ut feltene og klikk Legg til. - Avkrysningsboksen forvalgt angir hvilket av alternativene som velges som standard. - Slett og sorter rekkefølgen for alternativene ved å klikke på ikonene til høyre. Knapp Bruk denne felttypen for å gi besøkende en knapp å trykke på når de skal sende inn skjemaet de har fylt ut. - I knappetekst skriver du teksten som skal vises på knappen. Skriv: «Send». - I resultat av sending velger du hva som skal skje når den besøkende sender inn skjemaet. Du kan velge om du vil lagre det i en database og/eller sende det som e-post. Du kan også angi at skjemaet skal sendes til en webadresse der du har et eget program som tar seg av informasjonen. Hvilke felt som deretter vises avhenger av hvilket alternativ du velger. Følg anvisningene. Ledetekst Bruk denne felttypen for å legge til en overskrift i skjemaet. - I tekst skriver du teksten som skal vises for brukerne. Vannrett linje Bruk vannrett linje for å skape mer luft i skjema, så det blir oversiktlig og lett å forstå.

57 Versjonsnr. 2.2 Side Bruk av bilder 9.1 Bildebibliotek i ressursfeltet Alle bilder som skal benyttes på nettsiden må lastes opp i ressursfeltet under fanen medier. Du finner ressursfeltet ved å klikke på ressursfeltknappen nettsidene. øverst til høyre på Klikker du på tegnestiften blir ressursfeltet stående åpent når du jobber videre Mappestruktur: For alle nettsteder Dette er bilder til bruk for Osloskolen, lagt ut av UDA. Kopier innhold fra denne mappen, og legg det i skolens egen mappe. Skolen kan ikke redigere eller slette ressurser som ligger i mappen For alle nettsteder. For dette nettstedet Dokument- og bildebibliotekområde for din skole. Opprett undermapper og gi dem logiske navn, for å systematisere innholdet som skal ligge på nettsiden. For denne side Her kan du legge bilder/dokumenter som er relevante kun for den enkelte side. I ressursfeltet finnes også en fane for blokker. Vær obs på at mappestrukturen er identisk under begge fanene: Oppretter du en mappe under fanen medier, blir mappen også synlig under blokker Laste opp bilder i ressursfeltet 1. Åpne mappen på PCen som du skal kopiere bildet fra. 2. Åpne den aktuelle mappen i ressursfeltet. 3. Dra bildet over i resursfeltet ved hjelp av dra og slipp. NB! For at bildet skal bli synlig på nettsiden, må du legge til en obligatorisk alternativtekst.

58 Versjonsnr. 2.2 Side Obligatorisk alternativtekst på bilder Alle bilder som skal benyttes på nettsiden må ha en alternativtekst (ALT-tekst) for at de skal bli synlige. Denne teksten er til hjelp for blinde og svaksynte samt de som har skrudd av bildevisningen. Andre brukere kan se alternativteksten ved å holde musepekeren over bildet. Alternativteksten skal beskrive kort hva man ser på bildet, for eksempel: Elever leser bok i klasserom Kari Nordmann foran Bekkelaget skole Har du ikke lagt til en alternativtekst, vil brukerne se dette ikonet istedenfor bildet: Fremgangsmåte: 1. Klikk på kontekstmenyen til høyre på det aktuelle bildet i ressursfeltet. 2. Klikk rediger. 3. Overse feilmeldingen, og klikk på knappen for alle egenskaper skjermen. øverst til høyre på

59 Versjonsnr. 2.2 Side Skriv inn alternativtekst i feltet for alternativ tekst. 5. Klikk publiser. Du kan nå benytte bildet på nettsiden. Bruk sidetreet eller klikk tilbake for å arbeide videre. 9.3 Gode bildestørrelser Bruk store nok bilder, slik at de kommer til sin rett på nettsiden og ikke blir uskarpe. Du får tilgang til gode bildestørrelser via predefinerte størrelser i bilderedigeringsprogrammet. I tillegg kan du endre bildestørrelsen manuelt. For hovedbilde bør du alltid endre bildestørrelsen manuelt. Skriv inn 750 pixels i breddefeltet. Hovedbanneret er ikke tilgjengelig som predefinert størrelse. Bruk et annet bilderedigeringsprogram, for eksempel Paint eller Photoshop for å klippe til et hovedbanner Optimale bildestørrelser Sett bort fra hovedbanneret på forsiden, bruk alltid bilder som er mellom pixels i bredden. Da blir bildene verken for små, eller for store (som gjør siden tung å laste). Benytter du bilder som er mindre enn 750 pixels i bredden, kan disse kun benyttes inne i artikkel-/nyhetstekster, ikke som hovedbilde. Hovedbanner på forsiden Bredde: pixler Høyde: pixler Hovedbilde for nyhet og artikkel Bredde: pixler Høyde: Ca. 400 pixler Bruk kun liggende (horisontale) bilder Bred visning av nyhet på forside (ekstrabilde) Bredde: 748 pixler Høyde: 220 pixler Bred kampanje: Bredde: 748 pixler Høyde: 400 pixler Smal kampanje: Bredde: 358 pixler Høyde: 400 pixler

60 Versjonsnr. 2.2 Side Legg til bilde Du kan enten legge til bilder i egne felt, eller du kan legge til bilder ved hjelp av knappen Sett inn bilde i verktøylinjen Legg til bilde i eget bildefelt I nyhetsmalen og artikkelmalen er det et eget felt for hovedbilde. Bildet har en fast bredde, og vil legge seg mellom ingress og brødtekst. Alle nyheter må inneha et hovedbilde, mens det er valgfritt i artikkelmalen. Se Optimale bildestørrelser for riktig bildestørrelse. 1. Stå i enkel redigeringsmodus. 2. Velg et bilde i ressursfeltet (medier). Skal du redigere bildet må dette gjøres via ressursfeltet, se redigere bilde. 3. Merk bildet du vil ha, og dra det over i bildefeltet. 4. Publiser. OBS! Alle bilder må ha alternativtekst for å bli synlige på nettsiden, se 9.2 Obligatorisk alternativtekst på bilder Legg til bilde i teksten Du kan sette inn bilder i brødtekstfeltet ved hjelp av knappen Sett inn/rediger bilde i verktøylinjen. Bildestørrelse og plassering er valgfritt. 1. Klikk sett inn/rediger bilde i verktøylinjen.

61 Versjonsnr. 2.2 Side Klikk bla igjennom. 3. Velg innhold (bilde) fra mappene i ressursfeltet. 4. Legg til bildebeskrivelse. 9.5 Redigere bilde Bilderedigeringsprogrammet i EPiServer har grunnleggende bilderedigeringsfunksjoner som beskjæring, endring av størrelse og transformering (vende, rotere eller fjerne fargeinformasjon i bildet). Den redigerte bildefilen kan enten lagres som en kopi eller erstatte den opprinnelige filen.

62 Versjonsnr. 2.2 Side 60 Du får tilgang til bilderedigeringsprogrammet på følgende måter: - Fra kategorien medier i ressursfeltet. - Fra verktøylinjen Redigere bilde via ressursfeltet (medier) 1. Klikk i kontekstmenyen på bildet du ønsker å redigere. 2. Åpne i bilderedigeringsprogrammet. 3. Redigeringsvinduet vil da åpne seg. 4. Gjør ønskede endringer, klikk bruk. 5. Lagre bildet enten som en kopi eller erstatt originalbildet. 6. Klikk OK Redigere bilde via verktøylinjen i riktekstredigeringsfeltet 1. Klikk på bilderedigeringsprogram. 2. Redigeringsvinduet vil da åpne seg. 3. Gjør ønskede endringer, klikk bruk. 4. Lagre bildet enten som en kopi eller erstatt originalbildet. 5. Klikk OK Hvis bildet er for stort til å håndtere i redigeringsruten (zoom) Hvis du skal redigere et ekstra stort bilde (f.eks. 5000*3500) vil kun deler av bildet bli synlig i redigeringsruten. Du bør derfor zoome ned, og så forminske størrelsen.

63 Versjonsnr. 2.2 Side Endre zoom fra 100 prosent til f.eks. 25 prosent. 2. Du vil da se hele bildet, og for eksempel kunne beskjære det ved hjelp av predeinerte størrelser. Når du lagrer og setter inn bildet på egnet plass, vil zoom igjen være 100 prosent Endre størrelse Du kan enten endre bildestørrelse ved hjelp av de predefinerte størrelsene i nedtrekksmenyen, eller ved å skrive inn den nye bildstørrelsen manuelt. Du kan kun endre til en bildestørrelse som er mindre enn originalen, det er ikke mulig å øke størrelsen uten å ødelegge kvaliteten på bildet. Når du endrer størrelsen ved hjelp av predefinerte bildestørrelser, vil EPiServer enten velge å følge breddestørrelse eller høyden. Dette for å beholde proporsjonene på bildet. For å endre størrelse på et bilde som skal benyttes som hovedbilde anbefales det at du skriver inn bredden manuelt ( *).

64 Versjonsnr. 2.2 Side Klikk på endre størrelse. 2. Bruk en predefinert bildestørrelse eller skriv inn bredden manuelt. Behold proporsjonene. En god regel er å benytte en bredde som er mellom * 3. Klikk bruk. 4. Lagre enten som kopi eller erstatt originalbildet Beskjær bilde Du kan beskjære et bilde enten ved hjelp av de predefinerte størrelsene i nedtrekksmenyen, eller ved å skrive inn den nye bildstørrelsen manuelt. Du kan kun beskjære til en bildestørrelse som er mindre enn originalen, det er ikke mulig å øke størrelsen uten å ødelegge kvaliteten på bildet. Bruk den predefinerte bildestørrelsen bred visning av nyhet på forside hvis du skal opprette et ekstra forsidebilde til første nyhetssak på forsiden. Se 9.6 Ekstra forsidebilde til første nyhetssak. 1. Klikk på beskjær.

65 Versjonsnr. 2.2 Side Bruk en predefinert bildestørrelse eller skriv inn bredden manuelt. Behold proporsjonene. 3. Plasser utklippsruten over ønsket utsnitt. 4. Klikk bruk. 5. Lagre enten som kopi eller erstatt originalbildet. 9.6 Ekstra forsidebilde til første nyhetssak Nyhetsbildet på forsiden hentes automatisk fra hovedbildet inne i nyhetssaken. Inne i nyhetssaken er det lagt opp til at du skal benytte vanlige, liggende bilder (breddestørrelse mellom 750x-1000x). Hvis det automatiske utsnittet på forsiden ikke blir optimalt, kan du klippe til et ekstra bilde som kun skal benyttes på forsiden på første nyhetssak. Bildestørrelse for bredt forsidebilde: 748*220 Slik gjør du: 1. Klikk på kontekstmenyen på bildet du ønsker å lage et utsnitt av, velg åpne i bilderedigeringsprogrammet. Hvis bredden på bildet ikke er 750, klikk Endre størrelse og endre bredde til 750.

66 Versjonsnr. 2.2 Side Endre Zoom til 50%, slik at du ser hele bildet i ruta. 3. Klikk på Beskjær. 4. Beskjær bildet vha. den predefinerte forhåndsinnstillingen: Bred visning av nyhet på forside. 5. Velg riktig utsnitt ved å plassere utklippsruten over ønsket utsnitt. 6. Klikk Bruk. 7. Lagre som kopi. 8. Du har nå utsnittet du skal bruke på forsiden. Husk å legge til alternativtekst på det nye bildet. 9. Gå inn i nyhetssaken bildet tilhører. 10. Klikk på Alle egenskaper øverst til høyre. 11. Klikk på innhold. 12. Dra og slipp bildeutsnittet i feltet Forsidebilde. 13. Publiser. Du har nå et utsnitt som kun er synlig når nyhetssaken ligger øverst på forsiden. Originalbildet vises fortsatt som hovedbilde i nyhetsartikkelen. Når nyhetssaken flyttes ned til sak nummer 2, vil bildet basere seg på hovedbildet i nyhetssaken.

67 Versjonsnr. 2.2 Side Film Du kan legge til (embedde) en video fra YouTube eller andre strømmetjenester på nettsiden Legg til film på nettsiden Filmen kan plasseres direkte i en artikkel eller nyhet, eller i en faktaboks med blått tittelfelt. Hvis den skal ligge på forsiden, må du benytte en faktaboks. Fremgangsmåte: 1. I verktøylinjen: Klikk på sett inn/rediger objekt. 2. Velg type: iframe. 3. Lim inn videoens URL. 4. Klikk sett inn. OBS! For at videoen skal fungere må det stå i URLen. 5. Bruk nettleseren Chrome eller Firefox for å sjekke at filmen er kommet til syne på nettsiden. I redigeringsfeltet inne i EPiServer vil videoen være «usynlig».