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

Storlek: px
Starta visningen från sidan:

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

Transkript

1 En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1

2 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 webbsida... 5 Att infoga en mall direkt i HTML-märket...5 Att bädda in mallen med märket <STYLE>...6 Att importera en mall...6 Att länka en mall...7 Grunderna till stilmallar... 7 Grundläggande syntax... 7 Class-attributet...8 ID-attributet...9 Bakgrunder...10 Bakgrundsfärg till ett element...10 Bakgrundsbild till ett element...12 Olika sätt att lägga bakgrundsbilden...12 Textformattering...13 Att sätta färg på text...13 Avstånd mellan tecken...13 Linjehöjd...14 Styckejustering...14 Textdekoration...15 Indrag av första raden...15 Textomvandling...16 Typsnitt...16 Att sätta typsnitt...16 Bestäm storleken...16 Välj stil...17 Olika former av fet stil...17 Ramar och kanter...17 Ramtyp...17 Färg och bredd...18 Egna ramtyper...19 Marginaler...19 Fyllning...20 Listor...20 Dimensionering och presentation av element...21 Storleken på ett element...21 Placering och synlighet...23 Överlappande lager vilket ligger överst?...25 Flytande text kring en bild...26 Pseudo-klasser...27 Ändra muspekarens utseende...28 Färga dina scrollknappar...28 Några enkla exempel

3 Exempel nr Exempel nr Exempel nr Övningsuppgifter

4 Stilmallar en introduktion Vad är stilmallar? I webbens barndom, då de enda användarna var akademiker, fanns inget större behov av att kunna styra en sidas layout. Man begränsade sig tvärtom till ett fåtal regler för hur olika delar av sidan skulle visas med rubriker, kursiv- respektive fetstil, punktlistor och så vidare. Alla dessa regler för hur sidans olika delar märktes ut, sammanfattades i språket HTML (HyperText Markup Language). Detta hade den åtråvärda fördelen att alla användare kunde läsa ett sådant dokument, oberoende av vilken maskin eller operativsystem som användes. På senare år har dock webben fått helt andra användningsområden och målgrupper, vilket ställer krav som HTML inte kan leva upp till. I ett försök att komma runt detta skapades stilmallar eller Cascading Style Sheets (CSS) som de heter på engelska. Med dessa kan du definiera speciella regler för hur- och var olika element i sidan skall visas. Du kan alltså placera objekt precis vart som helst i sidan, du kan göra saker och ting osynliga eller synliga (utan att ladda om sidan), du kan formattera om alla märkord såsom <B>, <H1>, <P>, du kan till och med ge samma märkord flera olika format. Sådant som indrag av första raden i ett stycke, ramar och bakgrundsfärg till text är också möjligt. För avancerade användare kan man t.o.m. definiera regler för olika media såsom bildskärm och skrivare, men det är överkurs i det här sammanhanget. En ytterligare stor fördel är att man kan koppla en extern stilmall till många dokument, vilket ger en sajt enhetligt utseende utan att man måste formattera alla element explicit. Om alla dokument följer samma mall (vilken endast definieras en gång) kommer de att få samma utseende. Namnet Cascading Style Sheets kommer av det faktum att man kan definiera en stilmall på flera olika sätt, även inom ett och samma dokument. Om ett dokument har flera stilmallar som riktar sig till ett och samma märkord måste ju webbläsaren bestämma sig för vilken som ska gälla. Man säger på engelska att multiple rules will cascade into one, vilket ungefär betyder multipla regler kommer att sammanfattas i en och då enligt speciella prioriteringsregler. Hur dessa prioriteringar går till tar jag upp i nästa avsnitt. Egentligen finns det flera olika standarder för hur stilmallar ska fungera, men den standard som förmodligen används flitigast är den som World Wide Web Consortium (W3C) står för. Det är denna jag refererar till i detta häfte. Den första versionen (CSS1) blev en rekommenderad standard i december 1996, och nu gäller version CSS2. Nu kan man fråga sig om stilmallar verkligen täcker webbdesignerns behov av layout-verktyg, för att kunna presentera sin produkt eller tjänst tillfredställande. Jag skulle vilja påstå att de inte fullt ut gör det! Åtminstone inte för alla och definitivt inte utan kopplingen till exempelvis JavaScript, som kan få en sida att leva upp ännu mer (vi kommer att titta på detta lite senare). Riktigt mediatunga sajter använder helt andra verktyg, men om man lyckas kombinera stilmallar med JavaScript kan man ändå erhålla mycket avancerade sajter som kan tillfredställa till och med en kräsen surfare. Vilken teknik man slutligen väljer att använda beror dels på tycke och smak, dels på behovet av regelbunden uppdatering, och förstås på uppenbara begränsningar. Vad behöver du för att lära dig stilmallar? Om du inte har väldigt höga ambitioner med stilmallar föreslår jag att du utnyttjar webben själv för att lära dig grunderna. Det finns mycket bra information att hämta på W3C:s egen hemsida på adressen (följ länken CSS). På kan man även ladda ner en manual i pdf-format på ca 300 sidor med bra innehåll. Jag tycker inte det är nödvändigt att köpa en dyr bok i ämnet, eftersom det dels finns så mycket gratismaterial att hämta och dels eftersom det är ganska lätt att lära sig hantera stilmallar på egen hand. Sedan behöver du en vanlig texteditor (typ Windows Anteckningar) och en webbläsare som klarar 4

