Övningar i layout med CSS

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Övningar i layout med CSS"

Transkript

1 Övningar i layut med CSS Med CSS strukturerar man innehållet i lika delar. Med div-taggar kan man avgränsa delar av kden för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar lika stil ch på det sättet skapa en layut. Vi har redan i föregående labratin sett hur vi kan skapa en enkel layut. Nu ska vi se hur vi kan styra utfrmningen av den ännu mer. I HTML-kden har vi i dessa övningar fyra div-element med id "header", "nav", "cntent" ch "fter". Vi ska skapa en layut med två klumner enligt följande figur: Detta kan göras på flera sätt ch vi ska här titta på några lika sätt. 1. Studera kden i dkumenten På labratinens webbsida kan du ladda ner en mapp med de webbsidr du ska utgå ifrån. Så m du inte redan gjrt det laddar du ner zip-filen ch packar upp den. Du får då en mapp med ett antal webbsidr. Det är i strt sett samma sidr sm i föregående labratin, men i HTML-kden är de ändringar sm gjrdes i förra labben införda. Stilmallen är uppdelad i två dkument. Öppna startsidan i webbläsaren Öppna filen index.htm i webbläsaren. Ha sedan filen öppen, så att du efter varje steg kan ladda m sidan ch studera resultatet. Stilmallen style.css tillämpas, men den är ännu så länge tm, så filen visas utan någn stil i CSS. HTML- kden Öppna filen index.htm i editrn ch studera HTML-kden. Det finns de fyra div-elementen för "header", "nav", "cntent" ch "fter". Dessa mges ckså av ett div-element med id="wrapper". CSS- kden Öppna filen style_general.css i editrn ch studera kden. Detta är de grundläggande stilinställningarna sm gjrdes i förra labratinen, förutm den enkla layut sm då gjrdes. Öppna filen style.css i din editr. Ha sedan filen öppen, så att du i varje övning kan lägga till mer kd. Skriv in följande kd i "style_general.css"; Filen style_general.css imprteras ch kmmer att användas vid presentatinen. Spara filen, gå över till webbläsaren, ladda m sidan ch studera resultatet Rune Körnefrs 1

2 2. Förbered för att skapa layuten Medieteknik Nu ska du börja skriva kd för de lika delarna i layuten ch vi börjar med en del förberedelser, innan de lika "bxarna" (div-elementen) placeras på sin plats i layuten. Ta brt förvalda marginaler Elementen html, bdy ch även div kan ha lika förvalda värden på margin ch padding, dvs värden sm gäller även då man inte tar med dessa egenskaper i inställningarna (på engelska kallas det default). Dessa värden kan vara lika i lika webbläsare ch ställer till prblem, m man vill placera elementen precis intill varandra. Så därför brukar man börja CSS-kden med att ta brt dessa förvalda värden genm att sätta margin ch padding till 0. Skriv in följande kd i style.css: * {margin:0; padding:0;} Med * avses alla HTML-element ch vi sätter därmed margin ch padding till 0 för alla element. Det är vanligt att inleda kden på detta sätt ch sedan lägger man till margin ch padding där man vill ha det. Sm du ser försvann även alla förvalda marginaler på rubriker, textstycken, listr, etc. Vi vill i dessa övningar ha kvar dem, utan att behöva skriva kd för att lägga in dem igen. Så vi nöjer ss med att ta brt margin ch padding för html, bdy ch div, istället för alla element. Ändra kden till: html, bdy, div {margin:0; padding:0;} Nu bör det se ut ungefär sm innan denna kd lades dit, fast innehållet bör nu vara precis kant i kant med fönstrets vänster- ch högerkant. Centrera sidan Sidan ska centreras på samma sätt sm i föregående labratin. Skriv in följande kd i CSS-filen: #wrapper {width:800px; margin:0 aut;} Färglägg bxarna Det brukar vara bra att ge bxarna lika bakgrundsfärg, så att man kan se var de hamnar ch vilken yta de upptar. Då man sedan placerat dem rätt, kan man ta brt eller byta ut bakgrundsfärgen till det man vill ha i layuten. Skriv in följande kd i CSS-filen: bdy {backgrund-clr:#fff;} #wrapper {backgrund-clr:#0c3;} #header {backgrund-clr:#f93;} #nav {backgrund-clr:#6cf;} #cntent {backgrund-clr:#ff6;} #fter {backgrund-clr:#f6c;} Med dessa kder får bdy en vit bakgrundsfärg, wrapper blir grön, header range, nav blå, cntent gul ch fter rsa Rune Körnefrs 2

