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
69975 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
r4m0n4 22 octombrie 2011, 18:11 12
Buna! Am si eu o intrebare. Ce cod trebuie sa scriu pentru a pune o pagina web intr-un chenar?
  -2    Raspunde
Paul09 23 octombrie 2011, 12:09 13
Salut!
Problema este ca eu vreau o pagina impartita in mai multe sectiuni, dar in fiecare sectiune sa scriu ceva pe loc si nu sa-i dau sa copie de la alta pagina facuta in prealabil cum se pare ca este cazul prezentat de dvs. de exemplu sa o impart in doua coloane si intr-o coloana sa scriu un articol iar in cealalta sa fac o lista cu celelalte pagini ale site-ului. Multumesc anticipat.
  -1    Raspunde
EnyKey 18 aprilie 2015, 10:32 14
@Paul09: Man , foloseste "TABELE" e cu o lectie in urma ;)
  0    Raspunde
alinahodoroaba 09 noiembrie 2011, 08:35 15
am icercat sa fac un cadru simplu, adica necolorat, si imi apare o pagina alba...ce gresesc?
  -1    Raspunde
Lucian.Iordache 12 noiembrie 2011, 21:29 16
@alinahodoroaba: Daca nu i-ai pus border, nu are cum sa se vada, asa apare o pagina goala, alba ...
  -1    Raspunde
Coki 12 noiembrie 2011, 15:16 17
Salut!
Am si eu nevoie de umpic de ajutor!Sa zicem ca am cadrul1 si cadrul 2
Cum fac ca pentru accesarea unui link din cadrul 1 sa se modifice pagina in cadrul 2?
  -2    Raspunde
Lucian.Iordache 12 noiembrie 2011, 21:28 18
@Coki: Salut! Nu prea am inteles intrebarea. Da-mi fisierul pe contac@ecursuri.ro si spune-mi exact ce trebuie sa se intample.
  0    Raspunde
Coki 13 noiembrie 2011, 11:11 19
@Lucian.Iordache: Multumesc! am gasit intre timp raspunsul la intrebarea mea:)
  -1    Raspunde
bada208 26 noiembrie 2011, 13:40 20
DE CE CAND FAC APARTE "PROGRAMUL" PT CADRE IMI MERGE IAR CAND IL INTRODUC INTR-O ALTA PAGINA WEB NU SE MAI INTAMPLA NIMIC?
  -1    Raspunde
Lucian.Iordache 31 ianuarie 2012, 07:24 21
@bada208: Probabil este o greseala in codul folosit. Daca inca te mai lovesti de problema asta, revin-o cu un comentariu si o rezolvam cumva :)
  -1    Raspunde
mihai19 04 decembrie 2011, 14:19 22
buna.am si eu o intrebare...cum aliniez un cadru in dreapta paginii?
  -5    Raspunde
Ilie@@ 15 ianuarie 2012, 22:17 23
coki spune te rog spune cum ai rezlvat problema, ca mam intilnit si eu cu ea....
  -1    Raspunde
