Utbildningskompendium Open24. Ver 4-2013



Relevanta dokument
Manual Open24 Webtool Systemversion 1.10

Manual Open24 Webtool. Gällande från och med programversion 1.12

Utbildning Webtool Utbildningskompendium Webtool Ver 5

Webbverktyg - Webtool

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel:

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

Grundutbildning EPiServer CMS6

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

Manual för lokalredaktörer villaagarna.se

Manual till publiceringsverktyg

Inloggning open24/admin/system/default.asp

Manual för lokalredaktörer villaagarna.se

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

Lathund steg för steg

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad ) Birger Eriksson webblots.se

Diabetes.se CMS guide för föreningar. Senast uppdaterad:

Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Lathund för webbpublicering på Vi Ungas distriktswebbplatser

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

Arg-administratörens guide till Umbraco v 1.2.1

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: Byta lösenord


Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Användarmanual för Content tool version 7.5

1. Uppdateringsmodul (CMS)

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

APA för nybörjare. Innan du börjar. Översikt


ODD FELLOW ORDEN. Manual. Sidverktyget. oddfellow.se. version

SLU anpassad lathund

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

SJF LATHUND EPISERVER 7.0

Manual för Typo3 version 4.2

Användarutbildning i SiteVision

Så här funkar Föreningsliv

Manual för webbpublicering. Enköpings kommun

STEGBESKRIVNING - WEBB

Användarutbildning i SiteVision

Hur man lägger upp och redigerar dokument i Typo3.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Administration av lagets arbetsrum lathund

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version , rev (19)

Manual för din hemsida

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Administration av asrp.se

3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare

Användarutbildning i SiteVision

Dags att skriva uppsats?

FUB och Klippan - Vårt webbverktyg I din webbläsare, skriv in eller klicka på Logga in längst ner på startsidan.

Skriv före adressen och lämna bort www enligt modellen:

Redigera forskarprofil i EpiServer

Nya liten manual i Drupal Version 1.1

12 Webb och kurshemsidor

Snabbguide till Polopoly

InfoGlue för lättredaktörer

Användarmanual för administration av

Klassens aktivitet. Inställningar

Snabbkurs i Wordpress för IOGT-NTO

Version: Datum: DynaMaster 5 Golf Övergripande manual

Uppdaterad: Lathund. Strukturträdet

Manual för att publicera på Samarbetsportalen

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad:

Detta är en fördjupnings- och vidareutbildningsmanual För SPFs webbsidor.

Wordpress och Sociala medier av Sanna Ohlander Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se

Administration av lagets arbetsrum. Lathund

Handledning för redigering av lagsidor.

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

Innehåll. HTML Editor Sida 2 av 30

Manual - Introduktionskurs SiteVision

Wordpress och Sociala medier av Sanna Ohlander Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se

Användarmanual för Hemsida

Webbsidekurs för nybörjare

Lathund Hemsida för Astma- och Allergiförbundets föreningar

För att öppna galleriet, ange adressen

Lathund skapa och redigera sidor en projektwebb

Kort instruktion för arbete i Sitevision ( exempel från ATM)

VERKTYGSFÄLTET I ARTIKELEDITORN

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

Manual för visionutv.net Redigera

[ANVÄNDARMANUAL MYCLUB LAGSIDE-ADMINISTRATION]

KOM-IGÅNG-GUIDE. Kom igång och redigera din hemsida! SmelinkWeb4 editor 2

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Grundkurs 1 IKT Filhantering

Skoladmin kom igång! Innehåll

Användarmanual - OVK. Användarmanual OVK Version 1.5 Daterad:

Surfa till adressen och logga in med dina vanliga användaruppgifter.

Manual för. 2.4 KALAS Sitemanager

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA

Innan du börjar göra din katalog så rekommenderar vi att du läser igenom den korta introduktionen på startsidan.

Uppdaterad Lathund Synpunkten för handläggare och ansvarig chef

Lathund FE-edit i Typo3

1. Gå till ungdomssidan: eller följ länken till ungdomssidan på

Lathund för att lägga in information på ovanaker.se Innehållsförteckning

1. Polopoly och webbpublicering på SU

Lathund för redaktörer. Lokala webbplatser Sacoföreningar, Sacoråd och Akademikerföreningar

Manual för Episerver 5 för redaktörer i förskola och skola Innehåll

ANVÄNDARMANUAL, INTERAXO

Kom igång och redigera din hemsida!

Manual

Transkript:

Sida: 1 (45) Utbildningskompendium Open24 Ver 4-2013

Sida: 2 (45) Utbildningskompendium Open24... 1 Ver 4-2013Allmänt om Webtool 3... 1 Allmänt om Webtool... 4 Open24... 4 Arbetsyta & Navigeringsträdet... 5 Arbetsytan... 6 Statistik... 7 Logga ut... 9 Spara samt Spara och Publicera -knapparna... 9 1 Skapa sida (Toppnavigering)... 10 1.1 Skapa sida (Undersida)... 10 2 Redigera sida... 11 2.1 Kopiera in text från Word... 11 2.2 Lägga in youtube filmer... 12 2.3 Skapa en ny version av sidan... 15 2.4 Visa eller dölja i navigeringen... 16 3 Ta bort sida(papperskorgen)... 16 3.1 Återskapa en sida från papperskorgen... 16 4 Flytta sidor i strukturen... 17 5 Skapa Kalenderhändelse... 19 5.1 Ta bort en händelse... 21 6 Editor... 21 6.1 Stilmallar/Rubriksättningar... 24 6.2 Textredigering... 25 6.3 Ladda upp - Infoga en bild... 26 6.4 Editera Egenskaper för bilder... 29 6.5 Ta bort en bild... 30 6.6 Ladda upp ett dokument... 31 6.7 Länka ett dokument på sidan... 32 6.8 Skapa en intern länk (Sida inom strukturen)... 33 6.9 Skapa extern sida (länka till en annan webbplats)... 33 6.10 Skapa ett storleksbestämt fönster med extern länk... 34 7 Skapa puffar... 34

Sida: 3 (45) 8 Lösenordsskydda sidor... 36 9 Tabeller... 38 10 Skapa Ankare... 41 11 Bildgalleri... 43 11.1 Skapa album... 43 11.2 Inställningar för bildgalleri... 43 12 Support... 44 Utbildningsmaterial... 45

Sida: 4 (45) Allmänt om Webtool Webtool är ett webbpubliceringssystem baserat på ett modulsystem kallat Open24. Webtool är helt webbaserat och konfigurerbart för att kunna administrera många olika sajter med flera olika användare, t ex inom en större föreningsorganisation, företag eller liknande, men fungerar lika bra även till en mindre webbplats. Systemet bygger på mallsidor som har olika egenskaper och utseende. Administratören kan med hjälp av dessa skapa nya sidor, undersidor, arbetskopior mm. Det krävs inga förkunskaper i htmlprogrammering eftersom alla förändringar görs med hjälp av formulär på mallsidorna. Open24 Open24 är en moduluppbyggd, webbaserad programvaru- och utvecklingsplattform. Open24 består i grunden av ett bassystem, Open24 System. Detta innehåller basfunktionalitet som till exempel: - Behörighetssystem - Standardiserat användargränssnitt - Dokument- och bildarkiv - Filuppladdning - Loggning av aktiviteter i modulerna - Hantering av moduler (Webbverktyg, Medlemsregister)

Sida: 5 (45) Arbetsyta & Navigeringsträdet Webtool-fönstret är uppbyggt av två delar. Till vänster finns navigeringsträdet där man hittar alla sidor inom sajten. Den kan liknas vid Windows Utforskaren eller en sajtkarta. Till höger är arbetsytan. Via flikarna i arbetsytans överkant, ändras arbetsytans funktion. De olika funktionerna är Layout, Redigera, Versioner, Säkerhet, Egenskaper samt Statistik. Navigeringsträdet är uppbyggt på samma sätt som utforskaren i Windows. Ett plustecken framför ikonen visar att det finns underliggande sidor. Klicka på plustecknet för att fälla ut och på minus för att fälla ihop. De olika symbolerna: Startsida Sida Opublicerad sida Dold sida Skapa ny sida Länk Flytta sidan Sida med RSS-Kanal Nyhet Opublicerad nyhet Kalendariehändelse Flytta sida uppåt Flytta sida nedåt

Sida: 6 (45) Arbetsytan I arbetsytan sker redigeringen av innehållet men du kan även förhandsgranska sidan samt göra vissa säkerhetsinställningar, se statistik, mm. I det här avsnittet går vi igenom de olika flikarna och dess funktioner Layout Detta är förhandsgranskningsläget där du ser hur din sida kommer att visas i webbläsaren när den är publicerad Redigera Här finns html-editorn där du skriver din text, lägger till bilder, länkar, mm. Spara, Spara och publicera, Ta bort. Versioner Skapa en kopia av en sida och arbeta med den tills du känner dig nöjd. När du är färdig publicerar du den och har ändå den gamla versionen kvar. På så vis behöver du inte vara orolig för att dina ändringar kommer att synas direkt på webbplatsen utan kan arbeta ostört med att redigera. Säkerhet Här listas de som har behörighet att redigera sidan. Endast Huvudadministratören har tillgång till och kan ändra inställningarna under denna flik. Egenskaper Här hittar du tekniska fakta om sidan. T ex vilken adress den har, vilket nodid (dvs nummer i strukturen) och annat. Administratören kan även välja att lösenordsskydda sidan, byta layoutmall samt ändra dynamiska egenskaper Statistik Statistiken baseras på information från Google Analytics och visar ett urval av den information som finns att utläsa när det gäller besökare på en webbplats och dess undersidor. Statistiken uppdateras en gång per dygn.

Sida: 7 (45) Statistik Statistiken är uppbyggd på åtta stycken delar. Man når statistiken via de tabbar som finns i editeringsläget. Statistiken finns längst ute till höger. Man kan se statistiken för hela webbplatsen genom att klicka på startsidan eller välja en enskild sida som ex Om oss. När valet är gjort på vad man vill se statistiken för så kan man välja under Visa statistik för: hur man vill se det mera i detalj. Se bild exempel nedan: Statistik - startsida