3 Du bör kunna se alla färgade ytr. Wrapper kmmer in sm en grön rand mellan en del av de andra. I elementen header, nav ch fter ser det ut sm m det är en marginal ch det är den marginal sm finns för h1, ul ch p. Denna marginal färgläggs inte, så därför lyser färgen från bdy eller wrapper igenm. Eftersm padding för div-elementen är 0, så färgläggs endast den del sm upptas av någt innehåll. Lägg till padding för header, nav, cntent ch fter: Observera att det inte ska vara någn padding på wrapper. Nu bör du se att hela div-elementen fylls ut med sin bakgrundsfärg. Du kan nu heller inte se den gröna färgen för wrapper, eftersm de andra elementen helt täcker den. Sidften #header {backgrund-clr:#f93; padding:8px;} #nav {backgrund-clr:#6cf; padding:8px;} #cntent {backgrund-clr:#ff6; padding:16px;} #fter {backgrund-clr:#f6c; padding:8px;} Sidften blir ganska hög ch det berr på att det i HTML-kden finns en p-tagg runt texten. För p- taggarna finns det en marginal i över- ch underkant, sm gör att vi brukar få en halv tm rad mellan styckena. Men i sidften vill vi inte ha det, så vi ska nu ta brt den ch passar då ckså på att göra en del andra inställningar. Skriv in följande i CSS-kden: #fter p {margin:0; fnt-size:small; fnt-style:italic; text-align:center;} Stilen görs för p-taggen inuti fter ch vi tar brt marginalen för p. Samtidigt gör vi texten lite mindre, kursiv ch centrerad. 3. Navigeringslänkarna Navigeringslänkarna ska ändras så att de inte visas sm en lista, men de ska vara kvar sm länkar under varandra. Vi ska ckså ge dem färger. Vi gör det i lika steg, så att du kan testa ch se effekten av de lika stilinställningarna. Ta brt punktlistan Lägg in följande CSS-kd: #nav ul {margin:0; padding:0;} #nav li {list-style:nne;} En lista är nrmalt inskjuten, så vi tar brt alla marginaler ch padding på ul-taggen. Vi tar ckså brt punkten till vänster m li-taggarna. Färg på länkarna Lägg in följande CSS-kd: #nav a:link,#nav a:visited {backgrund-clr:#009; clr:#fff; text-decratin:nne; padding:4px;} #nav a:hver,#nav a:active {backgrund-clr:#369;} #nav a.thispage {backgrund-clr:#063;} Detta ändrar färgerna ch tar brt understrykningen Rune Körnefrs 3

4 Vi lägger ckså till en padding på 4 pixlar, så att inte texten skrivs precis i kanten på den färgade ytan. Lägg till marginaler Du bör nu se att länkarna delvis överlappar varandra. Det berr på att vi satte padding till 4px ch de blir då högre än vad sm krävs för texten. Eftersm li-taggarna sm länkarna ligger i inte har någn marginal sm ger avstånd mellan dem, så får nu inte länkarna plats, utan de överlappar varandra. Lägg till följande CSS-kd för li-taggen: #nav li {list-style:nne; margin:8px 0;} Eftersm padding är 4px för a-taggarna, så blir det 4px både under ch över ch det krävs då 8px mellan dem. Vi sätter margin för li-taggarna till 8px i över- ch underkant ch 0px i vänster- ch högerkant. Nu kmmer länkarna precis intill varandra. Ändra CSS-kden till: #nav li {list-style:nne; margin:16px 4px;} Då får vi in en liten marginal runtm "navigeringsknapparna". Vad sm kan vara lämpliga värden på marginalen, går sedan att justera, då layuten är klar. Gör länkknapparna lika breda Länkknapparna är nu lika breda, eftersm de endast upptar den bredd sm behövs för texten i dem. Detta berr på att länkar är inline-taggar. Det går att göra dem lika breda genm att använda width ch ange en bredd, men vi ska istället göra m dem till blck-taggar. Lägg till följande CSS-kd för länkarna: #nav a:link,#nav a:visited {... display:blck;}... är den kd sm redan finns där, så lägg till texten i fetstil. Länkarna fyller nu ut hela bredden i navigeringsfältet ch är därmed lika breda. De är förstås nu alldeles för breda, men navigeringsfältet ska sedan bli en smalare klumn i layuten ch då kmmer länkarna ckså att se bättre ut. 4. Kpiera stilmallen Nu är det dags att psitinera de lika bxarna (div-taggarna) så sm vi vill ha dem i layuten. Du ska i de följande övningarna göra på lika sätt, så kpiera den stilmall du nu har, så att vi sedan kan utgå från nuvarande läge igen. I perativsystemet tar du en kpia av style.css ch kallar den stylekpia.css. 5. Layut med abslut psitinering I den första layuten gör vi en abslut psitinering med krdinater sm styr var de lika bxarna ska visas. Detta ska göras i fönstret, så att sidften hamnar högst upp ch sidften längst ner i fönstret. Sedan ska vi se till att det endast är div-elementet cntent sm kan scrllas. Du frtsätter nu att använda dkumentet style.css Rune Körnefrs 4

