Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Kirsten Ribu - HiO - LO 130 A1 Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004.

Liknende presentasjoner


Presentasjon om: "Kirsten Ribu - HiO - LO 130 A1 Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004."— Utskrift av presentasjonen:

1 Kirsten Ribu - HiO - LO 130 A1 Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004

2 Kirsten Ribu - HiO - LO 130 A2 I dag Om rammer (Frames) Mer om Javascript

3 Kirsten Ribu - HiO - LO 130 A3 Innledende om rammer (Frames) Med rammer kan du vise flere (X)HTML- dokumenter på en gang i et web-leser vindu. En del av vinduet kan for eksempel vise til et (X)HTML-dokument som skal ligge fast Det inneholder en oversikt over web-stedet i form av pekere (linker). Den andre delen av vinduet skifter innhold etter hvilke peker man klikker på i det første vinduet.

4 Kirsten Ribu - HiO - LO 130 A4 Frameset DTD Frameset DTD brukes for dokumenter mer rammer Frameset DTD er det samme som Transitional DTD bortsettf fra frameset verdiene: 

5 Kirsten Ribu - HiO - LO 130 A5 XHTML Frameset DTD

6 Kirsten Ribu - HiO - LO 130 A6 Bokas ressurser http://www.cookwood.com/html5ed/

7 Kirsten Ribu - HiO - LO 130 A7 Et rammedokument

8 Kirsten Ribu - HiO - LO 130 A8 Mer........ Den første linjen i dette dokumentet skiller seg fra vanlige (X)HTML-dokument ved at det inneholder teksten Frameset. Dette er nødvendig dersom du ønsker å sjekke kodingen av rammedokumentet. Legg merke til at body-området er erstattet av et frameset-område.

9 Kirsten Ribu - HiO - LO 130 A9 Inndeling i rammer I dette tilfellet blir web-leservinduet delt vertikalt i to områder. Det ene (venstre) området blir 150 piksler bredt og vil inneholde (X)HTML-dokumentet innhold.html  Ruten vil samtidig få merkelappen innhold (gjennom name-parameteren) .