Sida: 8 (45) Statistik om oss Antal direktbesök Visar antalet besök som startat på din sida/webbplats t.ex. genom att besökaren klickat på en länk från en annan webbplats eller ett e-postmeddelande. Antal sidvisningar Sidvisningar är det totala antalet sidor som visats på din webbplats eller det totala antal gånger den specifika sidan har visats. Genomsnittlig tid på sidan Anger hur lång tid varje besökare stannar på en sida. Observera att detta kan vara missvisande, eftersom besökare ofta lämnar webbläsarfönster öppna när de inte tittar på eller använder din webbplats. Andel nya besökare Anger hur många procent av antalet besök/direktbesök som gjorts av en besökare som besöker webbplatsen för första gången. Avvisningsfrekvens Avvisningsfrekvensen är procentandelen enkelsidiga besök (dvs. besök där personen lämnade webbplatsen från ingångssidan). Avvisningsfrekvensen är ett mått på besökskvalitet och en hög avvisningsfrekvens tyder ofta på att webbplatsingången inte är relevanta för besökarna. Statistik saknas Statistik för vissa tidsintervall kan saknas av olika orsaker. Det kan bero på att sidan inte haft några besök under perioden, eller periodens inledning, att statistikinsamlingen inte påbörjats eller att sidan är ny. Antal besök (endast på statistik för hela webbplatsen) Visar antalet besök på din webbplats. Genomsnittlig tid på webbplatsen (endast på statistik för hela webbplatsen) Anger hur lång tid varje besökare stannar på webbplatsen. Observera att detta kan vara missvisande, eftersom besökare ofta lämnar webbläsarfönster öppna när de inte tittar på eller använder din webbplats.

Sida: 9 (45) Logga ut Om man vill lämna systemet så klickar man på denna knapp och loggas ut och transporteras återigen till inloggningssidan. Spara samt Spara och Publicera -knapparna Innan du lämnar Redigera-läget måste du spara dina ändringar. Spara: Används om du har skapat en ny sida och ännu inte vill publicera den. Alla ändringar sparas men sidan blir inte synlig på webbplatsen. Klickar du Spara när du gjort ändringar på en redan publicerad sida så kommer ändringarna att publiceras direkt. Spara och publicera: När du gjort ändringar på en ny sida och vill publicera dessa. På en redan publicerad sida fungerar den som vanliga Spara-knappen, dvs ändringarna kommer att publiceras direkt.

Sida: 10 (45) 1 Skapa sida (Toppnavigering) Klicka på ikonen för Startsidan i navigeringsträdet så att den blir markerad och ikonen för Skapa ny sida tänds. Klicka på Skapa ny sida. Ett nytt fönster öppnas. Där hittar du de mallsidor som finns tillgängliga. Välj en passande mall, förslagsvis Ny sida Lokal. Döp sidan till det namn du vill att den skall visa i menyn (Standardnamnet är Namnlös). Den nya sidan hamnar underst i navigeringsträdet och heter Namnlös såvida man inte namnger den till något annat. Klicka på Redigera fliken ovanför arbetsytan för att ändra namnet och för att redigera sidan. o Fyll sidorna med valfritt innehåll o Är det första gången man skapar sidan måste man publicera den innan den kan visas. Detta gör man genom att klicka på knappen Spara publicera sidan. o Om man bara klickar på spara utkast och Inte publiceras på webben kommer det bara att sparas som ett o Är sidan redan publicerad så behöver man bara klicka på knappen Spara sidan. o Se på sidan i Layout läge. 1.1 Skapa sida (Undersida) Klicka en gång på den sida du vill skapa en undersida till. När den är markerad tänds ikonen för Skapa ny sida längst upp i navigeringsträdet.

Sida: 11 (45) Klicka på Skapa ny sida. Ett nytt fönster öppnas. Där hittar du de mallsidor som finns tillgängliga. Välj en passande mall, förslagsvis Ny sida Lokal. Döp sidan till det namn du vill att den skall visa i menyn (Standardnamnet är Namnlös). Sidan hamnar under den sida du valde som utgångspunkt i navigeringsträdet och får namnet Namnlös såvida man inte namnger den till något annat. Klicka på Redigera -fliken ovanför arbetsytan för att ändra namnet och för att redigera sidan. ÖVNING 1 och 1.1 (Skapa Toppnavigering samt ny Undersida) 2 Redigera sida Klicka på den sida i navigeringsträdet du vill redigera och sedan på Redigera -fliken ovanför arbetsytan. Markera den text du vill ändra i editorn samt utför de ändringar du vill göra Klicka på knappen Spara sidan Se på sidan i Layoutläge 2.1 Kopiera in text från Word Att kopiera in text från Word har sina fördelar samt nackdelar. Fördelarna med att kopiera från Word är att all formatering vi har i Word dokumentet följer med(typsnitt, färger osv). Nackdelarna är att även om man i Editorn tvättar HTML-koden så tar den inte bort allt skräp som webläsaren inte tycker om. Man kan ju förstås göra något åt det dock. Det kan kännas som lite bökigt, men i slutändan är det ju ett bra resultat som gör att personen som är på sidan Vill läsa det jag skriver osv. Vad man gör är att man i editorn klickar på klistra in knappen i editorn.

