Cum se creează o pagină cu cadre. Iframe și Frame - ce este și cum să folosiți cel mai bine cadrele în Html Primul cadru

Cadrele sunt zone dreptunghiulare ale ecranului, fiecare conținând propriul document HTML. Ramele sunt excelente pentru următoarele documente:

Cuprins. Dacă puneți un cuprins într-o coloană verticală pe o pagină Web, utilizatorul îl poate accesa în orice moment, fără a fi nevoie să faceți clic constant pe butonul de revenire la pagina anterioară. Deoarece cuprinsul va fi întotdeauna la îndemână în timp ce se află în cadru, utilizatorul va trebui pur și simplu să selecteze un alt element din el și să obțină imediat informațiile de care are nevoie.

Elemente de interfață fixe. Puteți îngheța o imagine grafică pe ecran, cum ar fi sigla unei companii, în timp ce restul paginii derulează într-un alt cadru.

Forme și rezultate. Puteți crea un formular într-un cadru și puteți afișa rezultatele interogării într-un altul.

Cadrele sunt acum considerate învechite și nu sunt acceptate în HTML5. Nu folosi rame obișnuite în proiectele tale! În HTML5, etichetele frame , frameset și noframes nu mai sunt acolo, în schimb, există o singură etichetă iframe (cadru inline sau flotant).

Etichetă

Etichetă - înlocuiește eticheta și este folosită pentru a împărți ecranul. Are o etichetă de închidere.

Atribute

COLS. Împarte ecranul pe verticală. Acceptă valori în pixeli, procente sau pur și simplu *. Valoarea * indică faptul că o anumită coloană va ocupa restul ecranului

RÂNDURI. Împarte ecranul pe orizontală. Acceptă valori în pixeli, procente sau pur și simplu *. Valoarea * indică faptul că linia respectivă va ocupa restul ecranului.

BORDA CADRU. Specifică prezența granițelor, de ex. chenarele cadrului. Acceptă valorile „da” sau „nu”.

FRONTIERĂ. Specifică lățimea chenarului în pixeli.

BORDERCOLOR. Specifică culoarea marginilor. În mod implicit (dacă utilizați schema de culori standard a sistemului Windows), marginile cadrului au o nuanță plictisitoare, gri. Dar dacă doriți, puteți alege orice altă culoare. Când definiți o culoare, puteți alege atât numele acesteia, cât și echivalentul numeric în sistemul RGB. De exemplu, ALBASTRU sau #0000FF.

Într-o etichetă separată, este logic să folosiți doar unul dintre atribute - COLS sau ROWS. Aceasta înseamnă că structura cadrului va consta fie numai din coloane, fie din rânduri. Pentru a crea rânduri în coloane sau coloane în rânduri, aveți nevoie de containere imbricate....

Exemplu

Rezultat:

Rețineți și diferența în ordinea de numerotare a cadrelor.

Etichetă

Eticheta, plasată în containerul..., determină exact ce ar trebui să fie afișat într-un anumit cadru. Nu are etichetă de închidere.

Atribute

SRC. Specifică adresa URL asociată unui anumit cadru.

MARGINWITHTH . Specifică distanța dintre conținutul cadrului și marginile din dreapta și din stânga acestuia.

MARGINHEIGHT. Specifică distanța dintre conținutul cadrului și marginile sale de sus și de jos.

DEfilare. Specifică dacă o fereastră cadru are o bară de defilare. Poate lua valorile „da”, „nu” și „auto” (implicit).

NORESIZE. Definește marginile cadrului drept „cablate” și împiedică utilizatorul să redimensioneze fereastra cadrului. Mai mult, dimensiunile tuturor ramelor care au o chenar comun cu cel fix sunt fixe.

FRAMEBORDER , BORDER , BORDERCOLOR . Aceste atribute sunt legate de margini și sunt similare cu cele ale etichetei.

NUME. Specifică numele ferestrei cadru. Singurul atribut care nu afectează aspectul cadrului. Vă permite să controlați procesul de încărcare a cadrelor. Dacă o fereastră cadru are un nume unic, atunci poate fi accesată direct din alte cadre. La denumirea ferestrelor cu cadru, trebuie reținută o limitare: numele nu trebuie să înceapă cu un caracter de subliniere „_”, altfel va fi ignorat. Deoarece unele nume de servicii încep cu acest caracter. Exemplu

Utilizarea etichetei A pentru a încărca atribute într-un cadru

Href. Specifică adresa URL sau numele noului document pe care doriți să îl încărcați în fereastra cadru specificată.

ŢINTĂ. Specifică numele cadrului în care va fi încărcat noul document. Acest nume trebuie dat cadrului prin atributul NAME de pe etichetă.

Următorul exemplu împarte ecranul în două regiuni verticale. Partea stângă mai mică conține cuprinsul, în timp ce partea dreaptă va încărca toate celelalte documente HTML. Fișierul cuprins conține hyperlinkuri simple text către secțiunile relevante. Pentru ca totul să funcționeze, trebuie să creați documente HTML în fișierele cosm.htm, eat.htm, perf.htm, massage.htm și manic.htm.

Exemplu de conținut

• Bunuri
  • Produse cosmetice
  • Suplimente nutritive
  • Parfumerie
• Servicii
  • Masaj
  • Manichiură

Buna ziua! Etichetă

Eticheta vă scutește de a fi necesar să repetați atributul ȚINTĂ pe fiecare hyperlink individual, dacă toate indică aceeași fereastră cadru. Pentru a face acest lucru, trebuie să plasați o etichetă cu atributul TARGET în container ....

Utilizarea etichetei va face posibilă reducerea dimensiunii fișierului de cuprins left.htm din exemplul anterior.

Exemplu de conținut

• Bunuri
  • Produse cosmetice
  • Suplimente nutritive
  • Parfumerie
• Servicii
  • Masaj
  • Manichiură

