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

Transkript

1 Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt med länkar, bilder, media och formatering av texter. Manualen är inte nedbruten i detaljer utan ska bidra till att Ni själv med denna som hjälp ska kunna testa och prova Er fram. I detta dokument kommer vi därför belysa ikoner med utökad funktion och hur man jobbar med dessa. Allt för att Er webbsida ska bli så levande som möjligt! Lycka till!

2 Sida 2 av 23 Ikoner med utökad funktion Med detta avser vi ikoner i editorns verktygsfält som genererar ytterligare alternativ och funktioner. Dessa utgörs generellt av : Infoga länk Infoga fil Infoga bild (Bildhantering) Infoga media Formatera text Textfärg Bakgrundsfärg för text Punktlista Nummerlista Tabellhanteringsverktyget

3 Sida 3 av 23 Infoga länk 1 (3) Infoga länk - För att ikonen ska bli aktiverad måste text eller bild ha markerats. Klicka på ikonen och en popup enligt bilden presenteras. I fältet för URL kan man skriva in adress till exempelvis en webbsida. Önskar man länka till en fil inom webbplatsen klickar man på ikonen till höger om fältet varpå filhanteraren för MoxiManager presenteras. Information om denna kommer på följande bild. Önskar Ni att text presenteras när man för musen över länken fyller Ni i önskad text i fälten för Text att visa samt Titel Information om alternativmenyn för Mål presenteras på bild 3 (3).

4 Sida 4 av 23 Infoga länk Filhantering MoxieManager 2 (3) Infoga länk Via filhanteraren MoxieManager får man möjligheten att länka till filer som finns sparade i webbplatsens filstruktur. Önskar man skapa en ny mapp i filstrukturen klickar man på Skapa. Vill man ladda upp en ny fil klickar man på Ladda upp När man lagt upp eller hittat önskad fil klickar man på denna och avslutar med att klicka på Infoga.

5 Sida 5 av 23 Infoga länk 3 (3) Infoga länk I sista steget för att infoga länk väljer Ni mål via alternativmenyn för Mål. Anges Ingen kommer klick på länken att ersätta den aktuella webbsidan. Väljer Ni Nytt fönster kommer länken att öppnas i ett nytt webbläsarfönster. Detta rekommenderas vid länkning till externa webbsidor och filer när man önskar att besökaren ska stanna kvar på ursprungssidan. Avsluta med att klicka på OK

6 Sida 6 av 23 Infoga fil1 (1) Infoga fil - Denna ikon och funktion är helt ny i editorn och innebär att ni enkelt kan lägga upp en fil, PDF, Word m.m. som Ni sedan kan länka till på webbsidan. Vid klick på ikonen kommer man till filhanteraren MoxieManager som presenterades tidigare i stycket för Infoga länk. Via filhanteraren MoxieManager får man möjligheten att ladda upp filer som sedan återfinns sparade i webbplatsens filstruktur. Önskar man skapa en ny mapp i filstrukturen klickar man på Skapa. Vill man ladda upp en ny fil klickar man på Ladda upp Önskar man sedan publicera denna direkt, klickar man på önskad fil och avslutar med att klicka på Infoga.

7 Sida 7 av 23 Infoga bild 1 (8) Infoga bild - Placera markören på önskad plats i editorns arbetsyta och klicka på ikonen för Infoga bild. I första fliken för generella inställningar klickar man på ikonen till höger om fältet för Källa, navigerar sig fram i filhanteraren MoxieManager till önskad bildfil. (Nästa bild) I fältet för bildbeskrivning anger man önskad bildtext. Värdena för dimensioner presenteras automatiskt och kan även ändras manuellt, dock minskas bara bildens yta och inte vikt i bytes. Bockrutan Begränsa proportioner bör vara markerad då bildens proportioner annars förändras. Via den andra fliken kan man ange en specifik CSS-klass och behöver ej anges då värden här presenteras automatiskt från fälten nedan. I fälten för Vertikalt utrymme samt Horisontellt anges om så önskas hur mycket luft som ska finnas runt bilden. Dessa värden anges automatiskt i pixlar, Ex: 15p Önskar man att ram ska presenteras anger man även detta med ett numerisk värde. (Detta värde styrs dock av webbplatsens grafiska hantering och kanske ej presenteras.)

8 Sida 8 av 23 Infoga bild Filhantering MoxieManager 2 (8) Infoga bild - Vid klick på ikonen kommer man till filhanteraren MoxieManager som presenterats tidigare. Via filhanteraren MoxieManager får man möjlighet att ladda upp och välja bilder som sedan återfinns sparade i webbplatsens filstruktur. Önskar man skapa en ny mapp i filstrukturen klickar man på Skapa. Vill man ladda upp en ny bildfil klickar man på Ladda upp (Nästa bild) När man lagt upp eller hittat önskad bild klickar man på denna och avslutar med att klicka på Infoga.

