Frame - ce este? Structura și crearea cadrului

Cuprins:

Frame - ce este? Structura și crearea cadrului
Frame - ce este? Structura și crearea cadrului
Anonim

Un cadru este o zonă de pe un site (fereastră) în care este vizibilă o altă pagină web. Webmasterii folosesc această oportunitate pentru a prezenta pagina de pornire a site-urilor prietenilor sau partenerilor lor. Aceeași tehnică este folosită pentru a afișa formularul de căutare în casetele cu rezultatul lângă el etc.

Dar cele mai multe cadre sunt folosite în crearea de portaluri web mari, unde este necesar un număr considerabil de elemente de meniu și submeniuri. De obicei se spune despre astfel de oameni: „site-ul pe cadre”. Este necesară o bună cunoaștere a HTML pentru a crea o astfel de resursă.

Crearea cadrelor în generatorul de site-uri

Unii creatori de site-uri oferă generarea automată a unui astfel de cod. De obicei, butonul de adăugare a unui cadru se află în meniul principal al programului. Mai întâi trebuie să plasați cursorul în locul potrivit pe pagină, apoi faceți clic pe butonul, se va deschide o fereastră (așa cum se arată în captura de ecran). În acesta, puteți seta adresa paginii care se va deschide în cadru și puteți ajusta dimensiunile: lățime și înălțime.

Dar cele mai multe cadre sunt folosite în crearea de portaluri web mari, unde este necesar un număr considerabil de elemente de meniu și submeniuri. De obicei se spune despre astfel de oameni: „site-ul pe cadre”. Pentru a crea o astfel de resursă este nevoie de cunoștințe buneLimbă HTML.

crearea de cadre
crearea de cadre

Cu ajutorul acestui „serviciu” este posibil să creezi mai multe cadre pe pagină, dar nu vei obține elemente interconectate în acest fel.

cadre în CMS

În multe programe pentru crearea de site-uri web, este posibil să instalați modulul corespunzător. De exemplu, pentru Joomla, un cadru este un modul „Wrapper”.

încadra-l
încadra-l

Poate fi găsit și creat în panoul de control Joomla CMS: „Extensii” - „Manager de module” - „Creare” (un buton portocaliu rotund cu un semn plus în interior). În fereastra pop-up, în listă, veți vedea modulul „Wrapper”.

Dacă nu este aici, nu este inclus. Pentru a-l folosi, mai întâi trebuie să îl activați aici: fila „Extensii”, apoi „Manager de extensii”, apoi fila „Gestionare”. Și căutăm în lista care se deschide, pentru o căutare rapidă în câmpul „Filter”, introduceți cuvântul: Wrapper. Vizavi de acest modul ar trebui să existe o pictogramă verde cu o bifă în interior. Un cerc roșu cu un punct în interior va însemna că acest plugin este dezactivat.

După această procedură, puteți reveni la „Managerul de module”, creați un cadru și setați parametrii acestuia.

ce este un cadru
ce este un cadru

După cum puteți vedea în imagine, modulul vă permite să setați: titlul deasupra cadrului, poziția modulului, selectați paginile site-ului pe care va fi afișat. Și, de asemenea, reglați lățimea, înălțimea; adăugați un cadru și de faptlink către o pagină web. Dacă într-un cadru doriți să afișați pagina principală a unui site în lățime completă, atunci 100%, setat implicit, nu va fi suficient. Puteți pune imediat în siguranță 400%. O înălțime de 200 este de obicei suficientă pentru a afișa meniul de sus al paginii. Toate celel alte conținuturi vor fi vizibile dacă utilizatorul (vizitatorul site-ului web) folosește bara de derulare.

Iată un exemplu despre ce este un cadru în Joomla.

exemple de cadre
exemple de cadre

Modulul Jumla pentru crearea unui cadru este foarte convenabil și ușor de utilizat. Cu toate acestea, capacitățile sale sunt limitate, la fel ca și capacitățile constructorului.

Istorie și realități