Atributul TARGET al fiecărui link specific înlocuiește atributul etichetă cu același nume.

Exemplu de conținut

• Bunuri
  • Produse cosmetice
  • Suplimente nutritive
  • Parfumerie
• Servicii
  • Masaj
  • Manichiură

Iata marfa! Serviciile sunt aici! Efecte speciale obținute cu atributul TARGET

După cum sa menționat deja, numele cadrelor nu pot începe cu un caracter de subliniere, deoarece pornește nume de servicii care transmit informații speciale browserului. Următoarele sunt nume speciale, fiecare folosită pentru a obține un efect specific.

TARGET="_blank” . Documentul este încărcat într-o nouă fereastră de browser.

TARGET="_self" . Documentul este încărcat în fereastra curentă.

TARGET="_părinte" . Documentul este încărcat în cadrul părinte. De obicei acesta este cadrul care se află în container... în fața celui actual. Dacă nu există un cadru părinte, atunci valoarea „_parent” devine identică cu „_self”.

TARGET="_top" . Documentul este încărcat în cadrul de sus.

Practic, aceste nume de servicii sunt destinate să „ipară” din structura actuală a cadrelor într-un fel sau altul. Experimentați cu ele pentru a vedea cum puteți încărca documente în diferite ferestre.

Etichetă

HTML 4.0 a introdus cadre flotante (sau inline). Eticheta vă permite să plasați un singur cadru într-un document HTML normal. Mai mult, containerul... nu este necesar aici.

Eticheta de închidere este necesară!

Atribute

ALING. Specifică tipul de aliniere. Preia valorile „stânga”, „centru”, „dreapta”.

ÎNĂLŢIME. Specifică înălțimea cadrului în pixeli

LĂȚime . Specifică lățimea cadrului în pixeli.

SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME . Similar cu cele discutate mai devreme.

vsspațiu. Setează marginile de sus și de jos în exteriorul iframe-ului

hspace. Setează marginile laterale la exteriorul iframe-ului

lățimea marginii . Determină cantitatea de umplutură pe marginile din stânga și din dreapta din interiorul iframe-ului; trebuie să fie egal sau mai mare decât 1.

marginheight . Definește cantitatea de umplutură de-a lungul marginilor de sus și de jos din interiorul iframe-ului; trebuie să fie egal sau mai mare decât 1.

defilare. Specifică dacă o bară de defilare este afișată în iframe; valoarea poate fi „da”, „nu” sau „auto”. Valoarea implicită pentru documentele obișnuite este automat.

titlu . Textul descrierii. Etichetă

Specifică ce va fi afișat în fereastra browserului dacă nu acceptă cadre.

Browserul dvs. nu acceptă iframe!

Cum să încărcați un cadru fără fișiere suplimentare?

Pentru a încărca un cadru fără a utiliza fișiere externe, trebuie să puneți codul HTML al cadrului într-o variabilă și apoi să specificați „javascript: parent. numele variabilei".

var varFrame = "Cod HTML"; ...

Problema barei de adrese cu structura de cadru a site-ului

Când se utilizează cadre, un site folosește o singură pagină care specifică locația cadrelor.

Iată un exemplu de astfel de pagină:

...

După încărcarea acestei pagini, informațiile sunt încărcate în cadre. În aceste cadre au loc toate tranzițiile utilizatorilor prin paginile site-ului. Bara de adrese afișează întotdeauna doar calea către pagina de pornire, care nu se schimbă în timpul tranzițiilor. Vizitatorul nu știe unde se află în acest moment.

Dacă vizitatorul nu ajunge imediat pe pagina principală a site-ului (de exemplu, dintr-un motor de căutare), atunci acest lucru nu duce la reconstrucția structurii generale a cadrului. Acesta este motivul pentru care proprietarul site-ului nu poate furniza o adresă paginii interne a site-ului.

Există mai multe soluții la această problemă

Anterior, mingea a considerat un exemplu de structură de cadru. Vom lua în considerare diferite modalități de a rezolva această problemă pe ea.

Ideea este următoarea: la încărcarea unei pagini care conține o parte informațională, vom verifica mediul paginii și, dacă lipsește structura de cadru necesară, o vom crea folosind un script.

Sunt posibile trei cazuri:

vizitatorul a aterizat pe o pagină care conține o structură de cadru;

vizitatorul a mers la una dintre paginile de informare;

vizitatorul a aterizat pe o pagină cu un meniu de navigare.

În primul caz, nu este necesară nicio acțiune după efectuarea verificării. Al doilea și al treilea sunt aproape identice, așa că vom lua în considerare în continuare doar al doilea caz.

Și astfel, vizitatorul ajunge „unde nu trebuie să fie”. La începutul paginii, inserăm un script care va crea o structură de cadru.

Implementarea soluției este posibilă atât pe partea client, cât și pe partea serverului. Principalul dezavantaj al implementării pe partea clientului este evident - dependența de capacitățile și setările clientului. De exemplu, executarea de scripturi este interzisă pe computerul utilizatorului. A doua opțiune nu va funcționa dacă serverul nu are suport PHP.

Soluție JavaScript.

Cu această abordare, există o limitare - nu toate browserele acceptă JavaScript și, în unele cazuri, utilizatorii dezactivează ei înșiși scripturile.

În primul rând, verificăm mediul paginii și apoi, în absența structurii de cadru necesare, îl creăm.

Să creăm un fișier frame.js :

Dacă (window.name != „principal”) ( window.name="root"; document.write(""); document.write(""); document.write(""); document.write(""); );)

Mai întâi, verificăm numele ferestrei în care este încărcată pagina: dacă (window.name != „principal”). Dacă numele ferestrei și numele cadrului nu se potrivesc, atunci trebuie să creați o structură de cadru. Acest lucru se face dinamic folosind metoda de scriere a obiectului document.

Atașăm câte un fișier la fiecare pagină a site-ului frame.js. Acum paginile site-ului vor avea următoarea structură:

... ...

Cu această abordare a soluționării acestei probleme, nevoia unui fișier care să conțină o structură de cadru dispare.

Soluție PHP

Cu această abordare, site-ul va deveni accesibil unui număr mai mare de vizitatori.

Vom verifica mediul paginii diferit (nu ca atunci când folosim JavaScript). Vom încărca documentul într-un cadru cu parametrul frames=yes. La deschiderea paginii, verificăm acest parametru și, dacă este necesar, creăm dinamic o structură de cadru. Mai jos este codul care face acest lucru.

Pune codul într-un fișier cadre.php. Acum trebuie să-l conectați la fiecare pagină a site-ului. Mai jos este un exemplu de astfel de pagină.

rame...

În acest caz, ca și în implementarea pe partea client, nu este nevoie să creați separat un document HTML care să descrie structura cadrului.

Bună ziua, dragi cititori ai blogului. Astăzi vom vorbi despre cadre în limbajul HTML. Este clar că vom începe de la început și anume cu ce fel de animal este. Vom vorbi și despre prezentul (Frame) și viitorul (Iframe) acestor elemente în versiunea actuală a limbajului de marcare hipertext și în noul standard Html 5 cu .

La sfârșitul articolului, după o descriere detaliată a procesului de creare a cadrelor inline și a structurii lor clasice în cod HTML (deja rar folosit), vom atinge relevanța construirii unui site pe acestea și vom discuta, de asemenea, modalități posibile de a folosiți-le în perioada curentă folosind exemplul blogului meu.

Ce este și cum este diferit Iframe de Frame

Ce este? Se pare că acestea pot fi utilizate nu numai pe site-uri web, ci și în orice aplicații pentru programe, dar diferă prin faptul că fereastra unei pagini web sau a unei aplicații va fi împărțită în mai multe zone, fiecare dintre acestea fiind încărcată cu un document separat. Mai mult, aceste zone ale cadrului se comportă independent unele de altele.

Probabil cel mai evident exemplu de utilizare a acestora, pe care aproape toți l-ați întâlnit, sunt așa-numitele fișiere de ajutor (ajutoare) pe care le au multe programe instalate pe computer.

Fișierul cu meniul de ajutor este încărcat în fereastra din stânga, iar documentul corespunzător elementului de meniu selectat este afișat în fereastra din dreapta. Este de remarcat faptul că o astfel de structură nu permite reîncărcarea fișierului cu meniul în fereastra din stânga la deschiderea unui document nou în cel din dreapta. Acesta este principalul avantaj al utilizării cadrelor în Html.

De fapt, chiar numele acestor elemente ar trebui interpretat tocmai ca o fereastră independentă. Cu ajutorul cadrelor, avem posibilitatea de a împărți o fereastră mare în mai multe fragmente, care, la rândul lor, pot servi drept receptori pentru documente independente separate (pagini, texte, imagini, videoclipuri etc.).

Cum se creează o structură de cadru în limbajul de marcare hipertext? Dacă vorbim despre standardul Html 4.01 (conform clasificării), care este principalul la momentul actual, atunci sunt folosite trei elemente pentru aceasta - Frame, Frameset și Noframes.

Iframe - un cadru încorporat în standardul HTML 5

Dacă vorbim despre standardul Html 5 (viitorul nostru, dintre care unele elemente sunt deja suportate de multe browsere), atunci nu vor exista etichete Frame, Frameset și Noframes, precum și structura clasică de cadre, în locul lor vor exista un singur tag Iframe (cadru încorporat) , despre care vom vorbi la început, iar apoi ne vom îndrepta toată atenția către schema clasică din versiunea 4.01, care este de fapt folosită acum.

Iframe, spre deosebire de clasic, despre care se discută mai jos, nu necesită înlocuirea etichetei Body cu etichete Frameset. Acestea. această etichetă poate fi inserată în pagini obișnuite, de exemplu, în interiorul unui paragraf sau oriunde altundeva. În esență, acest element este foarte asemănător cu eticheta Img pe care am luat-o în considerare deja.

Este în linie cu conținutul înlocuibil, deoarece se comportă exact ca un element în linie, dar în interior afișează conținut extern străin. Există doar patru astfel de elemente în limbajul HTML - Img, Iframe, Object și Embed. Prin urmare, eroul nostru implică prezența unui fișier extern care va fi încărcat în zonă, a cărui dimensiune este setată folosind atributele acestei etichete.

Acea. Un iframe este un element șir în care este încărcat un obiect extern (cum ar fi un videoclip). Și pentru a specifica calea către acest fișier, care ar trebui să fie încărcat pe pagină, se folosește atributul special Src. Dar, spre deosebire de Img, elementul Iframe este împerecheat, adică. Există și o etichetă de închidere:

Acest exemplu arată afișarea unui videoclip Youtube pe o pagină folosind un Iframe. Pentru a limita aria cadrului (ferestrei) în care va fi încărcat fișierul extern, sunt furnizate atributele Lățime și Înălțime, ale căror valori sunt setate în pixeli:

Acestea. această etichetă creează o zonă în care este încărcat un obiect extern (nu contează dacă este de pe site-ul tău sau dintr-o altă resursă). Lățimea și înălțimea zonei sunt setate folosind Width and Height, iar calea către acest obiect este specificată în atributul Src.

Elementul Iframe a moștenit toate aceste atribute de la etichete inline similare cu conținut înlocuit (cum ar fi imaginea deja menționată mai sus). Ei bine, el a luat și atributele Hspace și Vspace din imagini, care vă permit să setați indentările de la marginile cadrului până la textul care se înfășoară în jurul acestuia.

De asemenea, este semnificativ faptul că alinierea cadrului încorporat se realizează exact în același mod cum am putut vedea când studiem imaginile în Html - . Tot la fel Align , dar pentru eticheta Iframe cu valori posibile Bottom, Top, Middle, Left and Right.

