Exemple de cadre. Crearea cadrelor

În zorii creării site-ului web, resursele web foloseau pe scară largă cadrele pentru a afișa părți individuale ale paginilor. Dar odată cu apariția noii versiuni de HTML 5, totul s-a schimbat. Elemente de marcare<cadru>, <set de cadre> și<fără cadre> sunt considerate învechite. Au fost înlocuite cu o singură etichetă -<iframe>. Cum se adaugă la html

Î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.

Ziua bună tuturor! Andrei Bernatsky este cu tine.

Înainte de a trece direct la articol, aș dori să vă ofer un link către versiunea video a acestui subiect:

În acest episod vom vorbi despre cadre în HTML. Rameîn esență sunt foarte asemănătoare cu tabelele, dar spre deosebire de tabele, fiecare cadru este independent și fiecare dintre ele poate avea o pagină web separată cu propria sa adresă.

În figură vedem o structură a site-ului destul de comună. Poate fi prezentat sub forma unui tabel, sau toate acestea pot fi realizate folosind cadre. În cadrul de sus puteți încărca o pagină cu logo și meniu, în cadrul din stânga puteți încărca o pagină cu navigare pe site, în cadrul central va fi o pagină cu conținutul principal al site-ului, în cadrul din dreapta poate încărca o pagină cu bannere publicitare, iar în cadrul de jos puteți încărca o pagină cu informații de contact. Iată ce sunt cadrele pe scurt.

Acum să vedem cum se pot face toate acestea.

Particularitatea unui document care conține cadre este că nu conține un container CORP. În schimb, se folosește un recipient SET DE CADRU. Sintaxa generală pentru cadre este următoarea:

XHTML

… ….

Într-un recipient …. sunt localizate etichetele , care definesc conținutul cadrelor.

La etichetă sunt doi parametri:

rânduri = număr– numărul de linii (praguri orizontale).

cols = număr– numărul de coloane (praguri verticale).

În general, valorile parametrilor rânduri și cols sunt specificate nu tocmai prin numere, ci prin enumerarea numerelor separate prin virgule. Câte numere sunt, vor fi tot atâtea rânduri sau coloane, iar numerele determină dimensiunea cadrului. Principalul lucru este că suma acestor numere este egală cu întreaga lățime a ecranului.

Să ne uităm la asta cu un exemplu și totul va fi clar. Acum să creăm un document cadru ca acesta:

Codul care va defini această structură de cadru pentru noi va arăta astfel:

XHTML

Prima linie a codului de mai sus deschide containerul setului de cadre, parametrul cols indică faptul că vor exista trei cadre imbricate. Primul va avea o lățime de 30% din întreaga lățime a ecranului. Al treilea va avea, de asemenea, 30% din toată lățimea ecranului. Iar al doilea cadru va ocupa tot spațiul rămas. Simbol da "*" (asterisc) înseamnă că ocupă tot spațiul rămas pe ecran.

Apropo, să vedem cum pot fi setate cadrele în parametrii cols și rows:

Puteți seta dimensiunea prin simpla introducere a unui număr. Acest număr va determina dimensiunea cadrului în pixeli.

Puteți seta lățimea ca procent. În plus, dacă suma procentelor tuturor coloanelor depășește 100%, atunci toate cadrele vor fi reduse proporțional, astfel încât suma totală să fie egală cu 100%. Situația va fi similară: dacă suma procentelor tuturor coloanelor este mai mică de 100%, atunci toate cadrele vor crește proporțional, astfel încât suma totală să fie egală cu 100%.

Puteți seta dimensiunea cadrului cu un simbol “*” (stea). Aceasta înseamnă că cadrul trebuie să ocupe tot spațiul rămas. Dacă este specificat, de exemplu , adică două asteriscuri, atunci tot spațiul rămas va fi împărțit în mod egal între aceste două cadre (în acest caz, 40%).

Puteți combina opțiuni pentru setarea dimensiunilor cadrelor în HTML. De exemplu:

XHTML

Acest cod înseamnă că primul cadru va avea 70 de pixeli, al treilea va avea 40% din lățimea ecranului, iar al doilea va ocupa restul spațiului.

Ne-am dat seama complet de prima linie de cod. Daţi-i drumul.