Sida: 12 (45) Välj sedan i den menyn som kommer fram Klistra in ren text och prova sedan med alternativet Klistra in från Word för att se skillnaden Editorn kommer då att göra om allt till en ren textmassa som man sedan kan formatera och redigera för webben. ÖVNING 2-2.1 (Redigera sida Klistra in text) 2.2 Lägga in youtube filmer Klicka på youtube ikonen enligt bilden nedan I det fönster som kommer upp så klistrar du in den embed kod som det filmklippet på youtube har. Exemplet använder sig av Hälans stigs kanal på www.youtube.com Du går in på ex http://www.youtube.com/user/halsansstig och väljer det klipp du vill lägga in. Vi har valt klippet Film om Hälsans Stig Väl inne på klippet så klickar jag på Dela knappen

Sida: 13 (45) Då kommer denna vy fram och jag väljer att klicka på Bädda in knappen Den lilla kodsnutten som finns inom de markerade taggarna som visas i bilden nedan kopierar jag och klistrar in på detta fönster i editern och avslutar med att klicka på Lägg till knappen samt Spara sidan och klippet är klart och kan ses av alla.

Sida: 14 (45) Klistra in koden i youtube fönstret och avsluta genom att klicka på Lägg till knappen.

Sida: 15 (45) 2.3 Skapa en ny version av sidan Radera version Publicera version Jämför versioner Redigera version Ta bort publicering av version Klicka på fliken Versioner Välj den sida du vill skapa en ny version av Klicka på knappen Skapa ny version Klicka OK i den ruta som kommer upp på sidan En ny kopia av den sidan skapades och heter Kopia av samt namnet på den gamla sidan. Hette den Ex vis Namnlös, kommer kopian att heta Kopia av Namnlös. Vill du nu Redigera den nya kopian så klickar du på Redigera symbolen När du Klickar på Redigera symbolen kommer du till Redigera läget och kan spara om sidan på Spara knappen. Inte förrän du sparar och publicerar sidan kommer den att döpas om. Hade sidan Ex vis namnet Namnlös, kommer kopian att heta Kopia av Namnlös eller något annat du väljer att döpa den till. ÖVNING 2.3 (Redigera sida - Skapa ny version)

Sida: 16 (45) 2.4 Visa eller dölja i navigeringen Om man har publicerat en sida och den visas på webbplatsen kan man dölja den så att den inte syns man kan säga att man avpublicerar sidan. För att göra det klickar man på Redigera knappen och bockar i Dölj i navigering. På så sätt kan man dölja en sida som man inte vill visa innehållet på utan bara göra osynlig för gemene man. 3 Ta bort sida(papperskorgen) När en sida tagits bort med hjälp av knappen Ta bort sidan hamnar den i papperskorgen längst ner i navigeringsträdet till vänster. Ta bort sidan du nyss skapade Markera den sida du vill ta bort Klicka på fliken Redigera Längst ner på sidan klickar du på knappen Ta bort sidan I den rutan som kommer upp på sidan klickar du på Ok knappen 3.1 Återskapa en sida från papperskorgen Återskapa sida från Papperskorgen Klicka på + tecknet framför Papperskorgen i strukturträdet för att expandera trädet Markera den sida du vill ta bort Klicka på fliken Egenskaper

Sida: 17 (45) Klicka på länken ÅTERSTÄLL Klicka sedan på Ok knappen i det fönster som kommer upp på sidan Den sidan du återskapade kommer tillbaka på samma ställe där den senast låg. ÖVNING 3 3.1 (Ta bort sida - Återskapa en sida) 4 Flytta sidor i strukturen Man kan flytta på två olika sätt. Första sättet är att använda upp-ned pilarna andra sättet är att använda sig av flytta dokument För att använda upp-ned pilarna o Markera den sida du vill flytta. När den är markerad tänds pilarna i överkanten av navigeringsträdet o Varje gång du klickar på t ex uppåt-pilen, flyttas den markerade sidan ett steg uppåt i strukturen alt om du klickar neråt-pilen flyttas den markerade sidan ett steg neråt i strukturen. För att använda sig av Flytta dokument Markera den sida/folder du vill flytta. När den är markerad tänds pilarna i överkanten av navigeringsträdet. Klicka på flytta dokument.

Sida: 18 (45) I det fönster som då öppnas väljer du var i strukturen du vill att sidan/foldern skall flyttas. Avsluta med att klicka på Spara knappen i fönstret ÖVNING 4 (Flytta sida inom strukturen)