5 stilmallar. De webbläsare som fungerar är Netscape Navigator från version 4 och framåt, samt Internet Explorer 4 och framåt, men Explorer är faktiskt helt överlägsen Netscape när det gäller stilmallar. I flera av de exempel jag visar i det här häftet måste du använda Explorer för att resultatet skall bli vad du förväntar dig Netscape är inte ens i närheten. Det här ställer förstås till med mycket bekymmer för den som vill arbeta som webbdesigner, eftersom denne måste skapa sidor som passar både NN och IE samtidigt. Inte helt enkelt! I skrivande stund finns visserligen NN6 ute (vart tog NN5 vägen?) och den fungerar säkert mycket bättre med stilmallar. Hur stilmallar integreras i en webbsida Det finns fyra olika sätt att aktivera en stilmall i ett dokument. Dessa är (med fallande prioritet): 1. Att infoga en mall direkt i HTML-märket (inline-styles). 2. Att bädda in mallen innanför <style></style>-taggarna i sidans huvud. 3. Att importera en mall i sidans huvud. 4. Att länka en mall med <link>-taggen i sidans huvud. Om en enda mall används spelar det egentligen inte så stor roll vilken metod som används, men om ett dokument använder flera mallar kommer speciella prioriteringsregler att användas för att sammanfatta dessa i en övergripande mall för sidan. Jag visar nedan hur varje metod går till. Att infoga en mall direkt i HTML-märket Denna metod har högst prioritet. Om det finns flera mallar för ett märke kommer denna att gälla. Anta att jag vill ha mina H1-rubriker i 24 punkter, Garamond och kursiv i djupblå färg. Då kan jag skriva så här: <H1 style= font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: # >H1-rubrik med infogad mall</h1> Man anger på detta sätt olika värden till olika egenskaper såsom värdet 24pt till egenskapen fontsize. Märket H1 kallas här selektor det märke man valt att formattera. Lägg märke till att jag sätter ett kolon mellan varje egenskap och dess respektive värde. Varje par av egenskap: värde skall skiljas åt med semikolon. Dessutom skall värdena normalt inte omslutas av citationstecken så som man är van vid från HTML, det gör man endast då värdet består av flera ord som Times New Roman. I sidan nedan har jag använt precis ovan nämnda mall och för skoj skull jämför jag med den normala H1-rubriken: På det här sättet kommer endast denna rubrik att få detta utseende jag måste skriva precis likadant vid varje rubrik om jag vill få dem likadana. Otympligt! 5

6 Att bädda in mallen med märket <STYLE> Denna metod har näst högst prioritet. Man bäddar in mallen i sidan efter <title>-taggen i <head>-sektionen med hjälp av <style>-taggen på följande sätt: <HTML> <HEAD> <TITLE>Sidans titel</title> <style type="text/css"><!-- /* Här definieras stilmallen */ /* Detta är en kommentar i CSS */ H1 font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: #000066; --></style> </HEAD> <BODY> </BODY> </HTML> Attributet type sätts till text/css så att webbläsaren vet att det är frågan om en stilmall. Därefter kommer en HTML-kommentar (<!--). Den finns där eftersom äldre webbläsare inte förstår <style>-taggen och därför kommer att hoppa över denna. Men när den gör det kommer den att uppfatta allt annat som ren text och den skriver då ut din mall i dokumentet som vanlig brödtext! Det vill du inte! Av den anledningen är det en god idé att dölja hela mallen i en HTMLkommentar. Man väljer först vilket märke man vill formattera, i vårt fall är det H1. Därefter anger man värden till de olika egenskaperna innanför klamrar ( och ) åtskilda med semikolon. Man måste förstås inte infoga radbrytningar mellan varje deklaration som ovan, det gör man bara för tydligheten. Att importera en mall Denna metod har näst lägst prioritet. Du kan importera en mall från en extern fil på vilken adress som helst. Fördelen med detta är förstås att flera dokument kan importera samma mall. Det ger enhetlighet åt din sajt och skulle du vilja ändra på utseendet i framtiden så gör du ändringarna endast i mallen och inte på hundra olika ställen. Du importerar genom att inuti <style>-taggen. Dock skall alla importerade mallar läggas överst. Importerade mallar sammanfattas med varandra, och med eventuella mallar i dokumentet, till en enda mall. Ett exempel: <style url(css/stilmall.css); H1 font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: #000066; 6

