PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.

Præsentationer af emnet: "PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets."— Præsentationens transcript:

1 PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets

2 Mål Viden om Frames og deres anvendelse Viden CSS i tre niveauer  CSS egenskaber  Boks-modellen Viden om et udvalg af CSS egenskaber Overordnet viden om hvad det vil sige at programmere

3 VALIDERING

4 Standarder - igen For at sikre at alle er enige om hvordan HTML dokumenter skal opfattes og præsenteres har man indført de såkaldte HTML standarder. World Wide Web Consortium står for denne udvikling af HTML (og meget andet) www.w3c.org

5 Validering Processen hvor man verificerer at et dokument overholder reglerne for sproget (XHTML) kaldes validering. Et værktøj som kan udføre en validering kaldes for en validator. Et dokument som godkendes af validerings processen siges at være validt.

6 Validator (X)HTML validator http://validator.w3.org/ CSS validator http://jigsaw.w3.org/css-validator/ Link 1Link 2

7 FRAMES

8 Frames (1) Vi har mulighed for at vise mere end et dokument af gangen i et browser-vindue Browser-vinduet opdeles i rektangulære ”vinduer” – også kaldet frames Link frameset hovedside.html menuindhold blank.htmlmenu.html

9 Frames (2) Vores Projekt src – hyperlink til det dokument som skal vises i en bestemt frame name – det navn vi vil bruge når vi refererer til en bestemt frame cols – hvor meget skærmplads vores frames må optage

10 Frames (3) Vores Menu Hjem Problemformulering … target – her angiver vi navnet på den frame hvori vores link reference skal vises

11 Frames (4) Advarsel – det er dog ikke alle browsere som understøtter frames  Alt som kun understøtter HTML 3.2  Pocket-pc  Opera mobil

12 Hvad kan en projektside bruges til? Formidling i forhold til vejledere Formidling i forhold til samarbejdspartnere Formidling i forhold til resten af verden Samlingspunkt for litteratur referencer  Emneords database Referater Definitioner af begreber Huskelister Mødeindkaldelser Andet? Link

13 CASCADING STYLE SHEETS

14 Cascading Style Sheets HTML bruges hovedsageligt til at strukturere tekst Men hvordan specificerer vi hvordan vores tekst skal præsenteres i en browser? CSS

15 Hvorfor CSS? Vi separerer information (tekst) og præsentation  Nemmere at ændre de to dele hver for sig  Vi kan koncentrere os om en ting af gangen  Vi kan lave konsistente ændringer i vores web dokumenter I det CSS er en standard har vi én måde at specificere præsentation på, som virker i alle browsere – sådan da :-) Link

16 Hvad er CSS? (1) CSS inkluderer et antal egenskaber (properties): egenskab: værdi; font-size: 38pt; Egenskaber kaldes properties/property

17 Hvad er CSS? (2) CSS egenskaber kan grupperes som følger:  Fonte  Farver and baggrunde  Tekst  Box’e og layout  Lister  Elementer/Tags

18 Hvad er CSS? (3) Der er tre niveauer af style sheets: 1. Indlejret Gælder for indholdet af et specifik element 2. Dokument Gælder for hele kroppen af et dokument 3. Ekstern Kan gælde for flere dokumenter Indlejrede style sheets har precedence (forrang) over Dokument style sheets som har precedence over Eksterne style sheets

19 Indlejrede style sheet definitioner <tag_navn style=”egenskab_1: værdi; egenskab_2: værdi;...” > … Eksempel: <p style=”font-size: 20pt; background-color: red;” > … Link

20 Dokument niveau style sheet definitioner (1) Styles på dokument niveau defineres i delen af et HTML dokument: selector { egenskab_1: værdi; egenskab_2: værdi; … } De elementer i vores HTML dokument som matcher på en selector kaldes for dennes subjects

21 Dokument niveau style sheet definitioner (2) Eksempel: p { font-size: 20pt; background-color: red; } Link

22 Eksterne style sheet definitioner (1) Eksterne styles defineres også i delen af et HTML dokument: Det eksterne style sheet er opbygger på sammen måde som indholdet af dokument niveau style sheet definitioner: selector { egenskab_1: værdi; egenskab_2: værdi; … }

23 Eksterne style sheet definitioner (2) Filen external_level_eks1.css: body { font-size: 20pt; background-color: red; } Link

24 CSS eksempel - Links (1) Styles for link tags,, er delt op i fire pseudo-klasser: a:link – gælder for ikke besøgte links a:visited – gælder for besøgte links a:hover – gælder for det link musecursoren svæver over a:active – gælder for det link der klikkes på Rækkefølgen er vigtig!

