Utbildning Webtool Utbildningskompendium Webtool Ver 5

Transkript

1 Utbildning Webtool 2014 Utbildningskompendium Webtool Ver 5

2 Utbildning Webtool Allmänt om Webtool... 4 Open Arbetsyta & Navigeringsträdet... 5 Arbetsytan... 6 Statistik... 7 Logga ut... 9 Support knappen... 9 TeamViewer Hur använder du TeamViewer? Skapa sida (Toppnavigering) Skapa sida (Undersida) Redigera sida Kopiera in text från Word Bädda in film från YouTube Skapa en ny version av sidan Visa eller dölja i navigeringen Ta bort sida(papperskorgen) Återskapa en sida från papperskorgen Flytta sidor i strukturen Skapa Kalenderhändelse Ta bort en händelse...20 Editorns ikoner och funktioner Klistra in text Formatera text Stycke Stilmallar/Rubriksättningar Gör hemsidan lättnavigerad Så skriver du en rubrik Textredigering Bilder Ladda upp ny bild Lägg till en redan upplagd bild Ända storlek på bilder Ändra storleken manuellt Sida 2

3 Ange önskad storlek Justering av text och bild...30 Editera Egenskaper för bilder Pdf och andra filer(ladda upp ett dokument) Lägg till en ny fil Lägg till en redan uppladdad fil Länkar och bokmärken(länka ett dokument på sidan) Extern länk - länk till annan webbplats Intern länk - länk till annan sida inom din egen webbplats Länka till en fil eller bild Ta bort länk Skapa och länka till ett bokmärke (länk inom samma sida) Skapa puffar Lösenordsskydda sidor Tabeller Bildgalleri Skapa album Inställningar för bildgalleri Support Sida 3

4 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, Onlinebokföring) Sida 4

5 Arbetsyta & Navigeringsträdet Utbildningskompendium Webtool Ver 5 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 i verktyget: 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 5

6 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. Spara knappen: 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 knappen: Denna används när man gjort ändringar på en ny sida och vill publicera dessa. På en redan publicerad sida fungerar den som den vanliga Spara-knappen, dvs ändringarna kommer att publiceras direkt. Sida 6

7 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 Statistik om oss Sida 7

8 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 8

9 Logga ut Om man vill lämna systemet så klickar man på denna knapp och loggas ut och transporteras återigen till inloggningssidan. Support knappen Om du kör fast och vill ställa en direkt fråga till supporten finns en ikon till höger som heter Support. Klickar man på den kommer ett formulär upp som du ställer din fråga i så kommer någon att försöka hjälpa dig, antingen via telefon, epost eller ett program som heter TeamWiever som kan laddas ner på förbundets hemsida under adressen: Sida 9

