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

Storlek: px
Starta visningen från sidan:

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

Transkript

1 Laboration 3 CSS del 2 1 av 20

2 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 av boxar Positionering av boxar med z-index (lager) Media Types Display-funktionen Prova gärna att validera din stilmall med hjälp av W3C s css-validator på: 2 av 20

3 Boxegenskaper (marginaler, ramar och fyllnader) Inledning Med boxegenskaper kan du specificera elementens storlek, marginaler, ramar (border), färger och bakgrundsbilder, placering och förhållanden. Det finns följande boxegenskaper: 1. margin-top, margin-right, margin-bottom, margin-left som kan förkortas till margin 2. padding-top, padding-right, padding-bottom, padding-left som kan förkortas till padding 3. border-top-width, border-right-width, border-bottom-width, borderleft-width som kan förkortas till border-width 4. border-color 5. border-style 6. border en förkortning för border-width, border-style och border-color 7. width 8. height 9. float 10. clear 3 av 20

4 Övning 1. margin-top Med denna egenskap kan du specificera den övre marginalen för ett element (box) eller ett helt dokument. 1. Öppna hasseotage.html och bekanta dig med webbsidan och XHTML-koden. 2. Spara en kopia av hasseotage.html och döp det till ovning.html så att du inte skriver i originaldokumentet (du ska använda originaldokumentet i flera övningar). Spara ovning.html i mappen hasseotage så fungerar länkarna till bilden. 3. Prova följande stildeklaration i en extern stilmall som du döper till mall.css: body {margin-top: 5cm; img {margin-top: 7cm; 4. Öppna ovning.html i två olika webbläsare, t ex Internet Explorer och Firefox, för att se om det blir någon skillnad i utseendet. Hela dokumentet sänks med 5 cm och bilden ytterligare 7 cm. 5. Stäng inte dokumentet. Övning 2. margin-left Med denna egenskap kan du specificera den vänstra marginalen för ett element (box) eller ett helt dokument. 1. Ändra koden i din externa stilmall till följande: body {margin-left: 2.5in; img {margin-left: 10%; 1. OBS! Använd punkt(.) och inte komma (,) när du anger ett decimalvärde i en stilregel. 2. Hela dokumentet förskjuts 2,5 tum åt höger, bilden ytterligare 10% av sidans bredd. 3. Prova att minska webbläsarnas fönster så ser du att bilderna förskjutning påverkas av sidans bredd. 4. margin-right och margin-bottom fungerar på samma sätt, men för att se effekten av margin-right måste blockelementet täcka hela sidan (t ex p align= justify ). 5. Stäng inte dokumentet. 4 av 20

5 Övning 3. margin Med denna egenskap kan du specificera alla marginaler för ett element (box) eller ett helt dokument. 1. Ändra koden i din externa stilmall till följande: img {margin: 2cm; 2. Bilden får nu en marginal på 2 cm runt om. 3. Prova med ett negativt värde t ex -2cm 4. Bilden får nu en marginal på minus 2 cm, vilket i praktiken innebär att två centimeter av vänster sida försvinner utanför dokumentet och att bilden lägger sig över andra element. 5. Stäng inte dokumentet. 5 av 20

6 padding Denna egenskap är en förkortning för padding-top, padding-right, padding-bottom och padding-left och lägger till ett utfyllnadsområde mellan elementets innehåll och elementets ram (border). Padding fungerar som margin med den skillnaden att margin skapar ett utfyllnadsområde utanför elementets ram (border). Enklast ser man denna effekt i tabellceller (i XHTML motsvaras detta av attributen cellspacing och cellpadding) eller om man har synliga ramar. border Med denna egenskap kan du specificera alla ramar för ett element (box) eller ett helt dokument. Till din hjälp har du tre egenskaper: Border-width (påverkar ramens tjocklek). Border-color (påverkar ramens färg). Border-style (påverkar ramens utseende). För mer information, se föreläsning CSS del 2. Övning 4. border-width 1. Ändra koden i din externa stilmall till följande: h1 {border-width: 4mm; border-style: solid; 2. Observera att du måste ha med deklarationen border-style: solid; för att kunna se ramen. 3. Rubriken får nu en svart, solid ram på 4 mm runt om hela blockelementet. Om du bara vill ha en ram runt rubriktexten så måste du göra om blockelementet h1 till ett inline-element (mer om detta längre fram i laborationshäftet). 4. Stäng inte dokumentet. Övning 5. border-right-width Border har följande varianter: border-top-width, border-right-width, border-bottom-width, border-left-width. Med hjälp av dessa han du påverka ramen vid en eller flera sidor kring ett element. 1. Ändra koden i din externa stilmall till följande: h1 {border-left-width: 0.5em; border-style: solid; 2. Rubriken får nu en smal, svart och solid ram runt elementet, utom på vänster sida där ramen är 0,5 em tjock. Om du bara vill ha en ram på vänster sida ändrar du border-style: solid; till border-leftstyle: solid; 3. Stäng inte dokumentet. 6 av 20

7 Övning 6. border-color Denna egenskap sätter färg på en ram. På samma sätt som margin och border-width kan du styra om du vill färgsätta hela ramen eller bara vissa sidor. 1. Ändra koden i din externa stilmall till följande: h1 {border-color: fuchsia; border-style: solid; 2. Rubriken får nu en smal, rosa och solid ram runt elementet. Om du bara vill ha en rosa ram på t ex undersidan ändrar du border-style: solid; till border-bottom-style: solid; (Observera att hela elementet får en rosa linje se övning 4 punkt 3). 3. Stäng inte dokumentet. Övning 7. border-style Denna egenskap specificerar stilen på en ram. Följande värden finns: none dotted dashed solid double groove ridge inset outset 1. Ändra koden i din externa stilmall till följande: img {border-style: dotted; border-width:1mm; 2. Bilden får nu en smal, svart och prickad ram runt elementet. 3. Prova att sätta färg på prickarna med border-color: olive; och lite avstånd mellan bilden och den prickiga ramen med padding: 2mm;. Prova också att ändra storleken på prickarna med hjälp av border-width. 4. Prova att ändra värdet till border-style med t ex outset eller inset. För att se effekten bör du sätta ramens tjocklek till t ex border-width: 3mm; 5. Stäng inte dokumentet. 7 av 20

8 Övning 8. width och height Med width menas bredden av föräldraelementet plus margin-left, borderleft, padding-left, padding-right, border-right, margin-right. Med height menas höjden på föräldraelementet plus margin-top, bordertop, padding-top, padding-bottom, border-bottom, margin-bottom. Med dessa egenskaper kan du skala elementets bredd eller höjd, t ex bildens. Ifall bilden inte ryms i föräldraelementet skalas dennes ursprungliga marginaler. För att behålla bildens proportioner när du använder width bör du även tilldela height värdet auto och vice versa. Glöm dock inte att filstorleken inte ändras. 1. Ändra koden i din externa stilmall till följande: img {width: 150px; height: auto; 2. Bildens storlek har nu minskat till 150 pixlar i bredd. Höjden har ändrat i proportion. 3. Prova att ändra width till 50 %. Bildens bredd blir nu halva bredden på webbläsarens fönster. 4. Har man en bild med god kvalitet kan man sätta width till 100 % så att bilden täcker hela skärmen. 5. Stäng inte dokumentet. Övning 9. float Den här egenskapen använder man för att ange att ett element ska ligga i vänster- eller högerkant och att andra element flyter runt elementet. Egenskapen används oftast till bilder inne i en text och effekten blir precis det samma som att i XHTML använda align= left eller align= right i elementet <img />. Om värdet är none kommer bilden visas precis på det ställe i texten den befinner sig. Värdet left kommer att flytta elementet åt vänster och texten visas då på höger sida av det. Värdet right flyttar elementet åt höger och texten visas på dess vänstra sida. 1. Ändra koden i din externa stilmall till följande: img {float: left; 2. Bilden placeras till vänster om texten och texten flödar kring bildens högra sida. Lägg gärna in margin-right: 2mm; för att öka avståndet mellan bild och text. 3. Stäng inte dokumentet. 8 av 20

9 Övning 10. clear Den här egenskapen bestämmer om ett element ska tillåta flytande element på dess sidor. Mer specificerat, denna egenskaps värde bestämmer vilka sidor som flytande element inte är tillåtna. Om clear sätts till left, kommer detta element att flyttas nedanför ett flytande element (t ex en bild) som är placerat på dess vänstra sida. 1. Behåll stildeklarationen från övning 9 2. Öppna dokumentet ovning.html och skriv in följande inlinedeklaration i det andra textstycket: p style= clear:left. 3. Denna deklaration kommer att placera det andra textstycket nedanför bilden. Det första textstycket flödar fortfarande kring bilden. 4. OBS! Om du ändrar värdet till right kommer deklarationen att ignorera detta eftersom det inte finns något flytande element placerat till höger om det andra textstycket. 5. Ta bort inline-deklarationen från ovning.html och spara dokumentet. 9 av 20

10 Färger och bakgrundsbilder Inledning Med Style Sheets kan du tilldela varje element en förgrundsfärg, bakgrundsfärg och bakgrundsbild. Övning 11. color (förgrundsfärg) Med denna egenskap kan du sätta förgrundsfärg, t ex färg på bokstäver i ett stycke, en tabell eller en lista. Färgerna kan skrivas på ett antal olika sätt: (se värden) 1. Sätt en förgundsfärg på samtliga element (utom br) i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; 2. All text blir blå, men bilden påverkas inte. Om du hade lagt med elementet br i deklarationen så hade även den blivit opåverkad. 3. Stäng inte dokumentet. Övning 12. background-color (bakgrundsfärg) Med denna egenskap kan du tilldela varje enskilt element en unik bakgrundsfärg. 1. Komplettera din stilmall från föregående övning med en bakgrundsfärg på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; 2. All bakgrund till din blåa text är ny gul (bilden påverkas inte). 3. Stäng inte dokumentet. 10 av 20

11 Övning 13. background-image Med denna egenskap kan du tilldela varje enskilt element, t ex rubriker eller stycken en unik bakgrundsbild. Du kan uppge både bakgrundsfärgen och bakgrundsbilden. Om bilden inte är tillgänglig visas bakgrundsfärgen. OBS! Adressen till bilden skrivs inom parentes. 1. Komplettera din stilmall från föregående övning med en bakgrundsbild (desert.jpg) på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; background-image: url(desert.jpg); 2. All bakgrund till din blåa text är nu försett med en bakgrundsbild (bilden påverkas inte). Den gula bakgrundsfärgen syns inte eftersom bilden hamnar ovanför. Om bilden inte visas, syns bakgrundsfärgen istället. 3. Stäng inte dokumentet. Övning 14. background-repeat Med denna egenskap kan du bestämma hur och om bakgrundsbilden ska upprepas. background-repeat: repeat upprepar bakgrundsbilden både horisontellt och vertikalt. background-repeat: repeat-x upprepar bakgrundsbilden horisontellt. background-repeat: repeat-y upprepar bakgrundsbilden vertikalt. background-repeat: no-repeat bakgrundsbilden upprepas inte. 1. Komplettera din stilmall från föregående övning med deklarationen background-repeat: no-repeat på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; background-image: url(desert.jpg); background-repeat: no-repeat; 2. Bakgrundsbilden repeteras inte och bilden visas i originalstorleken 3,5 x 3,5 cm. 3. Byt no-repeat mot repeat-x. 4. Bakgrundsbilden repeteras horisontellt (längst x-axeln). 5. Byt repeat-x mot repeat-y. 6. Bakgrundsbilden repeteras vertikalt (längst y-axeln). 7. Stäng inte dokumentet. 11 av 20

12 Övning 15. background-attachment Med denna egenskap kan du bestämma om bakgrundsbilden ska skrollas tillsammans med dokumentets innehåll, eller om den ska vara "fastklistrad" (fixed). 1. Ta bort din gamla stildeklaration och ersätt den med följande deklaration: body { color: white; background-image: url(desert.jpg); background-attachment: fixed; 2. För att se effekten kan du behöva minska webbläsarens fönster. Prova sedan att skolla sidan i höjdled, all information utom bakgrundbilden ska nu röra sig när u skrollar. 3. Spara dina dokument och stäng dem. I nästa övning ska du skapa en ny html-fil och en ny extern stilmall. 12 av 20

13 Övning 16. positionering av en box Design av en webbsida kan göras på två olika sätt: Med hjälp av tabeller med osynliga ramar. Med hjälp av CSS och Positionering av boxar (se föreläsning CSS del 2). I denna övning ska du placera en rubrik 100 pixlar från toppen och 300 pixlar från vänster sida med hjälp av position:absolute: 1. Öppna en ny html-sida och döp den till ovning2.html. Skapa en ny extern stilmall och döp den till mall2.css. Spara filerna i mappen hasseotage. 2. Lägg in följande grundtaggar samt en rubrik i ditt html-dokument: <?xml version = "1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns = " <head> <title></title> </head> <body> <h1>denna rubrik ska placeras med hjälp av position:absolute</h1> </body> </html> 3. Lägg in följande deklaration i din stilmall: h1 { position: absolute; top: 100px; left: 300px; 4. Länka stilmallen till ditt html-dokument. 5. Din rubrik är nu placerad 100 pixlar från sidans topp och 300 pixlar från vänster sida. 6. Stäng inte dokumentet. 13 av 20

14 Övning 17. positionering av flera boxar I denna övning ska du placera en bild ovanför din rubrik, 10 pixlar från toppen och 300 pixlar från vänster sida med hjälp av position:absolute. 1. Lägg in följande element i din html-kod i dokumentet ovning2.html. Placera elementet under ditt rubrikelement: <img alt="" src="desert.jpg" height="100" width="100" /> 2. Lägg till följande deklaration i din stilmall: img { position: absolute; top: 10px; left: 300px; 3. Din bild är nu placerad 10 pixlar från sidans topp och 300 pixlar från vänster sida och ovanför din rubrik. 4. När man positionerar sina element med hjälp av position:absolute så spelar det ingen roll var i body du placerar elementen och i vilken ordning. I detta exempel har du placerat rubrikelementet ovanför ditt bildelement, men med hjälp av position:absolute hamnade bilden ovanför rubriken. 5. Spara dina dokument och stäng dem. I nästa övning ska du skapa en ny html-fil och en ny extern stilmall. 14 av 20

15 Övning 18. Skapa en hemsida med hjälp av positionering av boxar 1. Öppna en ny html-sida och döp den till zeppelin.html. Skapa en ny extern stilmall och döp den till zeppelin.css. Spara filerna i mappen ovning_16 (finns i mappen hasseotage). 2. Skapa en hemsida som ser ut som bilden nedan med hjälp av positionering av boxar och position:absolute 3. Samtliga bilder samt två färdiga html-sidor till länkarna finns i mappen ovning_ Gå till ditt html-dokument och lägg in grundtaggarna. 5. Lägg därefter in alla element som ska vara med på sidan, (två rubriker, två bilder, två länkar samt två horisontella streck). 6. Gå därefter till din stilmall och skriv in stildeklarationer för position:absolute en för varje element och anpassa värdena för top och left så att elementen sprids ut som på bilden nedan. 7. Spara och stäng dina dokument. 15 av 20

16 Övning 19. Positionering av boxar med z-index 1. Öppna dina dokument från Övning 15 (ovning.html och mall.css). 2. Ta bort din gamla stildeklaration och ersätt den med följande deklaration:.vov { position: absolute; top: 22px; left: 22px; z-index: 1; font-size:60px; color:#cccccc;.mjau { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 60px; color: black; body {margin-top: 3cm; 3. body {margin-top: 3cm är tillagt för att skapa luft ovanför rubriken. 4. Lägg till följande element i din html-fil ovning.html (det spelar ingen roll var i body du placerar elementet eftersom det ska placeras med hjälp av positionering av boxen): <h1>ordekvilibristerna</h1> 5. I det första h1-elementet sätter du in attributet class med värdet vov. 6. I det andra h1-elementet sätter du in attributet class med värdet mjau. 7. Dina båda rubriker Ordekvilibristerna ligger nu ovanpå varandra med en liten förskjutning på 4 pixlar. Tack vare att den ena rubriken är grå så uppstår en skuggeffekt. 8. Stäng inte dina dokument. 16 av 20

17 Övning 20. Media Types Med hjälp av Media Types och ska du skapa en utskriftsvänlig sida av hasseotage.html. Men först ska du göra några ändringar i layouten: 1. Komplettera din gamla stilmall från föregående övning med följande stilmallar som förändrar layouten i ditt html-dokument med hjälp av och värdet screen { p { background-color: #ff9999; color: #006666; padding: 1em; border: dotted; 2. Komplettera därefter stilmallen med följande selektorer för selektorn media och värdet print { p { background-color: white; color: black; padding: 0em; border: none; 3. Din brödtext är nu mörkgrön och placerad på en rosa tonplatta med en prickad ram i mörkgrönt (den rosa och mörkgröna färgen är komplementfärger). Avståndet (padding) mellan text och ram är 1 em. 4. För att se hur dokumentet ser ut i utskrift så behöver du inte skriva ut det, det räcker med att du ser dokumentet i Print Preview på följande sätt: Internet Explorer version 7, gå till Print-menyn och välj Print Preview. Internet Explorer version 8 och Firefox, välj Print Preview från File-menyn. 5. Din brödtext är nu svart och saknar tonplatta och ram. Avståndet mellan text och ram är också borttagen. 6. Stäng inte dina dokument. 17 av 20

18 Övning 21. Display-funktionen I denna övning ska du använda display-funktionen för att bygga en dropdown-meny i ditt dokument ovning.html. Prova gärna att lägga in egna länkar i drop-down-menyn till t ex Aftonbladet ( och Expressen ( 1. Komplettera din gamla stilmall från föregående övning med följande stilmallar: div { position: absolute; top: 0px; left: 0.5em; z-index: 3; div.menu { font-weight: bold; color: white; border: 2px solid #006666; text-align: center; width: 10em; background-color: #006666; div.menu:hover a { display: block; div.menu a { display: none; border-top: 2px solid #006666; background-color: white; width: 10em; text-decoration: none; color: black; div.menu a:hover { background-color: #ff9999; 18 av 20

19 2. Komplettera därefter ditt html-dokument ovning.html med följande element (det spelar ingen roll var i body du placerar elementet eftersom det ska placeras med hjälp av positionering av boxar): <div class = "menu">meny <a href = "#">Hem</a> <a href = "#">Nyheter</a> <a href = "#">Artiklar</a> <a href = "#">Blog</a> <a href = "#">Kontakta oss</a> </div> 4. Öppna dokumentet i valfri webbläsare. Din drop-down-meny placeras högst upp och 0.5 em till vänster. 5. Stäng inte dina dokument. 19 av 20

20 Övning 22. Display-funktionen för fler drop-downmenyer I denna sista övning ska du använda display-funktionen för att bygga flera drop-down-menyer i ditt dokument ovning.html. Ändra i din gamla stilmall från föregående övning på följande vis: 1. Gör om den översta stildeklarationen från förra övningen till en klassad selektor och döp den till.hej: div.hej { position: absolute; top: 0px; left: 0.5em; z-index: 3; 2. Kopiera den klassade selektorn, döp denna till.hopp och ändra värdet för left till 11em: div.hopp { position: absolute; top: 0px; left: 11em; z-index: 3; 3. Öppna dokumentet ovning.html, ta bort div-elementet från föregående övning ersätt det med följande två divelement, döpta till hej respektive hopp (det spelar ingen roll var i body du placerar elementen eftersom de ska placeras med hjälp av positionering av boxar): <div class = "hej menu">meny <a href = "#">Hem</a> <a href = "#">Nyheter</a> <a href = "#">Artiklar</a> <a href = "#">Blog</a> <a href = "#">Kontakta oss</a> </div> <div class = "hopp menu">våra produkter <a href = "#">Cyklar</a> <a href = "#">Mopeder</a> <a href = "#">4-hjulingar</a> <a href = "#">Motorcyklar</a> <a href = "#">Hjälmar, skyddskläder, stövlar etc.</a> </div> 4. Öppna dokumentet i valfri webbläsare. Dina drop-down-meny placeras högst upp och 0.5 respektive 11 em till vänster. 20 av 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

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

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

Läs mer

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

Ö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

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

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

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

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

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

Läs mer

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

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

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

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

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar

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

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

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

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

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

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

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

Läs mer

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

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

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

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

T a b e l l e r - t a b l e s

T a b e l l e r - t a b l e s skriv ut» T a b e l l e r - t a b l e s Exempel på tabeller» Grundkoden för tabellen» Tabell- och kolumnbredd» Sammanfoga celler» Bakgrundssbild och bakgrundsfärg» Kantlinjebredd och färg» Avstånd mellan

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

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

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

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna

Läs mer

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA) HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text

Läs mer

En bortsprungen katt

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

Läs mer

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

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

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

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

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

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

Lektion 3 HTML, CSS och JavaScript

Lektion 3 HTML, CSS och JavaScript Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML

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

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

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

Läs mer

Webbteknik för ingenjörer

Webbteknik för ingenjörer Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera

Läs mer

Styla och formatera text

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

Läs mer

Lektion 2 Del 1 Kapitel 6

Lektion 2 Del 1 Kapitel 6 Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp

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

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

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

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

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

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets första bilden andra bilden tredje bilden

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

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

WEBBUTVECKLING CSS. Formatmallar - CSS

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

Läs mer

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

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

<Webbutvecklare lektion=02> Kursledare: Mahmud Al Hakim Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet

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

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

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

Läs mer

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

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

Övrigt Ljud Bild Kyrkvärd. Gun Björk. Liv Ek Nattvard Jon Gran

Övrigt Ljud Bild Kyrkvärd. Gun Björk. Liv Ek Nattvard Jon Gran acal version 1.1 Översikt Den centrala delen i acal är en kalender. Till skillnad från andra digitala kalendrar som vanligen har ett par olika fält kan man här fritt skapa fält utifrån de behov man har.

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

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

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

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

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

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

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

Webbstandarder för fler än en plattform

Webbstandarder för fler än en plattform Beteckning: Institutionen för matematik, natur- och datavetenskap Webbstandarder för fler än en plattform Mikael Norling, Tomas Wigren Juni 2008 Examensarbete, 15 poäng, B Datavetenskap Internetteknologi

Läs mer

2I1073 Föreläsning 1. HTML och XHTML XHTML

2I1073 Föreläsning 1. HTML och XHTML XHTML 2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan

Läs mer

CSS- Cascading Stylesheets

CSS- Cascading Stylesheets CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web,

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

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

Frågor och svar Gränssnittsdesign/Webbutveckling

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

Läs mer

Övnings hemtentamen med förslag till lösning, webbprogrammering

Övnings hemtentamen med förslag till lösning, webbprogrammering Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en

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

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Kommunikation. Dator med webbläsare Förfrågan:  Webserver. Returnerar HTML-kod html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/

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

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration

Läs mer

Labora&on 7 Syfte med laborationen:

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

Läs mer

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

TNMK30. Elektronisk publicering

TNMK30. Elektronisk publicering TNMK30 Elektronisk publicering Välkomna till kursen Niklas Rönnberg niklas.ronnberg@liu.se Kopparhammaren 2, rum 2011 Medverkande Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se

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

- - - W e b d e s i g n s k o l a n - - - B i l d e r

- - - W e b d e s i g n s k o l a n - - - B i l d e r skriv ut» B i l d e r Att använda bilder kan vara ett sätt att lyfta fram ett skrivet budskap eller helt enkelt för att göra webplatsen mer attraktiv och lättnavigerad. Bilder skapar du själv i ett bildbehandlingsprogram

Läs mer

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Designhäftet När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Materialet är framtaget i samband med utbildningstunrén 2011. Praktiska designtips En lista

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

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

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

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

Webbdesign Process till produkt

Webbdesign Process till produkt Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av

Läs mer

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

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

Läs mer

Manual för lokalredaktörer villaagarna.se

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

Läs mer

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

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

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

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

Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan.

Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan. 1. Introduktion LUVITs standardutseende för portal och utbildningsmiljö vad gäller logotyp, färger, typsnitt mm kan ändras genom att skapa nya så kallade skins. Skinnen kan man sedan ladda upp i LUVIT

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

För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)

För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet) Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:

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

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

Manual för lokalredaktörer villaagarna.se

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

Läs mer