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 & Sidlayout Skilj på innehåll och utseende på en websida Innehållet på en websida: i HTML-dokumentet Websidans utseende och form: i stilmallar, så kallade CSS-dokument 2
Stilmallar - CSS Presenterar form (utseende) Textformatering Sidformatering/Positionering Inbäddade stilmallar Inline stilmallar Globala stilmallar/extern stilmall Bli inspirerad: http://www.csszengarden.com/ http://www.w3schools.com/css/default.asp webbläseren Hur websidans utseende bestäms Extern stilmall Inbäddad stilmall Inline stilmall HTML attribute 3
Fonter & fontval Fonters storlekar i pixlar: px, em, % Rubriker : går att använda med & utan seriffer Georgia Verdana Brödtext : använda utan seriffer: Verdana Arial Web säkra fonter: http://www.w3schools.com/cssref/css_websafe_fonts.asp Webbade typsnitt: https://developers.google.com/fonts/docs/getting_started#quick_st art http://www.google.com/fonts/# Färger & färgval RGB färger på webben (färgblandning av Röd, Grön, Gul) Ange färger i stilmallar: Hexadecimal form (00 00 00 till FF FF FF) 00 00 00 = svart FF FF FF = vitt 22 FF 55 kan skrivas som 2F5 Undvik komplementfärger (pga färgblindhet ): röd-grön & gul-blå Färgvärden: http://www.w3schools.com/cssref/css_colors.asp http://www.w3schools.com/html/html_colornames.asp 4
Stilmall Stilmall h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; p{ color:#666; font-family:verdana, Geneva, sans-serif; font-size:13px; a{ color:#06f; font-family:tahoma, Geneva, sans-serif; 5
Stilmallen måste kopplas till html sidan. (Inline stilmall skrivs direkt i html-taggen) (Inbäddad stilmall skriv stilmallen direkt i html sidan. ) Global stilmall (Extern stilmall) stilmallen är ett eget dokument (.css) som kopplas ihop med html sidan (.html) Inline stilmall Skrivs i html sidans head och gäller bara för den sidan: <body> <h1 style= color:#06f;font-family:georgia,"times New Roman",serif;font-size:36px; >Välkommen till Matsidans startsida!</h1> <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. Du kommer att hitta allt från recept till när du ska.</p> </body> </html> 6
Inbäddad stilmall Skrivs i html sidans head och gäller bara för den sidan: <!DOCTYPE html> <html lang="sv"> <head> <title>matsida - start</title> <meta charset="utf-8"> <style> h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; </style> </head> <body>... Global stilmall Kopplingen mellan html sidan och global stilmall görs med en länk i html sidans head: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css href="stilmall.css"> </head> <body> <h1>medieproducent</h1> <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"/> <p>under två år läser du kurser med en produktionsteknisk inriktning.</p> <p>en utbildning i Umeå</p> <a href="http://www.umu.se">umeå universitet</a> </body> </html> 7
Global stilmall stilmall.css h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; Globalstilmall mest effektivt, speciellt för en stor webplats! En global stilmall kan användas av flera html sidor sida1.html stilmall.css sida2.html sida3.html 8
Flera globala stilmallar kan användas för att anpassa till ändamålet. sida1.html mobil.css stilmall.css sida2.html utskrift.css sida3.html Stilmall för skärm & utskrift <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <link rel="stylesheet type="text/css href="stilmall.css media= screen > <link rel="stylesheet type="text/css href="stilmallutskrift.css media= print > </head> Andra media typer: handheld för mobil. Se även : http://www.w3schools.com/css/css_mediatypes.asp 9
Stilmall för skärm & utskrift I stilmall för skärm I stilmall för utskrift typsnitt San-seriff (ex, Verdana) Seriff (ex. Times) typsnittsstorlek Pixlar, px Punkter, pt, ex.vis 10pt bilder Ta bort bakgrundsbild länkar Ta bort meny Ta bort display: none; Klasser i stilmallar Använda stilmall för att förändra delar om utseendet av en text. I stilmall:.center{ text-align:center; I html sida: <h1 class="center"> Matsidan</h1> I detta fall gäller bara för just denna h1, inte för alla h1 på sidan. 10
Använda <span> i html Använda stilmall för att förändra delar om utseendet. Ändra bara ex.vis några ord i en text. I stilmall:.red{ color:#900; font-weight:bold; I html sida: <h2>en matsida för <span class="red">oss</span> som bor i Norrland.</h2> I html-sidan: https://www.google.com/fonts Webbade typsnitt <head> <link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'> </head> I stilmallen: h1{color:#06f; font-family: 'Oswald', sans-serif; font-size:36px; 11
Styra länkar utseende: Länk utan understruket: a:link { text-decoration: none; Rosa länk då muspekaren förs över: a:hover { color: #FF00FF; http://www.w3schools.com/css/css_link.asp Listors utseende li{ list-style:none; /*tar bort punkterna i listan*/ li{ list-style:circle; /*cirklar för varje post*/ li{list-style-image:url(bilder/blomma.jpg); /*en blomma för varje post*/ http://www.w3schools.com/html/html_lists.asp 12
WORKSHOP Lo-fi Blandade grupper Presentera er Lo-fi för varandra Ni har till att börja med 15 minuter Dela med er av tankar: Vad är bra? Finns det förbättringar? (Tänk på föreläsningarna.) Kanske får ni nya idéer. Går allt att genomföra? Lärare går runt Efter detta gör förändringar och ladda sedan upp på Moodel för att bli godkänd. 13