Dar acest element a preluat și câteva atribute de la eticheta Frame din structura clasică a cadrului, despre care vom vorbi foarte, foarte detaliat mai jos. Aceste atribute includ Nume, a cărui valoare poate fi folosită ca valoare, astfel încât documentul de care aveți nevoie să se deschidă în fereastra acestui cadru atunci când faceți clic pe link (citiți mai multe mai jos).

De asemenea, în Iframe, atributul Frameborder a migrat din eticheta Frame, care are doar două valori - fie 0 (cadru din jurul cadrului nu este afișat), fie 1 (cadru este vizibil). Valoarea implicită este Frameborder=1, așa că pentru ao elimina trebuie să scrieți Frameborder="0":

Atributul Scrolling s-a mutat și de la Frame la acest element, care are o valoare implicită Auto - barele de defilare din cadru vor apărea după cum este necesar atunci când conținutul este mai mare decât fereastra destinată să-l afișeze.

Ei bine, atributele Marginwidth și Marginheight au venit și de la elementul Frame. Ele vor fi discutate în detaliu mai jos în text, dar pe scurt - vă permit să setați indentarea în lățime și înălțime de la marginile cadrului până la conținutul care este plasat în acesta.

După cum am menționat deja, un exemplu clar de utilizare a Iframe este:

Prin inserarea Iframe-ului direct în pagina web, veți obține rezultatul videoclipului de pe YouTube. Concluzionăm că acest element este un amestec de elemente inline cu conținut înlocuibil și, de fapt, cadre clasice, despre care vom discuta acum.

Cadre bazate pe etichete Frame și Frameset - structura lor

Deci, crearea unei structuri clasice de cadru începe cu ceea ce scrieți în codul HTML în loc de eticheta Body de deschidere și închidere, care ar trebui să fie prezentă în mod normal în orice document care își înlocuiește containerul pe baza elementelor Frameset.

Punctul fundamental este că elementul Body nu poate fi utilizat în acest caz - fie Body (pentru un document obișnuit) fie Frameset (când se creează o structură de cadru de document):

Fiecare cadru pe care îl formăm în interiorul celui principal este creat folosind un element Cadru separat. Această etichetă este unică și în ea setăm calea către documentul care va trebui să fie încărcat în această fereastră.

Al treilea element pe care nu l-am atins încă este Noframes. Este asociat și vă permite să scrieți ceva text în interiorul dvs., care va fi procesat de browser și afișat pe pagina web numai dacă același browser (sau alt dispozitiv de afișare) nu acceptă cadre. Acest lucru se poate întâmpla, de exemplu, atunci când utilizați un browser pentru dispozitive mobile.

De obicei, Noframes adaugă nu numai informații despre situația actuală cu imposibilitatea procesării structurii cadrului, dar adaugă și posibilitatea de a merge la alte pagini unde puteți continua să lucrați fără a le folosi. Este greu să spui altceva despre el, așa că hai să continuăm.

Se pare că elementul Frameset folosit în locul etichetei Body ocupă tot spațiul alocat pentru vizualizare, iar în cadrul acestei regiuni cadrele vor fi create folosind elemente Frame separate. În acest sens, se pune întrebarea - cum să împărțiți zona de vizualizare între ferestre separate sau, cu alte cuvinte, cum să setați dimensiunea fiecăreia dintre ele.

Acest lucru se face prin adăugarea de atribute adecvate elementului Frameset. Sunt două dintre ele - Cols și Rows. Cols setează împărțirea unei ferestre mari în cadre sau coloane verticale, iar Rows vă permite să o împărțiți în ferestre ori rânduri orizontale.

Crearea unei structuri bazate pe Frameset și pe atributele sale Cols și Rows

Valorile pentru Cols și Rows ale etichetei Html Frameset sunt numere separate prin virgule (fără spații). Aceste numere stabilesc proporțiile ferestrelor pe care dorim să le obținem ca rezultat. Prin urmare, câte numere vor fi scrise separate prin virgule în coloane sau în rânduri, atât de multe cadre avem și ar trebui să fie rezultatul.

De exemplu, folosind această intrare, vom obține trei coloane verticale care vor corespunde în lățime proporțiilor 2:5:3.

Deoarece am setat proporțiile pentru trei cadre, va trebui să scriem trei elemente Frame între eticheta Frameset de deschidere și de închidere, chiar dacă fără a specifica atribute suplimentare:

Ca rezultat, structura noastră de cadru, constând din trei ferestre goale, va arăta astfel:

În acest exemplu, setăm dimensiunile ferestrelor (Frame) folosind procente care sunt luate din lățimea ferestrei de vizualizare (acesta este cazul când se utilizează Cols) sau de la înălțimea acestuia (Rânduri). Când schimbați fereastra de vizualizare, raportul procentual dintre dimensiunile cadrelor va fi păstrat. Dar în loc de procente, puteți folosi și doar numere care vor însemna. Și aici cred că nu ar trebui să apară dificultăți de înțelegere.

Dar există și o opțiune destul de neobișnuită în desemnările dimensiunilor, care arată ca un asterisc „*”. În plus, poate fi fie doar „*”, fie un asterisc cu un număr în față, de exemplu, „3*”. Un lucru complicat, care este foarte asemănător cu procentele și înseamnă că împărțim spațiul pentru Cadru proporțional.

Să ne uităm la un exemplu. Acum să alegem să împărțim fereastra în rânduri orizontale folosind Rows:

Ce înseamnă această intrare? Întreaga fereastră de vizualizare disponibilă pe verticală va fi împărțită în trei linii. Înălțimea primei linii va fi luată la 200 de pixeli, a doua - la 500, dar a treia linie va ocupa tot spațiul rămas în înălțime, deoarece „*” a fost folosit ca dimensiune.

