cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 9
Folosirea cadrelor intr-o pagina web
56854 afisari
In aceasta lectie vom invata cum putem folosi cadrele in paginile noastre web. Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone, iar apoi putem stabili ce pagina va fi afisata in fiecare zona.

Pentru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul , tag-ul <FRAMESET> insotit de unul dintre atributele <COLS> sau <ROWS>, pentru a defini exact cum va fi impartita pagina respectiva.

Astfel pentru a imparti pagina in doua cadre orizontale vom folosi urmatoarea linie de cod:
<FRAMESET ROWS="70%,*">

Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma cadrele. In exemplul de mai sus, primul cadrul va avea 70% din inaltimea paginii, iar al doilea cadru restul, adica "*" sau 30%.

Alaturi de tag-ul <FRAMESET> se mai folosesc si atributele <FRAMESPACING>, pentru marimea spatiilor dintre cadre si <FRAMEBORDER>, care se refera la cadrele definite, daca au sau nu chenar, valorile sale fiind "yes" sau "no". Astfel, linia completa pentru definirea a doua cadre orizontale va fi urmatoarea:
<FRAMESET ROWS="70%,*" FRAMEBORDER="no" FRAMESPACING="0">

Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia mai multe procente atributului ROWS, dar avand grija ca suma lor sa nu depaseasca 100%. La fel se procedeaza si pentru impartirea unei pagini web in cadre verticale singura
deosebire fiind aceea ca in locul atributului ROWS se foloseste atributul COLS. Nu uita de tag-ul de incheiere </FRAMESET>

Dupa ce am stabilit impartirea paginii in cadre, se trece la definirea cadrelor. Astfel intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>. Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul caruia indicam sursa cadrului. Astfel o linie de cod care defineste un cadru ar putea fi urmatoarea:
<FRAME SRC="numelepaginii.html">

Pentru a intelege mai bine utilizarea cadrelor in paginile web, vom face impreuna o pagina web cu mai multe cadre, care va arata ca in imaginea urmatoare:
cursuri

Sa ne apucam de treaba. Trebuie sa facem patru pagini web fiecare avand culoarea de background la fel cu una dintre cele patru culori din imaginea de mai sus. Apoi vom face a cincea pagina web in care vom defini cadrele si care le va contine practic pe celelalte patru pagini. Numele celor patru pagini web vor fi: rosu.html, albastru.html, galben.html si verde.html

Paginile ar trebui sa arate astfel:
rosu.html
albastru.html
galben.html
verde.html

Pentru a vedea codul sursa al fiecarei pagini alege din meniul View optiunea Page Source (in functie de browser denumirile pot diferi).

Acum sa vedem codul sursa al paginii care va contine cele patru pagini web create:
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET COLS="25%,*" FRAMEBORDER="NO" FRAMESPACING="0">
<FRAME SRC="rosu.html">
<FRAMESET ROWS="45%,35%,*" FRAMEBORDER="NO" FRAMESPACING="0">
<FRAME SRC="albastru.html">
<FRAME SRC="galben.html">
<FRAME SRC="verde.html">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>

Salveaza pagina, in acelasi folder cu celelalte patru, cu numele cadre.html

Daca totul a mers asa cum trebuie pagina ta ar trebui sa arate asa: click aici. Nu a iesit chiar ca in imagine dar important este sa intelegi cum facem o pagina web cu mai multe cadre.

Nu uita sa definesti cadrele inainte de tag-ul <BODY> si sa exersezi toate notiunile invatate in aceasta lectie. Fa cat mai multe pagini web care sa fie formate din cadre.
« Tabele in HTML Crearea formularelor folosind HTML »
47 comentarii
sergiu.negru 15 august 2011, 13:55 1
SAlut! Am o intrabare.. totul am inteles bine dar am o intrebare in legatura cu
cumn se foloseste si cum se adauga spatiul intre cadre! Ajutatima va rog!
Multumesc!
  0    Raspunde
sergiu.negru 15 august 2011, 13:56 2
stiu ca se face cu ajutorul tagului framespacing... dar nu mi-e clar cum se adauga spatiul... am incercat si cu ajutorul procentelor si cifrelor si tot nu reusesc...
  1    Raspunde
Lucian.Iordache 15 august 2011, 19:09 3
@sergiu.negru: Salut Sergiu, incearca sa pui framespacing=10, dar deschide pagina in Internet Explorer pentru a vedea rezultatele, in Mozilla am testat eu si nu recunoaste atributul framespacing, dar in IE merge.
  4    Raspunde
sergiu.negru 16 august 2011, 10:08 4
Mersi!
  -2    Raspunde
sergiu.negru 16 august 2011, 10:11 5
Dar dupa parerea DV. Prin care browser e mai bine sa lucrezi in HTML?
  -1    Raspunde
Lucian.Iordache 16 august 2011, 11:51 6
@sergiu.negru: Eu folosesc Mozilla Firefox, dar unele atribute HTML nu sunt suportate, asa ca pentru a testa, e bine sa folosesti si Internet Explorer.
  2    Raspunde
KeanuReeves 14 martie 2015, 20:43 7
@sergiu.negru: Eu îţi recomand Google Chrome.
  0    Raspunde
Cipri94 27 septembrie 2011, 22:35 8
e foarte util cursul...eu l'am parcur cu cv timp in urma ....pe cand era vechiul site dar sincer am nevoie de ultima pagina ..pentru a intelege cum sa combin cadrele cu href'urile si am nevoie de ultima lectie .. mai astept dar vad ca a trecut cam mult timp ...oare sunteti asa ocupati ? ...nu inteleg ce trebuie sa mai faceti la lecii ..pentru ca erau destul de bine structurate ...
  -5    Raspunde
Lucian.Iordache 10 octombrie 2011, 05:28 9
@Cipri94: Nu m-am ocupat doar de cursul Html si de aici ... intarzierea aceasta cu publicarea ultimei lectii. Acum este online si ultima lectie, sper sa iti fie utila.
  0    Raspunde
Cipri94 27 septembrie 2011, 22:39 10
sincer trebuie sa recunosc ca am ramas putin dezamagit
  -2    Raspunde
Lucian.Iordache 10 octombrie 2011, 05:29 11
@Cipri94: Am inteles. Sper sa iti treaca, acum dupa ce este tot cursul online :)
  -1    Raspunde