Sida: 19 (45) 5 Skapa Kalenderhändelse Kalendariefunktionen innebär att man lägger till händelser på liknande sätt som man skapar nya sidor. Kalendern bör användas för aktiviteter som äger rum en bestämd tidpunkt. På webbplatsen visas de händelser vars händelsedatum ej passerat dagens datum. Händelse som redan ägt rum visas ej, eftersom händelsen då redan inträffat. Lägga till en händelse o Klicka på Kalender i navigeringsträdet o Klicka på ikonen Nytt fönstret som öppnas ovanför navigeringsträdet och sedan på ikonen Händelse i o En ny händelsesida skapas (symboliseras av automatiskt till Redigera -läget i navigeringsträdet) och du kommer o Rubrik: Här skriver du rubriken för händelsen (aktiviteten) o Datum för händelsen: Här anger du vilket datum händelsen äger rum. (Man kan skriva datum på 2 olika sätt här). Man skriver manuellt in datumet Eller man kan klicka på den lilla Kalender ikonen enligt bild ovan o Ingress: Kort text som kommer att visas i händelselistan på webbplatsen o Text (editorn): Här skriver du resten av artikeln. o Skribent: Här finns möjlighet att ange ett namn.

Sida: 20 (45) o Publicering: Här kan du ange ett datum om du vill att händelsen ska publiceras vid en viss tidpunkt. Om fältet lämnas tomt, publiceras händelsen direkt. Man skriver manuellt in datumet Eller man kan klicka på den lilla Kalender ikonen enligt bild ovan Klicka på Spara och publicera sidan

Sida: 21 (45) 5.1 Ta bort en händelse o Klicka på plus-tecknet framför Kalender i navigeringsträdet så att alla händelser blir synliga o Klicka på den händelse du vill radera o Välj redigera-läget och klicka på knappen Ta bort sidan ÖVNING 5 5.1 (Skapa en kalenderhändelse - Ta bort en kalenderhändelse) 6 Editor Nedan finns en beskrivning på de knappar som finns i Editorn i Normal läge. Textredigering (Numrerad lista, Punktlista, Minska indrag, Öka indrag) Textredigering (Vänsterjustera, Centrera, högerställ) Textredigering (Ta bort formatering) Infoga bild (Ladda upp bild) Infoga bild (Redan uppladdad) Länka till fil (Pdf, Word dokument) Youtube ikon Skapa en extern länk Skapa en Intern länk (Länka till en skapad sida i sin egen struktur) Ta bort länk Fet text Kursiv text

Sida: 22 (45) Understruken text Genomstruken text Klipp ut Kopiera Klistra in Ångra/Gör om Skapa Ankare Synliga kantlinjer Markera allt Markera ingen Ändra stilmallar Tabeller

Sida: 23 (45) Nedan finns en beskrivning på de knappar som finns i Editorn i HTML läge från vänster till höger Spara Skriv ut Klipp ut Kopiera Klistra in Sök och ersätt Anpassa till fönster Markera allt/inget

Sida: 24 (45) 6.1 Stilmallar/Rubriksättningar När man skapar en sida för webben är det viktigt att använda olika rubriknivåer, men också på rätt sätt. Rubrikerna i HTML är H1, H2, H3 etc. t.o.m. H6. Men i Editorn visas de som Rubrik 1-4. Används dessa på rätt sätt så kommer sökmotorerna (ex: www.google.com) att hitta dina sidor enklare och snabbare. Detta medför att även användarna hittar din webbplats. För att personer som navigerar med hjälp av dokumentets rubriker ska ha lättare att hitta rätt så får ingen rubrikstruktur hoppas över. Rubrik 1 eller Rubrik 2 ska användas för huvudrubriker, därefter Rubrik 3, Rubrik 4 i fallande ordning för underrubriker, så den hierarkiska ordningen är viktig. Korrekt användning av rubriker bidrar till: Att få en enhetlig formatering av alla sidor på webbplatsen. Att det blir lättare att läsa dokumentet utan stilmallar. Att sökmotorer hittar relevant information på sidorna. Sökmotorer utnyttjar Var i ett dokument ett ord hittats för att avgöra hur relevant dokumentet är. Om ett ord tillhör ett h1- eller h2-element så anses det mer relevant än om det klassas som brödtext. Användaren får en överblick över dokumentet. Hjälpmedel behöver en korrekt strukturkod för att kunna avgöra vad som är en rubrik. Dokument ska till exempel inte börja med en rubrik märkt h2. Rubrik 1 Rubrik 2 Rubrik 3 Rubrik 4 Absolut viktigast på sidan samt dokumentnamn. Absolut fortfarande viktig, men denna är sidmallens huvudrubrik Fortfarande viktig, sidmallens underrubrik Tre rubriknivåer brukar oftast räcka Rubrik 1 - Beskrivning av innehållet, inte logotypen Huvudrubriken (Rubrik 1) är den viktigaste rubriken på den enskilda sidan och bör användas för att kortfattat beskriva sidans innehåll. Använd bara Rubrik 1 en gång per sida För att behålla relevansen hos den viktigaste rubriken krävs också att den bara används en gång per sida. I de mallar som används i Open24 så är namnet på sidan Den mallens Rubrik 1. Om du har flera rubriker som är lika viktiga på en och samma sida; använd en lägre rubruknivå (Rubrik 2, Rubrik 3). Det viktigaste innehållet först För att skapa en god överblick bör rubriknivåerna användas i fallande ordning, med den viktigaste (Rubrik 1) först. Försök också undvika att hoppa över rubriknivåer då detta kan förvirra dina läsare. Relevansoptimering Du kan styra besökare (sökmotorer & användare) till den mest relevanta sidan inom din webbplats med länkar, men även med olika rubriknivåer tänk på det ;)

Sida: 25 (45) 6.2 Textredigering I editorn finns det två typer av radbryt man kan använda sig av, dessa kallas hårda och mjuka radmatningar. En hård radmatning(nytt stycke) är ett Enterslag. Det ser nästan ut som två mjuka radmatningar. En mjuk radmatning(byt rad) är Shift + Enter och då flyttar man ner markören till raden under. Hoppas att det klarnar lite över användandet av dessa två typer av Radbryt. Dessa taggar finns i HTML koden och kan formateras med hjälp av CSS så att avståndet inte är så stort men då går vi upp några steg på kunskapsstegen. Skapa en ny sida och döp den till Textredigering. Klistra in ett stort textstycke i editorn från utbildningsmaterialet alt skriv in något själva. I den texten så bryter vi ett textblock genom att trycka på Enter tangenten. Detta för att få ett hårt enterslag i editorn och skapa ett nytt stycke Ovanför det första blocket skapar vi en Rubrik 2 eftersom sidans namn är redan en Rubrik 1 I det andra blocket tar vi och gör ett indrag till höger genom att klicka på Indragsknappen i editorn. Gör ett nytt hårt enterslag i det stycket och gör det stycket Kursivt. ÖVNING 6.2 (Redigera text)

Sida: 26 (45) 6.3 Ladda upp - Infoga en bild Här kommer vi att beskriva hur vi hanterar och jobbar med bilder för webben Klicka på det ställe i editorn du vill infoga din bild. Klicka sedan på ikonen infoga bild Bläddra fram till foldern Bilder där du vill spara din bild som du laddar upp Klicka på ladda upp och bläddra fram till bilden du vill ladda upp. Denna bild kan finnas lokalt på din dator, USB sticka eller på ett nätverk.

Sida: 27 (45) När du har bläddrat fram till den bild du vill använda dig av klickar du Öppna i den dialogruta som visar sig enligt bilden nedan. När du valt den bilden du vill använda dig av skriver du en alternativ text på bilden och avslutar genom att klicka på Lägg till knappen. Alternativ text: Detta är en bild jag laddat upp

Sida: 28 (45) Iom en ny Standard för Internet Explorer 8(IE8) så måste vi även fylla i en titel för bilden så att webbläsaren skall kunna presentera Alt texten korrekt. Detta gör vi på följande sätt. Högerklicka på den bilden du har lagt till på sidan och välj Properties. I den Popup ruta som kommer upp klickar vi på Allmänt tabben. Längst ner finns ett fält om heter Titel: Där skriver vi samma text som i Alternativ text ÖVNING 6.3 (Ladda upp Infoga en bild)

Sida: 29 (45) 6.4 Editera Egenskaper för bilder Skapa en ny sida under din Grönköpingsförening Fyll den med en textmassa från utbildningsmaterialet. Klicka på ikonen infoga bild samt välj en bild och klicka på Lägg till Spara sidan och titta på den i layoutläge Klicka på fliken Redigera igen Högerklicka på bilden och välj Properties I det fönster som visar sig då kan nu under fliken Bild och Layout välja ex Vänster justering Klicka på OK-knappen och Spara och titta på sidan i Layoutläge. Sidan ser lite roligare ut nu än innan vi ändrade bildens egenskaper Pröva att gå tillbaks till Redigera och klicka på bilden och Dra den till en annan position i texten. Ex före första bokstaven i texten så får vi se vad som händer. ÖVNING 6.4 (Editera bildegenskaper)

Sida: 30 (45) 6.5 Ta bort en bild För att ta bort en bild eller dokument klickar man på ex ikonen för infoga bild eller på ikonen för nedladdningsbara filer. För att ta bort en bild eller dokument så markerar man bilden/dokumentet och klickar på ikonen. När du har klickat på ikonen så kommer du att få bekräfta att du vill ta bort genom att klicka på Knappen OK eller Avbryt. När du har gjort detta så kommer denna bekanta vy upp för det du valt. Vy för Bilder Vy för Dokument

Sida: 31 (45) Markera bild/dokument och klicka på 6.6 Ladda upp ett dokument Klicka på nedladdningsbara filer Bläddra dig fram i strukturen där du vill lägga ditt dokument. Förslagsvis under Dokumentfoldern Klicka på Ladda upp knappen

Sida: 32 (45) 6.7 Länka ett dokument på sidan Man kan göra detta på två sätt. Det ena sättet är att markera den del av texten du vill skall vara länkat till dokumentet. Det andra sättet är att klicka direkt på nedladdningsbara filer utan att ha någon text länkad. I länk Popup fönstret skriver man själv in i titel vad länken skall vara. Kom ihåg att alltid sätta länkens mål till Nytt fönster. Markera den text du vill ha länkad, alternativt markera en tom del av texten. Klicka på nedladdningsbara filer Bläddra fram till det dokument du vill länka till Sätt en Titel på länken Titel text: Länk till dokument Sedan sätter du vilket mål länken skall ha. I detta fall när vi länkar till ett dokument så bör vi sätta det till Nytt fönster Länkens mål: Nytt fönster ÖVNING 6.6 6.7 (Ladda upp ett dokument Länka ett dokument)

