Cum se configurează smartphone-uri și PC-uri. Portal de informare
  • Acasă
  • Fier
  • Crearea unui cadru în exemple html. Iframe și Frame - ce sunt acestea și cum să folosiți cel mai bine cadrele în Html

Crearea unui cadru în exemple html. Iframe și Frame - ce sunt acestea și cum să folosiți cel mai bine cadrele în Html

Există o etichetă interesantă în html cu care poți introduce alta în pagina ta web și va arăta ca și cum ar fi fost cusută în a ta. Aceasta este o notă despre cum să inserați un iframe în html.

Inserarea unui iframe

Deci, folosind această etichetă asociată, 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, toți parametrii de inserare sunt setați în atributele etichetei. Cred că nu este nevoie să vă explic nimic despre primele două - aceasta este lățimea și înălțimea cadrului nostru în care va fi amplasată pagina dorită. Dimensiunile trebuie selectate în funcție de lățimea blocului de conținut.

Adresa pagina dorită specificat în atributul src. În el trebuie să scrieți adresa completă a site-ului/paginii web. Următorul atribut este numele cadrului. Puteți scrie o valoare arbitrară aici. În cele din urmă, defilarea este responsabilă pentru apariția barelor de defilare, iar valoarea sa de auto asigură că derularea va apărea 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 atunci nu veți putea derula pagina - veți putea vizualiza doar fragmentul acesteia, atâta timp cât înălțimea specificată este suficientă.

Dacă este necesar, puteți seta parametrii rămași prin css. De exemplu, aceasta ar putea fi o umplutură sau o chenar.

Cadrele sunt elemente HTML care vă permit să împărțiți o fereastră de browser web în mai multe ferestre independente, fiecare dintre acestea putând încărca un document HTML separat. Fiecare astfel de fereastră (cadru) poate avea propriile bare de defilare și poate funcționa independent de alte ferestre independente sau, dimpotrivă, poate controla conținutul acestora. Acestea pot fi folosite pentru a organiza un meniu care se află constant într-o fereastră, în timp ce informațiile în sine sunt situate într-o altă fereastră. Utilizatorii pot accesa meniul în orice moment și nu trebuie să se întoarcă la pagina anterioară pentru a selecta un alt element de meniu. Utilizarea cadrelor vă permite să „fixați” imagini sau alte elemente statice ale interfeței în fereastra browserului, în timp ce restul paginii derulează în cadrul.
Cu toate acestea, merită remarcat faptul că în zilele noastre cadrele sunt considerate un instrument învechit, iar site-urile cu cadre sunt acum considerate nedemne, deoarece webmasterii profesioniști nu folosesc niciodată cadre în proiectele lor. Există o serie de lucruri triste asociate cu cadrele. probleme cunoscute. De exemplu, sunt confuzi motoarele de căutare, deoarece paginile care conțin conținutul nu au link-uri către alte documente. Dacă doriți să obțineți vizitatori din motoarele de căutare, uitați de cadre. Este imposibil ca un utilizator să plaseze o pagină care îi place în secțiunea de marcaje a browserului, deoarece cadrele ascund adresa paginii pe care se află și arată întotdeauna doar adresa site-ului web. Din acest motiv, creează probleme browserelor la urmărirea istoricului și, de asemenea, nu sunt foarte potrivite pentru dimensiuni diferite ecrane și dispozitive mobile.
În ciuda faptului că proiectele cu rame se regăsesc în world wide web din ce în ce mai rar învăţarea HTML ar fi incompletă fără a discuta subiectul cadrelor. Ramele, împreună cu dezavantajele lor, au și unele avantaje care nu ne permit să respingem această tehnologie ca fiind nepromițătoare.

Crearea cadrelor

Structura unui document HTML cu cadre este foarte asemănătoare ca aspect cu formatul unui document HTML obișnuit. La fel ca într-un document HTML obișnuit, tot codul este plasat între pereche și etichete, iar anteturile sunt localizate în container. Principala diferență dintre un document cu cadre și un document HTML obișnuit este că un document cu cadre folosește o etichetă în loc de o etichetă. etichetă asociată(din setul de cadre englezesc - un set de cadre).
ÎN exemplul următor Structura unui document HTML cu cadre este prezentată:

Exemplu: Structura documentului HTML cu cadre
  • Încearcă singur »
frame_top
frame_left frame_right



Document cu rame

În exemplul de mai sus, pagina conține trei zone, fiecare dintre acestea fiind inițial încărcată cu documente HTML frame_top.html, frame_left.html și frame_right.html. Pe lângă documentele HTML, un cadru poate conține și elemente grafice. Pentru a face acest lucru, trebuie să specificați adresa imaginii corespunzătoare în atributul src, de exemplu src="image.gif". Rețineți că elementul este utilizat fără o etichetă de închidere.
Un container poate conține numai etichete sau alt set de cadre acoperite de și etichete.
Eticheta are următoarele atribute:

  • rânduri - descrie cum să împărțiți o pagină în rânduri:
  • cols - descrie cum să împărțiți o pagină în coloane:
Zonele rezultate din împărțirea acestei pagini vor fi cadre. Absența acestor atribute definește un singur cadru care va ocupa întreaga fereastră a browserului.

Valoarea atributelor rânduri și coloane trebuie să indice nu numărul de rânduri sau coloane, ci lățimea și înălțimea cadrelor. Toate valorile din listă sunt separate prin virgule. Dimensiunile pot fi specificate în unități absolute (pixeli) sau procente:

  • cols="20%, 80%" - fereastra browserului este împărțită în două coloane folosind atributul cols, coloana din stânga ocupă 20%, iar dreapta 80% din fereastra browserului.
  • rows="100, *" fereastra browserului este împărțită în două ferestre orizontale folosind atributul rows, fereastra de sus ocupă 100 de pixeli, iar cel de jos ocupă spațiul rămas specificat de simbolul asterisc.

După cum se vede din acest exemplu, un container cu atributul rows creează mai întâi două cadre orizontale, iar în locul celui de-al doilea cadru este înlocuit altul, care împarte cadrul orizontal inferior în două coloane folosind atributul cols, coloana din stânga ocupă 20%, iar cea din dreapta 80% din fereastra browserului.
Dacă browserul nu acceptă cadre, fereastra va afișa textul situat între etichete și. Orice lucru între etichete și este ignorat de browserele care acceptă cadre. Astfel, dezvoltatorul trebuie să scrie cod care să dubleze conținutul cadrelor prin alte mijloace și să plaseze acest cod într-un container, apoi toți utilizatorii vor putea vedea pagina sa web.
După cum sa menționat deja, pentru a insera un cadru separat într-un document, utilizați etichetă neîmperecheată. Atributul src specifică documentul care ar trebui să fie afișat în acest cadru, de exemplu: . Dacă atributul src lipsește, este afișat un cadru gol.

Chenarele sau spațiul dintre cadre

În mod implicit, browserul afișează o chenar linie gri, de obicei 3D, între cadre pe care vizitatorii o pot folosi pentru a ajusta dimensiunea cadrului.
Chenarul cadrului poate fi manipulat ca orice alt element cadru. Pentru a face acest lucru, există mai multe atribute ale elementelor care vă permit să personalizați chenarele cadrelor. Grosimea liniei de chenar este determinată de atributul de chenar. Valoarea implicită a grosimii marginii este cinci.
Pentru a ascunde chenarul cadrului, trebuie fie să specificați o valoare pentru lățimea chenarului egal cu zero, sau setați valoarea „nu” sau „0” la atributul frameborder. Atributul frameborder poate lua doar două valori opuse. Dacă valoarea atributului frameborder este „da” sau „1”, atunci chenarul cadrului va fi afișat, iar dacă „0” sau „nu”, atunci nu va fi afișat. Vă rugăm să rețineți că valorile atributelor frameborder diferă pentru browsere diferite. Pentru a rezolva această problemă, utilizați de două ori atributul frameborder, iar pentru unele browsere trebuie să adăugați și atributul framespacing cu valoarea „0”:

În exemplul următor, eliminăm chenarul dintre cadre:

Exemplu: eliminarea chenarului dintre cadre
  • Încearcă singur »
frame_left frame_right



Rame fără margini

Dacă eliminați chenarul dintre cadre, vizitatorii nu vor putea redimensiona cadrul în browser. De asemenea, puteți împiedica redimensionarea cadrului prin păstrarea chenarelor folosind atributul noresize:

