Studieförbundet Vuxenskolan Manual EPiServer 7.5 2014-12-08 Maria Björk Cloud Nine AB Linnégatan 89 E, Box 10304, 100 55 Stockholm, Sweden T +46 8 120 330 24 M +46 735 93 90 24 maria.bjork@cloudnine.se www.cloudnine.se
Innehåll Logga in... 4 Visaläget... 5 Fönster, flikar och gadgets... 5 Topprullgardinen... 5 Panelikonknappar (4)... 6 Visa/dölj navigeringsfönster (5)... 6 Jämför versioner (6)... 8 Inställningar vid uppscrollning... 8 Resursfönstret Block och Media... 9 Enkel redigering... 11 Publicera och publiceringsalternativ... 13 Avancerad redigering... 14 Skapa ny sida... 18 Förhandsgranska... 18 Placera sidan där man vill ha den.... 19 Sidmallar... 20 Startsida för en avdelning... 20 Artikelsida... 22 Kurser... 22 2
Kurssida... 23 Artikel- / Nyhetslista... 24 Block... 25 Skapa ett block... 25 Kontaktblock med karta... 26 Utvalda artiklar och kurser... 27 Puffblock... 27 Kurslistning... 28 Kartblock... 28 Artikel- / Nyhetslista... 28 Bildblock... 29 Videoblock... 30 3
EpiServer CMS Logga in Allt du behöver för att kunna redigera hemsidan är en webbläsare och uppkopplad mot internet. Börja med att efter url:en lägga till: /episerver/cms På testsajten blir det då: http://svtest.sv.se/episerver/cms Logga in med användarnamn och lösenord som du fått. Dessa är för nuvarande epidepartmenteditor både användarnamn och lösenord. Ni kan då editera avdelningarna så det är viktigt att bara vara inne på sin egen avdelning. Senare ska en riktig AD koppling upp då var och en får egen inloggning. 4
2 1 Visaläget För att kunna surfa runt och se webbplatsen som den ser ut i publicerat läge när du är inloggad kan du klicka på knappen Alternativ uppe i högra hörnet och välja Visa på webbplatsen (1). Du kan även klicka på den svarta pilen, överst i mitten, för att fälla ner rullgardinslisten. Klicka sedan på ikonen jordglob (2). Du kan sedan enkelt klicka på EpiServer-loggan uppe i högra hörnet för att komma in i redigerarläget. Fönster, flikar och gadgets Topprullgardinen 3 Klicka på den lilla svarta fliken med pilen i mitten längst upp på sidan för att fälla ut topprullgardinen (3). Knapparna till höger är länk till EpiServer, Redaktörshandboken online, dina inställningar samt sök. Under Mina inställningar kan du byta lösenord samt ändra systemspråk. Bland knapparna till vänster ligger CMS och Redigera. Dessa klickar du på för att komma tillbaka till redigerarläget om du har varit inne under Mina inställningar. 5
Panelikonknappar (4) 4 När du har loggat in, så ligger längst upp i vänstra hörnet en rad ikoner. Dessa är från vänster till höger: Visa/dölj navigeringsfönstret (5) Skapa nytt innehåll Växla visningsinställningar (inaktiv) Växla förhandsgranskningsläge (11) Jämför versioner (6) Visa/dölj navigeringsfönster (5) När du klickar på den här ikonen så fälls navigeringsfönstret ut till vänster. Klickar du någon annanstans på sidan så fälls den ihop igen. 5 Pin Du kan pinna fast fönstret genom att klicka i den lilla nålen längst upp i högra hörnet så att den blir blå. Sök Vi håller oss till fliken Sidor som är förvalt. Här kan du överst söka efter sidor. Du kan också söka på en sidas sid-id, vilket är bra om man snabbt vill komma till en bestämd sida. En sidas ID är unikt och behålls även om sidan flyttas eller byter namn. 6
Sidträd I sidträdet ser du alla sajtens sidor. Om du jämför med sajten, så ser du att strukturen motsvarar menystrukturen på sajten. Allt ligger i samma ordning och nivåer. För att navigera sig här klickar du på plustecknen för att fälla ut strukturen. Klickar du på sidans namn laddas den sidan in och du kan redigera den. Tips! Om du håller musen still över ikoner eller sidor så ser du ett tooltip. Tooltip för sidor visar både sidans ID samt vilken sidmall som används. Gadgets Gadgets kommer du åt om du klickar på ikonen kugghjul längst upp till höger bredvid pin. Du kan lägga till gadgets och ordna om öppna gadgets. Efter att ha ordnat om gadgets, sorterat eller stängt, måste man avaktivera genom att klicka på Ordna om igen. En gadget som är användbar att ha framme är Versioner. Med den kan du återgå till tidigare publicerade versioner av en sida genom att markera en tidigare version och sedan under alternativknappen välja Ompublicera. Papperskorg Under ikonen kugghjul längst ner i detta fönster ligger papperskorgen. Här hamnar sidor som du har slängt. Så länge inte papperskorgen töms så kan en sida alltid återställas. Under samma kugghjulsikon kan du även välja att bara visa sidor från språket som är valt. Det gör att du slipper se de gråa, kursiva sidorna när du inte jobbar med dessa. 7
Jämför versioner (6) 6 Under Jämför versioner kan du jämföra olika versioner av en sida. Välj tidigare versioner i dropplisterna. Här kan du bara jämföra. Vill du publicera en tidigare version, lägg till gadgeten Versioner från Navigationsfönstret. Inställningar vid uppscrollning Om man scrollar med musen uppåt på en sida, så visas några inställningar för den sidan. Namn Här kan du ändra sidans namn samt namn i url. Namn i url kan behöva ändras om t ex en sida har kopierats eller byter namn, så att url:en alltid stämmer överens med vad sidan heter. 8
Visa i navigering Kryssa ur om du vill gömma en sida i navigeringen men som ska vara kunna surfa till. T.ex. en tacksida. Här ser du vilka rättigheter som är satta på sidan, om sidan är publik eller inte, vilket sid ID sidan har samt villken sidmall som används. Verktyg Här hittar du språkinställningar samt inställning för utgångsdatum (avpublicering). Resursfönstret Block och Media 7 Klicka på mappikonen (7) längst upp i högra hörnet för att öppna resursfönstret. Här finns två flikar. En för Blocks och en för Media. Block Globala resurser. Skapa en struktur med kataloger som sedan blocken skapas i. Block som ligger i dessa kataloger kommer du åt från vilken sida som helst och kan användas på flera sidor och behöver bara editeras på ett ställe. En katalog som skapas här skapas med automatik även upp under Media. Klicka på alternativmenyn (8) till höger om katalogen där du vill ha den nya katalogen, välj Ny katalog och namnge den. 8 För denna Sida. När du skapar ett block som bara ska användas på en sida, ställ dig på den sidan och skapa blocket under katalogen För denna Sida. Då undviks att det blir mycket innehåll och därmed rörigt i blockbiblioteket. Slängs sedan sidan så slängs samtidigt blocket och då undviks också att en massa oanvänt innehåll ligger och skräpar. Skapa ett block. Klicka på katalogen där blocket ska 9
ligga så att den blir markerad. Klicka på alternativmenyn (8) längst till höger och välj Nytt block. Välj mall, ge den ett namn och klicka OK. Fyll på med innehåll och publicera blocket. Nu är blocket färdigt för att läggas ut på en sida. Tips! Håll musen still över namnet på ett block i resursfönstret så får du ett tooltip med info om vilken sidmall den är gjord med. Bra om man är osäker på vilken sidmall man ska använda när man skapar nya block. Media Globala resurser. Skapa en struktur med kataloger som sedan bilder och filer laddas upp till. Media som ligger i dessa kataloger kommer du åt från vilken sida som helst och kan användas på flera sidor och behöver bara editeras på ett ställe. En katalog som skapas här skapas med automatik även upp under Block. Klicka på alternativmenyn (8) till höger om katalogen där du vill ha den nya katalogen, välj Ny katalog och namnge den. 8 För denna Sida. När du laddar upp en fil som bara ska användas på en sida, ställ dig på den sidan och ladda upp filen under katalogen För denna Sida. Då undviks att det blir mycket innehåll och därmed rörigt i mediaarkivet. Slängs sedan sidan så slängs samtidigt tillhörande media och då undviks också att en massa oanvända bilder och filer ligger och skräpar. 9 För att ladda upp en bild eller ett dokument, klicka på katalogen där filen ska ligga så den blir markerad. Klicka på ikonen under (9) och bläddra genom att klicka på plustecknet i dialogrutan som öppnas. Du kan också dra och släppa filer här från din dator. Flera filer kan dras in samtidigt. Tips! Tänk på att döpa bilder till vad de innehåller för motiv. Det är dels bra för sökmotorer, men även för dig och andra redaktörer när bilderna ligger i mediaarkivet så man snabbt ser vad det är för bild. 10
Enkel redigering När du är inloggad och surfar runt i visaläget kan du när som helst klicka på EpiServerikonen uppe i högra hörnet. Då kommer du in i CMS:et och kan redigera den sidan. Alla redigerbara element i den här vyn ligger med en ram runt sig (10). Redigera text. Blå ram (10) visar att du genom att klicka i ytan direkt kan redigera texten. 10 Spara. När du är inne och redigerar en sida så sparas ändringar automatiskt. Du ser att sidan är sparad men inte publicerad när det dyker upp en blå pil vid alternativknappen Publicera uppe i högra hörnet. För att ändringarna ska synas publikt måste sidan publiceras. OBS! Om du ska redigera en sida som visar den här blå pilen och det står Publicera? på knappen, så har någon gjort ändringar på sidan som 11
inte är publicerade. Då är det nödvändigt att stämma av med den som gjort ändringarna på sidan om du kan gå in och redigera och publicera sidan. För att se vem som arbetar på sidan kan du dels se i sidträdet där en liten personikon syns. Håll musen stilla över ikonen så visas i en tooltip vem som redigerar. Du kan också klicka på knappen Jämför olika versioner bland panelikonerna. Där visas vem som sparat senaste utkastet av sidan. Om du har gjort ändringar på sidan som du inte vill publicera, återgå alltid till publicerat läge genom att klicka på Publicera och sedan välja Återställ till publicerat. Redigera block. Är ramen istället grå, betyder det att innehållet består av block. Klicka i ytan så öppnas en dialogruta med blocken listade. Här kan du genom att klicka och dra ändra ordning på blocken. För att redigera ett block, klicka på alternativmenyn längst till höger som visas när du för musen över och välj redigera. 12
Publicera och publiceringsalternativ Publicera. För att publicera en sida, klicka på knappen Publicera. Klicka sedan på Publicera ändringar. Avpublicera. För att avpublicera en sida, scrolla uppåt med musen på sidan så att du kommer åt inställningarna i uppscrollningsfliken. Klicka på knappen Verktyg och välj Hantera utgångsdatum och arkivering. Klicka på Nu om sidan ska avpubliceras direkt, eller välj datum och klockslag om sidan ska avpubliceras vid ett bestämt senare datum. Spara. Senarelägga publicering. För att publicera ändringar vid ett senare tillfälle, klicka på knappen Publicera och välj Schemalägg publicering. Välj datum och klockslag då ändringarna ska publiceras och klicka Schemalägg. 13
Avancerad redigering Klicka på knappen Alla egenskaper. Här kommer vi åt alla sidans inställningar. 14
Uppscrollningsfliken. Det första vi ser är att uppscrollningsfliken är nu fast och vi kommer åt inställningarna här. Fliken Innehåll. Varje sidmall har sina unika fält och ytor och som har sin bestämda placering. Se respektive sidmall för vilka fält som ska fyllas i. Gemensamt är Rubrik, ev. ingress och texteditorn. Texteditorn. Här läggs all brödtext för sidan. Texten formateras med hjälp av knapparna över editorn. Om du kopierar in text från Word, klistra in den oformaterad genom att markera ikonen Klistra in som text så att den blir blå inte få med oönskade formateringar. för att Rubriker. I droppmenyn Stilar kan du välja rubrik 1 3. En sida ska aldrig ha mer än en Rubrik 1. Så använd inte den om det finns ett fält för rubrik på sidan. Undantaget är sidmallen Kurser, den saknar rubrikfält, så lägg in rubriken och formatera med Rubrik 1 allra först i texteditorfältet. Använd Rubrik 2 i nästa nivå och Rubrik 3 för underrubriker till Rubrik 2. Bilder i texteditorn. För att lägga till en bild, börja med att ladda upp bilden till mediebiblioteket om den inte redan finns där. Ställ sedan markören där du vill infoga bilden i texteditorn och klicka på knappen för att infoga/redigera bild. Klicka på ikonen Bläddra vid fältet Bildens url och leta upp din bild i mediebiblioteket. Markera bilden och klicka OK. Ge bilden en beskrivande alt-text i fältet Bildens beskrivning och klicka Infoga. För att få text att flöda runt en liten bild, markera bilden och klicka på knappen för att infoga/redigera bild, välj fliken Utseende och i droppmenyn välj höger eller vänster. Vill du sedan ha luft runt bilden, fyll i antal pixlar i fälten Vertikalrymd och/eller Horisontalrymd. Antal pixlar fylls i med bara siffror utan måttenhet. Exempelvis: 5 Ändra storlek / Beskära bild. Markera bilden som är inlagd i editorn och klicka på knappen Bildredigeraren. Här finns möjlighet för en enklare bildredigering; Beskär, Ändra storlek eller rotera. Gemensamt för alla tre valen är att efter redigeringen gjorts ska du välja, under Spara, om ändringarna ska ersätta originalbilden eller om en ny kopia av bilden 15
ska sparas. I det senare fallet får du när du klickar OK ge bilden ett nytt namn. Beskär. Klicka på fliken Beskär och ange antal pixlar som ska beskäras från bildens över- vänster- höger och underkant. Ändra storlek. Klicka på fliken Ändra storlek och ange den nya storlekens pixelmått. Kryssa i fältet för att behålla bilden proportioner. Omforma. Klicka på fliken omforma och klicka på knapparna för rotera eller vänd. Du kan också kryssa i om du önskar bilden i gråskala. Länkar. Du kan lägga in 4 olika sorters länkar i texteditorn; Intern länk, Extern länk, länk till dokument samt epostlänk. Markera texten i editorn som ska bi en länk och klicka på länkikonen. Den blir aktiv när en text är markerad. I dialogrutan som öppnas väljer du vilken typ av länk det ska vara genom att markera checkboxen framför: o Intern länk. Sida är förvalt. Klicka på browse-knappen och leta upp sidan i sidträdet dit länken ska leda. Markera den och klicka Välj. Klicka OK. o Extern länk. Välj Extern länk och skriv in url:en för länken. Vid Öppna i: Välj om sidan ska öppnas i nytt fönster. Klicka OK. o Media. Länk till dokument. Klicka på browse-knappen och leta upp dokumentet i mediekatalogen. Välj om länken ska öppnas i ett nytt fönster. Klicka OK. o Epostlänk. Skriv in din epostadress i fältet E-postadress. Klicka OK. Bilder. Fält för bilder. För att lägga i en bild kan du enklast öppna resursfönstret och fliken Media. Leta upp bilden du ska använda eller ladda först upp den till mediebiblioteket. Klicka och dra in bilden från Media och släpp den på fältet avsett för bilden. Det går också att klicka på knappen bredvid fältet, med tre punkter, och bläddra fram till bilden du vill ha och välja bilden den här vägen. För att ta bort en bild, klicka på krysset till höger om bildnamnet. 16
Film i editorn. För att lägga in en film i editorn, ställ markören där du vill lägga in filmen. Klicka på knappen infoga/redigera inbäddad media. I droppmenyn vid Typ, välj iframe. I fältet url, klistra in shareurl:en från YouTube. Hämta share-länken från youtube.com. Gå till filmen du vill lägga in på youtube.com. Under filmen, klicka på Share, klicka sedan på fliken Share och kopiera url:en där. Klicka Infoga. Fliken SEO. Title. Title på sidan blir samma som sidans namn. Vill du ha en annan titel kan du fylla i den här. Title är det som visas i huvudet på webbläsaren, blir rubriken när man bokmärker sidan samt rubrik i sökresultat. Keywords. Möjlighet att lägga in sökord för sidan Beskrivning. En beskrivande ingress för sidan som kan användas av sökmotorer. Fliken Inställningar. Här ser du överst när sidan är skapad och senast ändrad. Vid Sortera undersidor kan du välja hur undersidorna ska visas/sorteras. Det vanligaste är Sorteringsindex. Då kan man själv välja placering av en sida genom att dra och släppa den i sidträdet på den placering du vill ha den. Men det finns också möjlighet att välja Enligt skapar- eller publiceringsdatum med senast eller äldst överst. Bra för nyheter t.ex som man vill ha den senaste överst. Det går också att sortera i alfabetisk ordning, vilket är bra under t.ex. Avdelningar. Vid Genvägar kan man göra sidan till en genväg. En genväg innebär att om man klickar i menyn på den här sidan så skickas besökaren iväg till en annan sida istället. Klicka på Hantera och välj genvägstyp, ange ny sida eller adress och spara. 17
Skapa ny sida Tips! Är du osäker på vilken sidmall du ska använda? Se vilka sidmallar andra sidor är gjorda med genom att hålla musen stilla över sidnamnet i sidträdet. Då visas ett tooltip med info om vilken sidmall den sidan är gjord av. I sidträdet, ställ dig på sidan som den nya sidan ska ligga under och välj i alternativmenyn (8) Ny sida. På samtliga sidor utom på Nyheter, så behöver man inte välja sidmall utan rätt sidmall skapas automatiskt. Ge då sidan ett namn och fyll i de egenskaper som krävs. Klicka sedan Skapa. Om du skapar en ny sida under Nyheter, välj först sidmall; Artikel- / nyhetslista eller Artikelsida. Ge därefter sidan ett namn och fyll i de egenskaper som krävs. Klicka sedan Skapa. 8 Fyll därefter sidan med innehåll, se respektive sidmall för översikt vilka fält som ska fyllas i. Publicera sidan. Förhandsgranska För att förhandsgranska ändringar utan att publicera, klicka på ikonen för Växla förhandsgranskningsläge (11). För att komma tillbaka till editeringsläge, klicka på knappen igen. 11 18
Placera sidan där man vill ha den. Dra och släpp. Välj placering av en sida genom att dra och släppa den i sidträdet på den placering du vill ha den. OBS! Tänk på att inte göra detta om sidorna är sorterade i alfabetisk ordning eller om t.ex. senast publicerade sidan läggs överst. Då kommer sidorna att konverteras till att ligga enligt sorteringsordning istället. 8 Klipp ut och flytta sidor. En sida kan via alternativmenyn (8) klippas ut och klistras in någon annanstans. Så länge sidtypen har tillåtelse att placeras där. Kopiera sidor Om en ny sida ska skapas som har mycket gemensamt innehåll med en befintlig sida kan den sidan kopieras. Välj Kopiera i alternativmenyn (8), markera sidan som den nya sidan ska ligga under och välj i alternativmenyn Klistra in. Börja med att ge sidan ett nytt namn och rensa fältet Namn i url. Ändra alla fält och all text som ska ändras och publicera sidan. 19
Sidmallar Startsida för en avdelning Startsidans innehåll för en avdelning består av blocks. Skapa blocken först. Sedan drar och släpper du blocken på respektive yta på sidan. Sidan har också en del inställningar som behöver ställas in för avdelningen: Gå in i redigerarläget för sidans alla egenskaper. Fliken Inställningar. Fyll i fälten: Bekräftelsetext vid registrering Bekräftelsetext vid betalning Avdelningsid Rotnod för kurser Peka ut listsidan Kurser som ligger under avdelningen Lokalens postnummer Lokalens postort Lokalens latitud Lokalens longitud Onlinebetalning tillgänglig Kryssruta. Ikryssad är onlinebetalning tillgänglig. Paynova användarnamn Paynova lösenord Tillåt reservanmälningar kryssruta Tillåt kursexport kryssruta. Fliken Innehåll. Följande block läggs in i ytorna: 1. Content area under menyn: Kontaktblock med karta 2. Content area till höger om menyn: Utvalda artiklar och kurser 3. Content Area under utvalda artiklar och kurser: 3 st. Puffblock 4. Content Area för kurslistningsblock: Kurslistning 5. Content Area för stort kartblock: Kartblock 20
Content Area nedre vänster: Artikel- /nyhetslista (6) Content Area nedre höger: Bildblock (7) eller Videoblock (8) 2 1 3 4 5 6 8 7 21
Artikelsida Artikelsidan innehåller rubrik, bild och brödtext. Artikelsidan används även som nyhetssida. Fyll då även i Teaser text samt Liten bild. Detta är för listningen. Kurser Kurser är en listningssida som visar alla kurser som skapats under automatiskt. Här finns möjlighet att skriva en inledande text i text editorn. Sidan har ingen huvudrubrik, så börja med att sätta en rubrik och formatera med Rubrik 1. 22
Kurssida Fliken Kursinställningar. All information som ligger under Kursinställningar kommer från det externa systemet Gustav. Kurserna/Episerversidorna uppdateras varje natt. Fälten under Kursinställningar är read-only. Fliken innehåll. Kategori. Visas på sidan, i listningar och filtrering. Klicka på plustecknet och bocka i de kurskategorier kursen tillhör i dialogrutan som öppnas. Klicka OK. Bild. Ladda upp en bild och lägg in här. Ingress. Ingressen visas dels under bilden på kurssidan, dels i listningar på t ex startsidan. Fältet Beskrivning följer med från Gustav när sidan skapas. Men det är en rätt torftig beskrivning, så uppdatera detta fält. Fältet uppdateras inte vid den nattliga importen/uppdateringen. 23
Artikel- / Nyhetslista Listsidan för nyheter visar en lista på alla sidor som ligger under automatiskt. Bild och teaser-text som visas här, sätts på undersidorna. Du kan lägga block i vänsterkolumnen: Kontaktblock med karta. 24
Block Skapa ett block Ställ dig på sidan där blocket ska ligga, t.ex. startsidan för avdelningen. Öppna resursfönstret och fliken Block. Skapa ett nytt block under För denna Sida genom att klicka på alternativmenyn till höger om katalognamnet och välj Nytt block. Klicka på den blocktypen som ska skapas. Namnge blocket samt fyll i fälten för de egenskaper som krävs. Klicka Skapa. När innehållet i blocket har fyllts i, ska blocket publiceras innan det läggs på en sida. När blocket är publicerat och klart, klicka på tillbakalänken i den gula listen högst upp för att komma tillbaka till sidan du var på innan. Dra in blocket till ytan på sidan där blocket ska ligga. Publicera även sidan. Nedan listas vad som ska fyllas i för respektive block. 25
Kontaktblock med karta Fyll i fälten: Rubrik Adress Postnummer Postort Telefon Fax E-post Latitud Longitud 26
Utvalda artiklar och kurser Fyll i fältet Huvudrubrik. I ytan Content Area för artiklar och kurser drar du in artiklar och kurser från sidträdet. Klicka på sidan i sidträdet, drag och släpp i ytan. Puffblock Fyll i fälten Rubrik och Beskrivning. Peka ut länk och bild, antingen genom att dra och släppa sida och bild i fälten, eller genom att klicka på browse-knappen bläddra fram bild och länk. 27
Kurslistning Det här blocket behöver bara skapas och fylla i de egenskaper som krävs. Listningen i blocket sker automatiskt från avdelningens kurser. Skapa bara blocket och placera det på sidan. Kartblock Kartblocket hämtar information från avdelningens startsida, så det enda som behöver göras är att skapa blocket och fylla i zoomnivå för kartan. Publicera blocket och lägg det på sidan. Artikel- / Nyhetslista Fyll i fältet Huvudrubrik. Peka ut listsidan för nyheterna/artiklarna som ska listas. Du kan dra och släppa sidan från sidträdet i fältet och bilden likadant från media Välj till sist antal nyheter/artiklar som ska visas i listan. 28
Bildblock Fyll i fälten Rubrik och Text. Peka ut bild och länk. Du kan dra och släppa sidan från sidträdet i fältet och bilden likadant från media. 29
Videoblock Fyll i fältet Rubrik. Hämta länken från YouTube Gå till filmen på YouTube.com Kopiera länken i url:en. Det kommer att se ut så här t.ex. https://www.youtube.com/watch?v=yfbzgysa6ry Klistra in url-länken till filmen i fältet YouTube embed url. 30