7 --></style> Lägg märke till att den stilmall man importerar skall ha filändelsen css. Denna får endast innehålla css-regler, ingen HTML eller annan kod får förekomma. Det går bra att importera från såväl absoluta- som relativa adresser. Att länka en mall Denna metod har lägst prioritet och påminner mycket om den ovan. Skillnaden är att länkade mallar inte sammanfattas på det sätt som importerade gör, du kan inte heller länka flera mallar samtidigt. Den stilmall du länkar skall vara en separat fil med ändelsen css. Ett exempel: <link href= css/stilmall.css rel= stylesheet type= text/css /> Grunderna till stilmallar I det här häftet kommer jag inte att ta upp några direkta finesser med stilmallar, utan endast grunderna. Jag hoppas att det du lär dig härifrån skall vara tillräckligt för att kunna fortsätta på egen hand om du vill. Mitt mål med detta häfte är att du skall lära dig att använda stilmallar för att ge explicita och egendefinierade format till de vanligaste HTML-märkena, att kunna sätta bakgrundsfärg och ramar kring olika element, att kunna definiera och använda de reserverade orden class och id, att kunna placera objekt på valfri plats i sidan synliga som osynliga, samt att kunna skapa enhetlighet åt dina sidor med externa mallar. När du sedan har lärt dig JavaScript skall vi koppla stilmallar till sådana skript för att göra sidorna mycket mer levande. Grundläggande syntax Du har redan sett grunden till syntaxen i CSS. Generellt kan man säga att en regel i en mall definieras genom selektor egenskap: värde; egenskap: värde... Man skulle kunna tänka sig följande regel: H1 font-size: 24pt; font-family: Garamond där H1 är en selektor, font-size en egenskap och 24pt ett värde. Denna regel får till följd att alla rubriker i storlek H1 kommer att få teckenstorleken 24 punkter i typsnittet Garamond. Man kan även stapla selektorer på varandra om man vill att de skall använda samma värde till en speciell egenskap: H1, H2 font-family: Garamond Denna regel ser till att både H1- och H2-rubriker använder Garamond (däremot inget sagt om storleken). Selektorerna skall åtskiljas med kommatecken. Om en regel innehåller väldigt många olika deklarationer kan man för ökad läsbarhet separera dem på var sin rad: H1 font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: #000066; 7

8 Det spelar dock inte någon avgörande roll hur dina mallar ser ut, bara syntaxen är korrekt! Om du vill infoga kommentarer i dina mallar för ytterligare läsbarhet skall du göra det innanför teckenkombinationerna /* och */. /* Detta är en kommentar */ En kommentar kan sträcka sig över flera rader. Class-attributet Det är fullt möjligt att ge ett och samma HTML-märke flera format. Man skapar då vad man kallar för klasser. Om man exempelvis har behov av att vissa stycken skall ha annat typsnitt än andra stycken, skapar man två klasser till <P>-taggen. p.normal font-family: Times New Roman ; p.special font-family: Verdana; margin-left: 1cm; Man kan sedan använda dessa växelvis i en sida genom att lägga till class-attributet till <P>taggen: <P class= normal >Normal text med Times New Roman</P> <P class= special >Specialtext med Verdana</P> Detta kommer att ge resultatet Här använder jag egenskapen margin-left för att öka indraget till klassen special. Mer om detta längre fram. Man kan även skapa generella klasser som går att applicera på flera HTML-taggar. För att skapa en sådan klass utelämnar man selektorn helt och skriver endast.normal font-family: Times New Roman ; 8

9 .special font-family: Verdana; margin-left: 1cm; På detta vis kan man skapa följande resultat: Då har jag istället skrivit in koden: <p class="normal">normal text med Times New Roman</P> <h1 class="special">specialtext med Verdana</h1> Dvs egenskaperna hör inte längre till en särskild tagg, utan är tillämpbar på alla (nåja, de flesta i alla fall). ID-attributet I många fall är det nödvändigt att definiera regler som skall gälla ett, och endast ett, element i en sida. Så är det förstås om man under skriptkontroll flyttar omkring objekt, eller gör dem osynliga resp. synliga beroende på hur besökaren navigerar i sidan. När man skapar en mall för ett unikt element använder man symbolen #. Ett exempel: <!-- css_4.htm --> <html> <head> <title>css_4.htm</title> <style type="text/css"><!-- #normal font-family: "Comic Sans MS"; color: orange; p#special font-family: Verdana; margin-left: 1cm; margin-right: 2cm; --></style> </head> <body> 9