Atributul bordercolor poate fi folosit pentru a schimba culoarea chenarului unui cadru, tot ce trebuie să faceți este să specificați un cod sau un nume de culoare rezervat.
Mai jos este un exemplu de pagină HTML care conține atributele de control al chenarului cadru descrise mai sus: culoarea chenarului este roșie, dimensiunea cadrului superior nu poate fi modificată:

Exemplu: Frame Border Control
  • Încearcă singur »
frame_top
frame_left frame_right



Gestionarea frontierei cadru

Dacă doriți să poziționați pagina afișată în interiorul cadrului mai aproape de marginile sale sau, dimpotrivă, să o îndepărtați mai departe, modificați atributele marginheight și marginwidth ale etichetei. Atributul marginheight specifică marja dintre conținutul cadrului și marginile sale de sus și de jos. Sintaxă:

Atributul marginwidth specifică marja dintre conținutul cadrului și marginile din dreapta și din stânga acestuia. Sintaxă:

Acest șir html, de exemplu, poziționează pagina afișată aproape de marginea cadrului:

Dacă pagina afișează o bară de defilare pe care nu o doriți, puteți rezolva această problemă specificând atributul scrolling ="no" în fișierul . Dar rețineți că dacă cadrul nu este suficient de mare pentru a afișa întregul conținut al paginii, atunci vizitatorul nu va avea cum să deruleze pagina afișată.

Legături în interiorul cadrelor

Urmărirea unui link într-un document HTML obișnuit se face după cum urmează: faceți clic pe link și documentul curent este înlocuit cu unul nou în fereastra curentă sau într-o nouă fereastră de browser. Când utilizați cadre, schema de încărcare a documentelor HTML diferă de cea obișnuită, iar principala diferență este capacitatea de a încărca un document HTML într-un cadru dintr-un alt cadru.
Pentru a încărca un document într-un cadru specific, utilizați atributul target al etichetei . Valoarea atributului target este numele cadrului în care va fi încărcat documentul specificat de atributul name al etichetei. De asemenea, merită remarcat faptul că numele cadrului trebuie să înceapă fie cu un număr, fie cu o literă latină. Următoarele nume sunt folosite ca nume rezervate:

Pentru link-urile externe, ar trebui să setați atributul target fie la _top, fie la _blank pentru a vă asigura că proiectele terță parte nu apar în cadrele dvs., ci mai degrabă umple toată fereastra browserului.

Următorul exemplu arată un document HTML în care cadrul din dreapta încarcă o pagină dintr-un link plasat în cadrul de sus. Link către documentul care se va deschide în cadrul din dreapta:

Google

Cadrul din dreapta primește un nume frame_right:

Pentru a încărca un document într-un cadru specificat, utilizați construcția target="frame_right", așa cum se arată în exemplu:

Exemplu: Link către un alt cadru
  • Încearcă singur »



Link către un alt cadru

Browserul dvs. nu afișează cadre

Rame plutitoare

Un element (o abreviere a termenului englezesc „cadru plutitor”) vă permite să încorporați un document HTML separat sau o altă resursă oriunde pe o pagină web. Conținutul unui cadru plutitor (încorporat) poate fi orice pagină HTML, fie din resursa dvs., fie de pe alt site web. După cum ați înțeles deja, cadrele plutitoare sunt create folosind elementul care, spre deosebire de etichetă, este inserat nu între etichetele și, ci între etichetele și.
Elementul poate folosi aceleași atribute ca și un cadru, cu excepția atributului noresize - spre deosebire de cadrele obișnuite, cadrele inline nu pot fi redimensionate pe ecran:

Descrierea atributului
srcfolosit pentru a specifica adresa URL a paginii care va fi afișată în cadru
înălţimesetează înălțimea ferestrei cadru plutitor în pixeli sau %
lăţimesetează lățimea ferestrei cadru plutitor în pixeli sau %
numenumele cadrului prin care poate fi accesat în link-uri
chenarul cadrusetează chenarul pentru cadre, poate lua valori 1 (există o chenar) sau 0 (fără chenar) (nu este acceptat în HTML5)
lățimea marginiiumplutură la stânga și la dreapta de la conținut la chenarul cadrului (nu este acceptat în HTML5)
înălțimea marginiiumplutură în partea de sus și de jos de la conținut până la chenarul cadrului (Nu este acceptat în HTML5)
defilaredetermină tipul de scrollbars pe cadru și ia valorile da (există bare), nu (fără bare) și auto (barele apar dacă este necesar) (Nu este acceptat în HTML5)
ecran complet permisPermite cadrului să intre în modul ecran complet
hspaceMarja orizontală de la cadru la conținutul înconjurător
vspacespațiu vertical de la cadru la conținutul înconjurător
aliniadefinește alinierea cadrului

În exemplul următor, dimensiunile cadrului plutitor sunt specificate în pixeli, dar le puteți specifica și în %:

Exemplu structura cadrului

Fereastra browserului poate fi împărțită în cadre, de ex. în zone situate una lângă alta. Puteți încărca propriile pagini HTML în fiecare dintre aceste zone. Va fi mai clar cu un exemplu, creați fișier nou numit index.html cu următorul cod:

Cadre în html


În fereastra browserului va arăta astfel:

Fereastra browserului este împărțită în 3 părți. Trebuie să spun că acesta este singurul caz în care nu există etichete într-un document html . Etichetele sunt folosite în schimb , care îi spun browserului să împartă fereastra în mai multe zone - cadre.

Câte astfel de zone vor exista și cum vor fi amplasate depind de doi parametri de etichetă :

  • rânduri- specifică împărțirea ferestrei în zone orizontale. Mai mult, numărul de valori pe care le are acest parametru, numărul de zone. În exemplul nostru rows="30%, 10%, 60%", adică trei zone orizontale: lățimea primei este de 30% din lățimea ecranului, lățimea celei de-a doua este de 10% și a treia este de 60%.
  • cols- specifică împărțirea ferestrei în zone verticale.
Etichetele din interior sunt localizate etichete unice și ar trebui să existe tot atâtea câte zone specificate. Fără parametri, aceste etichete sunt inutile.

Ne vom uita la parametrii etichetei cu exemple.

Așa că ne-am uitat la toți parametrii etichetei .

Atingerea finală: îndepărtați ramele. Pentru a face acest lucru în etichetă hai sa adaugam doi parametri border="0" frameborder="0".

Cadre în html


Acum pagina noastră arată astfel:

Avantaje și dezavantaje ale ramelor

Acum că înțelegeți cadrele, este timpul să vorbiți despre avantajele și dezavantajele site-urilor web încadrate.

Un avantaj incontestabil este reducerea cantității de informații descărcate pe computerul utilizatorului. La urma urmei, antetul și meniul site-ului sunt încărcate o singură dată, apoi doar conținutul se modifică. Desigur, acest lucru reduce timpul de încărcare.

Dar mai sunt multe neajunsuri. În primul rând, este ușor să fii confuz în structura cadrelor.

În al doilea rând, meniul nostru este inclus dosar separat. Aceasta înseamnă că dacă utilizatorul a găsit, de exemplu, pagina ta content.html prin motor de căutare, atunci va putea doar să o citească, pentru că nu există link-uri sau elemente de meniu pe această pagină.

În cele din urmă, nu toate browserele acceptă structura de cadre. Prin urmare, etichetele existente , sunt situate în interiorul etichetelor și să conțină informații alternative pentru browserele care nu acceptă cadre. În esență, va trebui să faci muncă dublăși creați două versiuni ale site-ului: cu și fără cadre.

De aici concluzia - nu utilizați cadre decât dacă este absolut necesar.

Exemple de structuri de cadru

După cum vă amintiți, doi parametri sunt responsabili pentru împărțirea în cadre: rânduriŞi cols. Combinându-le, puteți împărți fereastra în rame în orice fel. Vom lua în considerare exemple de astfel de partiționare.

Exemplul 1:

Cadre în html


Obținem trei cadre verticale. Lățimea primului este de 150 de pixeli, a doua este de 300, iar a treia este restul spațiului ferestrei.

Rezultat:

Exemplul 2:

Cadre în html


Obținem două rame verticale. Lățimea primului este considerată egală cu unu, iar a doua este considerată ca fiind de două ori mai lată decât prima (adică 33% și 67% din lățimea ferestrei).

Rezultat:

Exemplul 3:

Cadre în html


