Primul cadru. Crearea cadrelor

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 se 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. Cadrele au o serie de probleme notorii. Ele încurcă motoarele de căutare, de exemplu, pentru că paginile care conțin conținutul nu au legătură cu 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 pentru browsere atunci când urmăresc istoricul și, de asemenea, nu sunt foarte adaptabile la diferite dimensiuni de ecran și dispozitive mobile.
În ciuda faptului că proiectele cu cadre devin din ce în ce mai rare pe World Wide Web, învățarea HTML ar fi incompletă fără a lua în considerare 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. Ca într-un document HTML obișnuit, tot codul este plasat între etichetele împerecheate Și , și în recipient sunt localizate anteturile. Principala diferență dintre un document cu cadre și un document HTML obișnuit este că un document cu cadre în loc de o etichetă eticheta asociată este aplicată (din setul de cadre englezesc - un set de cadre).
Următorul exemplu arată structura unui document HTML cu cadre:

Exemplu: Structura documentului HTML cu cadre

• Incearca-l tu insuti "

frame_top
frame_left	frame_right

Î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 atribut src, De exemplu src="image.gif". Vă rugăm să rețineți că elementul folosit fără etichetă de închidere.
În interiorul recipientului poate conține doar etichete sau alt set de rame acoperite de etichete Și .
Etichetă are urmatoarele atribute:

• rânduri— descrie cum să împărțiți o pagină în rânduri:
• cols— descrie modul în care o pagină este împărțită î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.

În sensul atributelor rânduriȘi cols Este necesar să indicați 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 cea din dreapta 80% din fereastra browserului.
• rows="100, *" Fereastra browserului este împărțită în două ferestre orizontale folosind atributul rânduri, fereastra de sus ocupă 100 de pixeli, iar fereastra de jos ocupă spațiul rămas specificat de simbolul asterisc.

După cum se poate vedea din acest exemplu, containerul cu atribut rânduri mai întâi creează două cadre orizontale și înlocuiește al doilea cadru cu altul care împarte cadrul orizontal de jos î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 </b>Și <b> . Totul dintre etichete </b>Și <b> , este ignorat de browserele care acceptă cadre. Astfel, dezvoltatorul trebuie să scrie cod care dublează conținutul cadrelor prin alte mijloace și să plaseze acest cod în container </b>, atunci toți utilizatorii vor putea vedea pagina sa web. <br>După cum sa menționat deja, o etichetă neîmperecheată este utilizată pentru a insera un cadru separat într-un document <b><frame> </b>. Atribut <b>src</b> specifică documentul care ar trebui să fie afișat în cadrul acestui cadru, de exemplu: <frame src="frame_top.html">. Dacă atributul <b>src</b> lipsește, este afișat un cadru gol.</p> <h2>Chenarele sau spațiul dintre cadre</h2> <p>În mod implicit, browserul afișează o linie gri, de obicei 3D, între cadre, pe care vizitatorii o pot folosi pentru a ajusta dimensiunea cadrului. <br>Chenarul cadrului poate fi manipulat ca orice alt element cadru. Există mai multe atribute ale elementelor pentru aceasta <b><frameset> </b>, permițându-vă să personalizați chenarele cadrelor. Grosimea liniei de frontieră este determinată de atribut <b>frontieră</b>. Valoarea implicită a grosimii marginii este cinci. <br>Pentru a ascunde chenarul unui cadru, trebuie fie să setați valoarea lățimii marginii la zero, fie să setați valoarea „nu” sau „0” pentru atribut <b>chenarul cadru</b>. Atribut <b>chenarul cadru</b> nu poate lua decât două sensuri opuse. Dacă valoarea atributului <b>chenarul cadru</b> este egal cu „da” sau „1”, atunci va fi afișat chenarul cadrului, iar dacă „0” sau „nu”, atunci nu. Vă rugăm să rețineți că valorile atributelor <b>chenarul cadru</b> variază pentru diferite browsere. Pentru a rezolva această problemă, utilizați atributul de două ori <b>chenarul cadru</b>, iar pentru unele browsere trebuie să adăugați și atributul <b>spațierea cadrelor</b> cu valoarea "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>În exemplul următor, eliminăm chenarul dintre cadre:</p> <h3>Exemplu: eliminarea chenarului dintre cadre</h3> <ul><li>Incearca-l tu insuti "</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Rame fără margini</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>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 <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Folosind atributul <b>culoarea chenarului</b> Puteți schimba culoarea chenarului cadrului, trebuie doar să specificați codul sau numele de culoare rezervată corespunzător. <br>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ă:</p> <h3>Exemplu: Frame Border Control</h3> <ul><li>Incearca-l tu insuti "</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Gestionarea frontierei cadru</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Dacă doriți să poziționați pagina afișată în cadrul cadrului mai aproape de marginile sale sau, dimpotrivă, să o îndepărtați mai departe, modificați atributele <b>înălțimea marginii</b>Și <b>lățimea marginii</b> etichetă <b><frame> </b>. Atribut <b>înălțimea marginii</b> definește umplutura dintre conținutul cadrului și marginile sale de sus și de jos. Sintaxă:</p><p> <frame marginheight="число"> </p><p>Atribut <b>lățimea marginii</b> definește umplutura dintre conținutul cadrului și marginile din dreapta și din stânga acestuia. Sintaxă:</p><p> <frame marginwidth="число"> </p><p>Această linie html, de exemplu, poziționează pagina afișată aproape de marginea cadrului:</p> <p>Dacă pagina afișează o bară de derulare pe care nu o doriți, puteți rezolva problema specificând atributul <b>defilare</b>="nu" în etichetă <b><frame> </b>. 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ă.</p> <h2>Legături în interiorul cadrelor</h2> <p>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. <br>Pentru a încărca un document într-un anumit cadru, utilizați atributul <b>ţintă</b> etichetă <b><a> </b>. Ca valoare de atribut <b>ţintă</b> se folosește numele cadrului în care va fi încărcat documentul specificat de atribut <b>Nume</b> etichetă <b><frame> </b>. 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:</p> <p>Pentru linkurile externe, ar trebui să setați atributul target fie la _top, fie la _blank pentru a vă asigura că proiectele de la terți nu apar în cadrele dvs., ci mai degrabă umple toată fereastra browserului.</p> <p>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:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Cadrul din dreapta primește un nume <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Pentru a încărca un document într-un cadru specificat, utilizați construcția <i>target="frame_right"</i>, așa cum se arată în exemplu:</p> <h3>Exemplu: Link către un alt cadru</h3> <ul><li>Incearca-l tu insuti "</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Link către un alt cadru</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Browserul dvs. nu afișează cadre</p>