Sida: 33 (45) 6.8 Skapa en intern länk (Sida inom strukturen) o Interna länkar används främst till interna sidor. Man kan också storleks bestämma fönstret och används exempelvis för ett inmatningsformulär. o Markera det block i texten du vill skall bli länken till den interna sidan o Klicka på Infoga Intern länk ikonen. o Länka exempelvis till Om oss. Klicka på Spara 6.9 Skapa extern sida (länka till en annan webbplats) Markera det block i texten du vill skall bli länken till den externa sidan Klicka på Infoga länk ikonen I det fönster som kommer fram kan du skriva in en länk till ex www.dn.se klicka sedan på spara. Eftersom vi länkar till en ny webbplats så väljer vi att även sätta Mål till Nytt fönster.

Sida: 34 (45) 6.10 Skapa ett storleksbestämt fönster med extern länk Klicka på Infoga Intern länk ikonen Klicka i Öppna i ett storleksbestämt fönster och skriv in måtten på hur stort du vill att fönstret skall bli när man klickar på länken. Ex mått: 800*600 pixlar ÖVNING 6.10 (Skapa länkar) 7 Skapa puffar Det finns två typer av puffar att använda sig av. Den ena heter Puff Vänster och den andra heter Puff Höger. Skillnaderna är att de finns på två olika ställen och har olika storlekar samt att de bara används på startsidan. Puff Vänster är 335 x 110 pixlar stor. Puff Höger är 240 x 120 pixlar stor. Tänk på att bara skapa två vänster puffar, man kan göra flera men rekommendationen är att man bara har två som är aktiva. Har man flera bör man använda sig av dölj i navigering på de övriga och aktivera/avaktivera efter hand. En generell sak med dessa puffar är att om man skapar en länk via Puffen länkas till på samma sida i Redigera läget så kommer hela ytan på puffen att bli en länk. Om man inte fyller i något i den länkningen kommer alltså puffen bara att visas som ett vanligt text innehåll. Skapa Vänster puff Markera foldern Puffar Vänster och klicka på skapa ny ikonen Mall att använda

Sida: 35 (45) Välj Puff Vänster (Mall för puffar i den vänstra spalten) Döp den till Min vänster puff samt Min vänster puff2 Länka den ena till Om Oss och den andra till styrelsen Skapa en Höger puff Markera foldern Puffar Höger och klicka på skapa ny ikonen Mall att använda Välj Puff Höger (Mall för puffar i den högra spalten) Döp den till Min höger puff Länka den till http:// Klicka i Öppna länk i nytt fönster Spara och publicera sidan/spara ÖVNING 7 (Skapa puffar)

Sida: 36 (45) 8 Lösenordsskydda sidor Man kan lösenordsskydda sina sidor i Webverktyget. Detta gör man enkelt genom att du markerar den sida du vill skydda med lösenord genom att markera den i Navigeringsträdet(I detta exempel använder jag min Recept sida) Sedan klickar du på fliken Egenskaper. Här kan man se lite olika saker gällande mallens egenskaper. Exempelvis Vilken URL sidan har. vilken Layoutmall ni har använt er av. är sidan Publicerad. Vem har spakat eller ändrat den.

Sida: 37 (45) Längre ner på denna flik så finns det en bli list där det står (Skydd för publik sida). Om man klickar på den lilla listpilen så expanderar man en lista som ser ut på följande sätt. I det fält där det står Lösenord skriver du det lösenord du vill att sidan skall ha och avslutar genom att klicka på Spara.

Sida: 38 (45) 9 Tabeller HTML-tabeller används ofta för att utforma sidornas layout. Det är emellertid viktigt att du är medveten om att när du använder HTML-tabeller kan det hända att sidorna inte kan läsas av personer med nedsatt syn. Detta beror på att användare med nedsatt syn ofta använder skärmläsare eller blindskriftsbaserade lösningar. Den här typen av enheter läser och visar inte alltid layouttabeller i en logisk ordning. Men är tabeller alltid dåligt då? Svaret är nej, Med några få undantag bör viss data eventuellt användas i tabulär data. Det vill säga information som består av kolumner och rader. Det finns givetvis tillfällen när det är väldigt svårt att få till en bra lösning utseendemässigt med enbart semantiskt korrekt HTML, och man kanske blir tvungen att använda tabeller till annat än tabulär data. Nedan följer ett exempel på hur man enkelt kan skapa en tabell i editor verktyget. Klicka på Tabell ikonen Skapa en tabell med 2 celler och 1 kolumn Infoga en bild i den vänstra cellen och skriv in en text i den högra cellen enligt bilden nedan

Sida: 39 (45) Hur gör man då så att texten hamnar i topp linje med bilden? Markera tabellen genom att klicka på den. Man ser att den är markerad genom att det finns små fyrkanter runt den. Högerklicka på tabellen och välj Properties Markera den cell du vill göra din förändring i och klicka på knappen Cellegenskaper, ett nytt litet fönster öppnar sig då där man kan göra de specifika ändringarna för den cell man valt. Klicka i dropdownmenyn till höger om texten Vertikal justering och välj Överst. Klicka sedan på OK knappen

Sida: 40 (45) Texten ligger nu som du ville ha den. Spara och se på sidan i layoutläge

Sida: 41 (45) 10 Skapa Ankare Vad är ett ankare? Ett ankare används till att länka inom en och samma sida. Man börjar med att skapa ankaret, som är själva målet, och sedan länken Klicka på Redigera fliken Skriv de länkar du vill skall representera ankarlänkarna I texten där du vill att ankarlänkarna skall vara klickar du med musmarkören och klickar på Infoga Ankare symbolen I rutan som kommer upp skriver du in det namn du vill ge länken Detta namn kommer inte att synas på sidan utan är till för att du skall veta Vad du skall koppla ditt ankare till. Notera att namnet Inte får innehålla å, ä, ö Klicka på lägg till. I texten kommer det att dyka upp små flaggor som indikerar att här har du nu gjort en ankarpunkt som är redo att länkas till. För att nu länka till dessa ankarpunkter så klickar du på den text du vill skall länka till ankarpunkten(flaggan) och klickar på Infoga länk symbolen När du klickat på Infoga länk så skall du klicka i Välj ett namngivet bokmärke i den aktuella sidan och klicka på det bokmärket du nyss sparade. Klicka och välj ankarpunkt

Sida: 42 (45) Spara sidan och titta på layout för att se resultatet

Sida: 43 (45) 11 Bildgalleri Bildgalleriet är en funktion för att samla och visa bilder på webbplatsen. Bilderna sorteras in i album och visas med bläddringsfunktion och thumbnails som skapas automatiskt vid uppladdning av bilder. Funktionen storleksanpassar bilder vid uppladdning. Bildgalleriet måste sättas upp och konfigureras av producenten/huvudadministratören innan det är tillgängligt och kan användas. 11.1 Skapa album Namnge ditt album i rutan Skapa nytt album Det nya albumet skapas och nästa steg är att ladda upp bilder. Klicka på knappen Välj bilder att ladda upp och välj från din dator. Du kan välja att ladda upp flera bilder samtidigt (håll shift-tangenten eller Ctrl-tangenten intryckt när du väljer bilder) Klicka på Spara i album. Bilderna publiceras i albumet och kan ses i layoutläget I fältet Kommentar kan man ange en kortare bildtext. Klicka Spara ändringar för att spara kommentarer. 11.2 Inställningar för bildgalleri Under rubriken Inställningar för album kan man Byta namn på album Ta bort album Ändra sorteringsordning på albumets uppladdade bilder

Sida: 44 (45) Under rubriken Inställningar för bildgalleri kan man Välja att låta besökare ladda upp bilder direkt på sidan, med direktpublicering eller efter godkännande av administratör Ange e-postadress till administratör (används endast om ovanstående funktion är aktiverad) Välja att visa bildernas filnamn i listan. OBS! Inställningar för bildgalleriet gäller alla album 12 Support För en tid sedan gick en supportwebplats igång för alla som använder vårat webverktyg Open24. Tanken med denna supportwebb är att ni som använder er av webverktyget skall kunna ställa frågor till en supportpanel bestående av några ideella personer som åtagit sig uppdraget att hjälpa till om ni behöver komma igång med en befintlig webbplats, eller om ni har kört fast och inte kommer vidare. Hur funkar supportsidan? Det är en sida med ett enkelt formulär där man ställer sin fråga och ett meddelande går ut från systemet till alla i supportgruppen att ett nytt ärende inkommit. Den i gruppen som känner sig mest lämpad tar sig an ärendet och försöker hjälpa er med problemet antingen via Epost, eller telefon. Vi använder även ett verktyg som heter Teamwiever som finns att ladda ner på förbundets webbplats Hur fyller jag i formuläret? Man väljer en Ärendetyp, skriver sedan en Rubrik och beskriver sitt Ärende/Problem så gott man kan. Sedan skriver ni erat Namn och E-post så att supportgruppen kan ta kontakt och hjälpa er med problemet. Är det en fråga som supporten bedömer är något som skall lyftas fram så kommer de att lägga ut det i form av en FAQ (Frequently Asked Questions som är en samling ofta ställda frågor och deras svar) på förbundets webbplats. Länkar till FAQ, Supportformuläret och Teamwiever http:///fragasupport http:///faqsupport http:///verktyg

Sida: 45 (45) Utbildningsmaterial I dessa foldrar finns ett antal bilder och texter som kan användas i utbildnings övningar. De foldrar som finns är följande: - Bilder (innehåller alla bilder som används i utbildningswebben) - Dokument (innehåller olika text block) - Slutövning (innehåller ett recept på en sockerkaka)