Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r»

Storlek: px
Starta visningen från sidan:

Download "Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r»"

Transkript

1 Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r» skriv ut» C SS - gr unde r Infor mation om C S S CS S i exter n mall eller i dokumentet? A nvända classer som selektor er Mer om enheter : % - em - px Teckensnitt och teckenfär g Rubr iker B akgr undsfär g B akgr undsbild A HR EF - länkar ( pseudo- classes) L änkar - ta bor t under str ykning L änkar - egen fär g L änkar - O nmouseo ver Radavstånd Juster ing av text L istor - punktlistor och numr er ade listor Textbakgr undsfär g eller bakgr undsbild K antlinjer i tabeller mm S kuggor med bakgr undsbild S idbr ytning CS S för utskr ift ( media="pr int") ---> Fär g på bläddr ingslist - scr ollbar ---> V a d ä r C S S o c h v a r f ö r s k a d u a n v ä n d a d e t? Innehåll och struktur CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre och 1 av :56

2 möjliggjort formateringar och effekter som inte fanns i HTML standarden. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas. Tillgänglighet En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webbläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webbplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webbplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då alltså bort helt... (läs mer om W3C och webstandards») CSS levels CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2 har förbättrats och finns i version CSS21 men kommer att ersättas av CSS3 som idag inte är helt färdig. Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS1» - CSS2» - CSS3» TIPS! CSS har begränsat stöd i framförallt äldre webbläsare men även i IE6. Den webbläsare som bäst följer specifikationerna från W3C är Firefox - detta gäller framförallt CSS2- positionering». Använd i första hand Firefox när du testar dina CSS-layoter för att se det korrekta resultatet och anpassa sedan koden till IE vid behov. Läs mer om Firefox och andra webbläsare här» Läs mer om: CSS-effekter» - CSS-positionering» - CSS-menyer» - CSS-layout» C S S i e x t e r n m a l l e l l e r i d o k u m e n t e t? När du använder CSS för att formatera en sida kan du infoga CSS-formateringen på tre sätt: Extern CSS-mall en extern CSS-mall som kopplas till dokumentet I dokumentet i dokumentets huvud <HEAD> 2 av :56

3 3. Direkt i element) i elementet där CSS-formateringen ska utföras 1. C S S i ex t er n m a l l Det här är den vanligaste användningen av CSS där ett externt dokument som innehåller formateringen kopplas till alla de sidor som ska tillämpa formatet. Namnet på CSS-mallen måste ha filtilläget.css och namnet på mallen i exemplet nedan är "mall.css". Den här metoden är mest effektiv, om formateringen ska ändras behöver du bara göra det i ett enda mall-dokument. Här uppfylls målet med att separera innehåll och struktur i dokumenten. Så här kan koden för sidorna som kopplas till mallen se ut: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sidan namn</title> <link href="mall.css" rel="stylesheet" type="text/css"> </head> <body> <h1>rubrik</h1> </body> </html> CSS-mallen "mall.css" innehåller formateringen av rubriken <H1>: h1 { font-size: 24px; }... och när rubriken <H1> används i sidan formateras den enligt den externa CSS-mallen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sidan namn</title> <link href="mall.css" rel="stylesheet" type="text/css"> </head> <body> <h1>rubrik</h1> 3 av :56

4 </body> </html> Du kan koppla flera externa CSS-mallar till samma dokument. Om samma selektorer förekommer i båda mallarna men med olika formatering gäller den mall som angivits senast i radvis ordning. I exemplet nedan gäller alltså "mall2.css" före "mall.css": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sidan namn</title> <link href="mall.css" rel="stylesheet" type="text/css"> <link href="mall2.css" rel="stylesheet" type="text/css"> </head> <body> <h1>rubrik</h1> </body> </html> 2. C S S i d o k u m en t et CSS-formatering angiven direkt i dokumentet kan användas när vissa sidor ska avvika från huvudmallens formatering. Den här metoden är inte lika effektiv som att använda en extern CSS-mall. Om formateringen ska ändras måste det utföras i varje dokument som använder formateringen. Här formateras rubriken <H1> direkt i dokumentet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sidan namn</title> <style type="text/css"> <!-- h1 { font-size: 24px; } --> </style> </head> <body> <h1>rubrik</h1> </body> </html> 3. D i r ek t i el e m en t et s o m s k a fo r m a t er a s Den här metoden är minst effektiv och här uppfylls inte målet med att separera innehåll och struktur i 4 av :56

