Webbkurs för distriktsansvariga
Stockholm den 7 och 13 september 2011
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”.
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
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
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.
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å www.youtube.com
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!!
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.
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.
HTML guide
<p></p> Stycke
<br /> Radbrytning
<div></div> Lager som håller ihop information
<span></span> Lager som håller ihop information
<strong></strong> Fet stil
<b></b> Fet stil
<i></i> Kursiv stil
<em></em> Kursiv stil
<ol></ol> Numrerad lista
<ul></ul> Onumrerad lista
<li></li> Listobjekt
<table></table> Tabell
<tr></tr> Tabellrad
<td></td> Tabellkolumn
<img> Bild
<a ></a> Länk