Urmează etichetele . Deoarece sunt separate prin virgule în parametru cols etichetă set de cadre dacă sunt date trei numere (adică vor fi trei cadre), atunci etichete trebuie să fie și trei. Valoarea parametrului src este adresa paginii web care va fi încărcată în acest cadru. Adresa, după cum se vede din exemplu, poate fi absolută și relativă.

Și ultima linie închide containerul .

Dacă înlocuim parametrul cols cu rânduri în prima linie de cod, vom obține același document cadru, format din trei cadre. Doar împărțirea în cadre va fi verticală.

XHTML

Opțiuni rânduriȘi cols nu poate fi folosit simultan. Acest lucru duce la erori și la afișarea incorectă a conținutului.

Toată lumea are acum o întrebare despre cum să creeze o astfel de structură, despre care am vorbit chiar la începutul articolului. Vom reveni la asta puțin mai târziu, dar deocamdată să ne întoarcem la ceea ce se întâmplă în browserul nostru acum.

În browser vedem trei pagini, fiecare fiind în cadrul propriu.

În același timp, deplasând cursorul mouse-ului la marginile cadrelor, putem modifica dimensiunea cadrelor; barele de defilare și marginile dintre cadre sunt de asemenea vizibile. Acest lucru nu este întotdeauna necesar, de fapt nu este deloc necesar. Și toate acestea pot fi controlate datorită parametrilor etichetei cadruȘi set de cadre.

Opțiuni de etichetare cadruȘi set de cadre:

src="url"– parametrul necesar. Specifică adresa paginii care va fi afișată în cadrul cadrului. Folosit doar pentru cadru.

noresize– anulează capacitatea de redimensionare. Folosit doar pentru cadru.

scrolling="da/nu/automat"– determină prezența barelor de defilare. Valoarea da – indică prezența barelor de defilare. Valoarea no specifică că nu vor exista bare de defilare. Când este setat la automat, browserul însuși determină dacă vor exista bare de defilare. Folosit doar pentru cadru.

name="nume-cadru"– numele cadrului. Acest parametru este utilizat pentru interacțiunea dintre cadre. Vom vorbi mai multe despre asta puțin mai târziu. Folosit doar pentru cadru.

chenar=numar– grosimea chenarelor între rame. Dacă ia valoarea 0, atunci marginile dintre cadre nu sunt afișate. Folosit numai pentru setul de cadre.

framespacing="număr"– distanta dintre cadre. Folosit numai pentru setul de cadre.

Folosind acești parametri, puteți obține o pagină în care marginile dintre cadre nu sunt afișate, nu există nicio modalitate de a modifica dimensiunea cadrelor, iar derularea este interzisă pentru ultimele două cadre. Codul pentru o astfel de pagină arată astfel:

XHTML

Există alte câteva opțiuni, dar nu funcționează în mod clar, așa că cred că are sens să nu le menționăm în versiune.

Poate asta e tot cu parametrii. Ne-am uitat la un exemplu de utilizare a acestora.

Acum să creăm structura cadrului despre care am vorbit chiar la începutul lansării.

Pentru a face acest lucru, creăm o structură de trei cadre împărțite vertical.

XHTML

În consecință, în loc de etichetă , trebuie să introducem un alt recipient .. cu trei coloane și scrieți adresa paginii dvs. în fiecare. Vedeți, nimic complicat, folosim doar o etichetă introduceți noul recipient de care avem nevoie .. .

XHTML

După aceasta, introducem al treilea cadru cu informații de contact și închidem containerul principal

XHTML

Codul complet pentru această pagină este mai jos:

XHTML

Desigur, am luat adresele pentru cadre din numerele anterioare ale newsletter-ului și nu am văzut aici niciun meniu, logo, navigare etc. Dar avem structura de care aveam nevoie. Dar dacă creați paginile reale de care aveți nevoie, puteți obține o structură frumoasă.

Ce am primit până la urmă. Dacă acest lucru este convenabil sau incomod, depinde de dvs. să decideți, dar cu o structură de cadru, toate cadrele noastre rămân întotdeauna pe pagină. Indiferent de dimensiunea conținutului, vom vedea întotdeauna sigla și meniul site-ului, partea de jos a site-ului cu informații de contact, blocul de navigare și bannere. Aceasta este, în general, esența și sensul cadrelor.

