Rammer. Mer om Javascript

1
Rammer. Mer om Javascript

• LO130A
• Kirsten Ribu 11.10.2004

2
I dag

• Om rammer (Frames)
• Mer om Javascript

3
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
Frameset DTD

• Frameset DTD brukes for dokumenter mer rammer
• Frameset DTD er det samme som Transitional DTD
  bortsettf fra frameset verdiene
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Frameset//EN" "http//www.w3.org/TR/html4/frameset
  .dtd"gt

5
XHTML Frameset DTD

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt

6
Bokas ressurser

• http//www.cookwood.com/html5ed/

7
Et rammedokument
8
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
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
• ltframeset cols"150,"gt
• Ruten vil samtidig få merkelappen innhold
  (gjennom name-parameteren)
• ltframe name"innhold" src"innhold.html"gt .

10
(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)
• ltframe name"hoved" src"hoved.html"gt

11
Eksempel 2
12
Frameset rows

• Dette rammedokumentet skiller seg fra det
  foregående ved at cols er erstattet med rows i
  ltframesetgt-taggen.
• ltframeset rows"150,"gt
• På samme måte vil angi en ikke- spesifisert
  størrelse som browseren vil velge selv.

13
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
Rammene
15
Koden
16
En god ressurs!

• http//www.w3schools.com/

17
Nyttige linker

• http//www.student.nada.kth.se/d95-jhe/htg/links.
  htmlhtml

18

• 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
  ltbodygt-tag eller noen annen tag som hører til i
  body-området.

19
Eksempel

• http//www.iu.hio.no/kirstenr/webpublisering2004/
  eksempler/rammesett.htm

20
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/webpublisering

21
Eksempel
22
Koden

• lttd width"132"gtlta href"slides/webpublisering2.p
  df" target"_blank"gtSlides fra introduksjonen
  20.08lt/agtltbrgt
• lta href"slides/Forelesning1.pdf"
  target"_blank"gtSlides fra forelesningen
  23.08lt/agtltbrgt

23
Hva er galt med rammer?
24
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
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
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
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
Bra bruk av rammer

• http//www.arkeoland.uib.no/fastmFS.htm

29
Dårlige webside med rammer

• http//www.hgu.mrc.ac.uk/Bad/frameset.htm
• http//kalama.doe.hawaii.edu/joanneo/webdesign/ba
  d/bad_frames.htm

30
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
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.

32
Eksempel
33
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
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
Validering

• http//www.w3.org

36
Litt mer Javascript
37
Hendelser Events

• onClick hendelse når du klikker på en knapp
• onMouseover
• onMouseout

38
Bokas ressurssider

• http//www.javascriptworld.com/

39
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)