Frame - mikä se on? Kehyksen rakenne ja luominen

Sisällysluettelo:

Frame - mikä se on? Kehyksen rakenne ja luominen
Frame - mikä se on? Kehyksen rakenne ja luominen
Anonim

Kehys on alue sivustolla (ikkuna), jossa toinen web-sivu on näkyvissä. Verkkovastaavat käyttävät tätä tilaisuutta esitelläkseen ystäviensä tai kumppaniensa sivustojen kotisivuja. Samaa tekniikkaa käytetään hakulomakkeen näyttämiseen laatikoissa, joiden vieressä on tulos jne.

Mutta enimmäkseen kehyksiä käytetään suurten web-portaalien luomiseen, joissa tarvitaan huomattava määrä valikkokohtia ja alivalikoita. He yleensä sanovat sellaisista ihmisistä: "verkkosivusto kehyksissä". Tällaisen resurssin luominen edellyttää hyvää HTML:n tuntemusta.

Kehysten luominen verkkosivustojen rakennustyökalussa

Jotkin verkkosivustojen rakentajat luovat tällaisen koodin automaattisesti. Yleensä Lisää kehys -painike sijaitsee ohjelman päävalikossa. Ensin sinun on asetettava kohdistin oikeaan paikkaan sivulla, napsauta sitten painiketta, ikkuna avautuu (kuten kuvakaappauksessa). Siinä voit asettaa kehyksessä avautuvan sivun osoitteen ja säätää mitat: leveys ja korkeus.

Mutta enimmäkseen kehyksiä käytetään suurten web-portaalien luomiseen, joissa tarvitaan huomattava määrä valikkokohtia ja alivalikoita. He yleensä sanovat sellaisista ihmisistä: "verkkosivusto kehyksissä". Tällaisen resurssin luominen vaatii hyvää tietoaHTML-kieli.

kehysten luominen
kehysten luominen

Tämän "palvelun" avulla on mahdollista luoda sivulle useita kehyksiä, mutta et saa toisiinsa liittyviä elementtejä tällä tavalla.

Kehykset sisällönhallintajärjestelmässä

Monissa verkkosivustojen luontiohjelmissa on mahdollista asentaa vastaava moduuli. Esimerkiksi Joomlassa kehys on "Wrapper"-moduuli.

kehystää se
kehystää se

Se löytyy ja luodaan Joomla CMS:n ohjauspaneelista: "Laajennukset" - "Moduulihallinta" - "Luo" (pyöreä oranssi painike, jonka sisällä on plusmerkki). Ponnahdusikkunassa luettelossa näet "Wrapper"-moduulin.

Jos se ei ole täällä, se ei sisälly. Käyttääksesi sitä, sinun on ensin aktivoitava se täällä: "Laajennukset"-välilehti, sitten "Laajennusten hallinta" ja sitten "Hallinta"-välilehti. Ja etsimme avautuvasta luettelosta nopeaa hakua varten "Suodatin" -kenttään kirjoittamalla sana: Wrapper. Tätä moduulia vastapäätä pitäisi olla vihreä kuvake, jonka sisällä on valintamerkki. Punainen ympyrä, jonka sisällä on piste, tarkoittaa, että tämä laajennus on poistettu käytöstä.

Tämän toimenpiteen jälkeen voit palata "Moduulihallintaan", luoda kehyksen ja asettaa sen parametrit.

mikä on kehys
mikä on kehys

Kuten kuvasta näkyy, moduulissa voit asettaa: otsikon kehyksen yläpuolella, moduulin sijainnin, valita sivuston sivut, joilla se näytetään. Ja myös säädä leveys, korkeus; lisää kehys ja itse asiassalinkki verkkosivulle. Jos kehyksessä haluat näyttää sivuston pääsivun täysleveänä, oletuksena asetettu 100 % ei riitä. Voit heti turvallisesti laittaa 400%. 200 korkeus riittää yleensä näyttämään sivun ylävalikon. Kaikki muu sisältö näkyy, jos käyttäjä (verkkosivuston vierailija) käyttää vierityspalkkia.

Tässä on esimerkki siitä, mitä kehys on Joomlassa.

kehysesimerkkejä
kehysesimerkkejä

Jumla-moduuli kehyksen luomiseen on erittäin kätevä ja helppokäyttöinen. Sen ominaisuudet ovat kuitenkin rajalliset, samoin kuin rakentajan ominaisuudet.

Historia ja realiteetit