În practica creării de site-uri din cadre, această etichetă (aplicația sa) a dispărut de mult în fundal. Acestea au putut fi înlocuite cu module, setări în programele constructoare care generează cod pentru o pagină web fără participarea unui constructor de site. Cu toate acestea, în unele cazuri acest lucru nu este suficient. De exemplu, când un cadru este o structură complexă holistică de zone afișate în browser. Așa văd proprietarii de site-uri structurate complex. Crearea sa este folosită doar în cazuri extreme, deoarece site-urile frame sunt create exclusiv cu ajutorul etichetelor specializate.

Site-uri structurate complex

Pentru ei, crearea mai multor cadre interconectate este cea mai bună soluție pentru organizarea conținutului pe paginile de resurse. Acestea sunt, de regulă, portaluri mari, care devin mai puternice în fiecare an.

Cum să obțineți același rezultat? Cum se creează structura cadrului?

structura cadrului
structura cadrului

Cumintroduceți cadru în codul paginii

Cadrele în HTML sunt adăugate folosind etichete:

  • cadru (pentru o fereastră separată);
  • set de cadre (folosindu-l pentru a crea o structură întreagă);
  • iframe ("cadru plutitor");
  • noframes (în cazul în care cadrul nu este afișat în browserul utilizatorului).

Prima etichetă specificată se potrivește întotdeauna într-o pereche de și. Și înlocuiește și. Și cu ajutorul atributelor corespunzătoare, puteți ajusta caracteristicile fiecărui element: numele (nume=), dimensiunea (cols=și rânduri=), prezența unui chenar (border), aspectul barei de defilare și, desigur, linkul către pagina web de afișat.

variații de design

Întreaga pagină a site-ului poate fi împărțită în zone. De exemplu, astfel:

Stânga Cadru de sus
Dreapta

O astfel de structură (se numește imbricat) poate fi obținută prin scrierea atributului cols în interiorul etichetei, ceea ce înseamnă locația cadrului pe orizontală, iar rândurile - pe verticală. Apoi, se pune semnul=și se prescriu dimensiunile. De exemplu, 60%, 40% - procent (o fereastră va ocupa 60% din spațiul browserului, ceal altă, respectiv, 40%). Sau 100, 200 - raport de aspect în pixeli. Dimensiunea unuia dintre cadre nu poate fi setată deloc (va fi setată implicit). Pentru a face acest lucru, după sau înainte de virgulă, trebuie să specificați simbolul.

Cuibărirefiecare zonă nouă este indicată de un nou set de cadre.

Exemplu de cod:

Rețineți că, în exemplul nostru, pentru al doilea și al treilea cadru, dimensiunile sunt specificate o singură dată.

Multe idei vă permit să completați cadre. Exemple de locație a acestora în fereastra browserului pot fi date la nesfârșit (schimbând codul în consecință). Cu toate acestea, aceste informații nu și-au găsit aplicație practică de mult timp. Cadrele, dacă sunt folosite astăzi la crearea site-urilor, sunt doar sub formă de module în CMS gratuit sau sub formă de iframe.

Cadru plutitor

site pe cadre
site pe cadre

Este ciudat de ce a primit un astfel de nume, cuvântul „încorporat” este mai potrivit aici. Acest cadru este creat pentru a afișa conținutul unui fișier. Încărcați orice document sau fișier în baza de date, scrieți calea către acesta folosind etichete iframe - iar vizitatorii vor vedea textul fișierului (video sau imagine). Din păcate, browserele nu redau întotdeauna conținut. Pentru a face acest lucru, creatorii web introduc expresia între etichetele de deschidere și de închidere: „Browserul dvs. nu afișează conținut.”

De exemplu, Seopult.ru este un serviciu binecunoscut pentru maeștrii de promovare. Numai că nu site-ul lui principal, ci o oglindă I.seopult.pro, creată pentru clienții portalului. Codul iframe este scris aici după cum urmează:

Instrucțiuni