În mod remarcabil, valoarea „*” și „1*” înseamnă același lucru - împărțim tot spațiul rămas la unul și dăm această parte acestui cadru (ei bine, adică tot spațiul rămas).

Dar uite ce se întâmplă dacă folosești valoarea „*” cu un număr pentru a împărți proporțional:

Care crezi că ar trebui să fie dimensiunile Cadrei în acest caz? Este clar că a doua linie va avea cu siguranță o înălțime de 100 de pixeli. Dar cum va fi împărțit spațiul de înălțime rămas între a treia și prima linie?

Este destul de simplu de numărat - doar adăugați patru (4*) la doi (2 *) și împărțiți la acest numitor (amintiți-vă fracțiile din programa școlară) doi și patru. Acestea. obținem că prima coloană cu rama va ocupa o treime din spațiul rămas în înălțime, iar a treia coloană va ocupa două treimi. Sau, cu alte cuvinte, al treilea va fi de două ori mai mare decât primul:

Puteți utiliza toate cele trei moduri de a dimensiona ferestrele cadru într-un singur atribut, de exemplu:

Ca urmare, vom obține prima coloană a Cadrului la zece la sută din întreaga suprafață disponibilă, a doua la 100 de pixeli, iar restul de trei vor avea o lățime în proporții de patru, trei și două noua din spațiul rămas în lăţime. Gata, totul este simplu și clar.

Dacă doriți să împărțiți fereastra principală nu numai în cadre orizontale și verticale, ci, de exemplu, în combinații ale acestora, atunci puteți utiliza structura imbricată a elementelor Frameset separat pentru coloane și separat pentru rânduri. De exemplu, pentru a obține structura afișată în captura de ecran de mai jos, este suficient să folosiți această construcție:

Acestea. mai întâi împărțim tot spațiul disponibil în două coloane pe verticală folosind „frameset cols="20%,80%"” și setăm conținutul coloanei din dreapta cu eticheta „frame”, dar în loc să adăugăm un element „frame” pentru partea stângă. coloană, deschidem o nouă „rânduri frameset="10%,*"".

Și cu ajutorul acesteia, împărțim coloana din dreapta în două linii cu cadre, al căror conținut este setat folosind două etichete „cadru”, după care închidem ambele containere „set de cadru”. Totul este simplu și logic.

Specificați calea în atributul Src al elementului Frame

Dar am vorbit cu toții despre elementul Frameset și atributele sale Cols și Rows, cu ajutorul cărora formăm structura și le stabilim dimensiunile. Acum să ne dăm seama cum să afișam documentele potrivite în cadrele potrivite și cum să configurați interacțiunea între ferestrele lor.

Deci, cum controlăm aspectul ferestrelor pe care le creăm? Toate acestea sunt încorporate în atributele etichetei Frame. Primul care merită menționat este Src . L-am întâlnit deja în eticheta Img când ne-am gândit să inserăm imagini în codul HTML. Esența sa nu s-a schimbat și încă vă permite să specificați calea către documentul care ar trebui să fie încărcat în cadru.

Calea către document în Src poate fi specificată ca . Căile relative sunt de obicei folosite pentru un document care se află pe propria resursă, dar veți avea nevoie de căi absolute atunci când doriți să încărcați un document dintr-un alt site într-o fereastră cadru.

Dacă atributul Src nu este specificat cu calea către documentul dorit, atunci va fi încărcat în fereastră un document gol. Personal, am făcut odată un lucru similar pentru blogul meu (ca element suplimentar de navigare) și, în același timp, am creat un folder separat pentru acesta pe serverul de găzduire și am plasat acolo nu doar un fișier HTML cu o structură de cadru (pe care l-am numit index). .html), dar și toate încărcabile în diverse ferestre de documente, precum și fișiere imagine care au fost folosite ca fundal.

Prin urmare, a fost cel mai ușor pentru mine să folosesc legături relative în atributul Src al etichetei Frame:

În mod remarcabil, dacă înlocuiți toate legăturile din acest cod de la relativ la absolut (cum ar fi https://site/navigator/joomla.html) și deschideți acest fișier într-un browser, atunci documentele specificate în Frame vor fi încărcate din mine. server și veți vedea o imagine similară în browser. Și nu contează unde va fi localizat fișierul cu o structură de cadru (index.html) - pe computer sau pe găzduire.

În exemplul prezentat în figură, o pagină cu un anumit meniu este încărcată în fereastra cadru din stânga, care este un . Dar nu este important modul în care este format meniul, dar ceea ce se întâmplă după ce faceți clic pe oricare dintre linkurile sale este important.

Dacă faceți acest lucru, atunci totul se va întâmpla exact așa cum ar trebui - documentul se va deschide în fereastra din dreapta jos. Dar pentru asta a trebuit să aplic un mic truc, deoarece în versiunea implicită documentul se deschidea pe toată dimensiunea ferestrei, înlocuind structura cadrului, de care nu aveam deloc nevoie, deoarece meniul de navigare din stânga și sus cadrele au dispărut.

Cum se deschide documente dintr-un link într-un cadru

Deci, când am vorbit despre hyperlinkuri, am menționat un astfel de atribut al etichetei „A” ca Target=_blank. Îți amintești pentru ce este? Corect pentru a deschide documentul legat într-o fereastră nouă. În mod implicit, ar trebui să se deschidă în aceeași fereastră, ceea ce este echivalent cu target="_self".

Dar capacitățile Target nu se limitează la asta. Se pare că îi puteți adăuga o valoare sub forma unui nume de cadru, care este indicat anterior în atributul special Name al etichetei Frame. Apoi documentul prin acest link nu se va deschide în aceeași fereastră, ocupând tot spațiul său, ci în Cadrul pe care l-ați specificat. Este clar? Dacă nu chiar, atunci acum va fi clar atunci când analizați exemplul.

Deci, reveniți la exemplul nostru prezentat în figura de mai sus. Trebuie să deschidem pagini folosind link-uri din fereastra din stânga în cadrul din dreapta jos (mare). Prin urmare, primul lucru de făcut este să dea acestei ferestre mari un nume folosind atributul Name de pe eticheta Frame.

A făcut și l-a numit „ktona”. Acum puteți deschide în siguranță fișierul care este încărcat ca meniu în fereastra din stânga și puteți adăuga atributul Target="ktona" la toate etichetele A din el:

Istoria apariției Joomla și a componentei VirtueMart

Desigur, cu ajutorul instrumentului de căutare și înlocuire, nu va fi dificil să îl punem jos pentru toate hyperlinkurile, dar de ce să descărcați codul inutil atunci când avem o oportunitate grozavă de a folosi eticheta specială Base, pe care am menționat-o deja în același articol despre hyperlinkuri, când au vorbit despre utilizarea Target blank.

Este suficient să puneți base target="ktona" între etichetele Head de deschidere și de închidere și toate linkurile din codul HTML al acestui document vor deschide pagini noi în cadrul specificat numit "ktona":

Apropo, dacă luăm în considerare instrumentul meu care a existat cândva ca exemplu, atunci trebuie de asemenea să ne asigurăm că toate linkurile din fereastra orizontală de sus își deschid paginile în cadrul vertical din stânga, care servește drept meniu din stânga. Ce trebuie făcut pentru asta?

Ei bine, mai întâi, trebuie să dăm un nume cadrului vertical din stânga:

Și în fișierul care este încărcat în fereastra de sus (gor.html), trebuie să adăugați elementul target="gor" de bază:

Totul, acum am făcut totul bine. Toate documentele legate din cadrul de sus se deschid în fereastra din stânga, iar toate linkurile din acesta vor deschide documentele în cadrul central și cel mai mare. După părerea mea, totul este simplu și logic.

Atributele etichetei cadru pentru a personaliza aspectul ferestrelor

Să vedem acum ce atribute în afară de Src și Name pot fi folosite în eticheta Frame pentru a personaliza aspectul cadrelor. Să începem cu Scrolling . Cu acesta, putem personaliza afișarea barelor de derulare pentru fiecare fereastră a structurii dvs. de cadru individual.

Defilarea este setată la Auto în mod implicit - browserul va decide automat, în funcție de dimensiunea documentului încărcat în cadru, dacă să afișeze sau nu o bară de defilare. Dacă documentul nu se încadrează complet în fereastră, va apărea o bară de defilare, care vă permite să-l vizualizați până la sfârșit.

De asemenea, ca valori pentru Scrolling, puteți folosi Da (barele de defilare din fereastră vor fi întotdeauna afișate, chiar dacă documentul se încadrează complet în el) și Nu (barele de defilare nu vor apărea deloc, chiar dacă o parte a documentului) nu se potriveste).

În instrumentul meu odată existent, am folosit automat implicit și barele de defilare din cadre au apărut după cum era necesar:

Următorul atribut al etichetei Frame, Noresize, este unic (nu are valori). După ce l-ați înregistrat, veți interzice astfel modificarea dimensiunii sale, care în mod implicit se realizează prin simpla glisare a marginii cadrelor cu mouse-ul.

Când aduceți cursorul mouse-ului la margine, veți vedea că cursorul se va transforma într-o săgeată cu două capete și acum, apăsând butonul stâng al mouse-ului, puteți muta chenarul după cum doriți. Noresize impune o interdicție asupra acestei voințe proprii (când mutați cursorul mouse-ului la marginea ferestrei, nu veți mai vedea o săgeată cu două capete).

Un alt atribut vizual este Frameborder. Cu acesta, puteți specifica dacă să desenați un cadru (chenar) între cadre sau nu. Frameborder poate avea doar două valori posibile - fie 0 (nu desenați un cadru), fie 1 (afișați un chenar). Valoarea implicită, desigur, este 1.

Există o subtilitate. Dacă doriți să eliminați chenarul vizibil, atunci va trebui să adăugați Frameborder=0 la toate etichetele Frame ale acelor cadre între care doriți să eliminați chenarele vizibile.

Ei bine, mai trebuie să luăm în considerare câteva atribute ale etichetei Frame - Marginwidth și Marginheight , care setează indentările în lățime (dreapta și stânga) și înălțimea (sus și jos) de la marginile ferestrei la conținutul încărcat în ea ( număr înseamnă numărul de pixeli de indentare):

De ce nu poți face un site pe cadre?

Să vedem care este dezavantajul fundamental al structurilor clasice, care în esență pune capăt utilizării lor la crearea unui site. Constă în faptul că este imposibil să-i urmărești starea folosind această structură de cadru.

Structurile complexe pot avea mii de stări diferite (variante de documente deschise în ferestre cadru diferite), dar adresa URL a acestei structuri nu se schimbă. Din această cauză, va fi imposibil să utilizați marcajele browserului sau să trimiteți link-uri către paginile care vă plac altor utilizatori. De ce?

Pentru că adresa rămâne aceeași, iar când o deschideți din marcajele browserului sau dintr-un e-mail, veți primi o pagină cu starea de început a structurii cadrelor, și nu starea pe care doriți să o salvați.

Deși, desigur, această problemă poate fi rezolvată, dar nu prin intermediul Html, ci cu ajutorul unui server (de exemplu, Php) sau al limbajelor de programare pe partea clientului (JavaScript), iar aceste soluții nu vor funcționa o sută. la sută. Astfel de soluții, de fapt, vă permit să adăugați date suplimentare despre starea sa actuală la adresa URL a structurii cadrului, dar acest lucru nu este ușor de făcut, iar fiabilitatea nu va fi absolută.

Acesta este primul dezavantaj al folosirii cadrelor pentru a crea site-uri web și este foarte semnificativ, dar există un alt dezavantaj uriaș. Motoarele de căutare, desigur, au învățat de mult să le indexeze și să extragă din ele adresele acelor documente care sunt încărcate în ferestrele lor. Problema este alta.