9 Sida 9 av 23 Infoga bild Ladda upp bild 3 (8) Via uppladdningsfönstret har man två alternativ: Dra in filen (eller filer) från ett annat fönster och släpp i angivet område. Klicka på ikonen för Lägg till filer (Nästa bild)

10 Sida 10 av 23 Infoga bild Lägg till filer från din dator/enhet 4 (8) Här öppnas filsystemet från den enhet du jobbar med dator, surfplatta eller mobilenhet där du letar upp önskad eller önskade bilder. Du kan välja en bild genom att klicka på denna eller flera genom att hålla ned SHIFT alternativt CTRL och markera önskade. SHIFT möjliggör markering av flera bilder i en följd. CTRL möjliggör markering av separata bilder inom samma mapp/katalog. (Se markerade bilder i exempel) Avsluta med att klicka på Öppna * Detta exempel avser PC med Windows 7 varför avvikelser kan förekomma beroende på din enhet.

11 Sida 11 av 23 Infoga bild Ladda upp valda bilder 5 (8) Dina valda bilder från föregående steg presenteras klara för uppladdning till webbservern och webbplatsens filstruktur. Önskar du lägga till fler filer så klickar du på Lägg till filer (se föregående bild) Vill du ladda upp valda bilder som presenteras i fönstret så klickar du på Ladda upp

12 Sida 12 av 23 Infoga bild Ladda upp valda bilder 6 (8) När bilderna laddats upp till webbplatsen anges detta med värdet 100% till höger om respektive bild. Klicka på knappen Stäng för att gå vidare med att välja och presentera önskad bild på webbsidan.

13 Sida 13 av 23 Infoga bild Välj och publicera valda bilder 7 (8) Nu presenteras de uppladdade bilderna i MoxieManager. Välj önskad bild genom att dubbelklicka på denna. Du kan även välja bild genom att markera bockrutan. I det senare fallet avslutar du med att klicka på Infoga

14 Sida 14 av 23 Infoga bild Kontrollera och publicera bild 8 (8) Nu är vi åter där vi startade och i exemplet har vi valt bilden med koalan. I fältet för källa återfinns sökvägen till bilden och vi har skrivit in en bildbeskrivning Koala. Vi har även reducerat och angivit bildens dimensioner till 640x480 pixlar för att bilden ska få plats på webbsidan. Avsluta med att klicka på OK

15 Sida 15 av 23 Bildhantering - grunder 1 (5) Att i editorn jobba med texter och bilder med rätt format är ganska enkelt där man ganska snabbt kommer igång och når bra resultat. Det som brukar bli lite mer problematiskt, ställa till vissa problem och väcka frågor är bildhantering, där begrepp som bildens storlek och vikt bör belysas. Med dagens teknik där digitalkameror, mobiltelefoner och surfplattor har hög kapacitet blir det ännu mer komplext när man för in begrepp som megapixel (MP) i sammanhanget. Storleken avser bildens ytmått i pixlar. Exempel på ytmått omvandlade i megapixel: Ytmått i pixlar Mega pixel 640 x 480 0,3 MP 1152 x MP 1600 x ,9 MP 3008 x MP 3888 x MP 4048 x MP 5472 x MP Bildens vikt anges i kilobyte (Kb) eller megabyte (Mb). Det som påverkar en bilds vikt är bl.a. bildens storlek men också ljusförutsättningar vid fotograferingen samt bildens detaljrikedom. (Ex: ett foto på en helt vit vägg i 6 MP kommer att ha lägre vikt än ett foto på ett motiv med olika ljusförhållanden och flera färger.) Att använda sig av bilder som inte anpassats, eller direkt är avsedda, för publicering på webben innebär ofta problem för besökaren då webbsidan kan bli långsam (om det är bilder med hög vikt) men också innebära att webbsidan blir förstörd ur ett dispositions och grafiskt perspektiv. Ett par generella grunder för att göra mer rätt än fel: Använd aldrig bilder med större vikt än 300Kb (helst <150Kb för att webbsidan ska fungera bra vid långsam uppkoppling). För att bilderna ska ha denna låga vikt bör deras ytmått inte överstiga 800x600px. För att jobba med bilder krävs ofta både kunskap och programvara som de flesta inte har tillgång till varför kommande sidor kommer visa hur man via editorn kan anpassa och hantera sina bilder för publicering på webben.

16 Sida 16 av 23 Bildhantering redigera bild 2 (5) Att ändra en bilds format, storlek, vikt eller utseende kallar vi för att redigera bild. För att redigera en befintlig bild via MoxieManager klickar man på ikonen för infoga bild, letar upp bilden i filstrukturen varefter man kan gå vidare på två olika sätt: 1. Högerklicka på bilden och välj Redigera 2. Markera bockrutan som tillhör bilden och knappen Hantera blir synlig. Klicka på denna och välj Redigera