Rame plutitoare

Element

Exemplu de structură a 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 un 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%, iar 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 într-un fișier separat. Aceasta înseamnă că dacă un utilizator a găsit, de exemplu, pagina ta content.html printr-un motor de căutare, atunci o va putea citi doar, deoarece 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ă dublezi munca și să creezi 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 .

O fereastră de browser poate fi împărțită în părți numite cadre, uneori cadre; Le poți numi și praguri. În fiecare astfel de parte a ferestrei browserului, de ex. cadru, poate fi încărcat un document HTML separat. Să ne uităm la un exemplu de fereastră de browser cu trei cadre.

În acest caz, pentru claritate, fiecare cadru este încărcat cu un document HTML simplu care indică numărul cadrului și numele fișierului care stochează conținutul acestuia. Dacă în cadru este încărcat un document real, care nu se încadrează complet în el, atunci cadrul (atenție, nu toată fereastra!) va avea bare de defilare verticale și/sau orizontale în funcție de faptul că conținutul nu se potrivește orizontal și/ sau pe verticală document.
De exemplu, designul și structura site-ului dvs. sunt astfel încât să apară aceleași elemente repetate pe fiecare pagină a site-ului: titlul, meniul de navigare, adresa de la sfârșitul paginii sau alte elemente similare. Se modifică doar conținutul secțiunilor. Apoi paginile pot fi împărțite în părți, astfel încât părțile neschimbabile să fie plasate în cadre separate, iar un alt cadru poate fi alocat astfel încât conținutul secțiunii dorite să fie încărcat în el după ce faceți clic pe linkul corespunzător, de exemplu, dintr-un meniu .
Acest lucru economisește viteza de încărcare, deoarece părți identice ale paginilor site-ului nu sunt reîncărcate, ci sunt pur și simplu afișate tot timpul în cadrele alocate acestora.

Crearea unui element de structură cadru FRAMESET

Structura aspectului ferestrei este stocată într-un document HTML separat, care se numește document încadrat. Structura cadrului este formată folosind un element special FRAMESET. Un document obișnuit are o secțiune HEAD și o secțiune BODY, în timp ce într-un document cu cadre, secțiunea BODY este înlocuită cu o descriere a structurii cadrelor, adică. secțiunea FRAMESET.
Un element NOFRAME poate fi adăugat la secțiunea FRAMESET cu conținut alternativ pentru afișare în browsere care nu acceptă cadre sau în browsere care nu acceptă cadre. Astfel de browsere pur și simplu nu vor înțelege structurile FRAMESET și NOFRAME, dar vor afișa textul plasat în interiorul lor.