Käytännössä luotaessa sivustoja kehyksistä tämä tunniste (sen sovellus) on jo pitkään haalistunut taustalle. Ne voitiin korvata moduuleilla, asetuksilla rakentajaohjelmissa, jotka luovat koodia verkkosivulle ilman sivuston rakentajan osallistumista. Joissakin tapauksissa tämä ei kuitenkaan riitä. Esimerkiksi kun kehys on holistinen monimutkainen rakenne selaimessa näkyvistä alueista. Näin monimutkaisten sivustojen omistajat näkevät sen. Sen luomista käytetään vain ääritapauksissa, koska kehyssivustot luodaan yksinomaan erityisten tunnisteiden avulla.

Monimutkaiset sivustot

Heille useiden toisiinsa yhdistettyjen kehysten luominen on paras ratkaisu sisällön järjestämiseen resurssisivuilla. Nämä ovat yleensä suuria portaaleja, jotka vahvistuvat vuosi vuodelta.

Kuinka saada sama tulos? Miten kehysrakenne luodaan?

runkorakenne
runkorakenne

Mitenlisää kehys sivun koodiin

HTML:n kehykset lisätään tunnisteilla:

  • kehys (erillistä ikkunaa varten);
  • frameset (käyttäen sitä koko rakenteen luomiseen);
  • iframe ("kelluva" kehys);
  • noframes (jos kehys ei näy käyttäjän selaimessa).

Ensimmäinen määritetty tunniste sopii aina ja -pariin. Ja se korvaa ja. Ja asianmukaisten määritteiden avulla voit säätää kunkin elementin ominaisuuksia: nimeä (nimi=), kokoa (sarakkeet=ja rivit=), reunuksen (reunuksen) olemassaoloa, vierityspalkin ulkoasua ja tietysti linkki näytettävälle verkkosivulle.

Designvariaatiot

Sivuston koko sivu voidaan jakaa alueisiin. Esimerkiksi näin:

vasen Yläkehys
Oikein

Tällainen rakenne (jota kutsutaan sisäkkäisiksi) voidaan saada kirjoittamalla cols-attribuutti tagin sisään, mikä tarkoittaa kehyksen sijaintia vaakasuunnassa ja rivit pystysuunnassa. Seuraavaksi laitetaan=-merkki ja määritetään mitat. Esimerkiksi 60%, 40% - prosenttiosuus (yksi ikkuna vie 60% selaintilasta, toinen vastaavasti 40%). Tai 100, 200 - kuvasuhde pikseleinä. Yhden kehyksen kokoa ei voi asettaa ollenkaan (se asetetaan oletuksena). Tätä varten sinun on määritettävä pilkun jälkeen tai ennen sitä symboli.

Pesitysjokainen uusi alue on merkitty uudella kehyssarjalla.

Koodiesimerkki:

Huomaa, että esimerkissämme toisen ja kolmannen kehyksen koot määritetään vain kerran.

Monet ideat antavat sinun täydentää kehyksiä. Esimerkkejä niiden sijainnista selainikkunassa voidaan antaa loputtomasti (muuttamalla koodia vastaavasti). Tälle tiedolle ei kuitenkaan ole löytynyt käytännön käyttöä pitkään aikaan. Kehykset, jos niitä käytetään nykyään sivustoja luotaessa, ovat vain moduulien muodossa ilmaisessa sisällönhallintajärjestelmässä tai iframe-kehyksen muodossa.

Kelluva kehys

sivusto kehyksissä
sivusto kehyksissä

On outoa, miksi se sai sellaisen nimen, sana "sisäänrakennettu" sopii tähän paremmin. Tämä kehys on luotu näyttämään tiedoston sisältö. Lataat minkä tahansa asiakirjan tai tiedoston tietokantaan, kirjoitat polun siihen käyttämällä iframe-tageja - ja vierailijat näkevät tiedoston tekstin (videon tai kuvan). Valitettavasti selaimet eivät aina näytä sisältöä. Tätä varten verkkorakentajat kirjoittavat lauseen avaus- ja sulkemistunnisteiden väliin: "Selain ei näytä sisältöä."

Esimerkiksi Seopult.ru on tunnettu palvelu promootiomestareille. Ei vain hänen pääsivustonsa, vaan peili I.seopult.pro, joka on luotu portaaliasiakkaille. Iframe-koodi kirjoitetaan tähän seuraavasti:

Ohjeet

