HTML-kehykset ovat tapa jakaa selainikkuna useisiin osiin, joista jokainen voi ladata ja näyttää eri HTML-asiakirjan. Tässä artikkelissa näemme käytännön esimerkkejä HTML-kehyksistä.

Vaikka sen käyttö on vähentynyt viime vuosina nykyaikaisempien ja joustavampien tekniikoiden, kuten CSS ja JavaScript löytyy edelleen joistakin verkkosivustoista, erityisesti 1990-luvulla ja 1990-luvun alussa luoduista. että 2000.

Kuinka kehykset tai kehykset toimivat HTML: ssä?

Kehykset koostuvat kahdesta osasta:

1. Kehyssarja: Elementti käytetään jakamaan selainikkuna suorakaiteen muotoisiin osiin, joista jokainen voi ladata oman HTML-dokumenttinsa.

2. kehyksiä: Elementti käytetään sisällä a määrittääksesi kunkin yksittäisen osan. Ja se lähettää kutsumaan jotain muuta asiakirjaa, joka on ladattu kehyksen sisään.

   instagram story viewer

• Seuraa: Esimerkkejä iFramesta

Kuinka tehdä kehyksiä HTML: ssä

Luodaksesi kehyksiä sisältävän HTML-dokumentin, noudata kahta hyvin yksinkertaista vaihetta:

1. Luo HTML-dokumentti, joka määrittää kehysten rakenteen elementin avulla. Esimerkiksi:

Tiedosto 1: frameset.html

2. Luo yksi tai useampi HTML-dokumentti ladattavaksi kehyksiin.

Tiedosto 2: frame1.html

Tämä on kehys 1

Tiedosto 3: frame2.html

Tämä on kehys 2

Kehysattribuutit HTML: ssä

Jotkut tärkeimmistä elementtimääritteistä ovat:

• vierittää: Tätä attribuuttia käytetään ohjaamaan kehyksessä olevien vierityspalkkien ulkoasua. Sillä voi olla arvot "auto", "yes" tai "no".

• nosta kokoa: Tätä määritettä käytetään estämään käyttäjää muuttamasta kehyksen kokoa.

• jamssi: Tätä attribuuttia käytetään antamaan kehykselle nimi, joka voi olla hyödyllinen viitattaessa kehykseen linkeissä ja skripteissä.

• src: Tätä attribuuttia käytetään määrittämään kehykseen ladattavan HTML-dokumentin URL-osoite.

• kehyskehys: Tämä attribuutti määrittää, tuleeko kehyksissä olla reunat vai ei. Mahdolliset arvot ovat "1" (näyttääksesi reunat) tai "0" (jotta ei näytä reunoja). Esimerkiksi, .

• rajaa: Tämä attribuutti määrittää kehysten välisen reunuksen leveyden pikseleinä. Esimerkiksi, luo 5 kuvapisteen rajan kehysten väliin.

• kehysvälit: Tämä attribuutti on samanlainen kuin rajaa. Se määrittää myös kehysten välisen tilan pikseleinä. Esimerkiksi, asettaa 10 kuvapisteen raon kehysten väliin.

• reunuksen väri: Tämän määritteen avulla voit muuttaa kehysten reunusten väriä. Mikä tahansa kelvollinen väri voidaan määrittää. Esimerkiksi, tekee kehysten reunasta punaisen.

Käyttöesimerkki:

Kuinka linkittää tiettyyn kehykseen

Voimme avata linkin tietyssä kehyksessä attribuutin avulla kohde Etiketissä. Arvo kohde tulee olla sama kuin kehyksen nimi (jamssi ominaisuus ). Esimerkiksi:

osoitteessa menu.html
Sivu 1
Sivu 2

Tässä tapauksessa "Sivu 1" tai "Sivu 2" -linkkien napsauttaminen valikkokehyksessä lataa vastaavan sivun "sisältö" -kehykseen.

Kuinka rikkoa kehykset

Jos haluat linkin avaamaan sivun kehysjoukon ulkopuolella (eli korvaamaan koko kehysjoukon), voit käyttää erikoisarvoa _top attribuutille kohde. Esimerkiksi:

osoitteessa menu.html
mennä ulos kehyksistä

Kun napsautat "Poistu kehyksistä", selain lataa "pageOutofFrames.html" koko ikkunaan ja korvaa kehysjoukon.

Esimerkki näytön jakamisesta kahteen sarakkeeseen, joissa on kehyksiä

Tämä esimerkki jakaa näytön kahteen samankokoiseen sarakkeeseen. Jokainen sarake lataa eri HTML-sivun.

Esimerkki kehysten sisältävän navigointisivupalkin luomisesta

Tämä esimerkki luo sivupalkin, joka vie 25 % näytöstä ja jota käytetään navigointiin. Näytön muuta osaa käytetään pääsisällön näyttämiseen.

Esimerkki näytön jakamisesta riveihin ja sarakkeisiin

Tämä monimutkaisempi esimerkki jakaa näytön neljään yhtä suureen osaan. Jokainen osio lataa eri HTML-sivun.

Esimerkki huippunavigaatiosta HTML-kehyksillä

Luo tiedosto, joka määrittää kaksi kehystä peräkkäin. Sen määrittelemät kaksi tiedostoa ovat: yksi navigointia varten (joka vie 20 % ikkunan leveydestä) ja toinen pääsisällölle (joka vie ikkunan muun leveyden).

Seuraavaksi sinun on luotava "navigation.html"- ja "content.html"-tiedostot. Esimerkiksi "navigation.html" voi näyttää tältä:

Sivu 1

Sivu 2

Sivu 3


Ja "content.html" voisi olla jotain tällaista:

Tervetuloa sivuillemme!

Tässä siirtyy navigaatiossa valitun sivun sisältö.

Tässä tapauksessa, kun napsautat linkkiä "navigation.html", vastaava sivu ladataan "sisältö" -kehykseen.