17 Sida 17 av 23 Bildhantering redigera bild - Skala 3 (5) Nu presenteras bilden i redigeringsläge med flera olika alternativ vilka presenteras i menyn till vänster. Det finns två olika sektioner Förändra och Filter. Förändra innebär att man ändrar de mer konkreta förutsättningarna för bilden avseende storlek, vikt och proportioner. Detta gör man via funktionerna Skala, Beskär och Flippa/ Rotera. Denna bild visar läget för skala bild där vi har minskat ned den tidigare uppladdade bilden med Koalan från 1024x768 px till 640 x 480 px. I och med att bockrutan för begränsa proportioner är markerad räcker det att ett av värdena skrivs in och bildens proportioner beräknas om automatiskt. Klicka på Applicera för att genomföra omskalningen av bilden. Därefter måste man klicka på Spara varpå man får möjlighet att döpa om bilden och få en redigerad kopia av originalbilden. (Önskar man jobba vidare med bilden väntar man med att spara tills man är klar). Avsluta med att klicka på Spara

18 Sida 18 av 23 Bildhantering redigera bild - Beskär 4 (5) Att beskära en bild innebär oftast att man önskar lyfta fram och exponera en del av en bild ytterligare, för att uppnå detta kan det även innebära att man förändrar bildens förhållande mellan bredd och höjd. I läget för beskära bild kan man utföra detta på två olika sätt: 1. Manuellt ange värden för önskad bredd (W) och höjd (H). 2. Via markeringshandtagen för bilden ta tag i dessa och utforma sin önskade markering. I detta exempel anger vi manuellt värdena varpå vi flyttar markeringen för att lyfta fram Koalans ansikte. När markeringen är klar, klicka på Applicera Avsluta genom att klicka på Spara och döp bilden. (Önskar man jobba vidare med bilden väntar man med att spara tills man är klar).

19 Sida 19 av 23 Infoga media 1 (1) Infoga Media - Placera markören på önskad plats i arbetsytan och klicka på ikonen för infoga Media. Man kan infoga media på flera olika sätt där vi här kommer att belysa de enklaste och vanligaste genom att länka till media alternativt bädda in media. Länka till media gör du enklast genom att helt enkelt klistra in länken till den film du önskar visa. Du kan också ladda upp och/eller välja befintlig fil på webbservern via MoxieManager enligt tidigare beskrivning för filhantering. Om detta önskas så klicka på ikonen för ladda upp/välj fil. För att bädda in media går klickar du på fliken Inbäddning varefter du gå till källan för filmen och hämtar koden för inbäddningen. Kopierar denna och klistrar in enligt bilden. I båda fallen avsluta med att klicka på OK

20 Sida 20 av 23 Formatera text 1 (1) Formatera text - Markera önskad text i arbetsytan och välj alternativ formatering i listan. För att använda textformateringsmenyn markerar man först önskad text och väljer sedan formatering i listan. All text som tillhör det stycke man markerat kommer att få den formatering man valt. För avgränsa ett stycke använd Enter Formatera text, Textfärg Markera önskad text i arbetsytan, klicka på ikonen och välj önskad färg i palletten. I läget för Anpassad kan man ange önskad färgkod i hexadecimal. Formatera text Bakgrundsfärg för text. Markera önskad text i arbetsytan, klicka på ikonen och välj önskad färg i palletten. Denna funktion bör användas sparsamt.

21 Sida 21 av 23 Listor1 (1) Punktlista - Markera önskad text (stycke) i arbetsytan, klicka på ikonen och punkter kommer att presenteras framför varje ny rad där denna föregås av radbrytning (Enter) Önskas alternativa punkter så klickar man på pilen till höger om ikonen varpå alternativ presenteras. Nummerlista - Markera önskad text (stycke) i arbetsytan, klicka på ikonen och nummerlista kommer att presenteras framför varje ny rad där denna föregås av radbrytning (Enter). Önskas alternativa numrering så klickar man på pilen till höger om ikonen varpå alternativ presenteras.

22 Sida 22 av 23 Tabellhantering 1 (2) Infoga/redigera tabell - Placera markören på önskad plats i arbetsytan eller markera befintlig tabell och klicka på ikonen för infoga/redigera tabell En meny presenteras där man väljer antal rader och kolumner genom att markera i rutnätet till höger. I detta exempel har vi valt 3 rader och 3 kolumner. Tabell med valt antal rader och kolumner kommer att presenteras i editorn där man sedan kan jobba vidare med tabellen och dess egenskaper. Mer om detta på nästa bild.

23 Sida 23 av 23 Tabellhantering Anpassa tabellegenskaper 2 (2) Önskar man anpassa en tabell så markerar man tabellen i arbetsytan och handtag presenteras. Klicka på ikonen för tabellhantering, välj Tabellegenskaper och alternativ för tabellegenskaper presenteras. Här anger man tabellens bredd i px eller i % samt värden för mellanrum mellan celler och rader. Man kan även här ange om man önskar ram på tabellen. Avsluta med att klicka på OK För att jobba vidare med tabellens celler, kolumner och rader så högerklicka på tabellen. Detta kräver lite extra så övning och kontroll av resultat är att rekommendera i början Lycka till