Obținem două cadre orizontale. Înălțimea primului este de 100 de pixeli, iar a doua este restul spațiului.
Vom împărți al doilea cadru orizontal în două verticale: unul are 200 de pixeli lățime, iar al doilea va ocupa restul spațiului. Acest lucru se realizează folosind etichete imbricate .

La începutul construcției site-ului web, resursele web foloseau pe scară largă cadre pentru afișare piese individuale pagini. Dar odată cu venirea unuia nou versiuni HTML 5 totul s-a schimbat. Elemente de marcare și sunt depreciate. Au fost înlocuite cu o singură etichetă - . Cum se adaugă la html? Exemplul de mai jos va fi clar chiar și pentru un începător în programare.

Ce sunt cadrele?

Cadrul este baza majorității primelor pagini web. Dacă este tradus literal, cuvânt datînseamnă „cadru”, adică un cadru reprezintă o mică parte a unei pagini dintr-un browser. Utilizare pe scară largă cadrele din trecut pot fi explicate calitate scăzutăși costul ridicat al traficului de internet. De regulă, site-ul a fost împărțit în 3-5 părți, fiecare dintre acestea având un scop specific:

  • „header” (cadru de sus de-a lungul lățimii paginii) - afișează numele resursei;
  • „sticlă” stânga/dreapta - afișaj meniu;
  • Cadrul central este o afișare a conținutului site-ului.

Împărțirea paginii în părți a făcut posibilă supraîncărcarea doar a unei anumite părți la actualizarea acesteia. De exemplu, utilizatorul a făcut clic pe un element de meniu și conținut nou a fost descărcat în cadrul central.

Cadre moderne în HTML 5