10 TeamViewer Fjärrstyrning eller Fjärrskrivbord som det heter, eller på engelskt fackspråk Remote Desktop innebär att man kör ett litet program på datorn du vill avhjälpa problemet på, och ett program på den datorn där personen som vill hjälpa dig sitter. På så sätt ansluter man sig till den andra datorn och avhjälper problemet eller bara för att visa hur man exempel jobbar med något program såsom medlemsregistret eller webbverktyget. Det är ett fullkomligt legitimt, och väldigt populärt, verktyg vars syfte är att underlätta datorsupport på distans och är helt gratis. TeamViewer startbild Hur använder du TeamViewer? TeamViewer är som sagt mycket enkelt att använda. Du behöver installera det på bägge datorerna, men det är ett moment som du snabbt kan bli guidad till via telefon eller går till riksförbundets webbplats ( Väl installerat och klart startar man respektive program. Programmet ser simpelt ut, men det är bara positivt. I det lilla fönstret som öppnas finns två rubriker; Tillåt fjärrstyrning samt Styr fjärrdator. Du kommer att bli ombedd att läsa upp ditt unika ID-nummer, som står bredvid Ditt ID under Tillåt fjärrstyrning. Om Internetanslutningen fungerar som den ska, kommer du att bli frågad efter ditt lösenord. Det är detta som står under Tillåt fjärrstyrning på din dator. Sida 10

11 Skapa sida (Toppnavigering) För att göra en ny sida på webbplatsen måste vi öppna en ny mall att jobba med. Dessa mallar hittar man under ikonen för Skapa ny sida. För att skapa en helt ny sida så klickaar vi på ikonen för Startsidan i navigeringsträdet så att den blir markerad och ikonen för Skapa ny sida tänds. 1. Klicka på Skapa ny sida. 2. Ett nytt fönster öppnas. Där hittar du de mallsidor som finns tillgängliga för just det stället i strukturen du befinner dig på. 3. Välj en passande mall Sitter du och jobbar för en lokalförening använder du dig av mallen Ny sida Lokal 3.2. Sitter du och jobbar för ett län använder du dig av mallen Ny sida Län 4. Döp sidan till det namn du vill att den skall visa i menyn samt på webbplatsen (Standardnamnet är Namnlös om man inte anger annat). 5. Den nya sidan hamnar underst i navigeringsträdet. 6. Fyll sidorna med valfritt innehåll 6.1. Ä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 Om man bara klickar på spara sidan kommer det bara att sparas som ett utkast och Inte publiceras på webben 6.3. Är sidan redan publicerad så behöver man bara klicka på knappen Spara sidan Se på resultatet i Layoutläget. Skapa sida (Undersida) Man kanske vill skapa undersidor och på så sätt bygga upp sin egen struktur på webbplatsen. Detta gör man på samma sätt som vi gjorde i steget innan (Skapa sida Toppnavigering). 1. 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. 2. Klicka på Skapa ny sida. 3. Ett nytt fönster öppnas. Där hittar du de mallsidor som finns tillgängliga. 4. Välj en passande mall. 5. Döp sidan till det namn du vill att den skall visa i menyn. 6. Sidan hamnar under den sida du valde som utgångspunkt i navigeringsträdet. 7. Klicka på Redigera -fliken ovanför arbetsytan för att ändra namnet och för att redigera sidan. Sida 11

12 Redigera sida När man väl har skapat sina sidor så vill vi ju förstås kunna Ändra dessa I efterhand. Detta åstadkommer du genom att göra på följande sätt. 1. Klicka på den sida i navigeringsträdet du vill redigera och sedan på Redigera -fliken ovanför arbetsytan. 2. Markera den text du vill ändra i editorn samt utför de ändringar du vill göra. 3. Klicka på knappen Spara sidan. 4. Se på sidan i Layoutläge och granska dina ändringar. Kopiera in text från Word När du klistrar in text från t ex Word följer inte typsnitt, storlekar eller bilder med. Typsnitt och storlekar anpassas istället efter den stilmall som gäller för din webbplats. Om du har formaterat rubriker i Word känner systemet av vilka delar av texten som är rubriker och byter ut dem enligt webbsidans stilmall. Genom att använda ikonen "Klistra in som text" följer ingen kod med, endast radbrytningar och styckeindelningar. Du får då själv gå igenom texten och formatera rubriker, etc. Klicka på ikonen så behåller du "Klistra in som text"- läget tills dess att du sparar sidan eller byter flik. Sida 12

13 Bädda in film från YouTube För att visa filmer på din webbplats använder du inbäddningsfunktionen från YouTube. Du kan alltså inte ladda upp filmer direkt i Webtool. 1. Skapa ett konto eller logga in på ditt YouTube-konto. Om du vill ladda upp en film som någon annan har lagt upp behöver du inget konto och du behöver inte heller logga in. Information om hur du skapar ett YouTube-konto hittar du på 2. Klicka på "Dela" som du hittar i anslutning till filmen. 3. Klicka "Bädda in" och inbäddningskoden för filmen visas. 4. Kopiera koden, gå till Webtool och den sida där du vill bädda in din film. 5. Klicka på ikonen "Bädda in YouTube" (Exemplet använder sig av Hälans stigs kanal på ) Du går in på ex 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 Dela knappen Sida 13

14 Då kommer denna vy fram och jag väljer att klicka på Bädda in knappen Utbildningskompendium Webtool Ver 5 Bädda in 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. Kopiera texten Sida 14

15 Skapa en ny version av sidan Självklart kan vi också jobba med versioner. Man skapar en kopia av en sida och arbetar med den tills man känner dig nöjd. När man är färdig publicerar man den och har ändå den gamla versionen kvar. På så vis behöver man inte vara orolig för att ändringarna kommer att synas direkt på webbplatsen utan kan arbeta ostört med att redigera sin kopia. Förklaring av ikonerna på Versioner fliken 1. Radera version 2. Publicera version 3. Jämför versioner 4. Redigera version 5. Ta bort publicering av version För att Skapa en ny Version gör man på följande sätt. 1. Du markerar först den sida du vill skapa en ny version av genom att klicka på den i navigeringen. 2. Sedan klickar du på fliken Versioner. 3. Klicka på knappen Skapa ny version. 4. Klicka OK i den ruta som kommer upp på sidan som frågar om du vill skapa en ny version. 5. 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. 6. Vill du nu Redigera den nya kopian så klickar du på Redigera symbolen 7. 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. Sida 15

16 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. Visa inte sidan på webben Ta bort sida(papperskorgen) Vill man inte ha kvar en sida kastar man bort den genom att klicka på Ta bort sidan. När en sida tagits bort hamnar den i papperskorgen längst ner i navigeringsträdet till vänster. För att ta bort din sida så gör du enligt följande 1. Ta bort sidan du nyss skapade. 2. Markera den sida du vill ta bort. 3. Klicka på fliken Redigera. 4. Längst ner på sidan klickar du på ikonen Ta bort sidan. 5. I den rutan som kommer upp på sidan klickar du på Ok knappen. Sida 16

17 Återskapa en sida från papperskorgen Har du råkat ta bort en sida av misstag behöver du inte vara orolig. Den går att få tillbaks igen. För att återställa en borttagen sida(eller hel struktur) till dess ursprungsplats på webbplatsen gör du på följande sätt. 1. Klicka på + tecknet framför Papperskorgen i strukturträdet för att expandera trädet 2. Markera den sida du vill återskapa 3. Klicka på fliken Egenskaper 4. Klicka på länken ÅTERSTÄLL 5. Klicka sedan på Ok knappen i det fönster som kommer upp på sidan som frågar ifall du vill återställa dokumentet till dess ursprungliga plats. Den sidan du återskapade kommer tillbaka på samma ställe där den senast låg. Flytta sidor i strukturen Man kan flytta på två olika sätt. Första sättet är att använda upp-ned pilarna som visas i bilden under Punkt 1 och på så sätt flytta en sida upp och ner i strukturen på sidan. Det andra sättet är att använda sig av flytta dokument. Med denna funktion kan du flytta ett dokument eller en hel struktur till ett annat ställe på eran webbplats, detta visas under Punkt För att använda upp-ned pilarna 1.1. Markera den sida du vill flytta. När den är markerad tänds pilarna i överkanten av navigeringsträdet 1.2. 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. 2. För att använda sig av Flytta dokument 2.1. 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 17

18 2.2. 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 Sida 18

19 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. 1. Vi börjar med att klicka på Kalender I strukturen till vänster Klicka på ikonen Nytt ovanför navigeringsträdet och väljer sedan Kalenderhändelse mallen i fönstret som öppna En ny händelsesida skapas (symboliseras av i navigeringsträdet) och du kommer automatiskt till Redigera -läget 1.3. Rubrik: Här skriver du rubriken för händelsen (aktiviteten) 1.4. 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 1.5. Ingress: Kort text som kommer att visas i händelselistan på webbplatsen 1.6. Text (editorn): Här skriver du resten av artikeln Skribent: Här finns möjlighet att ange ett namn 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. Sida 19

20 Man skriver manuellt in datumet Eller man kan klicka på den lilla Kalender ikonen enligt bild ovan 2. Klicka på Spara och publicera Ta bort en händelse För att ta bort en Kalenderhändelse gör man på detta sätt Klicka på plus-tecknet framför Kalender i navigeringsträdet så att alla händelser blir synliga 1.2. Klicka på den händelse du vill radera 1.3. Välj redigera-läget och klicka på knappen Ta bort sidan Sida 20

21 Editorns ikoner och funktioner Webtool har fått en ny editor för infogande av text och bild. Utseendet är lite annorlunda, men funktionerna är i stort sett de samma. På de här sidorna hittar du grundläggande information om hur den nya editorn fungerar. Använd menyn till vänster eller sökfunktionen i toppen av sidan. OBS! Om du använder Internet Explorer 9 kan det vara problem med bild- och filuppladdningen. Vi rekommenderar att du uppgraderar till IE10 eller använder någon annan webbläsare, t ex Google Chrome eller Firefox. Sida 21

22 Här nedan hittar du guider och anvisningar till hur du sköter din webbplats med hjälp av Editorn i Webtool. Beskrivningen nedan visar de knappar som finns tillgängliga i editorn. Rubrikväljaren/Stycke Textformat Klipp ut Kopiera Klistra in Klistra in text Ångra Fet stil Kursiv stil Genomstruken text Källkod Avformatera Visa block - Ny funktion! Minska indrag Öka indrag Ta bort länk Infoga bild Linje Tabell Bädda in film Gör om Vänsterställ Centrera Högerställ Justera Punktlista Nummerlista Intern länk Extern länk och filuppladdning Bokmärke (Ankare) Sida 22

23 Skriva text Att skriva text i editorn påminner mycket om det sätt man arbetar i ett ordbehandlingsprogram, men det är viktigt att komma ihåg att det faktiskt handlar om html-kodning. Allt du skriver i editorn omvandlas till html-kod som sedan ska tydas av webbläsaren bland övrig kod som finns på din sida. Några tips: Det är oftast bäst att först skriva texten och sedan gå tillbaka och göra formateringar av rubriker, lägga in bilder, osv. Entertangenten genererar ett nytt stycke (stort radavstånd) Enter och Shift genererar ny rad (litet radavstånd) Fokusera på innehållet och låt den inbyggda stilmallen styra utseendet. Stilmallen är anpassad för din organisations webbplatser och du behöver därför inte fundera över typsnitt, storlekar, etc. Vill du gärna få med din layout från t ex ett Worddokument är det bästa att spara Worddokumentet som en PDF-fil som du sedan länkar till från webbplatsen. Klistra in text När du klistrar in text från t ex Word följer inte typsnitt, storlekar eller bilder med. Typsnitt och storlekar anpassas istället efter den stilmall som gäller för din webbplats. Om du har formaterat rubriker i Word känner systemet av vilka delar av texten som är rubriker och byter ut dem enligt webbsidans stilmall. Genom att använda ikonen "Klistra in som text följer ingen kod med, endast radbrytningar och styckeindelningar. Du får då själv gå igenom texten och formatera rubriker, etc. Klicka på ikonen så behåller du "Klistra in som text"- läget tills dess att du sparar sidan eller byter flik. Bilder måste laddas upp till webbservern via "Infoga bild" för att kunna visas på webbsidan. Sida 23

24 Formatera text Texterna anpassas efter den stilmall som finns tillgänglig för din webbplats. Stycke Under "Stycke" hittar du de olika rubriktypsnitt som finns tillgängliga i stilmallen för din organisation. Ett rubriktypsnitt påverkar hela textstycket, så därför måste du alltid se till att det/de ord som ska vara rubriken, står på en egen rad. Detta gör du genom att trycka "Enter" efter rubriken. Tips! Använd gärna ikonen "Visa block" så ser du tydligt hur styckeindelningen ser ut. 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. I Editorn visas de som Rubrik 1-3. Rubrik 1 Rubrik 2 Rubrik 3 Absolut viktigast på sidan samt dokumentnamnet på mallen. Absolut fortfarande viktig, men denna är sidmallens huvudrubrik Fortfarande viktig, sidmallens underrubrik Korrekt användning av rubriker bidrar till: 1. Att få en enhetlig formatering av alla sidor på webbplatsen. 2. Att det blir lättare att läsa dokumentet utan stilmallar. 3. 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. 4. 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 - 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. Gör hemsidan lättnavigerad Rubriker är otroligt viktiga både för sökmotorer och besökare. Försök att alltid vara beskrivande i dina rubriker. Rubrikerna ska tydligt reflektera innehållet på den aktuella sidan. Sida 24

25 Föreställ dig att du sammanfattar innehållet på den aktuella sidan - Vad är huvudsyftet med den aktuella sidan? Varför ska besökaren orka läsa det du skrivit? Undvik: Att använda generiska intetsägande rubriker som t ex "Välkommen" Använd den huvudsakliga sökfrasen i rubriken Dela upp innehåll med flera rubriker - Internetanvändare vill ha rätt information, nu! Gör det enkelt att "scanna" sidor med mycket innehåll genom att använda tydliga rubriker. Så skriver du en rubrik Exempel Vad bör t ex "Grönköpings lokalförening" ha för rubrik på sin startsida? Dålig rubrik: "Välkommen till vår hemsida!" Bra rubrik: "Din lokalförening i Grönköping" I detta fall kommer Google att reagera på nyckelorden lokalförening och Grönköping. Det är precis vad Grönköpings lokalförening vill. Optimering Du kan styra besökare (sökmotorer & användare) till de mest relevanta sidan på din webbplats med länkar, men även med olika rubriker (Kan vara bra att tänka på det) 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. Vi kan prova detta genom att vi skapar en ny sida och döper den till Textredigering På den sidan kopierar vi och klistrar in ett stort textstycke 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 Gör ett nytt hårt enterslag i det stycket och gör det stycket Kursivt. i editorn. Sida 25

26 Bilder Bilder som läggs in via editorn bör helst vara storleksanpassade för att passa webbsidan och för att hålla ner laddningstiden av sidan. Du kan i efterhand anpassa storleken genom en inställning i editorn, men detta påverkar inte filstorleken och därmed inte heller laddningstiden. Detta är extra viktigt att tänka på om man har många bilder på samma sida. OBS! Om du använder Internet Explorer 9 kan det vara problem med bild- och filuppladdningen. Vi rekommenderar att du uppgraderar till IE10 eller använder någon annan webbläsare, t ex Google Chrome eller Firefox. Bilder måste laddas upp till webbservern via "Infoga bild" för att kunna visas på webbsidan. Ladda upp ny bild Klicka på det ställe i editorn du vill infoga din bild. 1. Klicka på ikonen för "Infoga bild" 2. Bildegenskaper öppnas. 3. Klicka på knappen "Infoga bild" 4. Klicka på knappen "Ladda upp en fil" För att sortera bilder i mappar kan du först välja "Ny mapp" och sedan "Ladda upp en fil" 5. Dra och släpp bilder från Utforskaren på din dator till filuppladdningsfönstret, eller klicka för att öppna Utforskaren och välja bilder att ladda upp. Håll ner shift-tangenten samtidigt som du klickar för att ladda upp flera bilder samtidigt. Sida 26

27 6. Klicka på knappen "Öppna" och valda bilder laddas upp. 7. När bilderna är uppladdade klickar du på "Hem-konen" eller "Återvänd till fillistan" 8. Den/de uppladdade bilderna sorteras in i bokstavsordning bland övriga filer och bilder. 9. Klicka på bilden för att lägga till den på din sida. 10. Genom att klicka på ikonerna i övre kanten av bilden kan du ladda ner bilden till din dator, förhandsgranska eller ta bort. Sida 27

28 Lägg till en redan upplagd bild 1. Klicka på ikonen för "Infoga bild" 2. Bildegenskaper öppnas. 3. Klicka på knappen "Infoga bild" 4. Klicka på den bild du vill lägga till på din sida. 5. Genom att klicka på ikonerna i övre kanten av bilden kan du ladda ner bilden till din dator, förhandsgranska eller ta bort. Sida 28

29 Ända storlek på bilder Det bästa är om din bild är anpassad efter det utrymme som finns tillgängligt på din webbplats redan innan du laddar upp den. På så vis minskas filstorleken och därmed även laddningstiden. Bilden blir även skarpare än om du ändrar storleken i efterhand. Undvik också att göra bilden större än originalet. Detta försämrar kvaliteten och bilden blir oskarp. Ändra storleken manuellt Klicka på bilden och dra i markeringsrutorna för att ändra till önskad storlek. Håll ner Shift samtidigt för att behålla proportionerna. Ange önskad storlek 1. Klicka på bilden och sedan på ikonen "Infoga bild/bildegenskaper" 2. I fälten för "Dimensioner" anger du önskad storlek 3. Kryssa i "Behåll proportioner" så ändras storleken proportionerligt Sida 29

30 Justering av text och bild För att få text att flyta bredvid en bild använder man ikonerna för justering 1. Klicka på bilden 2. Klicka på önskad justerings-ikon för att få texten att flyta bredvid bilden. Sida 30

31 Editera Egenskaper för bilder För att ändra en egenskap för bilden du nyss lagt in på din sida klickar du på bilden och klickar på Infoga bild/bildegenskaper ikonen följande i editorn. Rutan för Bildegenskaper kommer fram och här kan ni ändra 1. Bildlänk 2. Bildbeskrivning 3. Dimensioner 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. Pdf och andra filer(ladda upp ett dokument) Pdf-er är bra att använda om du vill presentera något som har en färdig layout. Det kan t ex vara en inbjudan, en resultatlista, eller något annat där man i orginalfilen lagt mer mycket tid på formgivning och som vinner på att återges exakt. Pdf-er blir alltid en egen fil som man länkar till från webbplatsen. Man kan alltså inte infoga en pdf i webbplatsens layout. OBS! Om du använder Internet Explorer 9 kan det vara problem med bild- och filuppladdningen. Vi rekommenderar att du uppgraderar till IE10 eller använder någon annan webbläsare, t ex Google Chrome eller Firefox. Sida 31

32 Lägg till en ny fil En fil måste först laddas upp till systemet (webbservern) för att finnas tillgänglig. Sedan skapar man en länk från editorn till den uppladdade filen. Därför sker filuppladdningen under "Infoga/redigera länk" 1. Klicka på ikonen för "Infoga/redigera länk" 2. Klicka på "infoga fil" 3. Filhanteraren öppnas. I filhanteraren har du överblick över samtliga uppladdade bilder och filer. Med hjälp av filterknapparna uppe till höger kan du välja att visa endast bilder, endast filer eller allt innehåll Klicka på knappen "Ladda upp en fil" Sida 32

33 För att sortera bilder i mappar kan du först välja "Ny mapp" och sedan "Ladda upp en fil" 6. Dra och släpp filer från Utforskaren på din dator till filuppladdningsfönstret, eller klicka för att öppna Utforskaren och välja filer att ladda upp. Håll ner Shift-tangenten samtidigt som du klickar för att ladda upp flera filer samtidigt. 7. Klicka på knappen "Öppna" och valda filer laddas upp. 8. När filerna är uppladdade klickar du på "Hem"-ikonen 9. Den/de uppladdade filerna sorteras in i bokstavsordning bland övriga filer och bilder. Klicka på filen för att lägga till den på din sida. 10. I fältet "Text att visa" anger du den text som representerar länken, dvs den man klickar på för att öppna filen. Om du vill använda en bild som länk måste du först ladda upp bilden (Se avsnitt 7.5) och sedan markera den innan du följer instruktionen. 11. Klicka OK Lägg till en redan uppladdad fil En fil måste först laddas upp till systemet (webbservern) för att finnas tillgänglig. Sedan skapar man en länk från editorn till den uppladdade filen. 1. Klicka på ikonen för "Infoga/redigera länk" 2. Klicka på "infoga fil" Sida 33

34 3. Filhanteraren öppnas. I filhanteraren har du överblick över samtliga uppladdade bilder och filer. Med hjälp av filterknapparna uppe till höger kan du välja att visa endast bilder, endast filer eller allt innehåll. 4. Filerna sorteras i bokstavsordning. Klicka på filen för att lägga till den på din sida. 5. I fältet "Text att visa" anger du den text som representerar länken, dvs den man klickar på för att öppna filen. Om du vill använda en bild som länk måste du först ladda upp bilden och sedan markera den innan du följer instruktionen. 6. Klicka Ok Sida 34

35 Länkar och bokmärken(länka ett dokument på sidan) Ikonen för Extern länk används också för att ladda upp filer. Se avsnittet (7.11 PDF och andra filer) Extern länk - länk till annan webbplats 1. Markera det/de ord eller den bild du vill länka. 2. Klicka på ikonen "Extern länk" 3. Ett nytt fönster öppnas. I fältet för "Källa" anger du adressen till den webbplats du vill länka till 4. Om du vill att webbplatsen ska öppnas i ett nytt fönster (rekommenderas) väljer du "Nytt fönster" under rubriken "Mål" 5. Klicka "ok" Intern länk - länk till annan sida inom din egen webbplats 1. Markera det/de ord eller den bild du vill länka. 2. Klicka på ikonen "Intern länk" 3. Ett nytt fönster öppnas där du kan klicka dig fram till den sida du vill länka till 4. Klicka Spara Länka till en fil eller bild 1. Markera det/de ord eller den bild du vill länka 2. Klicka på ikonen "Extern länk" 3. Ett nytt fönster öppnas. Klicka på ikonen "Välj fil" 4. Filhanteraren öppnas och du kan välja vilken fil eller bild du vill länka till 5. Klicka ok Ta bort länk 1. Markera länken du vill ta bort 2. Klicka på ikonen "Ta bort länk" Skapa och länka till ett bokmärke (länk inom samma sida) Bokmärken används för att länka inom samma sida. Man börjar med att skapa bokmärket, som är själva målet, och sedan länken. 1. Klicka på den plats där ditt bokmärke ska ligga (t ex i toppen av sidan) och sedan på ikonen "Bokmärke" 2. Ge bokmärket ett namn och klicka ok 3. Markera det ord som ska vara länken till bokmärket, t ex "Till toppen", och klicka på ikonen "Infoga länk" 4. Under alternativet "Bokmärke" bör nu namnet på ditt tidigare skapade bokmärke finnas med. Välj och klicka ok. 5. Du kan självklart skapa flera bokmärken på samma sida om du vill det. Sida 35

36 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 För att skapa en Vänster puff så börjar man med att markera foldern Puffar Vänster och klicka sedan på skapa ny ikonen 1. Välj Puff Vänster (Mall för puffar i den vänstra spalten) 2. Döp den till Min vänster puff samt Min vänster puff2 3. Länka den ena till Om Oss och den andra till styrelsen Skapa en Höger puff För att skapa en Höger puff så börjar man genom att markera foldern Puffar Höger och klicka sedan på skapa ny ikonen 1. Välj Puff Höger (Mall för puffar i den högra spalten) 2. Döp den till Min höger puff 3. Länka den till 4. Klicka i Öppna länk i nytt fönster 5. Spara och publicera sidan/spara Sida 36

37 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 1. Vilken URL sidan har. 2. Vilken Layoutmall ni har använt er av. 3. Är sidan Publicerad. 4. Vem har spakat eller ändrat den. 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. Sida 37

38 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

39 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. Använd "Infoga tabell" för att skapa grunden till din tabell Enklast är att börja med en rad och där göra de inställningar man behöver och sedan skapa nya rader allt eftersom. De nya raderna ärver då de inställningar man gjorde på första raden. Markera tabellen och klicka på tabell-ikonen. Välj "Tabellegenskaper" för att ange storlek, avstånd, ramlinje, mm. Du kan även dra i tabellens markeringsrutor för att justera storleken Sida 39

40 Genom att högerklicka i tabellen visas menyn för formatering av tabellen och dess innehåll. Cell: en "ruta" i tabellen Kolumn: en spalt i tabellen Cellegenskaper Här anger du bredd och höjd för den cell du klickat i "Celltyp" anger om det är en vanlig cell eller en huvudcell som fungerar som en rubrik för en kolumn. "Justering" anger om innehållet i cellen ska vänster-, centrum- eller högerjusteras Sida 40