10 Kirsten Ribu - HiO - LO 130 A10 (”150, *” - hva betyr det? Det andre (høyre) området blir så bredt som det er plass til i web-leservinduet (angitt ved * = valgfritt) Det vil inneholde (X)HTML-dokumentet ’hoved.html’ Rammeområdet vil samtidig få merkelappen hoved (gjennom name-parameteren): 

11 Kirsten Ribu - HiO - LO 130 A11 Eksempel 2

12 Kirsten Ribu - HiO - LO 130 A12 Frameset rows Dette rammedokumentet skiller seg fra det foregående ved at cols er erstattet med rows i -taggen.  På samme måte vil * angi en ikke- spesifisert størrelse som browseren vil velge selv.

13 Kirsten Ribu - HiO - LO 130 A13 Rammeinndeling På denne måten kan du ha øvre del av web-leservinduet (150 piksler høyt) og ha feks en logo der. Den nedre delen (resten av vindushøyden) kan skifte innhold etter hvilke pekere som klikkes.

14 Kirsten Ribu - HiO - LO 130 A14 Rammene

15 Kirsten Ribu - HiO - LO 130 A15 Koden

16 Kirsten Ribu - HiO - LO 130 A16 En god ressurs! http://www.w3schools.com/

17 Kirsten Ribu - HiO - LO 130 A17 Nyttige linker http://www.student.nada.kth.se/~d95- jhe/htg/links.html#html http://www.student.nada.kth.se/~d95- jhe/htg/links.html#html

18 Kirsten Ribu - HiO - LO 130 A18 Når du bruker rammer, så inngår det alltid et (X)HTML-dokument mer enn de dokumentene du ønsker å vise i delvinduene. Dette dokumentet (rammedokumentet) inneholder (X)HTML-kode for hvordan oppdelingen skal være og inneholder (X)HTML-tagger som er forskjellig fra det du har lært tidligere. Rammedokumentet skal normalt ikke inneholde en -tag eller noen annen tag som hører til i body-området.

19 Kirsten Ribu - HiO - LO 130 A19 Eksempel http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/rammesett.htm http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/rammesett.htm

20 Kirsten Ribu - HiO - LO 130 A20 Target – hvor skal vinduene åpnes? TARGET="_blank"  Linken blir åpnet i et nytt vindu TARGET="_top"  Linken lastes opp i hovedvinduet.  http://www.iu.hio.no/~kirstenr/webpubliser ing http://www.iu.hio.no/~kirstenr/webpubliser ing

21 Kirsten Ribu - HiO - LO 130 A21 Eksempel

22 Kirsten Ribu - HiO - LO 130 A22 Koden Slides fra introduksjonen 20.08 Slides fra forelesningen 23.08

23 Kirsten Ribu - HiO - LO 130 A23 Hva er galt med rammer?

24 Kirsten Ribu - HiO - LO 130 A24 Argumenter for bruk av rammer: Rammer er svært nyttig å bruke hvis en f.eks ønsker å ha en meny liggende fast på en side. Dette kan hjelpe brukeren med å navigere rundt på nettstedet. Med rammer kan du dele opp websider i flere deler (evt. med scrollbar, hvis det er nødvendig). På denne måten kan en presentere informasjon mer felksibelt.

25 Kirsten Ribu - HiO - LO 130 A25 Mer..... Elementer som en vil brukeren skal se hele tiden, slik som menyer, reklame, rettighetsopplysninger og evt. grafikk, kan plasseres i en statisk individuell ramme. Selv om innholdet i de andre rammene (resten av siden) endres kan en velge å ha slike elementer liggende fast. Ved søk i databaser kan rammer også være nyttig. Søkeriteriene som brukeren har valgt kan ligge i en egen ramme, mens resultatene presenteres i en annen. På denne måten blir det lettere for brukeren å holde oversikt over sine søk.

26 Kirsten Ribu - HiO - LO 130 A26 Argumenter mot bruk av rammer: Rammer er fullstendig inkompatible med browsere som ikke støtter rammer. Nå er dette ikke det største problemet lengre, siden de fleste browsere av nyere versjon også støtter rammer. Hvis en side inneholder en frameset-tag i framesettet som peker til en annen side, vil alle linker i dette dokumentet føre til oppdatering i rammen. Hvis en skal linke til en side som ikke er ens egen er det derfor svært viktig at en husker target="top" eller target"_blank" i link-taggen.

27 Kirsten Ribu - HiO - LO 130 A27 Mer.... Rammer gjør det også problematisk å sette "bookmark" på en side. Det er ikke mulig å "bookmarke" en kombinasjon av rammer, bare "hoveddokumentet". På den måten tvinges brukeren å gå tilbake til hovedsiden hver eneste gang. Brukeren vet altså ikke hvor han/hun egentlig befinner seg siden "current location" ikke kan leses som en URL. I tillegg kan det bli komplisert for den som er ansvarlig for en web-side med mye rammer å holde styr på alle frameset- dokumentene som brukes underveis, og ikke minst holde oversikt over alle "frame names" som er definert og hvilke dokumenter som skal vises i disse. Hvis statisk informasjon som logoer og reklame legges i egne frames, er det ikke mulig "å kvitte seg" med dem. Når du først har sett dem, tar de bare opp skjermplass som kunne vært brukt til noe mer fornuftig. Men det er sikkert en bra løsning for nettsteder som ar avhengig av å vise reklame så ofte som mulig.

28 Kirsten Ribu - HiO - LO 130 A28 Bra bruk av rammer http://www.arkeoland.uib.no/fastmFS.h tm http://www.arkeoland.uib.no/fastmFS.h tm

29 Kirsten Ribu - HiO - LO 130 A29 Dårlige webside med rammer http://www.hgu.mrc.ac.uk/Bad/framese t.htm http://www.hgu.mrc.ac.uk/Bad/framese t.htm http://kalama.doe.hawaii.edu/~joanneo /webdesign/bad/bad_frames.htm http://kalama.doe.hawaii.edu/~joanneo /webdesign/bad/bad_frames.htm

30 Kirsten Ribu - HiO - LO 130 A30 iFrame Noen ganger ønsker man å ha et dokument i HTML dokumentet, i atedet det for å linke til det Da kan man bruke en iframe ( inline frame)

31 Kirsten Ribu - HiO - LO 130 A31 Iframe - Inline Frame IFRAME definerer en ramme inne i dokumentet som kan inneholde eksterne objekter, evt andre HTML dokumenter En inline frame kan være en target for andre linker OBJECT er bedre støttet enn IFRAME I motsetning til IFRAME er OBJECT inkludert i HTML 4.0 Strict.HTML 4.0 Strict

32 Kirsten Ribu - HiO - LO 130 A32 Eksempel

33 Kirsten Ribu - HiO - LO 130 A33 Attributter til iframe Align  Left  Right  Top  Middle  Bottom Frameborder: Vise ramme- border eller ikke Height, width  Pixels  % : Definerer rammens høyde, bredde Scrolling  Yes  No  auto

34 Kirsten Ribu - HiO - LO 130 A34 HTML strict HTML 4.01 spesifiserer tre dokument- typer: Strict, Transitional, and Frameset. HTML Strict DTD Ren kode Bruk den med Cascading Style Sheets (CSS) Men det kan blir for strengt: Bruk heller Transitional sammen med iframe

35 Kirsten Ribu - HiO - LO 130 A35 Validering http://www.w3.org

36 Kirsten Ribu - HiO - LO 130 A36 Litt mer Javascript

37 Kirsten Ribu - HiO - LO 130 A37 Hendelser: Events onClick – hendelse når du klikker på en knapp onMouseover onMouseout

38 Kirsten Ribu - HiO - LO 130 A38 Bokas ressurssider http://www.javascriptworld.com/

39 Kirsten Ribu - HiO - LO 130 A39 Ukeoppgaver uke 42 Lag en side med rammer Lag en iframe og fyll den med innhold Bruk bokas ressurssider til kapittel 2 og lek med ulike javascript. (www.javascriptworld.com)www.javascriptworld.com


Laste ned ppt "Kirsten Ribu - HiO - LO 130 A1 Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004."

Liknende presentasjoner


Annonser fra Google