Innehåll. HTML Editor Sida 2 av 30

Transkript

1 HTML editor

2 Innehåll Länka till webbsida... 4 Extern länk Länka till e-post PROs bildbank Ladda upp ny bild Redan uppladdad bild Bildredigeraren Infoga/redigera inbäddad media Klipp ut Kopiera Klistra in Klistra in från Word Infoga/redigera bokmärke Fetstil Kursiv Punktlista Nummerlista Stilar Ångraknapp Tillbakaknapp Arbeta med tabell Infoga/redigera tabell Sida 2 av 30

3 I Episerver HTML editor, Tiny MCE kan du formatera och infoga textinnehåll, viss formatering, bilder, tabeller och länkar. Editorn innehåller ett utval av funktioner som är aktiverade, vi påmminner om att PROs grafiska profil fortfarande ska följas och användas. Här följer en kort beskrivning av de knappar och funktioner som du finner i editorn. Infoga länk. Genom att markera text eller bild kan du genom denna funktion länka till en annan sida eller dokument. Ta bort länk. Genom att markera din länk tar du bort den genom att klicka på denna knapp. Infoga bild. Klickar du här öppnas en dialogruta där du infogar din bild. Du kan hämta en som du redan laddat upp eller från din egen dator. Redigera bild. Genom att markera den bild du vill ändra och sedan klicka här kan du ändra storlek mm på bilden. Infoga inbäddad media. Genom denna funktion kan du bädda in t.ex. en film du har på youtube. Personaliserat innehåll. Denna funktion använder vi inte ännu. Klipp ut den markerade texten eller bilden och placera i urklipp. Kopiera den markerade texten eller bilden och placera i urklipp. Klistra in innehåll från urklipp. Växla mellan att klistra in som oformaterat/formaterat innehåll. Kan se annorlunda ut beroende av vilket program man klistrar in från. Klistra in från Word. (rekommenderas) Innehållet blir rensat från onödig HTML kod. Infoga redigera bokmärke. Man kan länka till positioner på den aktuella sidan. Genom att klicka på denna får texten fetstil. Genom att klicka på denna blir texten kursiv. Sida 3 av 30

4 Att göra en länk. Markera den text eller bild du vill göra klickbar. Klicka på Infoga länk. Nu öppnas dialogfönstret för att hantera länkar. Du kan länka till en webbsida, intern eller extern, dokument eller en e-postadress. När du vill länka till en webbsida klickar du på fliken webbsida. Välj Sida på denna webbplats, då länkar du till en PRO sida, Sida på annan webbplats då kan du länka till vilken sida som helst på internet eller fliken e-post som gör att besökarens e-post program öppnas med din adress ifylld. Länka till webbsida. Sida 4 av 30

5 På denna webbplats. Klicka på knappen vid adressfältet. Då öppnas trädstrukturen för PROs webbplats. Klicka dig fram i trädet till den sida du vill länka till, klicka på knappen välj. Sida 5 av 30

6 Sida 6 av 30

7 Nu är sidans adress ifylld i adressfältet. Klicka Välj. Nu kommer du tillbaka till editorn, klicka klar och din länk är sparad. Extern länk. Markera den text eller bild du vill länka. Sida 7 av 30

8 Välj fliken webbsida. Klicka i alternativet sida på annan webbplats. Nu tänds adressfältet och du skriver in den URL (adress) som du vill länka till. OBS. adressen måste börja med annars fungerar det inte. Om det är en lång adress kan du kopiera den och klistra in i adressfältet. Klicka OK. Klicka sedan klar i editorn och länken är på plats. Länka till e-post. Gör som ovan men klicka på fliken e-post. Sida 8 av 30

9 Fyll i den e-postadress du vill länka till, klicka OK. Att ta bort en länk. Markera länken du vill ta bort. Klicka på knappen ta bort länk. Texten eller bilden finns nu kvar men är inte länkad. Infoga/redigera bild. Sida 9 av 30

10 När du vill infoga en bild ställer du insättningspunkten, det blinkande strecket, där du vill placera bilden. Klicka på knappen infoga/redigera bild. Dialogrutan för bild öppnas. Det första du ska göra är att tala om vilken bild du vill ha. Det gör du genom att klicka på knappen för arkiv. Den finns bredvid Bildens URL. Du ska nu antingen ange en bild du redan laddat upp eller ladda upp en ny bild. Du kan också välja en bild ur PROs bildbank. PROs bildbank. Klicka på Global files. Välj Bilder för alla, klicka på den kategori du vill ha, klicka sedan på den bild du vill ha och klicka på OK. Sida 10 av 30

11 Nu är bildens adress ifylld och du ser bilden i fönstret för förhandsvisning. Skriv en beskrivning, ALT text, detta för att en del hjälpmedel använder detta. Om du inte skriver något kommer en varning. Klicka på Infoga. Sida 11 av 30

12 Klicka sedan klar i editorn och bilden har lagts in på sidan. Ladda upp ny bild. Klicka på knappen för arkiv. Klicka sedan på sidfiler, det kan automatiskt komma upp, har du inte tidigare laddat upp någon fil ska du skapa sidans katalog. Klicka på Skapa sidans katalog. Nu skapas en katalog för denna sida där du kan ladda upp bilder eller andra filer att länka till. För att ladda upp en bild klickar du på knappen lägg till ny fil. Vä lj fil Sida 12 av 30

13 Välj fil. Nu ser du filerna i din egen dator. Leta fram den bild du vill ha, markera den genom att klicka på den, klicka på öppna. Bredvid knappen välj fil ser du nu namnet på din bild. Klicka på spara. Sida 13 av 30

14 Nu är din bild kopierad till din webbplats. Markera bilden genom att klicka på filnamnet, klicka ok. Sida 14 av 30

15 Nu är bildens adress ifylld och du ser bilden i fönstret för förhandsvisning. Skriv en beskrivning, ALT text, detta för att en del hjälpmedel använder detta. Om du inte skriver något kommer en varning. Klicka på Infoga. Sida 15 av 30

16 Klicka sedan klar i editorn och bilden har lagts in på sidan. Redan uppladdad bild. Klicka på knappen infoga/redigera bild. Dialogrutan för bild öppnas. Klicka på knappen för arkiv. Den finns bredvid Bildens URL. Nu öppnas ditt sidbibliotek. Markera den bild du vill ha genom att klicka en gång på filnamnet. Klicka sedan OK. Sedan fyller du i Bildens beskrivning och till slut infoga. Slutligen klickar du klar i editorn och din bild finns på sidan. Sida 16 av 30

17 Bildredigeraren. I editorn finns vissa möjligheter att redigera en bild. Men vi rekommenderar att du redigerar bilden i din egen dator men ett bra bildbehandlingsprogram. För att redigera en bild klickar du en gång på den så att den blir markerad. Klicka sedan på knappen bildredigerare. Sida 17 av 30

18 Här kan du beskära bilden, ändra storlek, omforma det vill säga rotera, vända eller ta bort färg från bilden. Du kan komprimera bilden, men det är bra om du gjor detta innan. Beskära bilden. Klicka på alternativet beskär. Markera i bilden genom att klicka och dra markeringen över bilden till du har det innehåll du vill ha. Klicka sedan på knappen utför. Sida 18 av 30

19 Välj om du vill att bilden ska sparas som en kopia av orginalet eller ersätta. Om du vill ha en kopia får du en fråga, ange då det namn du vill ha på bilden, klicka OK. Klicka på klar i editorn och bilden är ändrad. Ändra storlek. Klicka på alternativet ändra storlek. Ange sedan i fälten för bredd och höjd vilken storlek du vill ha. Anges i pixlar. OBS se till att alternativet behåll proportioner är ikryssat annars kan bilden bli konstig. Klicka på utför. Sida 19 av 30