Când un utilizator trece de la rezultatele căutării Yandex sau Google pe site-ul dvs. construit pe baza unei structuri de cadru, se va deschide doar documentul care a fost încărcat într-unul dintre cadre, și nu întreaga structură. Înțelegi despre ce vorbesc?

Utilizatorul va vedea documentul și nu va vedea navigarea pe site-ul dvs., deoarece acesta va fi protejat în alte ferestre, iar acestea sunt încărcate doar ca parte a întregii structuri.

Ca rezultat, un site construit pe cadre devine pur și simplu inutilizabil. Deși, din nou, există soluții la această problemă bazate pe scripturi de server, atunci când o redirecționare va fi efectuată de la adresele documentelor individuale către o structură de cadru care se află în starea dorită, dar acest lucru este din nou foarte dificil și nu întotdeauna de încredere.

În general, concluzia poate fi făcută fără echivoc - nu trebuie să creați site-uri pe cadre. Dar, pe de altă parte, sunt folosite în mod constant pentru a crea ajutor pentru diverse aplicații și pot fi utile în altă parte.

De exemplu, am creat o structură de cadru, pe care am numit-o „Navigator” (acum am eliminat-o temporar) și care a devenit un fel de meniu extern extins pentru blogul meu, care, după părerea mea, ar trebui să simplifice lucrul cu resursa și, prin urmare, , îmbunătățiți-le pe cele care sunt acum „fără prostii” afectează foarte, foarte puternic promovarea site-ului.

Dar, totuși, pentru a evita orice probleme cu motoarele de căutare, am închis întreaga structură a cadrelor din ea și am adăugat, pentru orice eventualitate, metaeticheta Rodots la toate fișierele sale Html cu interdicția de indexare a acestora:

JOOMLA

Dar toate aceste restricții se aplică numai structurilor de pe etichetele Frame și Frameset, iar cadrele încorporate pe etichetele Iframe nu au dezavantaje vizibile și pot și chiar ar trebui să fie folosite în proiectele dvs., cel puțin pentru inserarea videoclipurilor de pe YouTube.

Multă baftă! Ne vedem curând pe site-ul paginilor blogului

S-ar putea să fiți interesat

Directivele de comentariu și Doctype în codul HTML, precum și conceptul de elemente bloc și inline (etichete)
Embed and object - Etichete HTML pentru afișarea conținutului media (video, flash, audio) pe paginile web
Img - Etichetă HTML pentru inserarea unei imagini (Src), alinierea și împachetarea acesteia cu text (alinierea), precum și setarea unui fundal (fundal)
Ce este limbajul de marcare hipertext HTML și cum să enumerați toate etichetele în validatorul W3C
Liste în cod HTML - etichete UL, OL, LI și DL
Font (față, dimensiune și culoare), etichete Blockquote și pre - formatarea textului învechită în pur HTML (fără a utiliza CSS)
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, rezultatele Yandex și alte programe

Deși site-urile cu cadre devin din ce în ce mai puțin obișnuite, învățarea HTML ar fi incompletă fără a privi subiectul cadrelor. În plus, cadrele, într-un fel, și-au ocupat nișa și sunt folosite pentru sisteme de administrare și ajutor. Acolo unde dezavantajele ramelor nu contează prea mult, dar avantajele, dimpotrivă, sunt în mod activ solicitate.

Pentru a crea un cadru, se folosește eticheta, care înlocuiește eticheta din document și este folosită pentru a împărți ecranul în regiuni. În cadrul acestei etichete sunt etichete care indică documentul HTML care urmează să fie încărcat în regiune (Figura 13.1).

Orez. 13.1. Un exemplu de împărțire a unei ferestre de browser în două cadre

Când utilizați cadre, sunt necesare cel puțin trei fișiere HTML: primul definește structura cadrului și împarte fereastra browserului în două părți, iar celelalte două documente sunt încărcate în ferestrele specificate. Numărul de cadre nu este neapărat egal cu două, poate fi mai mult, dar nu mai mic de două, altfel se pierde sensul utilizării cadrelor.

Luați în considerare pașii pentru crearea cadrelor pe baza paginii prezentate în Fig. 13.1. Avem nevoie de trei fișiere: index.html definește structura documentului, menu.html este încărcat în cadrul din stânga și content.html este încărcat în cadrul din dreapta. Dintre acestea, doar index.html diferă în structura codului său de alte fișiere (exemplul 13.1).

Exemplul 13.1. fișier index.html

Rame

În cazul utilizării cadrelor, în prima linie de cod este scris următorul tip de document.

Acest lucru îi spune browserului că are de-a face cu cadre, această linie de cod este necesară. Containerul conține informații generice, cum ar fi codificarea paginii și titlul documentului. Rețineți că titlul rămâne neschimbat în timp ce fișierele HTML sunt deschise în cadrul cadrelor.

În acest exemplu, fereastra browserului este împărțită în două coloane folosind atributul cols, coloana din stânga are 100 de pixeli și coloana din dreapta este spațiul rămas specificat de caracterul asterisc. Lățimea sau înălțimea cadrelor poate fi, de asemenea, setată ca procent, similar tabelelor.

Eticheta specifică numele fișierului HTML care este încărcat în zona specificată folosind atributul src. Fereastra din stânga va fi încărcată cu un fișier numit menu.html (Exemplu 13-2), iar fereastra din dreapta va fi încărcată cu conținut.html (Exemplu 13-3). Este de dorit să se acorde fiecărui cadru un nume unic, astfel încât documentele să poată fi încărcate în fereastra specificată folosind atributul name.

Exemplul 13.2. fișier menu.html

Navigare pe site

În acest exemplu, fundalul gri de pe pagină este setat folosind stiluri, care vor fi discutate mai târziu.

Exemplul 13.3. fișier content.html

Conținutul site-ului

CONŢINUT