Există posibilitatea interacțiunii între cadre. Puteți face astfel încât făcând clic pe un link dintr-un cadru, informațiile să apară în altul. Acum vom vedea cum se face acest lucru.

Să creăm un cadru ca acesta:

Link-urile noastre vor fi localizate în cadrul din stânga. Și în dreapta sunt paginile către care duc aceste link-uri.

Să creăm un cadru ca acesta:

XHTML

Multe site-uri web moderne au meniuri de navigare „lipicioase” care apar fie în bara laterală, fie în partea de sus, pe măsură ce derulați în sus și în jos pe pagină. Dar proprietățile CSS care vă permit să creați meniuri lipicioase nu sunt întotdeauna acceptate de browsere. Anterior, cadrele HTML erau folosite pentru a implementa funcționalități similare.

Diferența dintre Frames și Iframes

Când utilizați un set de cadre, împărțiți porțiunea vizibilă a ferestrei browserului în mai multe cadre. Fiecare cadru are propriul său conținut, care nu afectează conținutul următorului. Frame-urile și Iframes îndeplinesc o funcție similară - încorporează o resursă într-o pagină web, dar sunt fundamental diferite unele de altele:

• Cadrele sunt elementele care definesc aspectul;
• Iframe-urile sunt elemente care adaugă conținut.

Istoria și viitorul ramelor

W3C cadre depreciateîn HTML5. Motivul pentru această decizie a fost că cadrele HTML au un impact negativ asupra utilizabilității și accesibilității. Să vedem dacă aceste afirmații sunt justificate.

Probleme cu cadrele

• Probleme de utilizare: Odată cu creșterea popularității dispozitivelor mobile cu ecrane mici, este nevoie ca site-urile să ofere utilizatorilor mai multe vizualizări care se modifică în funcție de dimensiunea ferestrei de vizualizare. În timp ce cadrele pot fi manipulate pentru a oferi un grad de receptivitate, ele nu sunt foarte potrivite pentru crearea de site-uri web receptive;
• Accesibilitate: Cititoarele de ecran și alte tehnologii de asistență sunt destul de dificil de citit și de interacționat cu site-urile care folosesc cadre.

În prezent, există o tendință globală în dezvoltarea web de a separa conținutul unei pagini web de prezentarea acesteia:

• Conținutul trebuie adăugat și definit prin marcare, de exemplu prin HTML;
• Prezentarea este definită de limbaje precum CSS și JavaScript.

Utilizarea cadrelor implică inițial crearea unui aspect și a unei structuri specifice, în timp ce sarcinile de prezentare trebuie gestionate folosind CSS.

Viitorul cadrelor

Deși astăzi toate browserele moderne acceptă cadre, W3C a declarat clar care încadrează" nu ar trebui să fie folosit de dezvoltatorii web". Dacă aveți un site care utilizează cadre, ar trebui să luați în considerare trecerea la alte tehnologii. La un moment dat, browserele nu vor mai accepta cadre, iar atunci când se întâmplă acest lucru, site-urile care le folosesc vor deveni inutilizabile.

Cum să faci cadre în HTML

Cadrele nu ar trebui folosite la dezvoltarea site-urilor noi, dar pentru webmasteri care întrețin resurse vechi, știind cum să le folosească poate fi util.

Conceptul de bază al ramelor

Conceptul de bază al ramelor este destul de simplu:

• Utilizați elementul setului de cadre într-o locație specifică din element body într-un document HTML;
• Utilizați elementul cadru pentru a încadra conținutul paginii web;
• Utilizați atributul src pentru a identifica resursa care ar trebui să fie încărcată în cadrul cadrului;
• Creați un fișier de conținut separat pentru fiecare cadru HTML.

Să ne uităm la câteva exemple despre cum funcționează acest lucru. Mai întâi trebuie să creăm câteva documente HTML cu care vom lucra. Să creăm patru documente HTML diferite. Iată ce va conține primul:

Cadrul 1

Conținutul cadrului 1

Vom salva primul document ca frame_1.html. Celelalte trei documente vor avea un conținut similar și vor fi denumite în consecință.

Crearea coloanelor verticale