Ana-Maria 15 februarie 2012, 14:16 24
Imi puteti spune o tema pentru atestat?:(
  -1    Raspunde
tnick_24 19 februarie 2012, 22:20 25
salut.am si eu o intrebare.imi poti spune te rog cum fac rezolutia paginei de ex.cum e la voi sa imi apara pagina pe mijloc cu margini (nu pe tot display ul)si sa pot lasa marginile cum e la voi pe site bg portocaliu. ca asa sunt majoritatea siturilor.ms.
  -1    Raspunde
Lucian.Iordache 06 martie 2012, 07:59 26
@tnick_24: Poti folosi un tabel in care sa pui continutul paginii. Tabelul va fi de forma: table width="980" align="center" ... astfel latimea paginii va fi de 980px si va fi centrat in pagina, indiferent de rezolutie. Pentru background folosesti la tagul BODY fie atributul BGCOLOR (culoare), fie atributul BACKGROUND (pentru a adauga o imagine).
  0    Raspunde
Fusion 09 martie 2012, 19:44 27
Foarte util cursul.O treaba foarte buna
Doar o intrebare,daca am o poza pe background si vreu sa fac un cadru/cadre transparent(e), cum fac?
  -1    Raspunde
Lucian.Iordache 16 martie 2012, 09:50 28
@Fusion: Specifica la cadrul/cadrele respective o culoare de fundal. Astfel nu se va vedea poza pe care ai folosit-o ca background.
  -1    Raspunde
florinsabin 22 martie 2012, 00:04 29
Salut. Cred ca am inteles cat de cat lectia asta pentru ca reusesc sa creez pagini cu cadre. Problema e ca nu imi iese o varianta. Vreau sa adaug un cadru verical (rows) cu 15% din pagina in partea stanga. 3 cadre orizontale (cols) 10%,*,10% si din nou un cadru vertical 15% in partea dreapta. Problema e ca nu imi iese in nici un mod. Vreo idee?
  -1    Raspunde
Lucian.Iordache 28 martie 2012, 12:12 30
@florinsabin: Adica sa fie exact ca in tabelul colorat din lectie, doar ca in dreapta sa mai fie inca un cadru. Corect?
  -1    Raspunde
florinsabin 30 martie 2012, 19:14 31
@Lucian.Iordache: Da. Dar nu mai este nevoie. Mi-am dat seama pana la urma :D
  -1    Raspunde
Cryssti 02 iunie 2012, 13:41 32
Am o nelamurire: am facut 2 pagini html in care am prezentare scrisa (prima pag) si galerie foto (a doua pag. Problema mea este ca linkul catre pag 2 merge dar invers nu vrea. Cum sa fac? Daca includ linkul intre tagurile body si/body impreuna sau fara liniiile de comanda pt cadre imi dispar cadrele dar ramane linku. Ce oare am omis? Vreau sa am link pe fiecare poza daca se poate. Multumesc.
  -1    Raspunde
f.baltateanu 20 iulie 2012, 11:52 33
Buna, sper sa nu sune "dummy" intrebarea mea. Dar ziceai ceva mai sus de aranjarea continutului folosind tabele. Se pot pune freamurile in tabel?
  0    Raspunde
Raulxytz 02 august 2012, 19:28 34
De ce linkul paginilor mele web sunt adrese locale din computerul meu?
  0    Raspunde
Alienplayer 03 august 2012, 09:48 35
Buna, am si eu o intrebare care este diferenta dintre div si FRAMESET?
  0    Raspunde
florin_84_84 05 octombrie 2012, 15:26 36
Buna ziua,felicitari pentru site.Am si eu o intrbare,pana aici totul a mers bine,dar la codul cu cele 4 pagini dupa ce le salvez nu imi apare nici o culoare pe pagina,imi scrie ceva erori.Ma puteti ajuta? Va multumesc.
  0    Raspunde
florin_84_84 05 octombrie 2012, 15:46 37
Am gasit raspunsul la intrebare.Multumesc frumos.Felicitari inca o data pentru site.
  0    Raspunde
adrian91 06 ianuarie 2013, 14:01 38
eu vreau sa fac o pagina cu 4 cadre in mod egal am adaugat 2 randuri si 2 coloane si nu imi merge ma ajuta careva?
  0    Raspunde
porumbel 26 martie 2013, 14:54 39
buna ziua!am un proiect la scoala despre spatiu si timp:) ce vrea sa insemne asta? astept sugestii. multumesc anticipat:*
  0    Raspunde
SFConstantyn 13 aprilie 2013, 13:07 40
vreau sa pun un tag ancora pe meniu ca sa-mi schimbe in cuprins. ce ar trebui sa pun la target?
  0    Raspunde
eliseil 10 mai 2013, 00:29 41
va rog...ajutati-ma....am facut 3 cadre...primul e sus....si are niste poze...nu ma intereseaza ala...dar...mai am inca 2 cadre....jos...30%,70%....si faza e ca....am mai multe chestii in cadrul din stanga....am un cuprins...am facut si acele pagini separat...dar vreaus a ma ajutati ...ca atunci cand dau click pe ceva din cuprins ...sa imi apara in cadranul din dreapta acel fisier....va rog...am nevoie urgent....va multumesc!
  0    Raspunde
flap93 26 octombrie 2013, 10:32 42
salut..am si eu o intrebare... am de facut un site in html.. si nu imi arata cum trebuie cadrele.. cand pun tag-ul frameset rows="20,*" si frame src="" imi arata pe toata pagina.. imi poti spune ce trebuie sa fac??
  0    Raspunde
flap93 26 octombrie 2013, 10:35 43
Scrie aici comentariul tau
  0    Raspunde
Alexandra.Ioana 25 aprilie 2014, 22:00 44
Buna! Cum fac sa scriu in fiecare cadran in parte?
  0    Raspunde
Bogdi13 25 mai 2014, 17:43 45
Salut!
Felicitari pentru aceste cursuri!
Le-am parcurs intr-o zi.Iti sunt recunoscator!
  0    Raspunde
Misterio92 12 iulie 2014, 17:19 46
Stie cineva o alternativa la FRAMESPACING,nu mi-l vede in Mozilla si Chrome?.Il vade doar in IE.
  0    Raspunde
tzyu 14 decembrie 2014, 00:33 47
cum pot scrie in cadrane?
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera
7 lectii online
Excel prin exemple
10 lectii online
Windows XP prin exemple
10 lectii online
Infiintarea unei firme
6 lectii online
Gramatica limbii engleze
27 lectii online
Introducere in e-Business
25 lectii online
Curs de Machiaj
13 lectii online
Curs de Fashion
17 lectii online
Curs de Barman
10 lectii online
HTML pe intelesul tuturor
11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro Cursuri și certificări GDPR