10 <i id="normal">normal text med Comic Sans MS.<br> Stilmallen sätter typsnitt och färg, medan märket <I> står för stilen.<br> Till detta sätter jag id="normal" - detta element är då unikt!</i> <p id="special">specialtext med Verdana.<br> Eftersom jag skapat elementet tillhörande <p>-taggen kan inga andra taggar erhålla detta id!</p> </body> </html> Lägg alltså märke till att det översta stycket blir kursiverat pga att jag omsluter texten med <I>taggen. Typsnittet och färgen kommer av det faktum att jag tilldelar det elementet identiteten normal med id= normal. Detta element är då unikt i sidan och jag kan inte tilldela ett annat element samma id. Däremot kan jag byta ut <I> mot <B> och göra samma sak, detta eftersom identiteten normal inte hör till en särskild tagg. Identiteten special däremot hör till <P>-taggen och kan därför inte läggas till någon annan än denna. Än så länge kan denna egenskap verka onödig, men vi kommer senare att använda den och då särskilt tillsammans med <div>-taggen. Bakgrunder Bakgrundsfärg till ett element Du är nu förtrogen med att man i HTML kan sätta bakgrundsfärg och bakgrundsbild till ett dokument eller en tabellcell. En bakgrundsbild kommer att upprepa sig själv och fylla hela webbläsarkroppen eller tabellcellen med en mosaik av bilden. Med CSS kan du sätta färg och bakgrundsbild till i stort sett vilket HTML-märke som helst. Det enklaste exemplet är förmodligen en textöverstrykning och då använder man med fördel en speciell tagg - <SPAN>. Denna har ingen som helst förformattering, utan tanken är att sidförfattaren själv skall ange formatet med en infogad (inline) stilmall. Betrakta nedanstående: Med hjälp av <SPAN>-taggen kan man göra <span style="background-color: yellow">textöverstrykningar</span> på ett enkelt sätt. Den här enkla regeln sätter värdet yellow till egenskapen background-color och resultatet blir 10

11 Det finns tre olika sätt att ange färg dessa är: 1. background-color: fargnamn 2. background-color: #rrggbb 3. background-color: rgb(röd,grön,blå) där fargnamn skall vara något av de fördefinierade orden för färg i HTML exempelvis yellow. I det andra exemplet skall en färgkod anges med en hexadecimal trippel precis på samma sätt som du gjort i HTML förut (dock utan citationstecken). Ett exempel: background-color: # där alla par skall vara från 00 (0 decimalt) till ff (255 decimalt). Slutligen kan man ange färgen också decimalt. Man skriver då exempelvis background-color: rgb(0, 27, 146) där talen för respektive kanal skall vara mellan 0 och 255. Nu är det inte så att <SPAN>-taggen är unik man kan sätta bakgrundsfärg till nästan vilken tagg man vill. Bara för att illustrera detta visar jag ytterligare en rad som skapades med Det går bra att sätta färg till <I style="background-color: yellow">kursiva ord</i> om man vill. Kanske är det mer vanligt att man sätter färg på olika klasser till <P>-taggen, och i samband med det kanske även en ram runt. Det får stycket att stå ut i texten mycket mer. Om du tittar på ser du att alla kodexempel har samma bakgrundsfärg, ram, typsnitt och färg. Detta kan man åstadkomma genom att definiera motsvarande regler till <P>taggen. I det här häftet har alla kodexempel typsnittet Courier New med ett större indrag från vänster och det förenklar förhoppningsvis din läsning det var i alla fall tanken! 11

12 Bakgrundsbild till ett element Det finns med CSS numera möjligheten att sätta en bakgrundsbild till de flesta HTML-märken, på samma sätt som man gör till <BODY> och <TD> i vanlig HTML. Tänk på att en bakgrundsbild kan förhöja utseendet på ett dokument eller stycke, men det kan lika gärna få motsatt effekt. Hur många sidor har man inte sett där texten knappt går att läsa bara för att författaren velat ha en slick bakgrundsbild till sidan? Använd alltså med försiktighet! Ett exempel: Koden som åstadkommer detta är väsentligen <style type="text/css"><!-- p.farg background-color: black; color: white; p.bild background-image: url(mystone.jpg); color: white; --></style> <p class="bild">hur lättläst är det här?<br>...</p> <p class="farg">lite mer lättläst - fast inte särskilt vackert<br>...</p> <P>Här kommer ett helt vanligt stycke!<br>...</p> Du anger alltså källfilen (värdet) till bakgrundsbilden (egenskapen) med url(filnamn), där filnamnet skall anges utan citationstecken. Olika sätt att lägga bakgrundsbilden Inte nog med att du kan använda bakgrundsbilder till vad som helst, du kan dessutom bestämma hur bilderna skall upprepas, om bakgrunden skall scrolla med dokumentet eller vara fixerat, du kan även bestämma var bakgrundsbilden skall befinna sig. I det här fallet tar jag <BODY>-taggen till min hjälp. Betrakta sidan nedan denna innehåller alla de tre egenskaperna ovan: 12