Pentru a crea un set de patru coloane verticale, trebuie să utilizați un element de set de cadre cu atributul cols. Atributul cols este folosit pentru a determina numărul și dimensiunea coloanelor pe care le va conține setul de cadre. În cazul nostru, avem patru fișiere de afișat. Prin urmare, avem nevoie de patru cadre.

Pentru a le crea, trebuie să setăm atributul cols la patru valori, separate prin virgulă. Pentru simplitate, vom atribui fiecărui cadre valoarea * , aceasta le va seta la o dimensiune care va umple automat tot spațiul disponibil. Iată cum va arăta marcajul nostru HTML:

Și iată cum va fi afișat acest marcaj:

Crearea de rânduri orizontale

Rândurile de cadru HTML pot fi create folosind atributul rows, mai degrabă decât atributul cols, ca în exemplul anterior:

Făcând această modificare, am făcut astfel încât cadrele să fie acum încărcate pe patru rânduri, unul peste altul:

Îmbinarea coloanelor și a rândurilor

Coloanele și rândurile de cadre pot fi afișate simultan pe aceeași pagină. Puteți cuibari un cadru în altul. Pentru a face acest lucru, mai întâi creăm un set de cadre și apoi imbricam setul de cadre copil în elementul părinte. Iată un exemplu despre cum puteți imbrica două rânduri într-un set de trei coloane:

set de cadre cols="*,*,*">

Exemplu de cadru HTML:

Iată cum vor apărea acum cadrele:

Acest cod creează un set de două coloane de dimensiuni egale. Apoi împărțim a doua coloană în două rânduri. Și, în cele din urmă, împărțim al doilea rând în două coloane. Iată cum va arăta:

Grila rezultată de rânduri și coloane va arăta astfel:

Cum să stilizezi ramele

Când vine vorba de stilarea unei pagini web care utilizează cadre în HTML, există două moduri de a atribui stiluri:

• Definirea stilurilor în cadrul fiecărui cadru;
• Definirea stilurilor pentru setul de cadre.

Reprezentarea fiecărui cadru trebuie definită în documentul sursă. Vizualizarea setului de cadre trebuie definită în documentul părinte care conține setul de cadre. Cu alte cuvinte, stilurile pentru frame_1.html trebuie stabilite de regulile CSS conținute în fișierul frame_1.html sau în foaia de stil asociată fișierului frame_1.html.

Definirea stilurilor de cadre în documentul sursă

Ca și în cazul oricărei pagini web, conținutul fiecărui cadru poate fi stilat folosind CSS. Pentru a stila conținutul fiecărui cadru, acesta trebuie adăugat la documentul principal, fie prin legarea la un fișier de stiluri extern, fie prin adăugarea de stiluri interne sau inline. Având în vedere că avem patru documente sursă, stilurile CSS trebuie aplicate fiecărui document separat.

Aplicând stiluri CSS unei pagini web care conține un set de cadre, nu vom putea aplica stiluri fiecărui cadru individual. Dacă vrem să stilăm frame_1.html, trebuie să adăugăm aceste stiluri direct în documentul în sine. Iată un exemplu despre cum se poate face acest lucru:

Cadrul 1

Conținutul cadrului 1

Dacă ne întoarcem la exemplul nostru anterior de creare a cadrelor în HTML cu patru coloane de dimensiuni egale și încărcăm setul de cadre după ce facem aceste modificări în fișierul frame_1.html, obținem acest lucru:

Definirea stilurilor și formatarea seturilor de cadre

Cum să influențezi prezentarea setului de cadre dincolo de definirea stilurilor documentelor în sine:

• Dimensiunea fiecărui cadru poate fi definită sau fixată;
• Spațiul dintre cadre poate fi schimbat;
• Formatul chenarului din jurul fiecărui cadru poate fi specificat.

Aceste modificări nu se fac prin CSS. Acestea se realizează prin adăugarea de atribute și valorile acestora la elementul cadru.

Dimensiunea cadrului