5 Static psitinering av wrapper Lägg till följande CSS-kd för wrapper: #wrapper {... psitin:static;}... är den kd sm redan finns där, så lägg till texten i fetstil. Med static på wrapper kmmer den absluta psitineringen med tp, left, etc. på de inre div-taggarna att vara krdinater i hela fönstret. Däremt kmmer marginaler utgå från wrapper. Du ser ännu ingen skillnad, utan det ser ut sm tidigare. Abslut psitinering av header Lägg till följande CSS-kd för header: #header {... psitin:abslute; tp:0px; height:60px;} Prva att även lägga till left:0px; så ser du att psitineringen sker i fönstrets krdinatsystem. Men m vi inte tar med attributet left, så kmmer vänsterkanten att hamna där den mgivande taggen (wrapper) börjar, så ta sedan brt left igen. Bredden blir inte mer än vad sm krävs för texten i rubriken. Lägg även till följande kd i stilen för header: width:784px; Detta fyller ut header till hela bredden. Med width anges den inre bredden, dvs elementets bredd minus padding. Hela bredden för sidan är 800px ch padding för header är 8px, så width ska vara 800-2*8=784px. Header överlappar nu navigeringslänkarna, men det löser vi då dessa psitineras. Psitinering av nav Lägg till följande CSS-kd för nav: #nav {... psitin:abslute; tp:76px; width:100px;} Värdet på tp är height för header + 2*padding för header, dvs 60+2*8=76px. Höjden blir inte rätt, dvs fyller inte ut hela fönstrets höjd, men vi fixar det senare. Psitinering av cntent Lägg till följande CSS-kd för cntent: #cntent {... psitin:abslute; tp:76px; margin-left:116px; width:652px;} Denna klumn ska skjutas in i förhållande till klumnen med navigeringslänkarna, så vi måste ange var vänsterkanten ska börja. Vi kan dck inte använda left, eftersm den utgår från fönstrets vänsterkant ch vi vet inte hur bred marginalen mellan fönstrets kant ch navigeringslänkarna är den är ju satt till aut i wrapper. Men vi kan istället använda margin-left. Den utgår ifrån wrappers vänsterkant. Värdet på margin-left blir width för nav + 2*padding för nav, dvs 100+2*8=116px. Värdet på width blir ttal width - left - 2*padding, dvs *16=652px Rune Körnefrs 5

6 Psitinering av fter Med den stil sm hittills gjrts för övriga element, har fter hamnat bakm de andra elementen, så den syns inte. Nu ska vi se till att fter hamnar längst ner i fönstret. Lägg till följande CSS-kd för fter: #fter {... psitin:abslute; bttm:0px; height:16px; width:784px;} Här använder vi bttm istället för tp. Då utgår vi från fönstrets nederkant. Så med värdet 0px på bttm anger vi att fters nederkant ska ligga 0 pixlar från fönstrets nederkant. Värdet på height kan man prva sig fram till ch 16px verkar vara lagm i detta fall. Justering av höjden för cntent Innehållet i cntent frtsätter nu under fter (m du inte har en väldigt str bildskärm gör i så fall fönstret för din webbläsare lite mindre, så att du ser hur det blir, då innehållet i cntent är för strt). Vi ska nu justera detta, så att cntent slutar där fter börjar. Samtidigt ska vi ckså se till att man kan scrlla cntent. Lägg till följande CSS-kd för cntent: #cntent {... bttm:32px;} Underkanten ska vara 32px från fönstrets underkant. Värdet är height för fter + 2*padding för fter, dvs 16+2*8=32px. Nu försvann den gula färgen under fter, men innehållet flödar frtfarande över. Lägg även till följande CSS-kd för cntent: #cntent {... verflw:aut;} Med verflw anger man hur innehållet ska presenteras, då det inte får plats i den yta sm finns. Med värdet aut läggs det på en rullningslist, då det behövs. Du får nu en rullningslist på cntent, så att innehållet kan scrllas. Prva även att gå till de andra sidrna ch se hur det ser ut där. Justering av höjden för nav Lägg till följande CSS-kd för nav: #nav {... bttm:32px;} Underkanten ska även här vara 32px från fönstrets underkant. Vi behöver dck inget verflw för nav. Layuten är klar Nu är layuten klar. Eller... nja, det ser ju inte särskilt snyggt ut. Det sm är klart är psitinering av de lika elementen. Men sedan återstår det att ta brt eller ändra de lika bakgrundsfärgerna till det sm man vill ha, för att göra det snyggare. Men det hppar vi över i dessa övningar. Du kan experimentera med det på egen hand Rune Körnefrs 6

7 6. Layut med hjälp av flat Medieteknik Vi ska nu skapa en liknande layut, fast på ett annat sätt ch du ska då utgå från den stilmall sm du sparade innan du påbörjade föregående layut. Kpia av style.css Stäng style.css i din editr. I perativsystemet byter du namn på style.css till style5.css. Då har du den kvar, ifall du vill gå tillbaks till den senare. Duplicera filen stylekpia.css ch kalla den nya kpian för style.css. Öppna sedan den nya style.css i editrn. Då är du tillbaks till den fil du hade efter övning 3 ch det är den du nu ska arbeta vidare med. Ladda m sidan i webbläsaren, så att du ser att du nu är tillbaks till läget innan layuten skapades. Justera nav, så att den "flyter" till vänster Lägg till följande CSS-kd för nav: #nav {... flat:left; width:100px;} Stilen flat har tidigare använts i föregående labratin för att justera bilderna, så att de flyter till vänster eller höger. Nu använder du flat för div-elementet för navigering. Justera cntent, så att den "flyter" till höger Lägg till följande CSS-kd för nav: #cntent {... flat:right; width:652px;} Vi använder samma bredd på både nav ch cntent sm i föregående layut, så uträkningen av bredden blir densamma sm där. Justera fter, så att den hamnar under båda klumnerna Lägg till följande CSS-kd för nav: #fter {... clear:bth;} Med clear:bth anger vi att elementet inte ska visas förrän både det i vänster- ch högerkanten är klara. Fyll ut vänsterklumnen med färgen för nav Bxen för nav är inte högre än vad sm krävs för innehållet, så nu syns den gröna färgen från wrapper, på den yta sm inte täcks av någn bx. I detta fall kan vi inte ange var underkanten ska bxen ska vara, eftersm vi inte använder krdinater för placeringen. Vi kan heller inte sätta någt värde på height, eftersm vi inte vet hur hög klumnen är det kan variera mellan lika webbläsare. Så lösningen på detta brukar vara att man sätter samma bakgrundsfärg på både wrapper ch nav. Ändra bakgrundsfärgen för wrapper till: #wrapper {backgrund-clr:#6cf;} Layuten är klar Då var även denna layut klar, med undantag av färgerna Rune Körnefrs 7

8 Jämförelse av layuterna ch metderna Om vi jämför denna layut med den föregående, så kan vi först knstatera att det gick snabbare att skapa denna ch att det inte behövdes så mycket kd. Men det finns ckså skillnader i utseendet. Den med abslut psitinering begränsade vi till fönstret, så att header, fter ch nav alltid var synliga. Det var endast innehållet i cntent sm scrllades. I den andra layuten med flat, scrllas hela sidan, så header ch navigeringslänkarna scrllas ur fönstret. Andra skillnader är att med flat visas de lika delarna i den rdning de ligger i HTML-dkumentet, medan med abslut psitinering kan man placera dem precis var man vill. T.ex. innehåller fter cpyright-inf ch behöver ju inte vara en sidft, så vill man istället placera den under header, kan man lätt göra det med abslut psitinering. Med flat kan man inte göra det. Däremt kan man lätt byta plats på de båda klumnerna. Prva att ändra till flat:right för nav ch flat:left för cntent. Det finns alltså för- ch nackdelar med båda layuterna, så det går inte generellt säga att den ena metden är bättre än den andra. Spara kpia av stilmallen Ifall du sedan vill gå tillbaks till den kd du skapat här, så bör du nu spara en kpia av stilmallen. I perativsystemet duplicerar du style.css ch kallar den nya filen style6.css. Ha kvar style.css sm den är, eftersm du i nästa övning ska arbeta vidare med den. 7. Layut med lika bredd Användare har lika bredd på skärmarna ch därför kanske inte layuten får plats. Nu har vi visserligen gjrt sidan ganska smal, 800 pixlar, så de flesta får idag plats med det på en vanlig datr. Men tittar man på den i en läsplatta eller mbiltelefn, så är skärmen fta smalare. I nästa labratin ska vi se mer på anpassning till mbiler, men börjar redan nu med att se lite på hur layuten ser ut i ett smalare fönster. Vi börjar här med den layut sm du skapade i övning 6. Gör webbläsarens fönster mindre Ändra webbläsarens fönsterstrlek. Dra i kanten ch minska strleken. Då fönstret blir smalare än sidan, så ser du att den inte får plats ch att det dyker upp en rullningslist i nederkanten. Det berr på att denna layut har en fast bredd på 800 pixlar. Ändra till "flexibel" bredd Ändra width till max-width i wrapper: #wrapper {max-width:800px;...} Då kan bredden vara maximalt 800 pixlar, men kan ckså bli smalare m fönstret är mindre. Ändra ckså bredden för nav ch cntent till prcentuella värden: #nav {... width:12%;} #cntent {... width:81%;} Det var förut 100 respektive 652 pixlar ch utav 800 mtsvarar det 12% respektive 81%. Dra upp fönstrets strlek till mer än 800 pixlar, så att hela layuten får plats. Dra sedan sakta ner strleken till ett smalare fönster. Ganska snart blir cntent för bred ch hppar ner under nav. Det berr på att padding frtfarande anges i pixlar ch efter ett tag blir den ttala bredden för str Rune Körnefrs 8

9 Ändra värdena för padding till prcentvärden: #nav {... padding:1%;...} #cntent {... padding:2%;...} Värdena var 8 respektive 16 pixlar ch det mtsvarar 1% respektive 2% av 800 pixlar. Nu fungerar det bättre att minska strleken. Men då klumnen med navigeringslänkarna blir mycket smalare, så får inte länkarna plats. Bredare navigeringsbx Vi skulle vilja ha en minimistrlek på navigeringsbxen. Prva med att lägga till följande kd: #nav {... min-width:100px;} Då blir bredden minst 100 pixlar. Vi får nu samma prblem sm tidigare, med att den ttala bredden blir för str då man minskar fönstrets strlek ch cntent hppar ner under nav. Detta var alltså ingen bra lösning, så ta brt min-width igen. Det blir alltså prblem med att blanda värden i pixel ch prcent. Vi kan hantera detta på lika sätt ch i nästa labratin kmmer vi att titta på s.k. media queries, för att anpassa layuten till lika strlekar. Men redan nu tittar vi på ett annat sätt i nästa övning. 8. Klumner med stil sm ger en tabell Vi ska nu skapa klumnerna genm att göra en tabell. Men, du har kanske hört att man ska undvika tabeller för att göra en layut. Det handlar dck m att man inte ska använda tabeller i HTML, för att skapa layuten, eftersm det ger mfattande ch rörig kd. Vi ska nu använda display i CSS, för att skapa en presentatin sm en tabell. Det är endast nav ch cntent sm ska vara varsin tabellcell, för att skapa två klumner, så vi måste i HTML-kden införa ytterligare ett div-element sm mger dem. Kpia av filerna Vill du ha kvar de filer du hittills jbbat med, så börjar du med att skapa en kpia av dem sm nu ska ändras. Stäng filerna i din editr. I perativsystemet byter du namn på style.css till style7.css, så att du lätt kan hitta den igen. Skapa en ny mapp sm du kallar style8. Dra ner kpir av index.htm, schema.htm, uppgifter.htm, style_general.css ch stylekpia.css i mappen style8. Dra ckså ner en kpia av mappen pics. Håll ned alt-tangenten samtidigt sm du drar filerna till mappen, så blir det en kpia. Byt namn på stylekpia.css till style.css i mappen style8. Öppna sedan alla filerna i mappen style8 i din editr. Öppna ckså filen index.htm i mappen style8 i din webbläsare Rune Körnefrs 9

10 Tillägg i HTML- kden Lägg till start- ch sluttagg för ett div-element sm mger nav ch cntent i samtliga HTML-filer: Tabell i CSS Detta gör att vi sedan i CSS kan göra clumns till en tabell ch nav ch cntent till tabellceller. Lägg till följande i CSS-kden: Lägg ckså till kd sm gör nav ch cntent till tabellceller: Det blir två klumner, men vi har frtfarande en fast bredd på sidan. Layut med flexibel bredd Ändra width till max-width i wrapper: Lägg ckså till en bredd på nav: Nu kan du ändra strlek på fönstret. Navigeringsklumnen är alltid 100 pixlar ch den andra klumnen anpassar sig till vad sm finns kvar av fönstrets bredd. Gör du fönstret riktigt smalt, så kan dck bilderna ställa till prblem. Men det hanterar vi i nästa labratin. Slut <div id="clumns"> <div id="nav">... </div> <div id="cntent">... </div> </div> #clumns {display:table; width:100%;} #nav {... display:table-cell;} #cntent {... display:table-cell;} #wrapper {max-width:800px;...} #nav {... width:100px;} Vi har nu sett på några lika sätt att skapa en layut med två klumner. Vill man istället ha tre klumner, så gör man på samma sätt. Man kan helt enkelt lägga till ytterligare ett div-element i HTML-kden ch göra stilinställningar för det på samma sätt sm vi gjrt för nav ch cntent. Det sm brukar vara den största svårigheten med att skapa en layut är att få rätt värden på alla width, margin ch padding. I nästa labratin ska vi se mer på hur man anpassar stilen för lika presentatiner sm skrivare ch mbila enheter Rune Körnefrs 10

Ö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

Introducerande övningar i CSS

Introducerande övningar i CSS Intrducerande övningar i CSS CSS (Cascading Style Sheets) är ett språk sm används för att göra stilinställningar av en webbsida skapad i HTML. Stilinställningarna kan läggas in på tre ställen: sm attribut

Läs mer

Övningar i JavaScript del 5

Övningar i JavaScript del 5 Övningar i JavaScript del 5 I dessa övningar ska vi ta upp några lika händelsehanterare. Dessa ska dck inte läggas in med attribut i HTML-kden, så sm vi gjrt tidigare med nclick. Istället ska vi nu lägga

Läs mer

Fler introducerande övningar i HTML

Fler introducerande övningar i HTML Fler intrducerande övningar i HTML Hittills har vi talat m kder i HTML ch ibland kallat dem taggar. Vi har då menat de kder sm skrivs inm < ch >, sm t.ex. ch . Ibland behöver vi dck vara lite mer

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

Övningar i JavaScript del 7

Övningar i JavaScript del 7 Övningar i JavaScript del 7 I denna labratin återanvänder vi bilderna på frukter, sm vi haft i ett par tidigare labratiner. Denna gång ska vi lägga till visuella effekter då en frukt väljs. Klickar man

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

Övningar i JavaScript del 3

Övningar i JavaScript del 3 Övningar i JavaScript del 3 I dessa övningar tar vi upp datumbjektet Date, arrayer ch lpar. Du utgår från ett prgram där man kan klicka på små bilder ch mtsvarande stra bild visas. Detta är i princip samma

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

För att kunna utföra en variable data printning böhöver du följande filer:

För att kunna utföra en variable data printning böhöver du följande filer: Printa Variabel Data Variabel data printning tillåter dig att byta infrmatinen ch data i ditt dkument eller i din bild för att skapa utskrifter med unika texter ch bilder i varje kpia. Denna funktinen

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