5 dokumenten. CSS-formateringen anges i anslutning till de elementsom ska formateras. När formatet ska användas i ett nytt elememnt måste CSS-koden anges på nytt och det innebär att sidorna innehåller mycket kod och tar längre tid att laddas i webbläsaren. Så här kan koden se ut när rubriken <H1> formateras direkt i elementet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>sidan namn</title> </head> <body> <h1 style="font-size: 24px;">Rubrik</h1> </body> </html> VIKTIGT! För all CSS-formatering gäller att all tidigare HTML-formatering måste tas bort innan CSS-formateringen fungerar. Prioriteringsordningen av formateringen är följande: HTML-formatering CSS-kod i element eller avsnitt där formateringen ska tillämpas CSS-kod i dokumentet CSS i extern mall Detta innebär att du kan börja formateringen i en extern CSS-mall som du kopplar till dina dokument. Vill du sedan ange avvikande format lokalt i ett dokument formaterar du CSS direkt i dokumentet (gäller då före den externa CSS-mallen). Om någon del av dokumentet ska avvika från övrig CSS-formatering anger du detta direkt i avsnittet/objektet (gäller då före både CSS i dokumentets <HEAD> och CSS i en extern CSS-mall) A n v ä n d a c l a s s e r s o m s e l e k t o r e r CLASS kan användas som attribut till alla element och det ger dig möjlighet att använda olika format på samma typ av element. Om du vill tilldela elementet <P> olika format kan du alltså lägga till attributet CLASS och det class-namn som ska användas: <p class="textformat1">text här...</p> <p class="textformat2">annan text här...</p> Här tillämpas formateringen med CLASS som attribut till <P>: <body> <h1>text 1</h1> <p class="textformat1">för att din webbplats ska vara tillgänglig för besökare måste den ha en unik 5 av :56