. Missä on tagi

  • luotiin luettelokohteen määrittämistä varten. Kaikki selaimet tukevat.

    Varmaan peilisivulla näet sanan "Ohje" painikkeen muodossa. Napsauttamalla sitä selainikkunan keskellä avaa esitys.

    Kaikki isoelokuvien ja sarjojen katselusivustot luodaan käyttämällä iframe-kehyksiä (esimerkiksi "Imhonet") sekä sosiaalisia verkostoja. Jopa "Yandexin" pääsivulla on tämä tunniste ja useampi kuin yksi pari.

    Kuinka kirjoitetaan iframe

    Voit ladata asiakirjan ikkunan muodossa, jossa on vierityspalkki, mihin tahansa paikkaan sivustolla. Yleensä tunnisteet sijoitetaan rungon sisään. Standardin yläpuolella

    ja, kuten yllä olevassa esimerkissä näkyy, luettelotunnistetta voidaan käyttää myös -

    • Attribuutit lisätään iframe-kehykseen:

      • leveys (leveys) ja korkeus (korkeus=);
      • reunan tasaus;
      • sisennykset, jotka voidaan määrittää tai olla määrittämättä: oletusarvo on 6 - tämä on aivan tarpeeksi;
      • salpaa läpinäkyvyyttä käyttämällä voit asettaa kehysalueen läpinäkyvyyden niin, että sivun tausta näkyy;
      • plus tuttu scr, nimi, vieritys, reunus.

      Navigointi iframe-kehyksen avulla

      Mielenkiintoisin kehystystaito on koodin kirjoittaminen, jonka avulla voit avata sisältöä ikkunassa linkin avulla, kuten Seopult peilin luojat tekivät, vain useilla linkeillä kerralla (samanaikaisesti käyttäjän käytettävissä samalla sivulla).

      Tätä varten otetaan iframe, johon nimi kirjoitetaan lisäksi name=:n kautta. Esimerkiksi otsikko. Lisäksi ennen sitä tageissa ja linkeissä kirjoitetaan HREF=, jonka jälkeen on pakollinen attribuutin merkintä Ennen päättävän tagin a käyttöä merkitään linkkipainikkeena toimiva merkintä. Tagit "a" avaava ja sulkevaovat tagin sisällä p.

      Voit kirjoittaa koodiin useita tällaisia rivejä saadaksesi lopulta useita linkkipainikkeita yhdelle riville sivustolle, joita klikkaamalla erilaista sisältöä näytetään alla olevassa ikkunassa.

      Koodi näyttää tältä:

      Lähetä mainos

      Näytä mainoksia

      Image
      Image

      Miltä se näyttää verkkosivulla:

      Kuinka lisäät iframe-kehyksen Joomla-sivustoon

      Joomlan ohjauspaneelissa on vakiona käytössä (käyttövalmis) "HTML-koodi"-moduuli. Sen avulla voit lisätä minkä tahansa koodin minne tahansa sivustolla. Hän kuitenkin jättää itsepintaisesti huomioimatta iFrem-tunnisteen sisältävän koodin. Siksi käytämme erityistä Jumi-moduulia.

      Ensinnäkin sinun on ladattava se Internetistä ja asennettava se Joomlan hallintapaneelin kautta: "Laajennukset" - "Laajennusten hallinta" - "Valitse tiedosto". Määritä ladatun arkiston polku ja napsauta "Lataa".

      Onnistuneen asennuksen jälkeen siirry "Moduulihallintaan" ja luo uusi. Valitse Jumin tyyppi. Syötä avautuvassa ikkunassa "Mukautettu koodi" -kenttään valmis iFrem, kuten artikkelin edellisessä kappaleessa näkyy. Anna moduulille otsikko, määritä sijoittelun sijainti ja sivuston sivut. Napsauta tallenna ja tarkista se.

      Selaimet ja kehykset

      Kaikki suositut selaimet näyttävät kehysikkunoiden sisällön hyvin: Chrome, Safari, Firefox, Android, iOS. Internet Explorer ja Opera ovat erityisen korkeat tässä suhteessa. Ja silti ei ole mitään takuutaettä sivustosi vierailija näkee kaikkien ikkunoiden sisällön. Tässä tapauksessa sinun tulee jättää viesti käyttämällä noframe-tunnistetta (avaus ja sulkeminen). Voit kirjoittaa siihen seuraavan: "Selain on vanhentunut. Päivitä versio näyttääksesi sivuston sisällön." Jos käyttäjän selain hahmontaa kehykset oikein, hän ei näe tätä viestiä.

      Kehys on siis sivuston alue tai ikkuna, jolla on oma URL-osoite. Käytetään useiden verkkosivujen tai itsenäisten asiakirjojen näyttämiseen yhdessä selainkentässä kerralla, ja niillä on myös oma URL-osoite. Huolimatta siitä, että kehysten avulla voit järjestää monimutkaisen sivuston hyvin, niitä ei ole käytetty pitkään aikaan iframe-kehystä lukuun ottamatta. Tämän tunnisteen käyttö on edelleen olennaista esitysten, videosoittimen ja tekstiasiakirjojen lataamisessa tiettyyn ikkunaan. Suuret ja tunnetut verkkoresurssit käyttävät sitä aktiivisesti.

Suositeltava: