Folosirea cadrelor intr-o pagina web » HTML pe intelesul tuturor


	Am uitat utilizatorul Am uitat parola

Cursuri online
Cursuri online gratuite

Tutoriale
Cum sa faci orice

Teste online
Testeaza-ti cunostintele

Revista
Aboneaza-te gratuit

Referate
Descarca referate

Jocuri
Jocuri educative

Inregistreaza-te
Intra in comunitate

eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 9

Folosirea cadrelor intr-o pagina web

4774 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:

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:

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:

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 »

29 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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	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.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sergiu.negru 16 august 2011, 10:08	4
	Mersi!
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sergiu.negru 16 august 2011, 10:11	5
	Dar dupa parerea DV. Prin care browser e mai bine sa lucrezi in HTML?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	Cipri94 27 septembrie 2011, 22:35	7
	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 ...
		-3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 10 octombrie 2011, 05:28	8
	@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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	Cipri94 27 septembrie 2011, 22:39	9
	sincer trebuie sa recunosc ca am ramas putin dezamagit
		-1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 10 octombrie 2011, 05:29	10
	@Cipri94: Am inteles. Sper sa iti treaca, acum dupa ce este tot cursul online :)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	r4m0n4 22 octombrie 2011, 18:11	11
	Buna! Am si eu o intrebare. Ce cod trebuie sa scriu pentru a pune o pagina web intr-un chenar?
		-2 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Paul09 23 octombrie 2011, 12:09	12
	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.
		-2 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alinahodoroaba 09 noiembrie 2011, 08:35	13
	am icercat sa fac un cadru simplu, adica necolorat, si imi apare o pagina alba...ce gresesc?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 12 noiembrie 2011, 21:29	14
	@alinahodoroaba: Daca nu i-ai pus border, nu are cum sa se vada, asa apare o pagina goala, alba ...
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Coki 12 noiembrie 2011, 15:16	15
	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?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 12 noiembrie 2011, 21:28	16
	@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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	Coki 13 noiembrie 2011, 11:11	17
	@Lucian.Iordache: Multumesc! am gasit intre timp raspunsul la intrebarea mea:)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	bada208 26 noiembrie 2011, 13:40	18
	DE CE CAND FAC APARTE "PROGRAMUL" PT CADRE IMI MERGE IAR CAND IL INTRODUC INTR-O ALTA PAGINA WEB NU SE MAI INTAMPLA NIMIC?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 31 ianuarie 2012, 07:24	19
	@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 :)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	mihai19 04 decembrie 2011, 14:19	20
	buna.am si eu o intrebare...cum aliniez un cadru in dreapta paginii?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Ilie@@ 15 ianuarie 2012, 22:17	21
	coki spune te rog spune cum ai rezlvat problema, ca mam intilnit si eu cu ea....
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Ana-Maria 15 februarie 2012, 14:16	22
	Imi puteti spune o tema pentru atestat?:(
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	tnick_24 19 februarie 2012, 22:20	23
	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.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 06 martie 2012, 07:59	24
	@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 Ai votat deja acest comentariu!Multumim pentru votul tau!

	Fusion 09 martie 2012, 19:44	25
	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?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 16 martie 2012, 09:50	26
	@Fusion: Specifica la cadrul/cadrele respective o culoare de fundal. Astfel nu se va vedea poza pe care ai folosit-o ca background.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	florinsabin 22 martie 2012, 00:04	27
	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?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 28 martie 2012, 12:12	28
	@florinsabin: Adica sa fie exact ca in tabelul colorat din lectie, doar ca in dreapta sa mai fie inca un cadru. Corect?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	florinsabin 30 martie 2012, 19:14	29
	@Lucian.Iordache: Da. Dar nu mai este nevoie. Mi-am dat seama pana la urma :D
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!