6 adress och finnas på en dator som alltid är ansluten till Internet. Du kan använda din egen dator om du har en fast uppkoppling mot Internet med en egen IP-adress. Risken är dock stor att din dator utsätts för virus eller andra intrång och du bör ha en sk "brandvägg" (Firewall) och antivirusprogram. En enklare lösning är att istället anlita ett webbhotell som erbjuder utrymme för dina webbsidor. </p> <h1>text2</h1> <p class="textformat2">ett seriöst webbhotell ansvarar för brandvägg och virusskydd. Dessutom är det viktigt att de gör regelbundna backuper av din webbplats och att din webbplats finns på fler än en webserver så att den alltid är tillgänglig även om en webserver krånglar... Adressen till din webbplats får du genom att registrera ett eget domännamn som är lätt att komma ihåg för dina besökare. Dessutom får du samtidigt epost-adresser med samma namn.</p> </body> Här är classerna angivna i CSS-mallen. Notera den inledande punkten i classnamnet som är viktig och måste finnas med: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; } h1 { font-size: 24px; font-weight: normal; letter-spacing: 2px; }.textformat1 { color: #336699; }.textformat2 { color: #990000; }... här är resultatet i webbläsaren: Du kan ha flera mallar med de namn du själv anger som som tex:.teckensnitt2.textcolor.bakgrundsfarg.kantlinje.kantlinje2 6 av :56

7 CLASS kan också användas på angivet område i ett element sk inline element. Om du bara vill formatera några ord inom <P> kan du omluta området som ska formateras med <SPAN>: <p>här är <span class="textformat2">några ord</span> formaterade...</p> Här används <SPAN> för att omsluta de delar av texten som ska formateras: <body> <h1>text 1</h1> <p>för att <span class="textformat12">din webbplats</span> ska vara <span class="textformat2">tillgänglig</span> för besökare måste den ha en unik <span class="textformat2">adress</span> och finnas på en dator som alltid är ansluten till Internet. Du kan använda din<span class="textformat2"> egen dator</span> om du har en fast uppkoppling mot Internet med en egen IP-adress. Risken är dock stor att din dator utsätts för virus eller andra intrång och du bör ha en sk "brandvägg" (Firewall) och antivirusprogram. En enklare lösning är att istället anlita ett webbhotell som erbjuder utrymme för dina webbsidor. </p> </body>... här är resultatet i webbläsaren: M e r o m e n h e t e r : % - e m - p x Storlekar på framförallt text men även boxar (områden) kan anges med olika enheter och den vanligaste enheten för text i HTML var tidigare "size" som utgick ifrån en standardstorlek (default) och angav storlek i 7 steg (läs mer om font size i HTML grunder»). CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm. Problemet med pixlar är att IE och vissa andra webbläsare inte kan förstora dem om användaren vill se texten i större storlek. Den här guiden har textstorlek angiven i em och kan förstoras i både Firefox och i Internet Explorer och med tanke på framtida tillgänglighet är det en fördel - se informationen i början av guiden» 7 av :56

8 TIPS! Prova att förstora eller förminska texten i denna guide. Snabbkommandot i Firefox och Internet Explorer är CTRL+plus eller CTRL+minus (återställ till standard med CTRL+0). Snabbkommandon finns inte i IE6 men du kan välja menyn "Visa/Textstorlek" där du har fem olika storlekar att välja på ("mellan" är standardvärdet). Klicka här för provsida med olika enheter» Textstorlekar kan anges i enheterna: px - pixlar (pixels) - samma enhet som bildskärmars upplösning pt - Punkter (point) - 1 pt är lika med 1/72 inch in - tum (inch) cm - centimeter mm - millimeter p - picas - 1 pc är lika med 12 punkter em - em - relativ till andra element ex - exs - en ex är x-höjden på ett tecken % - Procent - relativ till andra element Enheterna "pt", "pica" och "ems" har traditionellt använts i typografin och trycksaker och det är förmodligen "punkter" (pt) som är mest allmänt använt i tex ordbehandling. Enheten em är ursprungligen ett horisontellt mått som utgår från bredden på bokstaven "M". Två bindestreck ihop (--) kallas för "em-dash" och har samma bredd som bokstaven "M". Endast ett bindestreck (-) kallas "en-dash". Begreppet "em" har inte samma betydelse i CSS som i typografin då bokstaven "M" inte finns i alla länders teckenuppsättningar. Alla teckenuppsättningar har däremot en höjd på tecknen och "em" används i CSS som en enhet för höjd på tecken. Enheten em är betydelsefull i CCS för att skapa skalbara dokument som fungerar på flera enheter och du bör alltså använda "em" som enhet för både text och områden (boxar). Em är relativ till andra element och utgår alltså från tidigare formatering. Om du anger textstorlek för "brödtexten" <P> till "10 pixlar" så kan du formatera radhöjd, teckenmellanrum, rubriker, storlek på boxar mm relativt till texten genom att ange "em" som enhet på dessa element. Klicka här för att se exempel på användning av "em" i text» TIPS! Fler exempel och information om enheter finns i guiden CSS-positionering» T i l l ä m pa C SS- f o r m a t e r i nge n Tillämpa CSS-formateringen i en extern mall eller direkt i dokumentet. OBS! Ta bort all eventuell tidigare HTML-formatering för att CSS-formateringen ska gälla. Läs mer i avsnittet ovan: CSS med olika metoder» 8 av :56

9 T e c k e n s n i t t o c h t e c k e n f ä r g För att använda samma teckensnitt och storlek på all text i ett dokument kan innehållet i CSS-mallen "textmall.css" se ut så här: body {font-family: Verdana; font-size: 11px;} p {font-family: Verdana; font-size: 11px;} td {font-family: Verdana; font-size: 11px;} li {font-family: Verdana; font-size: 11px;} Klicka här för att se exemplet» Notera att formateringen anges för flera märken för att även texten som finns i tabellceller <TD>, stycketext <P> och listor <LI> ska formateras. Det kan fungera att bara ange textstorleken inom <BODY> men vissa webbläsare använder då inte formateringen i tabellceller eller listor. Att ange samma formatering för de element du använder på din sida är en metod att säkerställa att formateringen verkligen fungerar i de flesta webbläsare. Textfärg på all text i hela dokumentet <BODY> kan du ange så här: body {color: #003366;}...formatering av både teckensnitt och textfärg kan se ut så här:: body {font-family: Verdana; font-size: 11px; color: #003366;} p {font-family: Verdana; font-size: 11px;} td {font-family: Verdana; font-size: 11px;} li {font-family: Verdana; font-size: 11px;} Tillämpa CSS-formateringen endast på de märken (taggar) och objekt du använder i ditt dokument. Om du inte använder tabeller <TABLE> kan du alltså hoppa över formateringen av <TD>. R u b r i k e r < H > Ett effektivt sätt att enkelt kunna byta formatering av Rubrikerna i dokument är att koppla dem till de vanliga märkena för "heading" H1-H6. Då kan du formatera "brödtexten" enligt avsnittet om teckensnitt ovan men ha olika storlekar på rubrikerna genom att tilldela märkena <H1> till <H6> egna storlekar och teckensnitt. Då kan innehållet i CSS-mallen "textmall.css" (eller inom <HEAD> på aktuell sida) se ut så här: h1 { font-family: Verdana; font-size: 24px; font-weight: normal; letter-spacing: 2px; } h2 { font-family: Verdana; font-size: 20px; font-weight: normal; letter-spacing: 1px; } h3 { font-family: Verdana; font-size: 16px } body {font-family: Verdana; font-size: 11px;} 9 av :56

10 p {font-family: Verdana; font-size: 11px;} td {font-family: Verdana; font-size: 11px;} li {font-family: Verdana; font-size: 11px;} Klicka här för att se exemplet» B a k g r u n d s f ä r g Även bakgrundsfärgen kan du ange i din CSS-mall vilket gör det enkelt att byta färg på alla sidor. Både teckensnitt och bakgrundsfärg för hela sidan anges i märket <BODY>. Då kan innehållet i CSS-mallen "textmall.css" (eller inom <HEAD> på aktuell sida) se ut så här: body {background-color: #CCCC99;} Bakgrundsfärg, teckensnitt och teckenfärg för hela sidan kan du ange inom <BODY>: body { background-color: #CCCC99; font-family: Verdana; font-size: 11px; color: #666633} Klicka här för att se exemplet» B a k g r u n d s b i l d För att ange vilken bakgrundsbild som skall användas gör du på samma sätt som med bakgrundsfärg. I exemplet nedan används både en bakgrundsbild och en bakgrundsfärg i samma nyans (bakgrundsfärgen syns ju i webbläsaren den tid det eventuellt tar för bakgrundsbilden att laddas ner): body { background-image: url(bakgrundsbild.jpg);} Klicka här för att se exemplet» 10 av :56

11 Här anges bakgrundsbild tillsammans med bakgrundsfärg och teckensnitt: body { background-image: url(bakgrundsbild.jpg); background-color: #6699FF; font-family: Verdana; font-size: 11px; } CSS ger fler möjligheter att bestämma bakgrundsbildens position, egenskaper och upprepning. B a k g r u n d s b i l d s o m i n t e u p p r ep a s body { background-image: url(bakgrundsbild.gif); background-repeat: no-repeat } Klicka här för att se exemplet» 11 av :56

12 B a k g r u n d s b i l d s o m ä r fi x er a d o c h en d a s t u p p r ep a s å t h ö g er (ej n ed å t ): body { background-image: url(bakgrundsbild.gif); background-repeat: repeat-x; backgroundattachment: fixed } Klicka här för att se exemplet» 12 av :56

13 B a k g r u n d s b i l d s o m ä r fi x er a d o c h i n t e u p p r ep a s. D es s u t o m ä r b i l d en c en t r er a d b å d e h o r i s o n t el l t o c h v er t i k a l t : body { background-image: url(bakgrundsbild.gif); background-repeat: no-repeat; backgroundposition: center center; background-attachment: fixed } Klicka här för att se exemplet» 13 av :56

14 B a k g r u n d s b i l d s o m b a r a u p p r ep a s n ed å t (ej å t h ö g er ): body { background-image: url(bakgrundsbild.gif); background-repeat: repeat-y} Klicka här för att se exemplet» 14 av :56

15 A H R E F - l ä n k a r ( p s e u d o - c l a s s e s ) Pseudo-classes är en benämning på information som kan användas i CSS selektorer men inte finns som HTML-kod. Det är egentligen en form av "fiktiva taggar" som gör det möjligt att tex ange egenskaper för länkar. HTML använder elementet <A HREF> men det finns inga andra attribut till märket som anger om en länk har använts (besökts). Däremot finns det funktioner i webbläsaren som som tilldelar länkarna egenskaper om de besökts eller ej. Genom att använda pseudo-classes till <A HREF> kan du själv bestämma egenskaperna med CSS. Selektorerna som används för länkar <A HREF> är: a:link = länk a:visited = länk som användaren klickat på a:active = länk som välj (klickas på) av användaren a:hover = länk som muspekaren förs över (hovras över) OBS!! Pseudo-class för A:ACTIVE (aktiv länk) fungerar olika beroende på vilken webbläsare som används. Internet Explorer visar egenskapen när sidan som länken leder till är aktiv och visas. Firefox 15 av :56

16 visar bara egenskapen när musknappen hålls intryckt. CSS-koden nedan använder alla selektorerna tilldelade olika format: a:link { color: #FF0000; } a:visited { color: #999933; } a:active { letter-spacing: 5px; } a:hover { background-color: #FFFF00; }... här är resultatet i webbläsaren: Klicka här för att se exemplet» T a b o r t u n d e r s t r y k n i n g i l ä n k Att ta bort understrykningen i länkar är något som används i menyer där man ju kan förstå att alla menyval är länkade. Om du vill ta bort understrykningen på länkar i övrigt bör du se till att de har en färg eller annat kännetecken som gör att dina besökare förstår att det är klickbara länkar. Koden nedan tar bort understrykning på länkar, besökta länkar och aktiva länkar: a:link { text-decoration: none} a:visited { text-decoration: none} a:active { text-decoration: none} L ä n k a r - e g e n f ä r g OBS! Tänk på att dina besökare kanske letar efter det typiska länkutseendet (blå och understruken) och kan missa dina länkar om de inte är utmärkande på något annat sätt. Genom att ta bort understrykning och ändra färg på länkarna kan du få dina menyer mm att passa in bättre i din övriga layout. 16 av :56

17 Koden nedan ändrar färg på länkar och besökta länkar och ger bakgrundsfärg vid hovring: a:link { color: #006699; } a:visited { color: #666666; } a:hover { background-color: #cccccc; } L ä n k a r - O n M o u s e O v e r OnMouseOver (rollover, hover) är läget när du för muspekaren över en länkad text. Med CSS kan du tilldela text och bildlänkar olika OnMouseOver-effekter. Exemplet nedan tar bort understrykningen av länkar men visar understrykning vid OnMouseOver. Koden kan se ut så här: a:link { text-decoration: none; color: #CC3333} a:visited { text-decoration: none; color: #CC3333} a:active { text-decoration: none; color: #CC3333} a:hover { text-decoration: underline} OBS! Selektorn a:hover måste placeras efter a:link och a:visited. Om du använder bakgrundsfärg som hover-effekt kommer den annars inte att synas. Det finns flera andra rollover-effekter och du ser några exempel nedan. a:hover { color: #CC6600} a:hover { background-color: #99CCFF} a:hover { text-decoration: underline overline} a:hover { font-style: italic} a:hover { background-image: url(egen_bild.gif)} a:hover { letter-spacing: 5px} a:hover { cursor: help} a:hover { cursor: e-resize} a:hover { color: #FFFFFF; background-color: #006699} Klicka här för att se alla exemplen ovan» 17 av :56

18 R a d a v s t å n d Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). Class-namnet i exemplet nedan är.linespacing och koden kan se ut så här:.linespacing {line-height: 20px}...tillämpa classen på ett stycke <P> eller tabellcell <TD> <body> <p class="linespacing">texten i ett stycke...</p> </body> Om du bara vill formatera några ord inom <P> kan du omluta området som ska formateras med <SPAN>. Exemplet nedan formaterar endast den text som omsluts av <span>: <body> <p>texten i ett stycke men bara ett <span class="linespacing">par tre textrader som formaterats med CSS-mallen för radavståndet</span> och de andra raderna är oformaterade...</p> </body> normalt radavstånd 20 pixlar.linespacing {line-height: 20px} Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). 200 % 20 punkter.linespacing {line-height: 200%}.linespacing {line-height: 20pt} Du kan styra radavståndet i hela din text eller i Du kan styra radavståndet i hela din text eller i 18 av :56

19 vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). J u s t e r i n g a v t e x t Justering av text höger, vänster, centrerad eller marginaljustering. Du kan även ange avstånd mellan orden eller bokstäverna. Class-namnet i exemplet nedan är.justering och koden kan se ut så här:.justering {text-align: justify;} (För tillämpning av formateringen se ovan» ) full justering (marginaljustering) första radens indrag.justering {text-align: justify;}.justering {text-indent: 20px;} Full justering av texten används ofta i tidningsartiklar eller ordbehandling i kolumner och kallas i CSS för "justify". För bästa resultat ska egentligen vissa ord avstavas men ännu finns ingen bra metod för detta varken i HTML eller i CSS. Naturligtvis kan du också ange vänsterjustering (left), högerjustering (right), och centrering (center) på samma sätt som i HTML men fördelen är ju att du kan ändra all justering i en extern CSS-mall. Första radens indrag i en text är också en formatering som används i tidningsartiklar och ordbehandling. Varje nytt stycke börjar då med indragen text och det passar bra att samtidigt formatera avståndet mellan stycken <P> och radavstånd för att få full kontroll över textflödet. Här är formateringen tillämpad på stycken <P> och varje nytt stycke inleds med det angivna indraget. avstånd mellan ord avstånd mellan bokstäver.justering {word-spacing: 10px;}.justering {letter-spacing: 3px;} 19 av :56

20 Avstånd mellan ord är (liksom avstånd mellan bokstäver) kanske inte är den mest använda formateringen men du kanske har användning av den ändå? Avstånden mellan orden kan anges med olika mått som tex: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). A v s t å n d m e l l a n b o k s t ä v e r ä r ( l i k s o m a v s t å n d m e l l a n o r d ) k a n s k e i n t e ä r d e n m e s t a n v ä n d a f o r m a t e r i n g e n m e n d u k a n s k e h a r a n v ä n d n i n g a v d e n ä n d å? A v s t å n d e n m e l l a n b o k s t ä v e r n a k a n a n g e s m e d o l i k a m å t t s o m t e x : p o i n t s ( p t ), p i x e l s ( p x ), i n c h ( i n ), c e n t i m e t e r ( c m ), m i l l i m e t e r ( m m ), p i c a ( p c ), p r o c e n t ( % ). L i s t o r - p u n k t l i s t o r o c h n u m r e r a d e l i s t o r Punktlistor <UL> eller numrerade listor <OL> kan formateras med CSS. Förutom att formatera hela listan han du formatera varje listelement <LI>. CSS-kod till punktlista med cirkel som symbol: (ul { list-style-type: circle})... formaterar alla punktlistor <UL> i dokumentet: Punkt 1 Punkt 2 Punkt 3 CSS-kod till punktlista med punkt som symbol: (ul { list-style-type: disc})... formaterar alla punktlistor <UL> i dokumentet: Punkt 1 Punkt 2 Punkt 3 CSS-kod till punktlista med rektangel som symbol: (ul { list-style-type: square}) 20 av :56

21 ... formaterar alla punktlistor <UL> i dokumentet: Punkt 1 Punkt 2 Punkt 3 För att få olika format punktlistor i samma dokument använder du en class som selektor:.punktlista {list-style-type: circle}...tillämpa classen på de listområden <UL> som ska ha formateringen: <ul class="punktlista"> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> E g n a b i l d er i p u n k t l i s t a Egna bilder kan användas som symbol i punktlistorna: Punkt 1 Punkt 2 Punkt 3 Punkt 1 Punkt 2 Punkt 3 Punkt 1 Punkt 2 Punkt 3 CSS-kod till punktlista med bild som symbol: ul {list-style-image: url(dinegenbild.gif)} 21 av :56

22 För att få olika format punktlistor i samma dokument använder du en class som selektor:.bildpunktlista {list-style-image: url(dinegenbild.gif)}...tillämpa classen på de listområden <UL> som ska ha formateringen: <ul class="bildpunktlista"> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> N u m r er a d l i s t a Numrerade listor <OL> formateras enligt samma pricip som punktlistorna ovan. De olika egenskaper du kan använda ser du i exemplen nedan: ol { list-style-type: lower-roman} i. ii. iii. Punkt 1 Punkt 2 Punkt 3 ol { list-style-type: upper-roman} I. II. III. Punkt 1 Punkt 2 Punkt 3 ol { list-style-type: lower-alpha} a. b. c. Punkt 1 Punkt 2 Punkt 3 ol { list-style-type: upper-alpha} A. B. C. Punkt 1 Punkt 2 Punkt 3 ol { list-style-type: decimal} Punkt 1 Punkt 2 Punkt 3 T e x t b a k g r u n d s f ä r g Med hjälp av CSS kan du få en färgad bakgrund på bokstäver, ord eller hela rader. 22 av :56

Inför prov 1 i webbdesign

Inför prov 1 i webbdesign Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke

Läs mer

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20 Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering

Läs mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.

Läs mer

CSS-övningar. 1. Grunder

CSS-övningar. 1. Grunder CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN.

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN. CSS CASCADING STYLE SHEETS GRUNDKURS Introduktion till stilmallar, CSS CSS står för Cascading Style Sheets CSS är ett språk som används för att få bättre kontroll över utseendet (formatering och layout)

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1 En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en

Läs mer

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1 Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

Den kompletta HTML- och CSS-guiden. Framsida

Den kompletta HTML- och CSS-guiden. Framsida Framsida 2005-08-24 14.34 Sida 1 av 99 Innehållsförteckning Framsida...1 Vad kommer HTML ifrån?...3 SGML... 3 XML...5 Struktur...6 HTML...7 Får vi börja skriva webbsidor nu?... 9 HTML 4.01...9 Introduktion

Läs mer

Webbdesign vt. 2010. Innehållsförteckning

Webbdesign vt. 2010. Innehållsförteckning Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans

Läs mer

Vägen till en lyckad responsiv webbdesign.

Vägen till en lyckad responsiv webbdesign. Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig,

Läs mer

Webbdesign vt. 2009. Innehållsförteckning

Webbdesign vt. 2009. Innehållsförteckning Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder

Läs mer

TDDD52 CSS. Färger. Färger 1/3/13

TDDD52 CSS. Färger. Färger 1/3/13 Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis

Läs mer

Manual för visionutv.net Redigera

Manual för visionutv.net Redigera Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar

Läs mer

Grundläggande instruktioner för att publicera webbsidor på webbservern.se

Grundläggande instruktioner för att publicera webbsidor på webbservern.se Grundläggande instruktioner för att publicera webbsidor på webbservern.se Av Julia Klingvall i samarbete med webbservern.se. Version 1.1, januari 2005. I denna guide kommer du att lära dig de viktigaste

Läs mer

Integrerad i egen cup-portal Sid 1

Integrerad i egen cup-portal Sid 1 Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning Skapa en rapport med snygg formatering, rubriker, sidnummer och sförteckning MS Office Word 2010 Precis som med målning och tapetsering blir jobbet med rapportskrivning både bra och roligt om man gjort

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning Skapa en rapport med snygg formatering, rubriker, sidnummer och sförteckning MS Office Word 2011 för Mac Precis som med målning och tapetsering blir jobbet med rapportskrivning både bra och roligt om man

Läs mer

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00 Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

Läs mer

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet Guide Till Bättre Nyhetsbrev För dig som jobbar som webbdesigner eller med HTML i allmänhet För dig som har, eller ska börja skicka nyhetsbrev Introduktion Skicka HTML brev Många som är nya på området

Läs mer

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

E07 "Greased Lightning"

E07 Greased Lightning E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer

Läs mer

Dokumentation av rapportmall

Dokumentation av rapportmall Dokumentation av rapportmall Utgivningsår: 2003 Författare: Eva Erbenius Samhällsmedicin Centrum för Tillämpad Näringslära Box 175 33 Wollmar Yxkullsgatan 19 118 91 Stockholm Innehåll Inledning... 3 Rapportens

Läs mer

Word 2003. bengt hedlund

Word 2003. bengt hedlund Word 2003 bengt hedlund Det här dokumentet är tänkt underlätta för Dig när Du arbetar med Word. I kursen Datagrund, när Du skriver en rapport i någon annan kurs, eller i varje sammanhang när Du vill använda

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden

Läs mer

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

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 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äs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera

Läs mer

Visa och dölja element med JavaScript

Visa och dölja element med JavaScript Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 1 Villaägarnas Riksförbund Sollentuna 2011 Postadress Besöksdress Telefon Fax E-post Hemsida Box 7118, 192 07 Sollentuna Johan Berndes väg 8-10 010-750

Läs mer

Övningar i CSS för anpassning till olika enheter

Övningar i CSS för anpassning till olika enheter Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Personlig anpassning av Microsoft Word 2007. Vers. 20101001

Personlig anpassning av Microsoft Word 2007. Vers. 20101001 Personlig anpassning av Microsoft Word 2007 Vers. 20101001 Innehållsförteckning: Menyer... 3 Ta bort menyflikarnas ikoner... 3 Anpassning av snabbåtkomstfältet... 4 Tangentbordskommandon... 4 Kortkommandon

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Dupoint i.site 4.0 Mallhandboken

Dupoint i.site 4.0 Mallhandboken Dupoint i.site 4.0 Mallhandboken Dupoint AB Telefon: 08-441 74 80 E-post: info@dupoint.com Internet: www.dupoint.com Innehåll Arbeta med mallar... 1 Skapa en mall 1 Metadata avancerade mallar 2 Referenslista,

Läs mer

Nätet. Uppgiften. Nivå

Nätet. Uppgiften. Nivå Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har

Läs mer

CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT. Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet

CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT. Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet SAMMANFATTNING Caews är ett enkelt web script, tänkt att användas för

Läs mer

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket. e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av

Läs mer

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

VERKTYGSFÄLTET I ARTIKELEDITORN

VERKTYGSFÄLTET I ARTIKELEDITORN Joomla Guide 2.5.11 VERKTYGSFÄLTET JCE EDITORN Sida 1 av 8 VERKTYGSFÄLTET I ARTIKELEDITORN En kort genomgång/förklaring till de vanligaste symboler och användningsområdena för verktygsfältet i Joomla Uppdateringsmodulen

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

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

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. 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

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Grundläggande Ordbehandling Microsoft Word

Grundläggande Ordbehandling Microsoft Word Grundläggande Ordbehandling Microsoft Word Programfönstret Namnlist Verktygsfält Menyrad Vågrät linjal Lodrät linjal Rullningslist Statusfält Menyer och Verktygsfält Visa eller dölja ett verktygsfält Högerklicka

Läs mer

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Beräknad tidsåtgång: ca. 3 timmar. I ASP.NET 4.5 finns en stor mängd nya funktioner för att förenkla utvecklingen

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök www.rxk.se för aktuell statuslista. Gör din beställning direkt i vår webbutik.

Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök www.rxk.se för aktuell statuslista. Gör din beställning direkt i vår webbutik. Handbok HTML I denna Handbok lär du dig att skapa egna hemsidor från grunden. Handboken innehåller information om hur du hanterar texter, bilder, tabeller, ramar och listor. Du får även läsa om grunderna

Läs mer

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application Manual till APA En instruktionsmanual för användare av APA Advanced Publication Application Versionshistoria 2005-10-13 början Anders Nilsson 2007-05-12 slutversion Adam Boman Vid frågor om APA eller denna

Läs mer

Lär dig WORD. Lars Ericson datorkunskap.com

Lär dig WORD. Lars Ericson datorkunskap.com Lär dig WORD Lars Ericson datorkunskap.com WORD Programmet Microsoft Word används till ordbehandling och att tillverka enklare dokument med texter och bilder. När du öppnar upp Word kan det se ut ungefär

Läs mer

Manual för Episerver 5 för redaktörer i förskola och skola www.mark.se Innehåll

Manual för Episerver 5 för redaktörer i förskola och skola www.mark.se Innehåll Manual för Episerver 5 för redaktörer i förskola och skola Marks kommuns hemsida www.mark.se ses bäst i text storlek mellan. Du kan ändra i Explorer Visa, textstorlek. Webbplatsen är byggd för upplösningen

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

Personlig anpassning av Microsoft Word 2013. Vers. 20131001

Personlig anpassning av Microsoft Word 2013. Vers. 20131001 Personlig anpassning av Microsoft Word 2013 Vers. 20131001 Innehållsförteckning: Menyer... 3 Ta bort menyflikarnas ikoner... 3 Anpassning av snabbåtkomstfältet... 4 Tangentbordskommandon... 5 Kortkommandon

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

!!!!! Bruksanvisning !!!!!!!!! För version 1.11.x (uppdaterad 2014-07-09) !!!!!!!!!!!!! Birger Eriksson webblots.se

!!!!! Bruksanvisning !!!!!!!!! För version 1.11.x (uppdaterad 2014-07-09) !!!!!!!!!!!!! Birger Eriksson webblots.se Bruksanvisning För version 1.11.x (uppdaterad 2014-07-09) Birger Eriksson webblots.se Bruksanvisning för webbsidor byggda med CMS Made simple Start... 4 Lägg till eller ändra sida... 4 Lägg till ny sida...

Läs mer

EPI Server 6.0. Lathund till Episerver. Innehåll

EPI Server 6.0. Lathund till Episerver. Innehåll EPI Server 6.0 Lathund till Episerver Innehåll Inloggning... 1 Hitta dina sidor... 1 Skapa, spara och publicera... 3 Obligatoriska fält... 4 Redigera innehåll... 6 Tillgängliga knappar i editorn... 6 Bilder...

Läs mer

Manual till publiceringssystemet WebMe

Manual till publiceringssystemet WebMe Manual till publiceringssystemet Senast ändrad augusti 2010 Innehåll Logga in... 3 Översikt av sidor/funktioner... 3 Innehåll... 3 Användare... 3 Utseende... 3 Inställningar... 3 Bygg formulär... 4 Postade

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,

Läs mer

Copyright Tervix AB 2004. All rights reserved.

Copyright Tervix AB 2004. All rights reserved. Copyright Tervix AB 2004. All rights reserved. Inledning Tervix Web Publisher 2.0 (TWP 2.0) är ett verktyg för underhåll och uppdateringar av hemsidor och andra publikationer på Internet. Det enda du behöver

Läs mer

Webbdesign. maj 2008 Daniel Cronholm Sensus Studieförbund daniel.cronholm@gmail.com 073 600 8000

Webbdesign. maj 2008 Daniel Cronholm Sensus Studieförbund daniel.cronholm@gmail.com 073 600 8000 Webbdesign Bestäm dig för på vilket sätt du vill lära dig att göra webbsidor. Titta på de metoder som används när du kodar. Skapa en första sida med XHTML och CSS. Gör lite övningar. En sammanställning

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

Rapportens titel obligatorisk

Rapportens titel obligatorisk Formatmallen Titel Rapportens titel obligatorisk Rapportens undertitel Ej obligatoriskt fält men här kan en bild eller en kort sammanfattning på cirka 100 ord läggas in. Formatmallen Undertitel Fält för

Läs mer

Skapa webbsidor med SeaMonkey Composer

Skapa webbsidor med SeaMonkey Composer 1 av 25 2011-01-18 19:37 Skapa webbsidor med SeaMonkey Composer SeaMonkey Composer låter dig skapa dina egna webbsidor och publicera dem på webben. Du behöver inte känna till HTML för att använda Composer;

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

DIN FÖRSTA HEMSIDA: Det här är min första hemsida.

DIN FÖRSTA HEMSIDA: Det här är min <b>första</b> hemsida. 3 Grunderna Nu är det dags att börja skriva HTML på allvar. I det här kapitlet kommer vi att gå igenom allt du behöver veta för att göra en hemsida med rubriker i olika storlekar och text som är formaterad

Läs mer

LATHUND WORD 2003. RXK Läromedel Tel: 08-580 886 00, Fax: 08-580 886 08 www.rxk.se, e-post: info@rxk.se

LATHUND WORD 2003. RXK Läromedel Tel: 08-580 886 00, Fax: 08-580 886 08 www.rxk.se, e-post: info@rxk.se LATHUND WORD 2003 RXK Läromedel Tel: 08-580 886 00, Fax: 08-580 886 08 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel. Mångfaldigande av någon del av eller hela innehållet

Läs mer

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell.

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Lathund för Microsoft Excel 1 2 9 4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Innehåll Autofyll Celler Diagram Ändra diagramtyp

Läs mer

Word kortkommando. 5. I rutan till höger klickar du på kommandot eller elementet.

Word kortkommando. 5. I rutan till höger klickar du på kommandot eller elementet. kortkommando Kortkommandon Koppla kortkommandon till menykommandon eller andra element Du kan koppla ett kortkommando till ett kommando, ett makro, ett teckensnitt, en autotextpost, en formatmall eller

Läs mer

Ändra textens utseende

Ändra textens utseende Kapitlet i korthet Kapitel 3 Ändra textens utseende I detta kapitel kommer du att lära dig att: Snabbformatering av text och stycken. Ändra tecknens utseende manuellt. Ändra styckenas utseende manuellt.

Läs mer

när du arbetar med uppsatser och andra långa texter

när du arbetar med uppsatser och andra långa texter Tricks i Word när du arbetar med uppsatser och andra långa texter Åsa Kronkvist Högskolan Kristianstad Våren 2007 Innehåll Dags att skriva uppsats?... 3 Att tänka på innan du börjar... 3 Spara klokt...

Läs mer

Sidornas struktur och snabbinstruktion (se också Information om Hanken-stilarna )

Sidornas struktur och snabbinstruktion (se också Information om Hanken-stilarna ) 1 INTRODUKTION Skriv ut instruktionerna och läs igenom dem samtidigt som du tittar på dokumentmallen ( Att ta i bruk dokumentmallen ). Sidornas struktur och snabbinstruktion (se också Information om Hanken-stilarna

Läs mer

Lathund länkar. Skapa en intern länk som en sida

Lathund länkar. Skapa en intern länk som en sida Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

Läs mer

Microsoft Office Word, Grundkurs 1. Introduktion

Microsoft Office Word, Grundkurs 1. Introduktion Dokumentation - Kursmaterial Innehåll Programfönster och arbetsyta Skriva och redigera text - OnePRO IT, Bengt Nordström - 1 - www.onepro.se 1.1 - Programfönster och Arbetsyta Programfamiljen i Microsoft

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

Läs mer

Gör släktboken enhetlig - använd formatmallar

Gör släktboken enhetlig - använd formatmallar Gör släktboken enhetlig - 25 använd formatmallar I en lättläst bok märks inte typografin - om den märks stör den! För att på ett enkelt sätt ge din bok enhetlig layout och typografi bör du använda formatmallar.

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Labora&on 7 Syfte med laborationen:

Labora&on 7 Syfte med laborationen: Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer