II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.

En presentation över ämnet: "II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007."— Presentationens avskrift:

1 II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007

2 CSS, Selektorer Typ selektor,p { } Klass selekto,.intro { }p.intro { } ID selektor,#ny { } Arv selektor,li a { }#ny a { } Universell selektor * { } Pseudoelement selektora:link { }

3 Attributet class class för att kunna formatera samma märke på olika sätt. Ex: p.utkast {margin-left: 0} p.kommentar {margin-left: 1 cm} Man kan också ta bort märket och då gäller klassen för alla märken.center {text-align: center} Ex: …..

4 Attributet id Då man vill skapa en stil för ett enda märke #storSilver { font-size: 500%, color:silver} Min stora silvertext Exempel

5 Stilregler psedo-class En länk kan vara besökt/obesökt, användaren för musen över märket etc. a:link{color:blue;} a:visited{color:black} a:active{color:green;} a:hover{color:red;} Selector: psedo-class { egenskap: värde } Exempel

6 DIV Elementet är en generell behållare som kan användas för att lägga till struktur i ett html-dokument. Ex: En vacker blomma

7 Span Formatera en del av en text med :.red {background-color: red;} Jag vill ha bakgrundsfärg på följande text : min bästa färg Exempel

8 Mer CSS, nedsänkt tecken a 2, upphöjt tecken a 2 Lista : list-style-type: none, square, disc, circle, upper-roman, lower-roman,upper-alpha, lower-alpha, decimal.

9 Meny En CSS meny utgår från en punktlista val 1 val 2 Exempel

10

11

12 Färg Anges på samma sätt som i html Men även med RGB-värde (Red Green Blue) h1 {color:#000000} h1 {color: red} h1 {color:rgb(25%,25%,50%)} h1 {color:rgb(50,75,100} (max 255)

13 Bilder Skaffa bilder: -rita själv -fotografera -skapa med grafiska program -skana-leta på webben -köpa en samling clipart bilder Att tänka på: upphovsrätten viktig

14 Bildformat GIF (Graphics Interchange Format), 8-bitar, gif-animering, transparent(av/på) JPEG(JPG) (Joint Photographic Experts Group), 24-bitar PNG (Portable Network Graphics), 8-, 24-bitar, transarent (gradvis) SVG (Scalable Vector Graphics) (m.fl.)

15 Bilder vektorgrafikbitmapgrafik

16 Bilder -upplösningen dpi (dots per inch) -storleken, miniatyrer för att förstora efter hand -antalet bilder -beskärningen av bilden, ta bort det som inte behövs -antal färger ( färgpalettens storlek)

17 Bilderi i dokumentet: html taggen -som enkel bild -som länk -som bildkarta (kommer senare)

18 Bild, syntaxen /* minsta syntax */ Attribute: src=”URL” alt=”text” height=”number” width=”number” longdesc=”URL” ( alternativtext för textbaserad webbläsare) Width och height behövs ej men snabbar upp sidan. (storleken bestäms innan bilden anländer) Om bredd och höjd inte stämmer med den verkliga bilden gör webbläsaren om bilden så den stämmer.

19 Bakgrundsbilder, body background-color: grey; background-image: url(blomma.jpg); /* bild ligger över bakgrundsfärg*/ background-repeat:repeat-x ; background-repeat: repeat-y; background-repeat: no-repeat; background-position:300px 6em ; background-position:left; /*center, right top, center, bottom */

20 Validering http://validator.w3.org/ Länk till validator:

21 Länkar http://www.webdesignskolan.com/ http://www.w3schools.com/