/*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

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

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

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

En kom i gång manual till SPF:s hemsidor

En kom i gång manual till SPF:s hemsidor En km i gång manual till SPF:s hemsidr Inlggning Meny (navigatinsträdet) Vad skall finnas på hemsidan Standarduppgifter [Startsidan, Om föreningen, Styrelsen, Kntakt, Bli medlem] Tilläggs/valfria uppgifter

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

Övningar i JavaScript del 2

Övningar i JavaScript del 2 Övningar i JavaScript del 2 Genm dessa övningar frtsätter intrduktinen av JavaScript. Vi tar nu upp if-satser ch lite mer m funktiner. Vi kmmer ckså in på tillämpningar sm att byta en bild på webbsidan

Läs mer

Laghantering i Equipe

Laghantering i Equipe Laghantering i Equipe för klubbar tillhörande Skånes Ridsprtförbund Eftersm distriktet autmatiskt vill betala ut lagstöd till arrangörerna är det viktigt att inrapprteringen av lagklasserna sker på ett

Läs mer

En kom i gång manual till SPF:s hemsidor

En kom i gång manual till SPF:s hemsidor En km i gång manual till SPF:s hemsidr Inlggning Meny (navigatinsträdet) Vad skall finnas på hemsidan Standarduppgifter [Startsidan, Om föreningen, Styrelsen, Kntakt, Bli medlem] Tilläggs/valfria uppgifter

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

Lathund för Sundbybergs IK orienteringssektionen Att arbeta med hemsidan

Lathund för Sundbybergs IK orienteringssektionen Att arbeta med hemsidan Lathund för Sundbybergs IK rienteringssektinen Att arbeta med hemsidan Webbadress för hemsidan http://www.idrttnline.se/sundbyberg/sundbybergsik-rientering Inlggning sker genm att klicka på hänglåssymblen

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

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

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

Övningar i JavaScript del 4

Övningar i JavaScript del 4 Övningar i JavaScript del 4 I dessa övningar ska du dels hantera ett frmulär ch dels arbeta med några textsträngar. 1. Dkument i övningsmappen Övningsmappen sm du laddar ner från labratinens webbsida innehåller

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

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

Hur man skapar ett test i Test och quiz i Mondo 2.6

Hur man skapar ett test i Test och quiz i Mondo 2.6 Hur man skapar ett test i Test ch quiz i Mnd 2.6 Snabbstart Under Test ch quiz, namnge ditt test under fältet Namn ch klicka senare på Skapa. Börja sedan med att gå igenm inställningarna, för att kmma

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering ö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 finns det

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

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

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

Övningar i JavaScript del 6

Övningar i JavaScript del 6 Övningar i JavaScript del 6 I dessa övningar tar vi upp två saker: Öppna ett nytt fönster ch hämta data från glbala variabler i dkumentet i föregående fönster. Läsa in data ifrån XML-filer med tekniken

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

F07 Stilmallar Dagens agenda

F07 Stilmallar Dagens agenda F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar

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

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

Kravspecifika.on, pappersprototyp & CSS

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

Läs mer

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

Övningar i XML och DTD

Övningar i XML och DTD Övningar i XML ch DTD XML används för att strukturera infrmatin ch DTD används för att definiera strukturen. I dessa övningar tar vi upp båda språken, eftersm de tätt hänger ihp. XML XML (extended Markup

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

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: K-Skla ch GPUntis Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre avvikelser

Läs mer

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Börja med att logga in på hemsidan Adress: http://www.edu.falkenberg.se/gymnasieskolan Klicka på nyckeln. Skriv i användarnamn och lösenord,

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örslag till ändrade rutiner för statliga ålderspensionsavgifter

Förslag till ändrade rutiner för statliga ålderspensionsavgifter 1 (7) PM Förslag till ändrade rutiner för statliga ålderspensinsavgifter Pensinsmyndigheten föreslår att: regleringsbelppet mellan statsbudgeten ch AP-fnden för statliga ålderspensinsavgifter inte fördelas

Läs mer

Virkskola. Förkortningar: ~ 1 ~

Virkskola. Förkortningar: ~ 1 ~ Virkskla Förkrtningar: lm luftmaska sm smygmaska fm fast maska hst halvstlpe st stlpe dst dubbelstlpe m muche fm mtag stlpe fr aviga fast maska med mtag runt stlpen från avigsidan v varv mb maskbåge, den

Läs mer

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: TimeEdit Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre avvikelser

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

Administrera filmer på Tandberg Content Server

Administrera filmer på Tandberg Content Server Administrera filmer på Tandberg Cntent Server 11/10/2010 Karlstads universitetsbiblitek, Lärstöd Julia Nyberg ch Kenneth Bström På Tandberg Cntent Server lagras alla filmer sm är inspelade via telebildsystemen.

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

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

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: NvaSchem (utan elever) Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

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

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. 1 Grafisk Webbprofil http://users.du.se/~v10evawa/inlamningsuppgift_3/valkommen.html Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. Författare: Eva Wallin

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

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

Kort användarmanual för Test och quiz i Mondo 2.0

Kort användarmanual för Test och quiz i Mondo 2.0 Krt användarmanual för Test ch quiz i Mnd 2.0 Denna användarmanual är en krtversin av en längre användarmanual ch innehåller de viktigaste delarna för att kmma igång med användningen av Test ch quiz. För

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

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: Utan schemasystem, manuellt schema i SchlSft Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta

Läs mer

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

Manual för att importera referenser till DiVA

Manual för att importera referenser till DiVA Manual för att imprtera referenser till DiVA Du kan imprtera referenser från PubMed, Web f Science, Libris ch referenshanteringsprgrammet EndNte. Även referenser i frmaten XML, EndNte XML, Endnte Referer

Läs mer

Tävlingsdatabasen (TDB)

Tävlingsdatabasen (TDB) Tävlingsdatabasen (TDB) Anvisningar för distrikt ch klubbar sm arbetar med tävlingsdatabasen (TDB) Prpsitinen Viktiga datum ch tidpunkter är när tävlingen öppnas för internetanmälan, när ev. efteranmälning

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Labora&on 1 Variabler och beräkningar övningar/uppgi9er Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

GEOSECMA for ArcGIS GSD datastruktur och import i en SDE geodatabas

GEOSECMA for ArcGIS GSD datastruktur och import i en SDE geodatabas GEOSECMA fr ArcGIS GSD datastruktur ch imprt i en SDE gedatabas ÖVERSIKT Det här dkumentet ger imprtinstruktiner ch en rekmmenderad struktur för Gegrafiska Sverige Data (GSD) i en SDE gedatabas sm ska

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

F10 Mer CSS Dagens agenda

F10 Mer CSS Dagens agenda F10 Mer CSS Dagens agenda Stila formulär CSS-genererat innehåll Mediatyper Utskrift Negativa marginaler Sprites Gridbaserade layouter Ramverk Formulär Prydliga formulär #cform { width: 500px;} #cform

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

«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

Guide för hur bildar man en kaninhoppningsklubb ansluten till SKHRF. Även innehållande kunskap om hur man håller möten

Guide för hur bildar man en kaninhoppningsklubb ansluten till SKHRF. Även innehållande kunskap om hur man håller möten Guide för hur bildar man en kaninhppningsklubb ansluten till SKHRF Även innehållande kunskap m hur man håller möten 1 2012-12-27 Hur man bildar en kaninhppningsklubb ch sedan ansluter den till förbundet

Läs mer

Eldy Användarhandbo Table of Contents

Eldy Användarhandbo Table of Contents Eldy Användarhandb Table f Cntents Table f Cntents... 2 1. Systemkrav:... 3 2. Hur du installerar Eldy på din PC... 3 2.1 INSTALLATION SCREENSHOTS... 4 2.2 Installatin... 4 3. Börja använda ELDY... 5 4.

Läs mer

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.

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

Starta med MS Excel Programfönster och arbetsyta

Starta med MS Excel Programfönster och arbetsyta Starta med kalkylprgrammet Starta med MS Excel Prgramfönster ch arbetsyta Systemmeny Menyrad Verktygsfältet Namnruta Funktinsguiden Redigeringsfält/frmelfält Rad- ch klumnrubrik Celler Bk Kalkylblad Systemmeny

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

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

Instruktioner för mappning av individer till NY-läge

Instruktioner för mappning av individer till NY-läge PM 01-0-5 Genmförandekmmittén för nya Plismyndigheten Ju 01:16 ORG-1 Instruktiner NY-läge Instruktiner för mappning av individer till NY-läge Intrduktin Inm ramen för prjekt ORG-1 har ett förslag till

Läs mer

ANVÄNDARMANUAL TEST OCH QUIZ för Mondo 2.0 Version 1

ANVÄNDARMANUAL TEST OCH QUIZ för Mondo 2.0 Version 1 ANVÄNDARMANUAL TEST OCH QUIZ för Mnd 2.0 Versin 1 Stckhlms universitet Avdelningen för IT ch media Oktber 2008 Innehållsförteckning Dkument Sida Test ch Quiz: En översikt 3 Sex nödvändiga steg för att

Läs mer

Nyheter och ändringar i Adela Grundskola 4.2.0

Nyheter och ändringar i Adela Grundskola 4.2.0 Nyheter ch ändringar i Adela Grundskla 4.2.0 Publicerad 2012-05-03 Tersus Sklsystem AB Lilla Nygatan 2, 411 08 Götebrg Tel: 031-85 70 50 Nya klumner Det har tillkmmit ett antal nya klumner i resultatfönstret

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

Innehållsförteckning. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

Läs mer

ARKIV DIGITAL - att släktforska i färg

ARKIV DIGITAL - att släktforska i färg ARKIV DIGITAL - att släktfrska i färg Av släktfrskare För släktfrskare Arkiv Digital har tillkmmit för att förverkliga en släktfrskares dröm m att kunna läsa arkivmaterial på sin datr, sm m han hade bken

Läs mer

Skeleton plane & Responsiv webbdesign med CSS

Skeleton plane & Responsiv webbdesign med CSS 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor

Läs mer

CAMPINGHANDBOKEN för campinggästen

CAMPINGHANDBOKEN för campinggästen CAMPINGHANDBOKEN för campinggästen Versin 4.2 ANVÄNDARMANUAL VIKTIG INFORMATION FÖR DITT EL-UTTAG Campingplatsnummer: Persnlig kd: Internet bkning: https://www.webel-nline.se Telefn Sverige 075-44 88 000

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

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

Maingate Manager Användarhandledning

Maingate Manager Användarhandledning Maingate Manager Användarhandledning The cntents f this dcument are subject t revisin withut ntice due t cntinued prgress in methdlgy, design and manufacturing. Wireless Maingate AB shall have n liability

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

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

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

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

Läs mer

Rullningslisten. Klicka på rullningslistpilar (pil upp eller pil ner) 1 för att förflytta dig i önskad riktning, en liten bit i taget.

Rullningslisten. Klicka på rullningslistpilar (pil upp eller pil ner) 1 för att förflytta dig i önskad riktning, en liten bit i taget. Rullningslisten Om informationen i fönstret inte ryms på skärmen skapas automatiskt en rullningslist i fönstrets högra kant. Med rullningslisterna kan du snabbt och enkelt flytta dig i fönstret 1 Klicka

Läs mer

Din guide till Windows 10

Din guide till Windows 10 Din guide till Windws 10 Lgga in. Efter man startat sin datr så möts man av en skärmsläckare före inlggning. Tryck på valfri tangent eller vänsterklicka med musen för att kunna lgga in med ditt PKxxxx

Läs mer

ANVÄNDARMANUAL. Version 2.3.3. Euromed Networks AB. Årstaängsvägen 11, 117 43 Stockholm. Tel. 08-54 58 99 99. (Juni 2006)

ANVÄNDARMANUAL. Version 2.3.3. Euromed Networks AB. Årstaängsvägen 11, 117 43 Stockholm. Tel. 08-54 58 99 99. (Juni 2006) ANVÄNDARMANUAL Versin 2.3.3 (Juni 2006) Eurmed Netwrks AB. Årstaängsvägen 11, 117 43 Stckhlm. Tel. 08-54 58 99 99 Innehållsförteckning FÖRORD...2 ÅTERFÖRSÄLJARE...3 DIKTERING...3 DIKTERING...4 Diktatlista...

Läs mer

Användarhandbok OESpeaker 1.0

Användarhandbok OESpeaker 1.0 Användarhandbk OESpeaker 1.0 OESpeaker Versin 10.1 datum 2004-04-19-1 - Innehållsförteckning OESpeaker Versin 10.1 datum 2004-04-19... 1 Installatin av prgrammet... 3 På servern... 3 Uppdatering av tider

Läs mer