Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Transkript

1 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011

2 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man lägger till egen styling. Viss kod kan dock inte tolkas av webbläsaren och därför överensstämmer det inte alltid med hur det ser ut i Word. Klistra in och rensa: mycket kod kommer med och styr det webbläsaren visar. Klistra in som ren text: bara radbrytningar <br/> följer med och man kan sedan formatera texten i Webtool. Klistra in från Word: viss kod kommer med och även styckeindelning <p>. Kan ibland skapa problem. Att tänka på är också att den yta som finns att tillgå på webben, är smalare än ett A4 och därför bryts inte texten på samma ställen som i Worddokumentet. Om man inte vill hålla sig till de stilmallar som finns bör man tänka på: Läsbarheten. Kursiv stil är ibland svår att läsa på skärmen. Ljusa bokstäver, t ex i gult, är svåra att läsa mot vit bakgrund. Liten text med en fast storlek är inte påverkbar på samma sätt som de i stilmallen och kan försvåra för besökare med synnedsättning. Enhetlighet inom sidan. Ser snyggt och seriöst ut. Använd gärna taggarna i nederkanten på editorn för att lättare hitta rätt.

3 Bilder på hemsidorna Startsidan: max bredd 370px Undersidor: max bredd 600px Upplösning: 72 dpi Fotografier: jpg Tecknade bilder: gif Png kan användas för både foto och tecknat. Prova vilket format som ger minsta filstorlek! Att tänka på: Att skala om bilden i editorn minskar inte filstorleken. Bättre att anpassa storleken i ett bildbehandlingsprogram innan man lägger in den i Webtool. Många och stora bilder tar lång tid att ladda. Välj ut några eller lägg på flera sidor. Tabeller vs pdf Tabeller är komplicerade och svåra att jobba med om de blir för stora. Det kan då vara både enklare och smidigare att göra tabellen i ett Worddokument, spara som pdf och ladda upp på sidan. Fördelar med pdf: Snabbare att skapa Samma utseende på alla datorer. Typsnittsoberoende Lätt att skriva ut Exempel på när tabeller brukar användas och förslag på alternativ: Program Händelser och/eller pdf Inbjudningar händelser, nyheter och pdf Protokoll pdf

4 Jobba med tabeller Använd ritverktyget för att skapa en grund Anges ingen bredd anpassas tabellen efter innehållet, men blir inte bredare än satsytan på webbplatsen (600px). Drar man i reglagen i editorn skapas exakta mått både för bredd och höjd Anges bredden i procent anpassas tabellen i procent av satsytan. 100% av 600px gör att den täcker hela satsytan. 50% täcker halva, osv. Kolumnbredden anpassas efter innehåll. Anges bredden pixlar får tabellen en exakt bredd. Tänk på att inte göra den större än satsytan för bästa resultat. Kolumnerna anpassas efter innehåll. Justera innehållet i kolumner Om kolumnerna på en rad är olika höga kan det lätt se rörigt ut om innehållet inte linjerar i överkant. Detta gör du så här: Markera <tr>, dvs hela raden, och välj Properties Vertikal justering överst eller Höger klicka i tabellen och välj Properties Välj den rad du vill göra inställningar på från rutmönstret till höger. Klicka på knappen Radegenskaper och ändra Vertikal justering till överst Detta påverkar alltså alla kolumner i en rad, men du kan även göra samma inställning på enskilda kolumner. Välj då <td> istället för <tr>, alternativt klicka på Cellegenskaper istället för Radegenskaper Lägga till rader och kolumner Klicka på <table> välj properties Rows + lägger till rader längst ner i tabellen Cols + lägger till kolumner till höger i tabellen eller Högerklicka i en kolumn

5 Välj Table och valfritt alternativ (se nedan) o Insert Row Above lägg till rad ovanför vald rad o Insert Row Below lägg till rad nedanför vald rad o Delete Rows ta bort den rad du klickat på o Insert Column Left lägg till kolumn till vänster om vald kolumn o Insert ColumnRight lägg till kolumn till höger om vald kolumn o Delete Column ta bort kolumn Slå ihop kolumner Högerklicka på den kolumn du vill ska sträcka sig över flera Välj Merge cells right för att slå ihop vald kolumn med kolumnen närmast till höger Välj Merge cells down för att slå ihop vald kolumn med kolumnen närmast under. eller Klicka på <table> och välj Properties Markera den kolumn du vill ska sträcka sig över flera i rutmönstret Klicka på knappen Colspan + för att slå ihop vald kolumn med kolumnen närmast till höger Klicka på knappen Span + för att slå ihop vald kolumn med kolumnen närmast under.

6 Filmer YouTube.com Vi rekommenderar att man använder sig av YouTube för att ladda upp filmer till hemsidorna. Filmerna blir då automatiskt anpassade för webben och genom att bädda in dem påverkas inte laddningstiden nämnvärt. För att kunna ladda upp filmer behöver man ett YouTube-konto eller ett Google-konto. Gå in på Klicka på Skapa konto och följ instruktionerna eller Logga in med ditt Google-konto. Ladda upp film Klicka på Ladda upp Klicka på Överför videoklipp och följ instruktionerna När det är klart kan du söka på filmens namn för att titta på filmen Bädda in film på hemsidan Sök på filmens namn Klicka på Dela och Bädda in Kopiera koden och klistra in den i Webtool. OBS!! Editorn måste vara i html-läge!!

7 Händelser (Kalendarium) och Nyheter Händelsefunktionen fungerar som ett kalendarium där man lägger upp planerade händelser/aktiviteter. Med nyhetsfunktionen kan man lyfta fram aktuella händelser/beslut/påminnelser etc. Exempel: Ett SPF distrikt kommer att anordna fem månadsträffar under hösten. Man lägger då upp varje mötesdatum som en händelse och dessa visas på föreningens startsida. Temadagen i friskvård vill man gärna lyfta fram lite extra så när det datumet närmar sig lägger man även ut en nyhet där man berättar mer.

8 När datumet för Temadagen är passerat, försvinner händelsen automatiskt från startsidan. När man publicerade nyheten valde man att sätta avpubliceringsdatum till en vecka senare. Efter några dagar får man in lite bilder och en text från en deltagare. Bilderna och texten publicerar man på en ny sida och samtidigt lägger man upp en nyhet där man berättar att Temadagen blev en succé och en länkar till sidan där man kan läsa mer samt titta på bilderna.

9 HTML guide <p></p> <br /> <div></div> <span></span> <strong></strong> <b></b> <i></i> <em></em> <ol></ol> <ul></ul> <li></li> <table></table> <tr></tr> <td></td> Stycke Radbrytning Lager som håller ihop information Lager som håller ihop information Fet stil Fet stil Kursiv stil Kursiv stil Numrerad lista Onumrerad lista Listobjekt Tabell Tabellrad Tabellkolumn <img> Bild <a ></a> Länk