Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004 Kirsten Ribu - HiO - LO 130 A 1
I dag Om rammer (Frames) Mer om Javascript Kirsten Ribu - HiO - LO 130 A 2
Innledende om rammer (Frames) Med rammer kan du vise flere (X)HTMLdokumenter 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. Kirsten Ribu - HiO - LO 130 A 3
Frameset DTD Frameset DTD brukes for dokumenter mer rammer Frameset DTD er det samme som Transitional DTD bortsettf fra frameset verdiene: <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd "> Kirsten Ribu - HiO - LO 130 A 4
XHTML Frameset DTD <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xht ml1-frameset.dtd"> Kirsten Ribu - HiO - LO 130 A 5
Bokas ressurser http://www.cookwood.com/html5ed/ Kirsten Ribu - HiO - LO 130 A 6
Et rammedokument Kirsten Ribu - HiO - LO 130 A 7
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. Kirsten Ribu - HiO - LO 130 A 8
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 <frameset cols="150,*"> Ruten vil samtidig få merkelappen innhold (gjennom name-parameteren) <frame name="innhold" src="innhold.html">. Kirsten Ribu - HiO - LO 130 A 9
( 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): <frame name="hoved" src="hoved.html"> Kirsten Ribu - HiO - LO 130 A 10
Eksempel 2 Kirsten Ribu - HiO - LO 130 A 11
Frameset rows Dette rammedokumentet skiller seg fra det foregående ved at cols er erstattet med rows i <frameset>-taggen. <frameset rows="150,*"> På samme måte vil * angi en ikkespesifisert størrelse som browseren vil velge selv. Kirsten Ribu - HiO - LO 130 A 12
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. Kirsten Ribu - HiO - LO 130 A 13
Rammene Kirsten Ribu - HiO - LO 130 A 14
Koden Kirsten Ribu - HiO - LO 130 A 15
En god ressurs! http://www.w3schools.com/ Kirsten Ribu - HiO - LO 130 A 16
Nyttige linker http://www.student.nada.kth.se/~d95- jhe/htg/links.html#html Kirsten Ribu - HiO - LO 130 A 17
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 <body>-tag eller noen annen tag som hører til i body-området. Kirsten Ribu - HiO - LO 130 A 18
Eksempel http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/rammesett.htm Kirsten Ribu - HiO - LO 130 A 19
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 Kirsten Ribu - HiO - LO 130 A 20
Eksempel Kirsten Ribu - HiO - LO 130 A 21
Koden <td width="132"><a href="slides/webpublisering2.pdf" target="_blank">slides fra introduksjonen 20.08</a><br> <a href="slides/forelesning1.pdf" target="_blank">slides fra forelesningen 23.08</a><br> Kirsten Ribu - HiO - LO 130 A 22
Hva er galt med rammer? Kirsten Ribu - HiO - LO 130 A 23
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. Kirsten Ribu - HiO - LO 130 A 24
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. Kirsten Ribu - HiO - LO 130 A 25
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. Kirsten Ribu - HiO - LO 130 A 26
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 framesetdokumentene 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. Kirsten Ribu - HiO - LO 130 A 27
Bra bruk av rammer http://www.arkeoland.uib.no/fastmfs.h tm Kirsten Ribu - HiO - LO 130 A 28
Dårlige webside med rammer http://www.hgu.mrc.ac.uk/bad/framese t.htm http://kalama.doe.hawaii.edu/~joanneo /webdesign/bad/bad_frames.htm Kirsten Ribu - HiO - LO 130 A 29
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) Kirsten Ribu - HiO - LO 130 A 30
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. Kirsten Ribu - HiO - LO 130 A 31
Eksempel Kirsten Ribu - HiO - LO 130 A 32
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 Kirsten Ribu - HiO - LO 130 A 33
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 Kirsten Ribu - HiO - LO 130 A 34
Validering http://www.w3.org Kirsten Ribu - HiO - LO 130 A 35
Litt mer Javascript Kirsten Ribu - HiO - LO 130 A 36
Hendelser: Events onclick hendelse når du klikker på en knapp onmouseover onmouseout Kirsten Ribu - HiO - LO 130 A 37
Bokas ressurssider http://www.javascriptworld.com/ Kirsten Ribu - HiO - LO 130 A 38
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) Kirsten Ribu - HiO - LO 130 A 39