. Unde este eticheta

  • a fost creat pentru a defini un element din listă. Acceptat de toate browserele.

    Pe pagina în oglindă, puteți vedea cuvântul „Instrucțiuni” sub forma unui buton. Făcând clic pe el în centrul ferestrei browserului, se deschide prezentarea.

    Toate marisite-urile pentru vizionarea de filme și seriale sunt create folosind iframe (de exemplu, „Imhonet”), precum și rețele sociale. Chiar și pagina principală a „Yandex” conține această etichetă și mai mult de o pereche.

    Cum se scrie un iframe

    Puteți încărca un document sub forma unei ferestre cu bară de defilare în orice loc de pe site. De obicei, etichetele sunt plasate în interiorul corpului. Dincolo de standardul

    și, așa cum se arată în exemplul de mai sus, eticheta listă poate fi folosită și -

    • Atributele sunt adăugate la iframe:

      • lățime (lățime) și înălțime (înălțime=);
      • aliniere margine;
      • linișe care pot fi sau nu specificate: valoarea implicită este 6 - este suficient;
      • folosind allowtransparency, puteți seta transparența zonei cadrului astfel încât fundalul paginii să poată fi văzut;
      • plus codul familiar, numele, derularea, chenarul.

      Navigare cu un iframe

      Cea mai interesantă abilitate de încadrare este scrierea unui cod care vă permite să deschideți conținut într-o fereastră printr-un link, ceea ce au făcut creatorii oglinzii Seopult, doar cu mai multe link-uri deodată (disponibile simultan pentru utilizator pe aceeași pagină).

      Pentru aceasta, se ia un iframe, numele este scris suplimentar în el prin name=. De exemplu, antet. Mai departe, înaintea ei în etichete și legăturile sunt scrise printr-un HREF=cu indicarea obligatorie a atributului după ele. Înainte de a utiliza eticheta de închidere a, este indicată o inscripție care va servi drept buton de legătură. Etichetele „a” de deschidere și de închideresunt incluse în eticheta p.

      Puteți scrie mai multe astfel de rânduri în cod pentru a obține eventual mai multe butoane de link pe un rând pe site, făcând clic pe ce conținut diferit va fi afișat în fereastra de mai jos.

      Codul va arăta astfel:

      Postați un anunț

      Afișați anunțuri

      Image
      Image

      Cum va arăta pe site:

      Cum se inserează un iframe într-un site Joomla

      Ca standard, panoul de control Joomla are un modul „HTML-code” activat (gata de utilizare). Cu el, puteți introduce orice cod oriunde pe site. Cu toate acestea, el ignoră cu încăpățânare codul cu eticheta iFrem. Prin urmare, vom folosi un modul Jumi special.

      În primul rând, trebuie să îl descărcați de pe Internet și să îl instalați prin panoul administrativ Joomla: „Extensii” - „Manager de extensii” - „Selectați fișierul”. Specificați calea către arhiva descărcată și faceți clic pe „Descărcați”.

      După instalarea cu succes, accesați „Managerul de module” și creați unul nou. Selectați tipul de Jumi. În fereastra care se deschide, în câmpul „Cod personalizat”, introduceți iFrem pregătit, așa cum se arată în paragraful anterior al articolului. Dați modulului un titlu, specificați poziția de plasare și paginile site-ului. Dați clic pe Salvați și verificați.

      Browsere și cadre

      Toate browserele populare afișează bine conținutul ferestrelor cadru: Chrome, Safari, Firefox, Android, iOS. Internet Explorer și Opera au o rată deosebit de mare în acest sens. Și totuși nu există nicio garanțiecă vizitatorul site-ului dvs. va vedea conținutul tuturor ferestrelor. În acest caz, ar trebui să lăsați un mesaj folosind eticheta noframe (deschidere și închidere). Puteți introduce următoarele: „Browserul dvs. este învechit. Actualizați versiunea pentru a afișa conținutul site-ului”. Dacă browserul utilizatorului redă cadrele corect, acesta nu va vedea acest mesaj.

      Deci, un cadru este o zonă sau o fereastră a unui site care are propria adresă URL. Folosit pentru a afișa simultan mai multe pagini web sau documente independente într-un câmp de browser, având și propria lor adresă URL. În ciuda faptului că cadrele vă permit să organizați bine un site complex, acestea nu au fost folosite de mult timp, cu excepția iframe-ului. Utilizarea acestei etichete este încă relevantă pentru încărcarea prezentărilor, a unui player video, a documentelor text într-o anumită fereastră. Este utilizat în mod activ de resurse web mari și binecunoscute.

Recomandat: