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

Ö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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker

Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker Riktlinjer för och lokala NyföretagarCentrum Framtagna av i samarbete med s Kvalitetsråd 1 Logotype Logotype s logotype består av

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

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

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

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

Förbundet Vi Ungas. Grafiska handbok

Förbundet Vi Ungas. Grafiska handbok Förbundet Vi Ungas Grafiska handbok Innehållsförteckning INLEDNING 2 KAPITEL ETT 3 LOGOTYPEN 4 Vad man inte får göra med Vi Ungas logotyp 5 FÄRGER 6 TYPSNITT 7 FLÄTAN 8 KAPITEL TVÅ 9 GRAFISKA ELEMENT 10

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

RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER

RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER DETTA DOKUMENT ÄR ETT KOMPLEMENT TILL NYFÖRETAGARCENTRUM SVERIGES GRAFISKA PROFIL. I DEN GRAFISKA PROFILEN SPECIFICERAS

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

Användarhandledning Version 1.2

Användarhandledning Version 1.2 Användarhandledning Version 1.2 Innehåll Bakgrund... 2 Börja programmera i Xtat... 3 Allmänna tips... 3 Grunderna... 3 Kommentarer i språket... 4 Variabler... 4 Matematik... 5 Arrayer... 5 på skärmen...

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

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

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

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

Dokumentmallar i praktiken, Nyps

Dokumentmallar i praktiken, Nyps Dokumentnamn Dokumenttyp Datum Dokumentmallar i praktiken Handledning 2009-08-13 Diarienr/Projektnr Upprättad av Godkänd av Version Magnus Österlund, Daniel Madsén 0.4 Dokumentmallar i praktiken, Nyps

Läs mer

Grafisk manual för Sveriges Viktigaste Jobb. ringen

Grafisk manual för Sveriges Viktigaste Jobb. ringen grafisk manual Grafisk manual för Sveriges Viktigaste Jobb ringen Vår symbol ringen med texten Sveriges Viktigaste Jobb ska finnas på alla enheter. Ringen är den minsta gemensamma nämnaren för satsningen

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

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

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

En enhetlig profil är viktig för alla organisationer

En enhetlig profil är viktig för alla organisationer En enhetlig profil är viktig för alla organisationer och ännu viktigare för en stor grupp av frivilliga. Då öppnas möjligheten för att alla känner samhörighet och vet åt vilket håll gruppen går. Det gör

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

Manual Open24 Webtool Systemversion 1.10

Manual Open24 Webtool Systemversion 1.10 Manual Open24 Webtool Systemversion 1.10 Innehållsförteckning Manual... 1 Open24 Webtool... 1 Systemversion 1.10... 1 Innehållsförteckning... 2 1. Allmänt om Webtool... 3 2. Struktur... 3 2.1 Navigeringsträdet...

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

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

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

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

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

Skärmtangentbordet som är enkelt att använda både med mus, touchskärmar och interaktiva whiteboards

Skärmtangentbordet som är enkelt att använda både med mus, touchskärmar och interaktiva whiteboards Skärmtangentbordet som är enkelt att använda både med mus, touchskärmar och interaktiva whiteboards Tel: 031-769 00 60 info@frolundadata.se www.frolundadata.se Introduktion WizKeys är flexibelt och kostnadseffektivt

Läs mer

Innehållsförteckning utan ansträngning Word gör jobbet MS Word 2007, 2010 och 2011

Innehållsförteckning utan ansträngning Word gör jobbet MS Word 2007, 2010 och 2011 Innehållsförteckning utan ansträngning Word gör jobbet MS Word 2007, 2010 och 2011 Lizette Nilsson 2012-05-07 Idag Kort om vår datormiljö Vanliga orsaker till problem Låt MS Word göra jobbet åt dig - Formatmallar

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

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

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

Lathund Hemsida för Astma- och Allergiförbundets föreningar

Lathund Hemsida för Astma- och Allergiförbundets föreningar 1/17 Lathund Hemsida för Astma- och Allergiförbundets föreningar Webbplatsen är byggd i WordPress 3.8.1. Den är byggd för att på ett enkelt sätt ska kunna skapa nya föreningshemsidor och innehåller: Inloggning

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

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

GRAFISK MANUAL. Trollhättans Missionskyrka 2014-04-24

GRAFISK MANUAL. Trollhättans Missionskyrka 2014-04-24 GRAFISK MANUAL Trollhättans Missionskyrka 2014-04-24 Kapitel 8, Marknadsföring är tills vidare utelämnad då det tar tid att genomarbeta konsekvenserna för programblad och hemsida samt hur vi vill marknadsföra

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

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Du kan själv följa med i denna steg-för-steg guide i din texteditor. Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information

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

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

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

Webbplats. Projektplan för webbplats. Karin Tuvell

Webbplats. Projektplan för webbplats. Karin Tuvell Webbplats Projektplan för webbplats Karin Tuvell Innehåll Syfte... 3 Mål... 3 Målgrupp... 3 Innehåll och avgränsningar... 3 Utformning... 3 Storyboard... 4 Flödesschema... 5 Tidsplan... 6 Resurser... 6

Läs mer

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.

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

Innehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek

Innehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek Grafisk profil Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger Profilfärger och kompletterande

Läs mer

Kurs 6:1 Att publicera på webben

Kurs 6:1 Att publicera på webben Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del

Läs mer

12 steg för att göra en bok med Word

12 steg för att göra en bok med Word steg för att göra en bok med Word I den här övningen ska vi göra en bok med tre kapitel utifrån en råtext och några bilder. Texten och bilderna finns på www.kj.se/merword. Boken ska skrivas ut på egen

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

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla 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/18cplpy to find out what

Läs mer

Datorövning 1 Calc i OpenOffice 1

Datorövning 1 Calc i OpenOffice 1 Datorövning 1 Calc i OpenOffice 1 1 OpenOffice Calc Till förmån för de som följer kursen Fysikexperiment för lärare skall vi här gå igenom några få exempel på hur OO Calc (motsvarar MS Excel) kan användas

Läs mer

övningarna 25 februari kl. 15.30 Enkel dokumenthantering I Ordbehandling och kalkyl (med ex Word och Excel eller liknande program p kontorspaket).

övningarna 25 februari kl. 15.30 Enkel dokumenthantering I Ordbehandling och kalkyl (med ex Word och Excel eller liknande program p kontorspaket). IT-Caf Café - Vårprogram 2013 Här är r närmaste n övningarna Månd 25 februari kl. 15.30 Enkel dokumenthantering I Ordbehandling och kalkyl (med ex Word och Excel eller liknande program p i kontorspaket).

Läs mer

Anpassning av Windows 7 och Word 2010

Anpassning av Windows 7 och Word 2010 Anpassning av Windows 7 och Word 2010 Det finns en hel del små förändringar man kan göra för att det ska bli lättare att navigera i datorn, läsa och skriva. Med kortare rader, tydligt typsnitt större avstånd

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

Inledning till OpenOffice Calculator Datorlära 2 FK2005

Inledning till OpenOffice Calculator Datorlära 2 FK2005 Inledning till OpenOffice Calculator Datorlära 2 FK2005 Mål Lära sig att skapa och använda ett räkneblad med OpenOffice Calculator Beräkna medelvärde och standardavvikelsen med räknebladet Producera en

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

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

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer