1 / 13

Kehykset

Kehykset. KEHYKSET: rakenne Frameset Esimerkki: cols Cols: mittayksiköt Cols: mittayksiköt Cols: esimerkki Rows-mittayksiköt Rows-esimerkki Rows ja Cols esimerkki. Frame Linkit Iframe. KEHYKSET: rakenne. ikkunarakenne määritetään frameset -elementillä, jossa kerrotaan

jayme
Download Presentation

Kehykset

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kehykset KEHYKSET: rakenne Frameset Esimerkki: cols Cols: mittayksiköt Cols: mittayksiköt Cols: esimerkki Rows-mittayksiköt Rows-esimerkki Rows ja Cols esimerkki Frame Linkit Iframe

  2. KEHYKSET: rakenne • ikkunarakenne määritetään frameset-elementillä, jossa kerrotaan • miten näyttö jaetaan: pystysuunnassa= colsvaakasuunnassa=rows • ikkunoiden määrää ei rajoitettu • mitä dokumentteja ikkunoihin sijoitetaan

  3. Frameset • frameset-sivulla EI body-elementtiä, sen korvaa frameset –elementti • käytetään frameset-dtd:tä • sivuston muut sivut ovat tavallisia sivuja <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  4. Esimerkki: cols <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" > <head> <meta http-equiv="Content-Type" ..” /> <title>Kehysharjoitus</title></head><frameset cols="150, *">   <frame src=”vasen.html” name=”valikko” />   <frame src="etusivu.html" name=”teksti” />   <noframes>    <body>     <p>Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue       kehyksiä.</p>    </body>   </noframes></frameset></html>

  5. Cols: mittayksiköt • cols = "130, *" 1. kehyksen leveys 130 pikseliä, 2. kehyksen leveys jäljelle jäävä osa • cols = "20%, *" 1. kehyksen leveys 20% selaimen ikkunan leveydestä, 2. sarake loput

  6. Cols: mittayksiköt • cols = "2*,600,1 *"  2. kehyksen leveys 600 pikseliä, 1:n  leveys 2/3 ja  3:nnen leveys 1/3 jäljelle jäävästä osasta • cols = "20%, *, 20%"  1. ja 3. sarakkeen leveys 20 % ikkunan leveydestä, 2. sarakkeen leveys jäljelle jäävä osa

  7. Cols-esimerkki <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" > <head> <meta http-equiv="Content-Type" ..” /> <title>Kehysharjoitus</title></head><frameset cols=” 2*, *,1*">   <frame src=”valikko.html” name=”valikko” />   <frame src="etusivu.html" name=”teksti” />   <frame src=”oikea.html” name=”linkit” />   <noframes>    <body>     <p>Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue       kehyksiä.</p>    </body>   </noframes></frameset></html>

  8. Rows-mittayksiköt • rows=”150,*" • rows=”15%,*” • rows="30%,400,*,2*" 1:n ikkunan korkeus 30 % 2:n korkeus 400 pikseliä 3:nnen korkeus 1/3 ja 4:nnen korkeus 2/3 jäljelle jäävästä osasta

  9. Rows-esimerkki <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" > <head> <meta http-equiv="Content-Type" ..” /><title>Kehysharjoitus</title></head><frameset rows=”20%, *">   <frame src=”yla.html” name=”ylaikkuna” />   <frame src="etusivu.html" name=”teksti” />   <noframes>    <body>     <p>Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue       kehyksiä.</p>    </body>   </noframes></frameset></html>

  10. Cols ja rows-esimerkki <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" > <head> <meta http-equiv="Content-Type" ..” /> <title>Kehysharjoitus</title></head><frameset cols=”15%, *">   <frame src=”valikko.html” name=”valikko” /> <frameset rows=”15%, *">   <frame src=”yla.html” name=”tunniste” />   <frame src="etusivu.html" name=”teksti” />   <noframes>     <body>     <p>Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue       kehyksiä.</p>     </body>   </noframes> </frameset> </frameset></html>

  11. FRAME Attribuutit • src: haettava dokumentti • name: ikkunan nimi • target: linkin kohdeikkuna • scrolling: vieritys: • yes = oletus • no = ei vieritystä • auto = automaattisesti • noresize: käyttäjä ei voi muuttaa ikkunan kokoa • frameborder: ikkunan reunus • yes = reunus, oletus • no = ei reunusta

  12. LINKIT • Targetikkunan nimi: kohdesivu avautuu nimettyyn ikkunaan<a href=”referenssit.html" target=”paasivu">Helia</a> _top: kohdesivu avautuu nykyiseen ikkunaan, poistaa kaikki kehykset<a href="http://www.helia.fi" target="_top">Helia</a> _blank: kohdesivu avautuu uuteen selainikkunaan<a href="http://www.helia.fi" target="_blank">Helia</a> _self: • kohdesivu avautuu siihen sen kehyksen sisään, missä lähdesivu • käytetään esim. sivuston sisäisissä linkeissä, ei ulkopuolisiin linkkeihin<a href=”etusivu.html" target="_self">Helia</a> • Jos ei määritellä ollenkaan: sivu avautuu siihen ikkunaan, missä linkin lähdesivu

  13. IFRAME-kehys • sivunsisäinen kehys, kelluva elementti • tavallinen sivu, jolla joko loose.dtd tai strict.dtd • <iframe src="kayttoohje.html" width="400" height="170" name ="ikkuna">Selaimesi ei tue Inline-kehyksiä</iframe> • attribuutit: src, width, height, name • linkit, tehdään samoin kuin muut linkit <a href = "tyyli.htm" target = "ikkuna">tyyliä</a> <a href = ”kayttoohje.htm" target = "ikkuna">takaisin</a>

More Related