De ce este necesar în HTML? Un exemplu este inserarea de conținut dintr-o resursă terță parte. Situația clasică este atunci când un dezvoltator web dorește să arate locația unui obiect pe o hartă. Ce ar trebuii să fac? Desenați un plan de site de la zero? Nu - există o soluție mai simplă: încorporați un element în pagină Harta Google, Yandex Maps sau 2GIS. Problema este rezolvată în patru pași.

  • Trebuie să accesați site-ul web al oricărui serviciu de cartografiere.
  • Găsiți obiectul dorit. știind adresa exacta, îl puteți introduce în caseta de căutare.
  • Folosind butonul „Salvați și obțineți codul” (pentru Yandex.Maps) sau „Terminat” (pentru Google Maps) obține codul de încorporare.
  • Tot ce rămâne este să introduceți etichetele de marcare generate pe pagină.
  • În plus, puteți selecta dimensiunea hărții și puteți configura alte opțiuni de afișare.

    Cum altfel îl poți folosi în HTML?? Un exemplu este inserarea materialelor video din resursa Youtube. Tehnologiile multimedia atrag utilizatorii de internet, motiv pentru care conținutul video este atât de popular. Dezvoltatorul se va ocupa rapid de instalarea videoclipului.

  • Ar trebui să fie încărcat pe Youtube propriul videoclip sau găsi dosar terț pentru difuzare.
  • Obțineți eticheta selectând butonul „Cod HTML”.
  • Pasul final este să lipiți în . Un exemplu de conținutul etichetei rezultat va fi discutat mai jos.
  • Ambele exemple au folosit generarea automată a codului, dar dezvoltatori profesionisti trebuie să-l compună singuri. În primul rând, acest lucru le va permite să înțeleagă aspectul paginii și, dacă este necesar, să o modifice. În al doilea rând, marcarea elementelor site-ului (chiar dacă acestea aparțin resursă externă), se formează fără participarea webmasterului. Aici intră în joc calificările înalte ale dezvoltatorului.

    Sintaxă

    Deci, înainte de a începe să așezați pagina, trebuie să luați în considerare eticheta iframe (html): ce este și cum să o utilizați corect.

    În primul rând, trebuie remarcat faptul că eticheta este asociată. Între elementele de deschidere și de închidere se indică conținutul care va fi afișat în browserele care nu acceptă acest element marcajele. Principalele atribute ale etichetei:

    • latime(latime);
    • înălțime (înălțime);
    • src (adresa resursei descărcate);
    • alinierea (metoda de aliniere);
    • chenar cadru;
    • ecran complet permis.

    Astfel, codul pentru . Exemplul HTML este demonstrat în întregime mai jos:

    În marcajul de mai sus, este suficient să înlocuiți adresa site-ului cu oricare alta și, dacă este necesar, să ajustați dimensiunea cadrului.

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

  • Cuprins. Dacă puneți un cuprins într-o coloană verticală pe o pagină Web, utilizatorul se poate referi la el în orice moment, fără a fi nevoie să faceți clic constant pe butonul înapoi. 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 articol și să obțină imediat informațiile de care are nevoie.
  • Elemente de interfață fixe. Puteți îngheța o imagine 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.

    Rame obișnuite pe în acest moment sunt considerate tehnologie învechităși nu sunt acceptate în HTML5.

    Nu folosi rame obișnuite în proiectele tale! În HTML5, etichetele frame, frameset și noframes pur și simplu nu mai există, este furnizată o singură etichetă iframe (inline sau floating frame).

    Etichetă

    Etichetă - înlocuiește eticheta și este folosită pentru a împărți ecranul. Are o etichetă de închidere.
  • COLS. Împarte ecranul pe verticală. Acceptă valori în pixeli, procente sau doar *. Valoarea * indică faptul că coloana anume va ocupa restul ecranului
  • RÂNDURI. Împarte ecranul pe orizontală. Acceptă valori în pixeli, procente sau doar *. Valoarea * indică faptul că o anumită linie va ocupa restul ecranului
  • BORDA CADRU. Determină prezența cadrelor, i.e. limitele cadrului. Acceptă valorile „da” sau „nu”.
  • FRONTIERĂ. Specifică lățimea cadrului în pixeli.
  • BORDERCOLOR. Definește culoarea cadrelor. Implicit (dacă se utilizează standard schema de culori sisteme Windows) marginile cadrului sunt slabe, nuanta 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, veți avea nevoie de containere imbricate....

    Exemplu






    Rezultat:

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

    Nu folosi rame obișnuite în proiectele tale! În HTML5, etichetele frame, frameset și noframes pur și simplu nu mai există, este furnizată o singură etichetă iframe (inline sau floating frame).

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

    Etichetă - înlocuiește eticheta și este folosită pentru a împărți ecranul. Are o etichetă de închidere.
  • SRC. Definește adresa URL asociată unui anumit cadru.
  • MARGINWITH. Specifică distanța dintre conținutul cadrului și marginile acestuia din stânga și din dreapta.
  • MARGINHEIGHT. Specifică distanța dintre conținutul cadrului și marginile sale de sus și de jos.
  • DEfilare. Stabilește dacă o bară de defilare este prezentă într-o fereastră cadru. Poate lua valori „da”, „nu” și „auto” (implicit).
  • NORESIZE. Definește limitele cadrului ca fiind „fixe” și împiedică utilizatorul să redimensioneze fereastra cadrului. Mai mult, se înregistrează dimensiunile tuturor cadrelor care au o margine comună cu cea fixă.
  • CADRU, BORDER, BORDERCOLOR. Aceste atribute sunt asociate cu cadre și sunt similare cu cele din .
  • NUME. Specifică numele ferestrei cadru. Singurul atribut care nu afectează aspect cadru. Vă permite să controlați procesul de încărcare a cadrului. Dacă o fereastră cadru are un nume unic, aceasta poate fi accesată direct din alte cadre. La denumirea ferestrelor cadru, există o limitare de reținut: numele nu trebuie să înceapă cu un caracter de subliniere „_”, altfel va fi ignorat. Deoarece unele nume de servicii încep cu acest caracter. Exemplu




    Folosind eticheta A pentru a încărca în cadrul Atribute
  • HREF. Specifică adresa URL sau numele noului document pe care doriți să îl încărcați într-o anumită fereastră cadru.
  • ŢINTĂ. Specifică numele cadrului în care va fi încărcat noul document. Acest nume trebuie dat cadrului Atributul NAMEîn etichetă.

    Următorul exemplu împarte ecranul în două zone verticale. Partea stângă mai mică conține cuprinsul, iar 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
      • Cosmetice
      • Suplimente nutritive
      • Parfumerie
    • Servicii
      • Masaj
      • Manichiură
    Buna ziua! Etichetă

    Eticheta vă va scuti de a fi necesar să repetați atributul TARGET pe fiecare hyperlink dacă toate indică aceeași fereastră cadru. Pentru a face acest lucru, trebuie să plasați o etichetă cu Atributul TARGET in container...

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

    Exemplu de conținut
    • Bunuri
      • Cosmetice
      • Suplimente nutritive
      • Parfumerie
    • Servicii
      • Masaj
      • Manichiură

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

    Exemplu de conținut
    • Bunuri
      • Cosmetice
      • Suplimente nutritive
      • Parfumerie
    • Servicii
      • Masaj
      • Manichiură
    Iată mărfurile!

    Iată serviciile!

  • Efecte speciale obținute folosind atributul TARGET
  • După cum sa menționat deja, numele cadrelor nu pot începe cu un caracter de subliniere, deoarece încep nume de servicii care transmit informații speciale către browser. Mai jos sunt enumerate 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="_parent” . Documentul este încărcat în cadrul părinte. De obicei, acesta este un cadru care stă într-un 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). Folosind eticheta, puteți plasa un singur cadru într-un document HTML obișnuit. Mai mult, un container... nu este nevoie aici.
  • Eticheta de închidere este necesară!
  • Î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 în partea de sus și de jos a iframe-ului
  • hspace. Setează marginile pe părțile laterale din afara cadrului iframe
  • lățimea marginii. Determină cantitatea de umplutură de-a lungul marginilor din stânga și din dreapta din interiorul iframe-ului; trebuie să fie egal sau mai mare decât 1.
  • înălțimea marginii. Determină 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 va fi afișată în iframe; valoarea poate fi „da”, „nu” sau „auto”. Valoarea implicită pentru documentele obișnuite este automat.
  • titlu. Text indicativ.

    Etichetă

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

    Browserul dvs. nu acceptă cadre flotante!

    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 în variabilă și apoi să specificați „javascript:parent.".

    numele variabilei

    var varFrame = "Cod HTML";

    ...

    Problemă cu bara de adrese cu o structură a site-ului cadru

    ...

    Când se utilizează cadre, un site folosește o pagină care indică locația cadrelor. Iată un exemplu de astfel de pagină: După încărcarea acestei pagini, informațiile sunt încărcate în cadre. Toate tranzițiile utilizatorilor pe paginile site-ului au loc în aceste cadre. ÎN bara de adrese numai calea către este întotdeauna afișată

    pagina de start , care nu se modifică în timpul tranzițiilor. Vizitatorul nu știe unde se află momentan. Dacă vizitatorul greșește imediat pagina de start site-ul (de exemplu, dintr-un motor de căutare), atunci acest lucru nu duce la reconstrucție structura generala rame. Acesta este motivul pentru care proprietarul site-ului nu poate furniza adresa

    pagina interioara

    site-ul. Există mai multe soluții la această problemă Anterior, a fost luat în considerare un exemplu de structură de cadru. Vom lua în considerare

    diverse moduri

    soluția la această problemă este pe ea.

  • Ideea este următoarea: la încărcarea unei pagini care conține o parte informativă, vom verifica mediul paginii și, dacă lipsește structura de cadru necesară, o vom crea folosind un script.
  • Sunt posibile trei cazuri:
  • vizitatorul a vizitat o pagină care conține o structură de cadru;
  • În primul caz, nu este necesară nicio acțiune după finalizarea verificării. Al doilea și al treilea sunt aproape identice, așa că în continuare vom lua în considerare doar al doilea caz.

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

    Soluția poate fi implementată atât pe partea client, cât și pe partea serverului. Principalul dezavantaj al implementării pe partea clientului este evident - dependența de capabilitățile și setările clientului. De exemplu, rularea scripturilor pe computerul utilizatorului este interzisă. A doua opțiune nu va funcționa dacă serverul nu acceptă PHP.

    Soluție JavaScript.

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

    În primul rând, verificăm mediul paginii, iar apoi, dacă structura de cadru necesară nu există, o 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.

    Conectă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ă structura cadrului dispare.

    Soluție PHP

    Cu această abordare, site-ul va deveni accesibil Mai mult vizitatori.

    Vom verifica mediul paginii diferit (nu la fel 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 este responsabil pentru 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 în acest caz,, ca și în cazul implementării din partea clientului, nu este nevoie să creați separat un document HTML care să descrie structura cadrului.


    .

    Cele mai bune articole pe această temă