Redaktörshandbok för publicering med Episerver www.iogt.se
Introduktion Välkommen som redaktör för en av IOGT-NTO:s webbplatser! I denna lathund kommer de grundläggande verktygen och inställningarna anpassade för IOGT-NTO i EPiServer beskrivas. Vad är EPiServer? EpiServer är ett webbpubliceringsverktyg som hjälper dig att snabbt och enkelt publicera information på er webbplats. EPiServer är webbaserat, dvs. du behöver inte installera något program i din dator utan får access till programmet via webben. Allt som behövs är därför en Internet-uppkoppling, och en av fördelarna med detta är att flera personer kan vara redaktörer för samma sida. Att arbeta med EPiServer kan jämföras med att arbeta i ett ordbehandlingsprogram exempelvis Word. Behörighet Som webbredaktör kommer du att få behörighet till just din förenings hemsida, du kommer alltså inte kunna gå in och av misstag ändra bland andra föreningars sidor eller IOGT.se:s huvudsidor. Layout och struktur på sidan är element som är låsta för att på det viset skapa enhetliga webbar för IOGT- NTO:s alla distrikt, föreningar och kamratstöd över hela landet. Tanken är att redaktören ska kunna fokusera på webbens innehåll, att hålla webbplatsen intressant och aktuell, och slippa bekymra sig över färger, typsnitt osv. Webbläsare För att kunna se innehållet ordentligt på webbplatserna krävs att besökaren använder Microsoft Explorer 6.0 eller senare, Netscape Communicator 6.0 eller senare, eller Safari 1.0 eller senare. För redigeringsarbete krävs att redaktörerna använder Internet Explorer 6.0 eller senare. IOGT-NTO:s webbplatser www.iogt.se är uppbyggd med grundtanken att vara IOGT-NTO:s ansikte utåt på webben. och den riktar sig främst men inte enbart till icke-medlemmar. Tanken är att sidan ska ge ett lättillgängligt men ändå professionellt intryck. Sidan ska vara lättnavigerad och information lätt att hämta. 2
Inloggning För att kunna logga in måste du först vara registrerad på Sobernet, vilket du kan göra på www.iogt.se/sobernet. För att komma till EPiServers inloggning på webben skriver man in adressen www.iogt.se/secure/ui/edit. Då öppnas en inloggningsruta: Bild 1 Om du behöver hjälp med lösenord eller med ditt e-postkonto i Sobernet, kontakta Sobernet support, info@sobernet.nu. 3
Att komma igång När du nu är inloggad kommer det att se ut ungefär så här: Bild 2 Detta är IOGT-NTO:s webbträd i EPiServer, och här ligger alla de olika webbsidor som ligger under www.iogt.se. Men som du ser är det hänglås framför de allra flesta sidor, och det är för att du inte har access till andra sidor än just er sida. För att hitta din sida får du först scrolla ned i trädet tills du kommer nästan längst ned för att hitta Föreningssidor. Klicka sedan på plustecknet bredvid Föreningssidor alt. Distriktssidor, då kommer alla sidor upp och du kan leta reda på just er sida. Bild 3 4
Bild 4 För att slippa bläddra sig fram genom hela trädstrukturen varje gång du loggar in kan man ställa sig med musmarkören på er sida och sedan högerklicka, och i menyn som kommer upp välja Lägg till som favorit. Bild 5 Då kommer man sedan direkt åt just den specifika sidan som man listat som favorit via Favorit-fliken. Bild 6 5
Leta upp er sida och klicka på namnet, så kommer det se ut ungefär så här: Bild 7 Hur själva startsidan är uppbyggd går vi igenom längre fram i häftet. Skapa nya sidor Skapa meny-sidor Vilken funktion en sida ska ha i Episerver bestäms främst genom vart i webbträdet man placerar sidan. Skapar du en sida direkt under er startsida, kommer den sidan också att synas i er meny, den blåa avdelningen till vänster uppe på sajten. Ställ musmarkören på startsidan, högerklicka och välj Skapa ny. Bild 8 6
Du kommer då få upp en lista över val på sidor du kan skapa. Välj alltid den översta, Skapa vanlig webbsida. Bild 9 Då du klickat på Skapa kommer du se denna vy: Bild 10 7
Det som vi kommer att gå igenom vad gäller de funktioner och flikar som syns här är de som är numrerade. Varje gång man har lagt in information eller ändrat något, måste man spara för att den ändringen ska synas även externt. Jag använder mig alltid direkt av knappen Spara och publicera (1). När det gäller flikarna så kommer vi bara gå igenom några funktioner under Avancerad information (2), de andra flikarna kommer vi inte att beröra. För att börja arbeta med sidan måste du ge den ett namn (3), och namnet är det som kommer att synas i menyn, på sidans topp och i webbträdet. Om du vill kan du välja att sätta en annan sidrubrik än namnet, men det är inte nödvändigt. Jag har här döpt sidan till Testsida. Börja publicera, Sluta publicera, Sidansvarig, Formulär, Dölj rubrik, Bild samt Alt-text för bild är inte absolut nödvändiga funktioner, så de kommer vi att hoppa över. I rutan för Puff-text (4) kan du, om du vill, skriva in en liten kort presentationstext som du sedan kan använda för att lyfta fram sidan på själva startsidan. Vi kommer att gå igenom funktionen med att dra in och visa sidor direkt på startsidan längre fram. Om du nu efter att ha gett sidan ett namn klickar på Spara och publicera kommer sidan att skapas, och även placeras i sajtens vänsterställda meny. Bild 11 8
Sidan kommer att synas i webbträdet och i sajtens menysystem, om sidan är skapad direkt under startsidan. Har en sida skapats på fel plats går det bra att bara klicka och dra dem dit man vill att de ska ligga. Klicka på sidan du vill flytta och fortsätt hålla ned vänster musknapp. Dra sedan sidan dit den ska ligga, och släpp musknappen. Bekräfta flyttningen genom att svara Ja på frågan om sidan ska flyttas. Skapa undersidor För att skapa undersidor är proceduren den samma som när man skapar sidor som ligger i menyn. Den enda som skiljer är var i webbträdet man placerar den nya sidan. Om vi nu ska skapa en undersida till Testsidan, ställer man markören på Testsidan, högerklickar och väljer Skapa ny. Bild 12 Välj sedan Vanlig webbsida (bild 9), och du får då upp samma fönster som visas i bild 10. Gör samma procedur igen ge sidan ett namn och eventuell sidrubrik, och välj sedan Spara och publicera. Då placeras den nya sidan så här: Bild 13 9
Visa/Dölja sidor I Episerver kan man välja att tända och släcka sidor, dvs. bestämma om de ska synas i menyerna eller inte. Exempelvis så kanske man har gjort en sida som under vissa perioder ska synas i menyerna och under andra perioder inte, eller så kanske man bara vill kunna länka till en sida med information men inte att den ska ta upp plats i menyerna. Man tar alltså inte bort en sida bara för att den inte syns i menyerna. För att tända eller släcka en sida går man in under den specifika sidans redigerarflik, och går där in under ytterligare en flik, Avancerad information, och där bockar man i/av Visa sida i menyer Episervers filhanteringssystem På samma sätt som själva webbpubliceringen är helt webbaserad dvs. går att hantera från vilken dator med internetuppkoppling som helst, så är även Episervers filsystem helt webbaserat. I detta filsystem lägger du upp de bilder och dokument som du vill använda på sajten. För att komma åt filhanteraren och för att lägga in bilder och dokument, klicka på ikonen uppe på sidan som ser ut så här: Bild 14 10
Då öppnas detta fönster: Bild 15 Att infoga bild/dokument i filhanteraren När du har öppnat filhanteraren och vill lägga till en fil, måste du först se till att du lägger filerna i rätt mapp. Varje hemsida ska ha en egen huvudmapp, och om du inte redan har en, klicka på klickar du på ikonen Skapa ny katalog. Bild 16 Då öppnas ett fönster där du kan namnge din mapp och sedan klicka på Spara : Bild 17 11
När du sedan ska infoga en bild eller ett dokument i din mapp är det viktigt att du står i den mapp där filen ska hamna. Klicka sedan på Infoga fil (se bild 16). Klicka på Bläddra för att hämta filen från din dator. Author, Publisher, Type of document och Categories behöver du inte fylla i. Klicka på Spara. Bild 18 Bilden eller dokumentet hamnar då i mappen du har skapat. Bild 19 Att fylla sajten med innehåll Med nya versionen av Episerver har man möjlighet att skapa både en artikel inne på sajten och en "startsidepuff" på en och samma gång. Vill man kan man skriva en specifik text för visning på startsidan, som en presentation av själva artikeln. Den infon skriver man i så fall den översta vita rutan, "Puff-text". Huvudinformationen, det som sedan syns inne på sajten, skriver man i den andra vita rutan, "Primärt innehåll". I den tredje vita rutan, "Relaterad informtion", kan man lägga upp information som är just relaterad, exempelvis en länk till en annan sida eller en länk till en pdf. Här ryms inga mängder text eller bilder. 12
Det fjärde fönstret, "Läs mer", fungerar på samma sätt. Kanske vill man länka vidare till text på den egna sajten, eller kanske finns det mer information på en helt annan hemsida - iogt.se, Drogportalen, kanske någon slags kommuninformation, eller att man vill länka till Junis eller UNF:s arbete? Text När du ska lägga in text på dina sidor kan du antingen skriva in texten direkt i redigerarlägets fönster för Primärt innehåll (se bild 20), eller så kan du klistra in kopierad text. För att kunna lägga in text måste du först gå till önskad sidas redigerarläge (se bild 7) Bild 20 Om du vill kopiera in text från en annan källa, exempelvis ett word-dokument, ställ dig i fönstret för Primärt innehåll, högerklicka med musen och välj Klistra in oformaterat. Väljer du inte detta riskerar du nämligen att få med felaktiga formateringar på sidan som gör att texten ser konstig ut. Du kan formatera texten till viss del med de verktyg som du ser ovanför fönstret (fet och kursiv text, numreradeller punktlista med mera). Du har dock inte möjlighet att välja typsnitt eftersom Episerver är förprogrammerat med IOGT-NTO:s egna typsnitt. Efter att du har fått in önskad text och känner dig nöjd med formateringen, välj Spara och publicera. 13
Visa/Redigera Kom ihåg att du inte kan redigera texten när du står i Visa-läget, utan att du alltid måste klicka på Redigerafliken (se bild 7) för att kunna redigera texten. Infoga bilder Det enklaste sättet att få in bilder på webbplatsen är att via filhanteraren direkt dra över bilderna till sidan. Öppna först filhanteraren så att sidans fönster och filhanteraren är synliga båda två, se bild 15. Öppna sedan mappen där bilden finns alternativt för in den bild du vill ha i din mapp (se processen bild 15-19), klicka och håll ned musknappen över bildens namn och dra över bilden till fönstret för primärt innehåll (dvs. klicka och dra ). Släpp sedan bilden där du vill ha den. Bild 21 14
Redigera bilder Om man sedan vill redigera en bild, klickar man mitt i den så att den blir markerad. Det märker man genom att bilden får fyrkanter runt om sig. Bild 22 När bilden är markerad kan man sedan högerklicka och välja Bildegenskaper alternativt klicka på bildikonen uppe i ikon-raden: Bild 23 15
Här kan man sedan redigera bilden beskära den, välja att spara ned den i mindre format och så vidare. Efter att an har arbetat med bilden kan man välja om man vill spara den nya, förändrade bilden som en kopia eller som originalbild. Bild 24 Riktlinjer för bilder Var alltid noga med att bilderna inte är för breda! Inga bilder i mittfälten bör vara bredare än 200 pixlar. Tänk också på att bilderna inte ska vara så tunga då sajten blir långsam att ladda då. Bildens tyngd kan du ändra i bildredigeringsfältet genom att ändra vid Kvalitet och där i rullistan välja Låg eller Medel och sedan spara om bilden. Infoga länkar En webbsida är, när den är som bäst, inte upplagd som en broschyr med all information rakt upp ned, utan mer som ett nät (känns termen internet igen?) där all information är sammanlänkad och där man hela tiden skjutsas vidare till ny information. Många tänker kanske först och främst på länkar som något som tar en bort från sajten, till annan information. Exempelvis att länka vidare till en extern sida som Aftonbladet eller DN. Men det handlar oftare om att smidigt kunna transportera sina besökare mellan sajtens egna olika sidor, samt att smidigt presentera filer som man vill att besökarna ska kunna ta del av (word, pdf). 16
Länk till sida på annan webbplats 1. Markera det ord/de ord som ska bilda länk 2. Välj "Infoga hyperlänk" Bild 25 3. Dialogrutan för länkegenskaper visas, med fliken "Webbsida" aktiv. Ordet som du har markerat visas som "Klickbar text". Bild 26 4. I fältet "Länktitel" anger du den text som ska visas som tips på länken, information som är viktig för alla som läser webbsidan med olika hjälpmedel. 5. I fältet "Målram" väljer du hur länken ska öppnas, i nytt fönster eller i samma fönster. 17
6. Som länkmål för en extern sida väljer du "Sida på annan webbplats". 7. I fältet "Adress" skriver du eller klistrar du in adressen till sidan du vill länka till. 8. Välj "Ok". 9. Länken visas i editorn med gul bakgrund. Länk till sida i Episerver 1. Markera det ord/de ord som ska bilda länk 2. Välj "Infoga hyperlänk" 3. Dialogrutan för "Länkegenskaper" visas, med fliken "Webbsida" aktiv. Ordet/orden du har markerat visas som "Klickbar text" Bild 27 4. I fältet "Länktitel" anger du den text som ska visas som tips på länken, information som är viktig för alla som läser webbsidan med hjälp av olika hjälpmedel. 5. I fältet "Målram" väljer du "Sida på denna webbplats" eller inget val alls. Ange vilken sida du vill länka till genom att välja knappen till höger om fältet "Adress". Du får då upp en ny dialogruta som visar webbplatsens struktur. 7. Välj den sida du vill länka till i strukturen, klicka "Välj". 8. Välj "Ok". 9. Länken visas i editorn med gul bakgrund. 18
Länk till epost-adress Genom att länka till en e-postadress möjliggör du för dina besökare att kunna skicka e-post-meddelanden direkt. När en besökare klickar på länken öppnas dennes epost-program och den adress du har skrivit fylls automatiskt in i adressfältet. 1. Markera det ord som ska bilda länk 2. Välj "Infoga länk" 3. Dialogrutan för "Länkegenskaper" visas. Välj fliken "E-post". Det ord som du har markerat visas som "Klickbar text". Bild 28 4. I fältet "Länktitel" anger du den text som ska visas som tips på skärmen, information som är viktig för alla som läser webbsidan med hjälp av hjälpmedel. 5. I fälet "E-postadress" skriver du den e-postadress som länken ska gå till 6. Välj "Ok". 7. Länken visas i editorn med en gul bakgrund. Infoga dokument på webbsidan Du kan infoga dokument på webbsidan genom att dra och släppa dem direkt från filhanteraren in på webbsidan. 1. Ha sidan öppen i redigerar-läge och öppna "Filhanteraren" (se bild 14). 19
2. Bläddra fram till den fil du vill infoga. 3. Markera filen, klicka och dra den till önskad plats i sidan. 4. Filen länkas nu till sidan och texten som visas i länken är sökvägen till filen. Om du vill ändra den ställer du markören i texten och väljer "Infoga dokument". Ändra texten i fältet "Klickbar text" och välj sedan "Ok". Lägga in en bild som också är en länk 1. Ställ markören på den plats i editorn där du vill placera din länkade bild 2. Välj "Infoga länk". 3. "Dialogrutan för "Länkegenskaper" öppnas. Välj "Klickbar bild" och klicka på ikonen till höger, den för verktyget "Ändra bildegenskaper" Bild 29 4. Filhanteraren öppnas. Leta reda på er sajts mapp. 5. Välj bild genom att klicka på bildens namn. Om du vill se miniatyrbilder kan du kryssa i rutan för "Visa miniatyrbilder". Dubbelklicka på bildens namn om du vill se bilden i sin rätta storlek. 6. Välj "Infoga". Du har nu valt vilken bild du vill länka in på din sida. 7. Dialogrutan för "Bildegenskaper" visas nu automatiskt. Ange en alternativ text till bilden i fältet "Alternativ text". Skriv också in "0" på raden för "Ramens bredd", annars får bilden en blå/lila ram runt sig. 20
Bild 30 8. Välj "Ok". Du är nu klar med inställningarna för bilden och går vidare med själva länkningen. Dialogrutan "Länkegenskaper" visas. Bild 31 9. I fältet "Länktitel" anger du den text som ska visas som tips på länken. 10. I fältet "Målram" väljer du hur länken ska öppnas. 11. Som länkmål väljer du "Sida på denna webbplats" eller "Sida på annan webbplats". Välj/skriv in vilken adress bilden ska länkas till. 12. Klicka "Ok". 13. Bilden länkas in i sidan och blir samtidigt en länk till vald adress. 21
Se till att undvika länkar som heter Läs mer i största möjliga mån! Länkar av det slaget försvårar sidans läsbarhet för de med funktionsnedsättningar. Det är bättre att bädda in länkningen inne i texten, så att länken blir begriplig i sig själv! Exempelvis genom att länka hela meningar. Kalendern i Episerver I Episerver finns en kalenderfunktion. När man lägger in en kalenderhändelse skapar kalendern en egen, klickbar länk in till varje separat händelse där man lite närmare kan beskriva evenemanget. För att lägga in en kalenderhändelse ställer man sig på Aktiviteter (eller Kalender beroende på vad sidan är döpt till) och klickar sedan på Ny sida (eller högerklickar och väljer Skapa ny ). Här slipper man välja sidtyp utan kommer direkt in på redigerar-sidan. Bild 32 Här ger man kalenderhändelsen namn, starttid och sluttid. Sedan kan man använda textredigeringsfönstret som vanligt, och där skriva något om händelsen, lägga in bilder eller länkar osv. När man sedan sparar och publicerar detta genererar kalendern en sida där de aktuella aktiviteterna listas med det namn man gett den. 22
Bild 33 Startsidan artikelväljaren Startsidans innehåll genereras via en artikelväljare. Detta betyder att man inte behöver skriva separata texter för startsidan (som tidigare med startsidans celler ). Istället väljer man vilka artiklar från sajten som man vill plocka upp och även visa på startsidan. Episerver tar då de första raderna och lägger till en Läs mer -länk som leder in till hela artikeln. För att komma åt att ändra på startsidan går man in under Redigera. Bild 34 23
För att hämta upp artiklar till startsidan klickar man på de vita fyrkanterna. Då öppnas Episervers webbträd: Bild 35 Markera sidan som du vill ska synas på startsidan, klicka sedan på Välj. Då hamnar artikeln i artikelväljarens listning (se bild 33). Klicka sedan på Spara och publicera. 24
Om man vill infoga en liten bild på startsidan tillsammans med artikeltexten, går man in på önskad artikels sida, klickar på Redigera och sedan Avancerad information. Där väljer man vid Bild i listningar den bild man vill ska synas på startsidan. Vill man lägga in sådana bilder ska de vara 120 x 85 pixlar stora. Bild 36 25
Bra saker att tänka på När ni ska lägga upp sidans struktur och innehåll: börja med att fundera över vad ni tycker är det absolut viktigaste för era besökare att få reda på. Detta ska de nämligen kunna komma åt allra enklast, företrädelsevis genom menyrubrikerna längst upp. Surfa runt på andra hemsidor och fundera över vad du tycker gör en bra hemsida. Det är bättre att börja smått men att hålla sidan levande genom att uppdatera den regelbundet. Lägger man ner mycket tid i början med att fylla sidan med massa material men sedan inte återkommer för att förnya innehållet, är det stor risk att även besökarna slutar återkomma. Försök att uppdatera främst startsidan det är via den som ni lockar in besökare. Lokala bilder lyfter webbplatsen och får den att kännas personlig och aktuell. Tänk dock på att inte göra sidan för tung så att den tar lång tid att ladda upp. Tänk också på att inte lägga in för stora bilder och på det viset spräcka de grafiska ramarna. Sprid er sidas adress! Ha med adressen när ni gör reklam, på brevpapper, nämn den när ni talar med folk. Många, speciellt de som ännu inte är engagerade uppskattar att först kunna ta reda på information på egen hand. Support När ni behöver hjälp med hemsidan, inloggning eller annat tekniskt hör ni av er till Sobernet support som man når på support@sobernet.nu eller 08-672 60 20. 26