25 CSS eksempel - Links (2) a:link { color: green; } a:visited { color: red; } a:hover { color: blue; } a:active { color: yellow; } Link

26 Style classes (1) Til tider har vi behov for variationer i præsentationen af bestemte elementer Vi kan for eksempel have behov for at have forskellige slags paragraffer  Noget Tekst …  Noget Stor Tekst …  Noget Fed Tekst …

27 Style classes (2) … p { font-size: 26pt; } p.stor { font-size: 38pt; } p.fed { font-weight: bold; } Link

28 Style classes (3) Vi kan også definere generelle style classes.stor { font-size: 38pt; } … Link

29 Farver og baggrunde (1) Skrift farve color: en_farve; Baggrundsfarve background-color: en_farve; Baggrundsbillede background-image: url(”marble.png”);

30 Farver og baggrunde (2) body { color: red; background-color: black; } p { color: blue; background-color: yellow; } body { background-image: url(”url_til_et_billed.jpg/.png/.gif..”); } p { background-image: url(”url_til_et_billed.jpg/.png/.gif..”); } background-repeat: repeat | repeat-x | repeat-y | no-repeat; Link

31 Farver (1) Der er i alt 16 farver som det garanteres at alle browsere kan vise: black000000green008000 silverC0C0C0lime00FF00 gray808080olive808000 whiteFFFFFFyellowFFFF00 maroon800000navy000080 redFF0000blue0000FF purple800080teal008080 fuchsiaFF00FFaqua00FFFF Link

32 Farver (2) Vi kan også bruge talværdier i form af rgb-værdier (red,green,blue) – fra 0 til 255 Rød Tekst eller Rød Tekst eller Rød Tekst Link

33 Properties for fonte og tekst (1) font-family  font-family: Gill, Helvetica, sans-serif;  font-family: ’Times New Roman’, serif; font-size  font-size: 12pt;  font-size: 12px;  font-size: 150%; Link

34 Properties for fonte og tekst (2) font-style  font-style: normal | italic | oblique; font-variant  font-variant: normal | small-caps; font-weight  font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; Link

35 Properties for fonte og tekst (3) text-decoration  text-decoration: none | underline | overline | line-through | blink; text-align  text-align: left | right | center | justify; text-indent  text-indent : 10px;  text-indent : 3em; Link

36 Box-model (1)

37 Box-model (2) margin-top, margin-right, margin-bottom, margin-left, margin  margin: 12px 12px 12px 12px; padding-top, padding-right, padding-bottom, padding-left, padding  padding: 12px 12px 12px 12px; border-top, border-right, border-bottom, border-left, border  | |  border: thick solid red; Link

38 Box-model (3) Float er en egenskab vi oftest bruger på billeder og tabeller  float: left | right | none Og der er flere muligheder endnu – så som absolut og relativ positionering – kig på http://www.w3c.org/TR/CSS21/ http://www.w3c.org/TR/CSS21/  Box model  Visual formatting model Link

39 og bruges når vi har behov for at specificere præsentationen af et enkelt ord eller en mindre samling af ord  har ikke noget fast defineret layout bruges når vi har behov for at specificere præsentationen af en samling af paragraffer  Vi skal altså ikke ændre i egenskaben style for hver paragraf  har ikke noget fast defineret layout Link 1Link 2

40 PROGRAMMERING

41 Programmering (1) Når vi programmerer instruerer vi computeren i at udføre algoritmer  En algoritme er essentielt set en slags kogebogsopskrift hvori man trin for trin beskriver hvad computeren skal gøre  Et program beskriver altså en fremgangsmåde (algoritme) Programbeskrivelse  Kildeprogrammet - skrevet af programmøren Programudførelse  Det kørende program - defineret af programbeskrivelsen

42 Programmering (2) Men, hvad er programmering så når vi arbejder med web- sider? Ved hjælp af klient-side programmering kan vi  Validere forms  Reagere på brugerinteraktion  Lave dynamisk HTML Ved hjælp af server-side programmering kan vi  Dynamisk producere HTML sider  Producere HTML sider baseret på en database

43 Klient-side afvikling af JavaScripts Web-server JavaScript WWW Web-browser HTML Page...... Web-klient

44 Mål Viden om Frames og deres anvendelse Viden CSS i tre niveauer  CSS egenskaber  Boks-modellen Viden om et udvalg af CSS egenskaber Overordnet viden om hvad det vil sige at programmere