Luați în considerare un exemplu mai complex cu trei cadre deja (Fig. 13.2).

Orez. 13.2. Împărțirea paginii în trei cadre

În acest caz, eticheta este folosită din nou, dar de două ori, cu o etichetă imbricată în cealaltă. Partiționarea orizontală este creată prin atributul rows, unde notația procentuală este utilizată pentru varietate (Exemplul 13-4).

Exemplul 13.4. trei cadre

Rame

După cum puteți vedea din acest exemplu, containerul cu atributul rows creează inițial două cadre orizontale, dar în locul celui de-al doilea cadru este înlocuit altul, care repetă structura pe care o cunoașteți deja din exemplul 13.1. Au fost adăugate atributele Scrolling="no" și noresize pentru a preveni apariția barei de defilare verticală și ca utilizatorul să nu poată schimba singur dimensiunea cadrului superior.

Ziua bună tuturor. Alexey Gulynin este în legătură. În ultimul articol, am discutat despre cum să instalați o favicon pe un site web. În acest articol, aș dori să vă spun ce cadre sunt în html. Tradus din engleză. cadru înseamnă „cadru”. Din punctul de vedere al html, un cadru este o anumită zonă selectată dintr-o pagină care face legătura cu o altă pagină și afișează conținutul acesteia (al acelei alte pagini sau site). Trebuie remarcat imediat că cadrele nu au primit prea multă dezvoltare și acum nu sunt folosite aproape niciodată, cu excepția unor proiecte specializate.Tot același lucru se poate face folosind CSS și Javascript.
Folosind un cadru, o pagină poate fi împărțită în mai multe blocuri, fiecare dintre acestea fiind independent de celelalte. Să creăm documentul principal index.html și două auxiliare (interne), al căror conținut va fi afișat pe pagina principală: menu.html (va conține marcajul de navigare a site-ului) și content.html (conținutul site-ului). Marcajul index.html va arăta astfel:

Cadre în HTML

Aș dori să vă atrag atenția asupra faptului că eticheta lipsește aici, în schimb eticheta a apărut. Această etichetă are mai multe atribute:

• cols - Acest atribut indică faptul că cadrele vor fi plasate în coloane. Valoarea acestui atribut specifică dimensiunile cadrelor separate prin virgule. În cazul nostru, vom avea 2 cadre. Lățimea primului va fi de 40% din lățimea paginii, * înseamnă restul spațiului paginii (în acest caz, ați putea scrie 60%). De asemenea, puteți seta dimensiunea în pixeli.
• rânduri - Acest atribut specifică că cadrele vor fi plasate în rânduri.

Conținutul fișierului menu.html arată astfel:

• 1 articol de meniu
• 2 element de meniu
• 3 element de meniu

Conținutul fișierului content.html arată astfel:

Cadre de testare

Paragraf de text

Pentru a afișa conținutul altui document, trebuie să utilizați o etichetă cu atributul src, a cărei valoare indică calea către fișier. De asemenea, puteți specifica url-ul site-ului pe care dorim să îl afișam în acest bloc. Mai întâi, să redăm paginile noastre menu.html și content.html:

Asigurați-vă că introduceți acest cod pentru a vedea cum funcționează totul.

Eticheta cadru are următoarele atribute:

• src - calea către pagină sau adresa URL a site-ului (pagina site-ului). Este de remarcat faptul că unele site-uri au protecție încorporată,
• nume - dă cadrului un nume cu care acest cadru poate fi controlat,
• noresize - interzice redimensionarea cadrului,
• defilare - capacitatea de a derula conținut.

Pentru teme, creați 2 rame și așezați-le pe rând. Specificați calea către site-uri ca valoare a atributului src.

Salutare tuturor. Există o etichetă interesantă în html, cu care poți introduce alta pe pagina ta web și va arăta ca și cum ar fi cusută în a ta. Acesta este un articol despre cum să încorporați în html iframe cu un exemplu.

Caracteristici iframe

Deci, cu ajutorul acestei etichete de pereche, puteți insera o pagină de pe orice site de pe Internet în articolul dvs. Să ne uităm la această bucată de cod:

După cum puteți vedea, toate opțiunile de lipire sunt setate în atributele etichetei. Despre primele două, cred că nu trebuie să explicați nimic - acestea sunt lățimea și înălțimea cadrului nostru, în care va fi localizată pagina dorită. Dimensiunile trebuie selectate în funcție de lățimea blocului de conținut.

Adresa paginii dorite este setată în atributul src. În ea trebuie să scrieți adresa completă a site-ului. Următorul atribut este numele cadrului. Aici puteți scrie o valoare arbitrară. În cele din urmă, defilarea este responsabilă pentru a face să apară barele de defilare, iar valoarea sa automată face ca derularea să apară numai atunci când este necesar. De asemenea, puteți seta valoarea la nu aici. În acest caz, barele de defilare nu vor apărea, dar apoi nu va fi posibilă derularea paginii - puteți vizualiza doar fragmentul acesteia, atâta timp cât înălțimea specificată este suficientă.

Restul parametrilor, dacă este necesar, îi puteți seta prin css. De exemplu, poate fi căptușeală sau un cadru.

Un exemplu de inserare a unui iframe în html

În exemplul de cod pe care l-am furnizat mai sus, trebuie doar să schimbați adresa paginii la propria dvs., precum și dimensiunile cadrului, dacă este necesar. Iată un exemplu:

Acum, în acest articol, a apărut un serviciu web în care puteți selecta culorile deplasând cursorul în jurul ecranului, iar atunci când dați clic, acestea sunt salvate. Folosesc foarte mult acest site util când experimentez crearea de meniuri, butoane și formulare frumoase.

Acesta este modul în care puteți introduce pur și simplu un alt site pe pagina dvs. Poate că în acest sens, veți avea multe idei proprii pentru a vă insera un iframe. Principalul lucru este că acum știi cum se face.