13 På det här sättet kan man rätt enkelt skapa färgade marginaler som når hela vägen ut till kanten. Var dock noga med hur du presenterar texten i sidan. I det här exemplet skulle det innebära katastrof om den nu svarta texten lade sig över bakgrundsbilden till höger fullständigt oläsbart! Den här sortens blunders kan man gardera sig emot genom att sätta marginaler för stycken. Textformattering Att sätta färg på text Att sätta färg på text är mycket enkelt och vi har redan gjort det ett flertal gånger. Man använder egenskapen color och denna vill ha ett värde på samma sätt som background-color. Egenskapen applicerar på alla HTML-märken och om man då vill sätta färgen på kursiv text kan man skriva: I color: red; /* eller */ color: #ff0000; /* eller */ color: rgb(255, 0, 0); Avstånd mellan tecken Ett knep att få text att synas bättre mitt i ett dokument kan vara att öka avståndet mellan tecknen. Du använder då en egenskap som heter letter-spacing, vilken applicerar till alla märken. Du kan minska avståndet också om du vill, var bara noga med att texten går att läsa. Jag ger två exempel:.narrow letter-spacing: -0.05em.wide letter-spacing: 0.5cm Genom att ange ett negativt värde kommer avståndet mellan två tecken att bli mindre än normalt. Enheten em betyder lite slarvigt den aktuella teckenstorleken, du kan också använda enheterna cm och in (eng inch och betyder tum). Om du använder decimaltal skall du använda. och inte, när du anger decimalerna. Det finns ännu fler enheter, undersök på egen hand! 13

14 Här har jag använt <SPAN>-taggen tillsammans med class-attributet för att ge texterna egenskaper enligt klasserna narrow och wide. Den första raden har normalt teckenavstånd. Linjehöjd Utöver möjligheten att öka avståndet mellan tecken horisontellt kan man också öka radavståndet vertikalt med line-height. Värden kan anges med flera olika enheter cm, in, px, em och så vidare. Ett exempel: p line-height: 0.5in Styckejustering För att sätta styckejustering skall du tilldela egenskapen text-align något av värdena center, left, right eller justify. De tre första känner du till från förut, och den sista betyder marginaljusterad. Då kommer både vänster- och höger marginal att bli raka. Ett exempel: För att sätta justering för exempelvis <P>-taggen kan du skriva en regel så här p.right text-align: right och använda den som vanligt. 14

15 Textdekoration Denna egenskap avser sådant som understrykningar i text. I HTML har du möjlighet att göra text understruken, men med CSS kan du göra text genomstruken eller överstruken. Du kan dessutom tvinga länkar att inte bli understrukna, vilket annars är standard i de flesta webbläsare. Tilldela egenskapen text-decoration något av värdena overline, line-through, underline eller none. Ett exempel: Detta skapas med <a href="css_10.htm" style="text-decoration: none">en länk</a> utan understrykning.<br> <span style="text-decoration: line-through">genomstruken text</span><br> På många sajter nu för tiden använder man helt andra sätt att visa länkar i sidan. Ett sätt är att låta länkarna byta färg när muspekaren står ovanför dem, ett annat sätt är att plötsligt låta den länkade texten få en understrykning etc. För att åstadkomma detta används det som kallas pseudo-klasser (vilka fungerar bäst i IE). Vi kommer till detta lite senare. Ett annat väl beprövat sätt är att göra bilder till länkar och byta ut dessa med ett JavaScript. Det skall vi också lära oss lite senare. Indrag av första raden Indentering, eller indrag av första raden, görs med egenskapen text-indent, vilken tar värden bl. a. i enheterna em, cm och in. Stycket ovan skapades med p text-indent: 2em <p>i många tryckta böcker... Du kan även skapa ett hängande indrag genom att sätta ett negativt värde till text-indent. 15

16 Textomvandling Det finns speciella regler för att skapa text med endast versaler eller gemener, eller kapitäler. Man tilldelar egenskapen text-transform något av värdena lowercase, uppercase eller capitalize (värdet none är också möjligt, fast något onödigt). Jag visar kapitäler, eftersom de andra två alternativen är självklara: Jag har då skapat en regel till <P>-taggen enligt p text-indent: 0.5cm; text-transform: capitalize Kapitäler i IE tolkas så att första bokstaven i varje ord skall vara stor (versal) och de övriga små (i Word 97 kommer alla bokstäver att vara versaler, men de första i varje ord något större). Typsnitt Att sätta typsnitt Vi har redan använt den här egenskapen flera gånger. Man tilldelar egenskapen font-family något av de namn som typsnitten i datorn har. Några möjliga värden är därför Verdana, Arial, Garamond och Courier New. Lägg märke till att man skall sätta citationstecken runt namn som består av flera ord. Om man vill ange en prioriteringsordning för några eventuella typsnitt skall man skilja dem åt med kommatecken. Om jag vill ange ordningen Verdana, Arial, sans-serif skall jag skriva font-family: Verdana, Arial, sans-serif ; Ett tips är att använda typsnitt som säkert finns på de flesta plattformar man vet kanske inte i förväg vilket operativsystem en besökare använder. Om typsnitten du valt inte finns installerat på datorn kommer webbläsaren att visa sidan med standardtypsnittet. Bestäm storleken Den här egenskapen har vi också använt tidigare. För att bestämma storleken på bokstäverna sätter du ett lämpligt värde till egenskapen font-size. Det finns många tillåtna värden för denna egenskap och för att röra till det ser de inte ut som de gör i <FONT>-taggen i HTML. Det finns ett antal fördefinierade konstanter som sätter storleken i de sju storlekar som HTML förfogar över dessa värden är: xx-small, x-small, small, medium, large, x-large och xx-large. Dessutom finns det två relativa storlekar att använda: smaller och larger. Vilken storlek tecknen får beror helt och hållet på vilken storlek som är aktuell omedelbart före det att regeln sätts i bruk. Dessutom kan du sätta storleken på någon av följande form 1. font-size: 120% 2. font-size: 24pt 16

17 3. font-size: 30px 4. font-size: 0.5cm (eller 0.5in) Det andra och det tredje valet använder de två olika enheterna pt (point) och px (pixel). De är inte ekvivalenta, vilket får till följd att ett typsnitt i 12pt inte upptar 12 pixlar på skärmen. Det finns fler enheter också undersök på egen hand! Välj stil Med stil menar man inte typsnitt, utan om tecknena av det valda typsnittet är kursiva eller inte. Genom att sätta något av värdena italic eller normal till egenskapen font-style får du det du önskar. Ett exempel: font-style: italic; Det finns faktiskt ett tredje värde som är nästan identiskt med kursiv stil oblique. Det betyder lutande. På min maskin (win98) och med IE5 kan jag inte se någon skillnad mellan dem. Olika former av fet stil Det finns en egenskap som heter font-weight och denna avser hur feta tecknen skall vara. Du har att tillgå nio olika grader av fetstil, från 100 upp till 900 i steg om 100 åt gången. Denna fina gradering är mer än vad de flesta webbläsare klarar att visa, men tänk då på att stilmallar även omfattar andra media såsom skrivare. På en sådan kan det mycket väl vara synbara skillnader mellan alla grader. Normal text har värdet 400 och fetstilt text 700. Förutom dessa numeriska värden har du konstanterna normal, bold, lighter och bolder att tillgå. De två sistnämnda fungerar precis som smaller och larger gör för storleken, dvs den tidigare fetheten på texten avgör vilket värde som blir aktuellt när regeln sätts i bruk. Ett exempel: font-weight: 700; Ramar och kanter Ramtyp Kanter och ramar runt stycken kan vara bra för att öka läsbarheten i ett stort dokument. På adressen finns ett bra exempel på detta (prova att kopiera sidan och sedan ladda den utan den länkade stilmallen får du se!). Det finns många olika typer av ramar, men inte alla är kompatibla med 4:e generationens webbläsare inte ens IE4. Jag tar upp några av de ramar som finns och vill du veta mer kan du gräva djupare själv. Anta att jag vill skapa olika ramar kring stycken. Jag definierar då lämpligen regler för <P>-taggen. Jag visar först resultatet och sedan koden: 17

18 Koden för denna sida är väsentligen: p.solid border-style: solid p.double border-style: double p.groove border-style: groove p.ridge border-style: ridge p.inset border-style: inset p.outset border-style: outset <P class="solid">solid</p> <P class="double">double</p> <P class="groove">groove</p> <P class="ridge">ridge</p> <P class="inset">inset</p> <P class="outset">outset</p> Vi sätter alltså olika värden till egenskapen border-style. Färg och bredd Du kan även sätta färg och bredd på en ram med border-color och border-width. Ett exempel: Mallen som skapar detta ser ut så här: p.inset 18

19 border-style: inset; border-color: yellow; border-width: 10px; Värdena till egenskapen color skall anges som förut. Bredden kan anges med flera olika enheter såsom px, pt, cm, mm, in. Använd den du har bäst kontroll över. Egna ramtyper Det finns möjlighet för dig att skapa helt egna ramtyper i det avseendet att ramens fyra olika delar kan sättas helt separat från varandra. Du kan alltså sätta övre kanten i en helt annan typ än den högra och så vidare. Här lämnar jag över till självständig läsning förutom ett enda exempel: p.ram border: solid yellow 10px; border-right: double black 20px; margin-left: 0.5cm; Här ser du hur jag gjort kraftiga förkortningar i mallen. När mallar blir stora och klumpiga finns det faktiskt snabbare sätt att definiera dem. Istället för att skriva p.ram border-style: solid; border-color: yellow; border-width: 10px; skriver jag p.ram border: solid yellow 10px vilket är mycket enklare. Hur vet man när man kan göra sådana förkortningar? Med lite träning lär du dig snart se mönstret! Marginaler Marginaler har du sett redan, särskilt då den vänstra: margin-left. Marginalerna sätter gränserna för hur nära varandra olika element kan komma. Men det finns också möjlighet att sätta de andra tre: top, right och bottom. Du kan sätta var och en för sig så här: 19

20 p.marginal margin-top: 10px; margin-right: 2em; margin-bottom: 0.5cm; margin-left: 15%; eller sätt dem alla på en gång (med ovan nämnd ordning) med p.marginal margin: 10px 2em 0.5cm 15% Enheterna bör vara bekanta vid det här laget Fyllning Har likartad funktion som marginal, men sätter mer precis avståndet från kanterna i ett element till innehållet i just det elementet. Du kan göra på precis samma sätt som ovan, byt bara ut margin mot padding! Används ofta i samband med tabeller, där man då kan bestämma över de fyra olika fyllningarna padding-top, padding-right, padding-bottom och padding-left. Kom ihåg att man med HTML endast kan bestämma en och samma padding för samtliga cellmarginaler. Listor Man kan med stilmallar själv definiera vilken symbol som skall användas i exempelvis punktlistor. I HTML kan du styra över de få typer som finns (disc, circle, square), men här kan du dessutom sätta en bildfil som listsymbol. Följande listtyp skapades med koden ul list-style-image: url(list_mark.gif) Sedan är det bara att skapa en lista precis som vanligt. Om du är intresserad av att använda någon av de tre standardsymbolerna skall du skriva exempelvis ul list-style-type: square Om du å andra sidan vill bestämma hur uppräkningen visas i en ordnad lista <OL>, skall du välja något av värdena decimal, lower-alpha, upper-alpha, lower-roman eller upper-roman. Som i 20

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

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

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

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

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

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

Styla och formatera text

Styla och formatera text Nivå 2 Styla och formatera text All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg

layout-tagg

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size=6> CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning

Läs mer

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende: Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både

Läs mer

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8 Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva

Läs mer

CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek

CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är

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

Att styla webbsidor. Nivå. Uppgiften

Att styla webbsidor. Nivå. Uppgiften Nivå 2 Att styla webbsidor 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.

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

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»

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» 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

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

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

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

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

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; } /*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:

Läs mer

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende

Läs mer

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering övningar/uppgi9er Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna

Läs mer

WEBBUTVECKLING CSS. Formatmallar - CSS

WEBBUTVECKLING CSS. Formatmallar - CSS betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och

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

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

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet

Läs mer

Laboration 2: Xhtml och CSS.

Laboration 2: Xhtml och CSS. Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och

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

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

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

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

PIM Skriva http://www.pim.skolutveckling.se/

PIM Skriva http://www.pim.skolutveckling.se/ PIM Skriva http://www.pim.skolutveckling.se/ Examination http://pimbevis.skolutveckling.se/ Nivå 1 Frågefilm om sökning på internet Inlämningsuppgift - Worddokument med bilder http://www.pim.skolutveckling.se/upload/pimpresentation.ppt

Läs mer

Lägga till artiklar i Joomla

Lägga till artiklar i Joomla Lägga till artiklar i Joomla från framsidan Logga först in så att du är inloggad. Klicka sedan på Lägg till ny artikel i menyn under hem. Skriv in en rubrik på rubrikraden ej för lång! Skriv sedan artikeln

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

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

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

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

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015 . HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS. Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny

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

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

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

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

Instruktioner till övningen som börjar på nästa sida

Instruktioner till övningen som börjar på nästa sida Instruktioner till övningen som börjar på nästa sida Övningen innehåller det grundläggande som du måste kunna för att klara Word. Varje stycke ska vara formaterat så som det står i stycket. Under varje

Läs mer

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ...

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>... Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...

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

WEBBUTVECKLING Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

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

Att skriva på datorn

Att skriva på datorn Att skriva på datorn Innehåll: Inledning 1 Tangentbordet 2 Att skriva i Word 4 Att skriva på Internet 7 Övningar 8 2 Inledning Välkommen till steg 2 av Internetkursen för nybörjare! Vid detta kurstillfälle

Läs mer

Labbrapport: HTML och CSS

Labbrapport: HTML och CSS Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):

Läs mer

Om din presentation:

Om din presentation: Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut. Välj raka typsnitt som är standardinstallerade i alla datorer. Luftiga marginaler som här och undvik

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

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

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

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

En introduktion till Dynamisk HTML (DHTML)

En introduktion till Dynamisk HTML (DHTML) En introduktion till Dynamisk HTML (DHTML)? 2002 1 DHTML en introduktion...3 Vad är DHTML?...3 Vad behöver du för att lära dig DHTML?...3 Document Object Model i Internet Explorer 4...4 Document Object

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

Skärmtypografi. Mikael Becker, Mittuniversitetet 2005

Skärmtypografi. Mikael Becker, Mittuniversitetet 2005 Skärmtypografi Mikael Becker, Mittuniversitetet 2005 Introduktion Detta häfte är gjort med i huvudsak Georgia. Gjort av Matthew Carter för Microsofts räkning (det bästa Microsoft har gjort i mitt tycke).

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

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

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

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

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

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Introduktion till programmering

Introduktion till programmering 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

Om din presentation:

Om din presentation: Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut. Välj raka typsnitt som är standardinstallerade i alla datorer. Luftiga marginaler som här och undvik

Läs mer

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den 24-timmarswebben WebPublish gör det möjligt att skapa läsvänliga sidor. Vi tycker att det är en självklarthet att informationen på en webbplats ska vara tillgänglig för och kunna läsas av så många som

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

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

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

WWAAC Layout Editor. 1. Standard för knapp (kolla att fliken Standard för knapp är vald)

WWAAC Layout Editor. 1. Standard för knapp (kolla att fliken Standard för knapp är vald) WWAAC Layout Editor Layout Editor För att ändra en befintlig layout eller göra en ny kan du antingen öppna Layout Designer for the Browser via Start Program wwaac eller nå den via knappen Inst i browsern

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

JavaScript del 9 Dynamik och animeringar

JavaScript del 9 Dynamik och animeringar JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer

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

Skapa en webbplats med WordPress

Skapa en webbplats med WordPress Skapa en webbplats med WordPress Daniel Karlsson 2016-01- 26 Licens Creative Commons Attribution- NonCommercial 2.0 Du får fritt sprida, redigera och kopiera guiden, men ej för ekonomisk vinning och endast

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

Vad är Typografi och Layout

Vad är Typografi och Layout Vad är Typografi och Layout Typografi: Att ge form åt dokumentets bokstäver, ord, meningar, stycken och rubriker. Layout: Att lägga ut text och bild på en sida så att den blir tilltalande och lätt för

Läs mer

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

Läs mer

Kommunikation och presentation

Kommunikation och presentation Kommunikation och presentation MFM310 2010-09-16 Eva Larsson FoUU-enheten primärvården i Fyrbodal Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut.

Läs mer

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker Sid 1 Laborationer i kursmomentet Datoranvändning E1 http://www.etek.chalmers.se/~hallgren/eda/ : Mer om FrameMaker 1996, 1997 Magnus Bondesson 1998 och 99-09-22 Thomas Hallgren 1 Introduktion I Laboration

Läs mer

En bortsprungen katt

En bortsprungen katt Nivå 1 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. En bortsprungen katt

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande Hjälpmedel: Kurslitteratur, utdelade papper, webbdesignskolan, samt World Wide Web. Tillåtna program att skriva kod i är Anteckningar eller

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

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

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

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen.

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen. Fiskar Arbetsbeskrivning knappmeny (Mediator 8) I detta exempel kommer du att lära dig Att göra en mastersida med knappar Att använda en mastersida på andra sidor Att använd funktionen Alignment Arbetsgång

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

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

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

Användarmanual WebNailer. 19 januari 2004

Användarmanual WebNailer. 19 januari 2004 Användarmanual WebNailer Tobias Holgers Mattias Castegren 19 januari 2004 1 Innehåll 1 Inledning 3 1.1 Definitionerochförkortningar... 3 2 WebNailer 4 2.1 Knapprad... 4 2.1.1 Gemensamma... 4 2.1.1.1 Webbläsare...

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

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