Tema: Kom igång med Webbfronter

Transkript

1 Tema: Kom igång med Webbfronter Fronter 82 Detta dokument är producerat av Fronter as Dokumentet får endast kopieras eller distribueras elektroniskt om det finns kontrakt med Nytt i detta dokument: Exempel på skola med egen mall för Webbfronter Tema: Kom igång med Webbfronter... 1 Inledning... 2 Förord Exempel på en färdig webbplats skapad med Webbfronter Organisation av filer och mappar... 5 Mappstruktur Innehållsproduktion... 9 Startsida (Start Om oss) Exempel på en sida med länkar till dokument Exempel på en Lista i en Presentationssida Exempel på en Presentationssida som innehåller bilder Exempel på en Presentationssida som innehåller klickbara bilder Praktiska tips Summering Skapa webbplats Mall Toppram Menyknapparna Publisering Administratörens uppgifter Exempel på webbplats med egen mall Versjonskontroll

2 Inledning Detta dokument behandlar verktyget Webbfronter. Det genomgående exemplet visar hur en webbplats kan skapas genom att använda en av Fronters mallar. Dessutom visas hur själva innehållet skapas och struktureras. Exemplet som visas bygger i stor grad på webbplatsen för Torvmyrane skola i Florø ( De har välvilligt ställt sitt material till förfogan så att det har kunnat bli en del av denna dokumentation. Tack till skolan för denna välvillighet. För den lite mer avancerade användaren kan det vara aktuellt med att anpassa egna mallar för sin webbplats. Detta ingår inte i detta dokument. Fronter är under kontinuerlig utveckling och förbättring. Det kan därför förekomma avvikelser mellan dokumentation och applikation. Denna handledning är skriven till Fronter 82. Lycka till. Lillehammer, augusti 2008 Steinar Hov/Ingun Vaglid Förord Webbfronter är ett verktyg för att upprätta en webbplats för en skola eller för att skapa samt publicera hemsidor för elever, anställda, klasser o.s.v. Målet med denna dokumentation är att vem som helst skall kunna skapa och uppdatera en webbplats med hjälp av Webbfronter. Denna dokumentation har följande uppbyggnad: 1. Först visas en färdig webbplats som i sin helhet är skapad med hjälp av Fronters verktyg samt en av de fördefinierade mallarna. 2. Sedan visas hur filer och mappar som tillsammans utgör resurser för webbplatsen är organiserade i Fronter. 3. Därefter visas hur innehållet är skapat med Fronters olika verktyg. 4. Så kommer vi till den del där själva webbplatsen får sin form genom att välja mal, rubriker, innehåll, menyer osv. 5. Slutligen den administrativa delen. Här visas de inställningar som måste göras för att göra verktyget tillgängligt för användarna. Webbplatsen för exemplet som används genomgående i denna dokumentation finns på adressen: Var klar över att detta är en webbplats som är skapad för att utgöra grund för denna dokumentation. Det kan därför finnas ändringar och länkar som tidvis inte fungerar. Som tidigare har nämnts baseras exemplen sig på Torvmyrane skolas webbplats och det förekommer en blandning av äkta och påhittat innehåll. 2

3 1. Exempel på en färdig webbplats skapad med Webbfronter Innan vi ser på de tekniska sidorna av detta börjar vi med ett exempel på en färdig webbplats för den virtuella skolan Elging skola. Detta baserar sig på Fronters mall Black: Om oss: Skolan: SFO: 3

4 Förskola: Elevsidor: 4

5 2. Organisation av filer och mappar En webbplats är vanligtvis uppbyggd av en startsida samt klickbara knappar och länkar. När man använder Webbfronter tillsammans med en av de förhandsdefinierade mallarna måste man ange följande. Vad som är startsidan Vilka rubriker som knapparna skall ha Vilka menyval som skall finnas för var knapp Vad som är innehållet för vardera menyval Principen är att skapa en mappstruktur där alla relevanta resurser är samlade. Normalt är följande Fronterverktyg aktuella: Presentationssida Artikel Lista Redigeraren Dessutom tillkommer det självklart dokument (pdf, doc osv.) som det ofta länkas till via verktygen ovan. Notera att följande verktyg inte kan användas i Webbfronter: Meddelande Kalender Nyheter (kan användas efter anpassning) Forum avstemning 5

6 Nedan visas ett exempel på hur en webbplats för en skola kan konstrueras på detta sätt. Först skapas ett eget rum som skall innehålla de relevanta resurserna. I arkivverktyget organiseras resurserna såsom anges nedan. Mappstruktur Överst på webbplatsen finns en rad med 8 knappar: Skapa först alla huvudmapparna som var och en utgör en huvudmeny i form av dessa knappar: I detta exempel finns 5 mappar som vardera representerar en knapp. Detta innebär att det kommer att finnas 3 oanvända knappar då Fronters mall innehåller 8 knappar. Innehållet i var och en av dessa huvudmappar är först en mängd undermappar. Dessa undermappar kommer att visas som menyval i vänstermarginalen: 6

7 Mappstrukturen under huvudmappen Om oss utgör menyvalen som visas ovanför: Från innehållet i dessa undermenyer väljs det som skall visas i huvudramen när man gör ett val i menyn: 7

8 I exemplet ovan visas skolans historia. Text och bilder är infogade genom att använda verktyget Artikel: Som visas ligger denna artikel i mappen Historien vår och ser ut som följande: 8

9 Här visas att det är samma som visas på webbplatsen. 3. Innehållsproduktion Det som man önskar visa i huvudramen skapas med Fronters verktyg. Här följer ett par exempel på hur detta kan göras. Startsidan (den sidan som automatiskt visas när man går in på webbplatsen) är skapad som en egen Presentationssida på samma nivå som huvudmapparna: Det är viktigt att använda sig av logiska namn på filerna, här börjar filnamnet med ordet Start för att ange en funktion. De andra start filerna är startsidorna för resterande menyknappar. 9

10 Mappen Om oss innehåller ett antal undermappar som presenterar skolan. Titlarna på dessa undermappar visas i vänstermarginalen när någon klickar på knappen Om oss: Startsida (Start Om oss) Låt oss se på något av själva innehållet. Vi börjar med det som visas i huvudramen när man kommer till webbplatsen. Detta är Start Om oss som är skapad med hjälp av verktyget Presentationssida: I redigeringsläge ser det ut som följande: 10

11 Dokumentet är sammansatt av texter, bilder samt linjer för att skapa ett bra intryck, det lönar sig att lägga ner lite tid på designen av sina sidor! Exempel på en sida med länkar till dokument Här tittar vi på ett annat exempel: I denna mapp (Filosofi i skolen) finns pdf-dokument samt en Presentationssida. Själva Presentationssidan innehåller text, en horisontell linje samt interna länkar till de två dokumenten: 11

12 På webbplatsen ser det då ut som följande: Dokumentet (pdf-format) är nu tillgängligt för användarna via den interna länken. 12

13 Exempel på en Lista i en Presentationssida Lista kan vara ett praktiskt verktyg när man skall skapa ett länkarkiv: Här visas ett exempel på en lista med information berörande förskolan. Det är viktigt att välja de alternerande färgerna (1) så att de passar ihop med övriga färger på webbplatsen. Här har man också använt sig av funktionen beskrivning (2): Detaljerna för skapandet av en rad visas här: 13

14 Listor är bra för både externa källor såsom interna genom att använda sig utav intern länk. Denna lista finns i själva Presentationssidan: Här är text, linje och en Lista i en Presentationssida kombinerade till en helhet. 14

15 Exempel på en Presentationssida som innehåller bilder Förutom att skapa en Presentationssida med text, linjer och länkar kan man naturligtvis också infoga bilder: I regigeringsläget kan det se ut som följande: 15

16 Det är viktigt att anpassa storleken på bilderna, både i förhållande till varandra och i förhållande till texten så att ett harmoniskt intryck fås. 16

17 Exempel på en Presentationssida som innehåller klickbara bilder I detta sista exempel visas en Presentationssida som innehåller bilder som är klickbara. Detta innebär att bilderna fungerar som länkar till olika resurser: Vid menyvalet Redigera egenskaper för en bild får du upp inställningsmöjligheterna för att koppla en länk till bilden: 17

18 Om man har angett en beskrivning när bilden överfördes, kommer både texten och bilden att vara klickbara. Praktiska tips En mycket praktisk funktion i Webbfronter är att man kan redigera innehållet direkt från webbplatsen: Längst ner till höger på vardera sidan finns en symbol (som skall ändras) som är en länk till källfilen. Om man redan är inloggad i Fronter kan man redigera sidan genom att klicka på symbolen: 18

19 Om man inte är inloggad i Fronter blir man krävd på inloggning: Efter inloggning öppnas dokumentet i redigeringsläge: 19

20 Notera att om automatisk publicering är aktiverad (beskrivs längre fram i detta dokument) kommer ändringarna automatiskt att publiceras på webbplatsen. Summering Vi har visat hur en mängd olika exempel på hur innehållet kan byggas upp med hjälp av Fronters verktyg. Det är viktigt att planera detta arbete så att mappar, filer, bilder osv. blir organiserade på ett bra sätt. Alla mapparna tillsammans med Presentationssida, Artikel, Lista osv. utgör grunden för det som skall visas på webbplatsen. Det som återstår är att koppla de olika objekten till de olika knapparna och mapparna. Allt det som hittills har beskrivits kan göras oavsett om Webbfronterverktyget är aktiverat eller inte, men för att koppla samman det hela måste administratören ha gjort en del inställningar, vilka beskrivs under punkt 5. 20

21 4. Skapa webbplats Det rum som skall administrera webbplatsen måste ha verktyget Webbfronter: Man lägger till verktyget på sedvanligt sätt: 21

22 I detta exempel är det ett eget rum, Webinformasjon där alla resurser är samlade. Från Webbfronter i vänstermenyn väljer man Ny webbplats: Man väljer nu vilken webbplats detta skall kopplas till (1), namn på webbplatsen (2) samt vilken mall (3) som skall användas: I rullgardinsmenyn som nu blir tillgänglig kopplas de olika mapparna och filerna till menyalternativen. Dessutom anges vad som skall visas i toppramen och det är också möjligt att ändra mallen här: 22

23 Låt oss ta en närmare titt på de olika stegen. 23

24 Mall Här kan man ändra mall utan att förlora övrig information: Toppram Här anges vilken text som skall visas i toppramen (t.ex. skolans namn) (1), om det skall vara en bild (logotyp) längst till höger (2) och så titlarna på de menyknappar (3) som skall användas: Genom att uppge skolans namn samt lägga in en logotyp kan toppramen se ut som: 24

25 Texten kan inte formateras när man använder sig av en färdig Frontermall och placeringen av bilderna är också förhandsdefinierad. Menyknapparna Vi skall nu titta på hur menysystemet är uppbyggt genom att använda den första knappen Meny1 som exempel: Välj först rätt menyknapp Meny 1 kommer att vara den som ligger längst till vänster (1). Därefter måste man ange vilken mapp som skall ange titeln på knappen sam de underliggande manyvalen som visas i vänsterkant (2): 25

26 Här är mappen Om oss vald som rot-mapp detta blir titeln på menyknappen längst till vänster. Dessutom ser du alla undermappar som är skapade under huvudmappen Om oss. Dessa undermappar kommer att vara menyvalen som visas i vänsterkant när man klickar på knappen Om oss. Då varje undermapp kan innehålla mer än en fil måste man gå igenom varje punkt så att det är rätt fil som visas när någon klickar på alternativet: Här ser man att mappen Nyttige filer innehåller sex filer, 4 pdf-dokument, 1 docdokument samt en Presentationside (Nyttige filer). Det är den sista filen som skall visas så denna måste väljas från rullgardinsmenyn. Var noggrann med att kolla alla mappar så att det verkligen blir rätt fil! Dessutom måste man ange vilken fil (3) som skall visas i huvudramen när menyn väljs: Här är Start Om oss vald och då detta är Menu1 kommer detta också vara sidan som visas i huvudramen när man kommer in på webbplatsen. 26

27 Här visas de resterande menyvalen: Meny 2 Skolen: Meny 3 SFO: Meny 4 Barnehagen: 27

28 Meny 5 Elevsider: Lägg märke till att det för vart och en av menyvalen är en startsida vald som visas när någon klickar på en av knapparna. Under fliken Inställningar finns följande val: Allmänt: 28

29 Här kan man ändra huvudwebbplats, avgöra om fler webbplatser skall kunna skapas samt ange om autopublicering skall vara aktivt. Denna sista punkt är praktisk. Man kan ändra innehållet på en sida och dessa ändringar blir automatiskt publicerade! Server: Som standard är det inställt att Fronters server är vald för webbplatsen, men det är möjligt att publicera till en egen ftp-server. Publisering I allmänhet rekommenderas att autopublicering är aktiverat, men när man gör strukturella förändringar är det bäst att ha detta avstängt och istället använder man valet Publicera för att uppdatera webbplatsen: 29

30 Då överförs alla filer på nytt så att de sista ändringarna kommer med. Valet Följ länken längst ut till höger är en genväg till webbplatsen: 30

31 5. Administratörens uppgifter Under Inställningar kommer administratören ha tillgång till verktyget Mallar för Webbfronter: I den övre delen av bilden ser man att det finns två förhandsvalda alternativ, Distribuera och Tillåt publicering: Dessa alternativ innebär att det kan skapas alias på underliggande nivåer och att dessa webbplatser kan bli publicerade. Om man väljer en skola (på en underliggande nivå) kan det skapas ett eget alias för den skolan: 31

32 Här är skolnoden Elging grunnskole vald och vi väljer Lägg till alias: I detta tillfälle skapas en webbplats som får URL en och som tillåter publicering an innehåll. Sedan är det bara att avmarkera för Distribuera så är det inte möjligt att skapa undernivåer till denna webbplats. Om skolan önskar att personal och elever skall kunna skapa egna webbplatser, måste detta alternativ vara markerat. I den nedre delen av fönstret visas de tillgängliga mallarna. Dessutom är det möjligt att lägga till en eller flera egenproducerade mallar (ta kontakt med Fronter för närmare information): 32

33 Nedan visas miniatyrbilder av de mallar som Fronter levererar: 33

34 Exempel på webbplats med egen mall Det är möjligt att skapa en egna mallar till Webbfronter vilket några Osloskolor har gjort. Här ser vi ett exempel från Elvebakken: Webbplatsen har 4 centrala informationsområden: 1. Menysystem 2. Nyheter 3. Diverse information om skolan 4. Central information Om man tittar lite närmare på inställningarna i Webbfronter finner man bl.a. detta: 34

35 Här finns de olika objekten som skall publiceras på webbplatsen. De grundläggande principerna känns igen från det som har nämnts tidigare i dokumentationen. Här följer ett exempel: Detta är inställningen för menyvalet Skolens tilbud. På liknande sätt kan man bygga upp andra mallar. Detta förutsätter goda kunskaper om html och css. 35

36 Versjonskontroll Versjon Dato Beskrivelse Ansvarlig Tema: Webfronter Steinar Hov Ingen endringer Steinar Hov QA Revisjon Dato Godkjent av Kommentarer Georg Ranhoff Gjennomgått og korrigert Ingun Vaglid Godkjent 36