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 CSS Presenterar form (utseende) Textformatering Sidformatering/Positionering Globala stilmallar/extern stilmall (Inbäddade stilmallar & Inline stilmallar) Sama kod olika utseende: http://www.csszengarden.com/ http://www.w3schools.com/css/default.asp 2
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 webbläseren (default-stilmall) Hur websidans utseende bestäms Extern stilmall Inbäddad stilmall Inline stilmall HTML attribute 3
Fonter Syntax för font: font: font-style font-variant font-weight font-size/lineheight font-family caption icon menu messagebox small-caption status-bar initial inherit; http://www.w3schools.com/cssref/pr_font_font.asp Fonters storlekar i pixlar: px, em, % Web säkra fonter: http://www.w3schools.com/cssref/css_websafe_fonts.asp Webbade typsnitt: https://developers.google.com/fonts/docs/getting_started#quick_start http://www.google.com/fonts/# Använda egen font: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp 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 I stilmallen skrivs färgen med # framför det hexadecimala talet: #2F5 Eller med färgnamn: black white Färgvärden: http://www.w3schools.com/cssref/css_colors.asp 4
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; Stilmall Selektor: namnet på den tagg eller område på sajten som du bestämmer dig för att sätta upp en regler/deklaration för: p { color: red; Det som defineras i body ärvs ner till html-tagg: body { font-family: Geneva; 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) Inbäddad stilmall Skrivs i html sidans head och gäller bara för den sidan: <!DOCTYPE html> <html lang="sv"> <head> <title>medieproducent utbildningen</title> <meta charset="utf-8"> <style> h1{ color:#06f; font-family:georgia, "Times New Roman",serif; font-size:36px; </style> </head> <body>... 6
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" href="stilmall.css type="text/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> En global stilmall kan användas av flera html sidor sida1.html stilmall.css sida2.html sida3.html 7
Stilmall för skärm & utskrift I stilmallen definierar man vilket media man vill åt med @media: @media screen { p { font-family: verdana,sans-serif; font-size: 14px; color: gray; @media print { p { font-family: garamond, times new roman, serif; font-size: 12px; color: black; 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; 8
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. id i stilmallar I stilmall: #centrerad{ text-align:center; I html sida: <h1 id="centrerad"> Medieproducent</h1> I detta fall gäller bara för just denna h1, och kan INTE användas någon annan stans på sidan.. 9
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> Nestling Inkapsling - nestling header h1{ font-size: 250%; Direkt nestling div > p { background-color: yellow; 10
Pseudoklasser Används för att beskriva ett stadium av ett element Länkar det valigaste: /* unvisited link */ a:link { color: #FF0000; /* visited link */ a:visited { color: #00FF00; /* mouse over link */ a:hover { color: #FF00FF; /* selected link */ a:active { color: #0000FF; Måste komma i rätt ordning för att funka. CSS metoder (sammanfattning) 1. Selektorer 2. Id-attribut 3. Class-attribut 4. Inkapsling 5. Direkt nestling 6. Pseudoklasser 11
Box modellen Detta gäller alla html-element: <h1> <a> <p> <img> <div> osv. Box modellens olika delar definieras och beskrivs i stilmallen. http://www.w3schools.com/css/css_boxmodel.asp Box modellen height width width:250px; padding:10px; border:5px solid gray; margin:10px; Bredden blir: width+(padding*2)+(border*2)+(margin*2) = 250+(10*2)+(5*2)+(10*2) = 250+20+10+20 = 300px 12
Positionering Flytande objekt float:left flyter vänster (om det finns plats) float:rigth flyter höger (om det finns plats) clear:both bryter flytandet Absolut och relativ o Kopplar bort från naturliga flödet relativ relativt var den skulle ha varit om den följd html flödet absolute relativt dokumentet Positionering static defaultläget, ordningen som det är i html-dokumentet. relativ relativt var den skulle ha varit om den följd html flödet absolute relativt dokumentet fixed relativt webbläsaren, dvs kommer inte flytta på sig om sidan scrollas. Z-index - lägga saker på och under (tänk lager) Testa på: http://www.w3schools.com/css/css_positioning.asp 13
float Block element i html kan man få att flyta till höger eller vänster om andra blockelement. Viktigt att ha bredd på elementen för att de ska flyta bra. Ex på blockelement: <div>,<p>,<img>,<header>,<footer>,<nav> osv float:left flyter vänster (om det finns plats) float:rigth flyter höger (om det finns plats) clear:both bryter flytandet http://www.w3schools.com/css/css_float.asp Filnamn Hemsidans första html-sida: index.html eller default.html http://www.umu.se/index.html det räcker att skriva http://www.umu.se/ Stilmallar: stilmall.css Filer på Linux-server: o o o Inga å, ä, ö i filnamn Bara små bokstäver i filnamn Inga mellanrum i filnamn 14
FileZilla FTP klient Används för att ladda upp webplatsen på server. Ip-adress:130.239.115.172 Användare och Lösenord får var och en. https://filezilla-project.org Skapa en mapp på servern, lägg din hemsida i den mappen. Ex. User1 lägger sin webbplts i en mapp på webbservern som heter karinswebbplats. Länken till min webbplats: 130.239.115.172/user1/ karinswebbplats /index.html Lokala datorn Server 15