20 Välj om du vill spara som en kopia eller ersätta orginalbilden. Se ovan. Omforma bilden. Med detta alternativ kan du göra om bilden. De alternativ som finns är. Rotera bilden medsols Rotera bilden motsols Vänd vertikalt Vänd horisontellt Utför och spara som ovan. Klicka i för att göra bilden svart/vit. Vill du komprimera din bild kan du välja dessa alternativ. Klicka på det du önskar och spara enligt ovan. Sida 20 av 30

21 När du arbetar med din bild finns ångra knapp som tar bort din senaste ändring, gör om knapp som återställer din senaste ändring samt en återställ som tar bort alla dina ändringar och återställer bilden som den var från början. Du kan även zooma bilden. Det är endast när du arbetar med bilden inte när du publicerar den. Infoga/redigera inbäddad media. (Krävs viss kunskap att hantera filmformat) Om du har en film du vill visa. Det kan vara en egen fil, begränsningen 2 MB gäller även film eller en film på till exempel youtube så kan du bädda in den på en av dina sidor. Ställ dig med markören på sidan där du vill att din film ska visas. Klicka på infoga/redigera media. Nu öppnas dialogrutan för media. Du anger här vilken typ av mediaspelare som behövs för att se din film. Var filen finns, i ditt eget arkiv eller en adress på internet. På youtube finns en speciell kod du klistrar in här. Bestäm sedan storleken på fönstret där du vill visa filmen. Under fliken avancerat ser det olika ut beroende på vilken spelare du valt. Sida 21 av 30

22 Klipp ut. Markera den text du vill klippa ut och klicka på knappen, texten/bilden försvinner ur editorn och sparas i urklipp. Kopiera. Markera den text du vill kopiera och klicka på knappen kopiera, texten/bilden kopieras och sparas i urklipp. Klistra in. Det du kopierat eller klippt ut klistrar du in igen genom att ställa markören där du vill ha texten/bilden och klickar på klistra in. Texten/bilden hamnar då där markören är. Sida 22 av 30

23 Växla mellan formaterat/oformaterat. När du arbetar med text/bild i olika program och vill kopiera/klistra in kan det ibland se kosntigt ut. Markera texten/bilden och klicka på knappen växla så kan resultatet bli bättre. Klistra in från Word. När du arbetar med text i Word och vill klistra in det i editorn kan det ibland följa med skräpkod som gör att texten ser väldigt konstig ut. Som regel ska du alltid använda funktionen klistra in från Word Markera den text du vill kopiera i ditt Worddokument och högerklicka-kopiera eller CTRL-C, växla sedan till editorn och klicka på klistra in från word. Ett fönster öppnas där du använder CTRL-V för att klistra in din text. Klicka infoga och det är större chans att resultatet blir bra. Klicka sedan på klar i editorn. Sida 23 av 30

24 Infoga/redigera bokmärke. Om du har en sida som är väldigt lång eller du kanske vill ha en klickbar innehållsförteckning på en sida kan du använda bokmärke. Markera den text bild du vill ha som bokmärke, klicka på knappen Infoga bokmärke. En dialog ruta öppnas där du ska namnge ditt bokmärke. Skriv namnet, klicka infoga. Nu finns bokmärket och du kan använda det när du gör länkar. Fetstil. Markera den text du vill ha fet. Klicka på Kursiv. Markera den text du vil ha kursiv. Klicka på Punktlista. Ibland kan det vara bra att göra sin text lättare att läsa. Vissa punkter kan vara bra att göra som en punktlista. Skriv dina punkter, radmatning måste finnas mellan varje punkt. Markera sedan all punkter och klicka på knappen punktlista. Sedan klar Sida 24 av 30

25 Nu får en lista med punkter före varje punkt. Nummerlista. Du kan även skapa en lista med siffror istället för punkter. Gör på samma sätt som ovan men klicka i stället på knappen nummerlista Då blir det detta resultat. Sida 25 av 30

26 Genom att merkera text och klicka på nedanstående knappar kan du ställa in din text på sidan. högerställer din text centrerar din text vänsterställer din text Stilar. Webbsidan följer PROs grafiska profil. Det finns inte möjlighet att ändra typsnitt eller utseende. Men det är viktigt att få sin text lättläst och det kan man göra bland annat med hjälp av rubriker och underrubriker. Det är viktigt att du använder de förinställda valen för rubriker och inte använder dem för utseende. En rubrik på en webbsida är inte bara utseende utan programmeras med en speciell kod för rubriker. Detta för att det ska bli lättare för en talsyntes att läsa sidan men Google använder även denna kod för sökresultat. Det finns fyra rubriker 1,2,3 och fyra. Markera den text du vill göra en rubrik av.klicka i rullgardinsmeny åch välj rubrik. Vill du ta bort rubriken markerar du texten och klickar på stilar. Ångraknapp. Tar bort den sista ändringen du gjort. Tillbakaknapp. Går tillbaka till din sista ändring. Sökknapp. Med denna kan du söka efter text i ett långt dokument. Klicka på sökknappen, en dialogruta öppnas där du kan söka efter text du kan även söka och byta ut text. Sida 26 av 30

27 Skriv den text du söker efter i hitta vad. Klicka på hitta nästa.den text, om den finns markeras i editorn. Genom att välja fliken ersätt kan du söka efter text och ersätta med en annan. Skriv in sökord och ersättningsord, klicka ersätt eller ersätt alla. Slå av/på fullskärmsläge för editorn. Arbeta med tabell. Tabeller används för att skapa listor och förteckningar. Det går att använda tabeller för att skapa en snygg design om det är mycket innehåll på en sida. När du skapar en tabell anger du hur många rader och kolumner du vill ha. Det går även att infoga flera vid ett senare tillfälle. Dessa funktioner finns. Infoga redigera tabell Tabellradsinställningar. Tabellcellsinställningar Infoga ny rad före Infoga ny rad efter Radera rad Infoga kolumn före Infoga kolumn efter Separera sammansatta celler Sammanfoga celler Sida 27 av 30

28 Infoga/redigera tabell. Generellt. Ange hur många kolumner du vill ha och antal rader. Cellpadding anger utrymmet i pixlar mellan texten och kanten i en cell. Cellspacing anger utrymmet i pixlar mellan cellerna i tabellen. Justering anger tabellens position, när tabellbredden är mindre än det utrymme som är tillgängligt på sidan. Kantlinje kan du ange bredden på kantlinjen i pixlar. Bredd och höjd anger storleken på tabellen. Klass, finns ingen tillgänglig. Överskrift använder du för att skriva en rubrik för tabellen. Då skapas en cell över tabellen du kan använda som rubrik. När du är klar med dina inställningar klckar du på infoga. Sida 28 av 30

29 Avancerat. Ange tabellens ID-nummer, av tillgänglighetsskäl. (ej nödvändigt) Sammanfattning. Ange en beskrivning av tabellens innehåll, av tillgänglighetsskäl. (ej nödvändigt) Stil. Används ej. Språkkod, används ej. Bakgrundsbild. Du kan välja en bild som bildar en bakgrund för hela tabellen. Ram och regler. Du kan här ange hur ramen ska synas på utsidan av tabellen. Välj i rullgardinsmenyn det alternativ du önskar. Regler talar om hur ramarna ska visas på insidan av tabellen. Ange skriftriktningen för tabellen om den skiljer sig från vad som gäller för resten av sidan. Ramfärg anger vilken färg ramen ska ha. Bakgrundsfärg. Om du väljer en färg här får hela tavbellen den färgen som bakgrund. Genom att klicka på knapparna cellinställningar och radinställningar kan du göra samma inställningar per cell eller rad. Sida 29 av 30

30 Sammanfoga celler. Genom att markera de celler du vill slå ihop till en och sedan klicka på sammanfoga celler slås de ihop. Om du sedan vill separera dem markerar du och klickar på separera sammanslagna celler. Sida 30 av 30