|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Kehykset |
Iframe |
|
Kehyksien eli "framejen" käyttö ei ole välttämätöntä. Niissä on sekä etuja että haittoja.
Voit tehdä sivuista kehyksellisen version tai aivan ilman niitä. Myös tämä sivusto on frameton. Kehyksillä selaimen ikkuna voidaan jakaa useampaan osaan, jokaiseen näistä voidaan ladata eri WWW-dokumentti. Ominaisuus on hyödyllinen, kun esim. jos sivujen valikkopainikkeet halutaan olevan kokoajan näkyvillä. Tällaisissa tapauksissa kehykset mm. nopeuttavat sivujen latautumista hieman, sillä muutokset tarvitsee tehdä vain yhteen dokumenttiin. Kehys sivu joka tallennetetaan index nimisenä, ei varsinaisesti näy, vaan se "sitoo eri sivut yhteen". Teit sitten kehyksellisen tai kehyksettömät sivut, niin ensimmäinen HTML-dokumentti jonka haluat ns. pääsivuksi tallennetetaan nimellä index.htm tai index.html WWW-sivulla, jolla kehykset määritellään ei käytetä <BODY> ja </BODY>-koodeja, vaan nämä korvataan <FRAMESET> </FRAMESET> koodeilla. Tarkempi kehysmäärittely kirjoitetaan näiden koodien sisään. Kehyksiä voidaan sijoittaa myös sisäkkäin. <FRAMESET> koodi voi saada seuraavia määritelmiä: COLS__________Jolla määritellään sarakkeiden leveys ja lukumäärä vaakasuunnassa. ROWS_________Jolla määritellään rivien korkeus ja lukumäärä pystysuunnassa. Sarakkeiden leveys ja rivien korkeus voidaan ilmoittaa kolmella tavalla: 1) pikseleinä 2) prosenttiosuutena 3) *-merkin avulla, jolloin sarake tai rivi täyttää kaiken vapaan tilan. Sarakkeita tai rivejä tulostetaan yhtä monta kuin lainausmerkkien sisään on kirjoitettu pilkulla eroteltuja määrittelyjä. Esim.1. <FRAMESET COLS="100,*"> määrittelee sivun vasempaan reunaan 100 pikselin levyisen sarakkeen, ja sen oikealle puolelle loput näytön leveydestä täyttävän sarakkeen. Esim.2. <FRAMESET ROWS="10%,*,10%"> määrittelee sivun ylä- ja alalaitaan 10 % näytön korkeudesta olevat rivit, ja niiden väliin jäävä rivi täyttää loput sivun korkeudesta. FRAME Tarkemmat kehysmäärittelyt tehdään <FRAME> koodin avulla. Koodi toimii yksinään, eikä tarvitse lopettaa. <FRAME> koodin kanssa voidaan käyttää seuraavia määritteitä: SRC________________Kehyksessä näytettävän sivun nimi/osoite. Esim. <FRAME SRC="valikko.htm"> NAME______________Kehyksen nimi. Esim. <FRAME SRC="valikko.htm" NAME="vasen_kehys">. Tätä nimeä voidaan käyttää kertomaan selaimelle paikka, jossa kehyksessä klikattu linkki tulee avata. Tällöin linkkiin tulee lisätä TARGET-määre. MARGINWIDTH_____Vasemman ja oikean marginaalin leveys. Ilmoitetaan pikseleinä. MARGINHEIGHT____Ylä- ja alamarginaalin korkeus. Ilmoitetaan pikseleinä. SCROLLING________Määrittelee vierityspalkkien näkyvyyden kehyksessä. Mahdolliset määritykset ovat: Auto_______________Oletuksena vierityspalkit näkyvät, jos sivu ei mahdu kehykseen. No_________________Vierityspalkit eivät ole näkyvissä. Yes________________Vierityspalkit ovat aina näkyvissä. FRAMEBORDER_____Määrittelee kehysten välisen reunan tulostustavan. Mahdolliset määritykset ovat: No_________________Kehykselle ei tulosteta reunaa. Yes________________Kehykselle tulostetaan reuna. BORDERCOLOR Reunanväri esim. bordercolor="blue" NORESIZE__________ Estää kehyksen koon muuttamisen hiirellä vetäen. NOFRAMES Koska jotkut selaimet eivät tue kehyksiä, kannattaa kehyssivulle sisällyttää pieni koodin pätkä tällaisille selaimille. Se tehdään <NOFRAMES> ja </NOFRAMES> koodeilla, ja sijoitetaan <FRAMESET> </FRAMESET> koodien väliin. <NOFRAMES> koodien väliin kirjoitetaan halutunlainen WWW-sivu <BODY> ja </BODY> koodit mukaanlukien. Esimerkki 1. Perinteinen kaksi kehyksinen "valikko-sisältö" juttu, jossa vasemmalla on 180 pixeliä leveä valikko sivu ja loppu näytön alasta oikealle jää kulloinkin valikosta valittavan sivun käyttöön. Index sivun koodi on seuraava: <HTML> <HEAD> <TITLE> Kehys esimerkki 1. valikko vasemmalla </TITLE> </HEAD> <FRAMESET COLS="180,*"> <FRAME SRC="valikko.html" NAME="valikko" scrolling=auto noresize> <FRAME SRC="sivu1.html" NAME="sivu1"> </FRAMESET> <NOFRAMES> Selaimesi ei tue kehyksiä. </NOFRAMES> </HTML> Avaa esimerkki 1. tästä Esimerkki 2. Valikko ylhäällä 80 pixseliä korkeana. Index sivun koodi on seuraava: <HTML> <HEAD> <TITLE> Kehys esimerkki 2. valikko ylhäällä </TITLE> </HEAD> <FRAMESET ROWS="80,*"> <FRAME SRC="valikko.html" NAME="valikko" scrolling=no> <FRAME SRC="sivu1.html" NAME="sivu1"> </FRAMESET> <NOFRAMES> Selaimesi ei tue kehyksiä. </NOFRAMES> </HTML> Avaa esimerkki 2. tästä Kehysten rakentelussa vaihtoehtoja riittää, vain mielikuvitus on rajana. Linkittäminen kehyksiin Jos sivujen halutaan aukeavan samassa kehyksessä, käy kohdekehyksen määrittely helpoimmin lisäämällä <BASE TARGET="sivu1"> koodi sivun <HEAD> ja </HEAD> koodien väliin (esimerkeissä valikko.html sivulle). Jos määrittelyä ei ole, on oletuksena se, että sivu aukeaa samaan kehykseen missä linkki sijaitsee. Jos linkin aukeamisen kohdepaikkaa halutaan muuttaa, voidaan se tehdä lisäämällä linkkiin määrite TARGET="sivu1". Linkkiin liitetty TARGET-määrittely on etusijalla <BASE TARGET> määrittelyyn nähden ja sitä voidaankin käyttää hyväksi mm. silloin kun on vain yksi linkki, jonka halutaan aukeavan eri kehyksessä. Lisäksi <BASE> koodi on lyhyempi kirjoittaa. | ||||
IframeIframe eli upotettu kehys. Alla olevalle upotetulle kehykselle on määritelty leveys, korkeus, vierityspalkki sekä sivu joka kehyksessä näytetään esim: sivu.html.Sivulle, jolle haluat iframen: <iframe width="700" height="120" scrolling=yes src="sivu.html"> </iframe> Jos haluat muiden sivujen aukeavan linkistä iframeen, on se nimettävä: <iframe width="700" height="120" align="center" scrolling=yes src="sivu.html" name="sivu"> </iframe> Samoin linkkiin on lisättävä kohde <a href="sivu.html" target="sivu">Sivu</a> ... jne ... | ||||
 |