Dimensiunile cadrelor pot fi specificate în pixeli, procente sau cadrele pot ocupa automat tot spațiul disponibil. Pentru a specifica dimensiunea cadrului, introduceți valoarea dorită în atributul cols sau rows. În mod implicit, dacă un cadru nu are atributul noresize specificat, vizitatorii site-ului pot folosi mouse-ul pentru a trage chenarul dintre două cadre, redimensionându-le. Dacă nu se dorește acest lucru, elementului cadru i se poate aplica atributul noresize și nu va putea fi redimensionat. Să combinăm aceste două concepte în practică.

Vom crea următorul aspect:

• Un rând cu lățime completă în partea de sus a paginii;
• Trei coloane sub rândul de sus;
• Prima și a treia coloană sunt dimensionate pentru a crea bare laterale din stânga și din dreapta;
• Coloana din mijloc este dimensionată pentru a reprezenta o zonă de conținut mai mare.

Putem crea un cadru HTML folosind următorul cod:

Acest cod creează un set de cadre de două rânduri:

• Primul rând are 150 de pixeli înălțime. Atributul noresize specificat pentru primul cadru înseamnă că dimensiunea acestuia nu poate fi modificată;
• Stilurile pe care le-am aplicat mai devreme la frame_1.html sunt păstrate, dar afectează doar conținutul acelui cadru;
• Al doilea rând se extinde pentru a umple spațiul rămas;
• Al doilea set de cadre este imbricat în al doilea rând și conține trei coloane;
• Prima și a treia coloană umplu fiecare 20% din spațiul disponibil în fereastra browserului;
• A doua coloană se extinde pentru a umple spațiul rămas între prima și a treia coloană;
• Deoarece nu am specificat atributul noresize pentru coloane, acestea vor fi afișate inițial pe baza dimensiunilor specificate în cod.

Dar un vizitator al site-ului le va putea redimensiona manual.

Acest cod creează o pagină web care este redată astfel:

Formatarea chenarului și umplutura în jurul cadrului

Acum că am definit aspectul, dacă este nevoie, putem crește sau micșora umplutura dintre cadre, precum și să eliminam chenarul dintre ele. Folosind aspectul pe care l-am creat în pasul anterior, să eliminăm chenarele dintre cele trei coloane, dar să lăsăm chenarul dintre rândurile de sus și de jos. Să adăugăm, de asemenea, niște umplutură în jurul conținutului primului cadru HTML:

Atributul marginheight aplicat primului cadru adaugă 15 pixeli de marjă deasupra și sub conținutul încărcat în primul cadru. O valoare a marginii cadrului de 0 elimină chenarele pentru toate cele trei cadre de jos. Iată cum va arăta:

Specificarea cadrelor utilizând legături

Una dintre cele mai frecvente utilizări ale cadrelor este crearea unui meniu de navigare „lipicios” într-un cadru care este întotdeauna vizibil, indiferent de poziția conținutului altor cadre. Când sunt utilizate corect, linkurile din meniul de navigare fac ca resurse noi să fie încărcate în cadru, în timp ce restul cadrului rămâne static.

Puteți formata ancore pentru a viza anumite cadre, dând elementului cadru dorit un atribut de nume și folosind atributul țintă din interiorul elementului a pentru a încărca href în cadrul specificat. Dacă toate acestea sunt puțin confuze, să vă ghidăm prin procesul de creare a cadrelor în HTML pas cu pas.

În primul rând, trebuie să atribuim un nume cadrului în care ar trebui să se deschidă legăturile. În aspectul pe care l-am creat mai devreme, putem folosi coloana din stânga pentru meniul de navigare și coloana centrală ca cadru țintă. Pentru a face acest lucru, trebuie să atribuiți un atribut nume elementului țintă:

Acum că am setat name="mid_col" pentru coloana centrală, putem crea mai multe link-uri în documentul sursă al coloanei noastre din stânga frame_2.html:

Cadrul 2

Conținutul cadrului 2

• Încărcați frame_1.html
• Încărcați frame_2.html
• Încărcați frame_3.html
• Încărcați frame_4.html

Acum, când încărcăm pagina web, bara laterală din stânga va găzdui patru link-uri de navigare. Când se face clic pe link, conținutul fișierului este încărcat în cadrul coloanei din mijloc cu atributul name="mid_col" . Iată ce vom vedea când pagina se va încărca:

Furnizarea unei alternative fără cadre

În trecut, elementul noframes a fost folosit pentru a oferi o rezervă pentru browserele care nu acceptă cadre HTML. În prezent, toate browserele moderne acceptă cadre, dar practic nu sunt acceptate. Ca urmare, nu mai trebuie să creăm o rezervă fără cadre atunci când lucrăm cu cadre.

Cum să faci cadrele receptive

Când folosiți cadre, este destul de dificil să asigurați ușurința de utilizare pentru vizitatorii care accesează site-ul de pe smartphone-uri și tablete mici. Deoarece cadrele au fost complet eliminate din HTML5 și sunt considerate depreciate, este important ca proprietarii de site-uri construite folosind cadre să planifice să-și reconstruiască resursele și să migreze la alte tehnologii.

Folosind rânduri mai degrabă decât coloane

Dacă este posibil, organizați cadrele pe rânduri și nu pe coloane. Pe un ecran mic, este mult mai ușor să navighezi în conținut pe verticală decât pe orizontală. Cadrele HTML care sunt aranjate pe rând sunt mult mai ușor de vizualizat pe un ecran mic. Dacă reducem lățimea layout-urilor care conțin rânduri și coloane, simulând ecranul Apple iPhone 6, vedem că rândurile sunt mult mai ușor de vizualizat decât coloanele:

Utilizați procente pentru lățimile coloanelor

Când dimensiunile coloanelor sunt setate în procente și nu în pixeli, acestea se vor redimensiona automat în funcție de dimensiunea ecranului dispozitivului. Deși acest lucru poate crea unele probleme, deoarece unele cadre pot deveni prea mici, interacțiunea generală și experiența de vizualizare vor fi mai bune dacă lățimea totală a coloanelor este specificată în procente și nu în pixeli.

Cum să treceți de la cadre la alte tehnologii

Atât elementul setul de cadre, cât și elementul cadru au fost eliminate din cea mai recentă specificație HTML5. Proprietarii de site-uri construite folosind cadre trebuie să-și reconstruiască activele pentru a le elimina din aspect. La un moment dat, browserele nu vor mai accepta cadre. Astfel, abandonarea cadrelor nu este doar de dorit, ci trebuie făcută.

Evaluarea conținutului conținut în cadre

Primul pas pentru reproiectarea unui site care utilizează iframe HTML este identificarea motivelor pentru care sunt utilizate cadrele:

• Au fost folosite cadre pentru a crea un anumit aspect? Dacă da, CSS poate fi folosit pentru a crea un aspect similar;
• Au fost folosite cadre pentru a crea o anumită dimensiune a containerului publicitar? Există multe modalități de a recrea acest efect folosind CSS sau widget-uri concepute pentru a funcționa cu CMS;
• Au fost folosite cadre pentru a crea meniuri de navigare lipicioase? Din nou, același efect poate fi recreat folosind CSS;
• Au fost folosite cadre pentru a încărca conținut de pe un site extern? Dacă da, atunci elementul iframe, care face parte din HTML5, poate fi folosit pentru a încorpora conținut de pe un site extern.

În aproape toate cazurile, puteți utiliza CSS pentru a recrea un aspect proiectat folosind cadre, iar iframes pot fi folosite pentru a încorpora resurse externe.

Strategie pentru noul dvs. site web

Dacă site-ul dvs. a fost construit folosind cadre, există șanse mari ca acesta să fie deja foarte depășit. În loc să compilați pur și simplu tot conținutul site-ului dvs. într-un singur fișier HTML și să îl stilați cu CSS, poate că este timpul să vă gândiți la actualizarea la un sistem de management al conținutului.

Trecerea la un CMS va dura mai mult timp inițial, dar pe termen lung, beneficiile rulării unui site web modern vor depăși provocările pe termen scurt. Pentru a vă ajuta să vă decideți asupra unui sistem de management de conținut, vă recomandăm să acordați atenție celor mai populare trei:

• WordPress;
• Joomla! ;
• Drupal.

Resurse aditionale

Dacă doriți să aflați mai multe despre cadrele HTML, cea mai bună sursă pentru mai multe informații este World Wide Web Consortium ( W3C). Iată câteva dintre paginile cu informații despre cadre:

• Documentație HTML4 despre cadre;
• Funcții HTML5 depreciate

Articole înrudite